/* =====================================================================
   cookies.css — Estilos del aviso (banner) y del panel de cookies.
   Para qué sirve: da forma a la barra fija inferior que pide aceptar
   o personalizar las cookies, y a la ventana modal donde el usuario
   activa/desactiva cada categoría de cookie.
   Dónde se usa: se incluye en muchas vistas (landing/términos públicos,
   panel del administrador de empresa: dashboard, nómina, disciplinario,
   reportes, seguridad social, permisos, usuarios, etc.).
   Se relaciona con: el HTML del banner (.cookie-banner / .cookie-panel)
   y el JS que muestra/oculta el banner usando el atributo [hidden] y
   guarda la preferencia elegida.
   ===================================================================== */

/* ── Variables propias del banner de cookies ────────────────
   No dependen de style.css / login.css / dashboard_admin.css
   porque no todas las vistas cargan la misma hoja de estilos.
   ─────────────────────────────────────────────────────────── */
:root {
    --cc-azul:   #1e3a5f;
    --cc-azul2:  #2563a8;
    --cc-verde:  #059669;
    --cc-gris:   #f1f5f9;
    --cc-borde:  #e2e8f0;
    --cc-texto:  #1e293b;
    --cc-suave:  #64748b;
}

/* ── Banner inferior ─────────────────────────────────────── */
/* Barra fija pegada al borde inferior de la pantalla (z-index alto para
   quedar por encima del contenido). Contiene el texto y los botones. */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: var(--cc-azul);
    color: #fff;
    padding: 1.1rem 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 -4px 18px rgba(0,0,0,.25);
    font-family: 'Inter', sans-serif;
}
/* Cuando el JS pone el atributo hidden, el banner desaparece. */
.cookie-banner[hidden] { display: none; }

/* Bloque de texto del banner: icono, mensaje y enlace a la política. */
.cookie-banner-text {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    flex: 1 1 320px;
    font-size: .88rem;
    line-height: 1.45;
    color: #e2e8f0;
}
.cookie-banner-text i {
    color: #60a5fa;
    font-size: 1.1rem;
    margin-top: .15rem;
}
.cookie-banner-text a {
    color: #93c5fd;
    text-decoration: underline;
}

/* Contenedor de botones: Aceptar / Rechazar / Personalizar. */
.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    flex: 0 0 auto;
}

/* Botón base del banner y sus dos variantes:
   - .cookie-btn-primary: verde, acción principal (aceptar).
   - .cookie-btn-outline: transparente con borde blanco (acciones secundarias). */
.cookie-btn {
    border-radius: 8px;
    padding: .55rem 1.1rem;
    font-size: .85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}
.cookie-btn-primary {
    background: var(--cc-verde);
    color: #fff;
}
.cookie-btn-primary:hover { background: #047857; }

.cookie-btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.5);
}
.cookie-btn-outline:hover {
    background: rgba(255,255,255,.12);
    border-color: #fff;
}

/* ── Panel de personalización ───────────────────────────── */
/* Fondo oscuro semitransparente que cubre toda la pantalla y centra
   la ventana de personalización. Se oculta con [hidden]. */
.cookie-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.cookie-panel-overlay[hidden] { display: none; }

/* Ventana blanca (modal) con la lista de categorías de cookies. */
.cookie-panel {
    background: #fff;
    color: var(--cc-texto);
    border-radius: 14px;
    max-width: 460px;
    width: 100%;
    max-height: min(600px, 85vh);
    padding: 1.5rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Encabezado del modal: título y botón X para cerrar. */
.cookie-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .25rem;
}
.cookie-panel-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cc-azul);
    margin: 0;
}
.cookie-panel-close {
    background: none;
    border: none;
    color: var(--cc-suave);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: .25rem;
}
.cookie-panel-close:hover { color: var(--cc-texto); }

/* Texto introductorio debajo del título del modal. */
.cookie-panel-intro {
    font-size: .85rem;
    color: var(--cc-suave);
    margin: .25rem 0 1.1rem;
}

/* Lista desplazable (scroll vertical) de categorías de cookies. */
.cookie-lista {
    overflow-y: auto;
    padding-right: .25rem;
    margin-right: -.25rem;
}

/* Cada categoría de cookie: nombre, nombre técnico (monospace),
   casilla para activarla y descripción. La casilla deshabilitada
   corresponde a las cookies necesarias, que no se pueden desactivar. */
.cookie-item {
    border: 1px solid var(--cc-borde);
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-bottom: .75rem;
}
.cookie-item:last-child { margin-bottom: 0; }
.cookie-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.cookie-item-head label {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-weight: 600;
    font-size: .92rem;
    color: var(--cc-texto);
}
.cookie-item-head input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--cc-verde);
    cursor: pointer;
}
.cookie-item-head input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .6;
}
.cookie-item p {
    margin: .4rem 0 0;
    font-size: .8rem;
    color: var(--cc-suave);
    line-height: 1.4;
}

/* Zona inferior del modal con el botón para guardar la selección. */
.cookie-panel-actions {
    margin-top: .5rem;
    display: flex;
    justify-content: flex-end;
}

/* ── Responsive ──────────────────────────────────────────── */
/* En pantallas de celular (<= 640px) el banner se apila en columna
   y los botones ocupan todo el ancho. */
@media (max-width: 640px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1rem 1.1rem;
    }
    .cookie-banner-text {
        flex: 1 1 auto;
    }
    .cookie-banner-actions {
        justify-content: stretch;
    }
    .cookie-banner-actions .cookie-btn {
        flex: 1 1 auto;
    }
}