/* ================================================================================================== 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; } /* ================================================================================================== 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; } /* ================================================================================================== CARÁCTER — lo poco que los tokens no alcanzan ================================================================================================== Todo lo de aquí abajo es tipografía, filete o relieve. NADA toca la disposición: ni `display`, ni anchos, ni alturas, ni `position`. Un selector de tema pesa (0,2,1) y le ganaría a las reglas de `@media (min-width: 48em)` de app.css a cualquier ancho, así que una sola propiedad de disposición aquí rompería el teléfono sin que nada lo avisara. ================================================================================================== */ /* 1a — el dato en monoespaciada. Un aparato de medición enseña cifras alineadas: la versalita etiqueta y la mono mide. `font-variant-numeric` ya viene de app.css; aquí cambia la familia. */ html[data-tema="1a"] .dato .val, html[data-tema="1a"] .insignia, html[data-tema="1a"] .badge-pendientes { font-family: var(--mono); } /* Hairlines de verdad: el filete se ve, no se insinúa. */ html[data-tema="1a"] .lateral, html[data-tema="1a"] .cajon-linea, html[data-tema="1a"] .tarjeta { border-color: var(--espina); } /* 1a y 1b — los dos botones redondos son el único radio que app.css escribe a mano (50 %) en vez de sacarlo de un token, así que ningún traje podía cuadrarlos. Se vio ejecutando: con `--r-chip` en 2px el compositor ya salía recto y el botón de enviar seguía siendo un círculo perfecto en medio de un traje sin una sola curva. Es `border-radius`: no mueve nada. */ html[data-tema="1a"] .adjuntar, html[data-tema="1a"] button.primario.redondo, html[data-tema="1b"] .adjuntar, html[data-tema="1b"] button.primario.redondo { border-radius: var(--r-control); } /* La píldora del compositor es el otro radio escrito a mano (28px). Los cuatro trajes la quieren distinta y ninguno podía tocarla; en el instrumento y el cuaderno chirriaba especialmente, porque era la única curva grande de dos trajes que no tienen ninguna. */ html[data-tema="1a"] .cajon-linea { border-radius: var(--r-control); } html[data-tema="1b"] .cajon-linea { border-radius: var(--r-control); } html[data-tema="1c"] .cajon-linea { border-radius: 26px; } html[data-tema="1d"] .cajon-linea { border-radius: 16px; } /* 1b — el cuaderno. La serif entra por el token `--prosa`, así que la arrastra toda la hoja. Lo que no puede hacer un token es el filete doble del parte impreso ni el interlineado editorial. */ html[data-tema="1b"] .lateral-pie { border-top: 3px double var(--espina); } html[data-tema="1b"] .grupo-titulo { font-family: var(--prosa); font-style: italic; text-transform: none; letter-spacing: 0; } /* El dato sigue en mono aunque la prosa sea serif: una cifra en serif de cuerpo pequeño se lee mal y este traje enseña muchas. */ html[data-tema="1b"] .dato .val, html[data-tema="1b"] .insignia, html[data-tema="1b"] code, html[data-tema="1b"] pre { font-family: var(--mono); } /* 1c — la sala. El contraste de escala es su herramienta: la cifra crece y la etiqueta se encoge. Se toca `font-size`, que no mueve nada de la retícula porque la franja ya reserva su alto. */ html[data-tema="1c"] .dato .val { font-size: var(--t-xl); letter-spacing: var(--track-titulo); } html[data-tema="1c"] .dato .etq { font-size: var(--t-2xs); letter-spacing: var(--track-micro); } /* 1d — la callada. Los filetes casi desaparecen: el aire separa, no la línea. Y el punteado del estado desconocido se refuerza, porque en un traje sin color es la única marca que le queda. */ html[data-tema="1d"] .lateral { border-right-color: var(--linea); } /* ================================================================================================== EL DESCONOCIDO — cuatro tramas, una por traje ================================================================================================== Cada dirección propuso su propio tratamiento para el hueco, y es la pieza donde más se juegan: este producto existe para que «no se pudo comprobar» no se lea como «bien». app.css ya le pone a todas partes el subrayado punteado —la señal no cromática de la regla 4, que ningún traje quita— y aquí cada uno AÑADE la suya: 1a trama diagonal en la marca — «un hueco tiene que verse como hueco» 1b sello con filete y tachado — no se colorea: se sella y se tacha 1c anillo punteado en vez de la barra maciza 1d sangrado con regla punteada, sin color y sin caja POR QUÉ AQUÍ SÍ HAY `width` Y `height`. La regla de esta capa es no tocar la disposición, porque un selector de traje pesa (0,2,1) y le ganaría a `@media (min-width: 48em)` a cualquier ancho. La excepción son los PSEUDO-ELEMENTOS: son marcas decorativas y la capa de pantalla grande de app.css no dimensiona ni uno solo. Eso no se supone — la suite lo comprueba, y si algún día app.css empieza a dimensionar un `::after` arriba, la excepción deja de ser válida y salta. Y LA TRAMA SE ESCRIBE ENTERA EN CADA SITIO, por la misma razón documentada en app.css: el valor de una propiedad personalizada resuelve sus `var()` DONDE SE DECLARA, no donde se usa. Guardarla en un token compartido la congelaría con el color de quien la declaró y pintaría un color equivocado sin avisar. Ya pasó una vez. */ /* 1a — trama diagonal. Va en la MARCA y no detrás del texto: una trama bajo las letras baja el contraste medido, y el contraste es lo último que este producto negocia. */ html[data-tema="1a"] .insignia.desconocido::after, html[data-tema="1a"] .insignia.est-desconocido::after { width: var(--carril); background: repeating-linear-gradient(135deg, var(--desconocido) 0 2px, transparent 2px 4px); } html[data-tema="1a"] .dato.desconocido .val { padding-left: var(--e2); border-left: var(--carril) solid transparent; border-image: repeating-linear-gradient(135deg, var(--desconocido) 0 2px, transparent 2px 4px) 3; } /* 1b — el sello. Filete alrededor y tachado encima, las dos cosas del parte impreso: una entrada que no consta se sella y se raya. El subrayado punteado sigue debajo — son tres señales y ninguna es el color. */ html[data-tema="1b"] .insignia.desconocido, html[data-tema="1b"] .insignia.est-desconocido { padding: 1px var(--e2); border: var(--filete) solid var(--desconocido); /* Los keywords de LÍNEA del atajo tienen que ir contiguos: `underline dotted line-through` mete el estilo en medio, es sintaxis inválida y el navegador tira la declaración ENTERA. El filete seguía ahí, así que el sello parecía correcto y el tachado no existía. Se vio midiendo el estilo computado, no mirando la captura. */ text-decoration: underline line-through dotted; text-decoration-thickness: from-font; } html[data-tema="1b"] .dato.desconocido .val { padding: 0 var(--e1); border: var(--filete) solid var(--desconocido); } /* 1c — anillo punteado. La barra maciza de la insignia se vuelve un aro hueco: en una pantalla de estados macizos, el único hueco se ve hueco incluso en una captura en gris. */ html[data-tema="1c"] .insignia.desconocido::after, html[data-tema="1c"] .insignia.est-desconocido::after { width: .78em; height: .78em; border: 1.5px dotted currentColor; border-radius: 50%; background: none; } /* 1d — el sangrado. Ni caja ni color: una regla punteada al margen y el hueco que la separa. Es la traducción a escala de insignia del sangrado que la dirección usa en las filas de host. */ html[data-tema="1d"] .insignia.desconocido, html[data-tema="1d"] .insignia.est-desconocido, html[data-tema="1d"] .dato.desconocido .val { padding-left: var(--e2); border-left: var(--trazo-punto) dotted currentColor; /* El punteado del subrayado se separa un punto más: en un traje sin color es la señal que más trabaja, y a 4px de la línea base se distingue de un subrayado normal a simple vista. Va aquí y no en una regla aparte — la suite exige que cada declaración del desconocido traiga su señal no cromática, y una regla suelta con solo el desplazamiento no la traía. */ text-underline-offset: 4px; } /* ================================================================================================== EJECUTAR — cuatro controles, uno por traje ================================================================================================== Es el control más serio de la app: lo que hay debajo cambia servidores de producción y no se deshace. Cada dirección lo interpretó distinto y las cuatro interpretaciones caben aquí, porque ninguna cambia el DOM — el bloque es siempre `.confirmar` con su frase, su campo y sus botones. LO QUE NINGÚN TRAJE PUEDE HACER: parecer que autoriza. La frase la valida el servidor, y el avance carácter a carácter que pinta tarjetas.js NO habilita nada — de ahí que ni el candado de 1c ni el sello de 1b toquen el estado del botón. Un traje puede cambiar cómo se ve un acto irreversible; no puede cambiar quién lo permite. ================================================================================================== */ /* La barra de avance existe en los cuatro: saber cuántos caracteres llevas es información, no decoración. Cada traje decide cuánto la enseña. */ .conf-avance { flex-basis: 100%; display: flex; align-items: center; gap: var(--e2); font: 500 var(--t-2xs)/var(--lh-2xs) var(--mono); color: var(--tinta-apagada); } .conf-barra { flex: 1; min-width: 0; height: var(--carril-fino); background: var(--espina); border-radius: var(--r-chip); overflow: hidden; } .conf-barra > span { display: block; height: 100%; width: 0; background: var(--tinta-apagada); transition: width .1s linear; } /* Coincide ≠ aceptado, y el texto que va al lado lo dice con todas las letras. Aquí el color solo acompaña: quien no lo distinga lee lo mismo. */ .conf-avance.coincide { color: var(--tinta); } .conf-avance.coincide .conf-barra > span { background: var(--acento); } @media (prefers-reduced-motion: reduce) { .conf-barra > span { transition: none; } } /* 1a — instrumento: el bloque es un panel de lectura. Filete recto, sin relleno propio, y la barra pasa a ser una escala de aparato: más alta y a tope de ancho. */ html[data-tema="1a"] .confirmar { background: none; border: var(--filete) solid var(--espina); } html[data-tema="1a"] .conf-barra { height: var(--carril); border-radius: 0; } html[data-tema="1a"] .conf-avance { letter-spacing: var(--track-micro); text-transform: uppercase; } /* 1b — cuaderno: la línea de firma. El campo pierde su caja y se apoya sobre una raya de tinta, que es como se firma un vale. El bloque deja de ser una caja hundida y pasa a ser el pie del parte. */ html[data-tema="1b"] .confirmar { background: none; border: 0; border-top: 3px double var(--espina); border-radius: 0; } html[data-tema="1b"] .confirmar input { background: none; border: 0; border-bottom: var(--carril-fino) solid var(--tinta); border-radius: 0; padding-left: 0; } html[data-tema="1b"] .conf-barra { display: none; } /* un vale no lleva barra de progreso */ html[data-tema="1b"] .conf-avance { font-family: var(--prosa); font-style: italic; } /* 1c — sala de control: la barra es la pieza. Crece, se eleva y el relleno se ve llegar. Es el único traje donde el avance manda sobre el texto que lo acompaña. */ html[data-tema="1c"] .confirmar { background: var(--elevada); border-color: var(--borde-flotante); box-shadow: var(--sombra-1); } html[data-tema="1c"] .conf-barra { height: 7px; } html[data-tema="1c"] .conf-avance { font-size: var(--t-xs); } /* El «candado que se abre al final»: el filete del bloque se enciende con el acento cuando la frase coincide. Es un gesto, no una autorización — el botón no cambia y el servidor sigue siendo quien acepta. */ html[data-tema="1c"] .confirmar:has(.conf-avance.coincide) { border-color: var(--acento); } /* 1d — la callada: el bloque desaparece y queda el acento. Es la tesis del traje llevada a su único sitio — lo que espera una frase humana es lo único de la pantalla con color. */ html[data-tema="1d"] .confirmar { background: none; border: 0; border-left: var(--carril) solid var(--acento); border-radius: 0; padding-left: var(--e4); } html[data-tema="1d"] .conf-avance.coincide { color: var(--acento); } /* -- la ANATOMÍA de la acción, por traje. El qué en mono grande y el chip de riesgo ya vienen de app.css; aquí cada dirección les pone su voz. Y 1d recupera su única mancha de color: su propia contabilidad lista «el tinte declarado de la acción» entre sus 8 fondos legítimos — la tarjeta PENDIENTE se tiñe de acento tenue, y solo la pendiente: lo ejecutado no pide nada. */ html[data-tema="1d"] .tarjeta[data-estado="pendiente"] { background: var(--acento-tenue); border-color: transparent; } html[data-tema="1d"] .accion-riesgo { border: 0; padding: 3px 0; color: var(--acento); } html[data-tema="1a"] .accion-que { letter-spacing: -.02em; } html[data-tema="1a"] .accion-riesgo { border-radius: 0; font-family: var(--mono); } html[data-tema="1b"] .accion-cab { border-bottom: var(--filete) solid var(--espina); padding-bottom: var(--e2); } html[data-tema="1b"] .accion-riesgo { border-radius: 0; } html[data-tema="1c"] .accion-que { font-size: var(--t-2xl); } /* ================================================================================================== LA COMPOSICIÓN — lo que faltaba, y por qué faltaba ================================================================================================== La primera versión de esta capa TENÍA PROHIBIDO tocar la disposición, con una prueba vigilándolo. Con esa prohibición lo único que podía llegar de cuatro direcciones distintas era el color y la tipografía, y eso fue exactamente lo que se vio: un recoloreado. El operador lo dijo con esas palabras — «se sigue viendo como si solo hubieras copiado colores y tipografía». La razón de la prohibición era real y sigue siéndolo: un selector de traje pesa (0,2,1) y le gana a las reglas de `@media (min-width: 48em)` de app.css, que pesan (0,1,0). Una regla de traje suelta que declare `padding` sobre `.turno.humano .cuerpo` se aplica TAMBIÉN en escritorio y deshace la capa de pantalla grande sin que nada avise. Pero la solución no era prohibir la disposición: era ESCRIBIRLA TAMBIÉN MOBILE-FIRST. Lo que sigue describe el teléfono, y al final hay un `@media (min-width: 48em)` que reintroduce lo que app.css hace arriba, traje por traje. La regla que sustituye a la prohibición, y que la suite comprueba: si un traje declara una propiedad que la capa de pantalla grande de app.css también declara para ese mismo selector, tiene que declararla EN LAS DOS partes. Se puede tocar la disposición; lo que no se puede es tocarla a medias. app.css declara en su capa de pantalla grande exactamente esto de lo que aquí se toca: .tiempo → padding .turno.humano .cuerpo → max-width, padding ================================================================================================== */ /* -- el rótulo del turno. Las CUATRO direcciones lo enseñan («TÚ · 03:11», «HERMES»); app.css lo esconde desde F16. Encenderlo es de los cambios que más acercan la pantalla a la maqueta, y no se puede hacer con un token. Se queda apagado en «Automático», que es la pantalla de F16. */ html[data-tema] .turno { flex-direction: column; align-items: stretch; gap: var(--e2); } /* El texto del rótulo viene de sesion.js, que es COMPARTIDO con la terminal, y allí los rótulos son glifos de canal («›», «H», «·») en una canaleta de 2ch. Destapados aquí como palabras salían como lo que son: una «H» suelta sobre cada respuesta — el operador la vio en producción. El glifo se apaga con font-size:0 y la palabra la pone el ::after: es el único sitio donde un traje puede decir otra cosa que el módulo sin bifurcarlo. */ html[data-tema] .turno .rol { display: block; font-size: 0; } html[data-tema] .turno .rol::after { font: 600 var(--t-2xs)/1 var(--prosa); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-apagada); } html[data-tema] .turno.humano .rol::after { content: 'tú'; } html[data-tema] .turno.hermes .rol::after { content: 'hermes'; } html[data-tema] .turno.humano { align-items: flex-end; } html[data-tema] .turno.sistema { align-items: center; } html[data-tema] .turno.sistema .rol { display: none; } /* el sistema no se presenta */ /* -- 1d · LA CALLADA: sin burbuja. Es su cambio de composición más fuerte y el que más se nota: en la maqueta el mensaje de la persona NO va en burbuja, va en prosa plena bajo su rótulo, con la misma tipografía que la respuesta. La conversación se lee como un documento a dos voces en vez de como un chat, que es toda la tesis de la dirección. */ html[data-tema="1d"] .turno.humano { align-items: stretch; } html[data-tema="1d"] .turno.humano .cuerpo { background: none; border-radius: 0; padding: 0; max-width: 100%; color: var(--tinta); } html[data-tema="1d"] .tiempo { gap: 26px; } /* Las tablas pierden la reja: en un traje sin cajas, una tabla con borde en cada celda es la caja más grande de la pantalla. Queda un filete bajo la cabecera y el aire hace el resto. */ html[data-tema="1d"] .md-tabla th, html[data-tema="1d"] .md-tabla td { border: 0; border-bottom: var(--filete) solid var(--linea); padding: var(--e2) var(--e4) var(--e2) 0; } html[data-tema="1d"] .md-tabla th { background: none; border-bottom-color: var(--espina); } html[data-tema="1d"] .md-tabla tbody tr:nth-child(even) td { background: none; } html[data-tema="1d"] .md-tabla { font-size: var(--t-md); } /* Y las tarjetas dejan de ser tarjetas. Lo único que conserva marca es lo que espera una frase. */ html[data-tema="1d"] .tarjeta { border-color: transparent; background: none; } /* -- 1a · INSTRUMENTO: la burbuja es una celda de aparato. Filete de 1px, esquina recta y un plomo de acento en el canto derecho — el mismo gesto que los plomos de estado al margen izquierdo. */ html[data-tema="1a"] .turno.humano .cuerpo { background: var(--elevada); border: var(--filete) solid var(--espina); border-right: var(--carril-fino) solid var(--acento); border-radius: var(--r-burbuja); padding: 11px 13px; max-width: 80%; } html[data-tema="1a"] .turno .rol::after { font-family: var(--mono); letter-spacing: .16em; } html[data-tema="1a"] .turno.hermes .rol::after { color: var(--acento); } html[data-tema="1a"] .tiempo { gap: var(--e5); } /* La reja se queda: un instrumento enseña una rejilla. Lo que cambia es que sea de hairlines. */ html[data-tema="1a"] .md-tabla th, html[data-tema="1a"] .md-tabla td { border-color: var(--espina); font-family: var(--mono); } /* -- 1b · CUADERNO: papel sobre papel. Filete cálido, esquina recta y un canto de tinta a la derecha, como el margen de un parte grapado. */ html[data-tema="1b"] .turno.humano .cuerpo { background: var(--elevada); border: var(--filete) solid var(--borde-flotante); border-right: var(--carril) solid var(--tinta); border-radius: var(--r-burbuja); padding: 11px 14px; max-width: 82%; } html[data-tema="1b"] .turno .rol::after { letter-spacing: .2em; color: var(--tinta); font-weight: 700; } html[data-tema="1b"] .tiempo { gap: var(--e5); } /* Tabla de libro mayor: rayas horizontales y ninguna vertical. */ html[data-tema="1b"] .md-tabla th, html[data-tema="1b"] .md-tabla td { border: 0; border-bottom: var(--filete) solid var(--linea); } html[data-tema="1b"] .md-tabla th { border-bottom: 3px double var(--espina); background: none; } /* -- 1c · SALA DE CONTROL: profundidad de verdad. La burbuja se eleva, la esquina de abajo a la derecha se recoge —el vértice apunta a quien habla— y la sombra es larga. */ html[data-tema="1c"] .turno.humano .cuerpo { background: var(--hundida); border-radius: var(--r-burbuja) var(--r-burbuja) var(--r-menudo) var(--r-burbuja); padding: 13px 15px; max-width: 82%; box-shadow: 0 14px 28px -16px rgba(6, 4, 16, .85); } html[data-tema="1c"] .tiempo { gap: var(--e5); } /* Sin verticales y con la cabecera flotando: la tabla se lee como un panel, no como una hoja. */ html[data-tema="1c"] .md-tabla th, html[data-tema="1c"] .md-tabla td { border-left: 0; border-right: 0; } html[data-tema="1c"] .md-tabla th { background: var(--elevada); } /* ================================================================================================== EL PIE DE LA BARRA — cuatro maneras de contar lo mismo ================================================================================================== Es la pieza que el operador mira más veces al día y la que más se separaba de las maquetas: en app.css es una TIRA de cifras y las cuatro direcciones la componen de otra forma. 1a, 1b y 1c la ponen en rejilla de dos columnas con el saldo aparte; «la callada» la baja a una columna de frases, sin cajas, con el motivo del hueco escrito debajo en vez de escondido en un `title`. DOS COSAS DE LA MAQUETA QUE NO SE COPIAN, Y CONSTA POR QUÉ: · el glifo de estado en cada fila de conversación (cuadro, triángulo, círculo punteado). Una conversación de este panel trae título, correo y fecha — NO trae estado. Pintarle uno sería inventárselo, que es lo único que este producto no hace. · la barra de progreso del saldo. Una barra implica un total, y aquí nadie ha declarado presupuesto mensual: el porcentaje de la maqueta es de la maqueta. Se enseña la cifra medida y ya. ================================================================================================== */ /* 1a · 1c — BALDOSAS en rejilla de dos columnas, que es lo que sus maquetas dibujan de verdad: cada estado en su celda con fondo tintado por su color, riel al canto y la CIFRA grande en mono. El tinte sale de `color-mix` sobre `--marca` —el token que la clase de estado ya fija— para no duplicar la paleta: si un color de estado se corrige, la baldosa lo sigue sola. */ html[data-tema="1a"] .franja, html[data-tema="1c"] .franja { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } html[data-tema="1a"] .dato:first-child, html[data-tema="1c"] .dato:first-child { grid-column: 1 / -1; } html[data-tema="1a"] .dato, html[data-tema="1c"] .dato { display: flex; justify-content: space-between; /* `min-width: 0` no es opcional: un ítem de rejilla tiene `min-width: auto`, así que un valor con nowrap («sin cubrir») ensanchaba la baldosa más allá de su columna y el texto salía del pie hacia la zona de lectura. Se vio en producción; la rejilla parecía completa. */ min-width: 0; padding: var(--e2); background: color-mix(in srgb, var(--marca) 9%, transparent); border-left: var(--carril-fino) solid var(--marca); } html[data-tema="1c"] .dato { border-radius: var(--r-menudo); } html[data-tema="1a"] .dato .val, html[data-tema="1c"] .dato .val { font-family: var(--mono); font-size: var(--t-lg); font-weight: 700; /* La cifra de una baldosa no parte en dos líneas: «1 mal» a medias se lee como dos datos. Y si aun así no cabe («sin cubrir»), se recorta CON puntos suspensivos en vez de salirse de la baldosa — el texto completo sigue en el title del dato, que estado.js pone siempre. */ white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* El saldo no es un estado: baldosa neutra, sin tinte ni riel de color. */ html[data-tema="1a"] .dato:first-child, html[data-tema="1c"] .dato:first-child { background: none; border-left-color: transparent; padding-left: 0; } /* 1b — libro mayor: filas con la cifra alineada a la derecha y raya entre ellas, sin baldosas. Es lo que su maqueta dibuja; una rejilla de celdas tintadas sería la sala de control en papel. */ html[data-tema="1b"] .franja { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; } html[data-tema="1b"] .dato { display: flex; justify-content: space-between; padding: var(--e2) 0; border-bottom: var(--filete) solid var(--linea); } html[data-tema="1b"] .dato:last-child { border-bottom: 0; } /* 1d · LA CALLADA — una columna de frases. Sin rejilla, sin chips, y con el motivo del hueco ESCRITO: sangrado bajo su regla punteada, igual que el hueco en el hilo. Es lo que la maqueta enseña y, de paso, la única forma de que ese motivo se lea en un teléfono. */ html[data-tema="1d"] .franja { display: flex; flex-direction: column; align-items: stretch; /* `nowrap` es obligatorio y cuesta verlo: app.css declara `flex-wrap: wrap` sobre `.franja`, y en una caja de COLUMNA envolver no crea filas — crea una SEGUNDA COLUMNA a la derecha. Los datos que no cabían a lo alto se salían de la barra y aterrizaban sobre la zona de lectura, a 133px de distancia. Se cazó midiendo los rectángulos, porque a simple vista parecía un desbordamiento de texto y no un cambio de eje. */ flex-wrap: nowrap; gap: var(--e3); } /* `display: flex` en vez del `inline-flex` de app.css, y NO es cosmético. Un `inline-flex` se dimensiona por su contenido, así que el `flex-basis: 100%` del motivo se resuelve contra un ancho que depende del propio motivo: la referencia se vuelve circular, degenera a `max-content` y la frase sale de la barra hasta invadir la zona de lectura. Con la caja de bloque, el 100 % se resuelve contra la columna y el motivo cae en su propia línea. Medido ejecutando: el borde derecho de la nota estaba en 401px con la barra terminando en 268. */ html[data-tema="1d"] .dato { display: flex; justify-content: space-between; flex-wrap: wrap; } html[data-tema="1d"] .dato::before { display: none; } /* sin plomo: aquí no hay marcas de color */ html[data-tema="1d"] .dato-nota { display: block; flex-basis: 100%; margin-top: var(--e1); padding-left: var(--e3); border-left: var(--trazo-punto) dotted currentColor; font: 400 var(--t-xs)/var(--lh-md) var(--prosa); color: var(--tinta-suave); } /* La búsqueda deja de ser una caja rellena y pasa a ser una línea, como en la maqueta: en un traje que no tiene cajas, el campo de búsqueda era la última que quedaba. */ html[data-tema="1d"] .buscar-envoltura { background: none; border: 0; border-bottom: var(--filete) solid var(--linea); border-radius: 0; } /* ================================================================================================== EL CROMO DE LA BARRA — lo que la comparación lado a lado dejó en evidencia ================================================================================================== El operador puso las capturas juntas y tenía razón: el esqueleto era el mismo y el cromo no estaba. La marca, la búsqueda, el botón de nueva y la fila activa son lo que hace que cada dirección se reconozca ANTES de leer una sola palabra. */ /* -- la marca. 1a la escribe en mono con tracking de máquina; 1c la engorda; 1b la deja en serif (le llega por --prosa). Texto y letra: cero disposición. */ html[data-tema="1a"] .marca { font-family: var(--mono); text-transform: uppercase; letter-spacing: .22em; font-size: var(--t-md); } html[data-tema="1c"] .marca { letter-spacing: var(--track-titulo); font-weight: 700; } /* -- la búsqueda. 1a y 1c la meten en caja propia sobre fondo hundido con filete; 1b es una línea de cuaderno (ya puesta arriba); 1d también línea. Aquí solo piel: fondo, borde, radio. */ html[data-tema="1a"] .buscar-envoltura { background: var(--fondo); border: var(--filete) solid var(--espina); border-radius: var(--r-menudo); } html[data-tema="1c"] .buscar-envoltura { background: var(--hundida); border: var(--filete) solid var(--borde-flotante); border-radius: var(--r-chip); } /* -- el botón de nueva conversación. En 1a es un control con filete que se enciende de acento al pasar; en 1c una pieza llena. En 1b y 1d se queda quieto: sus maquetas lo dejan como texto. */ html[data-tema="1a"] .nueva { border: var(--filete) solid var(--espina); color: var(--acento); } html[data-tema="1a"] .nueva:hover { border-color: var(--acento); background: var(--acento-tenue); } html[data-tema="1c"] .nueva { background: var(--acento-tenue); color: var(--tinta); } /* -- la fila activa lleva el acento AL CANTO, como en las cuatro maquetas. `box-shadow` interior y no `border-left`: un borde movería el texto 2px al activarse y la lista bailaría. */ html[data-tema="1a"] .conv.activa, html[data-tema="1b"] .conv.activa, html[data-tema="1c"] .conv.activa, html[data-tema="1d"] .conv.activa { box-shadow: inset var(--carril-fino) 0 0 var(--acento); } html[data-tema="1a"] .conv.activa { border-radius: 2px; } html[data-tema="1b"] .conv.activa { border-radius: 0; } /* La hora de la fila, en mono donde el traje mide con mono. */ html[data-tema="1a"] .cuando, html[data-tema="1c"] .cuando { font-family: var(--mono); } /* -- el panel de Acciones, la pieza que las cuatro maquetas destacan igual. La base ya lo hace panel; aquí cada traje le pone su voz. */ html[data-tema="1a"] .acciones-titulo { border-radius: var(--r-menudo); } html[data-tema="1a"] .acciones-tit { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--acento); } html[data-tema="1b"] .acciones-titulo { border-radius: 0; border-left-width: var(--carril); } html[data-tema="1c"] .acciones-titulo { border-radius: var(--r-control); } /* ================================================================================================== LA COMPOSICIÓN EN PANTALLA GRANDE ================================================================================================== Aquí va SOLO lo que app.css también declara arriba y que los trajes pisan abajo. Sin esta parte, la regla del traje —que pesa más— se aplicaría también en escritorio y dejaría la burbuja con las medidas del teléfono en una pantalla de 1280. Es el fallo que la prohibición evitaba a lo bruto y que ahora se evita escribiendo las dos mitades. ================================================================================================== */ @media (min-width: 48em) { html[data-tema="1a"] .turno.humano .cuerpo { max-width: 72%; padding: 11px var(--e4); } html[data-tema="1b"] .turno.humano .cuerpo { max-width: 72%; padding: 11px var(--e4); } html[data-tema="1c"] .turno.humano .cuerpo { max-width: 72%; padding: 13px var(--e4); } /* 1d no tiene burbuja que estrechar: su mensaje es prosa y ocupa la columna entera en las dos pantallas. Se repite el valor a propósito, para que el par (selector, propiedad) exista en las dos mitades y la suite pueda comprobarlo en vez de tener que confiar. */ html[data-tema="1d"] .turno.humano .cuerpo { max-width: 100%; padding: 0; } /* La franja de la sala de control. app.css la ENCOGE aquí arriba —de 12.5px a 11.5px— porque en pantalla grande caben más datos y la barra es estrecha. La regla de traje que agranda la cifra pesa más y se quedaba con la del teléfono en las dos pantallas: la cifra salía igual de grande a 375 que a 1280, y la escala, que es toda la idea de esta dirección, no existía arriba. Lo cazó la suite en cuanto la prohibición se sustituyó por esta comprobación. */ html[data-tema="1c"] .dato .val { font-size: var(--t-lg); } /* La baldosa de 1a mide con la misma cifra grande, y le aplica la misma obligación: app.css encoge `.dato .val` aquí arriba, así que el traje lo reescribe en las dos mitades. */ html[data-tema="1a"] .dato .val { font-size: var(--t-lg); } /* Y la marca igual: app.css la redimensiona en pantalla grande. La mono con tracking ancho pide un punto menos que la sans para ocupar lo mismo. */ html[data-tema="1a"] .marca { font-size: var(--t-sm); } } /* ================================================================================================== EL SELECTOR — vive en el pie de la barra, junto al saldo ================================================================================================== Es un `