/* Trajes de /app/, trozo 02 — van tras la hoja base, en el orden en que los enlaza su index. */
/* ==================================================================================================
   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. */
/* F20 — el turno pasa de COLUMNA a REJILLA de dos huecos, y ese cambio es el que cierra el
   solape del «copiar». En columna, el botón solo cabía sacándolo del flujo con `position:
   absolute`, y ahí caía sobre el rótulo (medido: 49 × 6 px a 375). Con una fila declarada,
   rótulo y botón son vecinos y no hay geometría que puedan pisarse.

     fila 1 · [ rótulo ................................ copiar ]
     fila 2 · [ cuerpo, ocupando las dos columnas             ]

   El rótulo queda a la IZQUIERDA también en el turno humano, donde antes iba pegado a la
   derecha. Se gana que las dos partes de la conversación se lean bajando por el mismo borde;
   la burbuja sigue alineada a la derecha, que es lo que da la forma de conversación. */
/* F20 — LA DISPOSICIÓN DEL TURNO SE FUE A app.css, y con ella los rótulos.
   Vivía aquí, y «Automático (sistema)» quita el atributo `data-tema`: quien lo tenía puesto no
   veía «TÚ» ni «HERMES» en ningún turno, y el botón de copiar flotaba a media altura del
   mensaje porque la rejilla tampoco le llegaba. Diez reglas de colocación estaban en la capa
   equivocada.

   La regla, enunciada para que no vuelva a pasar: LA DISPOSICIÓN ES DE LA CAPA BASE; LOS TRAJES
   SOLO VISTEN. Si una pieza necesita un traje para colocarse, está mal colocada. La suite lo
   comprueba ahora — sección 9 de guardiaUi.
   Lo que sí es de aquí: el ESPEJO del turno humano de 1e, más abajo, porque es una decisión de
   composición de esa dirección y no de todas. */

/* 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. */

/* -- 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); }