/*!
 * REDPROMAR — Estilos del banner de consentimiento de cookies (C1)
 * Autoalojado, sin depender del build de Tailwind. Los valores de marca viven
 * una sola vez en :root (contrato de /diseno) y se referencian con var().
 * Marca congelada en tailwind.config.js; combos de contraste AA validados en
 * docs/diseno/radiografia.md.
 */
:root {
    --cc-surface: #041E55;        /* blue.ternary — texto blanco encima = 15.9:1 */
    --cc-text: #FFFFFF;
    --cc-primary: #0069B1;        /* blue.secondary — blanco encima = 5.74:1 (acción) */
    --cc-primary-hover: #55BCEA;  /* blue.light (hover) */
    --cc-primary-hover-text: #041E55;
    --cc-border: #FFFFFF;
    --cc-focus: #54CDFF;          /* blue.quaternary — foco visible sobre navy */
    --cc-font-title: 'Nunito', sans-serif;
    --cc-font-text: 'Open Sans', sans-serif;
    --cc-radius: 6px;
    --cc-space-1: 0.5rem;
    --cc-space-2: 1rem;
    --cc-space-3: 1.5rem;
    --cc-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    --cc-zindex: 2000;
    --cc-maxwidth: 1200px;
}

.cookie-consent[hidden] { display: none; }

.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--cc-zindex);
    background: var(--cc-surface);
    color: var(--cc-text);
    box-shadow: var(--cc-shadow);
    font-family: var(--cc-font-text);
    line-height: 1.45;
}

.cookie-consent__inner {
    max-width: var(--cc-maxwidth);
    margin: 0 auto;
    padding: var(--cc-space-3) var(--cc-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-2);
}

.cookie-consent__title {
    font-family: var(--cc-font-title);
    font-weight: 700;
    font-size: 1.125rem;
    margin: 0 0 var(--cc-space-1) 0;
}

.cookie-consent__text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--cc-text);
}

.cookie-consent__link {
    color: var(--cc-text);
    text-decoration: underline;
    font-weight: 600;
}

.cookie-consent__actions {
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-1);
}

/* Botones — "Aceptar" y "Rechazar" con el MISMO peso visual (sin patrón oscuro). */
.cookie-consent__btn {
    font-family: var(--cc-font-title);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    min-height: 44px;              /* >= 24x24 CSS px (WCAG 2.5.8) con margen */
    padding: 0.75rem 1.25rem;
    border-radius: var(--cc-radius);
    border: 2px solid var(--cc-border);
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.cookie-consent__btn--primary {
    background: var(--cc-primary);
    color: var(--cc-text);
    border-color: var(--cc-primary);
}

.cookie-consent__btn--secondary {
    background: transparent;
    color: var(--cc-text);
    border-color: var(--cc-border);
}

.cookie-consent__btn:hover,
.cookie-consent__btn:focus-visible {
    background: var(--cc-primary-hover);
    color: var(--cc-primary-hover-text);
    border-color: var(--cc-primary-hover);
}

/* Foco visible y de alto contraste sobre la superficie navy (WCAG 2.4.7 / 2.4.11). */
.cookie-consent__btn:focus-visible,
.cookie-consent__link:focus-visible,
.cookie-consent:focus-visible {
    outline: 3px solid var(--cc-focus);
    outline-offset: 2px;
}

/* Fallback para navegadores sin :focus-visible. */
.cookie-consent__btn:focus,
.cookie-consent__link:focus {
    outline: 3px solid var(--cc-focus);
    outline-offset: 2px;
}

/* Desktop: barra inferior con contenido en fila. */
@media (min-width: 768px) {
    .cookie-consent__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--cc-space-3);
    }
    .cookie-consent__actions {
        flex-direction: row;
        flex-shrink: 0;
    }
    .cookie-consent__btn {
        width: auto;
    }
}

/* Respeta usuarios que reducen movimiento (por si se anima la aparición). */
@media (prefers-reduced-motion: reduce) {
    .cookie-consent { transition: none; }
}

/* =========================================================================
 * C2 — Panel de preferencias (modal), switch accesible y widget flotante.
 * ========================================================================= */
:root {
    --cc-dialog-bg: #FFFFFF;
    --cc-dialog-text: #041E55;      /* ternary sobre blanco = 15.9:1 */
    --cc-dialog-muted: #3F4C63;     /* sobre blanco >= 7:1 */
    --cc-overlay: rgba(4, 30, 85, 0.6);
    --cc-switch-off: #CBD5E1;
    --cc-switch-off-border: #5B6472; /* borde >= 3:1 sobre blanco */
    --cc-switch-on: #0069B1;         /* = secondary */
    --cc-zindex-widget: 1990;
    --cc-zindex-panel: 2100;
}

