/* Componentes del shell. Sin valores literales de color, tipografía, espaciado ni
   radios: todo sale de tokens.css. Sin sombras ni iconografía decorativa. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--color-surface-base);
  color: var(--color-ink-primary);
  font-family: var(--font-sans);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
}

h1 {
  margin: 0 0 var(--spacing-4);
  font-size: var(--stat-value-font-size);
  font-weight: var(--stat-value-font-weight);
}

p {
  margin: 0;
}

h2 {
  margin: 0 0 var(--spacing-3);
  font-size: var(--section-title-font-size);
  font-weight: var(--eyebrow-font-weight);
}

/* IDs, códigos y CUIT en mono (DESIGN.md: lo que se copia o se busca). */
code {
  font-family: var(--font-mono);
  font-size: var(--code-font-size);
}

/* Links y botones nunca con los colores del navegador (DESIGN.md: links en accent-rust,
   botones sin clase neutros outline; nav, pills y botones con clase declaran los suyos). */
a {
  color: var(--color-accent-rust);
}

button:not([class]) {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
  font: inherit;
  cursor: pointer;
}

/* Texto solo para lector de pantalla: completa lo que el glifo o el número no dicen. */
.solo-lector {
  position: absolute;
  width: var(--solo-lector-size);
  height: var(--solo-lector-size);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  font-weight: var(--eyebrow-font-weight);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

/* ─── Foco: explícito en todo elemento interactivo, nunca el del navegador ─── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sidebar a:focus-visible,
.sidebar button:focus-visible,
.sidebar summary:focus-visible,
.sidebar [tabindex]:focus-visible {
  outline-color: var(--color-focus-ring-on-dark);
}

/* El destino del salto recibe foco por programa, no es un control. */
.contenido:focus {
  outline: none;
}

/* ─── Saltar al contenido: oculto hasta recibir foco ─── */

.saltar {
  position: absolute;
  top: var(--spacing-2);
  left: var(--spacing-2);
  z-index: 30;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-surface-raised);
  color: var(--color-accent-rust);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
  transform: translateY(-200%);
}

.saltar:focus,
.saltar:focus-visible {
  transform: none;
}

/* ─── Modo demo (Story 1.9): visible al scrollear, sin animación, nunca cerrable ─── */

.demo-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--spacing-2) var(--spacing-gutter);
  background: var(--color-demo-bar-bg);
  color: var(--color-demo-bar-text);
  border-bottom: var(--border-width-hairline) solid var(--color-demo-bar-border);
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  font-weight: var(--eyebrow-font-weight);
  letter-spacing: var(--eyebrow-letter-spacing);
}

/* El foco y los saltos a anclas nunca quedan tapados por la barra sticky. */
html:has(.demo-bar) {
  scroll-padding-top: var(--demo-bar-reserva);
}

/* ─── Shell: sidebar fijo + una columna de contenido ─── */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

/* Fijo en pantalla ancha: queda visible al scrollear el contenido; si no entra en el alto
   de la ventana scrollea él solo. En ≤ 48rem vuelve a ir arriba sin alto fijo. */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-6) 0;
  background: var(--color-sidebar-base);
  color: var(--color-sidebar-text);
}

/* En modo demo la barra sticky va arriba: el sidebar se fija debajo, sin quedar tapado. */
html:has(.demo-bar) .sidebar {
  top: var(--demo-bar-reserva);
  height: calc(100vh - var(--demo-bar-reserva));
}

.sidebar-marca,
.sidebar-pie {
  padding-inline: var(--spacing-4);
}

.sidebar-nombre {
  font-size: var(--section-title-font-size);
  font-weight: var(--eyebrow-font-weight);
}

.sidebar-eyebrow,
.sidebar .eyebrow {
  color: var(--color-sidebar-text-muted);
}

/* ─── Áreas (Story 5.5): un grupo por área real y las áreas futuras ─── */

.areas {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-encabezado {
  position: relative;
}

/* El encabezado enlaza al inicio del área. El texto se alinea con el de los módulos; a la
   izquierda va el ícono (en su recuadro) y a la derecha el chevron, ambos sin eventos. */
.area-enlace {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--spacing-2);
  padding-block: var(--spacing-2);
  padding-inline: calc(var(--spacing-4) + var(--nav-icon-size) + var(--spacing-3))
    calc(var(--spacing-4) + var(--nav-icon-size) + var(--spacing-2));
  border-inline-start: var(--nav-active-border-width) solid transparent;
  color: var(--color-sidebar-text);
  font-weight: var(--eyebrow-font-weight);
  text-decoration: none;
}

