/* CRZ Consent — banner/panel. Sistema de diseño HEXA. Sin layout shift (fixed). */ .crz-consent-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 2147483000; } /* Tokens del sistema de diseño. Se declaran también en .crz-consent-reopen porque ese botón se imprime como HERMANO de #crz-consent-root (hijo directo de ) y por tanto queda fuera de este scope. Sin esto, cada var() que use el botón no resuelve y el navegador descarta la declaración completa (IACVT), dejándolo sin color, sin borde y con el fondo transparente en :hover. */ #crz-consent-root, .crz-consent-reopen { --crz-navy: #163242; --crz-red: #E5332A; /* Acento de la interfaz del visitante (botón primario y switches). */ --crz-accent: #1d4ed8; --crz-accent-hover: #1e40af; --crz-ink: #0f172a; --crz-ink-soft: #475569; --crz-border: #e5e7eb; --crz-surface: #ffffff; --crz-off: #f1f5f9; } #crz-consent-root { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--crz-ink); line-height: 1.5; } /* El JS oculta y muestra las piezas con la propiedad `hidden`, pero la regla de UA `[hidden] { display: none }` tiene la misma especificidad (0-1-0) que `.crz-consent-banner { display: flex }` y pierde por venir de la hoja del navegador. Resultado: al abrir el panel, `banner.hidden = true` no surtía efecto y el banner seguía visible por detrás —además por encima del overlay, que queda en un z-index inferior—, así que se veían las dos capas superpuestas. Con el descendiente de id (1-1-0) `hidden` vuelve a mandar sobre cualquier display declarado aquí, sin necesidad de !important. */ #crz-consent-root [hidden] { display: none; } /* --------------------------- Banner --------------------------- */ .crz-consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 1100px; z-index: 2147483001; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 24px; background: var(--crz-surface); border: 1px solid var(--crz-border); border-radius: 14px; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); } .crz-consent-banner__body { flex: 1 1 420px; min-width: 260px; } .crz-consent-banner__title { margin: 0 0 6px; font-size: 16px; font-weight: 650; color: var(--crz-navy); } .crz-consent-banner__msg { margin: 0; font-size: 13.5px; color: var(--crz-ink-soft); } .crz-consent-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; } /* Igual jerarquía visual: mismo tamaño/padding para aceptar, rechazar y personalizar. */ .crz-consent-btn { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 10px 18px; border-radius: 9px; border: 1px solid var(--crz-navy); background: #fff; color: var(--crz-navy); transition: background .15s, border-color .15s, color .15s; min-width: 130px; text-align: center; } .crz-consent-btn:hover { background: var(--crz-off); } .crz-consent-btn--primary { background: var(--crz-accent); border-color: var(--crz-accent); color: #fff; } .crz-consent-btn--primary:hover { background: var(--crz-accent-hover); border-color: var(--crz-accent-hover); } .crz-consent-btn:focus-visible { outline: 3px solid rgba(22, 50, 66, .35); outline-offset: 2px; } /* --------------------------- Panel --------------------------- */ .crz-consent-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); overflow-y: auto; z-index: 2147483002; background: var(--crz-surface); border-radius: 14px; box-shadow: 0 20px 50px rgba(15, 23, 42, .28); padding: 24px; } .crz-consent-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .crz-consent-panel__title { margin: 0; font-size: 17px; font-weight: 650; color: var(--crz-navy); } .crz-consent-panel__close { font: inherit; font-size: 24px; line-height: 1; background: none; border: none; color: var(--crz-ink-soft); cursor: pointer; padding: 4px 8px; border-radius: 8px; } .crz-consent-panel__close:hover { background: var(--crz-off); color: var(--crz-navy); } .crz-consent-panel__close:focus-visible { outline: 3px solid rgba(22, 50, 66, .35); outline-offset: 2px; } .crz-consent-cat { padding: 14px 0; border-top: 1px solid var(--crz-border); } .crz-consent-cat:first-child { border-top: none; } .crz-consent-cat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .crz-consent-cat__label { font-size: 14px; font-weight: 600; color: var(--crz-ink); } .crz-consent-cat__on { font-size: 12px; font-weight: 600; color: #16a34a; } .crz-consent-cat__desc { margin: 6px 0 0; font-size: 13px; color: var(--crz-ink-soft); } .crz-consent-panel__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } /* --------------------------- Switch --------------------------- */ .crz-consent-switch { position: relative; display: inline-flex; width: 44px; height: 24px; flex: 0 0 auto; cursor: pointer; } .crz-consent-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .crz-consent-switch__slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .15s; } .crz-consent-switch__slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; } .crz-consent-switch input:checked + .crz-consent-switch__slider { background: var(--crz-accent); } .crz-consent-switch input:checked + .crz-consent-switch__slider::before { transform: translateX(20px); } .crz-consent-switch input:focus-visible + .crz-consent-switch__slider { outline: 3px solid rgba(22, 50, 66, .35); outline-offset: 2px; } /* ------------------------ Botón reabrir ----------------------- */ /* Vive fuera de #crz-consent-root, en un con el tema activo: todo var() lleva fallback literal para que una declaración no pueda caerse en silencio. */ .crz-consent-reopen { position: fixed; left: 16px; bottom: 16px; z-index: 2147482999; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--crz-navy, #163242); background: var(--crz-surface, #ffffff); border: 1px solid var(--crz-border, #e5e7eb); border-radius: 999px; padding: 8px 14px; box-shadow: 0 4px 14px rgba(15, 23, 42, .14); cursor: pointer; } /* El color se fija en TODOS los estados interactivos y con especificidad de id. El tema (Astra) define `button:hover, button:focus { color: ... }`, que de otro modo gana en esos estados y deja el texto y el icono invisibles: tras hacer clic el botón conserva el foco, así que el efecto persiste incluso sin el cursor encima. El icono y el texto se fuerzan a heredar del botón por el mismo motivo. */ #crz-consent-reopen.crz-consent-reopen:hover, #crz-consent-reopen.crz-consent-reopen:focus, #crz-consent-reopen.crz-consent-reopen:focus-visible, #crz-consent-reopen.crz-consent-reopen:active { color: var(--crz-navy, #163242); background: var(--crz-off, #f1f5f9); border-color: var(--crz-border, #e5e7eb); } #crz-consent-reopen.crz-consent-reopen > * { color: inherit; -webkit-text-fill-color: currentColor; } #crz-consent-reopen.crz-consent-reopen:focus-visible { outline: 3px solid rgba(22, 50, 66, .35); outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } @media (max-width: 640px) { .crz-consent-banner { padding: 16px; } .crz-consent-banner__actions { width: 100%; } .crz-consent-btn { flex: 1 1 auto; min-width: 0; } .crz-consent-reopen__txt { display: none; } /* En móvil la esquina inferior izquierda ya la ocupa el widget de accesibilidad del sitio, que tapaba este botón. Se centra en el borde inferior para repartirlo con los otros dos flotantes: accesibilidad a la izquierda, WhatsApp a la derecha. Sin `right: auto` el botón heredaría un ancho entre left y right; se deja explícito para que el centrado no dependa de ello. */ .crz-consent-reopen { left: 50%; right: auto; transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .crz-consent-btn, .crz-consent-switch__slider, .crz-consent-switch__slider::before { transition: none; } }