@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fuentes/manrope-latin.woff2?v=a30ddcd349) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fuentes/manrope-latin-ext.woff2?v=3911b66d9f) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fuentes/manrope-greek.woff2?v=2fb2e8cbfd) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(/fuentes/jetbrains-mono-latin.woff2?v=18be452724) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(/fuentes/jetbrains-mono-latin-ext.woff2?v=79bfdab9ba) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;src:url(/fuentes/jetbrains-mono-greek.woff2?v=ee86319807) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
:root{
  /* brand colors - short aliases the pages already use */
  --teal:#0B3B43;--teal2:#2A9D9A;--teal-action:#12736F;--mint:#A8E0D5;
  --ink:#1B1B1F;--g700:#4A4A52;--g500:#6B6B72;--g300:#D4D4D8;--g200:#EAEAEC;--g100:#F4F4F6;--g50:#FAFAFA;--white:#fff;
  --ok:#2A9D9A;--warn:#E0A23A;--bad:#C0473E;
  /* soft tints for fills */
  --teal-050:#EAF6F3;--teal-100:#D9EEEA;--warn-050:#FBF3E3;--bad-050:#FBEEEC;
  /* the warning tint's other two halves: the border and the text that sit ON --warn-050. Eight
     pages hand-wrote them (#EBD3A2 / #7A5510) beside a fill that did not even match --warn-050. */
  --warn-100:#EBD3A2;--warn-700:#7A5510;--bad-700:#B83F37;
  /* y el tercero de la misma forma: --ok ES el Teal de marca, así que como TEXTO repetía el
     defecto de §3.2 con otro nombre (3,29 sobre blanco). El miembro de la familia teal que se lee
     como texto es el de acción, y aquí se nombra por su papel para que una página no tenga que
     elegir entre semántico y legible. */
  --ok-700:#12736F;
  /* la línea, por papel (ADR 0037 §3.4): el número crece con la fuerza. El escalón bajo es el
     borde de una superficie teñida (aviso, etiqueta, ficha); el siguiente es el de un control en
     ese estado, que tiene que sostener el límite del control. Los dos vivían escritos a mano en
     dieciséis tonos que el ojo no separa. */
  --teal-200:#CDE9E2;--teal-300:#8FCFC4;--warn-200:#EAC475;--bad-100:#E9BDB8;--bad-200:#E2B3AE;
  /* la línea sobre superficie oscura: el mismo mint, rebajado para que sea borde y no acento. */
  --borde-inverso:rgba(168,224,213,.4);
  /* La densidad de una fila de tabla, que hasta hoy era el residuo del relleno que cada pagina
     habia escrito: siete valores verticales (5, 6, 7, 8, 9, 10 y 11px) y once alturas de fila en
     diecinueve tablas, de 34,5 a 112,5px. Son DOS densidades, no once:
       - de lectura (--fila-y): la fila se lee, y mas filas a la vista valen mas que el aire.
       - de control (--fila-y-control): la fila lleva una entrada, un selector o un boton, y el
         control necesita su aire alrededor para que su objetivo tactil no lo de la fila.
     Cual le toca a cada tabla NO lo decide la pagina: lo decide la tabla misma, mas abajo. */
  --fila-y:var(--sp-2);--fila-y-control:var(--sp-3);
  /* La separacion entre columnas. A diferencia de la altura de fila, que tiene dos densidades
     porque una fila con control necesita mas aire que una que solo se lee, el canal horizontal NO
     tiene variante funcional: es ritmo. Y estaba escrito a mano en siete valores (6, 7, 8, 9, 10,
     12 y 14px) en veinte modulos, ninguno en la rejilla de 4. Es UNO, y en la rejilla.
     En un telefono es lo primero que cede: 12px por columna se los come el ancho util, y la tabla
     que hoy cabe justo empieza a desplazarse. Una tabla angosta dentro de un panel puede pedir el
     escalon de abajo, pero lo declara ella (--celda-x:var(--sp-2)) y sigue en la rejilla. */
  --celda-x:var(--sp-3);
  /* las tres medidas de la página (ADR 0042 §17 y §18). La ancha fija el borde izquierdo de toda
     pantalla y es la de las tablas y bandejas; la media, la del trabajo (formularios, flujos, fichas);
     la angosta, la de leer y ajustar una cuenta. Cada main usa una de las tres, nunca un px propio. */
  --medida-ancha:1180px;
  --medida-media:960px;
  --medida-angosta:720px;
  /* spacing (4px base) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
  /* type scale (modular ~1.25) */
  --fs-xs:11px;--fs-sm:13px;--fs-base:15px;--fs-md:18px;--fs-lg:22px;--fs-xl:28px;--fs-2xl:36px;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-heavy:800;
  /* El TRAZADO del texto (tracking). La marca lo declara en brand/tokens/tokens.css y esta capa se
     lo habia dejado atras: las paginas lo escribieron a mano 110 veces, 98 de ellas en PIXELES, que es la
     unidad que no sirve para esto. Un mismo -.4px vale -.022em a 18px y -.014em a 28px, asi que
     cuanto mas grande el titulo, MENOS se apretaba: justo al reves de lo que la medida pedia.
     En em el paso se declara una vez y vale igual en los tres escalones de titulo.
     Cuando entra lo dice la medida, no el gusto: de 22px para arriba el arbol ya apretaba en el
     76% de las reglas (28 de 37) y en las cinco de 28px, mientras que de 14px para abajo lo hace
     1 de 931. El texto de 15 y 18px estaba partido por la mitad (50% y 57%) y lo zanjo el capitulo 4
     por PAPEL y no por mayoria: el encabezado de esa banda aprieta, el texto corrido no. */
  --tr-tight:-.02em;
  /* El paso contrario, el de la VERSALITA: el rotulo corto en mayusculas que la consola usa para
     nombrar una columna, una seccion o un estado. En mayusculas las letras pierden las astas que
     distinguen una palabra en caja baja, asi que necesitan aire ENTRE caracteres para leerse, y
     cuanto mas pequenas mas: el 94% de estos rotulos mide 11px (131 de 139), que es el cuerpo mas
     pequeno de la escala.
     Que el papel es UNO lo dice la medida, y por eso lleva un solo paso: de las 139 reglas que
     aprietan hacia afuera, TODAS declaran text-transform:uppercase y 131 miden --fs-xs.
     Lo que no era uno es el valor: 12 distintos (.03em a .12em, mas siete en pixeles), y el mas
     repetido (.06em, 62 veces) no llegaba ni a la mitad. Una pluralidad no es una practica
     establecida, asi que el valor lo pone la marca (--tegralys-tracking-wide) y no el recuento;
     ademas es lo que esta capa ya escribia la unica vez que hablaba de esto (.t-franja-etiqueta). */
  --tr-wide:.08em;
  /* radius */
  --r-sm:4px;--r-base:8px;--r-md:12px;--r-lg:16px;--r-full:9999px;
  /* elevation (teal-tinted, transparent) */
  --sh-sm:0 1px 2px rgba(11,59,67,.06);
  /* el escalon que se abre encima lleva dos capas: un contacto corto que apoya la pieza y una
     ambiente larga y suave que la despega. Medido en hoja aparte, con una sola capa el menu se
     leia como una tarjeta mas y no como algo que flota. */
  --sh-md:0 1px 2px rgba(11,59,67,.08),0 8px 20px -6px rgba(11,59,67,.16);
  /* el escalon anclado: la pieza vive pegada a un borde de la pantalla (barra pegajosa arriba o
     abajo, cajon lateral), asi que su sombra es simetrica y solo se ve el lado que da al contenido. */
  --sh-lg:0 0 32px -8px rgba(11,59,67,.18);
  --sh-xl:0 24px 60px rgba(11,59,67,.22);
  /* motion */
  --ease:cubic-bezier(.2,.7,.3,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms;--dur-base:180ms;--dur-slow:260ms;
  --ring:0 0 0 2px var(--white),0 0 0 5px var(--teal);
  /* el velo del dialogo: una sola opacidad para toda la consola. */
  --velo:rgba(11,59,67,.42);
  /* la aureola del punto de marca de las cabeceras publicas: menta, y no marca ningun estado. */
  --halo-marca:0 0 0 4px rgba(168,224,213,.22);
  /* el halo: la marca de "este es el que esta abierto, seleccionado o bajo el puntero". NO es el
     foco (ese es --ring, y lo pone la regla global de abajo con !important). Una sola fuerza. */
  --halo:0 0 0 3px rgba(42,157,154,.18);
  /* fonts */
  --font-sans:Manrope,-apple-system,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
/* root rendering - crisper text on macOS (the one intentional global change) */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* hidden - the user-agent's [hidden]{display:none} loses to ANY author rule that sets display, so
   an element marked hidden that also carries .t-btn, .t-chip or any page class with a display kept
   showing. This declaration is what makes the attribute mean what it says, on every page at once,
   and it needs !important because this sheet is injected BEFORE each page's inline <style>. */
[hidden]{display:none!important}

/* Keyboard focus must survive page-local rules that remove the browser outline. The white inner
   edge separates it from dark controls; the deep teal outer edge separates it from light pages. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:none!important;box-shadow:var(--ring)!important}

/* ...y tiene que sobrevivir al alto contraste. En forced-colors (el modo de contraste forzado de
   Windows y el de algunos navegadores) el motor NO pinta box-shadow. El anillo de arriba es dos
   sombras y nada más, y el outline que lo acompaña está anulado con !important, así que en ese modo
   el indicador de foco de teclado desaparecía por completo: en las 44 páginas a la vez, porque esta
   hoja se inyecta en todas. La regla que promete "foco visible" hacía justo lo contrario donde más
   falta hace. WCAG 2.4.7 y 2.4.11.
   El outline sí lo pinta el motor, y CanvasText es el color que el propio sistema eligió para el
   texto, así que el anillo vuelve con el contraste que configuró quien lo usa y no con el nuestro.
   Cubre de paso las cinco reglas de foco de las clases t-*, que tienen la misma forma. */
@media (forced-colors: active){
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,
  .t-btn:focus-visible,
  .t-field:focus,
  .t-details>summary:focus-visible,
  .t-grupo>summary:focus-visible,
  .t-mas>summary:focus-visible,
  .t-info:focus-visible{outline:3px solid CanvasText!important;outline-offset:2px!important}
}

/* typography utilities (new names - no collision) */
.tnum{font-variant-numeric:tabular-nums}
.balance{text-wrap:balance}
.pretty{text-wrap:pretty}

/* buttons - namespaced so existing .btn/.primary are untouched until a page migrates */
.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);position:relative;
  font:inherit;font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:1;white-space:nowrap;
  text-decoration:none;
  color:var(--teal);background:#fff;border:1px solid var(--g300);border-radius:var(--r-base);
  padding:9px 14px;min-height:38px;cursor:pointer;
  transition-property:transform,background-color,border-color,box-shadow,color;
  transition-duration:var(--dur-fast);transition-timing-function:var(--ease)}
