/* ========================================================================== CONSENT.CSS Banner de consentimiento de cookies (Fase 6). Se inyecta vía js/consent.js como último elemento de cuando no hay una decisión previa guardada. Requiere base.css cargado antes (usa sus custom properties). ========================================================================== */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); background-color: var(--color-primary-900); color: var(--color-text-inverse-muted); box-shadow: var(--shadow-xl); } .cookie-banner__text { flex: 1 1 320px; font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; } .cookie-banner__text a { color: var(--color-text-inverse); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); } .cookie-banner__text a:hover { text-decoration-color: currentColor; } .cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); flex-shrink: 0; } /* Sobre el fondo oscuro del banner, el botón ghost por defecto (pensado para fondos claros) no tiene contraste suficiente: se ajusta aquí puntualmente. */ .cookie-banner .btn--ghost { color: var(--color-text-inverse); } .cookie-banner .btn--ghost:hover { background-color: rgba(255, 255, 255, 0.12); } @media (max-width: 640px) { .cookie-banner { flex-direction: column; align-items: stretch; text-align: left; } .cookie-banner__actions { justify-content: flex-end; } }