a.area-enlace:hover {
  background: var(--color-sidebar-active-bg);
}

/* Encabezado del área de la página actual (aria-current="true"): el módulo lleva "page". */
.area-enlace[aria-current] {
  background: var(--color-sidebar-active-bg);
}

.area-enlace:focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}

.area-ola {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  font-weight: normal;
  letter-spacing: var(--eyebrow-letter-spacing);
  color: var(--color-sidebar-text-muted);
}

/* Recuadro del ícono: centrado sobre la columna de íconos de los módulos. */
.area-icono {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--spacing-4) - var(--spacing-1));
  box-sizing: content-box;
  padding: var(--spacing-1);
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-text);
  border-radius: var(--rounded-sm);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Área de la página actual: recuadro invertido, chevron abierto y sus módulos debajo. */
.area-grupo-abierto .area-icono {
  background: var(--color-sidebar-text);
  color: var(--color-sidebar-base);
}

.area-chevron {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--spacing-4);
  color: var(--color-sidebar-text-muted);
  transform: translateY(-50%);
  transition: transform var(--transition-short) ease-out;
  pointer-events: none;
}

.area-grupo-abierto .area-chevron {
  transform: translateY(-50%) rotate(90deg);
}

.area-grupo .nav {
  margin-top: var(--spacing-1);
}

/* Área futura: en gris, recuadro punteado, sin enlace ni despliegue, con "Próximamente". */
.area-futura .area-icono {
  padding: calc(var(--spacing-1) - var(--border-width-hairline));
  background: transparent;
  color: var(--color-sidebar-text-muted);
  border: var(--border-width-hairline) dashed currentColor;
}

.area-enlace-deshabilitado {
  padding-block-end: var(--spacing-1);
  padding-inline-end: var(--spacing-4);  /* sin chevron */
  color: var(--color-sidebar-text-muted);
  cursor: not-allowed;
}

.area-proximamente {
  display: inline-block;
  margin-block-end: var(--spacing-2);
  margin-inline-start: calc(
    var(--spacing-4) + var(--nav-icon-size) + var(--spacing-3) + var(--nav-active-border-width)
  );
  padding: 0 var(--spacing-1);
  border: var(--border-width-hairline) solid currentColor;
  border-radius: var(--rounded-sm);
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
  color: var(--color-sidebar-text-muted);
}

/* Cada sección del sidebar: su título eyebrow y su lista. */
.nav-seccion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.nav-seccion > .eyebrow {
  padding-inline: var(--spacing-4);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  position: relative;
}

/* Ancho de punta a punta, con lugar a la izquierda para el ícono (va encima, sin eventos). */
.nav-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  padding-block: var(--spacing-2);
  padding-inline: calc(var(--spacing-4) + var(--nav-icon-size) + var(--spacing-3)) var(--spacing-4);
  border-inline-start: var(--nav-active-border-width) solid transparent;
  color: var(--color-sidebar-text);
  text-decoration: none;
}

/* El sidebar scrollea: el anillo va por dentro del ítem para que no lo recorte. */
.nav-item:focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}

.nav-item[aria-current="page"] {
  background: var(--color-sidebar-active-bg);
  border-inline-start-color: var(--color-accent-rust);
  font-weight: var(--eyebrow-font-weight);
}

.nav-icono {
  position: absolute;
  inset-block-start: calc(
    var(--spacing-2) + (var(--body-font-size) * var(--body-line-height) - var(--nav-icon-size)) / 2
  );
  inset-inline-start: var(--spacing-4);
  pointer-events: none;
}

.nav li:has(.nav-item-deshabilitado) .nav-icono {
  color: var(--color-sidebar-text-muted);
}

.nav-item-deshabilitado {
  color: var(--color-sidebar-text-muted);
  cursor: not-allowed;
}

