/* tokens.css — el único archivo del proyecto donde hay valores literales. * * La regla es estricta a propósito: base.css y app.css no pueden escribir un * hexadecimal ni un tamaño suelto. Todo sale de aquí. Así nadie mete un crema * «casi igual» que rompe la escala, y vestir el producto entero con otra * paleta es reescribir este archivo y ningún otro. * * El archivo tiene dos pisos y conviene no mezclarlos: * * 1. LAS PRIMITIVAS DE JURISIA. Colores con nombre de color, copiados de * frontend/css/nb-tokens.css. No se usan nunca desde app.css: solo los * consume el piso de abajo. * * 2. EL PUENTE SOBRE LOS NOMBRES HEREDADOS. Los tokens con nombre de FUNCIÓN * —papel, tinta, borde, sombra, tinte— que ya usaban las 1.400 líneas de * app.css. Conservan el NOMBRE y cambian el VALOR. Esa es toda la * migración: ni una regla de app.css hubo que reescribir. * * ── por qué están copiadas las primitivas y no enlazadas ───────────────────── * * El verificador se sirve desde /verificador/ y es un producto aparte: no * carga neobrutal.css ni nb-tokens.css, que traen consigo los componentes y el * puente de los 110 nombres del chat y que dependen de cargarse EL ÚLTIMO para * ganar la cascada. Aquí eso pelearía con base.css. Copiar catorce colores sale * más barato que heredar dos hojas enteras y su orden de carga. * * Si la paleta de Jurisia cambia, este bloque es lo único que hay que tocar, y * está escrito con los mismos nombres --nb-* para que el cotejo sea literal. * * ── la estética ────────────────────────────────────────────────────────────── * * Neobrutalismo claro: crema, tinta y dorado; borde marcado, sombra dura sin * difuminar y titulares de palo seco muy negros. Del diseño anterior se * conservan las tres decisiones que no eran de gusto: * * - **La sombra dura solo la llevan las cosas que se pulsan.** Botones, * filtros y la casilla. Las tarjetas se quedan con su borde. Cuando cada * caja flota sobre su propio bloque de tinta, la pantalla entera vibra. * * - **El color acompaña al estado, pero no lo dice.** Las filas llevan un * tinte por familia porque recorrer doscientas filas sin ninguna pista de * color es agotador. Pero el tinte es SIEMPRE redundante: la geometría de * la marca y el nombre del estado siguen ahí y siguen mandando. * * - **Los ocho estados se distinguen por GEOMETRÍA.** La marca es la misma * en gris, en alto contraste y en una impresión en blanco y negro, donde * los tintes desaparecen. El color ayuda al ojo; la geometría es el dato. * * ── la regla del dorado, que aquí manda sobre el gusto ─────────────────────── * * HAY DOS DORADOS DISTINTOS Y NO SON INTERCAMBIABLES. --nb-gold es un amarillo * brillante que como texto da ~1,6:1 y es sencillamente ilegible. Va SOLO de * fondo, con tinta encima. Lo que se escribe, se dibuja o se bordea en ámbar * usa --nb-amber-text, que da 6,7:1 sobre el crema. Ni una sola declaración de * `color:` de este archivo puede apuntar a --nb-gold. */ :root { /* El esquema es claro y fijo. No hay tema oscuro: el sistema de Jurisia es * claro únicamente, y declararlo evita que los controles nativos * —scrollbars, casillas, autorrelleno— se pinten en oscuro por su cuenta. */ color-scheme: light; /* ══ 1. PRIMITIVAS DE JURISIA ══════════════════════════════════════════════ * Copiadas de frontend/css/nb-tokens.css. No se usan desde app.css. */ /* Superficies. Crema y negro cálidos: conservan la temperatura dorada de la * marca en lugar de recurrir al #fff / #000 puros. */ --nb-paper: #FBF3E4; --nb-paper-2: #F2E5CB; --nb-paper-3: #E8D7B4; --nb-white: #FFFFFF; --nb-ink: #14120F; --nb-ink-2: #2B2620; --nb-ink-soft: #5A5046; /* 7,1:1 sobre el crema: el suelo de los metadatos */ --nb-ink-faint:#6B625A; /* 4,2:1 sobre el crema hondo: controles apagados */ /* Dorado. Dos tokens, y ver arriba por qué no se pueden cruzar. */ --nb-gold: #F5B72E; /* SOLO fondos */ --nb-gold-deep: #E09B12; /* el mismo, pulsado */ --nb-gold-pale: #FDEFC9; /* el crema dorado de los mensajes del chat */ --nb-amber-text: #8A5A12; /* SOLO texto, iconos y bordes de acento */ --nb-amber-text-strong: #5E3C08; /* Acentos de estado */ --nb-azure: #2F6FED; /* el anillo de foco de todo el sitio */ --nb-green: #12803F; --nb-green-bg: #D8F5E3; --nb-red: #B3261E; --nb-red-bg: #FBE0DE; /* Trazo y física. --nb-sx es el desplazamiento de la sombra dura; el gesto * de pulsar se deriva de él para que el bloque «toque» la página. */ --nb-bd: 2px; --nb-bd-thick: 3px; --nb-bd-hair: 1px; --nb-radius: 8px; --nb-sx: 3px; --nb-ease: cubic-bezier(0.2, 0.9, 0.3, 1); --nb-font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, sans-serif; --nb-font-ui: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ══ 2. PUENTE SOBRE LOS NOMBRES HEREDADOS ═════════════════════════════════ * A partir de aquí, todo tiene nombre de función. Esto es lo que consume * app.css, y los nombres son los de siempre. */ /* El blanco conserva nombre propio porque app.css lo pide suelto en un sitio * y solo en uno: la tinta del contador de caracteres cuando se pasa del * límite, que va sobre el rojo de fallo y no puede salir de --tinta. */ --blanco: var(--nb-white); /* ── superficie ─────────────────────────────────────────────────────────── */ --papel: var(--nb-paper); /* el fondo de la página */ --papel-caja: var(--nb-white); /* toda tarjeta */ --papel-2: var(--nb-paper-2); /* filas alternas, cajas de datos */ --papel-3: var(--nb-paper-3); /* controles inactivos */ --papel-hover: var(--nb-paper-2); /* La superficie teñida de la marca: cabeceras de tabla, los discos del * rastro, la banda de trabajo en curso. Va en el crema hondo y NO en el * dorado: una cabecera de tabla en #F5B72E a lo ancho de doscientas filas se * lleva por delante todo lo demás, y el dorado en Jurisia aparece en poco * sitio justamente para que siga significando algo. */ --papel-marca: var(--nb-paper-3); /* ── tinta ──────────────────────────────────────────────────────────────── */ --tinta: var(--nb-ink); /* datos, títulos */ --tinta-2: var(--nb-ink-2); /* prosa */ --tinta-3: var(--nb-ink-soft); /* metadatos, rótulos */ --tinta-4: var(--nb-ink-faint);/* controles inactivos */ /* La tinta que va ENCIMA de un relleno. No se elige: viene con el relleno. * Las tres son tinta porque los tres rellenos de este sistema son claros * —dorado y crema—, que es justamente la diferencia con la paleta azul de * antes, donde el botón principal llevaba texto blanco. */ --tinta-sobre-marca: var(--nb-ink); --tinta-sobre-accion: var(--nb-ink); --tinta-sobre-realce: var(--nb-ink); /* ── rellenos ───────────────────────────────────────────────────────────── */ /* La acción principal es el dorado de Jurisia con tinta encima: el mismo * .nb-btn--gold que abre la portada del sitio. */ --relleno-accion: var(--nb-gold); --relleno-accion-vivo: var(--nb-gold-deep); --relleno-realce: var(--nb-gold); /* el rotulador que subraya */ --relleno-fallo: var(--nb-red); /* SOLO fallos de la herramienta */ /* El acento como TEXTO: enlaces, la fila abierta, la cifra que reclama * trabajo. Ámbar legible, nunca el dorado de relleno. */ --acento: var(--nb-amber-text); /* ── las cuatro familias ────────────────────────────────────────────────── */ /* `bien` lo confirmado · `ojo` lo que hay que revisar · `falta` lo que la * fuente no devolvió · `mudo` lo que no se pudo mirar. * * El reparto sobre la paleta de Jurisia: * bien → verde sobre verde claro * ojo → ámbar legible sobre el crema dorado * falta → rojo sobre rojo claro * mudo → tinta suave sobre crema * * `mudo` es el que importa: «no se pudo comprobar», «fuera del alcance» y * «pendiente de publicación» NO se pintan de rojo por mucho que suenen a * negativa. Ahí el que falló fue este servicio o la fuente, no el escrito, y * teñirlas de rojo sería acusar a quien citó bien. Por eso se llevan el par * neutro y no el de aviso. */ --tinte-bien: var(--nb-green-bg); --tinte-bien-alto: #C6EFD6; --sello-bien: var(--nb-green); --tinte-ojo: var(--nb-gold-pale);--tinte-ojo-alto: #F9E3AC; --sello-ojo: var(--nb-amber-text); --tinte-falta: var(--nb-red-bg); --tinte-falta-alto: #F6CFCC; --sello-falta: var(--nb-red); --tinte-mudo: var(--nb-paper-2); --tinte-mudo-alto: var(--nb-paper-3); --sello-mudo: var(--nb-ink-soft); /* ── líneas y bordes ────────────────────────────────────────────────────── */ /* El borde no es decoración: los tintes suaves no llegan al 3:1 contra el * papel, así que lo que hace visible el LÍMITE de una caja es el borde. No * puede desaparecer en ningún estado. */ --borde-color: var(--nb-ink); --borde-ancho: var(--nb-bd); --borde: var(--borde-ancho) solid var(--borde-color); --borde-fino: var(--nb-bd-hair) solid var(--linea); /* Las dos líneas de dentro son tinta translúcida y no un gris: sobre crema, * un gris neutro se ve azulado al lado del papel cálido. La más marcada es * la que dibuja el borde discontinuo de la zona de soltar, y por debajo de * .22 ese recuadro deja de leerse como un sitio donde tirar algo. */ --linea: rgba(20, 18, 15, .22); --linea-suave: rgba(20, 18, 15, .12); /* ── sombra dura ────────────────────────────────────────────────────────── */ /* Sin difuminado y sin transparencia: es un bloque desplazado, no una sombra. * El desplazamiento se declara UNA vez y de ahí salen los dos gemelos, para * que «pulsar» sea caer exactamente en el hueco de la propia sombra. Las dos * medidas salen de --nb-sx, como en .nb-chip (una menos) y .nb-btn. */ --sombra-color: var(--nb-ink); --d-s: calc(var(--nb-sx) - 1px); --d-m: var(--nb-sx); --sombra-s: var(--d-s) var(--d-s) 0 0 var(--sombra-color); --sombra-m: var(--d-m) var(--d-m) 0 0 var(--sombra-color); --empuje-s: translate(var(--d-s), var(--d-s)); --empuje-m: translate(var(--d-m), var(--d-m)); /* ── la marca de estado ─────────────────────────────────────────────────── */ /* Tokens propios, y no los de superficie, porque la marca tiene que dibujarse * SIEMPRE con un par de máximo contraste: media docena de las ocho geometrías * son un relleno recortado, y si el fondo de la marca no fuera claramente * distinto de su tinta, la mitad de los estados se perdería. */ --marca-fondo: var(--papel-caja); --marca-tinta: var(--tinta); --marca: 15px; --marca-borde: 2px; --marca-banda: 3px; /* la banda que parte «metadatos discrepantes» */ --marca-punto: 3px; /* el hueco del punto de «pendiente de publicación» */ /* ── tipografía ─────────────────────────────────────────────────────────── */ /* Las dos de Jurisia, servidas por Google Fonts desde index.html. Antes aquí * había un argumento para no descargar ninguna: que este producto promete que * el escrito no sale de aquí. Sigue siendo verdad —el escrito no viaja a * ningún CDN—, pero el usuario llega desde jurisia.com.co y con la fuente del * sistema aterrizaba en otro producto. La coherencia de marca gana, y las dos * familias ya estaban permitidas por la CSP del sitio. * * La monoespaciada, en cambio, se queda en la del sistema, y esa sí es una * decisión de contenido: es obligatoria para TODO dato —identificador, fecha, * radicado, estado, cifra— porque en una tabla de citas la comparación * vertical es la operación principal, y con ancho variable no se alinea. */ --fuente-texto: var(--nb-font-ui); --fuente-titulo: var(--nb-font-display); --fuente-dato: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* En rem y no en px: quien sube el tamaño de letra del navegador porque lo * necesita tiene derecho a que esta interfaz le haga caso. */ --t-xs: 0.6875rem; /* 11px */ --t-s: 0.8125rem; /* 13px */ --t-m: 0.9375rem; /* 15px */ --t-l: 1.0625rem; /* 17px */ --t-xl: 1.375rem; /* 22px */ --t-xxl: 1.75rem; /* 28px */ /* El único tamaño fluido, y solo el titular de portada. Los datos NO escalan * con el ancho: una tabla que cambia de tamaño al girar el móvil descuadra la * retícula. La parte en rem antes del vi es lo que impide que el zoom del * navegador se quede sin efecto. */ --t-titulo: clamp(1.5rem, 1.15rem + 1.6vi, 2.25rem); /* 24px → 36px */ /* El tamaño de los campos es un token aparte por un motivo concreto: iOS * Safari amplía la página al enfocar cualquier campo con letra menor de 16px * y NO deshace el zoom al salir. Ver el bloque de puntero grueso. */ --t-campo: var(--t-s); --alto-linea: 1.6; --alto-linea-titulo: 1.15; --peso-medio: 500; --peso-fuerte: 700; /* Space Grotesk llega a 700 y ni un paso más: pedirle 800 solo consigue que * el navegador la engorde por su cuenta y salga sucia. Lo que de verdad pesa * en este sistema es Archivo Black, que se pide por FAMILIA y no por peso * —tiene un solo corte—, y por eso los titulares llevan --peso-display. */ --peso-titulo: 700; --peso-display: 400; /* Los rótulos van en versalitas con tracking abierto: a 11px, sin espaciado, * las mayúsculas se apelmazan. Los titulares, al revés. */ --tracking-rotulo: 0.07em; --tracking-titulo: -0.02em; --tracking-dato: 0.01em; /* Archivo Black ya viene muy apretada de origen: apretarla otro 2% junta las * astas y el titular se lee como una mancha. */ --tracking-display: -0.005em; /* ── espaciado ──────────────────────────────────────────────────────────── */ /* Múltiplos de 4 y nada más. Un 6px suelto es lo que hace que dos bloques * parecidos no acaben de alinearse y nadie sepa por qué. */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px; --e16: 64px; /* El aire de una celda de tabla. Va aparte de la escala general porque es la * medida que decide cuántas citas caben en una pantalla. */ --celda-y: var(--e2); --celda-x: var(--e3); /* El margen lateral de la página, fluido: 16px en un móvil y 32px a partir de * tableta. En 360px de ancho, recuperar 16px por lado es un 9% de pantalla. */ --margen: clamp(1rem, 0.5rem + 2.5vi, 2rem); /* El aire vertical de la portada se mide contra el ALTO de la ventana, no * contra el ancho. Es lo que hace que la pantalla de inicio quepa entera en * un portátil de 768px de alto y siga respirando en un monitor de 1440: en un * caso el aire se encoge y en el otro se estira, sin un punto de ruptura que * alguien tenga que adivinar. */ /* Calibrado contra la regla de la casa: EN SU ESTADO BASE la pagina no debe hacer scroll. Medido en 1366x768 —el portatil mas comun— la portada con la zona de entrada se iba 28px por encima, y 82px en 1366x700. El suelo de los clamp era lo que sobraba: en una ventana baja daba igual cuanto se encogiera la ventana, el aire minimo no bajaba de 16px por banda. Con un informe delante la pagina crece y hace scroll, y eso esta bien: entonces hay algo que leer. */ --aire: clamp(var(--e2), 2svh, var(--e6)); --aire-hoja: clamp(var(--e2), 3svh, var(--e8)); /* ── forma ──────────────────────────────────────────────────────────────── */ /* La esquina de Jurisia: 8px. Ni recta —sale hostil, y a esta herramienta * llega gente preocupada por un escrito que ya presentó— ni de juguete. */ --radio: var(--nb-radius); --radio-s: calc(var(--nb-radius) - 2px); --radio-pastilla: 999px; /* sellos, recuentos y el límite de la portada */ --radio-marca: 2px; /* más redondeo se comería la esquina que distingue * «incompleta, resuelta por contexto» */ --radio-hilo: 1px; /* el redondeo de las piezas de dentro de la marca */ /* ── movimiento ─────────────────────────────────────────────────────────── */ /* La curva de Jurisia: corta y seca. El movimiento neobrutalista es mecánico, * nada entra deslizándose ni rebota. El gesto de pulsar es casi instantáneo a * propósito: un botón que tarda en hundirse se siente roto. */ --transicion: 130ms var(--nb-ease); --transicion-pulsar: 90ms var(--nb-ease); /* ── foco ───────────────────────────────────────────────────────────────── */ /* Un anillo de dos colores: el azul de Jurisia por fuera y papel por dentro. * Uno solo no sirve aquí: el azul pegado al borde de 2px de tinta se lee como * un filete más, y el hueco de papel es lo que lo separa. Con los dos, el * foco se ve se pose donde se pose. */ --foco: var(--nb-bd-thick); --foco-hueco: var(--nb-bd); --foco-tinta: var(--nb-azure); --foco-papel: var(--nb-white); /* ── medidas ────────────────────────────────────────────────────────────── */ --ancho-max: 1280px; --ancho-columna: 880px; /* la portada: una columna centrada, ancha justo lo * suficiente para las dos vías de entrada en * paralelo y estrecha para que el texto se lea */ --ancho-prosa: 62ch; /* la prosa explicativa no pasa de aquí */ /* La medida de las fichas de citas textuales. En `rem` a propósito: es la * misma para bloques de distinto tamaño de letra, y por eso todos acaban en * la misma vertical. */ --medida-ficha: 46rem; --ancho-detalle: 440px; /* panel derecho */ --toque: 32px; /* alto mínimo de cualquier objetivo de puntero */ --casilla: 20px; /* svh y no vh ni dvh: `vh` en móvil cuenta con la barra del navegador * retraída y deja el bloque más alto que la pantalla; `dvh` cambia de valor * al hacer scroll y provoca saltos. `svh` es la ventana pequeña y estable. */ --alto-visible: 100svh; } /* ── ventanas bajas ────────────────────────────────────────────────────────── * * En un portátil de 768px de alto la portada tiene que caber igual, y lo que * sobra ahí es tamaño de titular, no información. Se ajusta por token: ni una * regla nueva y ni un elemento escondido. */ @media (max-height: 50em) { :root { --t-titulo: clamp(1.375rem, 1.05rem + 1.4vi, 1.875rem); /* 22px → 30px */ --t-xxl: 1.5rem; } } /* ── pantallas táctiles ────────────────────────────────────────────────────── * * Dos correcciones, las dos por token y ninguna regla nueva. */ @media (pointer: coarse) { :root { /* Ver --t-campo: por debajo de 16px, iOS amplía al enfocar y no vuelve. */ --t-campo: 1rem; /* Un dedo no es un puntero: los objetivos crecen al tamaño recomendado. */ --toque: 44px; --marca: 17px; } } /* ── más contraste ─────────────────────────────────────────────────────────── * * Quien pidió más contraste al sistema recibe la versión sin tintes: se apagan * los rellenos suaves, engorda el borde y desaparece la sombra. Ni una regla * nueva, solo tokens: es exactamente para lo que sirve la disciplina de este * archivo. */ @media (prefers-contrast: more) { :root { --papel: var(--nb-white); --papel-2: var(--nb-white); --papel-3: var(--nb-white); --papel-marca: var(--nb-white); --tinte-bien: var(--nb-white); --tinte-bien-alto: var(--nb-white); --tinte-ojo: var(--nb-white); --tinte-ojo-alto: var(--nb-white); --tinte-falta:var(--nb-white); --tinte-falta-alto:var(--nb-white); --tinte-mudo: var(--nb-white); --tinte-mudo-alto: var(--nb-white); --tinta-2: var(--nb-ink); --tinta-3: var(--nb-ink-2); --sello-ojo: var(--nb-amber-text-strong); --borde-ancho: var(--nb-bd-thick); --linea: var(--nb-ink-soft); --sombra-s: none; --sombra-m: none; --empuje-s: none; --empuje-m: none; } } /* ── impresión ─────────────────────────────────────────────────────────────── * * El informe se lleva al expediente en papel. Fondo blanco, tinta negra, y * ninguna sombra: una sombra dura sin difuminar se imprime como un bloque negro * de cinco milímetros pegado a cada caja. Se apaga por token, sin tocar una * sola regla. */ @media print { :root { --papel: var(--nb-white); --papel-caja: var(--nb-white); --papel-2: var(--nb-white); --papel-3: var(--nb-white); --papel-hover: var(--nb-white); --papel-marca: var(--nb-white); /* En papel la tinta es negra de verdad: el negro cálido de la marca se * imprime lavado y el crema, sencillamente, no existe. */ --tinta: #000000; --tinta-2: #000000; --tinta-3: #3a3a3a; --tinta-4: #6a6a6a; --tinta-sobre-marca: #000000; --tinta-sobre-accion: #000000; --tinta-sobre-realce: #000000; --relleno-accion: var(--nb-white); --relleno-realce: #d8d8d8; /* gris de rotulador: en papel el dorado se va */ --relleno-fallo: #000000; /* En papel no hay tintes. La geometría de la marca y el nombre del estado * llevan solos toda la información, que es justo lo que se comprueba * mirando el informe impreso. */ --tinte-bien: var(--nb-white); --tinte-bien-alto: var(--nb-white); --sello-bien: #000000; --tinte-ojo: var(--nb-white); --tinte-ojo-alto: var(--nb-white); --sello-ojo: #000000; --tinte-falta:var(--nb-white); --tinte-falta-alto:var(--nb-white); --sello-falta:#000000; --tinte-mudo: var(--nb-white); --tinte-mudo-alto: var(--nb-white); --sello-mudo: #000000; /* En papel el acento es tinta: si fuera dorado desaparecerían el subrayado * de la cifra que reclama atención y el contorno de la fila abierta, que * son las dos señales que el informe impreso no se puede permitir perder. */ --acento: #000000; --borde-color: #000000; --borde-ancho: 1.5px; --linea: #6a6a6a; --linea-suave: #a0a0a0; --marca-fondo: var(--nb-white); --marca-tinta: #000000; --sombra-s: none; --sombra-m: none; --empuje-s: none; --empuje-m: none; } }