/* ============================================================================ * BuscadorLaboral — tokens del vertical laboral (TEMA) * * DERIVADO de `/var/www/normaviva/frontend/assets/tokens.css` (el canonico de * NormaViva) sustituyendo SOLO valores. Los NOMBRES no cambian: la rampa se * sigue llamando `--oc-navy-*` aunque aca sea burdeos, igual que en ambiental * es verde. **El nombre es el SLOT, no el color** — renombrarla obligaria a * bifurcar las ~29 hojas que comparte con prod, que es justo lo que esta capa * existe para evitar. Con este archivo cargado PRIMERO, las mismas hojas de * buscadortributario renderizan en rojo sin una sola bifurcacion. * * EL ROJO sale de corpo.normaviva.cl (`#6e1423` y su hover `#56101c`), por * indicacion del founder. Lo que NO se reuso de corpo son sus neutros: son * Tailwind slate, la paleta que la v2 retiro por ser la huella mas reconocible * de una interfaz generada por IA. Los de aca acompanan al burdeos, con el * mismo criterio con que los del canonico acompanan al navy. * * CONTRASTE MEDIDO (WCAG), no elegido a ojo: * blanco sobre la barra de marca .......... 11,75:1 * acento sobre la barra de marca .......... 5,22:1 * link (--oc-navy-500) sobre blanco ....... 8,60:1 * metadatos (--oc-mute) sobre --oc-bg-alt . 6,37:1 * --oc-navy sobre --oc-navy-100 (badge) ... 9,49:1 * Todos pasan AA. Si se toca un valor, se vuelve a medir. * * REGLA: ninguna hoja vuelve a escribir un hex. Si falta un token, se agrega * aca para que el vertical y prod no se separen. * ========================================================================== */ :root { /* ── MARCA ─────────────────────────────────────────────────────────────── Navy es el unico color de marca (decision founder 2026-06-21). */ --oc-navy-900: #3d0a13; /* headings sobre claro, hover de CTA */ --oc-navy-800: #56101c; --oc-navy: #6e1423; /* PRIMARIO — CTA, header, links, marca */ --oc-navy-500: #8f2231; /* hover, highlight, serie 2 de charts */ --oc-navy-300: #c98a92; --oc-navy-100: #f7e2e5; /* tinte sobre navy: badges y acentos del hero */ --oc-ink: #2b0a11; /* maximo contraste */ /* Acento de marca. Es el & del wordmark (logo-header-bt.svg), el borde-izq de badges de monto, el hover de citas y el valor real de --pro-gold-500 en connect (cuyo nombre quedo mintiendo tras la migracion navy-only). NO colapsa al navy: es el unico contrapunto claro que tiene la marca. */ /* El acento es la familia de la marca aclarada, igual que en el canonico (navy #1b3a6b / acento #60a5fa, Dhue 2). El gold #d9a441 que puse primero tenia Dhue 1 con --oc-warn: el mismo color que "monto alto", y multas va a mostrar montos. Medido por C8 y verificado. Sobre la barra: 5,92:1. */ --oc-accent: #f1a3ad; /* ── NEUTROS (navy profundo) ───────────────────────────────────────────── NO son Tailwind slate. Hue ~215 con mas saturacion: la rampa acompaña al navy en vez de convivir con el. */ --oc-text: #2a1419; /* titulos y texto fuerte */ --oc-body: #3d2529; /* parrafos */ --oc-body-soft: #55393e; /* parrafos secundarios */ --oc-mute: #6d5156; /* metadatos, captions, footer (el mas usado) */ --oc-subtle: #9a8388; /* placeholders, texto deshabilitado */ --oc-line-2: #dcc8cb; /* bordes de control (inputs, chips) */ --oc-line: #eddfe1; /* separadores y bordes de card */ --oc-bg-alt: #f8f1f2; /* bandas, zebra, fondo de seccion */ --oc-bg: #fdfafa; /* fondo de pagina */ --oc-surface: #ffffff; /* cards y contenido */ --oc-on-navy: #ffffff; /* texto sobre fondo navy */ --oc-on-navy-soft: #f6e9eb; /* texto secundario sobre navy (chips, fechas) */ --oc-on-navy-dim: #d0aeb3; /* texto terciario sobre navy (candados, notas) */ /* ── SEMANTICOS ────────────────────────────────────────────────────────── Solo ESTADO, nunca decoracion. Los tintes salen de la misma familia que el color base, no de la paleta de Tailwind. */ --oc-ok-bg: #e7f6ec; /* fondo suave de badge */ --oc-ok-line: #b9e3c6; /* borde de badge */ --oc-ok: #16a34a; /* icono, punto, barra */ --oc-ok-strong: #15803d; /* texto sobre ok-bg */ --oc-ok-deep: #14532d; /* texto sobre fondo claro, maximo contraste */ --oc-bad-bg: #fbeaea; --oc-bad-line: #f2c4c4; --oc-bad: #dc2626; --oc-bad-strong: #b91c1c; --oc-bad-deep: #7f1d1d; /* Ambar = advertencia y monto alto. NUNCA acento decorativo. Es el unico sobreviviente del dorado legacy. Rampa propia de 5 pasos: la de Tailwind (#f59e0b y familia) colapsa aca. */ --oc-warn-bg: #fdf4e3; --oc-warn-line: #edd9ad; --oc-warn: #c08a2a; /* icono, borde de acento, punto */ --oc-warn-strong: #a36d10; /* texto sobre warn-bg */ --oc-warn-deep: #7c5209; /* texto sobre fondo claro */ /* Resultado de un fallo — semantica del dominio, no decoracion. Se mapean a los estados de arriba para que un cambio se propague solo. */ /* ⛔ NO USAR EN EL VERTICAL LABORAL. Se heredan del canonico y se dejan para no bifurcar las hojas compartidas, pero aca el resultado de un juicio va en badge NEUTRO: el literal del PJUD no dice quien gano (en tributario REVOCADA acierta 58 %, o sea una moneda), y acoger no es "bueno" — depende de que lado se este, y en el reclamo de multa el reclamante es el empleador. Ademas la marca es roja: un badge rojo de "rechaza" bajo una cabecera roja le mentiria al laboralista sobre lo que esta leyendo. El nombre de estos tres invita justo a ese error; el aviso va aca porque es donde los va a encontrar quien monte el badge. */ --oc-fallo-acoge: var(--oc-ok); --oc-fallo-parte: var(--oc-warn-strong); /* "ha lugar en parte" */ --oc-fallo-rechaza: var(--oc-bad); /* ── CATEGORICOS ───────────────────────────────────────────────────────── Codifican TIPO, no estado. A diferencia de los semanticos, su unico requisito es distinguirse ENTRE SI: por eso no pueden colapsar todos al navy. Viven en mi-expediente (categoria de plantilla, tipo de fuente). Origen: tres de las cuatro categorias ya usaban --me-* ; la cuarta quedo hardcodeada en purpura al agregarse. Ese purpura no es basura, es el token que falto — el sintoma exacto de no tener enforcement. OJO: hoy 1/2/3 reusan el tono de los semanticos. Es tolerable porque viven en superficies distintas, pero si algun dia un badge de categoria convive con uno de estado en la misma pantalla, hay que diferenciarlos. Escala de 6 pasos. Cubre los tres ejes categoricos que existen hoy: tipo de documento, tipo de entrada del historial, y tier de usuario. */ --oc-cat-1: #6e1423; /* oficio · reclamo · plantilla */ --oc-cat-1-bg: #f8f1f2; --oc-cat-2: #a36d10; /* circular · recurso · consulta al chat */ --oc-cat-2-bg: #fdf4e3; --oc-cat-3: #15803d; /* respuesta · tier Pro */ --oc-cat-3-bg: #e7f6ec; --oc-cat-4: #6d28d9; /* articulo de ley · consulta · fallecido */ --oc-cat-4-bg: #ede9fe; --oc-cat-4-light: #8b5cf6; /* extremo claro del degradado bbrr */ --oc-cat-5: #a83a63; /* fallo · tier Amigos */ --oc-cat-5-bg: #fdeaf1; --oc-cat-6: #0f766e; /* tier Diamante · modo rapido */ --oc-cat-6-bg: #dcf2ef; /* ── FOCO ──────────────────────────────────────────────────────────────── Habia 10 colores distintos de outline en prod. Uno solo, y una excepcion documentada: sobre fondo navy el anillo navy es invisible. */ --oc-focus: var(--oc-navy-500); --oc-focus-on-dark: #ffd479; /* unico uso legitimo de calido */ --oc-focus-ring: 0 0 0 3px rgba(143, 34, 49, .28); /* ── TIPOGRAFIA ────────────────────────────────────────────────────────── Los nombres multi-palabra van SIN comillas a proposito: asi el token se puede interpolar dentro de un string JS o un atributo style sin romperlo (el bug que rompio app.js el 2026-07-25). */ --oc-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --oc-font-serif: "Domine", Georgia, "Times New Roman", serif; --oc-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --oc-font-doc: var(--oc-font-serif); /* cuerpo de fallos y oficios */ /* ── RADIOS ────────────────────────────────────────────────────────────── Tres pasos + dos semanticos. Antes habia 20 valores. */ --oc-r-sm: 6px; /* chips, badges, inputs chicos */ --oc-r: 12px; /* cards, botones, inputs */ --oc-r-lg: 18px; /* paneles, modales, contenedores grandes */ --oc-r-pill: 999px; /* pildoras */ --oc-r-circle: 50%; /* avatares, puntos */ /* ── SOMBRAS ───────────────────────────────────────────────────────────── Tintadas al navy, nunca negro puro. Habia 208 declaraciones distintas. */ --oc-shadow-sm: 0 1px 2px rgba(61, 10, 19, .06), 0 1px 1px rgba(61, 10, 19, .04); --oc-shadow: 0 10px 30px -12px rgba(61, 10, 19, .18), 0 4px 12px -4px rgba(61, 10, 19, .08); --oc-shadow-lg: 0 30px 60px -20px rgba(61, 10, 19, .25), 0 10px 20px -6px rgba(61, 10, 19, .10); /* Velos y superposiciones. Tintados al navy igual que las sombras: un velo negro puro sobre una marca navy se ve sucio, uno navy se ve intencional. */ --oc-scrim: rgba(61, 10, 19, .55); --oc-overlay: rgba(61, 10, 19, .10); --oc-overlay-xs: rgba(61, 10, 19, .06); /* ── MOVIMIENTO ────────────────────────────────────────────────────────── Habia 9 curvas distintas, entre ellas la default de Tailwind/Material. */ --oc-ease: cubic-bezier(.2, .8, .2, 1); --oc-ease-out: cubic-bezier(.16, 1, .3, 1); --oc-dur-fast: 120ms; --oc-dur: 180ms; --oc-dur-slow: 280ms; } /* ── COMPATIBILIDAD ──────────────────────────────────────────────────────── Los namespaces viejos apuntan a los tokens nuevos. Permite migrar hoja por hoja sin romper nada. Se eliminan cuando el detector reporte 0 usos. */ :root { --font: var(--oc-font-sans); --font-sans: var(--oc-font-sans); --font-serif: var(--oc-font-serif); --font-mono: var(--oc-font-mono); --color-primario: var(--oc-navy); --azul: var(--oc-navy); --azul-hover: var(--oc-navy-800); --gris: var(--oc-mute); --fondo: var(--oc-bg); --blanco: var(--oc-surface); --borde: var(--oc-line); --texto: var(--oc-body); --pro-font-display: var(--oc-font-serif); --pro-shadow-sm: var(--oc-shadow-sm); --pro-shadow: var(--oc-shadow); --pro-shadow-lg: var(--oc-shadow-lg); --pro-shadow-focus: var(--oc-focus-ring); --oc-shadow-focus: var(--oc-focus-ring); --shadow-sm: var(--oc-shadow-sm); --shadow-md: var(--oc-shadow); --me-display: var(--oc-font-serif); --me-navy-900: var(--oc-navy-900); --me-navy-800: var(--oc-navy-800); --me-blue-50: var(--oc-cat-1-bg); --me-blue-700: var(--oc-cat-1); --me-gold-100: var(--oc-cat-2-bg); --me-gold-700: var(--oc-cat-2); --me-green-50: var(--oc-cat-3-bg); --me-green-700: var(--oc-cat-3); } /* ── CODIGO MUERTO: BORRADO 2026-07-26 ────────────────────────────────────── pro-v3.css, pro-v3.html y pro-v3-overrides.js ya NO EXISTEN en ninguno de los dos docroots. Eran inalcanzables: nginx redirige 301 /pro-v3 y /pro-v3.html a /pro, en beta Y en prod, y ese redirect sigue vivo — no lo saques. Con ellos se fue el unico teal del sitio (un verde-azulado fuera de paleta), que nunca necesito token. Su literal no se repite aca a proposito: si queda escrito, toda auditoria de color lo sigue encontrando. */