.nav-leyenda {
  display: block;
  padding: 0 var(--spacing-4) var(--spacing-2)
    calc(var(--spacing-4) + var(--nav-icon-size) + var(--spacing-3));
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  color: var(--color-sidebar-text-muted);
}

.sidebar-pie {
  margin-top: auto;
}

.usuario-actual {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Hereda el color del pie (sidebar o encabezado): ningún par de color nuevo. */
.enlace-usuario {
  align-self: flex-start;
  color: inherit;
}

.boton-salir {
  align-self: flex-start;
  margin-top: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  background: transparent;
  color: inherit;
  border: var(--border-width-hairline) solid currentColor;
  border-radius: var(--rounded-sm);
  font: inherit;
  cursor: pointer;
}

.contenido {
  padding: var(--spacing-gutter);
}

/* Con banda de encabezado: la banda va de borde a borde y el resto respeta el gutter. */
.contenido:has(> .pagina-encabezado) {
  padding: 0 0 var(--spacing-gutter);
}

.contenido:has(> .pagina-encabezado) > :not(.pagina-encabezado) {
  margin-inline: var(--spacing-gutter);
}

/* ─── Encabezado de página: título y total a la izquierda; frescura y buscador a la derecha ─── */

.pagina-encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3) var(--spacing-6);
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-gutter);
  background: var(--color-surface-raised);
  border-bottom: var(--border-width-hairline) solid var(--color-border-hairline);
}

.pagina-titulo,
.pagina-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-2) var(--spacing-4);
}

.pagina-meta {
  align-items: flex-end;
}

.pagina-encabezado h1 {
  margin: 0;
  font-size: var(--page-title-font-size);
}

.pagina-encabezado .frescura {
  margin: 0;
}

.volver {
  margin-bottom: var(--spacing-4);
}

/* ─── Frescura del corte vigente (AD-16): siempre texto; el color solo acompaña ─── */

.frescura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
  color: var(--color-ink-secondary);
}

.frescura-corte {
  font-family: var(--font-mono);
  font-size: var(--code-font-size);
}

.corte-atrasado {
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-status-stale-bg);
  color: var(--color-status-stale-text);
  border-radius: var(--rounded-sm);
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  font-weight: var(--eyebrow-font-weight);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
}

.estado-vacio {
  padding: var(--spacing-4);
  background: var(--color-surface-raised);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
  color: var(--color-ink-secondary);
}

/* ─── Baseline del Panel (Story 1.4): stat-tile de DESIGN.md ─── */

.baseline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.baseline h2,
.baseline h3 {
  margin: 0;
  font-size: var(--body-font-size);
  font-weight: var(--eyebrow-font-weight);
}

.baseline-periodo {
  font-family: var(--font-mono);
  font-size: var(--code-font-size);
  color: var(--color-ink-secondary);
}

.baseline-leyenda {
  align-self: flex-start;
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-status-stale-bg);
  color: var(--color-status-stale-text);
  border-radius: var(--rounded-sm);
  font-weight: var(--eyebrow-font-weight);
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--login-width)), 1fr));
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-4);
  background: var(--color-surface-raised);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
}

.stat-value {
  font-size: var(--stat-value-font-size);
  font-weight: var(--stat-value-font-weight);
}

.stat-unidad,
.stat-contexto,
.stat-calculo {
  font-size: var(--body-font-size);
  font-weight: normal;
  color: var(--color-ink-secondary);
}

.stat-sin-datos {
  color: var(--color-ink-secondary);
}

.stat-calculo code {
  font-family: var(--font-mono);
  font-size: var(--code-font-size);
}

.pendientes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pendientes li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-raised);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
}

.pendiente-motivo {
  font-family: var(--font-mono);
  font-size: var(--code-font-size);
  color: var(--color-ink-secondary);
}

/* ─── Encabezado sin sidebar (Directorio) ─── */

.encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-gutter);
  background: var(--color-surface-raised);
  border-bottom: var(--border-width-hairline) solid var(--color-border-hairline);
}

.encabezado-nombre {
  font-weight: var(--eyebrow-font-weight);
}

/* ─── Login y páginas de error ─── */

.contenido-centrado {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--spacing-8);
}

