/* ============================================================
   legal/consent.css
   Banner de cookies AEPD 2023+ — Sindicalistas de Base Canarias.
   Paleta INVERTIDA: fondo granate corporativo + tipografía/elementos en blanco.
   Inmune al CSS del sitio: usa font-size 16px en root del banner y em hijos.
   ============================================================ */

.sbc-cookie-consent {
    --granate:          #6B2731;   /* granate-marrón oscuro tipo logo SBC */
    --granate-fuerte:   #562028;   /* hover */
    --granate-oscuro:   #3F1820;   /* texto sobre fondo blanco / knob de switches */
    --fondo:            var(--granate);
    --texto:            #ffffff;
    --texto-mute:       rgba(255, 255, 255, 0.85);
    --borde:            rgba(255, 255, 255, 0.20);
    --tinte-claro:      rgba(255, 255, 255, 0.12);
    --tinte-claro-fuerte: rgba(255, 255, 255, 0.22);

    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 12000;
    width: min(480px, calc(100vw - 48px));
    max-height: calc(100vh - 56px);
    display: none;
    padding: 1.6rem 1.7rem 1.4rem;
    border-radius: 18px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    box-shadow: 0 28px 64px rgba(118, 30, 44, 0.45);
    color: var(--texto);
    font-family: "Raleway", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 15px;   /* root del banner — todo lo interno usa em */
    overflow-y: auto;  /* scroll interno si la altura excede el viewport (panel granular abierto) */
}

/* Scrollbar discreto dentro del banner */
.sbc-cookie-consent::-webkit-scrollbar { width: 8px; }
.sbc-cookie-consent::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 999px; }
.sbc-cookie-consent::-webkit-scrollbar-track { background: transparent; }

/* Borde superior — toque sutil claro sobre granate */
.sbc-cookie-consent::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.20) 60%, rgba(255, 255, 255, 0.05) 100%);
}

.sbc-cookie-consent.is-visible { display: block; }

.sbc-cookie-consent__logo {
    display: block;
    margin: 0.2em auto 0.9em;
    max-width: 150px;
    height: auto;
}

.sbc-cookie-consent__kicker {
    display: inline-flex;
    margin-bottom: 0.55em;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--tinte-claro);
    color: #ffffff;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sbc-cookie-consent h2 {
    margin: 0 0 0.45em;
    color: var(--texto);
    font-size: 1.3em;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.sbc-cookie-consent p {
    margin: 0 0 0.7em;
    color: var(--texto-mute);
    font-size: 0.98em;
    line-height: 1.5;
}

.sbc-cookie-consent a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.sbc-cookie-consent a:hover {
    text-decoration-thickness: 2px;
}

/* === Acciones === */
.sbc-cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65em;
    margin-top: 1.2em;
}

.sbc-cookie-consent button {
    flex: 1 1 0;
    min-width: 110px;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    padding: 0 1em;
    font-weight: 700;
    font-family: inherit;
    font-size: 0.95em;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Aceptar todas — botón sólido BLANCO con texto granate (alto contraste) */
.sbc-cookie-consent__accept {
    background: #ffffff;
    color: var(--granate-oscuro);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.sbc-cookie-consent__accept:hover {
    background: #fdecef;
    transform: translateY(-1px);
}

/* Solo necesarias — botón translúcido con borde blanco */
.sbc-cookie-consent__reject {
    background: var(--tinte-claro);
    color: #ffffff;
    border: 1px solid var(--borde) !important;
}
.sbc-cookie-consent__reject:hover {
    background: var(--tinte-claro-fuerte);
    border-color: rgba(255, 255, 255, 0.40) !important;
}

/* Configurar preferencias — outline blanco */
.sbc-cookie-consent__settings {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    flex-basis: 100%;
}
.sbc-cookie-consent__settings:hover {
    background: var(--tinte-claro);
    border-color: #ffffff !important;
}

/* === Panel granular de preferencias === */
.sbc-cookie-consent__panel {
    display: none;
    margin: 0.85em 0 0.2em;
    padding-top: 0.85em;
    border-top: 1px dashed var(--borde);
}
.sbc-cookie-consent__panel.is-open { display: block; }

.sbc-cookie-consent__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    margin-bottom: 0.75em;
}
.sbc-cookie-consent__item:last-child { margin-bottom: 0; }

.sbc-cookie-consent__switch {
    flex-shrink: 0;
    margin-top: 0.2em;
    position: relative;
    width: 38px;
    height: 22px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease;
}
.sbc-cookie-consent__switch::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.18s ease, background 0.18s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}
/* ON: track blanco, knob granate oscuro (invertimos) */
.sbc-cookie-consent__switch.is-on { background: #ffffff; }
.sbc-cookie-consent__switch.is-on::before {
    transform: translateX(16px);
    background: var(--granate-oscuro);
}
/* Locked (necesarias): track blanco semitransparente, sin permitir clic */
.sbc-cookie-consent__switch.is-locked {
    background: rgba(255, 255, 255, 0.55);
    cursor: not-allowed;
    opacity: 0.85;
}
.sbc-cookie-consent__switch.is-locked::before {
    background: var(--granate-oscuro);
}

.sbc-cookie-consent__item-body { flex: 1; min-width: 0; }
.sbc-cookie-consent__item-title {
    margin: 0 0 0.15em;
    font-size: 0.94em;
    font-weight: 700;
    color: #ffffff;
}
.sbc-cookie-consent__item-desc {
    margin: 0;
    font-size: 0.83em;
    line-height: 1.45;
    color: var(--texto-mute);
}
.sbc-cookie-consent__item-lock {
    display: inline-block;
    margin-left: 0.4em;
    padding: 1px 7px;
    background: var(--tinte-claro);
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--borde);
}

/* === Botón flotante de reapertura (bottom-left) ===
   Mantenido EN BLANCO porque flota sobre el sitio (no dentro del banner). Da
   buen contraste con cualquier color de fondo del sitio. */
.sbc-cookie-toggle {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 11999;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(15, 30, 50, 0.10);
    box-shadow: 0 10px 24px rgba(15, 30, 50, 0.18);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    line-height: 1;
    padding: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.sbc-cookie-toggle.is-visible { display: inline-flex; }
.sbc-cookie-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    background: #fef9fa;
}
.sbc-cookie-toggle::after {
    content: "Preferencias de cookies";
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--granate);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: "Raleway", "Open Sans", sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.sbc-cookie-toggle:hover::after { opacity: 1; }

/* === Responsive === */
/* En pantallas grandes mantenemos el banner COMPACTO (no escalamos tipografía).
   Solo subimos ligeramente el ancho para que respire. */
@media (min-width: 1280px) {
    .sbc-cookie-consent {
        width: min(500px, calc(100vw - 56px));
        padding: 1.7rem 1.8rem 1.5rem;
    }
}

@media (max-width: 640px) {
    .sbc-cookie-consent {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 1.3rem 1.3rem 1.1rem;
        border-radius: 16px;
        font-size: 14.5px;
    }
    .sbc-cookie-consent__logo { max-width: 130px; }
    .sbc-cookie-consent button { min-height: 44px; }
    .sbc-cookie-toggle {
        left: 14px;
        bottom: 14px;
        width: 48px;
        height: 48px;
        font-size: 1.35rem;
    }
    .sbc-cookie-toggle::after { display: none; }
}