/* ===================================================================== ORVIK OS · TOKENS v1.0 Fuente única de diseño. Ningún color, medida, radio, sombra, fuente, duración o capa (z-index) se escribe fuera de este archivo. Si algo no existe aquí, NO se inventa: se pide a Dirección. Uso: - Oscuro por defecto en la Consola. Claro con (o "dia", el nombre de la app del guardia; "noche" = "oscuro"). - Las variables --marca-* las escribe el motor de marca al iniciar sesión (clave-acceso). Si no llegan, quedan los valores de Orvik de abajo. ===================================================================== */ :root { /* ── 1. MARCA (las sobreescribe el motor de marca; por defecto, Orvik) ── */ --marca-principal: #4ECDC4; /* aqua Orvik · CONFIRMADO el 16/oct/2026 */ --marca-principal-texto: #4ECDC4; /* variante legible como texto sobre el fondo actual */ --marca-sobre-principal: #062A27; /* texto encima de un fondo --marca-principal */ --marca-suave: rgba(78,205,196,.14); /* `acento-suave` de 08-SISTEMA-VISUAL-v2 §1, aprobado el 21/oct/2026. Fondo de iconos, pastillas, halo, y la casilla «trabaja» del Master Staffing */ --marca-banda: #070F1E; /* banda superior de la app */ --marca-sobre-banda: #FFFFFF; --marca-degradado-texto: linear-gradient(90deg, #4ECDC4 0%, #10B981 100%); --marca-degradado-boton: linear-gradient(90deg, rgba(30,58,110,0.85) 0%, rgba(78,205,196,0.55) 100%); --marca-logo: url("./img/marcas/orvik/orvik-imagotipo-oscuro.svg"); --marca-isotipo: url("./img/marcas/orvik/orvik-isotipo-oscuro.svg"); /* ── 1b. CRESTA · el acento de la marca de reclutamiento ── Aprobado por Dirección el 29-oct-2026 (auditor, 21:35). El acento de la tabla `marcas` (#0D234F) es el azul del logotipo y no se ve sobre su banda #001B44 (1.1:1). Ningún azul pasa 4.5:1 sobre la banda y sobre blanco a la vez, por eso son dos: claro · sobre fondos claros (las páginas del candidato): 4.56:1 sobre blanco y 4.56:1 con letra blanca encima. banda · sobre la banda #001B44: 4.85:1. Los mismos en claro y en oscuro: son color de marca, no de tema. Los usa `marca-enlace.js`; la tabla `marcas` no cambia. */ --cresta-acento-claro: #3A71DF; --cresta-acento-banda: #5987E4; /* ── 2. COLOR · TEMA OSCURO (por defecto) ── */ --fondo: #070F1E; --fondo-tinte: radial-gradient(520px 620px at 2% 18%, rgba(78,205,196,0.10), transparent 70%), radial-gradient(700px 420px at 40% -8%, rgba(109,40,217,0.08), transparent 70%); --superficie: #0E1A2E; /* tarjetas N1 */ --superficie-2: #12223A; /* filas al pasar el cursor, celdas seleccionadas */ --control: rgba(255,255,255,0.06); /* fondo de campos, segmentados, botones secundarios */ --pista: rgba(148,163,184,0.18); /* barras de progreso vacías */ --texto: #F1F5F9; --texto-2: #B4C0D0; --texto-3: #8494AA; --linea: rgba(148,163,184,0.16); --linea-fuerte: rgba(148,163,184,0.38); --exito: #10B981; --exito-texto: #34D399; --exito-suave: rgba(16,185,129,0.14); --peligro: #EF4444; --peligro-texto: #FCA5A5; --peligro-suave: rgba(239,68,68,0.12); --peligro-borde: rgba(239,68,68,0.45); --proceso: #8B6CF0; --proceso-texto: #B9A2F5; --proceso-suave: rgba(109,40,217,0.18); --neutro: #475569; --neutro-texto: #B4C0D0; --neutro-suave: rgba(148,163,184,0.14); /* ── EL ÁMBAR DE AVISO · Dirección, 7a auditoría §1.6 ── Hasta hoy el único ámbar del sistema era el del récord, y el doc 08 dice que esos cinco colores «valen SÓLO ahí. No son estados de la interfaz y NO SE USAN PARA ADVERTIR». Así que Master Staffing, que tiene su excepción aprobada para avisar en ámbar, lo llevaba escrito a mano en su propio CSS: cuatro valores que nadie más podía usar y que nadie comprobaba. Dirección los sube aquí. Los valores son los del mockup aprobado, no unos nuevos, y los cuatro pasan AA sobre `--superficie`, `--superficie-2` y `--aviso-suave`: --aviso ........ el ámbar macizo: barras, puntos, relleno. --aviso-texto .. el ámbar que carga texto sobre fondo claro o sobre `--aviso-suave`. --aviso-suave .. el fondo de una pastilla de aviso. --aviso-sobre .. lo que va ENCIMA del ámbar macizo. Sólo para los estados que el anexo de lenguaje pinta en ámbar. No es un color decorativo y no sustituye al rojo: ámbar es «falta algo», rojo es «está mal». */ --aviso: #F5C451; --aviso-texto: #F5C451; --aviso-suave: rgba(242,181,13,0.16); --aviso-sobre: #2A1C00; --foco: #4ECDC4; /* anillo de foco de teclado */ /* ── 2b. EL SEMÁFORO DEL ORVIK SCORE ── Autorizado el 16/oct/2026. Son los CINCO niveles del récord mensual del operador, y existen porque el documento de recompensas los define así: Púrpura > 99 · Verde 63–99 · Naranja 41–62 · Ámbar 23–40 · Rojo 0–22. Escala del Récord ID (auditoría 29/oct/2026, 14:15): Platino 90–100 púrpura · Oro 75–89 verde · Plata 55–74 naranja · Bronce 35–54 ámbar · En riesgo 0–34 rojo · «En evaluación» gris sus primeros 30 días. Decidido por Direccion el 29/oct/2026 (15:16): el verde y el naranja son los de 08 §1, #16A34A y #EA580C, de dia y de noche (08 da un solo valor). Antes eran #10B981/#047857 y #F97316/#C2410C. Un solo sistema visual. --record-verde tambien lo usan operacion-vivo.css (puntos e insignias «bien») y orvik-app.css (punto de estado). Valen SÓLO ahí. No son estados de la interfaz y no se usan para advertir: el anexo sigue diciendo que no existe el amarillo de alerta, y eso no cambia. Son el lenguaje del récord, igual en las siete operativas, y por eso tampoco se tiñen con la marca. */ --record-purpura: #8B6CF0; /* Platino 90–100 · operador estrella */ --record-verde: #16A34A; /* Oro 75–89 · estándar de excelencia · verde de 08 */ --record-naranja: #EA580C; /* Plata 55–74 · cumple · naranja de 08 */ --record-ambar: #F59E0B; /* Bronce 35–54 · bajo estándar */ --record-rojo: #EF4444; /* En riesgo 0–34 · crítico */ /* Los cuatro niveles de membresía. Metales, no marca. */ --nivel-bronce: #B06A3B; --nivel-plata: #A8B3C2; --nivel-oro: #D9A441; --nivel-platino: #C9D7E4; /* ── LOS ESCALONES DEL RÉCORD ID · color de su metal ── Decisión de Dirección (auditor, 29-oct-2026, 19:30): cada escalón de la escala de `docs/50` §9.3 se pinta con el color de su metal. Son tokens NUEVOS a propósito: `--record-verde`, `--record-ambar` y `--record-rojo` se quedan como ESTADO DE OPERACIÓN (Operación en vivo, avisos del acta), que es otra cosa. Todo lo que pinte un escalón usa `--escalon-*` y nada más. Aquí, la noche; el día va en las dos puertas del tema claro, abajo. */ --escalon-platino: #4A90DB; /* Platino 90–100 · azul acero: se separa de Plata (ver 08 §1b) */ --escalon-oro: #D9A441; /* Oro 75–89 */ --escalon-plata: #A8B3C2; /* Plata 55–74 */ --escalon-bronce: #C77B48; /* Bronce 35–54 */ --escalon-riesgo: #EF4444; /* En riesgo 0–34 */ /* Vidrio (solo capa de navegación y controles) */ /* ── EL GRANO ── Un desenfoque grande deja bandas visibles en superficies anchas. Apple le mete una textura finisima encima; esta es la misma idea, en escala de grises y al 10 % de opacidad dentro del propio SVG para que no haya forma de que se note como suciedad. */ --vidrio-grano: url("data:image/svg+xml;utf8,"); /* El tinte baja de 0.34 a 0.16. A 0.34 el vidrio TAPABA en vez de dejar pasar, y por eso sobre un fondo oscuro se leia como plastico pintado y no como vidrio. Medido lado a lado en el banco. */ --vidrio-fondo: var(--vidrio-grano), linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.08)), rgba(14,26,46,0.16); --vidrio-solido: #101C30; /* reemplazo cuando el usuario pide reducir transparencia */ --vidrio-borde: rgba(255,255,255,0.16); --vidrio-brillo: rgba(255,255,255,0.30); --vidrio-sombra: 0 18px 50px rgba(0,0,0,0.45); /* Menos desenfoque y mas saturacion: el vidrio de Apple no borra lo de atras, lo REALZA. El brillo de mas compensa el tinte que se quito. */ --vidrio-filtro: blur(26px) saturate(210%) brightness(1.06); --vidrio-filtro-sm: blur(22px) saturate(190%); /* controles pequeños sobre mapas */ /* ── 3. TIPOGRAFÍA ── */ --fuente: "Geist", "SF Pro Text", -apple-system, system-ui, sans-serif; --fuente-mono: "Geist Mono", ui-monospace, Menlo, monospace; /* La letra del CUERPO: Geist, la misma de `--fuente`. Decision de Direccion, 30-oct (07 E3-13): toda la consola en Geist, como ya la media E1. Es un alias y no una lista propia para que nunca vuelvan a ser dos familias distintas. */ --fuente-cuerpo: var(--fuente); /* Escala: tamaño / interlineado / peso. NO existen otros tamaños. */ --t-pantalla: 600 30px/36px var(--fuente); /* título de pantalla, 1 por pantalla */ --t-cifra: 600 34px/40px var(--fuente); /* número grande de indicador */ --t-seccion: 600 20px/26px var(--fuente); /* título de sección en pantallas de DETALLE */ --t-tarjeta: 600 17px/22px var(--fuente); /* título de tarjeta */ --t-boton-g: 500 16px/22px var(--fuente); /* botón grande (52), campos en celular y login */ /* El cuerpo sube de 14 a 15: la lámina lleva 13.5–14.5 a 15 (auditor, 29-oct). Lo protegido se queda en 14: ver «EL CUERPO DE LO PROTEGIDO» al final del :root. */ --t-cuerpo: 400 15px/20px var(--fuente); --t-cuerpo-f: 600 15px/20px var(--fuente); /* cuerpo fuerte: nombres en listas */ --t-sec: 500 13px/18px var(--fuente); /* texto secundario, botones, campos */ --t-nota: 500 12px/16px var(--fuente); /* hora, ayuda, pies */ --t-etiqueta: 600 11px/14px var(--fuente); /* MAYÚSCULAS, espaciado 0.06em */ --t-banda: 600 28px/34px var(--fuente); /* título de la banda en la app y cifras secundarias */ /* Pesos permitidos: 400, 500, 600 y 700 (700 SOLO en texto con degradado y en el botón de pánico). 800 y 900 prohibidos. */ /* ── 3b. LA ESCALA DE LA LÁMINA · Dirección, 29-oct 02:20 ── Choque 20 de 07-HOMOLOGACION, resuelto por el auditor el 29-oct: lo PROTEGIDO (login de PC, menú lateral, barra de vidrio, aurora) se queda con los --t-* de arriba, que no cambian. Todo lo demás usa ESTA escala, que sólo trae el tamaño: el peso y el interlineado los pone quien la usa, dentro de 400–700. 9.5–12.5 → 13 · 13.5–14.5 → 15 · 16 → 17 · 18–22 → 24 (título de pantalla) o 17 (título de tarjeta). --t-pantalla (30) no se toca: lo elige Dirección. */ --letra-13: 13px; --letra-15: 15px; --letra-17: 17px; --letra-24: 24px; --letra-titulo-pantalla: var(--letra-24); /* en las APPS. En la consola el título de pantalla es 30 (--t-pantalla), segunda lámina de Dirección, 29-oct */ --letra-titulo-tarjeta: var(--letra-17); /* Excepciones POR ELEMENTO, nunca por tamaño: valen sólo en el elemento marcado con su data-excepcion. Un 28 en otro lado es falla. */ --letra-teclas: 28px; /* data-excepcion="teclas" · teclas del código de acceso */ --letra-hora: 50px; /* data-excepcion="hora" · la hora grande */ --letra-inicial: 86px; /* data-excepcion="inicial" · la inicial sobre la foto */ --letra-cuenta-bio: 84px; /* data-ref="digit" · cuenta regresiva del biométrico, aprobada en la Fase 1 (choque 22). La marca es la que ya mide el guardián de E1 (auditor, 29-oct) */ --letra-inicial-chica: 32px; /* la inicial chica sobre la foto de perfil (auditor, 29-oct) */ /* Segunda lámina de Dirección (29-oct): las cifras grandes van en 34, el mismo tamaño de --t-cifra, aquí sin peso ni interlineado. Los íconos miden lo que mide la letra a la que acompañan: no tienen token propio. */ --letra-cifra: 34px; /* ── 4. ESPACIO (múltiplos de 4). NO existen otros valores. ── */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; /* ── 5. FORMA ── */ --r-contenedor: 24px; /* barra lateral, hojas flotantes, tarjeta de login */ --r-tarjeta: 20px; /* tarjetas N1, barra superior, alertas */ --r-control: 12px; /* botones, campos, segmentados (14px solo en botón grande de 52) */ --r-control-g: 14px; --r-chico: 8px; /* miniaturas, logos en placa. Choque 21: el 8 se queda SÓLO en lo protegido (la placa del menú lateral); fuera de ahí el 8 pasa a 12, --r-control */ --r-tarjeta-chica: 16px; /* tarjetas chicas de la lámina (tarjeta: 16 o 20). El 24 de --r-contenedor (tarjeta del login de PC) es protegido y se queda (choque 21) */ --r-pildora: 999px; /* chips, insignias, interruptores */ --toque: 44px; /* área táctil mínima, sin excepción */ /* ── 6. SOMBRAS (solo 3) ── */ --sombra-1: 0 1px 2px rgba(0,0,0,0.20); /* tarjeta en reposo (claro) */ --sombra-2: 0 8px 24px rgba(7,15,30,0.25); /* botón con degradado, menú abierto */ --sombra-3: 0 24px 70px rgba(0,0,0,0.50); /* hoja flotante, diálogo, login */ /* ── 7. MOVIMIENTO ── */ --dur-rapida: 120ms; /* presionar */ --dur-base: 180ms; /* pasar el cursor, cambiar pestaña */ --dur-lenta: 280ms; /* abrir hoja, diálogo */ --curva: cubic-bezier(0.2, 0.8, 0.2, 1); /* ── 8. CAPAS ── */ --z-contenido: 1; --z-barra: 10; --z-lateral: 20; --z-hoja: 30; --z-dialogo: 40; --z-aviso: 50; --z-panico: 60; /* ── 9. DISTRIBUCIÓN ── */ --ancho-lateral: 248px; /* barra lateral fija en escritorio */ --ancho-max: 1600px; /* contenido nunca más ancho que esto */ --margen-pagina: 20px; /* escritorio; 16px en tablet y celular */ --hueco: 20px; /* entre bloques de la página */ --hueco-tarjetas: 16px; /* entre tarjetas de una misma fila */ --alto-barra: 60px; /* barra superior de la consola */ --alto-pestanas: 68px; /* barra de pestañas flotante de la app */ /* ── 10. EL VELO DE LOS DIÁLOGOS ── El oscurecido detrás de un diálogo. Es el valor que ya estaba escrito a mano (operacion-rol.css); no cambia con el tema. */ --velo: rgba(15,23,42,0.38); /* ── 11. EL BIOMÉTRICO · SIEMPRE OSCURO ── Choque 23 de 07-HOMOLOGACION, resuelto por el auditor el 29-oct. El biométrico (bio/acceso.html, bio/identificacion.html, bio/puente.js) es oscuro aunque el teléfono esté en claro, así que sus colores son FIJOS: estos valores no se redefinen en ningún bloque de tema. Son los MISMOS que hoy están escritos a mano en esas pantallas; cero cambio visible. El acento y el fondo de la empresa NO están aquí: los pone bio/marca-bio.js por empresa en --bio-acento y --bio-fondo (Orvik: #4ECDC4 y #070F1E). Tampoco los blancos y negros de la máscara del óvalo: son mecánica del SVG, no color. */ --bio-noche: #070F1E; /* texto oscuro sobre el botón blanco, velo del óvalo */ --bio-escena: #0A2850; /* fondo de la escena de 390 × 844 */ --bio-placa: #0B2B57; /* fondo de las placas de estado */ --bio-marino: #0E1A2E; /* disco central y texto de la etiqueta */ --bio-blanco: #F8FAFC; /* guía, botón, íconos */ --bio-blanco-78: rgba(248,250,252,0.78); /* nombre y rótulos */ --bio-blanco-72: rgba(248,250,252,0.72); /* texto secundario del puente */ --bio-blanco-55: rgba(248,250,252,0.55); /* paso ya hecho del puente */ --bio-blanco-38: rgba(248,250,252,0.38); /* borde del botón «Salir» */ --bio-blanco-20: rgba(248,250,252,0.2); /* paso apagado */ --bio-blanco-18: rgba(248,250,252,0.18); /* pista del anillo, paso que falta */ --bio-blanco-14: rgba(248,250,252,0.14); /* borde de las placas */ --bio-gris: #8A94A6; /* punto en espera */ --bio-exito: #16C47F; --bio-exito-hondo: #0FA968; --bio-coral: #FF6B6B; /* falló */ --bio-enlace-encima:#ffd24d; /* enlace al pasar el cursor */ --bio-puente-blanco: #FFFFFF; --bio-puente-velo-96: rgba(255,255,255,.96); --bio-puente-texto-88: rgba(255,255,255,.88); --bio-puente-texto-82: rgba(255,255,255,.82); --bio-puente-pista-25: rgba(255,255,255,.25); --bio-puente-sombra: #E8ECF1; /* canto del botón blanco del puente */ /* ── 12. LA APP DEL GUARDIA · SUS COLORES DE HOY, FIJOS ── Renglón 24 de 07-HOMOLOGACION, resuelto por el auditor el 29-oct, igual que el 23: la app conserva su paleta (la de Lykos ID v17.1) y aquí queda con nombre, con los MISMOS valores de hoy. Cero cambio visible. Ningún bloque de tema los redefine: el tema lo sigue poniendo la app, que elige entre `--guardia-*` (día) y `--guardia-oscuro-*`. Salen de `apps/guardia/index.html` (rama e4/fase2-sesion-app): su `:root` de día y su bloque de noche, valor por valor. No están: · el azul y el amarillo de la empresa (`--lyk-navy`, `--lyk-yellow*`): son de la marca y los pone el motor de marca; · los alias (`--lyk-text-tertiary`, `--lyk-text-primary` de día): son otro nombre de un valor de esta lista; · las ~200 transparencias y sombras sueltas: E4 pasa su lista exacta y entran aquí con su valor de hoy. De noche, el fondo y las tarjetas los da la empresa (`--marca-noche-fondo`, `--marca-noche-tarjeta`); los `--guardia-oscuro-` de fondo son su respaldo, el de Orvik. Los tres textos de estado de noche (`danger`, `ambar`, `ok`) son los `--guardia-*-claro` de día. */ --guardia-navy-light: #0A2E5C; --guardia-white: #F8FAFC; --guardia-bg-light: #F5F7FA; --guardia-bg-soft: #EEF2F7; --guardia-success: #16C47F; --guardia-warning: #FF9F1C; --guardia-danger: #FF4D4F; --guardia-info: #3B82F6; --guardia-teal: #4ECDC4; --guardia-papel: #FFF; --guardia-sobre-banda: #FFF; --guardia-sobre-banda-2: #F8FAFC; --guardia-borde: #E8ECF1; --guardia-borde-fuerte: #C9D2DD; --guardia-borde-suave: #EEF1F5; --guardia-text-fuerte: #41506A; --guardia-text-apagado: #9BA8B8; --guardia-text-gris: #8B97A8; --guardia-danger-fondo: #FF4D4F; --guardia-danger-texto: #8C1D18; --guardia-danger-linea: #FF4D4F; --guardia-ok-texto: #0E8F5C; --guardia-ok-linea: #16C47F; --guardia-ambar-papel: #FFF6DA; --guardia-ambar-suave: #FFF6DA; --guardia-ambar-linea: #FF9F1C; --guardia-ambar-texto: #8A5A08; --guardia-noche-1: #04213F; --guardia-noche-2: #0A3552; --guardia-noche-3: #17586A; --guardia-papel-azul: #F7FAFF; --guardia-papel-verde: #F6FDFA; --guardia-danger-claro: #FFB3B3; --guardia-ambar-claro: #FFC98A; --guardia-ok-claro: #7BE8BC; --guardia-danger-papel: #FDECEA; --guardia-azul-papel: #EEF6FF; --guardia-azul-linea: #BBD8F5; --guardia-azul-texto: #2C5E92; --guardia-azul-fuerte: #1B3F63; --guardia-noche-0: #0A1428; --guardia-noche-4: #2E7F86; --guardia-res-tuyo: #D9660A; --guardia-res-entorno: #3D4A5C; --guardia-res-nuestro: #7A1F2B; --guardia-ok-papel: #E9F7EF; --guardia-text-secondary: #5D6B7E; --guardia-text-muted: rgba(248,250,252,.65); /* de noche */ --guardia-oscuro-bg-light: #0E1A2E; --guardia-oscuro-bg-soft: #12223A; --guardia-oscuro-papel: #12223A; --guardia-oscuro-white: #12223A; --guardia-oscuro-papel-azul: #12223A; --guardia-oscuro-papel-verde: #12223A; --guardia-oscuro-borde: rgba(255,255,255,.10); --guardia-oscuro-borde-suave: rgba(255,255,255,.07); --guardia-oscuro-borde-fuerte: rgba(255,255,255,.18); --guardia-oscuro-text-primary: #F1F5F9; --guardia-oscuro-text-secondary: #B4C0D0; --guardia-oscuro-text-fuerte: #F1F5F9; --guardia-oscuro-text-gris: #8494AA; --guardia-oscuro-text-apagado: #8494AA; --guardia-oscuro-danger-papel: rgba(255,77,79,.16); --guardia-oscuro-ambar-papel: rgba(255,159,28,.16); --guardia-oscuro-ambar-suave: rgba(255,159,28,.16); --guardia-oscuro-ok-papel: rgba(22,196,127,.16); /* ── 13. LOS DOS LOGINS · la maqueta que Dirección aprobó el 31-oct ── Dirección, 2-nov: el pedido de E4 (`docs/aud/pedidos/E4-tokens-de-los-logins.md`) queda aprobado y sus valores entran aquí con los nombres que propuso. Son **20**, no 21: 11 del botón «luz» y 9 del vidrio de la tarjeta de la clave (contados en los dos bloques que E4 declaró; el pedido los lista uno por uno). Como el biométrico de la sección 11, estos 20 **no cambian con el tema**: los dos logins viven encima de la aurora, que es siempre oscura y es protegida (CLAUDE.md regla 2). Por eso no llevan variante en claro, y las capturas de E4 en claro y en oscuro son iguales. Tres valores se repiten a propósito con otro nombre, porque el login de Dirección (`corporativo/index.html`) NO carga esta hoja: `#0E1A2E` es `--superficie`, `12px` es `--r-control` y `#4ECDC4` es `--foco`. Ahí `boton-luz.css` los lleva escritos como respaldo de cada `var()`; ver el encabezado de esa hoja. */ /* El botón «luz» · sólo en «Entrar», uno por pantalla */ --luz-aro: conic-gradient(rgba(255,255,255,.12) 0%, #4ECDC4 10%, #FFFFFF 18%, #4ECDC4 26%, rgba(255,255,255,.12) 36%, rgba(255,255,255,.12) 100%); --luz-relleno: #0E1A2E; --luz-texto: #FFFFFF; --luz-r: 12px; --luz-r-relleno: 9px; /* 12 menos los 3 del margen; no está en la escala de 08 §5 a propósito */ --luz-margen: 3px; --luz-alto: 48px; --luz-letra: 600 17px/22px "Outfit", "Inter", system-ui, sans-serif; --luz-sombra: 0 0 36px rgba(78,205,196,.30); --luz-giro: 3s; --luz-foco: #4ECDC4; /* El vidrio de Dirección, ahora también en la tarjeta de la clave */ --login-ancho: 380px; --login-vidrio: rgba(248, 250, 252, .045); --login-filtro: blur(14px); --login-relleno: 34px 28px; --login-sombra: 0 18px 48px rgba(0, 0, 0, .3); --fuente-login: "Outfit", "Inter", system-ui, sans-serif; /* 19 y 14 no están en la escala de 08 §2: son del login de PC, que 08 §8 protege (decisión del 31-oct). */ --login-t-titulo: 700 19px/24px var(--fuente-login); --login-t-texto: 400 14px/21px var(--fuente-login); --login-casilla: 52px; } /* ── EL CUERPO DE LO PROTEGIDO ── El cuerpo de la consola subió a 15 (auditor, 29-oct), pero el menú lateral aprobado es protegido (CLAUDE.md regla 2) y es el único sitio protegido que usa estos dos tokens (medido: `consola-orvik.css`, sus cinco usos son de `#tabs` y de `.nav-trabajando`, que vive dentro). Ahí siguen valiendo lo de antes. El login de PC, la barra de vidrio y la aurora no los usan. Ningún otro token cambia aquí. */ #tabs { --t-cuerpo: 400 14px/20px var(--fuente); --t-cuerpo-f: 600 14px/20px var(--fuente); } /* ── TEMA CLARO ── Dos nombres para el mismo tema (auditor, 29-oct 22:25): la consola dice `claro`/`oscuro` y la app del guardia dice `dia`/`noche` (lo midió E4). `dia` = claro y `noche` = oscuro, en las tres puertas de esta hoja. */ :root[data-tema="claro"], :root[data-tema="dia"] { --marca-principal-texto: #0B7C75; --marca-suave: rgba(14,159,150,.10); /* 08-SISTEMA-VISUAL-v2 §1 */ --marca-degradado-texto: linear-gradient(90deg, #0B7C75 0%, #047857 100%); --marca-degradado-boton: linear-gradient(90deg, #1E3A6E 0%, #0B7C75 100%); --marca-logo: url("./img/marcas/orvik/orvik-imagotipo-claro.svg"); --fondo: #F4F7FA; --fondo-tinte: radial-gradient(520px 620px at 2% 18%, rgba(78,205,196,0.12), transparent 70%), radial-gradient(700px 420px at 40% -8%, rgba(109,40,217,0.05), transparent 70%); --superficie: #FFFFFF; --superficie-2: #F1F5F9; --control: rgba(255,255,255,0.55); --pista: rgba(71,85,105,0.14); --texto: #070F1E; --texto-2: #475569; --texto-3: #5B6B80; --linea: rgba(71,85,105,0.16); --linea-fuerte: rgba(71,85,105,0.40); --exito-texto: #047857; --exito-suave: rgba(16,185,129,0.12); --peligro: #DC2626; --peligro-texto: #B91C1C; --peligro-suave: rgba(239,68,68,0.08); --peligro-borde: rgba(220,38,38,0.35); --proceso: #6D28D9; --proceso-texto: #6D28D9; --proceso-suave: rgba(109,40,217,0.10); --neutro-texto: #475569; --neutro-suave: rgba(71,85,105,0.10); --aviso: #8A5A00; --aviso-texto: #8A5A00; --aviso-suave: #FFF3DC; --aviso-sobre: #FFFFFF; --foco: #0B7C75; --record-purpura: #6D28D9; --record-verde: #16A34A; --record-naranja: #EA580C; --record-ambar: #B45309; --record-rojo: #DC2626; --escalon-platino: #3E6487; --escalon-oro: #9A6A0B; --escalon-plata: #5F6773; --escalon-bronce: #9A4A1E; --escalon-riesgo: #DC2626; /* En claro el tinte baja MENOS --de 0.78 a 0.66-- porque aqui el vidrio sostiene texto oscuro: pasarse de transparente le quita el contraste a lo que lleva encima. */ --vidrio-fondo: var(--vidrio-grano), linear-gradient(145deg, rgba(255,255,255,0.66), rgba(255,255,255,0.30) 55%, rgba(255,255,255,0.46)); --vidrio-solido: #FFFFFF; --vidrio-borde: rgba(255,255,255,0.90); --vidrio-brillo: rgba(255,255,255,1); --vidrio-sombra: 0 18px 50px rgba(7,15,30,0.12); --sombra-1: 0 1px 2px rgba(7,15,30,0.06); --sombra-3: 0 24px 70px rgba(7,15,30,0.18); } /* ── EL MODO AUTOMÁTICO · ESTE BLOQUE ESTABA VACÍO Y ERA UN DEFECTO GRAVE ── La causa: dos hojas con dos valores por omisión distintos. · `panel.css` nació CLARO por omisión y se pone oscuro sólo con `@media (prefers-color-scheme: dark)`. · Estos tokens hacen la consola OSCURA por omisión, y este bloque --el que debía atender el caso contrario-- estaba vacío. Con el tema en «automático» el panel quita `data-tema` por completo (`app.js`), así que no queda nadie que desempate. Si además el sistema operativo está en claro, pasaba esto: el fondo salía oscuro de aquí y los textos salían navy de allá. Letra azul sobre fondo azul. Ahora, en automático con el sistema en claro, estos tokens dan el tema claro, que es lo mismo que hace `panel.css`: las dos hojas dicen lo mismo y no hay forma de que se crucen. En automático con el sistema en oscuro ya coincidían, porque las dos dan oscuro. El cuerpo NO está escrito a mano: es una copia exacta del tema claro de arriba, generada de él. Si alguien cambia aquel, hay que regenerar éste --o los dos claros se separan sin que nadie lo note. */ @media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]):not([data-tema="noche"]) { --marca-principal-texto: #0B7C75; --marca-suave: rgba(14,159,150,.10); /* 08-SISTEMA-VISUAL-v2 §1 */ --marca-degradado-texto: linear-gradient(90deg, #0B7C75 0%, #047857 100%); --marca-degradado-boton: linear-gradient(90deg, #1E3A6E 0%, #0B7C75 100%); --marca-logo: url("./img/marcas/orvik/orvik-imagotipo-claro.svg"); --fondo: #F4F7FA; --fondo-tinte: radial-gradient(520px 620px at 2% 18%, rgba(78,205,196,0.12), transparent 70%), radial-gradient(700px 420px at 40% -8%, rgba(109,40,217,0.05), transparent 70%); --superficie: #FFFFFF; --superficie-2: #F1F5F9; --control: rgba(255,255,255,0.55); --pista: rgba(71,85,105,0.14); --texto: #070F1E; --texto-2: #475569; --texto-3: #5B6B80; --linea: rgba(71,85,105,0.16); --linea-fuerte: rgba(71,85,105,0.40); --exito-texto: #047857; --exito-suave: rgba(16,185,129,0.12); --peligro: #DC2626; --peligro-texto: #B91C1C; --peligro-suave: rgba(239,68,68,0.08); --peligro-borde: rgba(220,38,38,0.35); --proceso: #6D28D9; --proceso-texto: #6D28D9; --proceso-suave: rgba(109,40,217,0.10); --neutro-texto: #475569; --neutro-suave: rgba(71,85,105,0.10); --aviso: #8A5A00; --aviso-texto: #8A5A00; --aviso-suave: #FFF3DC; --aviso-sobre: #FFFFFF; --foco: #0B7C75; --record-purpura: #6D28D9; --record-verde: #16A34A; --record-naranja: #EA580C; --record-ambar: #B45309; --record-rojo: #DC2626; --escalon-platino: #3E6487; --escalon-oro: #9A6A0B; --escalon-plata: #5F6773; --escalon-bronce: #9A4A1E; --escalon-riesgo: #DC2626; /* En claro el tinte baja MENOS --de 0.78 a 0.66-- porque aqui el vidrio sostiene texto oscuro: pasarse de transparente le quita el contraste a lo que lleva encima. */ --vidrio-fondo: var(--vidrio-grano), linear-gradient(145deg, rgba(255,255,255,0.66), rgba(255,255,255,0.30) 55%, rgba(255,255,255,0.46)); --vidrio-solido: #FFFFFF; --vidrio-borde: rgba(255,255,255,0.90); --vidrio-brillo: rgba(255,255,255,1); --vidrio-sombra: 0 18px 50px rgba(7,15,30,0.12); --sombra-1: 0 1px 2px rgba(7,15,30,0.06); --sombra-3: 0 24px 70px rgba(7,15,30,0.18); } } @media (max-width: 1023px) { :root { --margen-pagina: 16px; --hueco: 16px; --hueco-tarjetas: 12px; } } @media (prefers-reduced-transparency: reduce) { [data-vidrio] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--vidrio-solido) !important; } /* Sin transparencia no hay canto ni lente que mostrar: los dos dependen de que se vea lo que hay detras. */ [data-vidrio]::before, [data-vidrio]::after { content: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } } @media (prefers-contrast: more) { .texto-degradado { -webkit-text-fill-color: currentColor; background: none !important; } :root { --linea: var(--linea-fuerte); } } /* ===================================================================== LA RECETA DEL VIDRIO · completa Sección 5B del prompt maestro, textual en `Main.dc.html` del lienzo. Son CUATRO partes y antes sólo había dos. Por eso el vidrio se veía como un panel gris plano: 1. fondo translúcido ............ estaba 2. backdrop-filter .............. estaba 3. BORDE CON BRILLO ESPECULAR ... faltaba ← la que lo hace vidrio 4. sombra profunda + brillo interior arriba ... faltaba La 3 pinta SÓLO el canto de 1 px, no la superficie: una máscara deja ver el degradado únicamente en el borde. Pintarlo sobre toda la caja no es un reflejo, es un velo —y eso fue lo que dejó el login blanco. Toda pieza de vidrio lleva `data-vidrio` y toma la receta de aquí. Nunca se repite por pantalla. ===================================================================== */ [data-vidrio] { position: relative; background: var(--vidrio-fondo); -webkit-backdrop-filter: var(--vidrio-filtro); backdrop-filter: var(--vidrio-filtro); border: 1px solid var(--vidrio-borde); box-shadow: inset 0 1px 0 var(--vidrio-brillo), var(--vidrio-sombra); } /* El canto. `padding:1px` + máscara que excluye el interior: el degradado sólo sobrevive en el milímetro del borde. */ [data-vidrio]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; /* ── EL CANTO SIGUE LA CURVA, NO LA DIAGONAL ── Era un degradado LINEAL a 160 grados: brillaba igual a lo largo de toda su diagonal, atravesando la pieza de esquina a esquina. La luz sobre un canto redondeado no hace eso. Pega arriba a la izquierda y vuelve a asomar abajo a la derecha, y se apaga en los costados --que es justo lo que hace un degradado CONICO--. Comparado lado a lado contra el de Apple el 20/oct: es la diferencia entre un canto que parece dibujado y uno que parece torneado. */ background: conic-gradient(from 210deg, rgba(255,255,255,.80), rgba(255,255,255,.06) 22%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.60) 62%, rgba(255,255,255,.05) 80%, rgba(255,255,255,.80)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* ── LA LENTE DEL CANTO: SE PROBO Y SE QUITO · 20/oct ── Aqui vivia un `[data-vidrio]::after` con su propio `backdrop-filter: blur(3px)` y una mascara radial, para fingir el grosor del vidrio: CSS difumina lo que hay detras pero no lo desplaza, asi que al canto le falta la refraccion que le da cuerpo. DURO UNAS HORAS. Se vio en el menu «Mas» del telefono: las tres primeras entradas --Clientes y ventas, Capital Humano, Finanzas-- salian BORROSAS, y las de abajo nitidas. La causa es el orden de pintado. Un `::after` se pinta DESPUES del contenido de su elemento, asi que su `backdrop-filter` no desenfoca lo que hay detras de la tarjeta: desenfoca LO QUE LA TARJETA TIENE DENTRO y quedo debajo de el. En una pieza chica y centrada --la barra, el login-- no se notaba. En una hoja alta y llena de renglones, la mascara radial deja una banda enorme arriba y abajo, y ahi el texto se vuelve ilegible. No se arregla con `z-index: -1`: eso la manda detras del fondo del propio elemento y deja de verse. Haria falta una capa hermana, fuera del elemento, y eso ya no es un token: es cambiarle el marcado a cada pieza de vidrio del sistema. Asi que se va. De la receta nueva se quedan las tres que si funcionan: el tinte que deja pasar el color, el canto conico y el grano. Si algun dia se quiere el grosor, la via es una capa hermana y hay que probarla EN UNA PIEZA ALTA Y CON TEXTO, que es donde falla. */ /* Nunca vidrio sobre vidrio: un control encima de una barra de vidrio va sin desenfoque propio, sin su canto y sin su lente. */ [data-vidrio] [data-vidrio] { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } [data-vidrio] [data-vidrio]::before { content: none } /* Los controles pequeños sobre un mapa llevan el desenfoque corto. */ [data-vidrio][data-vidrio-sm] { -webkit-backdrop-filter: var(--vidrio-filtro-sm); backdrop-filter: var(--vidrio-filtro-sm); } /* ── UN CONTENEDOR PUEDE FIJAR SU TEMA ── El login lo usa: `data-tema="oscuro"` en `#login` y los tokens dan los valores oscuros ahí dentro, aunque el resto del panel esté en claro. Es lo que evita los veinte `!important` que había. */ [data-tema="oscuro"]:not(:root), [data-tema="noche"]:not(:root) { --aviso: #F5C451; --aviso-texto: #F5C451; --aviso-suave: rgba(242,181,13,0.16); --aviso-sobre: #2A1C00; --fondo: #070F1E; --superficie: #0E1A2E; --superficie-2: #12223A; --control: rgba(255,255,255,0.06); --texto: #F1F5F9; --texto-2: #B4C0D0; --texto-3: #8494AA; --linea: rgba(148,163,184,0.16); --linea-fuerte: rgba(148,163,184,0.38); --vidrio-fondo: linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.06)), rgba(14,26,46,0.34); --vidrio-borde: rgba(255,255,255,0.16); --vidrio-brillo: rgba(255,255,255,0.22); --vidrio-sombra: 0 18px 50px rgba(0,0,0,0.45); --vidrio-solido: #101C30; --marca-principal-texto: #4ECDC4; --marca-suave: rgba(78,205,196,.14); --pista: rgba(148,163,184,0.18); --foco: #4ECDC4; --peligro: #EF4444; --peligro-texto: #FCA5A5; } /* ── POR QUE SE AGREGARON `--marca-suave` Y `--pista` · 8a auditoria ── Este bloque es la lista de lo que un contenedor necesita para que adentro sea de noche aunque la pagina este en claro. Le faltaban dos, y la capa del lector --«Abriendo el lector…»-- las usa: el relleno del boton elegido y la pista de la barra de avance. No es la trampa A.1 del documento 65 --una variable que no existe desaparece-- sino su hermana callada: la variable SI existe, pero con el valor del tema CLARO. La pista habria quedado gris oscuro sobre fondo casi negro, o sea una barra que no se ve, y nadie lo habria notado mirando el tema oscuro. */