.tarjeta {
  width: min(100%, var(--login-width));
  padding: var(--spacing-6);
  background: var(--color-surface-raised);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.formulario input {
  margin-bottom: var(--spacing-2);
}

.formulario input,
.case-tray-buscador input {
  appearance: none;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
  font: inherit;
}

.boton-primario {
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  border: 0;
  border-radius: var(--rounded-sm);
  font: inherit;
  cursor: pointer;
}

.mensaje-error {
  margin-bottom: var(--spacing-4);
  color: var(--color-impact-alto-text);
}

.enlace {
  color: var(--color-accent-rust);
}

/* Cambiar contraseña (Story 5.3). */
.aviso-clave {
  margin-bottom: var(--spacing-4);
}

.ayuda-clave {
  margin-bottom: var(--spacing-2);
}

.formulario-salir {
  margin-top: var(--spacing-4);
}

/* ─── Administración › Usuarios (Story 5.4) ─── */

.tarjeta-ancha {
  width: min(100%, var(--admin-form-width));
}

.formulario select {
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
  font: inherit;
}

/* La casilla conserva su dibujo nativo (el reset de .formulario input la dejaría vacía). */
.formulario input[type="checkbox"] {
  appearance: auto;
  margin: 0;
}

.grupo-roles {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-2);
  padding: var(--spacing-3);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
}

.grupo-roles legend {
  padding-inline: var(--spacing-1);
  font-weight: var(--eyebrow-font-weight);
}

.casilla {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.boton-enlace {
  display: inline-block;
  text-decoration: none;
}

.aviso-usuarios,
.explicacion-accion,
.volver-usuarios {
  margin-block: var(--spacing-4);
}

.roles,
.acciones-usuario {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1) var(--spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-tray-tabla .roles,
.case-tray-tabla .acciones-usuario {
  padding-inline-start: 0;
}

/* Badge de rol: siempre con su texto; el color no codifica nada. */
.rol-badge {
  padding: 0 var(--spacing-2);
  background: var(--color-surface-base);
  color: var(--color-ink-primary);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
  font-size: var(--code-font-size);
}

/* Acciones de la fila como botones secundarios (outline neutro). */
.accion-secundaria {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
  text-decoration: none;
}

/* one-time-secret: el único dato de la app que no se puede volver a ver. */
.one-time-secret {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-6);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
}

.one-time-secret h2 {
  margin: 0;
}

.secreto code {
  font-family: var(--font-mono);
  font-size: var(--section-title-font-size);
  overflow-wrap: anywhere;
  user-select: all;
}

/* ─── Pantalla angosta o zoom 200%: el sidebar pasa arriba, sin doble scroll ─── */

@media (max-width: 48rem) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  html:has(.demo-bar) .sidebar {
    position: static;
    height: auto;
    overflow-y: visible;
  }
}

/* Reduced motion: !important para que ninguna clase con transición la pise. El estado
   visible nunca depende de que una animación termine, y ninguna ventana (p. ej. deshacer)
   se mide con eventos de animación. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.nav-badge {
  margin-inline-start: auto;
  padding: 0 var(--spacing-2);
  background: var(--color-sidebar-text);
  color: var(--color-sidebar-base);
  border-radius: var(--rounded-full);
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  font-weight: var(--eyebrow-font-weight);
}

.case-tray-filtros,
.case-tray-buscador,
.case-tray-paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  align-items: center;
  margin-block: var(--spacing-4);
}

/* Pills de filtro arriba a la izquierda y el total del resultado a la derecha, en la misma
   fila; todo lo demás de la bandeja ocupa el ancho completo debajo. */
.case-tray {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--spacing-4);
  align-items: center;
}

.case-tray > * {
  grid-column: 1 / -1;
}

.case-tray > .case-tray-filtros {
  grid-row: 1;
  grid-column: 1;
}

.case-tray > .case-tray-total {
  grid-row: 1;
  grid-column: 2;
}

/* Sin pills (catálogo normalizado), el total ocupa la fila entera. */
.case-tray:not(:has(> .case-tray-filtros)) > .case-tray-total {
  grid-column: 1 / -1;
}

.case-tray-total {
  color: var(--color-ink-secondary);
}

/* El buscador va en la banda del encabezado: la etiqueta visible queda arriba del campo. */
.pagina-encabezado .case-tray-buscador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-1) var(--spacing-2);
  margin: 0;
}

.case-tray-buscador label {
  grid-column: 1 / -1;
  font-size: var(--code-font-size);
  color: var(--color-ink-secondary);
}

.pill {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
  text-decoration: none;
}

.pill[aria-current] {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
  border-color: var(--color-action-primary);
}

/* Contenedor de la tabla: superficie elevada con borde y radio; el scroll horizontal queda
   adentro, nunca en la página. */
.case-tray-scroll {
  overflow-x: auto;
  max-width: 100%;
  background: var(--color-surface-raised);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-md);
}

.case-tray-scroll + .case-tray-scroll {
  margin-top: var(--spacing-4);
}

.case-tray-tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-raised);
}

.case-tray-tabla th,
.case-tray-tabla td {
  padding: var(--spacing-2) var(--spacing-4);
  border-bottom: var(--border-width-hairline) solid var(--color-border-hairline);
  text-align: start;
  vertical-align: top;
  /* break-word (no anywhere): corta solo palabras que no entran, sin achicar el ancho
     mínimo de la columna; el desborde lo absorbe el scroll de .case-tray-scroll. */
  overflow-wrap: break-word;
}

.case-tray-tabla th {
  background: var(--color-surface-base);
  color: var(--color-ink-secondary);
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  font-weight: var(--eyebrow-font-weight);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
}

.case-tray-tabla tbody tr:last-child td {
  border-bottom: 0;
}

.case-tray-tabla caption {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: var(--border-width-hairline) solid var(--color-border-hairline);
  color: var(--color-ink-secondary);
  text-align: start;
}

/* Anterior / Siguiente como botones outline (DESIGN.md: finding-close-actions). */
.case-tray-paginacion p {
  margin-inline-end: auto;
  color: var(--color-ink-secondary);
}

.case-tray-paginacion a {
  padding: var(--spacing-1) var(--spacing-3);
  background: var(--color-surface-raised);
  color: var(--color-ink-primary);
  border: var(--border-width-hairline) solid var(--color-border-hairline);
  border-radius: var(--rounded-sm);
  text-decoration: none;
}

.case-tray-tabla ul {
  margin: 0;
  padding-inline-start: var(--spacing-4);
}

.case-tray-acciones form + form,
.case-tray-acciones form + details {
  margin-block-start: var(--spacing-2);
}

.case-tray-acciones details form {
  display: grid;
  gap: var(--spacing-1);
  margin-block-start: var(--spacing-2);
}

.case-tray-acciones summary {
  cursor: pointer;
}

.descartar-aviso {
  margin: 0;
}

.criterio-decision {
  margin-block: var(--spacing-3);
}

.criterio-decision h2 {
  margin-block: 0 var(--spacing-2);
}

.case-tray-total,
.case-tray-vacia,
.case-tray-error {
  margin-block: var(--spacing-4);
}

.variante,
.cuit-compartido,
.anulada {
  color: var(--color-status-stale-text);
  background: var(--color-status-stale-bg);
  padding: var(--spacing-1);
}

.esqueleto-fila {
  background: var(--color-border-hairline);
  height: var(--spacing-8);
  margin-block: var(--spacing-2);
  border-radius: var(--rounded-sm);
}

.case-tray:has(.case-tray-tabla, .case-tray-vacia, .case-tray-error) .case-tray-esqueleto {
  display: none;
}

.case-tray-tabla td.numero {
  font-family: var(--font-mono);
  text-align: end;
  white-space: nowrap;
}

.case-tray-tabla td.numero .gasto-acumulado {
  margin: 0;
}

.case-tray-tabla tr.esta-orden {
  background: var(--color-surface-base);
}

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--spacing-3);
  margin: 0;
}

.ficha dt {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-font-size);
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

.ficha dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.orden-cabecera,
.orden-renglones,
.orden-recorrido {
  margin-block: var(--spacing-6);
}

/* ─── Íconos de estado (macro icono_estado): siempre con nombre accesible ─── */

.icono-estado {
  font-family: var(--font-mono);
}

.icono-estado-ok {
  color: var(--color-status-ok);
}

.icono-estado-peligro {
  color: var(--color-status-danger);
}

.icono-estado-pendiente {
  color: var(--color-status-pending);
}