/* ========================================================================== privacidad.css — Aviso de cookies Prefijo: .priv-* Elementos: tarjeta de aviso, texto, los dos botones de decisión Lo usa: js/utils/privacidad.js (se inyecta en ) POR QUÉ NO SE LLAMA cookie-consent.css: las listas de filtros que traen Brave y uBlock bloquean por patrón de URL cualquier ruta con `cookie-consent` dentro, porque así se llaman los scripts de los banners de cookies. Con el .js eso no era perder el banner: era `ERR_BLOCKED_BY_CLIENT` en un import de main.js, el grafo de módulos caído y la app entera en blanco. El prefijo .priv-* va por lo mismo: los filtros cosméticos también ocultan por selector. NO es un modal: no hay velo, no bloquea la página y no atrapa el foco. Un consentimiento arrancado a la fuerza no vale como consentimiento. Los dos botones tienen el MISMO peso visual a propósito. Esconder el rechazo como un enlace gris al lado de un botón de color es la forma habitual de fingir que se preguntó, y con público mayoritariamente menor de edad es justo lo que no se puede hacer. ========================================================================== */ .priv-panel { --priv-ease: cubic-bezier(0.16, 1, 0.3, 1); position: fixed; z-index: 9500; /* por debajo de las hojas modales (10000): nunca las tapa */ left: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); padding: 20px; background: var(--bg-white, #fff); border: 1px solid #E4E1DD; border-radius: var(--r-lg, 16px); box-shadow: 0 2px 6px rgba(20, 18, 33, 0.08), 0 16px 40px rgba(20, 18, 33, 0.16); color: var(--text-primary, #2B2B2B); opacity: 0; transform: translateY(12px); transition: opacity 220ms var(--priv-ease), transform 220ms var(--priv-ease); } .priv-panel.is-open { opacity: 1; transform: none; } [data-theme="dark"] .priv-panel { background: #1C1B22; border-color: #32303C; } .priv-title { margin: 0 0 8px; font-size: 1rem; font-weight: var(--fw-bold, 700); letter-spacing: -0.01em; color: var(--text-primary, #2B2B2B); } /* #5F5B57 y no --text-secondary: ese token da 3.22:1 y no pasa AA. Mismos valores que css/pages/doc.css calculó para lo mismo. */ .priv-text { margin: 0; font-size: 0.86rem; line-height: 1.6; color: #5F5B57; } [data-theme="dark"] .priv-text { color: #A5A3B4; } .priv-link { color: var(--violet, #6C2BFF); font-weight: var(--fw-semi, 600); text-underline-offset: 3px; } [data-theme="dark"] .priv-link { color: #9D86FF; } .priv-current { margin: 10px 0 0; font-size: 0.8rem; font-weight: var(--fw-semi, 600); color: #5F5B57; } [data-theme="dark"] .priv-current { color: #A5A3B4; } .priv-actions { display: flex; gap: 10px; margin-top: 16px; } .priv-btn { flex: 1 1 0; min-height: 44px; padding: 11px 14px; font-family: inherit; font-size: 0.88rem; font-weight: var(--fw-semi, 600); border-radius: var(--r-md, 12px); border: 1px solid var(--violet, #6C2BFF); background: var(--bg-white, #fff); color: var(--violet, #6C2BFF); cursor: pointer; transition: background-color 160ms var(--priv-ease), color 160ms var(--priv-ease), transform 120ms var(--priv-ease); } /* El «sí» va relleno porque es la acción que continúa el flujo, no porque valga más: ambos son del mismo tamaño, con el mismo borde y en la misma fila. */ .priv-btn[data-op="accept"] { background: var(--violet, #6C2BFF); color: #fff; } [data-theme="dark"] .priv-btn { background: transparent; border-color: #9D86FF; color: #C4B5FD; } [data-theme="dark"] .priv-btn[data-op="accept"] { background: #6C2BFF; border-color: #6C2BFF; color: #fff; } @media (hover: hover) and (pointer: fine) { .priv-btn[data-op="reject"]:hover { background: rgba(108, 43, 255, 0.08); } .priv-btn[data-op="accept"]:hover { background: var(--violet-dark, #581BE5); } } .priv-btn:active { transform: scale(0.97); } /* La opción vigente cuando ya decidiste. No se deshabilita a propósito: un botón apagado parece roto y no explica nada. Se marca como estado y sigue siendo pulsable, que además la hace idempotente. */ .priv-btn.is-current { cursor: default; box-shadow: inset 0 0 0 2px var(--violet, #6C2BFF); } [data-theme="dark"] .priv-btn.is-current { box-shadow: inset 0 0 0 2px #9D86FF; } /* Solo existe en modo preferencias. En la primera pregunta no hay equis: si la hubiera, quedaría la duda de si cerrar significa aceptar. */ .priv-close { display: block; width: 100%; margin-top: 10px; padding: 8px; border: none; background: none; font-family: inherit; font-size: 0.83rem; font-weight: var(--fw-semi, 600); color: #5F5B57; cursor: pointer; border-radius: var(--r-md, 12px); } [data-theme="dark"] .priv-close { color: #A5A3B4; } @media (hover: hover) and (pointer: fine) { .priv-close:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-primary, #2B2B2B); } } [data-theme="dark"] .priv-close:hover { background: rgba(255, 255, 255, 0.06); } .priv-close:focus-visible { outline: 2px solid var(--violet, #6C2BFF); outline-offset: 2px; } .priv-btn:focus-visible { outline: 2px solid var(--violet, #6C2BFF); outline-offset: 2px; } [data-theme="dark"] .priv-btn:focus-visible { outline-color: #9D86FF; } /* ── Móvil: hoja inferior ───────────────────────────────────────────── */ /* Anclada al viewport dinámico. Con `bottom: 0` sobre el viewport grande, la tarjeta queda por debajo del área visible cuando la barra inferior del navegador está desplegada — el mismo motivo por el que js/utils/report.js usa 100dvh en vez de inset: 0. */ @media (max-width: 640px) { .priv-panel { left: 0; right: 0; bottom: 0; width: 100%; max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: 20px 20px 0 0; border-left: none; border-right: none; border-bottom: none; padding-bottom: max(20px, env(safe-area-inset-bottom)); transform: translateY(100%); } .priv-panel.is-open { transform: none; } /* En columna y con el rechazo abajo: en una hoja inferior el pulgar llega primero a lo de abajo, así que apilarlos evita empujar hacia el «sí». */ .priv-actions { flex-direction: column-reverse; } } @media (prefers-reduced-motion: reduce) { .priv-panel, .priv-btn { transition: none !important; } }