/* =======================================================
   PANEL DE CONFIGURACIÓN DE COOKIES
   Ayuntamiento de Güevéjar
======================================================= */


/* ===== FONDO OSCURO ===== */

.cookie-modal-overlay{
    position:fixed;
    inset:0;
    z-index:99999;

    display:none;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.60);
}

.cookie-modal-overlay.active{
    display:flex;
}


/* ===== VENTANA ===== */

.cookie-modal{
    position:relative;

    width:100%;
    max-width:750px;
    max-height:90vh;

    padding:35px;

    overflow-y:auto;

    background:#ffffff;
    border-radius:14px;

    box-shadow:0 15px 50px rgba(0,0,0,.25);
}


/* ===== BOTÓN CERRAR SUPERIOR ===== */

.cookie-modal-close{
    position:absolute;
    top:12px;
    right:18px;

    padding:0;

    border:0;
    background:none;

    color:#555555;
    font-size:2rem;
    line-height:1;

    cursor:pointer;
}

.cookie-modal-close:hover{
    color:#b8860b;
}


/* ===== TÍTULO ===== */

.cookie-modal h2{
    margin:0 40px 10px 0;

    color:#315f4c;
    font-size:1.7rem;
    font-weight:700;
}

.cookie-modal-intro{
    margin-bottom:28px;

    color:#555555;
    line-height:1.7;
}


/* ===== CATEGORÍAS ===== */

.cookie-category{
    margin-bottom:20px;

    overflow:hidden;

    border:1px solid #e2e2e2;
    border-radius:10px;

    background:#ffffff;
}

.cookie-category-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:20px;

    background:#f8f9fa;
}

.cookie-category-header h3{
    margin:0 0 5px;

    color:#1f2d3d;
    font-size:1.1rem;
    font-weight:700;
}

.cookie-category-header span{
    color:#666666;
    font-size:.95rem;
}


/* ===== ESTADOS ===== */

.cookie-always-active{
    flex-shrink:0;

    padding:7px 13px;

    border-radius:20px;

    background:#315f4c;

    color:#ffffff;
    font-size:.85rem;
    font-weight:700;
}

.cookie-not-used{
    flex-shrink:0;

    padding:7px 13px;

    border-radius:20px;

    background:#e9ecef;

    color:#555555;
    font-size:.85rem;
    font-weight:700;
}


/* ===== DETALLES ===== */

.cookie-details{
    padding:20px;

    color:#444444;
    line-height:1.7;
}

.cookie-details p{
    margin:0 0 15px;
}


/* ===== INFORMACIÓN DE COOKIE ===== */

.cookie-info-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);

    gap:12px;
}

.cookie-info-grid div{
    padding:12px;

    border-radius:7px;

    background:#f8f9fa;
}

.cookie-info-grid strong{
    display:block;

    margin-bottom:3px;

    color:#1f2d3d;
    font-size:.85rem;
}

.cookie-info-grid span{
    color:#555555;
}


/* ===== PIE DEL PANEL ===== */

.cookie-modal-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-top:28px;
    padding-top:20px;

    border-top:1px solid #eeeeee;
}

.cookie-policy-link{
    color:#315f4c;
    font-weight:600;
    text-decoration:none;
}

.cookie-policy-link:hover{
    color:#b8860b;
    text-decoration:underline;
}

.cookie-close-button{
    padding:10px 25px;

    border:0;
    border-radius:6px;

    background:#315f4c;

    color:#ffffff;
    font-weight:700;

    cursor:pointer;

    transition:all .25s ease;
}

.cookie-close-button:hover{
    background:#b8860b;
}


/* ===== RESPONSIVE ===== */

@media (max-width:600px){

    .cookie-modal{
        padding:28px 20px;
    }

    .cookie-modal h2{
        font-size:1.4rem;
    }

    .cookie-category-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .cookie-info-grid{
        grid-template-columns:1fr;
    }

    .cookie-modal-footer{
        align-items:stretch;
        flex-direction:column;
        text-align:center;
    }

    .cookie-close-button{
        width:100%;
    }

}