.t-btn:hover:not(:disabled){border-color:var(--teal2);color:var(--teal)}
.t-btn:active{transform:scale(.97)}
.t-btn:focus-visible{outline:none;box-shadow:var(--ring)}
/* UN BOTON DESHABILITADO TIENE QUE PARECERLO, Y LOS :hover DE ARRIBA LO IMPEDIAN.
   Medido el 2026-09-16 sobre el modal de captura del laboratorio: el boton Validar y firmar se
   queda deshabilitado cuando el resultado no carga, pero .t-btn-primary:hover seguia aplicandole
   el teal solido al pasar el raton, porque en CSS :hover casa igual con un boton deshabilitado.
   Medio transparente y reaccionando al raton, un boton primario se lee como pulsable; la auditoria
   del laboratorio lo describio como que queda VERDE y encendido, y lo pulso esperando que firmara.
   No pasaba nada, que es lo correcto y tambien lo peor: la pantalla decia una cosa y hacia otra.
   Por eso los cinco :hover de los botones llevan :not(:disabled), y por eso vive aqui, en la capa
   compartida, y no en la pagina: el defecto era de TODOS los botones de la consola. */
.t-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.t-btn svg{flex:none}
.t-btn-primary{background:var(--teal-action);border-color:var(--teal-action);color:#fff}
.t-btn-primary:hover:not(:disabled){background:var(--teal);border-color:var(--teal);color:#fff}
.t-btn-ghost{background:transparent;border-color:transparent;color:var(--teal-action);padding-inline:var(--sp-2)}
.t-btn-ghost:hover:not(:disabled){background:var(--teal-050);color:var(--teal)}
.t-btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.t-btn-danger:hover:not(:disabled){filter:brightness(.94)}
.t-btn-warn{background:#fff;border-color:var(--warn-200);color:var(--warn-700)}
.t-btn-warn:hover:not(:disabled){background:var(--warn-050)}
/* EL BOTON DE UNA FILA ES UN BOTON CHICO, y hasta hoy pesaba lo mismo que el boton que cierra el
   trabajo de la pantalla: 38px de alto, el mismo de "Crear orden y pasar a muestras" o "Enviar".
   Una accion que vive DENTRO de una fila (Ver casos, Excluir, Guardar) es de esa fila y nunca de la
   pantalla, asi que cuando las dos pesan igual la pantalla se queda sin jerarquia y la tabla, de
   paso, crece por el boton que no manda (patron 3 de Bryan, 2026-09-18: "todo pesa igual y todo es
   grande").
   Lo decide la CELDA y no la pagina, por la misma razon que la altura de fila de mas abajo: buena
   parte de estos botones no estan escritos en la plantilla, los arma el JS de la pagina con la
   cadena 't-btn' al pintar cada fila, y una regla que hay que acordarse de escribir sitio por sitio
   se olvida en el siguiente listado que alguien arme.
   Se escribe como un selector MAS del boton chico y no como una copia de sus valores, para que
   sigan siendo el mismo boton el dia que el boton chico cambie.
   Vale en CUALQUIER tabla y no solo en la compartida (.t-table): el boton es de la capa compartida
   en las dos, y la mitad de las tablas de la consola todavia no adoptaron .t-table.
   Quedan fuera el que se declaro grande a proposito (.t-btn-lg) y el de icono, que es cuadrado y
   con 32 de alto y 38 de ancho se deformaria. El piso de AA se mantiene: 32px > 24px (WCAG 2.5.8
   2.2 AA), y el objetivo tactil de producto (44px) no lo cumplia tampoco con 38. */
.t-btn-sm,
td .t-btn:not(.t-btn-lg):not(.t-btn-icon){min-height:32px;padding:6px 10px;font-size:var(--fs-sm)}
.t-btn-lg{min-height:44px;padding:var(--sp-3) var(--sp-5);font-size:var(--fs-base)}
.t-btn-icon{padding:0;width:38px;min-height:38px}
.t-btn-icon::before{content:"";position:absolute;inset:-3px}
.t-btn-block{width:100%}

/* surfaces */
.t-card{background:#fff;border:1px solid var(--g300);border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.t-card-pad{padding:var(--sp-5)}
/* La linea de ayuda de una tarjeta. Estaba declarada BYTE A BYTE IGUAL en 14 paginas y con una
   variante sin medida en otras 4: es una sola regla, y la que decide si un parrafo se lee. Los 78ch
   son la medida de lectura que el resto de la consola ya usa (.t-vacio, .t-mas>p); sin ella el
   parrafo se estira a lo que mida la pagina, que en /cartera son 1.072 px, unos 115 caracteres por
   linea. Vive aca para que una pagina nueva la herede en vez de volver a copiarla. */
/* Sólo los márgenes de arriba y abajo: los de los lados son de quien contiene el párrafo. Con el
   atajo `margin:0 0 ...` esta regla (0,2,1) le ganaba a `.t-fold>*:not(summary)` (0,1,1), y la
   explicación de toda tarjeta plegable quedaba pegada al borde mientras sus campos entraban 20 px
   (recorrido de Bryan, 2026-09-22, en Indicadores). */
.t-card p.hint{margin-top:0;margin-bottom:var(--sp-4);font-size:var(--fs-sm);color:var(--g500);line-height:1.5;
  max-width:78ch}

/* inputs - min-height is what makes the height DETERMINED. Without it a control is as tall as the
   font metric plus its padding, so .t-field landed at ~37.75px next to a .t-btn that is 38px by
   construction: they agreed by coincidence, and every page that overrode the padding broke the
   agreement. box-sizing keeps a width:100% field inside its column (three pages already declare
   that width). No page declares min-height or line-height on a control, so this wins from /app.css
   without an equal-specificity tie to lose, while the 8 padding overrides keep winning, as they
   should. */
.t-field{font:inherit;font-size:var(--fs-sm);color:var(--ink);background:#fff;
  padding:9px 12px;min-height:38px;line-height:1.2;box-sizing:border-box;
  border:1px solid var(--g300);border-radius:var(--r-base);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.t-field:focus{outline:none;border-color:var(--teal-action);box-shadow:var(--ring)}
.t-field-sm{min-height:32px;padding:6px 10px}

/* select - the box of a native <select> in appearance:auto follows the operating system's control
   metric and DISCARDS the author's vertical padding, while the <input> beside it honours it. That
   is the whole of "los desplegables se ven mas pequenos y desalineados": 20 pages size a select
   with padding and only 8 ever turned the native box off. Normalising it here fixes every page at
   once, including the ones written tomorrow.

   'select:not([multiple]):not([size])' scores 0-2-1 on purpose. /app.css is injected BEFORE each
   page's inline <style>, so it LOSES every tie; a plain 'select' (0-0-1) would be overruled by the
   '.search select' and '.fld select' rules that cause the defect. A list box (multiple/size) keeps
   its native box: a chevron on a scrolling list would be a lie.

   Only background LONGHANDS are declared, never the shorthand, so a page keeps its own
   background-color (and 'select:disabled' keeps greying out at 0-1-1). The chevron is the one
   already inlined by five pages, moved here so it stops being copied. */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232A9D9A'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;
  padding-right:34px;cursor:pointer}

/* helper text, notes and disclosures - the layer the console never had. theme.ts carried no
   primitive for "explain this field", so .hint was redefined in 16 pages with six different sizes,
   .intro in another 16, and the warning tint by hand in eight; the only way a page had to explain
   something was to emit one more paragraph. These are that vocabulary, tokenised once
   (deuda 2026-09-04).

   .t-hint mide --fs-sm (13px) y no --fs-xs (11px), y la razon es una medicion, no un gusto: de las
   19 paginas que definen .hint a mano, 9 ya la escriben en 13px (7 por el token --fs-sm y 2 con el
   numero suelto), 5 en 12,5px, 3 en 12px y 1 en 11,5px. Ninguna en 11. O sea que la primitiva
   nacida en 11px habria ENCOGIDO el texto secundario de la consola en las 19 el dia que se
   adoptara, que es justo lo contrario de lo que esta tarjeta paga. Los dos rotulos que ya la usan
   (console y chat, "Datos que el RDA reporta al Estado") si querian el tamano pequeno, y para eso
   esta .t-hint-sm, simetrica con .t-note-sm.

   .t-details is a native <details>: it opens on CLICK (the console is used on a tablet, where
   hover does not exist), closes with Escape for free, and keeps its focus ring. */
.t-hint{font-size:var(--fs-sm);line-height:1.45;color:var(--g500);margin:0}
.t-hint-sm{font-size:var(--fs-xs)}
.t-note{font-size:var(--fs-sm);line-height:1.5;color:var(--g700);background:var(--g100);
  border:1px solid var(--g200);border-radius:var(--r-base);padding:var(--sp-2) 10px;margin:0}
.t-note-warn{color:var(--warn-700);background:var(--warn-050);border-color:var(--warn-100)}
.t-note-sm{font-size:var(--fs-xs);line-height:1.45}
/* La FRANJA de aviso (C-01). El aviso de entorno de demostración y los tres de suscripción
   (mora, suspendida, cancelada) se describían en el código como «a fixed, unmistakable strip on
   every console page», pero se inyectaban dentro del <header> flex, así que eran un elemento de su
   fila: 122x75 px en cuatro líneas a 375 px de ancho, y de 32 a 49 px de alto de header extra en
   toda pantalla. Medido el 2026-09-19 sobre doce rutas a los dos anchos: en las cuatro que
   desbordaban a 375 px el último elemento fuera de la ventana era siempre ese mismo bloque.
   Una franja es de ancho completo y va ANTES del header, así que aquí sólo se declara lo que la
   hace franja; el sitio lo pone server.ts inyectándola después de <body>.
   Dos papeles, dos escalones: la ETIQUETA de entorno es versalita corta (--fs-xs, igual que
   .t-chip), y el AVISO de suscripción es una frase con enlace sobre la que el prestador tiene que
   actuar, así que se lee en --fs-sm. El 12px que los cuatro escribían a mano no es ninguno de los
   dos escalones de la escala. */
.t-franja{padding:var(--sp-1) var(--sp-4);text-align:center;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);line-height:1.45}
.t-franja-etiqueta{font-size:var(--fs-xs);letter-spacing:var(--tr-wide)}
.t-franja-warn{background:var(--warn);color:var(--teal)}
.t-franja-bad{background:var(--bad);color:var(--white)}
.t-franja a{color:inherit;text-decoration:underline}
.t-details{font-size:var(--fs-sm);line-height:1.55;color:var(--g700);background:var(--g50);
  border:1px solid var(--g200);border-radius:var(--r-base)}
.t-details>summary{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;list-style:none;
  padding:var(--sp-2) 10px;font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--teal)}
.t-details>summary::-webkit-details-marker{display:none}
.t-details>summary::after{content:"";width:7px;height:7px;margin-left:auto;
  border-right:2px solid var(--teal2);border-bottom:2px solid var(--teal2);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-fast) var(--ease)}
.t-details[open]>summary::after{transform:rotate(-135deg) translateY(1px)}
.t-details>summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-base)}
.t-details>*:not(summary){margin:0 10px var(--sp-3)}

/* .t-grupo: un grupo de filas que se pliega (la cola de cada instrumento). No es .t-fold, que es una
   tarjeta entera con su relleno, ni .t-details, que es prosa en una caja gris: es un renglón con el
   nombre del grupo, su cuenta y el chevrón, separado del siguiente por una línea. */
.t-grupo{border-top:1px solid var(--g200)}
.t-grupo>summary{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) 0;cursor:pointer;
  list-style:none;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ink)}
.t-grupo>summary::-webkit-details-marker{display:none}
.t-grupo>summary::after{content:"";width:7px;height:7px;margin-left:auto;flex:none;
  border-right:2px solid var(--teal-action);border-bottom:2px solid var(--teal-action);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-fast) var(--ease)}
.t-grupo[open]>summary::after{transform:rotate(-135deg) translateY(1px)}
.t-grupo>summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-base)}
.t-grupo>*:last-child{margin-bottom:var(--sp-3)}

/* .t-mas: el pliegue del parrafo de apertura.
   Patron 1 de los cuatro que Bryan nombro el 2026-09-18: la pantalla explica en vez de mostrar. El
   parrafo bajo el titulo media 50 palabras en 24 de las 32 paginas que lo tienen, asi que lo
   primero que veia quien entraba a trabajar era prosa. Aqui la primera frase se queda a la vista y
   el resto cuelga de este pliegue: no se borra una palabra, deja de cobrar la pantalla.
   No es .t-details, que es una caja gris con su borde y sirve para un explicador que vive en el
   flujo; esto es plano a proposito, porque va bajo el titulo de TODAS las paginas y 24 cajas grises
   sobre 24 titulos serian el mismo ruido con otra forma.
   Lo que NO se pliega, y es la misma regla de .t-info: la obligacion, la advertencia clinica y la
   consecuencia economica se quedan a la vista (revision de Bryan, 2026-09-06). Una regla que solo
   se lee si el operador despliega no esta dicha. */
.t-mas{margin:calc(var(--sp-2) * -1) 0 var(--sp-4)}
.t-mas>summary{display:inline-flex;align-items:center;gap:var(--sp-1);cursor:pointer;list-style:none;
  padding:var(--sp-2) 0;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--teal-action)}
.t-mas>summary::-webkit-details-marker{display:none}
.t-mas>summary::after{content:"";width:6px;height:6px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-fast) var(--ease)}
.t-mas[open]>summary::after{transform:rotate(-135deg) translateY(1px)}
.t-mas>summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
/* El parrafo desplegado comparte la MEDIDA del parrafo de apertura (78ch, la que ya escriben
   19 de las paginas): sin ella la linea se estira al ancho entero y a 13px son 170 caracteres,
   o sea que el pliegue devolveria el parrafo peor de como estaba. El margen de arriba es el que
   despeja el anillo de foco del summary, que sobresale 5px. */
.t-mas>p{font-size:var(--fs-sm);line-height:1.55;color:var(--g500);max-width:78ch;
  margin:var(--sp-2) 0 var(--sp-3)}
/* .pie-pagina: la nota de metodo al final de la pantalla (como se calcula lo que se ve arriba).
   Estaba copiada igual en tres paginas del laboratorio y era la prosa mas larga que quedaba a la
   vista: 168 palabras en control interno (censo en el navegador, 2026-09-23). Queda la primera
   frase, que es lo que el operador necesita saber; el metodo cuelga de un .t-mas «Como se calcula». */
.pie-pagina{margin-top:var(--sp-6);font-size:var(--fs-xs);color:var(--g500);line-height:1.55;max-width:78ch}

/* .t-fold: la tarjeta cuyo formulario nace de una accion.
   Patron 2 de los cuatro que Bryan nombro el 2026-09-18: un formulario desplegado de entrada ocupa
   la pantalla sin que nadie lo haya pedido. Aca el titulo de la seccion ES el control que lo abre,
   asi que no se gana un boton mas: se gana el alto que el formulario cerrado no cobra.
   No es .t-details, que es el explicador de prosa (fondo gris, texto chico); esto es una tarjeta
   entera, con el peso y el color de un encabezado de seccion y el mismo relleno de .t-card-pad. */
.t-fold{padding:0}
/* El radio se HEREDA de la tarjeta que lo contiene, no se declara: el pliegue ya no vive solo
   dentro de .t-card (16px). Donde la pagina pone su propia tarjeta a 8 o 12px, un summary con
   radio fijo dibujaba su anillo de foco con esquinas mas redondas que la tarjeta. Para las seis
   paginas que ya lo usaban dentro de .t-card el valor heredado es el mismo 16px de antes. */
.t-fold>summary{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;list-style:none;
  padding:var(--sp-5);border-radius:inherit}
/* El titulo de la seccion sigue siendo un encabezado de verdad: un summary no entra en el indice
   de encabezados que un lector de pantalla recorre, y la pagina perderia esos escalones. */
.t-fold>summary>:is(h2,h3,h4){margin:0}
.t-fold>summary::-webkit-details-marker{display:none}
.t-fold>summary::after{content:"";width:8px;height:8px;margin-left:auto;flex:none;
  border-right:2px solid var(--teal-action);border-bottom:2px solid var(--teal-action);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-fast) var(--ease)}
.t-fold[open]>summary::after{transform:rotate(-135deg) translateY(1px)}
.t-fold[open]>summary{padding-bottom:var(--sp-3)}
.t-fold>*:not(summary){margin-left:var(--sp-5);margin-right:var(--sp-5)}
.t-fold>*:last-child{margin-bottom:var(--sp-5)}

/* .t-info + .t-pop: la ayuda secundaria que se pide, no la que estorba. .t-details sirve para un
   explicador de varios parrafos que vive en el flujo; esto es para el "como se usa este campo" que
   cuelga de UN control y que solo estorba cuando ya se sabe. Tres reglas del contrato, y las tres
   son estructurales, no de disciplina:
   1. Se abre por CLIC. Ni una sola regla :hover, porque la consola se usa en tablet y una ayuda que
      solo aparece al pasar el mouse no existe para quien la toca con el dedo.
   2. El texto viaja SIEMPRE por aria-describedby, este el globo abierto o cerrado. El calculo del
      nombre y la descripcion accesibles SI recorre los nodos ocultos cuando llega a ellos por una
      referencia explicita, asi que un lector de pantalla lee la ayuda sin tener que descubrir el
      boton, y lo que se pliega es solo la parte visual.
   3. El anillo de foco se conserva, y el area tactil se agranda a 30px con un ::before, sin
      engordar el circulo de 18px que se ve. */
.t-ayuda{position:relative;display:inline-flex;vertical-align:middle}
.t-info{position:relative;appearance:none;-webkit-appearance:none;font:inherit;font-size:var(--fs-xs);
  font-weight:var(--fw-bold);line-height:1;width:18px;height:18px;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--teal-action);
  border-radius:var(--r-full);background:#fff;color:var(--teal-action);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.t-info::before{content:"";position:absolute;inset:-6px}
.t-info[aria-expanded="true"]{background:var(--teal-action);color:#fff}
.t-info:focus-visible{outline:none;box-shadow:var(--ring)}
.t-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:max-content;max-width:34ch;
  font-size:var(--fs-xs);font-weight:var(--fw-regular);line-height:1.45;text-align:left;
  color:var(--g700);background:#fff;border:1px solid var(--g300);border-radius:var(--r-base);
  box-shadow:var(--sh-md);padding:var(--sp-2) 10px}
.t-pop-fin{left:auto;right:0}
/* La ayuda de una PANTALLA entera (el «Cómo funciona» que antes ocupaba la cabecera) necesita más ancho
   que la de un campo: es un párrafo o una lista corta, no una frase. Sigue siendo el mismo globo que se
   abre por clic; sólo cambia la medida y el aire entre sus párrafos. */
.t-pop-lg{max-width:min(60ch,calc(100vw - var(--sp-8)));max-height:min(70vh,32rem);overflow:auto;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);line-height:1.55}
.t-pop p{margin:0 0 var(--sp-2)}.t-pop p:last-child{margin:0}
.t-pop ul,.t-pop ol{margin:0 0 var(--sp-2);padding-left:var(--sp-5)}.t-pop li{margin:0 0 var(--sp-1)}

/* .t-h-ayuda: el encabezado y su boton de ayuda en una linea, sin que el boton entre en el
   encabezado. El primer intento de adopcion (PR #556) lo metio DENTRO del <h2>, y el nombre
   accesible de un encabezado se calcula desde su contenido: la lista de encabezados quedaba
   leyendose "Configurando, Ayuda sobre el numero que se configura". No es una barrera, es ruido,
   y se arregla una sola vez aqui en vez de una vez por pagina. El margen inferior lo lleva la
   fila porque el h2 pierde el suyo: si lo conservara, el boton se descolgaria del texto. */
.t-h-ayuda{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-1)}
.t-h-ayuda>:is(h1,h2,h3,h4,h5,h6){margin:0}

/* chips / status badges */
.t-chip{display:inline-flex;align-items:center;gap:var(--sp-1);white-space:nowrap;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  padding:3px 9px;border-radius:var(--r-full);background:var(--g100);color:var(--g500);line-height:1.3}
.t-chip svg{flex:none}
.t-chip:empty{display:none}
.t-chip-ok{background:var(--teal-050);color:var(--teal)}
.t-chip-warn{background:var(--warn-050);color:var(--warn-700)}
.t-chip-bad{background:var(--bad-050);color:var(--bad-700)}
.t-chip-info{background:#E6F0F4;color:var(--teal)}

/* table - tabular numerals on numeric cells */
.t-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
/* Una tabla sin filas no enseña sus encabezados: la pantalla ya dice con palabras que está vacía
   (.t-vacio), y una fila de rótulos sobre nada se lee como una carga que no terminó. Sólo cuando
   la tabla tiene cuerpo y el cuerpo no tiene filas: una tabla que se arma sin tbody no se toca. */
.t-table:has(>tbody):not(:has(>tbody>tr)){display:none}
.t-table th{text-align:left;font-weight:var(--fw-semibold);color:var(--g500);font-size:var(--fs-xs);
  letter-spacing:var(--tr-wide);text-transform:uppercase;padding:var(--fila-y) var(--celda-x)}
.t-table td{padding:var(--fila-y) var(--celda-x);border-top:1px solid var(--g100)}
.t-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* La densidad de control se aplica sola: una tabla cuyas filas llevan un control se abre entera, y
   una de solo lectura se queda compacta. Va por TABLA y no por fila para que dentro de una misma
   tabla no convivan dos alturas cuando el boton de anular sale solo en algunas filas.
   Se escribe sobre la variable y no sobre el relleno a proposito: asi la pagina sigue siendo la
   duena de su relleno horizontal y esta hoja no tiene que ganarle en especificidad a nadie.
   El campo oculto queda fuera: no se ve, no se toca y no necesita aire, y una fila que lleva el id
   en un input hidden es un patron corriente en las tablas que arma el cliente. */
table:has(tbody :is(button,input:not([type=hidden]),select,textarea)){--fila-y:var(--fila-y-control)}
/* En un telefono una tabla de siete columnas no cabe, y sin esto arrastra el documento entero:
   la pagina se desplaza en horizontal y el texto queda pegado a la izquierda con vacio al lado.
   Convertirla en su propio contenedor de scroll deja el desplazamiento DENTRO de la tabla.
   Medido: en escritorio ningun ancho de tabla cambia (1030, 950 y 1090 px identicos). */
@media (max-width:768px){.t-table{display:block;overflow-x:auto}}
@media (max-width:768px){:root{--celda-x:var(--sp-2)}}

/* concentric-care atmosphere - faint rings behind heroes / empty states */
.t-rings{position:relative;isolation:isolate}
.t-rings::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 38%,transparent 0,transparent 96px,rgba(42,157,154,.10) 97px,transparent 101px),
    radial-gradient(circle at 50% 38%,transparent 0,transparent 156px,rgba(42,157,154,.07) 157px,transparent 162px),
    radial-gradient(circle at 50% 38%,transparent 0,transparent 224px,rgba(11,59,67,.05) 225px,transparent 231px)}

/* El renglón que dice que aquí todavía no hay nada. Es el estado vacío MODESTO, el que cabe debajo
   de una tabla o de un panel; el ilustrado, con icono y titular, es .t-empty. La consola escribía
   este renglón a mano en diecisiete páginas con dos recortes del mismo valor (el largo con medida
   de lectura, el corto sin ella), que no son dos papeles: son dos momentos de quien lo escribió.
   El largo es el que queda, porque un párrafo gris a todo el ancho de la pantalla no se lee. */
.t-vacio{font-size:var(--fs-sm);color:var(--g500);padding:var(--sp-3) 0;line-height:1.55;max-width:78ch}

/* empty-state scaffold */
.t-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);
  padding:var(--sp-12) var(--sp-6);color:var(--g500)}
.t-empty svg{color:var(--teal2);opacity:.5}
.t-empty h3{margin:0;font-size:var(--fs-md);letter-spacing:var(--tr-tight);font-weight:var(--fw-bold);color:var(--ink);text-wrap:balance}
.t-empty p{margin:0;font-size:var(--fs-sm);max-width:42ch;text-wrap:pretty}

/* entrance motion - opt-in, compositor-friendly */
@keyframes t-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.t-enter{animation:t-enter var(--dur-slow) var(--ease-out) both}

/* ── Grouped top-nav (console shell N0 - nav.ts renderNav) ─────────────────────────────
   Desktop dropdowns for module groups; hover-open via CSS, click-toggle via the nav's own
   guarded script (.nav-grp.open). Mobile flattening lives in responsive.ts (page-inline, so it
   loads after this file and wins ties). */
header nav .nav-grp{position:relative;display:flex;align-items:center}
header nav .nav-grp-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:2px 0;margin:0;font:inherit;color:var(--mint);cursor:pointer;min-height:24px}
/* Un objetivo de puntero mide al menos 24x24 px (WCAG 2.2, 2.5.8). Los controles de esta barra
   median 15 px de alto los enlaces y 19 px los botones de grupo: el nav centra a sus hijos y
   nada les daba altura, asi que la caja de cada control era exactamente su linea de texto. El ancho
   nunca fue el problema (58 a 134 px medidos), solo el alto, y por eso la altura minima basta. El
   header mide 51 px o mas y centra su contenido, de modo que esto agranda el area que responde al
   puntero sin mover un pixel de lo que se ve. Va por estructura (el hijo directo) y no por clase,
   porque un grupo con una sola pagina visible emite su enlace SIN clase alguna y se habria quedado
   fuera justo el enlace mas suelto. El cajon movil ya cumplia por su cuenta: responsive.ts le da
   13 px de padding vertical a los mismos enlaces, y alli esta regla no cambia nada. */
header nav>a{display:inline-flex;align-items:center;min-height:24px}
/* Desde 1220 px el nav cabe entero en una línea (medido con el tenant demo, que trae todos los
   módulos: 1.046 px de nav a 1280). Un rótulo partido en dos («Medicina / Laboral») sube la barra y
   se lee como un menú roto. Por debajo va plegado en el cajón (responsive.ts, ADR 0042 §16). */
/* Para que quepa, la barra cede 2 px entre enlaces y 4 px de margen a cada lado. Va con body> para
   ganarle a la regla de la barra que cada página trae en línea, que se carga después de esta hoja. */
@media (min-width:1220px){
  header nav>a,header nav .nav-grp-btn{white-space:nowrap}
  body>header{padding-inline:var(--sp-6)}
  body>header nav{gap:var(--sp-4)}
}
/* El nombre de quien entró no cabe al lado del nav entero hasta 1440 px: con «Auditoría de diseño»
   empujaba «Salir» fuera de la ventana a 1280. Entre 1220 (donde el nav sale del cajón, ver
   responsive.ts) y 1440 se guarda (sigue en el cajón y en Mi cuenta); desde 1440 va en una línea y,
   si es muy largo, se recorta. */
@media (min-width:1220px) and (max-width:1439px){header nav .who{display:none}}
@media (min-width:1440px){header nav .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14rem}}
/* El marco de la página (ADR 0042 §17). Cada pantalla declara su propio ancho de main y lo centraba,
   así que el contenido empezaba en 24 sitios distintos a 1440 px (de 102 a 388) y el título saltaba
   de lado en cada clic del nav. El borde izquierdo lo pone ahora la capa: el de la medida ancha, el
   mismo en toda pantalla, con el mismo relleno lateral, y cada página sigue siendo dueña de hasta
   dónde llega a la derecha (su max-width). Va con body> para ganarle al main{margin:0 auto} que
   cada página trae en línea, igual que la barra de arriba, y sólo en pantalla: el papel lo sigue
   ordenando la página. El chat es un lienzo de tres columnas a todo el ancho (.t-lienzo) y queda
   fuera; el informe del operador no lleva barra y tampoco entra. Las páginas con cabecera
   centrada (header.top: los textos legales, la privacidad del prestador, la encuesta y la plataforma)
   tampoco: centran el título en la misma columna que el texto, y el marco los separaba 210 px. */
@media screen{
  body>header:not(.top)~main:not(.t-lienzo){margin-inline:max(0px,calc((100% - var(--medida-ancha) - 2 * var(--sp-6)) / 2)) auto;padding-inline:var(--sp-6)}
}
/* Una pantalla con cabecera propia (.t-cabecera) ya dice dónde se está en su título: el rótulo de la
   barra lo repetiría al lado de la marca y le quitaría al nav el sitio que necesita. */
body:has(main .t-cabecera) header .sect{display:none}
/* Con puntero GRUESO el mismo control sube al piso de producto de 44x44 px (la rubrica de diseno:
   24 px es el minimo de la WCAG 2.2, 44 es lo que pide un dedo). Se gana alto, no ancho de pantalla:
   el header mide 60 px en escritorio y sus hijos van centrados, asi que con el dedo la barra crece a
   80 px y con el raton no cambia un pixel. Va en pointer:coarse y no en any-pointer:coarse
   porque lo que decide es el puntero PRIMARIO: un portatil con pantalla tactil que se usa con el
   trackpad sigue siendo puntero fino y no tiene por que pagar la barra alta. El ancho minimo cuenta
   igual que el alto: «Salir» mide 26 px de ancho y «Inicio» 32, o sea que sin min-width los dos
   seguirian por debajo de 44x44 aunque el alto ya cumpliera. El menu desplegable necesita ademas el
   display:flex, porque sus enlaces son de bloque y con solo min-height el texto se quedaria
   pegado arriba de su caja. */
@media (pointer:coarse){
  header nav>a,header nav .nav-grp-btn{min-height:44px;min-width:44px}
  header nav .nav-grp-menu a{min-height:44px;display:flex;align-items:center}
}
header nav .nav-grp-btn:hover{color:#fff}
header nav .nav-grp-active>.nav-grp-btn{color:#fff;font-weight:700}
header nav .nav-grp-btn svg{opacity:.75;transition:transform var(--dur-fast) var(--ease)}
header nav .nav-grp.open>.nav-grp-btn svg{transform:rotate(180deg)}
header nav .nav-grp-menu{display:none;position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);min-width:172px;background:#fff;border:1px solid var(--g300);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:6px;z-index:640}
/* invisible hover bridge across the gap between button and menu (exactly the 9px gap - taller
   would overlap the button and eat its clicks) */
header nav .nav-grp-menu::before{content:"";position:absolute;top:-9px;left:0;right:0;height:9px}
/* hover-open only where hover is real - on touch, emulated :hover sticks after a tap and would
   make the click-toggle look broken (menu refuses to close) */
@media (hover:hover){header nav .nav-grp:hover>.nav-grp-menu{display:block}}
header nav .nav-grp.open>.nav-grp-menu{display:block}
header nav .nav-grp-menu a{display:block;padding:9px 12px;border-radius:var(--r-base);color:var(--teal);font-weight:500;white-space:nowrap;text-decoration:none}
header nav .nav-grp-menu a:hover{background:var(--teal-050);color:var(--teal)}
header nav .nav-grp-menu a.active{color:var(--teal-action);font-weight:700}
/* El menú de un grupo con secciones (hoy el de Laboratorio) se abre en columnas, cada una con su
   rótulo. Sólo en escritorio: en el cajón del teléfono los menús ya van a lo largo y las secciones se
   leen como rótulos entre sus enlaces. Se ancla a la derecha del botón porque el panel es ancho y el
   grupo vive a la derecha de la barra. Escritorio es desde 1220 px, el mismo borde del cajón. */
header nav .nav-sec{display:flex;flex-direction:column;min-width:0}
header nav .nav-sec-tt{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--g500);white-space:nowrap}
@media (min-width:1220px){
  header nav .nav-grp-menu-secciones{left:auto;right:calc(-1 * var(--sp-4));transform:none;grid-template-columns:repeat(3,minmax(10rem,auto));gap:var(--sp-1) var(--sp-4);padding:var(--sp-3)}
  header nav .nav-grp.open>.nav-grp-menu-secciones{display:grid}
}
@media (min-width:1220px) and (hover:hover){header nav .nav-grp:hover>.nav-grp-menu-secciones{display:grid}}

/* ── Cabecera de pantalla (.t-cabecera) ─────────────────────────────────────────────────
   Un título por pantalla, su ayuda al lado y la acción principal a la derecha, en una sola fila.
   Cada pantalla del laboratorio abría con un h1, un segundo título que decía lo mismo con otras
   palabras, un párrafo y un «Cómo funciona»: cuatro renglones antes del trabajo. La explicación sigue
   existiendo, plegada en la ayuda del título. */
.t-cabecera{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin:0 0 var(--sp-6)}
.t-cabecera-titulo{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.t-cabecera h1{margin:0;font-size:var(--fs-xl);font-weight:var(--fw-heavy);letter-spacing:var(--tr-tight);line-height:1.15}
.t-cabecera-sub{margin:var(--sp-1) 0 0;color:var(--g500);font-size:var(--fs-sm);max-width:72ch}
.t-cabecera-acciones{display:flex;align-items:center;gap:var(--sp-2);flex:none}
/* El control que acota la pantalla (el mes, la ventana) vive con la acción y no en una barra propia:
   su rótulo va en la misma línea y mide lo que mide el rótulo de cualquier campo. */
.t-cabecera-acciones label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--g500)}
@media (max-width:640px){.t-cabecera{flex-direction:column;align-items:stretch}.t-cabecera-acciones{flex-wrap:wrap}.t-cabecera-acciones .t-btn{flex:1}}

/* ── Pestañas de una pantalla (.t-tabs) ──────────────────────────────────────────────────
   La activa se marca con color y una línea de 2px, no con un relleno. Una pestaña rellena con su borde
   inferior grueso se lee como un botón levantado, y en una barra de siete etapas el ojo tiene que ver
   DÓNDE está, no a qué apretar. Todas pesan lo mismo para que cambiar de pestaña no mueva el texto. */
.t-tabs{display:flex;gap:var(--sp-6);overflow-x:auto;border-bottom:1px solid var(--g200);margin:0 0 var(--sp-5);scrollbar-width:none}
.t-tabs::-webkit-scrollbar{display:none}
.t-tabs>a,.t-tabs>button{position:relative;flex:none;white-space:nowrap;padding:var(--sp-3) 0;color:var(--g500);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);text-decoration:none;background:none;border:0;cursor:pointer;transition:color var(--dur-fast) var(--ease)}
.t-tabs>a:hover,.t-tabs>button:hover{color:var(--ink)}
.t-tabs>[aria-current="page"],.t-tabs>[aria-selected="true"]{color:var(--teal)}
.t-tabs>[aria-current="page"]::after,.t-tabs>[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:var(--r-full);background:var(--teal-action)}

/* ── Enlaces dentro del texto ─────────────────────────────────────────────────────────────
   Un enlace suelto en un párrafo, una celda o un estado vacío salía con el azul y el subrayado del
   navegador, que es la marca más clara de una pantalla sin terminar. :where deja la especificidad en
   cero: cualquier enlace con clase propia o con estilo de la página sigue ganando. */
main :where(p,li,td,dd,label,.t-vacio,.hint,.intro) a:where(:not([class])){color:var(--teal-action);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--teal-action) 35%,transparent);transition:text-decoration-color var(--dur-fast) var(--ease)}
main :where(p,li,td,dd,label,.t-vacio,.hint,.intro) a:where(:not([class])):hover{text-decoration-color:currentColor}

/* ── Menú de acciones de una fila (.t-menu, cableado por ui-menu.ts) ─────────────────────
   Una fila lleva UNA acción a la vista, la que su estado pide, y el resto en este menú. Cuatro botones
   iguales por fila (Recibir, Etiqueta, Rechazar, Historia) hacían que ninguno mandara y que la tabla
   creciera por lo que casi nunca se usa. Entra desde la esquina del botón que lo abre; se cierra sin
   animación, y abierto con el teclado tampoco se anima: esa mano ya sabe a dónde va. */
.t-menu{position:relative;display:inline-flex;vertical-align:middle}
.t-menu-btn{width:32px;min-height:32px;padding:0;color:var(--g500);border-color:transparent;background:transparent}
.t-menu-btn:hover:not(:disabled),.t-menu-btn[aria-expanded="true"]{background:var(--g100);border-color:var(--g200);color:var(--teal)}
.t-menu-lista{position:fixed;top:0;left:0;z-index:700;min-width:184px;padding:var(--sp-1);background:#fff;border:1px solid var(--g300);border-radius:var(--r-md);box-shadow:var(--sh-md);transform-origin:top right;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
@starting-style{.t-menu-lista{opacity:0;transform:scale(.97)}}
.t-menu-lista.t-menu-quieto{transition:none}
.t-menu-lista[data-arriba]{transform-origin:bottom right}
.t-menu-lista [role="menuitem"]{display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:36px;text-decoration:none;padding:var(--sp-2) var(--sp-3);border:0;background:none;border-radius:var(--r-base);font:inherit;font-size:var(--fs-sm);color:var(--ink);text-align:left;white-space:nowrap;cursor:pointer}
.t-menu-lista [role="menuitem"]:hover:not(:disabled),.t-menu-lista [role="menuitem"]:focus-visible{background:var(--teal-050);color:var(--teal)}
.t-menu-lista [role="menuitem"]:disabled{color:var(--g500);cursor:default}
.t-menu-lista [role="menuitem"].t-menu-peligro{color:var(--bad-700)}
.t-menu-lista [role="menuitem"].t-menu-peligro:hover:not(:disabled){background:var(--bad-050);color:var(--bad-700)}
.t-menu-lista hr{border:0;border-top:1px solid var(--g200);margin:var(--sp-1) 0}
/* La acción de la fila y su menú, juntos y a la derecha de la celda. */
.t-fila-acciones{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-1)}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}