/*==================================================
    SISTEMA DE CONSENTIMIENTO DE COOKIES
    Usa las mismas variables (--surface, --text, --border,
    --primary...) que el resto del sitio, así que se adapta
    solo a modo claro/oscuro sin reglas extra.
==================================================*/

.cookies-banner,
.cookies-modal-overlay{

    --cookies-max-width: 1100px;

}

/* ---------- Banner inferior ---------- */

.cookies-banner{

    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:99990;

    display:flex;
    justify-content:center;

    padding:16px;

    transform:translateY(120%);
    transition:transform .5s cubic-bezier(.16,1,.3,1);

    pointer-events:none;

}

.cookies-banner.is-visible{

    transform:translateY(0);
    pointer-events:auto;

}

.cookies-banner-contenido{

    width:100%;
    max-width:var(--cookies-max-width);

    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;

    background:var(--surface, var(--background));
    color:var(--text);

    border:1px solid var(--border);
    border-radius:var(--radius-medium);
    box-shadow:var(--shadow-medium, 0 14px 40px rgba(0,0,0,.18));

    padding:22px 26px;

}

.cookies-banner-texto{

    flex:1 1 320px;

}

.cookies-banner-texto h2{

    font-size:1.05rem;
    font-weight:700;
    margin-bottom:6px;
    letter-spacing:-.01em;

}

.cookies-banner-texto p{

    font-size:.9rem;
    line-height:1.55;
    color:var(--text-secondary);
    margin:0;

}

.cookies-banner-botones{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    flex:0 0 auto;

}

/* ---------- Botones (compartidos entre banner y modal) ---------- */

.cookies-btn{

    font-family:inherit;
    font-size:.9rem;
    font-weight:600;

    padding:12px 20px;

    border-radius:var(--radius-small, 8px);
    border:1px solid transparent;

    cursor:pointer;
    white-space:nowrap;

    transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);

}

.cookies-btn-primario{

    background:var(--primary);
    color:#FFFFFF;

}

.cookies-btn-primario:hover{

    background:var(--primary-hover);

}

.cookies-btn-secundario{

    background:transparent;
    border-color:var(--border);
    color:var(--text);

}

.cookies-btn-secundario:hover{

    background:var(--background-secondary);

}

.cookies-btn-terciario{

    background:transparent;
    color:var(--text-secondary);
    text-decoration:underline;
    text-underline-offset:3px;
    border-color:transparent;

}

.cookies-btn-terciario:hover{

    color:var(--text);

}

.cookies-btn:focus-visible,
.cookies-modal-cerrar:focus-visible,
.cookies-footer-enlace:focus-visible{

    outline:2px solid var(--primary);
    outline-offset:3px;

}

/* ---------- Modal de preferencias ---------- */

.cookies-modal-overlay{

    position:fixed;
    inset:0;
    z-index:99995;

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

    padding:20px;

    background:rgba(0,0,0,.5);

    opacity:0;
    visibility:hidden;
    transition:opacity var(--transition-fast);

}

.cookies-modal-overlay.is-visible{

    opacity:1;
    visibility:visible;

}

.cookies-modal{

    width:100%;
    max-width:560px;
    max-height:min(88vh, 720px);

    overflow-y:auto;

    background:var(--surface, var(--background));
    color:var(--text);

    border-radius:var(--radius-large, 20px);
    box-shadow:var(--shadow-medium, 0 20px 60px rgba(0,0,0,.25));

    padding:28px;

    transform:translateY(16px) scale(.98);
    transition:transform var(--transition-fast);

}

.cookies-modal-overlay.is-visible .cookies-modal{

    transform:translateY(0) scale(1);

}

.cookies-modal-cabecera{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    margin-bottom:14px;

}

.cookies-modal-cabecera h2{

    font-size:1.3rem;
    font-weight:700;
    letter-spacing:-.01em;

}

.cookies-modal-cerrar{

    flex:0 0 auto;

    width:36px;
    height:36px;

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

    background:var(--background-secondary);
    border:none;
    border-radius:50%;

    font-size:1rem;
    color:var(--text-secondary);
    cursor:pointer;

    transition:background var(--transition-fast);

}

.cookies-modal-cerrar:hover{

    background:var(--border);

}

.cookies-modal-intro{

    font-size:.92rem;
    line-height:1.6;
    color:var(--text-secondary);

    margin-bottom:20px;

}

.cookies-categoria{

    padding:16px 0;
    border-top:1px solid var(--border);

}

.cookies-categoria-cabecera{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin-bottom:6px;

}

.cookies-categoria-titulo{

    font-size:.98rem;
    font-weight:600;

}

.cookies-categoria-texto{

    font-size:.86rem;
    line-height:1.55;
    color:var(--text-secondary);

}

.cookies-toggle-siempre{

    flex:0 0 auto;

    font-size:.78rem;
    font-weight:600;
    color:var(--success, #34C759);

    padding:5px 12px;

    background:rgba(52,199,89,.12);
    border-radius:100px;

}

/* ---------- Interruptor (checkbox real, estilizado) ---------- */

.cookies-switch{

    position:relative;

    flex:0 0 auto;

    width:46px;
    height:26px;

    display:inline-block;

}

.cookies-switch input{

    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    margin:0;
    cursor:pointer;

}

.cookies-switch-slider{

    position:absolute;
    inset:0;

    background:var(--border);
    border-radius:100px;

    transition:background var(--transition-fast);

    pointer-events:none;

}

.cookies-switch-slider::before{

    content:"";
    position:absolute;
    top:3px;
    left:3px;

    width:20px;
    height:20px;

    background:#FFFFFF;
    border-radius:50%;

    box-shadow:0 1px 3px rgba(0,0,0,.25);

    transition:transform var(--transition-fast);

}

.cookies-switch input:checked + .cookies-switch-slider{

    background:var(--primary);

}

.cookies-switch input:checked + .cookies-switch-slider::before{

    transform:translateX(20px);

}

.cookies-switch input:focus-visible + .cookies-switch-slider{

    outline:2px solid var(--primary);
    outline-offset:3px;

}

.cookies-switch input:disabled + .cookies-switch-slider{

    opacity:.5;
    cursor:not-allowed;

}

.cookies-modal-pie{

    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;

    margin-top:22px;
    padding-top:20px;
    border-top:1px solid var(--border);

}

/* ---------- Enlace del footer ---------- */

.cookies-footer-enlace{

    background:none;
    border:none;
    padding:0;

    margin-top:10px;
    display:inline-block;

    font-family:inherit;
    font-size:inherit;
    color:var(--text-secondary);

    text-decoration:underline;
    text-underline-offset:3px;

    cursor:pointer;

}

.cookies-footer-enlace:hover{

    color:var(--primary);

}

/* ---------- Responsive ---------- */

@media (max-width:640px){

    .cookies-banner{

        padding:10px;

    }

    .cookies-banner-contenido{

        flex-direction:column;
        align-items:stretch;

        padding:20px;

    }

    .cookies-banner-botones{

        flex-direction:column;

    }

    .cookies-banner-botones .cookies-btn{

        width:100%;
        text-align:center;

    }

    .cookies-modal{

        padding:22px;

    }

}

/* ---------- Respeto a "reducir movimiento" ---------- */

@media (prefers-reduced-motion:reduce){

    .cookies-banner,
    .cookies-modal-overlay,
    .cookies-modal,
    .cookies-switch-slider,
    .cookies-switch-slider::before{

        transition:none;

    }

}