/* ============================================================================ FACTIBLE · CORREO CORPORATIVO — SISTEMA DE DISEÑO "REGISTRO" tokens.css · capa 0: tipografía, color, espacio, forma, movimiento. No contiene componentes. Solo custom properties y @font-face. Todo se declara en :root. Nada aquí depende de una vista. ========================================================================= */ /* --- 1. FUENTES ---------------------------------------------------------- DOS archivos variables, locales, sin red. Un solo rango de peso por familia (300–700): el navegador saca 300/400/500/600/700 del mismo woff2. Antes eran ocho .woff estáticos y 1.19 MB; ahora dos woff2 y 56 KB. «Factible Prosa» = Source Sans 3 (Adobe, OFL 1.1): humanista, de trazo tranquilo y aperturas abiertas. Reemplaza a Fira Sans, cuyos remates cortados en diagonal eran lo que se leía como agresivo. «Factible Cifra» = Source Code Pro, su monoespaciada hermana: mismo autor, misma altura de x, misma altura de mayúscula y las MISMAS métricas verticales, así que la cifra se sienta sobre la línea óptica de la prosa en vez de parecer pegada encima. Se renombraron porque las dos llevan Reserved Font Name 'Source' y estos archivos son versiones modificadas (subconjunto latín + eje recortado a 300–700 + métricas verticales igualadas a las de Fira con USE_TYPO_METRICS, caja de línea 1.200 em — sin eso, todo lo que hereda `line-height: normal` crecía 19 %). Procedencia, licencias y receta de reconstrucción: app/static/fonts/PROCEDENCIA.txt y los dos OFL-*.txt de esa carpeta. OJO: NO existen en estas caras ◇ (U+25C7), ✕ (U+2715), ✗ (U+2717) ni ⚠ (U+26A0) — caen a la fuente del sistema. Sí existen ◊ ○ ● ■ □ △ ▲ ▸ ▾ ✓ ×. font-display:swap para no bloquear el primer pintado. */ @font-face { font-family: "Factible Prosa"; src: url("../assets/fonts/FactibleProsa.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Factible Cifra"; src: url("../assets/fonts/FactibleCifra.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } :root { /* --- 2. FAMILIAS Y RASGOS ---------------------------------------------- */ --fuente-texto: "Factible Prosa", ui-sans-serif, system-ui, sans-serif; --fuente-cifra: "Factible Cifra", ui-monospace, "SF Mono", monospace; /* Figuras tabulares. Las dos caras traen las diez cifras con EL MISMO avance en todos los pesos 300–700, sin depender del rasgo `tnum` — que además NO declaran, así que esta variable no tiene efecto sobre ellas. Se conserva a propósito: no estorba, documenta la intención y protege el día que se cambie de familia. Si alguien audita el CSS buscando `tnum` en la fuente, que sepa que no lo va a encontrar y que las columnas cuadran igual. */ --cifras-tabulares: tabular-nums lining-nums; --peso-claro: 300; --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-fuerte: 700; /* --- 3. ESCALA TIPOGRÁFICA -------------------------------------------- Escala corta y decidida (~1.2). Un cliente de correo no necesita doce tamaños; necesita seis que se distingan de verdad. SUBE UN ESCALÓN todo lo que se LEE EN MINÚSCULA, y sólo eso. Razón medida, no opinada: la altura de x de Factible Prosa es 0.92 de la de Fira pero su ancho es 0.91 — al subir un píxel el texto recupera el tamaño aparente de antes Y la línea sigue ocupando 3 % MENOS de ancho, así que ningún asunto se corta antes que ayer. La altura de MAYÚSCULA, en cambio, es 0.96: la versalita de 11 px ya se lee igual de grande y subirla sólo le daría peso, que es exactamente lo que esta tanda quita. Coste: media fila menos por pantalla en la bandeja. Se acepta. */ --txt-4xs: 0.625rem; /* 10px · SIN CAMBIO · SOLO conteos superpuestos y pies de miniatura. Promovido en integración: tres vistas habían escrito 0.625rem y 0.5625rem sueltos. */ --txt-3xs: 0.6875rem; /* 11px · SIN CAMBIO · versalitas y marcas de columna */ --txt-2xs: 0.8125rem; /* 13px · era 12 · meta, folios, cuota, hora */ --txt-xs: 0.875rem; /* 14px · era 13 · vista previa del cuerpo, señales */ --txt-sm: 0.9375rem; /* 15px · era 14 · texto base de interfaz */ --txt-md: 1rem; /* 16px · era 15 · asunto del renglón, cuerpo */ --txt-lg: 1.1875rem; /* 19px · era 18 · asunto en lectura */ --txt-xl: 1.4375rem; /* 23px · era 22 · título de vista */ --txt-2xl: 1.75rem; /* 28px · SIN CAMBIO · cifra grande de estado vacío */ /* Las ascendentes y descendentes de Factible Prosa son más largas que las de Fira: a 1.2 se rozaban. Estos tres valores son, además, la parte de aire que esta tanda pedía y que no se resuelve quitando nada. */ --interlinea-apretada: 1.25; /* era 1.2 */ --interlinea-normal: 1.5; /* era 1.45 */ --interlinea-prosa: 1.7; /* era 1.65 */ /* Entrelestrado: sólo para las mayúsculas de encabezado de columna. Sin cambio — las mayúsculas de Factible Prosa son algo más estrechas y bastante más abiertas, y con 0.08em la versalita ya respira. */ --espaciado-versalita: 0.08em; /* --- 4. COLOR --------------------------------------------------------- Todo en OKLCH sobre un eje de matiz 265 (índigo-azul). Los neutros NO son grises puros: llevan croma 0.013–0.016 del mismo matiz, así el fondo pertenece a la marca en vez de estar debajo de ella. Identidad conservada: azul Factible #3B82F6 ≈ oklch(.623 .214 260) índigo Factible #4F46E5 ≈ oklch(.511 .262 277) */ --matiz-base: 265; /* 4.1 Superficies — profundidad por luminosidad, no por sombra. */ --lienzo: oklch(0.165 0.013 var(--matiz-base)); /* fondo de la app */ --superficie-1: oklch(0.210 0.014 var(--matiz-base)); /* paneles */ --superficie-2: oklch(0.245 0.015 var(--matiz-base)); /* realce, hover */ --superficie-3: oklch(0.285 0.016 var(--matiz-base)); /* menús, diálogos */ --superficie-hundida: oklch(0.130 0.012 var(--matiz-base)); /* campos, código */ /* 4.2 Bordes — reglas del registro. La fina separa, la marcada agrupa. */ --regla-fina: oklch(0.285 0.014 var(--matiz-base)); --regla-media: oklch(0.320 0.016 var(--matiz-base)); --regla-fuerte: oklch(0.400 0.018 var(--matiz-base)); /* 4.3 Texto — verificados contra --superficie-1 y --lienzo (todos ≥ 5.6:1) */ --txt-1: oklch(0.960 0.006 var(--matiz-base)); /* 15.8:1 · asuntos, nombres */ --txt-2: oklch(0.800 0.012 var(--matiz-base)); /* 9.5:1 · cuerpo, previa */ --txt-3: oklch(0.680 0.016 var(--matiz-base)); /* 6.2:1 · meta y cifras */ --txt-invertido: oklch(0.170 0.020 var(--matiz-base)); /* sobre relleno vivo */ /* 4.4 Marca — rampa del azul Factible. */ --marca-900: oklch(0.300 0.100 262); --marca-800: oklch(0.380 0.140 262); --marca-700: oklch(0.470 0.175 261); --marca-600: oklch(0.560 0.200 261); --marca-500: oklch(0.640 0.190 262); /* ≈ #3B82F6 · la REGLA DE MARGEN viva */ --marca-400: oklch(0.700 0.150 259); /* 6.6:1 · texto de marca */ --marca-300: oklch(0.780 0.110 258); --indigo-600: oklch(0.511 0.200 277); /* ≈ #4F46E5 · acento secundario */ --indigo-400: oklch(0.680 0.150 275); /* Texto SOBRE un relleno de marca (botón primario, pastilla activa, perilla del interruptor). Promovido en integración: este literal estaba escrito a mano cuatro veces en tres archivos distintos. */ --sobre-marca: oklch(0.99 0.005 260); /* 4.5 Semánticos DISCIPLINADOS. Regla del sistema: todo semántico vive en L 0.70–0.80 y C 0.10–0.14, el mismo sobre que --marca-400. Prohibido el verde/naranja de biblioteca a saturación completa: se despega del fondo y grita más que la marca. */ --exito: oklch(0.760 0.105 163); /* 8.6:1 · entregado, firmado */ --aviso: oklch(0.800 0.105 85); /* 9.4:1 · requiere atención */ --riesgo: oklch(0.700 0.135 22); /* 6.2:1 · falla, rechazo */ --neutro: var(--txt-3); /* automatizado, sin carga */ /* Fondos semánticos: el mismo matiz mezclado contra la superficie, para que el distintivo se hunda en el panel en vez de pegarse encima. */ --exito-fondo: color-mix(in oklab, var(--exito) 14%, var(--superficie-1)); --aviso-fondo: color-mix(in oklab, var(--aviso) 14%, var(--superficie-1)); --riesgo-fondo: color-mix(in oklab, var(--riesgo) 16%, var(--superficie-1)); --marca-fondo: color-mix(in oklab, var(--marca-400) 16%, var(--superficie-1)); --neutro-fondo: var(--superficie-2); --exito-regla: color-mix(in oklab, var(--exito) 34%, transparent); --aviso-regla: color-mix(in oklab, var(--aviso) 34%, transparent); --riesgo-regla: color-mix(in oklab, var(--riesgo) 38%, transparent); --marca-regla: color-mix(in oklab, var(--marca-400) 38%, transparent); /* 4.6 Estados de superficie — mezclas, nunca colores nuevos. --tinta-hover es el color que se mezcla para realzar una fila: en pantalla se aclara con blanco, en papel se ensucia con negro. Un solo token para que las 18 hojas no tengan que saber en qué edición están. */ --tinta-hover: oklch(1 0 0); --realce-suave: color-mix(in oklab, var(--marca-500) 10%, transparent); --realce-medio: color-mix(in oklab, var(--marca-500) 16%, transparent); --seleccion: color-mix(in oklab, var(--marca-500) 13%, var(--superficie-1)); --hover-fila: color-mix(in oklab, var(--tinta-hover) 4%, transparent); /* 4.7 Velo — lo que se pone detrás de un diálogo o de la paleta. Estaba escrito a mano dos veces en app.css. */ --velo: color-mix(in oklab, oklch(0.10 0.02 var(--matiz-base)) 68%, transparent); /* 4.8 Colores de agenda. Cuatro calendarios, cuatro matices, todos en la misma franja de luminosidad que los semánticos. Vivían en view-calendario.css; suben aquí porque cambian con la edición. El color de agenda se usa a la vez como FONDO del bloque (mezclado al 15–26 % contra la superficie) y como TINTA de la hora DENTRO de ese mismo bloque, así que su luminosidad tiene que aguantar contra su propia mezcla en el peor caso, que es el bloque con el cursor encima (26 %). El personal estaba en 0.700 y ahí medía 4.42:1: el único fallo AA que le quedaba a la edición de pantalla. En 0.730 mide 4.75:1 y los otros tres ya cumplían. */ --cal-personal: oklch(0.730 0.150 259); --cal-direccion: oklch(0.730 0.120 292); --cal-eventos: oklch(0.760 0.110 330); --cal-mesa: oklch(0.775 0.095 200); /* 4.8.b Factible Core no es «un calendario más de la persona»: es una PROCEDENCIA. Tiene token propio y no cuelga de --cal-direccion porque el día que alguien cree de verdad un calendario «Dirección» los dos querrían el mismo valor y uno de los dos tendría que ceder. Hoy comparten números a propósito —el matiz 292 estaba libre y es el que le tocaba—; separarlos es cambiar una línea, no cambiar el diseño. La procedencia NO se lee en el color: se lee en la trama diagonal y en la forma del punto de la agenda. El color sigue diciendo de qué calendario es. Por eso esto no es «el quinto color», es el nombre del cuarto. */ --cal-core: oklch(0.730 0.120 292); /* 4.8.c Azul de marca LEGIBLE COMO TEXTO en las dos ediciones. --marca-400 mide 6.1:1 sobre --superficie-2 en pantalla pero 2.4:1 en papel, y --marca-300 todavía menos: ninguno de los dos servía para un enlace que tiene que leerse en las dos. Este token existe para eso y sólo para eso — «Descargar» de un adjunto, «Deshacer» de un aviso, cualquier enlace de marca. No es una superficie ni un borde: es tinta. */ --marca-texto: var(--marca-400); /* El ESCALÓN DE ÉNFASIS de esa misma tinta: el hover de un enlace, la cifra de la carpeta en la que estás, la pastilla de marca, la clave de un operador. Existe porque el énfasis va en direcciones OPUESTAS según la edición: en pantalla se aclara (--marca-300) y en papel se oscurece (--marca-800). Las 24 hojas que escribían --marca-300 como color de texto estaban, sin saberlo, decidiendo la edición de pantalla por las dos, y en papel medían 1.9:1 — el peor fallo de contraste del producto. Medido: pantalla 8.84:1 sobre el panel · papel 9.93:1. */ --marca-texto-vivo: var(--marca-300); /* 4.8.d LOS CUATRO TINTES DE CARPETA. Cuatro matices contiguos en la franja fría, para que el trazo del icono de una carpeta diga de qué rama es sin gastar una insignia ni una palabra. Son contiguos a propósito: distinguen sin categorizar — cuatro azules vecinos se leen como cuatro variantes de lo mismo, que es lo que son. NO llevan par de fondo ni de regla como los semánticos porque sólo tiñen un trazo de 15 px: no hay superficie que mezclar. Piso exigible a un grafismo, 3:1. Medido sobre --superficie-1: pantalla 8.0 / 8.0 / 7.9 / 7.8 y sobre el lienzo 8.7 · papel 5.4 / 5.4 / 5.6 / 5.7 sobre la hoja. */ --carpeta-1: oklch(0.740 0.100 190); --carpeta-2: oklch(0.740 0.100 206); --carpeta-3: oklch(0.740 0.100 222); --carpeta-4: oklch(0.740 0.100 238); /* 4.8.e LA RAMPA DEL SELLO DE REMITENTE. Cinco tintes para el monograma que rotula a un remitente. La luminosidad es DELIBERADAMENTE la de --txt-3 (6.15:1 en pantalla, 5.68:1 en papel): el sello rotula al nombre y no puede pesar más que el nombre. El tinte 1 es la casa (matiz base, croma bajo, 0.030): lo propio no se disfraza de categoría. Los otros cuatro llevan croma 0.055 y matices repartidos. Medido letra/disco: 4.9–5.1:1 en las dos ediciones. */ --tinte-1: oklch(0.680 0.030 var(--matiz-base)); --tinte-2: oklch(0.680 0.055 190); --tinte-3: oklch(0.680 0.055 300); --tinte-4: oklch(0.680 0.055 330); --tinte-5: oklch(0.680 0.055 50); /* Las proporciones con que el sello deriva su disco y su anillo del tinte. Son las mismas que ya usan --marca-fondo y --marca-regla; se extraen a token porque cambian de una edición a otra y el componente no tiene por qué saber en cuál está. Se consumen así: background: color-mix(in oklab, var(--tinte-N) var(--tinte-fondo-pct), var(--superficie-1)); border-color: color-mix(in oklab, var(--tinte-N) var(--tinte-filo-pct), transparent); */ --tinte-fondo-pct: 16%; --tinte-filo-pct: 38%; /* 4.9 Foco — un solo anillo en todo el sistema. 9.4:1 contra el lienzo. */ --foco: oklch(0.780 0.140 255); --foco-anillo: 2px; --foco-separacion: 2px; /* --- 4.10 REGLAS DE PROPORCIÓN ---------------------------------------- Los dos tonos de una regla de 2–3 px que dice CUÁNTO: la barra de volumen de una teja, el pulso de una ficha, un desglose partido en dos tramos. Se declaran porque no había par para «lleno/vacío»: los tokens de texto pesan como tinta de prosa sobre la hoja y los de borde desaparecen en pantalla. Una regla de proporción no es texto ni es un borde; es un dato. No son semánticos y no lo pueden ser: llenar más o menos no está bien ni mal. Por eso son neutros del matiz base y NO tocan la rampa de marca — el azul en este producto sólo puede querer decir «sin leer». Contraste medido sobre --superficie-1, que es donde viven (teja y ficha). Piso exigible a un gráfico de 2–3 px: 3:1. pantalla llena 4.86:1 · vacía 1.45:1 · el par entre sí 3.35:1 papel llena 4.89:1 · vacía 1.48:1 · el par entre sí 3.31:1 La llena queda deliberadamente por debajo de --txt-3 (6.15 / 5.68): una barra de 3 px con peso de párrafo se lee como un subrayado, no como una medida. */ --medida-llena: oklch(0.620 0.030 var(--matiz-base)); --medida-vacia: oklch(0.330 0.016 var(--matiz-base)); /* El SEGUNDO tramo de una regla partida («24 recibidos │ 7 enviados»). Se distingue por matiz y no sólo por fuerza, porque los dos tramos son la misma clase de cosa —mensajes— y hacerlo con fuerza diría que uno importa más. Violeta apagado: es el sector frío que no ocupa ni la marca (258–277) ni ningún semántico (22 · 85 · 163). Comparte vecindario con los colores de agenda (292 y 330), y se acepta: una pastilla de calendario y el pulso de una ficha de contacto no coinciden nunca en pantalla, y ese es otro vocabulario de categoría, no de valor. Medido sobre --superficie-1: pantalla 3.10:1 · papel 3.37:1. Contra la llena queda en 1.57:1 / 1.45:1 — no llega a 3:1 y no puede llegar sin empujar el primer tramo a un bloque de 9:1, así que el desglose lleva SIEMPRE su cifra en texto al lado: la regla resume, la cifra dicta. Calibrado contra --superficie-1; sobre --superficie-3 en pantalla cae a 2.5:1. Si una vista necesita la regla partida dentro de un menú, que lo pida y se declara la variante. */ --medida-contraparte: oklch(0.520 0.090 305); /* --- 5. LA REGLA DE MARGEN -------------------------------------------- El elemento distintivo. 2px verticales al filo izquierdo del renglón. Encendida = sin leer. Apagada = leída. No significa nada más. */ --regla-margen-grosor: 2px; --regla-margen-viva: var(--marca-500); --regla-margen-muerta: oklch(0.300 0.014 var(--matiz-base)); /* --- 5.b EL FILO DE ATENCIÓN — la única excepción, y acotada ------------ En el REGISTRO DE MENSAJES el filo significa una sola cosa y no se toca. Administración no lista mensajes: lista servicios, dominios y cola, y ahí un renglón sí puede «requerir una acción». Hasta ahora esa hoja escribía `var(--aviso)` directo sobre .renglon__regla — token legal, pero decía «aviso» y no dejaba registrado que el filo del sistema se está reutilizando. Queda escrito aquí para que la reutilización tenga un solo sitio, un solo nombre y un límite: SÓLO fuera de #registro. Si aparece en la bandeja, es un error, no una variante. No es --aviso: el ámbar de aviso mide 9.44:1 contra el panel en pantalla y grita casi el doble que la regla viva (5.14:1) — un filo secundario que pesa más que el principal invierte la jerarquía del producto. Éste está calibrado a la MISMA presencia que la regla viva: pantalla 5.23:1 (la viva, 5.14) · papel 4.88:1 (la viva, 4.65) En papel sube de luminosidad y de croma respecto de --aviso: sobre hoja blanca un ámbar oscuro se lee café, no ámbar. */ /* --regla-margen-atencion: RETIRADO en la integración del 2026-08-09. Autorizaba un SEGUNDO significado para el filo del margen («requiere una acción», fuera de #registro). Sus dos usuarios lo soltaron en esta tanda: administración pasó su estado a los glifos △ ◇ y la ficha de contactos quitó el filo de su aviso, que ya decía ámbar con el fondo, el borde y el icono. El filo de 2 px vuelve a significar UNA cosa: sin leer. */ /* --- 6. ESPACIO ------------------------------------------------------ Escala de 4px. El registro respira por la columna, no por el relleno. */ --e-0: 0; --e-1: 0.25rem; /* 4px */ --e-2: 0.5rem; /* 8px */ --e-3: 0.75rem; /* 12px */ --e-4: 1rem; /* 16px */ --e-5: 1.25rem; /* 20px */ --e-6: 1.5rem; /* 24px */ --e-8: 2rem; /* 32px */ --e-10: 2.5rem; /* 40px */ --e-12: 3rem; /* 48px */ --e-16: 4rem; /* 64px */ /* Objetivo táctil mínimo. Obligatorio en móvil. */ --toque-min: 44px; /* --- 6.b EL RITMO DEL BLOQUE ------------------------------------------ El aire es el material de esta tanda: con la mitad de elementos y el doble de espacio, la misma información se lee como cuidada sin añadir nada. Hoy los bloques se separan con 12–16 px y se distinguen con OTRO fondo: el sistema gasta color donde tenía que gastar espacio. Estos cuatro son ALIAS de --e-*, nunca valores nuevos: le ponen nombre al ritmo para que ninguna hoja tenga que decidirlo otra vez y para que el día que el ritmo cambie, cambie en un sitio. Quien necesite un quinto escalón lo PIDE aquí; escribir un número suelto en una vista es lo que produjo los nueve fondos y los ocho bordes por pantalla que esta tanda deshace. --aire-tema entre dos bloques que hablan de cosas distintas --aire-bloque entre dos bloques mayores del mismo panel (mínimo) --aire-interno entre las piezas de UN bloque --panel-relleno relleno lateral del cuerpo de un panel */ --aire-tema: var(--e-10); /* 40px */ --aire-bloque: var(--e-8); /* 32px */ --aire-interno: var(--e-4); /* 16px */ --panel-relleno: var(--e-6); /* 24px */ /* --- 7. FORMA -------------------------------------------------------- Radios cortos: un registro tiene esquinas, no burbujas. */ --radio-0: 0; --radio-1: 3px; /* distintivos, campos */ --radio-2: 5px; /* botones, renglones */ --radio-3: 8px; /* paneles, menús */ --radio-4: 12px; /* diálogos, paleta de comandos */ --radio-pleno: 999px; /* --- 8. SOMBRA ------------------------------------------------------- Solo para lo que flota de verdad (menú, diálogo, aviso). En un tema oscuro la sombra se apoya en un filo claro, no en un borrón negro. */ --sombra-1: 0 1px 2px oklch(0 0 0 / 0.30); --sombra-2: 0 4px 12px oklch(0 0 0 / 0.38), 0 0 0 1px oklch(1 0 0 / 0.05); --sombra-3: 0 16px 40px oklch(0 0 0 / 0.50), 0 0 0 1px oklch(1 0 0 / 0.07); /* --- 9. MOVIMIENTO --------------------------------------------------- Corto y con freno. Nada rebota; esto es contabilidad, no un juguete. */ --dur-1: 90ms; /* respuesta táctil: hover, presión */ --dur-2: 160ms; /* aparición de menús, cambio de estado */ --dur-3: 240ms; /* transición de vista, diálogos */ --dur-4: 380ms; /* aviso con deshacer entrando */ --curva-salida: cubic-bezier(0.16, 0.84, 0.44, 1); /* frena al llegar */ --curva-entrada: cubic-bezier(0.55, 0, 0.85, 0.35); /* acelera al irse */ --curva-estandar: cubic-bezier(0.4, 0.14, 0.3, 1); /* --- 9.b LA GRAMÁTICA DEL MOVIMIENTO ----------------------------------- §9 fijó el pulso; esto fija la gramática. Regla del sistema, y es una condición de admisión, no un techo: aquí sólo se mueve lo que cambió de valor, y se mueve para decir en qué se convirtió. Si después de la animación no hay un dato distinto que antes, esa animación sobra. Se escribe así porque un buzón se usa ocho horas: el movimiento decorativo se paga cuatrocientas veces al día y el que explica se cobra una vez. Toda duración de este bloque es un ALIAS de --dur-1..4, jamás un número nuevo. Es lo que deja §11 intacto: al irse a 1 ms las cuatro duraciones madre se van también todas sus derivadas, y nadie tiene que acordarse de añadir una línea allá abajo. Las dos excepciones están marcadas. Los nombres tienen intención: quien lee la hoja de una vista sabe QUÉ se está temporizando, no sólo cuánto dura. */ --dur-trazo: var(--dur-3); /* la regla de margen se escribe o se borra */ --dur-hueco: var(--dur-2); /* el renglón sale y el hueco se cierra */ --dur-desplegar: var(--dur-3); /* un grupo abre hasta su alto real */ /* Esto es lo que hace ANIMABLE `height: auto`. Va en :root porque se hereda, y así el rail plegable, los detalles técnicos y los grupos del árbol animan su alto de verdad, sin medirlo con JavaScript y sin el max-height de mentiras que siempre queda corto o largo. Se auditó antes de encenderlo: hoy NINGUNA de las 19 hojas transiciona height, block-size, max-height ni grid-template-rows, y no hay un solo `transition: all`, así que encenderlo no cambia una línea de lo ya escrito. A partir de ahora sí: quien escriba `transition: block-size` obtiene animación donde antes obtenía un salto. Es lo que queremos; conviene saberlo antes y no descubrirlo. */ interpolate-size: allow-keywords; /* LA CURVA DE LA TINTA. Es la única curva nueva y existe por una razón que ninguna cubic-bezier puede cumplir: una pluma tiene masa. Apoya (rampa), corre a velocidad CONSTANTE, levanta (rampa). Una bezier siempre pica de velocidad en el centro; ésta tiene meseta, y por eso el trazo se lee como un trazo y no como un elemento de interfaz que aparece. Perfil: 18 % acelerando · 60 % parejo · 22 % frenando. No rebota. DE UN SOLO USO: la regla de margen. Si aparece en una segunda hoja deja de significar «tinta» y se vuelve decoración; revísese con grep en cada integración. */ --curva-tinta: linear( 0, 0.028 9%, 0.113 18%, 0.263 30%, 0.413 42%, 0.563 54%, 0.713 66%, 0.863 78%, 0.966 89%, 1); /* CUÁNTO SE AGUANTA ANTES DE ADMITIR QUE ALGO TARDA. No es una duración: es una espera, y va como transition-delay al ENTRAR (0s al salir). Por debajo de ~200 ms una respuesta se siente instantánea, así que teñir el renglón antes de eso sólo produce un parpadeo por clic — ocho horas de parpadeos para no informar de nada. Con este retardo la señal de «estoy trabajando» NUNCA aparece cuando el servidor contesta rápido, y aparece sola cuando de verdad tarda. PRIMERA EXCEPCIÓN: este token NO se pone a cero en §11, a propósito. Quitarlo produce MÁS parpadeo, que es justo lo contrario de lo que pide quien pide movimiento reducido. Alguien va a querer «arreglarlo»: no es un olvido. */ --espera-visible: 220ms; /* El latido del esqueleto. SEGUNDA EXCEPCIÓN: la única duración que no es alias, porque no es una transición sino un ciclo — tiene que ser lenta para leerse como «cargando» y no como «algo va mal». §11 la apaga por su cuenta con animation-duration y animation-iteration-count. */ --dur-esqueleto: 1.4s; /* --- 10. MEDIDAS DEL ARMAZÓN ----------------------------------------- Las columnas del registro se declaran aquí para que barra lateral, lista y lectura compartan una sola verdad. */ --ancho-carpetas: 14rem; /* El registro es la tesis: la lista se lleva el ancho, no la lectura. */ --ancho-lista: 36rem; --altura-barra: 3.25rem; --medida-prosa: 68ch; /* longitud de línea legible en lectura */ /* Columnas del RENGLÓN DE REGISTRO. Cambiar aquí las cambia en todas las vistas, porque los renglones las heredan por subgrid. */ --col-regla: var(--regla-margen-grosor); --col-marca: 1rem; /* casilla (sólo visible al cursor o al foco) */ --col-remitente: 9rem; /* nombre — ancho fijo: así alinean los nombres */ --col-asunto: minmax(0, 1fr); --col-senales: 3rem; /* adjunto, hilo, punto semántico — solo iconos */ --col-cifra: 3.75rem; /* tamaño en Factible Cifra, alineado a la derecha */ --col-hora: 3rem; /* hora en Factible Cifra, alineado a la derecha */ /* La pista del SELLO de remitente (el monograma). Se declara aquí, con las demás columnas, pero el registro sólo debe MONTAR la pista cuando hay sellos: `#registro:has(.sello)`. Una pista a 0px no es lo mismo que no tenerla — sigue cobrando su `column-gap` de 8 px y la carpeta sin sellos dejaría de alinear igual que las demás. */ --col-sello: 1.125rem; /* Cuánto baja una banda pegajosa de SEGUNDO nivel (el membrete de día, el membrete de letra) para no meterse debajo de la de primer nivel. Hoy vale el alto del encabezado de columnas del registro. Una vista que quite ese encabezado lo pone a 0 EN SU HOJA y sus bandas se pegan solas: es la alternativa a recalcular `top` a mano en cada panel que mete banda propia. PENDIENTE DE CONSUMIR: app.css todavía escribe los dos `top` en duro. */ --z-base: 0; --z-pegajoso: 10; --z-barra: 20; --z-flotante: 30; --z-aviso: 40; /* Los y los popover viven en la capa superior del navegador: no necesitan z-index y por eso no hay token para ellos. */ } /* ========================================================================== 10.b LA EDICIÓN DE PAPEL ========================================================================== El sistema tiene dos ediciones del mismo libro y una sola verdad de color: los tokens de arriba son LA PANTALLA; este bloque los vuelve a declarar para EL PAPEL. Ninguna hoja de vista sabe en qué edición está — todas piden --superficie-1, --txt-2, --regla-fina, y aquí se decide qué valen. Tres estados, como manda el sistema operativo: · sin atributo → lo que diga el equipo (prefers-color-scheme) · [data-tema="papel"] → papel, decidido por la persona · [data-tema="pantalla"] → pantalla, decidida por la persona Lo que NO cambia entre ediciones: la rampa de marca, la tipografía, el espacio, la forma, el movimiento y el significado de la regla de margen. Cambia el soporte, no el libro. La paleta de papel no se inventó aquí: el prototipo ya la había escrito como --hoja-* en view-lectura.css para leer el mensaje sobre una hoja. Esto la asciende de "el fondo de un panel" a "una edición del producto". ========================================================================= */ @media (prefers-color-scheme: light) { :root:not([data-tema="pantalla"]) { /* Superficies: el lienzo es el escritorio, la superficie es la hoja. La hoja es MÁS CLARA que el escritorio — al revés que en pantalla, donde el panel es más claro que el fondo por la misma razón física: lo que está encima recibe más luz. */ --lienzo: oklch(0.947 0.005 var(--matiz-base)); --superficie-1: oklch(0.988 0.003 var(--matiz-base)); --superficie-2: oklch(0.962 0.006 var(--matiz-base)); --superficie-3: oklch(1 0 0); --superficie-hundida: oklch(0.928 0.008 var(--matiz-base)); /* Reglas: hairlines de tinta diluida. */ --regla-fina: oklch(0.892 0.010 var(--matiz-base)); --regla-media: oklch(0.822 0.013 var(--matiz-base)); --regla-fuerte: oklch(0.720 0.016 var(--matiz-base)); /* Tinta. Verificados contra la hoja (0.988): 12.2:1 · 6.8:1 · 4.9:1 */ --txt-1: oklch(0.255 0.022 var(--matiz-base)); --txt-2: oklch(0.420 0.020 var(--matiz-base)); --txt-3: oklch(0.505 0.018 var(--matiz-base)); --txt-invertido: oklch(0.99 0.004 var(--matiz-base)); /* La marca baja dos escalones: el #3B82F6 de pantalla no aguanta sobre una hoja blanca. La REGLA DE MARGEN usa --marca-600 en papel. */ --sobre-marca: oklch(0.99 0.005 260); --regla-margen-viva: var(--marca-600); --regla-margen-muerta: oklch(0.880 0.010 var(--matiz-base)); /* Semánticos: misma disciplina, franja espejada a L 0.50–0.56. */ --exito: oklch(0.500 0.115 163); --aviso: oklch(0.520 0.110 75); --riesgo: oklch(0.505 0.170 22); --exito-fondo: color-mix(in oklab, var(--exito) 10%, var(--superficie-1)); --aviso-fondo: color-mix(in oklab, var(--aviso) 10%, var(--superficie-1)); --riesgo-fondo: color-mix(in oklab, var(--riesgo) 10%, var(--superficie-1)); --marca-fondo: color-mix(in oklab, var(--marca-600) 10%, var(--superficie-1)); --exito-regla: color-mix(in oklab, var(--exito) 30%, transparent); --aviso-regla: color-mix(in oklab, var(--aviso) 30%, transparent); --riesgo-regla: color-mix(in oklab, var(--riesgo) 32%, transparent); --marca-regla: color-mix(in oklab, var(--marca-600) 32%, transparent); /* En papel se realza ensuciando con tinta, no aclarando con blanco. */ --tinta-hover: oklch(0.20 0.03 var(--matiz-base)); --realce-suave: color-mix(in oklab, var(--marca-600) 8%, transparent); --realce-medio: color-mix(in oklab, var(--marca-600) 13%, transparent); --seleccion: color-mix(in oklab, var(--marca-600) 10%, var(--superficie-1)); --hover-fila: color-mix(in oklab, var(--tinta-hover) 5%, transparent); --foco: oklch(0.520 0.190 261); --velo: color-mix(in oklab, oklch(0.32 0.030 var(--matiz-base)) 40%, transparent); /* Sobre papel la sombra sí es sombra: el truco del filo claro del tema oscuro no funciona aquí. */ --sombra-1: 0 1px 2px oklch(0.30 0.03 var(--matiz-base) / 0.10); --sombra-2: 0 4px 14px oklch(0.30 0.03 var(--matiz-base) / 0.13), 0 0 0 1px oklch(0.30 0.03 var(--matiz-base) / 0.07); --sombra-3: 0 18px 44px oklch(0.30 0.03 var(--matiz-base) / 0.18), 0 0 0 1px oklch(0.30 0.03 var(--matiz-base) / 0.08); /* Los cinco bajan a la franja L 0.44–0.455, la misma altura de tinta que --marca-texto en esta edición (--marca-700, L 0.470). NO es un capricho: el color de agenda se usa a la vez como FONDO del bloque (mezclado al 15–22 % contra la hoja) y como TINTA de la hora DENTRO de ese mismo bloque. A L 0.520 la hora medía 4.42:1 contra su propio fondo — el único fallo AA que quedaba en papel después del barrido de --marca-texto. En esta franja mide 4.8–6.1:1 en todos los fondos en reposo. El cian de la Mesa baja un escalón más (0.440) porque su croma es la mitad y a igual luminosidad rinde menos contraste. */ --cal-personal: oklch(0.455 0.170 259); --cal-direccion: oklch(0.455 0.150 292); --cal-eventos: oklch(0.455 0.150 330); --cal-mesa: oklch(0.440 0.100 200); --cal-core: oklch(0.455 0.150 292); /* Sobre la hoja el azul de marca tiene que bajar de luminosidad o deja de ser tinta: --marca-400 mide 2.6:1 aquí, --marca-700 mide 6.8:1. Y el énfasis se OSCURECE en vez de aclararse: --marca-300 mide 1.9:1 sobre la hoja y --marca-800, 9.9:1. Es la inversión que hacía falta declarar. */ --marca-texto: var(--marca-700); --marca-texto-vivo: var(--marca-800); /* §4.8.d y §4.8.e en papel: la misma franja de luminosidad que --txt-3 de esta edición. Carpetas medidas sobre la hoja: 5.4 / 5.4 / 5.6 / 5.7. Tintes: letra/hoja 5.6–6.0 · letra/disco 4.9–5.2. El disco se mezcla al 10 % y el anillo al 32 %, igual que --marca-fondo y --marca-regla aquí. */ --carpeta-1: oklch(0.500 0.100 190); --carpeta-2: oklch(0.500 0.100 206); --carpeta-3: oklch(0.500 0.100 222); --carpeta-4: oklch(0.500 0.100 238); --tinte-1: oklch(0.500 0.030 var(--matiz-base)); --tinte-2: oklch(0.500 0.055 190); --tinte-3: oklch(0.500 0.055 300); --tinte-4: oklch(0.500 0.055 330); --tinte-5: oklch(0.500 0.055 50); --tinte-fondo-pct: 10%; --tinte-filo-pct: 32%; /* §4.10 y §5.b en papel. Sobre la hoja la medida se escribe con tinta y la parte vacía es hoja apenas sucia: al revés que en pantalla, misma lectura. Medidos contra --superficie-1 (0.988): llena 4.89:1 · vacía 1.48:1 · el par entre sí 3.31:1 contraparte 3.37:1 · filo de atención 4.88:1 (la regla viva, 4.65) */ --medida-llena: oklch(0.540 0.030 var(--matiz-base)); --medida-vacia: oklch(0.860 0.010 var(--matiz-base)); --medida-contraparte: oklch(0.640 0.095 305); color-scheme: light; } } /* La misma edición, elegida a mano. Se declara aparte y no dentro de la consulta de medios: si estuviera ahí, alguien con el equipo en oscuro no podría pedir papel. */ :root[data-tema="papel"] { --lienzo: oklch(0.947 0.005 var(--matiz-base)); --superficie-1: oklch(0.988 0.003 var(--matiz-base)); --superficie-2: oklch(0.962 0.006 var(--matiz-base)); --superficie-3: oklch(1 0 0); --superficie-hundida: oklch(0.928 0.008 var(--matiz-base)); --regla-fina: oklch(0.892 0.010 var(--matiz-base)); --regla-media: oklch(0.822 0.013 var(--matiz-base)); --regla-fuerte: oklch(0.720 0.016 var(--matiz-base)); --txt-1: oklch(0.255 0.022 var(--matiz-base)); --txt-2: oklch(0.420 0.020 var(--matiz-base)); --txt-3: oklch(0.505 0.018 var(--matiz-base)); --txt-invertido: oklch(0.99 0.004 var(--matiz-base)); --sobre-marca: oklch(0.99 0.005 260); --regla-margen-viva: var(--marca-600); --regla-margen-muerta: oklch(0.880 0.010 var(--matiz-base)); --exito: oklch(0.500 0.115 163); --aviso: oklch(0.520 0.110 75); --riesgo: oklch(0.505 0.170 22); --exito-fondo: color-mix(in oklab, var(--exito) 10%, var(--superficie-1)); --aviso-fondo: color-mix(in oklab, var(--aviso) 10%, var(--superficie-1)); --riesgo-fondo: color-mix(in oklab, var(--riesgo) 10%, var(--superficie-1)); --marca-fondo: color-mix(in oklab, var(--marca-600) 10%, var(--superficie-1)); --exito-regla: color-mix(in oklab, var(--exito) 30%, transparent); --aviso-regla: color-mix(in oklab, var(--aviso) 30%, transparent); --riesgo-regla: color-mix(in oklab, var(--riesgo) 32%, transparent); --marca-regla: color-mix(in oklab, var(--marca-600) 32%, transparent); --tinta-hover: oklch(0.20 0.03 var(--matiz-base)); --realce-suave: color-mix(in oklab, var(--marca-600) 8%, transparent); --realce-medio: color-mix(in oklab, var(--marca-600) 13%, transparent); --seleccion: color-mix(in oklab, var(--marca-600) 10%, var(--superficie-1)); --hover-fila: color-mix(in oklab, var(--tinta-hover) 5%, transparent); --foco: oklch(0.520 0.190 261); --velo: color-mix(in oklab, oklch(0.32 0.030 var(--matiz-base)) 40%, transparent); --sombra-1: 0 1px 2px oklch(0.30 0.03 var(--matiz-base) / 0.10); --sombra-2: 0 4px 14px oklch(0.30 0.03 var(--matiz-base) / 0.13), 0 0 0 1px oklch(0.30 0.03 var(--matiz-base) / 0.07); --sombra-3: 0 18px 44px oklch(0.30 0.03 var(--matiz-base) / 0.18), 0 0 0 1px oklch(0.30 0.03 var(--matiz-base) / 0.08); /* Mismos valores y misma razón que en la consulta de medios de arriba. */ --cal-personal: oklch(0.455 0.170 259); --cal-direccion: oklch(0.455 0.150 292); --cal-eventos: oklch(0.455 0.150 330); --cal-mesa: oklch(0.440 0.100 200); --cal-core: oklch(0.455 0.150 292); --marca-texto: var(--marca-700); --marca-texto-vivo: var(--marca-800); --carpeta-1: oklch(0.500 0.100 190); --carpeta-2: oklch(0.500 0.100 206); --carpeta-3: oklch(0.500 0.100 222); --carpeta-4: oklch(0.500 0.100 238); --tinte-1: oklch(0.500 0.030 var(--matiz-base)); --tinte-2: oklch(0.500 0.055 190); --tinte-3: oklch(0.500 0.055 300); --tinte-4: oklch(0.500 0.055 330); --tinte-5: oklch(0.500 0.055 50); --tinte-fondo-pct: 10%; --tinte-filo-pct: 32%; /* §4.10 y §5.b en papel — los mismos valores que en la consulta de medios de arriba. Se repiten y no se factorizan por la misma razón que todo este bloque: quien tiene el equipo en oscuro tiene que poder pedir papel. */ --medida-llena: oklch(0.540 0.030 var(--matiz-base)); --medida-vacia: oklch(0.860 0.010 var(--matiz-base)); --medida-contraparte: oklch(0.640 0.095 305); color-scheme: light; } /* --- 10.c DENSIDAD ------------------------------------------------------- Cuántos renglones caben en una hoja. NO toca la tipografía ni las columnas: sólo el aire vertical del renglón y del rail. Compacto sigue respetando --toque-min en pantallas táctiles (§16 de app.css). */ :root { --renglon-aire: var(--e-3); /* 12px arriba y abajo */ --renglon-previa: block; /* la tercera línea, la vista previa */ --rail-aire: var(--e-2); } /* El recorte se aplica SÓLO donde hay cursor. En pantalla táctil el renglón tiene que seguir midiendo --toque-min de alto, así que la compacta no entra: se guarda aquí, en el token, y no en cada regla que lo consume — app.css pide `--renglon-aire` en siete sitios distintos y guardarlos uno por uno era garantía de olvidar alguno. Se detecta con `pointer: coarse`, no con el ancho de la ventana: una tableta ancha también se toca con el dedo. */ @media (pointer: fine) { :root[data-densidad="compacta"] { --renglon-aire: var(--e-2); /* 8px */ --renglon-previa: none; /* el registro se vuelve de dos líneas */ --rail-aire: var(--e-1); } } /* --- 11. MOVIMIENTO REDUCIDO --------------------------------------------- Se respeta de verdad: las duraciones se van a cero en el token, así que TODO componente que use --dur-* obedece sin escribir una regla extra. Además se cancelan transiciones de vista y timelines de scroll. */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; /* Las duraciones de §9.b (--dur-trazo, --dur-hueco, --dur-desplegar) NO aparecen aquí y no es un olvido: son alias de estas cuatro y se van solas. Cualquier duración nueva se declara igual, como alias, y este bloque sigue sin crecer. --espera-visible TAMPOCO aparece, y eso sí es una decisión: es un retardo, no una duración. Ponerlo a cero devuelve el parpadeo por clic que existe para evitar, o sea más movimiento, no menos. No lo añadas. */ } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } /* OJO: aquí NO va "animation-timeline: none" de forma global. Una animación sin línea de tiempo nunca avanza y, con fill-mode "both", se queda en su fotograma inicial: los avisos entrarían con opacidad 0 y quien tenga el movimiento reducido jamás vería la confirmación con "Deshacer". Las animaciones guiadas por scroll se anulan una por una, abajo. */ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* --- 12. ALTO CONTRASTE --------------------------------------------------- Si el sistema pide más contraste, las reglas se endurecen y la regla de margen engorda: sigue siendo el único portador del estado de no leído. */ @media (prefers-contrast: more) { :root { --regla-fina: oklch(0.420 0.016 var(--matiz-base)); --regla-media: oklch(0.500 0.018 var(--matiz-base)); --txt-3: oklch(0.760 0.014 var(--matiz-base)); --regla-margen-grosor: 3px; --regla-margen-muerta: oklch(0.380 0.014 var(--matiz-base)); /* La regla de proporción se separa: el par pasa de 3.35:1 a 4.29:1 y la parte llena de 4.86 a 8.25 contra el panel. El filo de atención NO se endurece, igual que no se endurece la regla viva: los dos ya están por encima del piso y subirlos rompería la jerarquía entre ambos. */ --medida-llena: oklch(0.760 0.030 var(--matiz-base)); --medida-vacia: oklch(0.400 0.016 var(--matiz-base)); } /* En papel se endurece en la dirección contraria: las reglas se oscurecen y la tinta suave se acerca a la tinta plena. */ :root[data-tema="papel"] { --regla-fina: oklch(0.780 0.014 var(--matiz-base)); --regla-media: oklch(0.660 0.016 var(--matiz-base)); --txt-3: oklch(0.380 0.020 var(--matiz-base)); --regla-margen-muerta: oklch(0.760 0.012 var(--matiz-base)); /* El par pasa de 3.31:1 a 4.61:1 y la llena de 4.89 a 8.91 contra la hoja. */ --medida-llena: oklch(0.400 0.030 var(--matiz-base)); --medida-vacia: oklch(0.780 0.012 var(--matiz-base)); } } @media (prefers-contrast: more) and (prefers-color-scheme: light) { :root:not([data-tema="pantalla"]) { --regla-fina: oklch(0.780 0.014 var(--matiz-base)); --regla-media: oklch(0.660 0.016 var(--matiz-base)); --txt-3: oklch(0.380 0.020 var(--matiz-base)); --regla-margen-muerta: oklch(0.760 0.012 var(--matiz-base)); --medida-llena: oklch(0.400 0.030 var(--matiz-base)); --medida-vacia: oklch(0.780 0.012 var(--matiz-base)); } }