/* ============================================================
   CPR — Aviso de cookies
   Markup: inc/components/cpr-cookies.php · JS: assets/js/cookies.js
   Encolado global (todas las páginas) desde assets-loader.php.
   Depende de: tokens.css

   - position:fixed abajo → no mueve el contenido (CLS 0).
   - z-index 9500: sobre el WhatsApp flotante (999) y bajo el menú
     móvil y el popup de reserva (9999), para no tapar sus botones.
   - Aceptar (primario) primero; Rechazar (.cpr-cookies-btn-secundario)
     con colores de botón secundario pero el MISMO tamaño, borde y
     tipografía: rechazar tiene que ser igual de fácil que aceptar.
   - En páginas con Astra (checkout, paneles) Astra pinta todo
     <button> en verde lima y mayúsculas, también en :hover/:focus:
     por eso cada estado fija fondo, color, borde y transformación
     con el prefijo .cpr-cookies.
   ============================================================ */

.cpr-cookies[hidden] { display: none !important; }

.cpr-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9500;
    padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    font-family: var(--font-sans);
    pointer-events: none;
}

.cpr-cookies *,
.cpr-cookies *::before,
.cpr-cookies *::after {
    box-sizing: border-box;
    font-family: inherit;
}

.cpr-cookies-inner {
    pointer-events: auto;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--white);
    color: var(--text-body);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.cpr-cookies-titulo {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--text-strong);
}

.cpr-cookies-texto,
.cpr-cookies-estado {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.cpr-cookies-estado {
    margin-top: var(--space-2);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.cpr-cookies-texto a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cpr-cookies-texto a:hover { color: var(--color-primary-hover); }

.cpr-cookies-acciones {
    display: flex;
    gap: var(--space-3);
}

.cpr-cookies .cpr-cookies-btn,
.cpr-cookies .cpr-cookies-btn:hover,
.cpr-cookies .cpr-cookies-btn:focus,
.cpr-cookies .cpr-cookies-btn:active {
    flex: 1 1 0;
    min-height: 44px;
    margin: 0;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--green-600);
    border-radius: var(--radius-sm);
    background: var(--green-600);
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.cpr-cookies .cpr-cookies-btn:hover {
    background: var(--brown-700);
    border-color: var(--brown-700);
}

/* Rechazar: colores de botón secundario del sistema (borde --green-600,
   texto --green-800, hover --green-100). Mismo tamaño, borde, tipografía
   y área táctil que Aceptar: solo cambia el color, no el peso. Fija
   todos los estados por Astra (ver cabecera). */
.cpr-cookies .cpr-cookies-btn-secundario,
.cpr-cookies .cpr-cookies-btn-secundario:focus,
.cpr-cookies .cpr-cookies-btn-secundario:active {
    background: var(--white);
    border-color: var(--green-600);
    color: var(--green-800);
}

.cpr-cookies .cpr-cookies-btn-secundario:hover {
    background: var(--green-100);
    border-color: var(--green-600);
    color: var(--green-800);
}

.cpr-cookies .cpr-cookies-btn:focus { outline: none; }

.cpr-cookies .cpr-cookies-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .cpr-cookies {
        padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }

    .cpr-cookies-inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-4) var(--space-5);
    }

    .cpr-cookies-cuerpo { flex: 1 1 auto; }

    .cpr-cookies-acciones {
        flex: 0 0 auto;
        flex-direction: column;
        gap: var(--space-2);
        min-width: 150px;
    }
}

@media print {
    .cpr-cookies { display: none !important; }
}