/* Consentimiento Lead Verificado — design tokens. Fuente: skill `sistema-diseno` + design/verified_consent_ui_1/DESIGN.md. Tema SLATE / pizarra, marca "LegalSafe". Único lugar donde se definen colores, espacios, tipografía, radios y sombras. No usar valores a ojo ni style="..." inline (CSP estricta). */ /* ---------- Fuentes auto-alojadas (CSP: font-src 'self', sin Google Fonts/CDN) ---------- Inter: texto y etiquetas (legibilidad en datos densos). Manrope: titulares (carácter, refinamiento). font-display: swap evita FOIT. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/manrope-600.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/manrope-700.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/manrope-800.woff2") format("woff2"); } :root { /* ---------- Color base — slate / pizarra, confianza institucional ---------- Mapeo DESIGN.md -> tokens --cv-* (se conservan los nombres existentes). */ --cv-bg: #f7f9fb; /* background / surface (DESIGN) */ --cv-surface: #ffffff; /* surface-container-lowest (cards, inputs base) */ --cv-surface-alt: #f2f4f6; /* surface-container-low (sub-superficie: code box, etc.) */ --cv-border: #c5c6cd; /* outline-variant (bordes de tarjeta/lista) */ --cv-border-soft: #e0e3e5; /* surface-variant (divisores tenues) */ --cv-text: #191c1e; /* on-surface (AA sobre surface) */ --cv-text-muted: #44474c; /* on-surface-variant */ --cv-outline: #75777d; /* outline (iconografía secundaria, placeholders) */ --cv-primary: #334155; /* primary slate (acción primaria, marca) */ --cv-primary-text: #ffffff; /* on-primary */ --cv-primary-hover: #1d2b3e; /* slate más oscuro (hover) */ --cv-primary-soft: #eef1f5; /* fondo tenue del icono/acento de marca */ /* Sidebar oscura del panel (inverse-surface slate del DESIGN) */ --cv-sidebar-bg: #1d2b3e; /* slate profundo (primary oscuro) */ --cv-sidebar-text: #b9c7e0; /* inverse-primary: items inactivos */ --cv-sidebar-muted: #9eadc5; /* on-primary-container: subtítulo/rol */ --cv-sidebar-brand: #ffffff; /* marca LegalSafe */ --cv-sidebar-hover: #2d3b4f; /* hover de item */ --cv-sidebar-divider: #3a485c; /* separador del pie */ /* Estados / semáforo de la solicitud (color + texto + forma, nunca solo color). Se CONSERVAN los 8 colores semánticos (chips del panel). */ --cv-pendiente: #6b7280; --cv-enviado: #2563eb; --cv-abierto: #7c3aed; --cv-aceptado: #15803d; --cv-rechazado: #b91c1c; --cv-caducado: #92733a; --cv-revocado: #9333ea; --cv-exportado: #0e7490; --cv-danger: #ba1a1a; /* error (DESIGN) */ --cv-danger-bg: #ffdad6; /* error-container (fondo del icono de error) */ --cv-focus: #334155; /* anillo de foco visible (slate) */ /* Verde "Aceptado" para chips suaves del justificante (color + texto) */ --cv-aceptado-bg: #e7f6ee; --cv-aceptado-text: #047857; /* Espaciado (escala 4px) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Tipografía — Inter (texto) + Manrope (titulares), auto-alojadas; sistema como fallback */ --cv-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --cv-font-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px; /* Radios — slate restraint: 4px por defecto, 8px en tarjetas (DESIGN: rounded / rounded-lg) */ --cv-radius: 8px; /* tarjetas / contenedores agrupados */ --cv-radius-sm: 4px; /* inputs, botones, chips */ --cv-radius-pill: 999px; /* ---------- Pesos y alturas de linea (jerarquia por tamano Y peso, no por cajas) ---------- Manrope esta auto-alojada en 600/700/800: la escala usa los tres, no solo el 700. */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.25; /* titulares */ --lh-base: 1.5; /* interfaz */ --lh-relaxed: 1.7; /* documento legal largo */ /* ---------- Ritmo vertical ---------- UN solo ritmo por contexto, en vez de un margen decidido dentro de cada componente. `--stack` separa bloques dentro de una tarjeta; `--stack-lg`, secciones de pagina. */ --stack: var(--sp-4); --stack-lg: var(--sp-6); /* Medidas de lectura: ninguna columna de prosa debe pasar de aqui. */ --measure: 68ch; /* prosa de interfaz */ --measure-short: 46ch; /* pies de campo, estados vacios */ /* ---------- Puntos de corte (documentados; CSS no admite var() dentro de @media) ---------- UNA escala de tres, no cinco cortes sueltos: 640px = movil (apilado de acciones, portal, tabla a una columna) 900px = tablet/sidebar (colapso del menu lateral y de las rejillas a 1 columna) 1200px = escritorio (rejilla de 4 stats) */ --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1200px; /* ---------- Accion destructiva (Archivar / Desactivar / Retirar) ---------- Existia --cv-danger pero ningun boton lo usaba: las acciones destructivas se veian identicas a "Volver". Contorno rojo sobre superficie = AA y no grita. */ --cv-danger-soft: #fdf0ef; /* Elevacion de una barra fija sobre contenido que scrollea por debajo. */ --cv-shadow-up: 0 -2px 4px rgba(51,65,85,.06), 0 -8px 24px rgba(51,65,85,.08); /* Elevación: sombras muy suaves y neutras (DESIGN: depth por tonal layers + outline) */ --cv-shadow: 0 1px 2px rgba(51,65,85,.05), 0 2px 4px rgba(51,65,85,.05); /* Segundo escalón de elevación: SOLO para el hover de una tarjeta interactiva (KPI del panel). Sin un segundo nivel, "pulsable" y "decorativo" se ven exactamente igual. */ --cv-shadow-md: 0 2px 4px rgba(51,65,85,.06), 0 8px 20px rgba(51,65,85,.10); /* ---------- Superficies de tabla ---------- La fila resaltada necesita un tono PROPIO: reutilizar --cv-bg (el fondo de la página) hacía que el hover se leyera como "esta fila se ha hundido", no como "estás aquí". */ --cv-row-hover: #eef2f7; --cv-th-bg: #f1f4f8; /* cabecera de tabla: un peldaño por encima de la superficie */ /* Monoespaciada del sistema para identificadores (CV-…, LINK-…, hashes). No se descarga ninguna fuente extra: la mono del sistema ya distingue 0/O y 1/l, que es todo lo que se le pide a un código que alguien va a dictar por teléfono. */ --cv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Cifra protagonista de un KPI (no cabe en la escala de texto: es un dato, no un titular). */ --fs-4xl: 44px; /* ---------- Sistema de estado: TINTE + TINTA ---------- Los chips eran pastillas macizas de color saturado con texto blanco. Veinte de ellas en una tabla convierten la pantalla en un semáforo y hunden el dato que las rodea. El par tinte/tinta (fondo muy claro + texto oscuro del MISMO tono) mantiene el estado reconocible de un vistazo, pesa lo que debe y cumple AA con holgura (>=4.9:1 en los ocho estados). El punto de color del chip se pinta con `currentColor`: la forma acompaña siempre al color y al texto, nunca el color solo. */ --cv-pendiente-tint: #f0f2f5; --cv-pendiente-ink: #4b5563; --cv-enviado-tint: #eaf1fe; --cv-enviado-ink: #1d4ed8; --cv-abierto-tint: #f3edfe; --cv-abierto-ink: #6d28d9; --cv-aceptado-tint: #e8f6ec; --cv-aceptado-ink: #146c34; --cv-rechazado-tint: #fdecec; --cv-rechazado-ink: #b91c1c; --cv-caducado-tint: #f7f0e2; --cv-caducado-ink: #7a5f2d; --cv-revocado-tint: #f6ecfe; --cv-revocado-ink: #7e22ce; --cv-exportado-tint: #e6f4f8; --cv-exportado-ink: #0b5c72; } /* ============================================================================ TEMA "CONSOLA" — SOLO EL PANEL ============================================================================ Todo lo de arriba es el tema CLARO y se queda intacto: lo usa el PORTAL DEL CONSUMIDOR (body.cv-portal), donde un fondo oscuro sería exactamente el gesto equivocado. Quien abre ese enlace va a entregar sus datos personales a una empresa que no conoce; la confianza visual es parte del producto, y un formulario de consentimiento en negro no la transmite. El PANEL (body.cv-panel) es lo contrario: lo abre alguien que trabaja en él varias horas al día, con tablas densas y cifras. Ahí el fondo oscuro reduce el brillo total de la pantalla y deja que el dato sea lo único que ilumina. No se inventan tokens nuevos: se REDEFINEN los mismos nombres sobre body.cv-panel, así que cada componente de app.css cambia de piel sin que haya que tocar una sola regla. Regla que se mantiene: ni un color a ojo fuera de aquí. El acento deja de ser el propio slate y pasa a ser ÁMBAR. Sobre fondo oscuro un azul pizarra como color de acción desaparece —es casi el mismo tono que el fondo—; el ámbar es lo único que se lee a un metro de la pantalla, y por eso se reserva para lo que de verdad es una acción o reclama atención. ========================================================================= */ /* Tipografías del panel. Variables (un fichero cubre 400..700), servidas desde nuestro dominio: la CSP es `style-src 'self'` y no hay CDN que valga. */ @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/publicsans-var.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/jetbrainsmono-var.woff2") format("woff2"); } body.cv-panel { /* Le dice al navegador que ESTA página es oscura. Sin esta línea, lo que no pinta la hoja de estilos —el desplegable de un , la barra de desplazamiento, el autocompletado— se sigue dibujando en blanco, y el resultado es un panel oscuro con parches claros que aparecen al pulsar. Una línea, y deja de pasar. */ color-scheme: dark; /* ---------- Superficies ---------- */ --cv-bg: #12161d; /* fondo de página */ --cv-surface: #1a1f28; /* tarjetas y tablas */ --cv-input-bg: #0f131a; /* campos: se hunden respecto a la tarjeta */ --cv-surface-alt: #202632; /* sub-superficie: cabecera de tabla, code box */ --cv-border: #2b323e; /* borde de tarjeta */ --cv-border-soft: #232935; /* divisor entre filas: se ve, no raya */ /* ---------- Texto ---------- Medido sobre --cv-surface: 13.9:1 el principal, 6.7:1 el atenuado. */ --cv-text: #e7ecf2; --cv-text-muted: #9aa6b5; --cv-outline: #7c8a9d; /* ---------- Acción ---------- Ámbar con tinta oscura encima: 8.1:1. El botón primario deja de ser una caja gris sobre gris y vuelve a parecer pulsable. */ --cv-primary: #e8a33d; --cv-primary-text: #241802; --cv-primary-hover: #f4bb5c; --cv-primary-soft: #2a2517; /* ---------- Menú lateral ---------- Un peldaño MÁS oscuro que la página, no más claro: el menú se hunde y el contenido flota. Es lo que hace que la vista caiga sola sobre el dato. */ --cv-sidebar-bg: #0f131a; --cv-sidebar-text: #a9b6c7; --cv-sidebar-muted: #7b8899; --cv-sidebar-brand: #ffffff; --cv-sidebar-hover: #1c2330; --cv-sidebar-divider: #2b323e; /* ---------- Tablas ---------- */ --cv-row-hover: #1f2734; --cv-th-bg: #1d2430; /* ---------- Estados: tinte + tinta, versión oscura ---------- Mismo criterio que en claro —fondo tenue del tono, texto del mismo tono— y los ocho vuelven a pasar AA con holgura (7.1:1 el más justo) contra el tinte oscuro. */ --cv-pendiente-tint: #242b36; --cv-pendiente-ink: #b8c3d1; --cv-enviado-tint: #16243c; --cv-enviado-ink: #85b4f7; --cv-abierto-tint: #241c3c; --cv-abierto-ink: #b79ff2; --cv-aceptado-tint: #14291f; --cv-aceptado-ink: #74d69e; --cv-rechazado-tint: #331a1c; --cv-rechazado-ink: #f2968f; --cv-caducado-tint: #2c2417; --cv-caducado-ink: #e0b768; --cv-revocado-tint: #291a37; --cv-revocado-ink: #cba1f2; --cv-exportado-tint: #12262c; --cv-exportado-ink: #7ac8da; /* Colores planos de estado (puntos, bordes, iconos). */ --cv-pendiente: #8f9bab; --cv-enviado: #6ba4f5; --cv-abierto: #a98df0; --cv-aceptado: #5cc98d; --cv-rechazado: #ef8079; --cv-caducado: #d9ad5c; --cv-revocado: #bf90ef; --cv-exportado: #63bccf; --cv-aceptado-bg: #14291f; --cv-aceptado-text: #74d69e; /* ---------- Error ---------- */ --cv-danger: #ef8079; --cv-danger-bg: #331a1c; --cv-danger-soft: #241416; /* El anillo de foco pasa a ámbar: sobre fondo oscuro un anillo slate no se ve, y un foco invisible es un fallo de accesibilidad, no un detalle. */ --cv-focus: #e8a33d; /* ---------- Sombras ---------- En claro la sombra la da una pizarra translúcida; sobre negro eso no existe. Aquí la profundidad la marca el negro puro, y con más recorrido. */ --cv-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30); --cv-shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.42); --cv-shadow-up: 0 -2px 6px rgba(0,0,0,.35), 0 -12px 30px rgba(0,0,0,.40); /* ---------- Tipografía ---------- Una sola familia para texto y titulares: el peso hace la jerarquía. Manrope aportaba carácter en una interfaz clara; en una consola densa, dos familias compitiendo son ruido. La mono deja de ser la del sistema: los códigos se dictan por teléfono y JetBrains Mono distingue 0/O y 1/l mejor que cualquier fallback. */ --cv-font: "Public Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cv-font-head: "Public Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }