/*
 * consentimiento.css — Decibelio
 * Tema hijo: blocksy-child
 * Banner de consentimiento de cookies (Opción C — componente propio, sin plugin).
 * Carga: global · el JS decide cuándo se muestra. Depende de: variables.css.
 *
 * Anti dark-pattern: los dos botones (Aceptar / Rechazar) son GEMELOS —
 * misma piel, mismo tamaño, mismo peso. Ninguno se favorece con color.
 * El verde solo aparece en el foco de teclado (:focus-visible).
 */

/* ============================================================
   BANNER — franja fija inferior a ancho completo
   ============================================================ */
.db-consent {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 9990;   /* sobre el contenido; el offcanvas de Blocksy queda por encima */
    background-color: var(--color-gris-oscuro);
    color: var(--color-blanco);
    padding: 1.25rem var(--padding-contenedor);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);   /* negro de sombra, sin token (patrón del proyecto) */
}

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

.db-consent__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}

/* ============================================================
   TEXTO
   ============================================================ */
.db-consent__texto {
    flex: 1 1 22rem;
    min-width: 0;
}

.db-consent__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-base);
    font-weight: var(--peso-bold);
    margin: 0 0 0.35rem;
}

.db-consent__cuerpo {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    line-height: 1.6;
    color: var(--color-blanco-80);
    margin: 0 0 0.5rem;
}

.db-consent__enlace {
    font-size: var(--texto-pequeño);
    color: var(--color-blanco);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.db-consent__enlace:hover {
    color: var(--color-verde);
}

/* ============================================================
   BOTONES — gemelos: misma piel, mismo peso, sin favorecer a ninguno
   ============================================================ */
.db-consent__acciones {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.db-consent__btn {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    font-weight: var(--peso-bold);
    letter-spacing: 0.02em;
    padding: 0.7rem 1.75rem;
    border-radius: var(--radio-boton);
    border: 2px solid var(--color-blanco);
    background-color: transparent;
    color: var(--color-blanco);
    cursor: pointer;
    transition: background-color var(--transicion-rapida), color var(--transicion-rapida);
}

@media (hover: hover) {
    .db-consent__btn:hover {
        background-color: var(--color-blanco);
        color: var(--color-gris-oscuro);
    }
}

.db-consent__btn:focus-visible {
    outline: 2px solid var(--color-verde);
    outline-offset: 2px;
}

/* Botón "Gestionar cookies" del footer — reset para que se vea como los enlaces legales */
.db-consent-gestionar {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ============================================================
   RESPONSIVE — móvil: botones a ancho completo
   ============================================================ */
@media (max-width: 600px) {
    .db-consent__acciones {
        width: 100%;
    }
    .db-consent__btn {
        flex: 1 1 0;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .db-consent__btn {
        transition: none;
    }
}