/* Trajes de /app/, trozo 01 — van tras la hoja base, en el orden en que los enlaza su index. */ /* ================================================================================================== F18 — LOS CUATRO TRAJES. Se carga DESPUÉS de app.css y solo redefine tokens. De dónde salen. El operador pidió un rediseño a Claude Design con un sistema que contenía los requisitos del producto y NINGUNA estética —sin paleta, sin tipografía, sin componentes— para que la dirección fuera libre. Volvieron tres, le gustaron las tres, y las tres pecaban de lo mismo: cada dato traía su caja. Píldora teñida, borde, fondo, insignia. Con nueve hosts y tres acciones pendientes la pantalla era un mosaico donde todo gritaba al mismo volumen. La cuarta se pidió contra eso y es la que manda por defecto. 1a Instrumento grafito y lima · hairlines · el dato en monoespaciada 1b Cuaderno de guardia papel cálido · serif editorial · ejecutar es firmar un vale 1c Sala de control violeta profundo · elevación real · cifras enormes 1d La callada una superficie · un acento · el peso lo marca la exigencia ← defecto POR QUÉ ESTO SON TOKENS Y NO CUATRO HOJAS. La restricción se le dio al diseñador por escrito y la respetó — su propia nota lo dice: «Mismos nodos, mismo orden. 1d añade dos cosas y ninguna es un nodo nuevo». Un traje que exigiera marcado propio no se podría cambiar en caliente, y cambiar en caliente es justo lo que se pidió. Aquí NO se toca la disposición: ni anchos, ni alturas, ni `display`, ni nada que viva dentro de la capa mobile-first de app.css. Un selector de tema tiene especificidad (0,2,1) y ganaría a las reglas de pantalla grande EN TODOS LOS ANCHOS, así que tocar disposición desde aquí rompería el teléfono en silencio. Se cambian superficies, tinta, acento, estados, tipografía, radios, filetes y sombras. Nada más. LO QUE NO CAMBIA, LLEVE EL TRAJE QUE LLEVE: · los CUATRO estados siguen siendo cuatro (bien · alerta · mal · DESCONOCIDO); · el color nunca es la única señal — la palabra y el subrayado punteado viven en app.css y ningún traje los quita; · ningún par de texto baja de 4.5:1, y se MIDE: `tests/temasUi.test.ts` extrae los valores de este archivo y corre la fórmula de luminancia WCAG sobre 20 pares por traje. Las cifras de abajo salen de esa corrida, no de mirarlos. PEOR PAR DE CADA TRAJE, tal como los imprime la suite (el resto queda por encima): 1a apagada/hundida 6.94 1b alerta/fondo 5.08 1c acento/hundida 6.11 1d acento/hundida 5.16 El par número 20 —el acento sobre la superficie hundida— faltaba en la primera versión de la lista, y el hueco no era teórico: «la callada» daba 4.36 ahí, bajo AA, con los otros diecinueve pares en verde. Es el par que más se lee (cada hover de la lista, el campo de búsqueda) y el acento se oscureció de #b4530f a #a4490c para pasarlo con margen. Una lista de pares incompleta da un verde que no significa nada. ================================================================================================== */ /* ================================================================================================== 1d · LA CALLADA — el defecto ================================================================================================== El peso visual es proporcional a lo que se le pide al humano. Un host comprobado no pide nada y se retira; un hueco pide que alguien mire; una acción irreversible esperando una frase pide lo máximo y es lo único de la pantalla con color. Sus estados NO tienen color propio, y eso es la tesis, no un descuido: `mal` es tinta plena, `desconocido` es tinta plena con su punteado, `alerta` es tinta media y `bien` se apaga. Los cuatro se distinguen por peso, por la palabra que los nombra y —el desconocido— por el subrayado de puntos que app.css le pone en todas partes. Quien no distingue colores los distingue igual, porque aquí no hay colores que distinguir. ================================================================================================== */ html[data-tema="1d"] { color-scheme: light; --fondo: #f4f4f2; --superficie: #fafaf8; --elevada: #ffffff; --hundida: #f0efeb; --linea: rgba(22, 22, 26, .07); --borde: #8a8a86; --borde-flotante: rgba(22, 22, 26, .11); --espina: rgba(22, 22, 26, .16); --tinta: #16161a; --tinta-suave: #2e2e33; --tinta-apagada: #4a4a4f; --acento: #a4490c; --acento-tinta: #ffffff; --acento-tenue: #f6efe9; --halo: 0 0 0 3px rgba(164, 73, 12, .22); /* Cuatro pesos, no cuatro colores. El orden es el de la exigencia. */ --mal: #16161a; --desconocido: #16161a; --alerta: #2e2e33; --bien: #66666c; /* La ÚNICA excepción tintada de todo el traje, y queda declarada aquí. */ --mal-fondo: #f6efe9; --sombra-1: none; --sombra-2: 0 1px 2px rgba(22, 22, 26, .06), 0 16px 40px rgba(22, 22, 26, .10); --esq-barra: #e6e4df; --esq-brillo: #f0efeb; --marca: var(--espina); --r-menudo: 4px; --r-control: 8px; --r-tarjeta: 10px; --r-burbuja: 14px; /* La prosa de esta dirección es la más grande de las cuatro: el aire y el cuerpo son su forma de jerarquizar, ya que no usa cajas. */ --t-lg: 16.5px; --lh-lg: 1.55; } /* ================================================================================================== 1e · GUARDIA — el quinto traje, y el nuevo predeterminado. TESIS: el color marca lo irreversible; todo lo demás es tinta. Las cuatro direcciones anteriores gastan su acento en todas partes —enlaces, foco, marca, la franja de estado—, así que ver color no significa nada. Aquí el acento y `mal` son EL MISMO valor a propósito: el rojo de sello es la marca de lo que no se deshace, y no aparece en ningún otro sitio. Cuando esta pantalla enseña rojo, hay algo que no tiene vuelta atrás. LO QUE ESTA DIRECCIÓN NO PUDO HACER, Y POR QUÉ La primera versión llevaba el color al extremo: dos tonos en todo el sistema, y `bien`, `alerta` y `mal` en tres grises. Lo paró temasUi.test.ts, que exige tres colores distintos — «una flota sana y una caída no pueden verse igual». La suite tiene razón y el diseño estaba mal: esos tokens no pintan el hilo del chat, pintan el estado de treinta y un proyectos. La tesis vale para lo IRREVERSIBLE, no para el diagnóstico. Así que los tres existen, medidos, y el sello se reserva para la acción sin retorno. EL NEUTRO tira a verde a propósito: papel de bitácora, no gris de fábrica. Y se aleja del crema #f4f1ea con terracota, que es la esquina donde vive «la callada» y hoy el aspecto más reconocible de una interfaz generada por una máquina. CONTRASTE: los veinte pares medidos con la fórmula WCAG. El peor es acento/hundida = 6.30, muy por encima del 4.5 que exige la suite. Ninguno por debajo. ================================================================================================== */ html[data-tema="1e"] { color-scheme: light; --fondo: #e8ebe6; --superficie: #f4f6f2; --elevada: #ffffff; --hundida: #dbe0d9; --linea: rgba(23, 27, 25, .09); --borde: #7d867f; --borde-flotante: rgba(23, 27, 25, .13); --espina: rgba(23, 27, 25, .18); --tinta: #171b19; --tinta-suave: #2b3430; --tinta-apagada: #454f49; /* El sello. Único sitio del traje donde hay color saturado, y su trabajo es uno. */ --acento: #8a2e1e; --acento-tinta: #ffffff; --acento-tenue: #f2e6e2; --halo: 0 0 0 3px rgba(138, 46, 30, .22); /* Tres estados, tres colores medidos. `mal` COMPARTE valor con el acento: lo irreversible y lo que va mal son la misma señal en esta dirección, y no se reparte en dos rojos. */ --bien: #245043; --alerta: #6b4a0c; --mal: #8a2e1e; --desconocido: #39454e; /* azul frío: se lee HUECO, no «malo» */ --mal-fondo: #f2e6e2; /* Sin sombra de reposo: el aire separa, y la elevación se reserva para lo que flota de verdad. */ --sombra-1: none; --sombra-2: 0 1px 2px rgba(23, 27, 25, .05), 0 18px 44px rgba(23, 27, 25, .10); --esq-barra: #dde2db; --esq-brillo: #eaeee8; --marca: var(--espina); --r-menudo: 6px; --r-control: 10px; --r-tarjeta: 12px; --r-burbuja: 18px; --t-lg: 16px; --lh-lg: 1.6; } /* -- 1e · LA ESPINA. La firma de esta dirección, y lo único que hace que se reconozca de un vistazo. Un filete recorre cada turno por la izquierda y DICE algo: continuo cuando la respuesta se apoya en herramientas que corrieron, apagado en lo que dijo la persona. No es adorno — es la cadena «configurado ≠ ejecutado ≠ íntegro» del proyecto hecha geometría, y se lee sin color, que es lo que exige la regla de no depender del tono. */ html[data-tema="1e"] .turno { padding-left: var(--e4); border-left: var(--carril) solid var(--espina); } html[data-tema="1e"] .turno.hermes { border-left-color: var(--bien); } html[data-tema="1e"] .turno.sistema { border-left-color: transparent; padding-left: 0; } /* -- 1e · el rótulo, junto a su texto. En el turno humano el mensaje va a la derecha, así que el rótulo también: dejarlo en la esquina opuesta parte la frase de su firma. El «copiar» se va entonces al hueco de la izquierda, que es el que queda libre — y sigue sin poder solaparse, porque son dos columnas de una rejilla, no dos cajas flotando. */ html[data-tema="1e"] .turno.humano .rol { grid-area: 1 / 2; justify-self: end; } html[data-tema="1e"] .turno.humano .turno-copiar { grid-area: 1 / 1; justify-self: start; } /* -- 1e · EL COPIAR, SOLO GLIFO. La palabra «copiar» al lado del icono no añadía nada —el dibujo de dos hojas es de los pocos universales— y en la cabecera del turno competía con el rótulo y la hora por el mismo renglón. El significado no se pierde: vive en el aria-label y en el title. Cuadrado, del tamaño de un glifo, con blanco táctil de 44 por debajo. */ html[data-tema="1e"] .turno-copiar.solo-icono { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: var(--r-menudo); background: transparent; border: 0; color: var(--tinta-apagada); } html[data-tema="1e"] .turno-copiar.solo-icono svg { width: 15px; height: 15px; } html[data-tema="1e"] .turno-copiar.solo-icono:hover { background: var(--hundida); color: var(--tinta); } html[data-tema="1e"] .turno-copiar.solo-icono.copiado { color: var(--bien); } /* -- 1e · ESPACIOS. Lo que estaba mal medido y se arrastraba de antes: el hilo pegado a la barra superior, los turnos demasiado juntos entre sí para el aire que pide esta dirección, y el cajón sin respiro por debajo en un teléfono con barra de gestos. */ html[data-tema="1e"] .tiempo { padding: var(--e6) var(--e4) var(--e5); gap: var(--e6); } html[data-tema="1e"] .cajon { padding-bottom: max(var(--e3), env(safe-area-inset-bottom, 0px)); } html[data-tema="1e"] .vivo-actividad { margin-bottom: var(--e3); } /* -- 1e · LA CABECERA DEL TURNO, con hora. Tres huecos: rótulo, hora y —al borde de salida— el copiar. Un hilo largo de operaciones sin marcas de tiempo obliga a abrir el registro para saber cuándo pasó algo, y en una consola donde se ejecutan cosas contra servidores ese es justo el dato que se busca. Solo la hora: la fecha la lleva la barra superior. */ html[data-tema="1e"] .turno { grid-template-columns: auto auto minmax(0, 1fr); } html[data-tema="1e"] .turno .rol { grid-area: 1 / 1; } html[data-tema="1e"] .turno .turno-hora { grid-area: 1 / 2; } html[data-tema="1e"] .turno .turno-copiar { grid-area: 1 / 3; justify-self: end; } html[data-tema="1e"] .turno .cuerpo { grid-area: 2 / 1 / auto / -1; } html[data-tema="1e"] .turno-hora { font: 400 var(--t-2xs)/1 var(--mono); color: var(--tinta-apagada); font-variant-numeric: tabular-nums; align-self: center; } /* En el turno humano el orden se espeja: el copiar al hueco libre de la izquierda y el rótulo con su hora pegados a la derecha, junto a la burbuja que rotulan. */ html[data-tema="1e"] .turno.humano .turno-copiar { grid-area: 1 / 1; justify-self: start; } html[data-tema="1e"] .turno.humano .rol { grid-area: 1 / 2; justify-self: end; } html[data-tema="1e"] .turno.humano .turno-hora { grid-area: 1 / 3; justify-self: end; } /* -- 1e · LA BURBUJA SE QUEDA. La primera versión de este traje se la quitó al turno humano, copiando a «la callada». Fue un error mío y se vio al poner la maqueta al lado de la pantalla: en la maqueta el mensaje de la persona SÍ va en caja. Sin ella, la conversación pierde su forma de conversación — dos bloques de prosa alineados a distinto lado no se leen como un turno y otro, se leen como un documento mal justificado. La caja es lo que separa lo que PIDES de lo que te CONTESTAN, y en una consola donde una de las dos partes ejecuta cosas contra servidores, esa distinción no es estética. */ html[data-tema="1e"] .turno.humano .cuerpo { background: var(--superficie); border: var(--filete) solid var(--linea); border-radius: var(--r-burbuja); padding: var(--e3) var(--e4); color: var(--tinta); max-width: 48ch; } /* -- 1e · EL AVISO DEL SISTEMA deja de ser prosa gris centrada y pasa a ser una pieza: filete al margen y texto alineado, como todo lo demás de esta dirección. Centrado y en gris parecía un pie de página; es información de estado y se lee como tal. */ html[data-tema="1e"] .turno.sistema .cuerpo { text-align: left; max-width: none; padding: var(--e3) var(--e4); border-left: var(--carril) solid var(--espina); background: var(--superficie); border-radius: 0 var(--r-control) var(--r-control) 0; font: 400 var(--t-sm)/1.5 var(--prosa); color: var(--tinta-apagada); } /* -- 1e · el rastro de herramientas es la pieza NUEVA de F20 y aquí es donde se ve mejor: una caja sobria bajo la respuesta, plegada, que se abre para enseñar qué corrió. */ html[data-tema="1e"] .vivo-rastro { border-radius: var(--r-control); } /* ================================================================================================== 1a · INSTRUMENTO — grafito y lima ================================================================================================== Aparato de medición, no aplicación de chat. Nada flota: la jerarquía la hacen reglas de 1px y plomos de color al borde. Las esquinas se van a cero porque una curva sugiere un objeto blando y aquí nada lo es. ================================================================================================== */ html[data-tema="1a"] { color-scheme: dark; --fondo: #0a0d10; --superficie: #0c1218; --elevada: #1b242d; --hundida: #161e26; --linea: rgba(196, 208, 219, .10); --borde: #7e8a96; --borde-flotante: rgba(196, 208, 219, .16); --espina: rgba(196, 208, 219, .22); --tinta: #e8eff6; --tinta-suave: #c4d0db; --tinta-apagada: #9ba8b4; --acento: #c6ff57; --acento-tinta: #3a2600; --acento-tenue: #1d2610; --halo: 0 0 0 3px rgba(198, 255, 87, .22); --bien: #5be0a0; --alerta: #ffc65c; --mal: #ff9c94; --mal-fondo: #2e0806; --desconocido: #c5bcea; /* En oscuro una sombra negra no eleva: ensucia. La elevación se hace con el tono. */ --sombra-1: none; --sombra-2: none; --esq-barra: #131a21; --esq-brillo: #1f2a34; --marca: var(--borde); --r-menudo: 0px; --r-control: 2px; --r-tarjeta: 0px; --r-burbuja: 3px; --r-chip: 2px; /* Prosa compacta: un aparato de medición cabe más dato por pantalla. */ --t-lg: 15px; --lh-lg: 1.5; } /* ================================================================================================== 1b · CUADERNO DE GUARDIA — papel cálido ================================================================================================== Un parte de incidencias impreso. La profundidad la dan los papeles superpuestos y el filete, no las sombras difusas; la jerarquía, el salto de la serif al dato monoespaciado. Ejecutar es firmar un vale, y por eso el acento es azul de tinta estilográfica y no un color de interfaz. ================================================================================================== */ html[data-tema="1b"] { color-scheme: light; --fondo: #f3ede1; --superficie: #fbf7ef; --elevada: #fbf7ef; --hundida: #ede6d8; --linea: rgba(23, 19, 16, .13); --borde: #8a8075; --borde-flotante: rgba(23, 19, 16, .20); --espina: rgba(23, 19, 16, .26); --tinta: #171310; --tinta-suave: #3d3428; --tinta-apagada: #59524a; --acento: #1b3a6b; --acento-tinta: #fbf7ef; --acento-tenue: #e7edf6; --halo: 0 0 0 3px rgba(27, 58, 107, .20); --bien: #1e6b45; --alerta: #8a5a08; --mal: #a32219; --mal-fondo: #f7e9e6; --desconocido: #4a4757; /* Papel sobre papel: un filete cálido en vez de una sombra gris. */ --sombra-1: 0 1px 0 rgba(23, 19, 16, .10); --sombra-2: 0 1px 0 rgba(23, 19, 16, .12), 0 10px 26px rgba(88, 66, 34, .13); --esq-barra: #ddd5c4; --esq-brillo: #ece4d5; --marca: var(--espina); --prosa: ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif; --r-menudo: 2px; --r-control: 2px; --r-tarjeta: 2px; --r-burbuja: 3px; --r-chip: 2px; /* La serif necesita un punto más de cuerpo que una sans para leerse igual. */ --t-lg: 16px; --lh-lg: 1.5; } /* ================================================================================================== 1c · SALA DE CONTROL — violeta profundo ================================================================================================== Un panel al que se le puede hablar. Aquí sí hay profundidad: tres alturas de superficie, luz de un punto arriba y sombras largas. El contraste de escala es la herramienta principal, así que las esquinas crecen y las sombras vuelven — es el único traje donde vuelven en oscuro, y lo hacen como sombra de color, no de negro. ================================================================================================== */ html[data-tema="1c"] { color-scheme: dark; --fondo: #100f18; --superficie: #1a1826; --elevada: #221f33; --hundida: #1f1b33; --linea: rgba(222, 218, 240, .09); --borde: #8c86a8; --borde-flotante: rgba(222, 218, 240, .15); --espina: rgba(222, 218, 240, .20); --tinta: #f3f1fb; --tinta-suave: #dedaf0; --tinta-apagada: #a9a4c4; --acento: #a78bfa; --acento-tinta: #160f2b; --acento-tenue: #2e2650; --halo: 0 0 0 3px rgba(167, 139, 250, .28); --bien: #4ee0a6; --alerta: #ffc24b; --mal: #ff9db0; --mal-fondo: #2b0a13; /* Hueco en azul frío: se lee hueco incluso en gris, que es lo que pide la regla 4. */ --desconocido: #9fb0d0; --sombra-1: 0 1px 2px rgba(6, 4, 16, .45); --sombra-2: 0 2px 6px rgba(6, 4, 16, .40), 0 26px 60px rgba(6, 4, 16, .55); --esq-barra: #1a1826; --esq-brillo: #2a2640; --marca: var(--borde); --r-menudo: 9px; --r-control: 12px; --r-tarjeta: 18px; --r-burbuja: 22px; --t-lg: 15.5px; --lh-lg: 1.5; }