.cookie-prefs[hidden] { display: none; }

.cookie-prefs {
    position: fixed;
    inset: 0;
    z-index: var(--cc-zindex-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cc-space-2);
    font-family: var(--cc-font-text);
}

.cookie-prefs__overlay {
    position: absolute;
    inset: 0;
    background: var(--cc-overlay);
}

.cookie-prefs__dialog {
    position: relative;
    background: var(--cc-dialog-bg);
    color: var(--cc-dialog-text);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    padding: var(--cc-space-3);
}

.cookie-prefs__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cc-space-2);
    margin-bottom: var(--cc-space-1);
}

.cookie-prefs__title {
    font-family: var(--cc-font-title);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0;
    color: var(--cc-dialog-text);
}

.cookie-prefs__close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    line-height: 1;
    background: transparent;
    border: 0;
    color: var(--cc-dialog-text);
    cursor: pointer;
    border-radius: var(--cc-radius);
}

.cookie-prefs__desc {
    margin: 0 0 var(--cc-space-2) 0;
    font-size: 0.95rem;
    color: var(--cc-dialog-muted);
}
.cookie-prefs__desc .cookie-consent__link { color: var(--cc-switch-on); }

.cookie-prefs__list {
    list-style: none;
    margin: 0 0 var(--cc-space-2) 0;
    padding: 0;
}

.cookie-prefs__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cc-space-2);
    padding: var(--cc-space-2) 0;
    border-top: 1px solid #E7EBF4;
}

.cookie-prefs__row-title {
    display: block;
    font-family: var(--cc-font-title);
    font-weight: 700;
    font-size: 1rem;
    color: var(--cc-dialog-text);
}

.cookie-prefs__row-desc {
    display: block;
    font-size: 0.85rem;
    color: var(--cc-dialog-muted);
}

.cookie-prefs__always {
    flex: 0 0 auto;
    font-family: var(--cc-font-title);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--cc-dialog-muted);
    white-space: nowrap;
}

/* Switch accesible (button[role=switch]); el estado se indica por posición
 * del pulgar (no solo por color). */
.cookie-switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.cookie-switch__track {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--cc-switch-off);
    border: 1px solid var(--cc-switch-off-border);
    transition: background 0.15s ease;
}
.cookie-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--cc-switch-off-border);
    transition: transform 0.15s ease;
}
.cookie-switch[aria-checked="true"] .cookie-switch__track {
    background: var(--cc-switch-on);
    border-color: var(--cc-switch-on);
}
.cookie-switch[aria-checked="true"] .cookie-switch__thumb {
    transform: translateX(20px);
    border-color: var(--cc-switch-on);
}
.cookie-switch:focus-visible,
.cookie-switch:focus,
.cookie-prefs__close:focus-visible,
.cookie-prefs__close:focus {
    outline: 3px solid var(--cc-switch-on);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .cookie-switch__track, .cookie-switch__thumb { transition: none; }
}

.cookie-prefs__actions {
    display: flex;
    flex-direction: column;
    gap: var(--cc-space-1);
}
@media (min-width: 560px) {
    .cookie-prefs__actions {
        flex-direction: row;
        justify-content: flex-end;
    }
}

/* Widget flotante para reabrir preferencias. */
.cookie-widget[hidden] { display: none; }
.cookie-widget {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: var(--cc-zindex-widget);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--cc-surface);
    color: var(--cc-text);
    border: 2px solid var(--cc-text);
    box-shadow: var(--cc-shadow);
    line-height: 0;
    cursor: pointer;
}
.cookie-widget__icon { display: block; }
.cookie-widget:hover,
.cookie-widget:focus-visible,
.cookie-widget:focus {
    background: var(--cc-primary);
    border-color: var(--cc-primary);
    outline: 3px solid var(--cc-focus);
    outline-offset: 2px;
}

/* Fix C2/C3: los botones secundarios del PANEL van sobre fondo blanco, así que
 * necesitan texto y borde oscuros (los blancos del banner quedaban invisibles). */
.cookie-prefs .cookie-consent__btn--secondary {
    color: var(--cc-dialog-text);
    border-color: var(--cc-primary);
    background: transparent;
}
.cookie-prefs .cookie-consent__btn--secondary:hover,
.cookie-prefs .cookie-consent__btn--secondary:focus-visible,
.cookie-prefs .cookie-consent__btn--secondary:focus {
    background: var(--cc-primary);
    color: var(--cc-text);
    border-color: var(--cc-primary);
}