/* =============================================================================
   componentes/cookies.css — Consentimiento de cookies  (componentes/_cookies.php)
   -----------------------------------------------------------------------------
   El aviso flotante de la primera visita y el panel inferior "Configurar cookies".
   Mismo acabado que las barras fijas del rediseño (cristal esmerilado, píldoras,
   degradado corporativo) y el panel es hermano del de "Guardar en…" de favoritos.
   Su z-index de offcanvas, con los demás, en layout.css.
   ============================================================================= */

/* ---------- AVISO ----------
   Tarjeta flotante abajo a la izquierda (el chat de oct8ne vive abajo a la derecha). NO tapa la
   página ni bloquea la navegación: la AEPD no admite un "muro" de cookies para elegir.

   APILADO: 1048, por encima de la barra de contacto (1045) y del velo del buscador (1046),
   y por debajo de modales y paneles. */
.ss-cookies {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1048;
    width: min(25rem, calc(100vw - 2rem));
    padding: 1.25rem 1.25rem .85rem;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .18);
    animation: ss-cookies-entra .35s cubic-bezier(.2, .8, .2, 1) both;
}

.ss-cookies[hidden] { display: none; }

.ss-cookies__cabecera {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .6rem;
}

/* El icono, en una burbuja con el degradado de la marca (el mismo carmín → azul del logo). */
.ss-cookies__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ss-first-color, #c10049), var(--ss-second-color, #1a2b6d));
    color: #fff;
    font-size: 1.05rem;
}

.ss-cookies__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.ss-cookies__texto {
    margin-bottom: 1rem;
    font-size: .875rem;
    line-height: 1.45;
    color: #495057;
}

/* El aviso vive fuera de <main>, donde no llega la regla general de enlaces de base.css: sin
   esto saldría el azul de Bootstrap. */
.ss-cookies__texto a { color: var(--ss-first-color, #c10049); }

/* Aceptar y Rechazar, MISMO botón y mismo ancho: la AEPD pide que rechazar sea tan fácil y tan
   visible como aceptar. */
.ss-cookies__botones {
    display: flex;
    gap: .5rem;
}
.ss-cookies__botones .btn { flex: 1 1 0; }

.ss-cookies__configurar {
    display: block;
    margin: .45rem auto 0;
    padding: .25rem .75rem;
    font-size: .875rem;
    color: var(--ss-first-color, #c10049);
    text-decoration: none;
}
.ss-cookies__configurar:hover,
.ss-cookies__configurar:focus-visible {
    color: var(--ss-first-color, #c10049);
    text-decoration: underline;
}

@keyframes ss-cookies-entra {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: none; }
}

/* Móvil: de lado a lado, pegado abajo, como una hoja. */
@media (max-width: 575.98px) {
    .ss-cookies {
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        width: auto;
        padding: 1.1rem 1.1rem .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-cookies { animation: none; }
}

/* ---------- PANEL "CONFIGURAR COOKIES" ----------
   Sube desde abajo con la altura de su contenido (como "Guardar en…"), con las esquinas de
   arriba redondeadas, y el contenido a un ancho de lectura centrado en pantallas grandes. */
#ss-cookies-panel {
    height: auto;
    max-height: 88vh;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

.ss-cookies-panel__ancho {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 44rem;
    min-height: 0;
    max-height: 88vh;
    margin-inline: auto;
}

#ss-cookies-panel .offcanvas-body { overflow-y: auto; }

.ss-cookies-panel__intro {
    font-size: .9rem;
    color: #6c757d;
}

/* Una fila por categoría: el texto a la izquierda y el interruptor a la derecha, alineado con
   el título. */
.ss-cookies-cat {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid #f1f3f5;
}

.ss-cookies-cat__titulo {
    margin: 0 0 .2rem;
    font-weight: 600;
}

/* "Siempre activas": distintivo pequeño, como los de las sugerencias del buscador. */
.ss-cookies-cat__siempre {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .45rem;
    border: 1px solid currentColor;
    border-radius: 50rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.4;
    color: #198754;
    vertical-align: .1em;
}

.ss-cookies-cat__desc {
    margin: 0 0 .25rem;
    font-size: .875rem;
    line-height: 1.45;
    color: #495057;
}

.ss-cookies-cat__servicios {
    margin: 0;
    font-size: .78rem;
    color: #adb5bd;
}

/* Interruptor algo más grande que el de Bootstrap: es lo único que se toca en el panel. */
.ss-cookies-cat .form-switch .form-check-input {
    width: 2.6em;
    height: 1.4em;
    margin: .1rem 0 0;
    cursor: pointer;
}
.ss-cookies-cat .form-switch .form-check-input:disabled {
    cursor: default;
    opacity: .45;
}

/* Pie fijo con las tres acciones. En móvil, una debajo de otra si no caben. */
.ss-cookies-panel__pie {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
}
.ss-cookies-panel__pie .btn { flex: 1 1 auto; }

/* ---------- ENLACE DEL PIE ----------
   "Configurar cookies" es un botón (abre el panel, no lleva a otra página) vestido igual que
   los enlaces legales que tiene al lado. */
.ss-pie-cookies {
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}