/* ==========================================================================
   COMPONENTES REUTILIZABLES
   --------------------------------------------------------------------------
   Piezas que funcionan igual en todos los módulos. Al construir un módulo
   nuevo se reutilizan estas clases en lugar de escribir estilos propios.
   ========================================================================== */

/* ==========================================================================
   BOTONES
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.5rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  background: var(--color-superficie-2);
  color: var(--color-texto);
  font-family: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), box-shadow var(--transicion);
}
.boton:hover { text-decoration: none; }
.boton:active { transform: translateY(0.5px); }

.boton--primario {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: #ffffff;
  box-shadow: var(--sombra-sm);
}
.boton--primario:hover {
  background: var(--color-primario-fuerte);
  border-color: var(--color-primario-fuerte);
}

.boton--secundario {
  background: var(--color-superficie);
  border-color: var(--color-borde-fuerte);
  color: var(--color-texto);
}
.boton--secundario:hover {
  background: var(--color-superficie-2);
  border-color: var(--color-texto-tenue);
}

.boton--fantasma { background: transparent; color: var(--color-texto-suave); }
.boton--fantasma:hover { background: var(--color-superficie-2); color: var(--color-texto); }

.boton--peligro { background: transparent; border-color: transparent; color: var(--color-error); }
.boton--peligro:hover { background: var(--color-error-suave); }

.boton--peligro-solido {
  background: var(--color-error);
  border-color: var(--color-error);
  color: #ffffff;
}
.boton--peligro-solido:hover { filter: brightness(0.92); }

.boton--chico { padding: 0.28rem 0.55rem; font-size: var(--texto-xs); }
.boton--bloque { width: 100%; }

.boton[disabled],
.boton--inactivo { opacity: 0.45; pointer-events: none; }

/* --------------------------------------------------------------------------
   BOTÓN SÓLO ÍCONO
   Es la forma en que se muestran las acciones que se repiten en cada fila
   —ver, editar, eliminar, facturar—. El texto no desaparece: va en el globo
   al apoyar el mouse y como nombre accesible. Se arma con {% accion %}.
   -------------------------------------------------------------------------- */
.boton-icono {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.boton-icono:hover {
  background: var(--color-superficie-2);
  color: var(--color-texto);
  border-color: var(--color-borde-fuerte);
  text-decoration: none;
}

/* El tamaño que va dentro de una fila de tabla, para no engordar el renglón */
.boton-icono--chico { width: 28px; height: 28px; font-size: 0.875rem; }

/* La acción sugerida de la fila —facturar, cargar el honorario— va teñida
   desde el vamos: es lo que reemplaza al botón azul, y tiene que seguir
   avisando que ahí hay algo pendiente sin necesidad de apoyar el mouse. */
.boton-icono--principal {
  background: var(--color-primario-suave);
  border-color: var(--color-primario-borde);
  color: var(--color-primario-texto);
}
.boton-icono--principal:hover {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: #ffffff;
}

/* Al pasar el mouse, el resto toma el color de lo que hace: así el botón de
   borrar se distingue del de editar antes de leer el globo. */
.boton-icono--peligro:hover {
  background: var(--color-error-suave);
  border-color: var(--color-error);
  color: var(--color-error);
}
.boton-icono--exito:hover {
  background: var(--color-exito-suave);
  border-color: var(--color-exito);
  color: var(--color-exito);
}

/* ==========================================================================
   PANELES
   ========================================================================== */
.panel {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  /* `clip` y no `hidden`: recorta igual las esquinas redondeadas, pero no
     vuelve al panel un contenedor de desplazamiento. Con `hidden`, el
     encabezado pegajoso de una tabla se pegaba al panel —que no se desplaza—
     y al bajar por la página se iba con el resto. */
  overflow: clip;
}

.panel__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
}

.panel__titulo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  margin: 0;
}
.panel__titulo .icono { color: var(--color-texto-tenue); }

.panel__conteo {
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  color: var(--color-texto-tenue);
  background: var(--color-superficie-2);
  border-radius: var(--radio-full);
  padding: 0.1em 0.55em;
}

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

.panel__cuerpo { padding: var(--esp-4); }

.panel__pie {
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  background: var(--color-superficie-2);
}
.panel__nota {
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  background: var(--color-superficie-2);
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
}

/* ==========================================================================
   TABLAS
   ========================================================================== */
/* El encabezado de una tabla queda a la vista al bajar por la página.
   Un encabezado pegajoso se pega al primer ancestro que se desplaza, y el
   contenedor con `overflow-x: auto` lo es aunque nunca se corra de costado:
   el encabezado quedaba pegado a una caja quieta y se iba con la página. Por
   eso el script de la base mide cada tabla (`medirTablas`) y elige:

   - La que entra se despliega sin contenedor propio, y su encabezado se pega
     debajo de la barra superior.
   - La que no entra se corre de costado, como siempre, y ahí el encabezado no
     se pega: no hay forma de que una caja se corra de costado y se pegue a la
     página a la vez.
   - Salvo la que se marca `tabla-contenedor--desplazable` —el estado de
     resultados, doce meses en columnas—, que se desplaza adentro de su caja
     con un alto tope. Ahí vale la pena: si no, la barra para correrla de
     costado queda cuarenta renglones más abajo de donde se la necesita. En
     un listado no: la caja se queda con la rueda del mouse, la página no se
     mueve y se ve la mitad de los renglones que entran en pantalla.

   Sin JavaScript queda como estaba: se corre de costado y el encabezado no se
   pega. */
.tabla-contenedor { width: 100%; overflow-x: auto; --tope-tabla: 0px; }
.tabla-contenedor--entra {
  overflow: visible;
  --tope-tabla: var(--alto-barra-superior);
}
.tabla-contenedor--ancha.tabla-contenedor--desplazable {
  overflow: auto;
  max-height: calc(100dvh - var(--alto-barra-superior) - var(--esp-5));
}

/* Todo lo que está en una tabla es dato, así que las cifras van tabulares sin
   necesidad de marcar celda por celda: alcanza con esto para que las columnas
   de importes y fechas queden a plomo. */
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}

/* Se pega el `thead` entero y no cada celda: con la fila de filtros son dos
   renglones, y pegados de a celda los dos irían al mismo tope, uno encima del
   otro. La línea de abajo va como sombra, porque con los bordes colapsados el
   borde es de la tabla y no viaja con el encabezado. */
.tabla thead {
  position: sticky;
  top: var(--tope-tabla, 0px);
  z-index: 2;
}
.tabla thead th {
  padding: var(--esp-2) var(--esp-4);
  background: var(--color-superficie-2);
  box-shadow: inset 0 -1px 0 var(--color-borde);
  color: var(--color-texto-tenue);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

/* Un encabezado largo sobre una columna de importes se parte en dos renglones
   y con letra más chica, en lugar de ensanchar su columna hasta el doble de
   las demás: «Servicios de transporte de cargas» en el detalle de ventas de
   Pergario. La tabla entera va abajo, así los de un renglón quedan alineados
   con la segunda línea de los partidos. El nombre no se abrevia: es el del
   concepto, y abreviado no se lo encuentra en el resto del sistema. */
.tabla--encabezados-partidos thead th { vertical-align: bottom; }
.tabla thead .encabezado-partido {
  display: inline-block;
  max-width: 9rem;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: normal;
  text-wrap: balance;
}

/* Las columnas a gusto de quien mira (`data-columnas`, script de la base).
   El botón va a la derecha de la barra de filtros del panel, así no ocupa un
   renglón propio arriba de la tabla; el borde derecho de cada
   encabezado se arrastra para cambiar el ancho. Con algún ancho elegido la
   tabla pasa a anchos fijos, y lo que no entra se parte en renglones en lugar
   de empujar la columna. */
.tabla-herramientas {
  display: flex;
  justify-content: flex-end;
  padding: var(--esp-2) var(--esp-4);
}
.filtros > .columnas-tabla { margin-left: auto; }
/* El panel se abre con posición fija, ubicado por el script bajo el botón, y
   no hereda la letra de donde viva. */
.columnas-tabla > .exportar__panel {
  position: fixed;
  margin-top: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: var(--color-texto);
}
.tabla thead th { position: relative; }
.tabla__borde {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}
.tabla__borde::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 3px;
  width: 1px;
  height: 50%;
  background: var(--color-borde-fuerte);
}
.tabla__borde:hover::after { width: 2px; background: var(--color-primario); }
.tabla--anchos-fijos { table-layout: fixed; }
.tabla--anchos-fijos th,
.tabla--anchos-fijos td { overflow: hidden; overflow-wrap: anywhere; }
.tabla--anchos-fijos thead th { white-space: normal; }

/* Los subtotales de un libro: paneles debajo del de comprobantes, separados
   como los del contenido. Van en una región propia —se refresca al buscar—,
   y vacía no deja un hueco de más. */
.subtotales-libro {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}
.subtotales-libro:not(:has(.panel)) { display: none; }

/* Encabezados por los que se puede ordenar.
   La flecha se dibuja siempre pero se ve tenue hasta que la columna ordena,
   así se sabe que la columna es clicable sin tener que descubrirlo. */
.tabla thead th.ordenable {
  cursor: pointer;
  user-select: none;
}
.tabla thead th.ordenable:hover { color: var(--color-texto); }
.tabla thead th.ordenable::after {
  content: "↕";
  margin-left: 0.4em;
  opacity: 0.35;
  font-size: 0.9em;
}
.tabla thead th.ordenable[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.tabla thead th.ordenable[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.tabla thead th[aria-sort] { color: var(--color-texto); }

.tabla tbody td {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: none; }

/* Los totales. El pie no tenía margen propio y tomaba el del navegador, de un
   píxel: con los números alineados a la derecha, cada total quedaba quince
   píxeles corrido de su columna. La negrita la pone la fila y no la celda: en
   una tabla, negrita quiere decir total, y una columna entera en negrita se
   leía como tal sin serlo. */
.tabla tfoot td {
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde-fuerte);
  font-weight: var(--peso-semi);
  vertical-align: middle;
}
.tabla tr.fila-total td {
  font-weight: var(--peso-semi);
  border-top: 1px solid var(--color-borde-fuerte);
}
.tabla--compacta tfoot td { padding: var(--esp-2) var(--esp-3); }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: var(--color-superficie-2); }

/* Una fila que se despliega en sus renglones (`data-desplegar`, en la base).
   La flecha gira al abrir, y los renglones van un tono más abajo y con el
   texto más chico: se leen como el detalle de la fila, no como filas nuevas
   del mismo nivel. */
.desplegar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  color: inherit;
  text-decoration: none;
}
.desplegar:hover { color: var(--color-primario-texto); text-decoration: none; }
.desplegar__flecha { transition: transform var(--transicion); }
.desplegar[aria-expanded="true"] .desplegar__flecha { transform: rotate(90deg); }
.desplegar[aria-busy="true"] { cursor: progress; opacity: 0.6; }
.desplegar__flecha--sin { visibility: hidden; }
tr.fila--desplegada,
tr.fila--desplegada td.estado__concepto { background: var(--color-superficie-2); }
tr.fila-desplegada td {
  padding-top: var(--esp-2);
  padding-bottom: var(--esp-2);
  background: var(--color-superficie-2);
  font-size: var(--texto-xs);
}
tr.fila-desplegada td:first-child { padding-left: var(--esp-6); }
/* El mes y su año, y la fecha con el número del comprobante, se leen en una
   línea: partidos, cada renglón ocupa cuatro y un mes de cien facturas no se
   puede recorrer. La contraparte se recorta con su nombre entero a mano. */
.tabla td:has(> .desplegar),
.tabla tbody tr.fila-desplegada td:first-child { white-space: nowrap; }
.fila-desplegada__secundario {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabla--compacta thead th,
.tabla--compacta tbody td { padding: var(--esp-2) var(--esp-3); }
/* El renglón que se eligió para filtrar lo de abajo: se marca con el fondo y
   no con negrita, que en una tabla es de los totales. */
.tabla .fila-elegida td { background: var(--color-primario-suave); }

/* Celdas */
.tabla .celda-numero,
.tabla .celda-fecha {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabla .celda-numero { text-align: right; }
/* Un cero pesa menos que un importe: en una columna de «0,00» lo que importa
   se pierde. Lo marca el script de la base, que mira el texto de la celda. */
.tabla .celda-numero--cero { color: var(--color-texto-tenue); }
/* Una cifra que exige atención —vencidas, saldo en mora— dentro de la tabla */
.tabla .celda-numero--error {
  color: var(--color-error);
  font-weight: var(--peso-semi);
}
.tabla .celda-fecha { color: var(--color-texto-suave); }
.tabla .celda-principal { font-weight: var(--peso-medio); }
.tabla .celda-acciones { text-align: right; white-space: nowrap; width: 1%; }
.tabla .celda-angosta { width: 1%; white-space: nowrap; }

/* Las acciones de la fila se ven siempre.
   Antes aparecían al pasar el mouse, para no ensuciar la lectura, y el costo
   resultó peor que el beneficio: una acción que sólo existe cuando el mouse ya
   está encima no se puede encontrar mirando —hay que sospechar que está—, y
   quien recorre con el teclado o desde una tablet no la ve hasta tocar la fila.
   Lo que baja el ruido es el propio botón, que va con borde tenue y toma color
   recién al apoyarse encima. */
.tabla .acciones-fila {
  display: inline-flex;
  gap: var(--esp-1);
}

/* Vincular un código de un organismo con una fila del catálogo, en la tabla */
.mapeo { display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2); }
.mapeo .campo__control {
  width: auto;
  min-width: 16rem;
  padding: 0.3rem 0.5rem;
  font-size: var(--texto-sm);
}
.mapeo .campo__control--select { padding-right: 1.8rem; }
@media (max-width: 720px) {
  .mapeo { flex-wrap: wrap; }
  .mapeo .campo__control { flex: 1 1 100%; min-width: 0; }
}

/* Identidad del cliente dentro de una fila */
.identidad { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.identidad__texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.identidad__nombre { font-weight: var(--peso-medio); }
.identidad__secundario { font-size: var(--texto-xs); color: var(--color-texto-tenue); }

.avatar-inicial {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radio-sm);
  background: var(--color-primario-suave);
  border: 1px solid var(--color-primario-borde);
  color: var(--color-primario-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
}
.avatar-inicial--redondo { border-radius: 50%; }
.avatar-inicial--grande { width: 46px; height: 46px; font-size: var(--texto-base); }

/* ==========================================================================
   BOTÓN PARA MARCAR UNA TAREA COMO HECHA
   Es la acción más repetida del sistema, así que tiene su propio control:
   grande, de un solo clic y con una respuesta visual clara. Es redondo y
   lleva el tilde a la vista: una caja vacía se confundía con la casilla de
   selección, que es cuadrada y sirve para otra cosa.
   ========================================================================== */
.marcar-hecha {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1.75px solid var(--color-borde-fuerte);
  border-radius: 50%;
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion),
              color var(--transicion);
}
.marcar-hecha .icono { stroke-width: 3; }
.marcar-hecha:hover,
.marcar-hecha:focus-visible {
  border-color: var(--color-exito);
  background: var(--color-exito-suave);
  color: var(--color-exito);
}
.marcar-hecha--hecha {
  border-color: var(--color-exito);
  background: var(--color-exito);
  color: #ffffff;
}
.marcar-hecha--hecha:hover,
.marcar-hecha--hecha:focus-visible {
  background: var(--color-exito-suave);
  color: var(--color-exito);
}
.marcar-hecha--sin-efecto { border-style: dashed; }
.marcar-hecha--sin-efecto .icono { stroke-width: 2; }
.marcar-hecha--sin-efecto:hover,
.marcar-hecha--sin-efecto:focus-visible {
  border-color: var(--color-borde-fuerte);
  background: var(--color-superficie);
  color: var(--color-texto);
}

/* ==========================================================================
   INSIGNIAS DE ESTADO
   ========================================================================== */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radio-full);
  background: var(--color-neutro-suave);
  color: var(--color-neutro);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  line-height: 1.6;
  white-space: nowrap;
}
.insignia::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.insignia--sin-punto::before { display: none; }

.insignia--exito     { background: var(--color-exito-suave);  color: var(--color-exito); }
.insignia--alerta    { background: var(--color-alerta-suave); color: var(--color-alerta); }
.insignia--error     { background: var(--color-error-suave);  color: var(--color-error); }
.insignia--principal { background: var(--color-primario-suave); color: var(--color-primario-texto); }

/* Chip de jurisdicción: nacional / provincial / municipal */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  color: var(--color-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.chip--activo {
  border-color: var(--color-primario-borde);
  background: var(--color-primario-suave);
  color: var(--color-primario-texto);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--esp-1); }

/* El chip como opción que se elige con un clic: el ejercicio, el mes. Un poco
   más grande que el de jurisdicción, porque acá es el control de la pantalla
   y no un rótulo. El apagado es la opción que todavía no existe —un mes que no
   empezó—: se ve, para que la fila no cambie de forma, pero no se aprieta. */
.chip--opcion {
  padding: 0.2rem 0.6rem;
  font-size: var(--texto-sm);
  text-decoration: none;
}
a.chip--opcion:hover { border-color: var(--color-primario-borde); color: var(--color-texto); }
.chip--apagado { opacity: 0.5; border-style: dashed; }

/* Qué se mira, en filas de chips: «Ejercicio [2026] [2025]» y debajo
   «Período [Ejercicio completo] | [Dic 25] [Ene 26] …». */
.selector-periodo { display: flex; flex-direction: column; gap: var(--esp-2); }
.selector-periodo__fila { display: flex; align-items: center; gap: var(--esp-3); }
.selector-periodo__rotulo {
  flex: 0 0 4.5rem;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-suave);
}
.selector-periodo__separador {
  width: 1px;
  align-self: stretch;
  margin: 0 var(--esp-1);
  background: var(--color-borde-fuerte);
}
@media (max-width: 640px) {
  .selector-periodo__fila { flex-direction: column; align-items: flex-start; gap: var(--esp-1); }
  .selector-periodo__rotulo { flex: none; }
}

/* ==========================================================================
   ENCABEZADO DE FICHA
   Bloque de identidad fiscal: es la pieza más característica del sistema.
   El CUIT se muestra grande y monoespaciado, como en un documento.
   ========================================================================== */
.ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-5);
  padding: var(--esp-5);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}
.ficha__identidad { display: flex; gap: var(--esp-4); min-width: 0; }
.ficha__texto { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }
.ficha__nombre {
  font-size: var(--texto-xl);
  font-weight: var(--peso-semi);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ficha__razon { font-size: var(--texto-sm); color: var(--color-texto-tenue); }
.ficha__cuit {
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  letter-spacing: -0.02em;
  color: var(--color-primario-texto);
}
.ficha__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.ficha__meta-item { display: flex; align-items: center; gap: 0.4em; }
.ficha__meta-item .icono { color: var(--color-texto-tenue); }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.formulario { display: flex; flex-direction: column; gap: var(--esp-5); }

/* El armazón (core/formulario.html, maqueta del 04/11/2026): la tarjeta con
   los campos y el costado, que se apila debajo en una pantalla angosta. El
   ancho de la tarjeta lo elige la vista y no se escribe en cada plantilla. */
.formulario-pagina__cuerpo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  align-items: flex-start;
}
.formulario-pagina__tarjeta { flex: 999 1 32rem; min-width: 0; }
.formulario-pagina--medio .formulario-pagina__tarjeta { max-width: var(--ancho-formulario); }
.formulario-pagina--chico .formulario-pagina__tarjeta { max-width: var(--ancho-formulario-chico); }

.formulario-costado {
  flex: 1 1 15rem;
  max-width: 20rem;
  position: sticky;
  top: calc(var(--alto-barra-superior) + var(--esp-4));
}
.formulario-costado__titulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-texto);
}
.formulario-costado__lista {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.formulario-costado__partes { display: flex; flex-direction: column; padding: var(--esp-2); }
.formulario-costado__partes a {
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-sm);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  text-decoration: none;
}
.formulario-costado__partes a:hover { background: var(--color-superficie-2); color: var(--color-primario-texto); }
.formulario-costado__faltan { background: var(--color-superficie-2); }

/* El cartel de errores (componentes/_errores_formulario.html). */
.formulario__errores-lista { margin: var(--esp-1) 0 0; padding-left: 1.1rem; }
.formulario__errores-lista a { color: inherit; font-weight: var(--peso-semi); }
.formulario__antes { margin-bottom: var(--esp-4); }

.formulario__seccion { display: flex; flex-direction: column; gap: var(--esp-4); }
/* Cada parte separada por una raya: el título solo, en minúsculas, ya no
   alcanzaba para ver dónde empieza la siguiente. */
.formulario__seccion + .formulario__seccion {
  padding-top: var(--esp-5);
  border-top: 1px solid var(--color-borde);
}
.formulario__encabezado-seccion { display: flex; flex-direction: column; gap: 0.15rem; }

.formulario__titulo-seccion {
  margin: 0;
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  color: var(--color-texto);
}
.formulario__bajada { margin: 0; font-size: var(--texto-sm); color: var(--color-texto-tenue); }

/* Seis columnas: un campo común ocupa la mitad, uno corto —una fecha, un
   número— un tercio, y un cuadro de texto la fila entera. Así cada campo
   tiene el ancho de lo que lleva y no todos la mitad. */
.formulario__campos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--esp-4);
}
.formulario__campos > .campo { grid-column: span 3; }
.formulario__campos > .campo--corto { grid-column: span 2; }
.formulario__campos > .campo--ancho-completo { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .formulario__campos { grid-template-columns: minmax(0, 1fr); }
  .formulario__campos > .campo,
  .formulario__campos > .campo--corto { grid-column: 1 / -1; }
}

/* Barra de acciones que queda siempre visible al pie del formulario */
.barra-acciones {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  background: var(--color-superficie);
}
/* La del armazón va a todo el ancho, debajo de la tarjeta y el costado, y
   dice a la izquierda qué es obligatorio o cuántas cosas hay que corregir. */
.barra-acciones--pagina {
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--esp-5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}
.barra-acciones__nota { margin-right: auto; font-size: var(--texto-sm); color: var(--color-texto-tenue); }
.barra-acciones__nota--error { color: var(--color-error); font-weight: var(--peso-medio); }

/* --- Campo --- */
.campo { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.campo--ancho-completo { grid-column: 1 / -1; }

.campo__etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-texto-suave);
}
.campo__obligatorio { color: var(--color-error); margin-left: 0.15em; }

.campo__control {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-family: inherit;
  font-size: var(--texto-base);
  line-height: 1.4;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo__control:hover { border-color: var(--color-texto-tenue); }
.campo__control:focus {
  outline: none;
  border-color: var(--color-primario);
  box-shadow: 0 0 0 3px var(--color-primario-suave);
}
.campo__control::placeholder { color: var(--color-texto-tenue); }
/* Un importe se escribe alineado a la derecha, como se lee en las tablas. */
.campo__control--numero { text-align: right; }

.campo__control--area { resize: vertical; min-height: 4.5rem; line-height: var(--interlineado-base); }
/* Un control adentro de una fila de tabla. Más bajo que uno de formulario:
   con la altura normal, la fila que lo lleva crece el doble que las demás y
   la tabla deja de leerse de un vistazo. */
.campo__control--chico { padding: 0.25rem 0.4rem; font-size: var(--texto-sm); }

.campo__control--select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.7rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Los campos de CUIT y fechas usan la tipografía de datos */
input[name*="cuit"].campo__control,
input[name*="cuil"].campo__control,
input[type="date"].campo__control,
input[data-dia-y-mes].campo__control,
input[name*="numero"].campo__control {
  font-variant-numeric: tabular-nums;
}

.campo--check { flex-direction: row; align-items: center; gap: var(--esp-2); }

/* Una casilla con explicación: una tarjeta que se tilda entera, y en azul
   cuando está marcada (maqueta del 04/11/2026). */
.campo--tarjeta {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  cursor: pointer;
}
.campo--tarjeta:hover { border-color: var(--color-borde-fuerte); }
.campo--tarjeta:has(.campo__check:checked) {
  background: var(--color-primario-suave);
  border-color: var(--color-primario-borde);
}
.campo--tarjeta:focus-within { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.campo--tarjeta .campo__check { flex: none; margin-top: 0.15rem; }
.campo--tarjeta__texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.campo--tarjeta__titulo { font-weight: var(--peso-semi); color: var(--color-texto); }
.campo--tarjeta:has(.campo__check:checked) .campo--tarjeta__titulo { color: var(--color-primario-texto); }

/* Una elección de tres opciones o menos, en botones a la vista. */
.campo--segmentado { border: 0; margin: 0; padding: 0; min-width: 0; }
.campo--segmentado > legend { padding: 0; margin-bottom: 0.2rem; }
.segmentado {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--color-superficie);
}
.segmentado__opcion {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem var(--esp-4);
  cursor: pointer;
  font-size: var(--texto-base);
}
.segmentado__opcion + .segmentado__opcion { border-left: 1px solid var(--color-borde); }
.segmentado__opcion input { margin: 0; accent-color: var(--color-primario); }
.segmentado__opcion:has(input:checked) {
  background: var(--color-primario-suave);
  color: var(--color-primario-texto);
  font-weight: var(--peso-semi);
}
.segmentado__opcion:focus-within { outline: 2px solid var(--color-primario); outline-offset: -2px; }
.campo__check {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-primario);
  flex: none;
  cursor: pointer;
}
.campo--check .campo__etiqueta { cursor: pointer; color: var(--color-texto); }

/* Una casilla de formulario: la casilla y su rótulo en una fila, y debajo, en
   el mismo campo, la ayuda y el error (componentes/_campo.html). */
.campo__casilla { display: flex; align-items: center; gap: var(--esp-2); }
.campo__casilla .campo__etiqueta { cursor: pointer; color: var(--color-texto); }

.campo__ayuda { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.campo__error {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--color-error);
}
.campo--con-error .campo__control { border-color: var(--color-error); }
.campo--con-error .campo__control:focus { box-shadow: 0 0 0 3px var(--color-error-suave); }

/* ==========================================================================
   BUSCADOR
   ========================================================================== */
.buscador { position: relative; display: flex; align-items: center; }
.buscador .icono {
  position: absolute;
  left: 0.6rem;
  color: var(--color-texto-tenue);
  pointer-events: none;
}
.buscador .campo__control { padding-left: 2rem; }
/* Dibuja la tecla del atajo: acá la monoespaciada sí corresponde, porque
   representa una tecla y no un dato. */
.buscador__atajo {
  position: absolute;
  right: 0.5rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
  pointer-events: none;
}

/* Indicador de búsqueda en curso */
.htmx-indicator { opacity: 0; transition: opacity var(--transicion); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ==========================================================================
   AVISOS FLOTANTES
   ========================================================================== */
.avisos {
  position: fixed;
  top: calc(var(--alto-barra-superior) + var(--esp-3));
  right: var(--esp-5);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  max-width: 380px;
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  box-shadow: var(--sombra-lg);
  font-size: var(--texto-sm);
  color: var(--color-texto);
  animation: aviso-entra 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.aviso .icono { margin-top: 0.15em; }
.aviso__texto { flex: 1; }
.aviso__cerrar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -0.1rem -0.35rem 0 0;
  padding: 0;
  border: none;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--color-texto-tenue);
  cursor: pointer;
}
.aviso__cerrar:hover { background: var(--color-superficie-2); color: var(--color-texto); }
.aviso__cerrar .icono { margin-top: 0; }
.aviso--saliendo { opacity: 0; transform: translateX(12px); transition: all 220ms ease; }

.aviso--exito  { border-left: 3px solid var(--color-exito); }
.aviso--exito .icono { color: var(--color-exito); }
.aviso--alerta { border-left: 3px solid var(--color-alerta); }
.aviso--alerta .icono { color: var(--color-alerta); }
.aviso--error  { border-left: 3px solid var(--color-error); }
.aviso--error .icono { color: var(--color-error); }
.aviso--info   { border-left: 3px solid var(--color-primario); }
.aviso--info .icono { color: var(--color-primario); }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Avisos dentro del contenido (errores de formulario) */
.aviso-fijo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  background: var(--color-error-suave);
  color: var(--color-error);
}
.aviso-fijo--alerta { background: var(--color-alerta-suave); color: var(--color-alerta); }
/* Una nota que acompaña a la pantalla: fija como las otras, sin color de
   estado. */
.aviso-fijo--info { background: var(--color-primario-suave); color: var(--color-primario-texto); }

/* ==========================================================================
   LISTA DE DATOS
   ========================================================================== */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--esp-4) var(--esp-5);
  margin: 0;
}
.dato { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.dato__etiqueta {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.dato__valor { color: var(--color-texto); overflow-wrap: anywhere; }
.dato__valor--vacio { color: var(--color-texto-tenue); }
.dato__valor--numero {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   INDICADORES
   ========================================================================== */
.indicador {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}
.indicador__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}
.indicador__etiqueta {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.indicador__encabezado .icono { color: var(--color-texto-tenue); }
.indicador__valor {
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-2xl);
  font-weight: var(--peso-semi);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.indicador__valor--pendiente { color: var(--color-texto-tenue); }
/* El número toma el color del estado cuando hay algo que atender. Va acá y no
   en un style suelto en la plantilla, que era como estaba: si mañana cambia
   el rojo, cambia en un solo lugar. */
.indicador__valor--error  { color: var(--color-error); }
.indicador__valor--alerta { color: var(--color-alerta); }
.indicador__detalle { font-size: var(--texto-sm); color: var(--color-texto-suave); }

/* Cuando el indicador es un filtro y está aplicado */
a.indicador { text-decoration: none; transition: border-color var(--transicion), box-shadow var(--transicion); }
a.indicador:hover { border-color: var(--color-primario-borde); box-shadow: var(--sombra); }
.indicador--activo {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario);
}

/* ==========================================================================
   DISTRIBUCIÓN
   Cuánto pesa cada grupo dentro de un total. La barra es para comparar de un
   vistazo; el número al lado es el dato exacto.
   ========================================================================== */
.distribucion { display: flex; flex-direction: column; gap: var(--esp-2); }

.distribucion__fila {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) 3fr auto auto;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-2);
  border-radius: var(--radio-sm);
  color: inherit;
  text-decoration: none;
  transition: background var(--transicion);
}
.distribucion__fila:hover { background: var(--color-superficie-2); text-decoration: none; }
.distribucion__fila--activa { background: var(--color-primario-suave); }

.distribucion__etiqueta {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.distribucion__barra {
  height: 8px;
  border-radius: var(--radio-full);
  background: var(--color-superficie-3);
  overflow: hidden;
}
.distribucion__relleno {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: var(--radio-full);
  background: var(--color-primario);
}
.distribucion__fila--activa .distribucion__relleno { background: var(--color-primario-fuerte); }

.distribucion__cantidad {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  text-align: right;
  min-width: 3ch;
}
.distribucion__porcentaje {
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
  text-align: right;
  min-width: 4ch;
}

@media (max-width: 700px) {
  .distribucion__fila { grid-template-columns: 1fr auto auto; }
  .distribucion__barra { display: none; }
}

/* ==========================================================================
   ESTADO VACÍO
   ========================================================================== */
.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-7) var(--esp-4);
  text-align: center;
}
.vacio .icono--vacio { color: var(--color-borde-fuerte); }
.vacio__titulo {
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
}
.vacio__texto {
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
  max-width: 48ch;
  margin: -0.4rem 0 0;
}

/* ==========================================================================
   VISOR DE DOCUMENTOS
   Un PDF, una imagen o un texto adentro de la pantalla. El alto lo da la
   ventana y no el contenido: un contrato de veinte hojas se recorre adentro
   del visor, con la barra del sistema a la vista.
   ========================================================================== */
.visor {
  display: flex;
  justify-content: center;
  background: var(--color-fondo);
  border-radius: var(--radio);
  overflow: clip;
}
.visor__marco {
  width: 100%;
  height: calc(100vh - 14rem);
  min-height: 28rem;
  border: 0;
  background: #fff;
}
.visor__imagen {
  max-width: 100%;
  max-height: calc(100vh - 14rem);
  object-fit: contain;
}

/* ==========================================================================
   PAGINACIÓN
   ========================================================================== */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.paginacion__controles { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
/* Los números van entre «Anterior» y «Siguiente», con ancho mínimo parejo para
   que la fila no baile al pasar de la 9 a la 10. */
.paginacion__paginas { display: flex; align-items: center; gap: var(--esp-1); }
.paginacion__pagina { min-width: 2rem; justify-content: center; }
.paginacion__salto { padding: 0 0.2rem; color: var(--color-texto-tenue); }
@media (max-width: 620px) {
  .paginacion { flex-wrap: wrap; }
}

/* ==========================================================================
   FILTROS
   ========================================================================== */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
}
.filtros__campo { min-width: 150px; }
.filtros__campo--ancho { flex: 1 1 300px; }

/* ==========================================================================
   NAVEGACIÓN DE SECCIONES DENTRO DE UNA FICHA
   ========================================================================== */
.secciones {
  position: sticky;
  top: var(--alto-barra-superior);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  padding: var(--esp-2) 0;
  margin-bottom: calc(var(--esp-1) * -1);
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
}
.secciones__item {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radio-sm);
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.secciones__item .icono { color: var(--color-texto-tenue); }
.secciones__item:hover {
  background: var(--color-superficie-2);
  color: var(--color-texto);
  text-decoration: none;
}
.secciones__item--activa {
  background: var(--color-primario-suave);
  color: var(--color-primario-texto);
}
.secciones__item--activa .icono { color: var(--color-primario-texto); }

/* Deja aire al saltar a una sección, para que no quede tapada */
[id] { scroll-margin-top: calc(var(--alto-barra-superior) + 60px); }

html { scroll-behavior: smooth; }

/* ==========================================================================
   GRÁFICO DE COLUMNAS
   La evolución de un importe mes a mes. Es para ver la forma —si sube, si
   cae, si un mes se sale de la serie—; el número exacto está en la tabla
   de al lado, que es la que se lee cuando hace falta el dato.
   ========================================================================== */
.grafico {
  display: flex;
  align-items: flex-end;
  gap: var(--esp-2);
  min-height: 180px;
  padding: var(--esp-4) 0 0;
  overflow-x: auto;
}
.grafico__mes {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  min-width: 34px;
}
.grafico__barras {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  height: 140px;
}
.grafico__barra {
  flex: 1 1 0;
  min-height: 2px;
  border-radius: var(--radio-sm) var(--radio-sm) 0 0;
  background: var(--color-superficie-3);
}
.grafico__barra--ingresos { background: var(--color-primario); }
.grafico__barra--gastos { background: var(--color-alerta); }
.grafico__barra--sin-datos { background: var(--color-superficie-3); }
.grafico__etiqueta {
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
  white-space: nowrap;
}

.grafico-referencias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  padding-top: var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}
.grafico-referencias__item { display: flex; align-items: center; gap: var(--esp-2); }
.grafico-referencias__marca {
  width: 12px;
  height: 12px;
  border-radius: var(--radio-sm);
  background: var(--color-superficie-3);
}
.grafico-referencias__marca--ingresos { background: var(--color-primario); }
.grafico-referencias__marca--gastos { background: var(--color-alerta); }
/* Una segunda serie que no es un gasto: el ámbar es de estado, y «los demás
   trabajos» no avisan nada. Va en un color de serie. */
.grafico__barra--serie,
.grafico-referencias__marca--serie { background: var(--serie-3); }

/* Una línea de referencia a lo ancho —un tope, un ritmo—. Se dibuja un tramo
   por columna, a la misma altura, y los tramos se tocan por encima del hueco:
   así queda alineada con la base de las columnas sin medir nada. */
.grafico__barras { position: relative; }
.grafico__referencia {
  position: absolute;
  left: calc(var(--esp-2) / -2);
  right: calc(var(--esp-2) / -2);
  border-top: 2px dashed var(--color-alerta);
  pointer-events: none;
}
/* En medio ancho: las columnas se angostan en lugar de desplazarse. */
.grafico--compacto { gap: var(--esp-1); overflow-x: visible; }
.grafico--compacto .grafico__mes { min-width: 0; }
.grafico--compacto .grafico__referencia {
  left: calc(var(--esp-1) / -2);
  right: calc(var(--esp-1) / -2);
}
.grafico-referencias__marca--referencia {
  height: 0;
  border-top: 2px dashed var(--color-alerta);
  background: none;
  border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Qué falta este mes
   Un renglón por pregunta: el número, qué significa y a dónde ir. El color
   sólo marca estado, como en todo el sistema.
   --------------------------------------------------------------------------- */
.que-falta {
  display: flex;
  flex-direction: column;
}

.que-falta__fila {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  color: inherit;
  text-decoration: none;
  transition: background-color .12s ease;
}

.que-falta__fila:first-child { border-top: none; }
.que-falta__fila:hover { background: var(--color-superficie-2); }

.que-falta__icono {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radio-sm);
  background: var(--color-superficie-2);
  color: var(--color-texto-suave);
  flex: none;
}

.que-falta__texto { display: flex; flex-direction: column; min-width: 0; }
.que-falta__titulo { font-weight: var(--peso-medio); }
.que-falta__detalle {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.que-falta__cantidad {
  font-size: var(--texto-xl);
  font-weight: var(--peso-semi);
  min-width: 2ch;
  text-align: right;
}

.que-falta__accion {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
  white-space: nowrap;
}

/* El estado sólo cambia el ícono y el número: el renglón no se pinta entero,
   que a cuatro filas seguidas lo volvería un semáforo. */
.que-falta__fila--alerta .que-falta__icono {
  background: var(--color-alerta-suave);
  color: var(--color-alerta);
}
.que-falta__fila--alerta .que-falta__cantidad { color: var(--color-alerta); }

.que-falta__fila--listo .que-falta__icono {
  background: var(--color-exito-suave);
  color: var(--color-exito);
}
.que-falta__fila--listo .que-falta__cantidad { color: var(--color-exito); }

@media (max-width: 40rem) {
  .que-falta__fila { grid-template-columns: auto 1fr auto; }
  .que-falta__accion { display: none; }
}

/* ==========================================================================
   ORDENAR UNA COLUMNA DESDE EL SERVIDOR
   El encabezado es un enlace, no un `th` con JavaScript: la tabla está
   paginada, y ordenar sólo lo que está en pantalla acomoda los veinticinco
   de la página y deja al primero de la lista en la página tres.
   ========================================================================== */
.orden {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: inherit;
  text-decoration: none;
}
.orden:hover { color: var(--color-texto); }
.orden__flecha {
  width: 0.85em;
  height: 0.85em;
  opacity: 0.35;
  transition: opacity var(--transicion);
}
.orden:hover .orden__flecha { opacity: 0.7; }
.orden--activo { color: var(--color-texto); }
.orden--activo .orden__flecha { opacity: 1; color: var(--color-primario); }

/* ==========================================================================
   SELECCIONAR FILAS PARA UNA ACCIÓN SOBRE VARIAS
   ========================================================================== */
.tabla .celda-seleccion {
  width: 1%;
  padding-right: 0;
  text-align: center;
  white-space: nowrap;
}
/* La casilla del encabezado hereda las mayúsculas del `th` y no debe */
.tabla thead .celda-seleccion { text-transform: none; }

.acciones-masivas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 var(--esp-4) var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--color-primario-borde);
  border-radius: var(--radio-sm);
  background: var(--color-primario-suave);
}
/* Lo esconde la regla general de `[hidden]`, en la hoja base. */
.acciones-masivas__conteo {
  margin-right: auto;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--color-primario-texto);
}

/* ==========================================================================
   EXPORTAR
   Un solo botón que abre el formato y las columnas. Es un `<details>`, así
   que elegir y descargar sigue funcionando sin JavaScript.
   ========================================================================== */
.exportar { position: relative; }
.exportar > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.exportar > summary::-webkit-details-marker { display: none; }

.exportar__panel {
  position: absolute;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  min-width: 17rem;
  max-width: min(26rem, 90vw);
  margin-top: var(--esp-1);
  padding: var(--esp-4);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra);
  text-align: left;
}

.exportar__columnas { border: none; margin: 0; padding: 0; }
.exportar__titulo {
  padding: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.exportar__lista {
  display: grid;
  gap: 0.15rem;
  max-height: 15rem;
  margin-top: var(--esp-2);
  overflow-y: auto;
}
.exportar__lista .campo--check { cursor: pointer; }
.exportar__nota {
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
}
.exportar__acciones {
  display: flex;
  gap: var(--esp-2);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--color-borde);
}
.exportar__acciones .boton { flex: 1; justify-content: center; }

/* ==========================================================================
   GRUPO DE CASILLAS DENTRO DE UN FORMULARIO
   ========================================================================== */
.casillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.2rem var(--esp-4);
  margin-top: 0.2rem;
}
.casillas .campo--check { cursor: pointer; }
.casillas .campo__etiqueta { cursor: pointer; color: var(--color-texto); }

/* Buscador del grupo de casillas. Aparece cuando la lista es larga: filtra lo
   que se ve sin destildar nada, y el conteo de al lado dice cuántas quedan
   elegidas —incluidas las que el filtro tapó, que es lo que evita creer que
   se destildaron—. */
.casillas__barra {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: 0.35rem;
}
.casillas__barra .buscador { flex: 1 1 18rem; max-width: 26rem; }
.casillas__conteo {
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
  white-space: nowrap;
}
.casillas__sin-resultados {
  margin: var(--esp-2) 0 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
}

/* ==========================================================================
   FUENTES DE UNA IMPORTACIÓN
   ==========================================================================
   Las dos maneras de traer clientes —el padrón de ARCA y una planilla— viven
   en la misma pantalla, cada una en un <details>. Sin JavaScript: la que se
   usó vuelve abierta, porque el servidor la marca. */
.fuentes { display: flex; flex-direction: column; gap: var(--esp-4); }
.fuente > summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  list-style: none;
}
.fuente > summary::-webkit-details-marker { display: none; }
.fuente > summary:hover .panel__titulo { color: var(--color-primario); }
.fuente[open] > summary { border-bottom: 1px solid var(--color-borde); }

/* La flecha dice que el bloque se abre y se cierra. Sin ella el título parece
   un encabezado más y hay que descubrir que es clicable. */
.fuente > summary .panel__titulo::after {
  content: "›";
  margin-left: 0.4em;
  color: var(--color-texto-tenue);
  display: inline-block;
  transition: transform var(--transicion);
}
.fuente[open] > summary .panel__titulo::after { transform: rotate(90deg); }

/* ==========================================================================
   PERSONAS DE CONTACTO DENTRO DE LA FICHA DEL CLIENTE
   ==========================================================================
   Son cinco datos por persona y varias personas: en columnas se leen de un
   vistazo y el rótulo se escribe una sola vez, arriba. En pantalla angosta
   las columnas se apilan y cada campo se explica con su marcador de posición,
   que es el que reemplaza al rótulo. */
.contactos { display: flex; flex-direction: column; gap: var(--esp-2); }

.contactos__encabezado,
.contactos__fila {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr 1.4fr auto auto;
  gap: var(--esp-2);
  align-items: center;
}
.contactos__encabezado {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.contactos__campo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* Quitar es un ícono que envuelve la casilla de borrar, escondida: así se
   aprieta como un botón y sigue andando sin JavaScript. Marcado, el renglón
   queda tachado hasta guardar. */
.contactos__quitar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  color: var(--color-texto-tenue);
  cursor: pointer;
}
.contactos__quitar:hover,
.contactos__quitar:has(input:focus-visible) {
  color: var(--color-error);
  border-color: var(--color-error);
}
.contactos__quitar:has(input:focus-visible) { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.contactos__quitar input,
.contactos__quitar-texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.contactos__fila:has(.contactos__quitar input:checked) .contactos__campo:not(.contactos__campo--quitar) {
  opacity: 0.45;
  text-decoration: line-through;
}
.contactos__quitar:has(input:checked) {
  color: var(--color-error);
  border-color: var(--color-error);
  background: var(--color-error-suave);
}

.contactos__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
}

@media (max-width: 980px) {
  .contactos__encabezado { display: none; }
  .contactos__fila {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--esp-3);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-sm);
  }
}

/* ==========================================================================
   BUSCADOR DEL NOMENCLADOR DE ACTIVIDADES
   ==========================================================================
   Se escribe parte de la actividad —o el código— y aparece la lista para
   elegir. El código va adelante y en cifras tabulares porque es por lo que se
   confirma que se eligió la correcta; la descripción, que puede ser un párrafo
   entero, se recorta a dos renglones. */
.actividad { position: relative; }

.actividad__lista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 19rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.actividad__opcion {
  display: flex;
  gap: var(--esp-3);
  align-items: baseline;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: var(--texto-sm);
}
.actividad__opcion:hover,
.actividad__opcion--elegida { background: var(--color-superficie-2); }

.actividad__codigo {
  flex: 0 0 auto;
  color: var(--color-texto-tenue);
  font-variant-numeric: tabular-nums;
}
.actividad__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.actividad__vacio {
  padding: 0.5rem;
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
}

/* Sub-bloques dentro de una ficha. Los datos generales del cliente eran diez
   etiquetas al mismo nivel —la condición fiscal, la calle y el teléfono— y
   para encontrar una había que leer las diez. Con un título por bloque se va
   directo al que interesa. */
.datos__titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primario);
}
.datos + .datos__titulo,
.separador + .datos__titulo { margin-top: var(--esp-4); }
.datos + .etiqueta { display: block; margin-top: var(--esp-4); }

/* Un dato largo —la actividad, la calle— ocupa dos columnas en lugar de
   cortarse en tres renglones al lado de un código postal. */
.dato--ancho { grid-column: span 2; }
@media (max-width: 620px) { .dato--ancho { grid-column: span 1; } }

/* El código de actividad va adelante de su descripción, tenue y tabular: es
   con lo que se confirma, no lo que se lee. */
.dato__codigo {
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-tenue);
  margin-right: 0.35rem;
}

/* ==========================================================================
   TORTA
   Cuánto pesa cada rubro dentro de un total. Contesta lo mismo que la barra
   de `.distribucion` —de hecho van juntas: la torta da la proporción de un
   vistazo y la lista de al lado da el número— pero una torta se lee de golpe:
   «casi la mitad se va en un solo proveedor» no hace falta leerlo, se ve.

   El dibujo viene armado del servidor: cada porción trae su largo y su
   corrimiento ya calculados. Sin JavaScript la torta sale igual y completa;
   lo que agrega el script es apoyarse encima y ver el detalle en el centro.
   ========================================================================== */
.torta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-5);
}

.torta__dibujo {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
}

.torta__svg { width: 100%; height: 100%; transform: rotate(-90deg); }

/* El agujero del medio no es adorno: ahí va el total, y al apoyarse en una
   porción, el nombre y el importe de esa porción. Un rótulo dentro de una
   porción chica no entra; en el centro entra siempre. */
.torta__centro {
  position: absolute;
  inset: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}
.torta__centro-etiqueta {
  font-size: var(--texto-xs);
  line-height: 1.15;
  color: var(--color-texto-tenue);
  overflow-wrap: anywhere;
}
.torta__centro-valor {
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  color: var(--color-texto);
}

.torta__porcion {
  fill: none;
  stroke-width: 7;
  cursor: default;
  transition: stroke-width var(--transicion), opacity var(--transicion);
}
/* Al apoyarse en una, las demás se corren atrás. Bajar las otras en lugar de
   subir la elegida evita que la porción crezca sobre sus vecinas y parezca
   más grande de lo que es. */
.torta--apuntando .torta__porcion { opacity: 0.35; }
.torta--apuntando .torta__porcion--activa { opacity: 1; stroke-width: 8.5; }

/* El tope de ancho no es decorativo: sin él, en una pantalla ancha —o con el
   menú plegado— la columna del nombre se estira y deja el importe a treinta
   centímetros de su rótulo, que es justo lo que una referencia no puede
   hacer. */
.torta__referencias {
  flex: 1 1 260px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.torta__referencia {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-2);
  border-radius: var(--radio-sm);
  font-size: var(--texto-sm);
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: default;
}
.torta__referencia:hover,
.torta__referencia--activa { background: var(--color-superficie-2); }
.torta__marca {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.torta__nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-texto-suave);
}
.torta__importe { font-variant-numeric: tabular-nums; }
.torta__porcentaje {
  min-width: 4.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-tenue);
}

/* La torta que es lo principal de su panel —el abono de Honorarios—: el
   dibujo más grande y la referencia angosta, pegada a sus importes. Con el
   ancho de siempre quedaba un círculo chico y una referencia estirada con el
   importe lejos de su nombre. */
.torta--grande { justify-content: center; gap: var(--esp-6); }
.torta--grande .torta__dibujo { width: 300px; height: 300px; }
.torta--grande .torta__centro-valor { font-size: var(--texto-lg); }
.torta--grande .torta__referencias { flex: 0 1 520px; }
/* Y el nombre entero, en dos renglones si hace falta: la razón social es la
   que dice quién es, y cortada con puntos suspensivos no se lee. */
.torta--grande .torta__nombre { white-space: normal; overflow-wrap: anywhere; }

/* Cuando la lista no entra al costado y va debajo, el dibujo se centra (a
   pedido del titular, 02/11/2026): a la izquierda, con todo el ancho libre a
   su derecha, parecía corrido. Con lugar al costado sigue a la izquierda. Se
   decide por el ancho de la torta y no de la pantalla, porque la misma torta
   va en un costado angosto o en un panel ancho. Los umbrales son el dibujo,
   el espacio y el mínimo de la lista. */
.torta { container: torta / inline-size; }
@container torta (max-width: 31rem) {
  .torta__dibujo { margin-inline: auto; width: 230px; height: 230px; }
  .torta__referencias { flex-basis: 100%; max-width: none; }
}
@container torta (max-width: 36rem) {
  .composicion .torta--grande .torta__dibujo { margin-inline: auto; }
  .composicion .torta--grande .torta__referencias { flex-basis: 100%; max-width: none; }
}

.torta__nota {
  flex: 1 1 100%;
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
}

@media (max-width: 620px) {
  .torta { justify-content: center; }
  .torta__referencia { grid-template-columns: 12px 1fr auto; }
  .torta__porcentaje { display: none; }
}

/* Los ocho colores de serie, uno por clase, para poder pintar a la vez la
   porción del SVG y su marca en la referencia. */
.serie-1 { stroke: var(--serie-1); background-color: var(--serie-1); }
.serie-2 { stroke: var(--serie-2); background-color: var(--serie-2); }
.serie-3 { stroke: var(--serie-3); background-color: var(--serie-3); }
.serie-4 { stroke: var(--serie-4); background-color: var(--serie-4); }
.serie-5 { stroke: var(--serie-5); background-color: var(--serie-5); }
.serie-6 { stroke: var(--serie-6); background-color: var(--serie-6); }
.serie-7 { stroke: var(--serie-7); background-color: var(--serie-7); }
.serie-8 { stroke: var(--serie-8); background-color: var(--serie-8); }
/* «Otros» no es un rubro sino lo que quedó afuera del recorte, y por eso va
   en el neutro: con uno de los ocho se leería como una categoría más. */
.serie-otros { stroke: var(--color-neutro); background-color: var(--color-neutro); }

/* ==========================================================================
   ESTADO DE RESULTADOS
   Las filas son los conceptos y las columnas los meses. Se lee buscando un
   rubro y siguiéndolo con el dedo hacia la derecha, así que lo que tiene que
   quedar quieto es la primera columna.
   ========================================================================== */
/* `separate` y no `collapse`: con los bordes colapsados, una celda pegajosa
   pierde su borde —los bordes pasan a ser de la tabla y no de la celda— y las
   columnas que se corren por debajo asoman por la juntura. Con `separate` cada
   celda conserva el suyo, y por eso el separador de la columna del total va
   como borde de la celda y no de la tabla. */
.estado {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--texto-sm);
}

.estado th,
.estado td {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}

.estado thead th {
  position: sticky;
  top: var(--tope-tabla, 0px);
  z-index: 2;
  background: var(--color-superficie);
  text-align: right;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}

/* La columna del concepto se queda quieta mientras se corren los meses: sin
   esto, al llegar a noviembre ya no se sabe qué renglón se está mirando. */
.estado__concepto {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-superficie);
  /* La línea que la separa de los meses va como sombra y no como borde: un
     borde de una celda pegajosa se corre con el resto de la tabla. */
  box-shadow: 1px 0 0 var(--color-borde);
  text-align: left;
  white-space: normal;
  min-width: 15rem;
  width: 15rem;
}
.estado thead .estado__concepto { z-index: 3; }
.estado__seccion .estado__concepto { background: var(--color-superficie); }

.estado__numero { text-align: right; font-variant-numeric: tabular-nums; }

/* La columna del total va separada del resto: no es un mes más. */
.estado__total,
.estado thead .estado__total {
  border-left: 2px solid var(--color-borde-fuerte);
  font-weight: var(--peso-semi);
  color: var(--color-texto);
}

.estado__seccion td {
  padding-top: var(--esp-4);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primario);
  background: var(--color-superficie);
}

.estado__fila--subtotal td { font-weight: var(--peso-semi); }
.estado__fila--resultado td {
  font-weight: var(--peso-semi);
  border-top: 1px solid var(--color-borde-fuerte);
}
.estado__fila--ratio td,
.estado__fila--acumulado td { color: var(--color-texto-suave); }

/* La nota de la sección se lee de corrido, así que no se corta ni queda
   presa de la primera columna. */
.estado__fila--nota td { white-space: normal; }

.estado__detalle {
  display: block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  color: var(--color-texto-tenue);
  white-space: normal;
}

.estado__incidencia {
  border-left: 1px dashed var(--color-borde);
  color: var(--color-texto-tenue);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Un importe negativo se marca con el color de error porque eso ES un estado:
   el resultado del mes dio pérdida. */
.estado .negativo { color: var(--color-error); }

/* Los totales van en franjas, como en un estado contable: el subtotal de cada
   bloque en el tono suave, los resultados intermedios un poco más marcados y
   el resultado del período en la franja llena, que es el número que se busca.
   La celda del concepto es pegajosa y tiene su propio fondo: hay que pintarla
   también, o la franja queda cortada. */
.estado__fila--subtotal td,
.estado__fila--subtotal td.estado__concepto {
  background: var(--color-superficie-2);
}
.estado__fila--resultado td,
.estado__fila--resultado td.estado__concepto {
  background: var(--color-primario-suave);
  color: var(--color-primario-texto);
}
.estado__fila--final td,
.estado__fila--final td.estado__concepto {
  background: var(--color-primario);
  color: var(--color-texto-invertido);
  font-weight: var(--peso-fuerte);
  border-top: 0;
}
/* Sobre la franja llena el rojo no se lee: la pérdida la dicen los
   paréntesis. */
/* La aclaración que lleva a otra pantalla —el papel de Ganancias— se lee
   como enlace. */
a.estado__detalle { color: var(--color-primario); text-decoration: underline; }

.estado__fila--final .negativo,
.estado__fila--final .texto-tenue,
.estado__fila--final .estado__detalle,
.estado__fila--final td.estado__incidencia { color: var(--color-texto-invertido); }

/* Un bloque plegado deja a la vista sus totales y su margen: el detalle, la
   nota y lo abierto en contrapartes se esconden. */
.estado__bloque--plegado tr.estado__fila:not(.estado__fila--subtotal):not(.estado__fila--resultado):not(.estado__fila--ratio):not(.estado__fila--acumulado),
.estado__bloque--plegado tr.estado__fila--nota,
.estado__bloque--plegado tr.fila-desplegada { display: none; }

.estado__plegar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.estado__plegar[hidden] { display: none; }
.estado__plegar-flecha {
  width: 0.9rem;
  height: 0.9rem;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.estado__plegar[aria-expanded="false"] .estado__plegar-flecha { transform: rotate(0deg); }

/* La vista del ejercicio es una columna: estirada a todo el ancho, el importe
   queda a un palmo del concepto que lo nombra. Se lee como un estado contable,
   angosto, con el concepto que se lleva el lugar que necesita. */
.estado--ejercicio { max-width: 52rem; }
/* En la vista del ejercicio el cuadro tiene un tope de ancho —con el importe a
   treinta centímetros del rubro no se lee— y lo que sobra a la derecha lo usan
   las tortas, que son de qué está hecho ese mismo cuadro. En una pantalla
   angosta van debajo. */
.estado-con-costado {
  display: grid;
  grid-template-columns: minmax(0, 54rem) minmax(22rem, 1fr);
  gap: var(--esp-4);
  align-items: start;
}
/* En una columna angosta el título al lado de la descripción se parte en tres
   renglones: va arriba de ella. */
.estado-con-costado .panel__encabezado--apilado {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-1);
}
@media (max-width: 1200px) {
  .estado-con-costado { grid-template-columns: minmax(0, 1fr); }
}
.estado--ejercicio .estado__concepto { white-space: normal; }
.estado--ejercicio thead .estado__concepto { text-align: left; }
.estado--ejercicio .estado__numero { width: 1%; min-width: 8rem; padding-left: var(--esp-5); }

/* ---------------------------------------------------------------------------
   La marca de observación
   Un mes sin movimientos y uno con el impuesto tomado por el mínimo se ven
   iguales en la tabla: un número y nada más. La marca es lo que los distingue,
   y el globo dice qué pasa.
   --------------------------------------------------------------------------- */
.marca-observacion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.25rem;
  border-radius: var(--radio-full);
  vertical-align: -0.2em;
  color: var(--color-texto-tenue);
  background: var(--color-neutro-suave);
  cursor: help;
}
.marca-observacion .icono { width: 12px; height: 12px; }
.marca-observacion--atencion {
  color: var(--color-alerta);
  background: var(--color-alerta-suave);
}
.marca-observacion:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 1px;
}

/* ==========================================================================
   VARIAS ACTIVIDADES, UNA POR RENGLÓN
   ==========================================================================
   Las secundarias del cliente son actividades del mismo nomenclador que la
   principal, así que se cargan igual: un renglón cada una, con su buscador.
   Eran un cuadro de texto libre, escritas a mano y sin código. */
.lista-actividades {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-top: 0.2rem;
}
.lista-actividades__fila { position: relative; }
.lista-actividades [data-agregar-actividad] { align-self: flex-start; }

/* ==========================================================================
   MATRIZ DE IMPUESTOS POR CLIENTE
   Clientes en filas, impuestos en columnas, una casilla en el cruce.
   ========================================================================== */

/* Los rótulos de los impuestos van escritos de abajo hacia arriba. Son catorce
   columnas de una casilla cada una: escritos en horizontal, cada columna
   mediría lo que mide su nombre —«Tasa municipal (DReI / comercio e
   industria)»— y el cuadro no entraría ni con el menú plegado. */
.matriz__impuesto {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 11rem;
  padding: var(--esp-2) var(--esp-1) !important;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}
.matriz__impuesto > span { display: block; max-height: 10.5rem; overflow: hidden; }

/* La columna del cliente se queda quieta mientras se corren los impuestos.
   Es lo mismo que hace el estado de resultados con la columna del concepto, y
   por el mismo motivo: en la columna doce, sin esto, no se sabe de quién es el
   renglón. La línea que la separa va como sombra y no como borde, porque un
   borde de una celda pegajosa se corre con el resto de la tabla. */
.matriz__cliente {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-superficie);
  box-shadow: 1px 0 0 var(--color-borde);
  text-align: left;
  font-weight: var(--peso-medio);
  min-width: 16rem;
  width: 16rem;
}
.matriz thead .matriz__cliente { z-index: 3; background: var(--color-superficie-2); }
.matriz tbody tr:hover .matriz__cliente { background: var(--color-superficie-2); }

.matriz__tipo {
  display: block;
  font-size: var(--texto-xs);
  font-weight: var(--peso-normal);
  color: var(--color-texto-tenue);
}

.matriz__celda { text-align: center; padding: var(--esp-2) !important; }
.matriz__celda input { cursor: pointer; }

/* Lo que el catálogo propone para ese tipo de cliente y todavía nadie tildó.
   Va como un punto detrás de la casilla y no como color de estado: no está mal
   —puede ser que el cliente no esté inscripto—, es dónde hay que mirar. */
.matriz__celda--propuesta { background: var(--color-superficie-2); }
.matriz__celda--propuesta::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin: 2px auto 0;
  border-radius: 50%;
  background: var(--color-texto-tenue);
}

/* Separador entre las dos acciones de la barra de selección: asignar y dejar
   sin efecto. Es una línea y no un espacio porque las dos hacen cosas muy
   distintas con la misma selección, y el botón de una queda pegado al campo de
   la otra: sin la marca, «Asignar» parece que usa el motivo que está al lado. */
.acciones-masivas__separador {
  width: 1px;
  align-self: stretch;
  min-height: 1.5rem;
  margin: 0 var(--esp-2);
  background: var(--color-primario-borde);
}
@media (max-width: 720px) {
  /* Envuelto en varias líneas, la línea vertical no separa nada. */
  .acciones-masivas__separador { display: none; }
}

/* ==========================================================================
   CONTRIBUYENTE EN FOCO
   La barra de arriba de Ventas, Compras, Liquidaciones, Informes y
   Operativo: a quién se está mirando, y las solapas para moverse sin volver
   a elegirlo. Ver apps/core/contribuyente.py.
   ========================================================================== */
.contribuyente {
  margin-bottom: var(--esp-4);
}
.contribuyente__foco {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
  padding-bottom: var(--esp-2);
}
.contribuyente__cliente { flex: 1 1 320px; max-width: 480px; }
.contribuyente__periodo { flex: 0 0 auto; }
/* Las flechas pegadas al mes: se lee como un solo control. */
.contribuyente__meses { display: flex; align-items: center; gap: var(--esp-1); }
.contribuyente__meses .campo__control { width: 170px; }
.contribuyente__flecha { flex: none; width: 34px; height: 34px; }
.contribuyente__flecha--atras .icono { transform: rotate(180deg); }
.contribuyente__flecha--apagada { opacity: 0.4; cursor: default; }
.contribuyente__flecha--apagada:hover { background: var(--color-superficie); }
.contribuyente__futuro { margin: 0 0 var(--esp-2); }
.contribuyente__secciones { margin-bottom: 0; }
/* Las tarjetas de Liquidaciones van separadas de las solapas: pegadas a la
   línea se leían como parte de la barra y no como lo primero de la pantalla. */
.contribuyente__tarjetas { margin-top: var(--esp-4); }
.contribuyente__paginas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  padding-top: var(--esp-2);
  border-bottom: 1px solid var(--color-borde);
}
.contribuyente__pagina {
  padding: var(--esp-1) 0 var(--esp-2);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--color-texto-suave);
  font-size: var(--texto-sm);
  text-decoration: none;
}
.contribuyente__pagina:hover { color: var(--color-texto); text-decoration: none; }
.contribuyente__pagina--activa {
  border-bottom-color: var(--color-primario);
  color: var(--color-primario-texto);
  font-weight: var(--peso-medio);
}

/* ==========================================================================
   EL PAPEL DE TRABAJO DE GANANCIAS
   Cada renglón dice de dónde salió lo que se usa: escrito, propuesto por el
   sistema, calculado o sin cargar. Sin cargar va en ámbar: se usa como cero
   y es lo que falta escribir.
   ========================================================================== */
.papel__tabla .campo__control { width: 11rem; text-align: right; }
.papel__tabla td .texto-xs { display: block; }
.papel__origen {
  display: block;
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
}
.papel__origen--sin-cargar { color: var(--color-alerta); }
.papel__faltante { margin: var(--esp-1) 0 0; padding-left: var(--esp-5); }
.papel__titulo td {
  padding-top: var(--esp-4);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primario-texto);
}
.papel__subtitulo td { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.papel__dinamico .campo__control { width: 9rem; }
.papel__campos { border: 0; margin: 0; padding: 0; min-width: 0; display: contents; }
.papel__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: flex-end; }
.papel__accion { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; }
.papel__motivo { flex: 1 1 22rem; }


/* ==========================================================================
   EL CUADRO DE BIENES DE USO
   Tres juegos de columnas —histórico, reexpresado e impositivo—, como la
   planilla del estudio. Cada juego abre con una línea a la izquierda, para que
   «del ejercicio» no se lea en la columna del juego de al lado, y la columna
   del bien se queda quieta al correr la tabla de costado.
   ========================================================================== */
.cuadro-bienes th.cuadro-bienes__grupo {
  text-align: center;
  color: var(--color-primario-texto);
}
.cuadro-bienes .cuadro-bienes__abre { box-shadow: inset 1px 0 0 var(--color-borde); }
.cuadro-bienes thead th.cuadro-bienes__abre {
  box-shadow: inset 1px 0 0 var(--color-borde), inset 0 -1px 0 var(--color-borde);
}
.cuadro-bienes th:first-child,
.cuadro-bienes td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 16rem;
  background: var(--color-superficie);
  box-shadow: 1px 0 0 var(--color-borde);
}
.cuadro-bienes thead th:first-child { background: var(--color-superficie-2); }
.cuadro-bienes__tipo td {
  padding-top: var(--esp-4);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primario-texto);
}
.cuadro-bienes__motivo { color: var(--color-alerta); }

/* ==========================================================================
   VENTANA DE CONFIRMACIÓN
   Un <dialog> para lo que no se deshace —eliminar un cliente—: se abre desde
   un enlace que sin JavaScript lleva a la pantalla de confirmación de
   siempre. Va angosta y con el aviso adelante: lo que se lee antes del botón
   es lo que se pierde.
   ========================================================================== */
.dialogo {
  width: min(30rem, calc(100vw - 2rem));
  margin: 18vh auto auto;
  padding: 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  box-shadow: var(--sombra-lg);
  color: var(--color-texto);
}
.dialogo::backdrop { background: rgba(16, 19, 24, 0.45); }
.dialogo__cuerpo { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-5); }
.dialogo__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
}
.dialogo__titulo .icono { color: var(--color-error); }
.dialogo .barra-acciones { position: static; border-radius: 0 0 var(--radio-lg) var(--radio-lg); }

/* ==========================================================================
   FICHA DEL CLIENTE, COMPACTA
   La ficha se lee de arriba abajo buscando un dato, y el aire de más hacía
   bajar el doble. El encabezado son dos renglones —quién es y, en chips, lo
   que lo ubica en el estudio— y los datos van en bloques uno al lado del
   otro. Todo acotado a la ficha: el resto del sistema no cambia.
   ========================================================================== */
.ficha--compacta { align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); }
.ficha--compacta .ficha__texto { gap: var(--esp-2); }
.ficha__titular { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2) var(--esp-3); }
.ficha--compacta .ficha__cuit { font-size: var(--texto-base); }

/* Los bloques de una parte: dos columnas en pantalla ancha, una en el
   teléfono. Un bloque ancho ocupa las dos (las actividades, el grupo). */
.ficha-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--esp-4) var(--esp-6);
}
/* Tres bloques angostos arriba de los datos generales: quién es, dónde está y
   cómo se lo ubica. */
.ficha-bloques--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ficha-domicilio { line-height: 1.55; }
.ficha-bloque { min-width: 0; }
.ficha-bloque--ancho { grid-column: 1 / -1; }
.ficha-bloque .datos__titulo { display: flex; align-items: center; gap: var(--esp-2); }
.datos--compactos {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: var(--esp-3) var(--esp-4);
}

/* El encabezado de una liquidación: quién, qué período, bajo qué régimen y
   con qué actividad. Cuatro columnas de ancho propio —la actividad es la
   larga— para que el nombre del contribuyente no se parta en tres renglones;
   en el teléfono, una debajo de la otra. */
.datos--liquidacion {
  grid-template-columns: minmax(14rem, 1.4fr) minmax(10rem, 1fr) minmax(12rem, 1.2fr) minmax(16rem, 2.4fr);
}
.datos--liquidacion .dato__valor { margin: 0; }

/* El papel de trabajo de una liquidación es de dos columnas —el renglón y el
   importe—: a lo ancho de una pantalla grande el importe quedaba a más de un
   metro de su nombre. Al lado va lo que falta antes de presentar, que se lee
   mientras se carga; en una pantalla angosta, arriba del papel. */
.liquidacion__acciones { margin-left: auto; }
.liquidacion__seccion {
  margin: var(--esp-4) var(--esp-4) var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primario-texto);
}
/* El saldo a ingresar, sombreado: es el número que se paga. */
.tabla tr.fila-saldo td { background: var(--color-primario-suave); font-size: var(--texto-base); }

/* Lo que trae el sistema se ve bloqueado, y «Modificar» habilita las
   casillas. La clase la pone el script: sin él, las casillas se ven siempre y
   la pantalla sigue sirviendo. */
[data-papel]:not(.papel--bloqueado) .papel-ver:has(+ .papel-editar),
[data-papel]:not(.papel--bloqueado) button.papel-ver,
[data-papel]:not(.papel--bloqueado) p.papel-ver { display: none; }
.papel--bloqueado .papel-editar { display: none !important; }

@media (max-width: 900px) {
  .datos--liquidacion { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
}
.ficha-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--esp-1); font-size: var(--texto-sm); }
.ficha-lista li { display: flex; align-items: baseline; gap: var(--esp-2); min-width: 0; }

/* Un subtítulo dentro de un panel, para la segunda tabla de una misma parte
   (los instrumentos y los socios, los vencimientos cargados a mano). */
.panel__subencabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-superficie-2);
}
.panel__subtitulo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}
.panel__texto { margin: 0; padding: var(--esp-3) var(--esp-4); }
.ficha-grupo { display: flex; flex-direction: column; gap: var(--esp-4); }
.ficha-filtro { padding: var(--esp-3) var(--esp-4) 0; }
.ficha-filtro .chip { cursor: pointer; }

/* Dentro de una celda: el dato y, debajo, su detalle tenue. El detalle al
   lado del nombre va en letra chica —las provincias de Convenio, el número
   de inscripción—. */
.celda-secundaria { font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--color-texto-tenue); }
.celda-detalle { font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--color-texto-suave); }

/* Un texto largo no desarma la columna: se corta con puntos suspensivos y
   el texto entero queda en el globo del mouse (`title`). */
.texto-recortado {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
td .texto-recortado { max-width: 32rem; }

/* Lo que quedó de baja sigue en la tabla —es el historial— pero no compite
   con lo vigente. */
.tabla tr.fila--de-baja td { color: var(--color-texto-tenue); }
.tabla tr.fila--de-baja .celda-principal { font-weight: var(--peso-normal); }

/* El navegador le pone sangría a cada <dd>, y en un bloque angosto el valor
   quedaba corrido bajo su etiqueta como si fuera un subtítulo. */
.ficha-bloque .dato__valor { margin: 0; }

/* Dentro de la ficha, una parte vacía no ocupa media pantalla: son once
   partes, y siete estados vacíos de tamaño completo eran casi toda la
   página. Dice lo mismo, más chico. */
.ficha-con-costado .vacio { padding: var(--esp-4); gap: var(--esp-2); }
.ficha-con-costado .vacio .icono--vacio { width: 1.5rem; height: 1.5rem; }
.ficha-con-costado .vacio .boton { padding: 0.28rem 0.7rem; font-size: var(--texto-sm); }
.ficha-bloque .datos__titulo .boton-icono { width: 1.5rem; height: 1.5rem; }
.ficha-bloque .datos__titulo .boton-icono .icono { width: 0.85rem; height: 0.85rem; }

/* ==========================================================================
   FORMULARIO LARGO: ÍNDICE Y PARTE PEDIDA
   El formulario del cliente tiene siete partes. El índice queda fijo arriba
   para saltar entre ellas, y la parte que pidió el lápiz de la ficha se
   marca: se llega a ella, no al principio del formulario.
   ========================================================================== */
.formulario__indice {
  position: sticky;
  top: var(--alto-barra-superior);
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-4);
  padding: var(--esp-2) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-superficie-2);
  font-size: var(--texto-sm);
}
.formulario__indice a { color: var(--color-texto-suave); text-decoration: none; }
.formulario__indice a:hover,
.formulario__indice a[aria-current] { color: var(--color-primario-texto); }
.formulario__indice a[aria-current] { font-weight: var(--peso-semi); }
.formulario__seccion { scroll-margin-top: calc(var(--alto-barra-superior) + 4.5rem); }
.formulario__seccion--pedida {
  margin: calc(var(--esp-3) * -1);
  padding: var(--esp-3);
  border-radius: var(--radio);
  background: var(--color-primario-suave);
}

/* Un grupo de renglones dentro de una tabla de la ficha —«Contrato social»,
   «Actas»—: un subtítulo de la tabla, no un renglón más. */
.tabla tr.fila-grupo th {
  padding: var(--esp-2) var(--esp-3);
  background: var(--color-superficie-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-primario-texto);
}
.ficha-bloque__siguiente { margin-top: var(--esp-3); }

/* Comprobante de honorarios en una celda: tipo, número y quién lo emitió.
   El tipo y el emisor van suaves y chicos para no ensanchar la columna. */
.comprobante-ref {
  white-space: nowrap;
}
.comprobante-ref abbr {
  text-decoration: none;
  cursor: help;
}
.comprobante-ref__tipo {
  color: var(--color-texto-tenue);
  font-size: var(--texto-xs);
}
.comprobante-ref__emisor {
  display: inline-block;
  padding: 0 0.3em;
  border-radius: var(--radio-full);
  background: var(--color-neutro-suave);
  color: var(--color-texto-tenue);
  font-size: 0.7em;
  line-height: 1.5;
  vertical-align: 0.1em;
}

/* El tratamiento fiscal debajo de cada impuesto de la ficha: de sólo lectura,
   y lo que falta para liquidar en ámbar, que es lo que hay que ver. */
.tratamiento-ficha a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-borde); }
.tratamiento-ficha a:hover { color: var(--color-primario); }
.tratamiento-ficha__falta { color: var(--color-alerta); display: flex; gap: var(--esp-1); align-items: baseline; }
.tratamiento-ficha__falta .icono { flex: none; }

/* Fecha sin año (`DiaYMes`): un campo de texto con el botón de calendario
   donde el selector nativo dibuja el suyo. El selector de verdad queda
   escondido debajo del botón, que es donde el navegador abre el calendario. */
.dia-y-mes { position: relative; display: block; }
.dia-y-mes .campo__control { padding-right: 2.25rem; }
.dia-y-mes__boton {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  display: inline-flex;
  padding: 0.2rem;
  border: 0;
  background: none;
  color: var(--color-texto);
  cursor: pointer;
}
.dia-y-mes__boton[hidden] { display: none; }
.dia-y-mes__boton .icono { width: 1rem; height: 1rem; }
.dia-y-mes__selector {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Deuda agrupada en el resumen del contribuyente: un renglón por impuesto que
   se abre en sus períodos con el desplegar de la base. Los períodos van
   corridos y en letra chica, para que se lean como parte del grupo. */
.deuda-grupo__abrir { color: inherit; text-decoration: none; }
.deuda-grupo__abrir::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--esp-1);
  transition: transform 0.15s;
}
.deuda-grupo__abrir[aria-expanded="true"]::before { transform: rotate(90deg); }
.deuda-grupo__abrir:hover { color: var(--color-primario); }
.deuda-grupo__renglon td { font-size: 0.92em; }
.deuda-grupo__renglon td:nth-child(2) { padding-left: calc(var(--esp-3) + var(--esp-4)); }

/* Un bloque plegado debajo de otro: `.plegable`, o la agenda del resumen,
   donde lo del mes siguiente va plegado debajo de lo del
   mes. El renglón para abrirlo se lee como un enlace —es lo que hace— y
   lleva la flecha, como los bloques plegables de la importación. */
.agenda__siguientes, .plegable { border-top: 1px solid var(--color-borde); }
.agenda__ampliar, .plegable > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--color-primario);
}
.plegable > summary::-webkit-details-marker, .agenda__ampliar::-webkit-details-marker { display: none; }
.agenda__ampliar::after, .plegable > summary::after {
  content: "›";
  margin-left: 0.4em;
  display: inline-block;
  transition: transform var(--transicion);
}
.plegable[open] > summary::after, .agenda__siguientes[open] > .agenda__ampliar::after { transform: rotate(90deg); }
.plegable[open] > summary, .agenda__siguientes[open] > .agenda__ampliar { border-bottom: 1px solid var(--color-borde); }
.plegable > summary:focus-visible, .agenda__ampliar:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -2px; }

/* El desplegable de alícuotas dice el porcentaje, el inciso y la norma: no
   entra en el ancho de una columna de números, y en una pantalla angosta no
   puede empujar la tabla. */
.liquidacion__alicuota {
  width: 14rem;
  max-width: 100%;
}

/* El tratamiento fiscal de un contribuyente: al pie de cada sección, cómo se
   guarda —corregir la versión vigente o cambiar desde un mes— y el botón. */
.tratamiento__guardar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
}
.tratamiento__guardar label { display: inline-flex; align-items: center; gap: var(--esp-2); white-space: nowrap; }
.tratamiento__guardar input[name=motivo] { flex: 1 1 14rem; min-width: 0; }
.tratamiento__guardar .boton { margin-left: auto; }
.tratamiento__versiones { margin: 0; padding: var(--esp-2) var(--esp-4) var(--esp-3) var(--esp-6); }
.tratamiento__versiones li + li { margin-top: var(--esp-2); }

/* La guía de la alícuota básica, dentro de la sección de Ingresos Brutos de
   Santa Fe del tratamiento: las opciones con su estado y, plegados, los datos
   que la deciden. */
.guia-basica { padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--color-borde); }
.guia-basica__opciones { list-style: none; margin: var(--esp-2) 0; padding: 0; }
.guia-basica__opciones li + li { margin-top: var(--esp-2); }
.guia-basica__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--esp-3) var(--esp-4);
  align-items: end;
  padding: var(--esp-3) var(--esp-4);
}

/* La hoja de ruta de los vencimientos del mes: una obligación por grupo de
   renglones, su nombre a la izquierda y los clientes de cada tramo en una
   línea que se parte donde haga falta. Lo hecho va tenue con su tilde y lo
   vencido sin hacer en rojo, que es color de estado. */
.hoja-ruta__resumen { margin: var(--esp-3) var(--esp-4) var(--esp-2); color: var(--color-texto-suave); }
.hoja-ruta__solo-mio { align-self: end; padding-bottom: var(--esp-2); }
.hoja-ruta__solo-mio .campo__casilla { cursor: pointer; }
.hoja-ruta__grupo + .hoja-ruta__grupo { border-top: 2px solid var(--color-borde-fuerte); }
.tabla .hoja-ruta__obligacion {
  vertical-align: top;
  padding-left: var(--esp-4);
  width: 13rem;
  font-weight: var(--peso-semi);
  text-align: left;
  background: var(--color-superficie-2);
}
.hoja-ruta__tramo { white-space: nowrap; }
.hoja-ruta__pasado .celda-fecha { color: var(--color-texto-tenue); }
.hoja-ruta__hoy { background: var(--color-alerta-suave); }
.hoja-ruta__clientes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hoja-ruta__cliente {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--color-texto);
  text-decoration: none;
  white-space: nowrap;
}
.hoja-ruta__cliente:hover { text-decoration: underline; }
.hoja-ruta__cliente .icono { width: 0.95em; height: 0.95em; color: var(--color-exito); }
.hoja-ruta__cliente--hecha { color: var(--color-texto-tenue); }
.hoja-ruta__cliente--vencida { color: var(--color-error); font-weight: var(--peso-semi); }
.hoja-ruta__marca {
  margin-left: 0.2em;
  padding: 0 0.3em;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}

/* El almanaque del mes: siete columnas de lunes a domingo, cada día un
   enlace con una etiqueta por obligación. El color es de estado —verde hecho,
   ámbar por hacer, rojo vencido— y lo que sólo informa va en neutro. */
.almanaque { margin: 0 var(--esp-4); border: 1px solid var(--color-borde); border-radius: var(--radio-sm); overflow: clip; }
.almanaque__semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.almanaque__semana + .almanaque__semana { border-top: 1px solid var(--color-borde); }
.almanaque__nombre-dia {
  padding: var(--esp-2);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-tenue);
  background: var(--color-superficie-2);
}
.almanaque__dia {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 6.5rem;
  padding: var(--esp-2);
  color: var(--color-texto);
  text-decoration: none;
}
.almanaque__dia + .almanaque__dia { border-left: 1px solid var(--color-borde); }
a.almanaque__dia:hover { background: var(--color-superficie-2); }
.almanaque__dia--fuera { background: var(--color-superficie-2); }
.almanaque__dia--libre .almanaque__numero { color: var(--color-texto-tenue); }
.almanaque__dia--elegido { box-shadow: inset 0 0 0 2px var(--color-primario); }
.almanaque__numero { display: flex; align-items: center; gap: var(--esp-1); font-weight: var(--peso-semi); }
.almanaque__fecha-larga { display: none; }
.almanaque__etiqueta {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-1);
  padding: 1px 6px;
  border-radius: var(--radio-sm);
  font-size: var(--texto-xs);
  line-height: 1.5;
  background: var(--color-superficie-2);
  color: var(--color-texto-suave);
}
.almanaque__obligacion { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.almanaque__cantidad { flex: none; font-weight: var(--peso-semi); }
.almanaque__etiqueta--hecho     { background: var(--color-exito-suave);  color: var(--color-exito); }
.almanaque__etiqueta--pendiente { background: var(--color-alerta-suave); color: var(--color-alerta); }
.almanaque__etiqueta--vencido   { background: var(--color-error-suave);  color: var(--color-error); }
.almanaque__referencias { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
.almanaque__referencias .almanaque__etiqueta { display: inline-flex; }
.almanaque__detalle { margin-top: var(--esp-4); border-top: 1px solid var(--color-borde); }
.almanaque__titulo-dia { padding: var(--esp-3) var(--esp-4) var(--esp-2); }
.almanaque__etiqueta--informa, .almanaque__etiqueta--vacio { box-shadow: inset 0 0 0 1px var(--color-borde-fuerte); }
.almanaque__sin-nada { margin: 0 var(--esp-4) var(--esp-4); color: var(--color-texto-suave); }

/* En un teléfono siete columnas no entran: la grilla pasa a ser la lista de
   los días que tienen algo, con el nombre del día escrito. */
@media (max-width: 720px) {
  .almanaque__semana { display: block; }
  .almanaque__semana--encabezado, .almanaque__dia--fuera, .almanaque__dia--libre { display: none; }
  .almanaque__dia { min-height: 0; }
  .almanaque__dia + .almanaque__dia { border-left: 0; border-top: 1px solid var(--color-borde); }
  .almanaque__fecha-larga { display: inline; }
  .almanaque__fecha-corta { display: none; }
}

/* La carga anual: las diez terminaciones de CUIT en una grilla de cinco, que
   es como se leen los tramos del cronograma (0 a 3, 4 a 6, 7 a 9). */
#parte-terminaciones .formulario__campos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-3); }
@media (max-width: 720px) {
  #parte-terminaciones .formulario__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   El costado del estado de resultados
   El resultado en grande, sus márgenes contra el anterior y las barras. El
   verde y el rojo dicen de qué lado está lo bueno: en un margen y en el
   resultado, que suba.
   ------------------------------------------------------------------------ */
.costado-resultado__rotulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--color-texto-suave);
}
.costado-resultado__valor {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-fuerte);
  line-height: 1.1;
  color: var(--color-texto);
}
.costado-resultado__valor .negativo { color: var(--color-error); }
.costado-resultado__contra {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}
.costado--mejor { color: var(--color-exito); }
.costado--peor  { color: var(--color-error); }

.costado-margenes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--color-borde);
}
.costado-margen {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--esp-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
}
.costado-margen--ancho { grid-column: 1 / -1; }
.costado-margen__nombre { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.costado-margen__valor { font-size: var(--texto-xl); font-weight: var(--peso-semi); }
.costado-margen__contra { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.costado-margen__contra.costado--mejor { color: var(--color-exito); }
.costado-margen__contra.costado--peor  { color: var(--color-error); }

.costado-barras { display: flex; flex-direction: column; gap: var(--esp-3); }
.costado-barras__nombre { font-size: var(--texto-sm); font-weight: var(--peso-semi); }
.costado-barras__fila {
  display: grid;
  grid-template-columns: 1fr 7.5rem;
  align-items: center;
  gap: var(--esp-2);
  margin-top: 3px;
}
.costado-barras__barra {
  display: block;
  height: 12px;
  min-width: 2px;
  border-radius: 3px;
  background: var(--serie-1);
}
.costado-barras__barra--anterior { background: var(--color-primario-borde); }
.costado-barras__importe {
  font-size: var(--texto-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.costado-barras__importe .negativo { color: var(--color-error); }
.costado-barras__leyenda {
  display: flex;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
}
.costado-barras__leyenda span { display: inline-flex; align-items: center; gap: var(--esp-1); }
.costado-barras__muestra {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--serie-1);
}
.costado-barras__muestra--anterior { background: var(--color-primario-borde); }

.costado-datos { background: var(--color-primario-suave); border-color: var(--color-primario-borde); }
.costado-datos ul {
  margin: 0;
  padding-left: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
}

/* ---------------------------------------------------------------------------
   El estado de resultados, con la franja (01/11/2026, maqueta aprobada)
   El ejercicio en el encabezado, los segmentos de qué se mira, las tarjetas
   montadas sobre la franja, el costado que acompaña al bajar, las columnas
   del comparativo y la composición de a un gráfico.
   ------------------------------------------------------------------------ */
.estado-ejercicio { font-size: var(--texto-base); font-weight: var(--peso-semi); }
.estado-ejercicio strong { font-weight: var(--peso-semi); }
.estado-ejercicio__fechas {
  font-size: var(--texto-sm);
  font-weight: var(--peso-normal);
  color: var(--color-texto-tenue);
}
.cabecera--franja .estado-ejercicio { color: var(--franja-texto); }
.cabecera--franja .estado-ejercicio__fechas { color: var(--franja-suave); }

/* Un control de opciones pegadas: el ejercicio, o el período. */
.segmentos {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radio);
  background: var(--franja-control);
}
.segmentos__opcion {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radio-sm);
  color: var(--franja-suave);
  font-size: var(--texto-sm);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.segmentos__opcion::-webkit-details-marker { display: none; }
.segmentos__opcion:hover { color: var(--franja-texto); text-decoration: none; }
.segmentos__opcion--activa,
.segmentos__opcion--activa:hover {
  background: var(--color-superficie);
  color: var(--color-primario-texto);
  font-weight: var(--peso-semi);
}
.segmentos__opcion--apagada { opacity: 0.45; cursor: default; }
.segmentos__mes { position: relative; }
.segmentos__meses {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: var(--esp-1);
  padding: var(--esp-3);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
}
.segmentos__meses .segmentos__opcion { color: var(--color-texto-suave); }
.segmentos__meses .segmentos__opcion:hover { color: var(--color-texto); background: var(--color-superficie-2); }
.segmentos__meses .segmentos__opcion--activa { background: var(--color-primario-suave); color: var(--color-primario-texto); }

/* Las tarjetas: icono, nombre con su peso, importe y, en un renglón, cómo
   cambió y lo que fue el anterior. */
.estado-tarjetas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-3);
}
.estado-tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.estado-tarjetas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .estado-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .estado-tarjetas { grid-template-columns: minmax(0, 1fr); }
}
.estado-tarjeta {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}
.estado-tarjeta__icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radio);
  background: var(--color-primario-suave);
  color: var(--color-primario);
}
.estado-tarjeta__icono .icono { width: 20px; height: 20px; }
.estado-tarjeta__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.estado-tarjeta__nombre { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.estado-tarjeta__importe { font-size: var(--texto-xl); font-weight: var(--peso-fuerte); }
.estado-tarjeta__contra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
}
.estado-tarjeta__separador { color: var(--color-borde-fuerte); }
.estado-tarjeta__anterior { color: var(--color-texto-tenue); }
.estado-tarjeta--principal {
  background: var(--franja-fondo);
  border-color: var(--franja-fondo);
  color: var(--franja-texto);
}
.estado-tarjeta--principal .estado-tarjeta__icono { background: var(--franja-control); color: var(--franja-texto); }
.estado-tarjeta--principal .estado-tarjeta__nombre,
.estado-tarjeta--principal .estado-tarjeta__anterior { color: var(--franja-suave); }
.estado-tarjeta--principal .estado-tarjeta__separador { color: var(--franja-borde); }

/* La flecha de una variación: verde si va hacia lo bueno, rojo si no. */
.variacion {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--radio-full);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  white-space: nowrap;
  background: var(--color-neutro-suave);
  color: var(--color-neutro);
}
.variacion--mejor { background: var(--color-exito-suave); color: var(--color-exito); }
.variacion--peor  { background: var(--color-error-suave); color: var(--color-error); }

/* El costado acompaña al bajar, debajo de la barra de arriba. */
.costado-fijo {
  position: sticky;
  top: calc(var(--alto-barra-superior) + var(--esp-3));
  align-self: start;
}
@media (max-width: 1200px) {
  .costado-fijo { position: static; }
}
.costado-margenes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; padding-top: 0; border-top: 0; }
.costado-margen { background: var(--color-superficie-2); border: 0; gap: 3px; }
.costado-margen .variacion { align-self: flex-start; }

/* El resultado con los márgenes debajo, cuando las tarjetas ya no se ven. */
.costado-resumen {
  background: var(--franja-fondo);
  border-color: var(--franja-fondo);
  color: var(--franja-texto);
}
.costado-resumen .panel__cuerpo { display: flex; flex-direction: column; gap: var(--esp-1); }
.costado-resumen__rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--franja-suave);
}
.costado-resumen__valor { font-size: var(--texto-2xl); font-weight: var(--peso-fuerte); line-height: 1.15; }
.costado-resumen__contra { font-size: var(--texto-sm); color: var(--franja-suave); }
.costado-resumen__contra a { color: var(--franja-texto); text-decoration: underline; }
.costado-resumen__margenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2);
  margin-top: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--franja-borde);
}
.costado-resumen__margenes > div { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.costado-resumen__nombre, .costado-resumen__anterior { font-size: var(--texto-xs); color: var(--franja-suave); }

/* El comparativo, en columnas: el anterior en el tono suave, éste en el de
   la marca, todas contra el mismo máximo. */
.comparativo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-3);
}
.comparativo__grupo { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.comparativo__columnas {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--esp-1);
  width: 100%;
  height: 160px;
  margin-bottom: var(--esp-2);
  border-bottom: 1px solid var(--color-borde-fuerte);
}
.comparativo__columna {
  display: block;
  width: 30px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--serie-1);
}
.comparativo__columna--anterior { background: var(--color-primario-borde); }
.comparativo__nombre { font-size: var(--texto-sm); font-weight: var(--peso-semi); }
.comparativo__importe { font-size: var(--texto-xs); color: var(--color-texto-suave); }

/* La composición, de a un gráfico. */
.composicion__encabezado { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.composicion__actual { font-weight: var(--peso-normal); color: var(--color-texto-suave); }
.composicion__controles { display: flex; align-items: center; gap: var(--esp-2); }
.composicion__puntos { display: flex; gap: 6px; margin-right: var(--esp-1); }
.composicion__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--color-borde-fuerte); }
.composicion__punto--activo { background: var(--color-primario); }
.composicion__flecha--atras .icono { transform: rotate(180deg); }
.composicion__hoja + .composicion__hoja { margin-top: var(--esp-5); }
.composicion__nota { margin: 0 0 var(--esp-3); font-size: var(--texto-sm); color: var(--color-texto-suave); }

/* En la composición la torta va a la izquierda y la lista a la derecha: el
   panel es más angosto que el ancho de la torta grande con su referencia. */
.composicion .torta--grande { justify-content: flex-start; gap: var(--esp-5); }
.composicion .torta--grande .torta__dibujo { width: 240px; height: 240px; }
.composicion .torta--grande .torta__referencias { flex: 1 1 300px; }

/* El cuadro de la vista del ejercicio, como en la maqueta: sin líneas entre
   renglones ni entre columnas —un renglón de por medio con fondo—, el título
   de cada bloque con un punto en el azul de la marca, el detalle con sangría
   y los totales en franjas: el subtotal suave, el resultado intermedio más
   marcado y el resultado del ejercicio en la franja llena, redondeada. */
.estado--ejercicio th,
.estado--ejercicio td { border-bottom: 0; }
.estado--ejercicio .estado__concepto { box-shadow: none; min-width: 0; width: auto; padding-left: var(--esp-6); }
.estado--ejercicio .estado__total,
.estado--ejercicio thead .estado__total { border-left: 0; font-weight: var(--peso-normal); }
.estado--ejercicio .estado__incidencia { border-left: 0; width: 1%; min-width: 6rem; font-size: var(--texto-xs); }
.estado--ejercicio tbody tr.estado__fila:nth-child(odd):not([class*="estado__fila--"]) td { background: var(--color-superficie-2); }
.estado--ejercicio tbody tr.estado__fila:nth-child(even):not([class*="estado__fila--"]) td { background: var(--color-superficie); }
.estado--ejercicio .estado__seccion td {
  padding-top: var(--esp-4);
  padding-left: var(--esp-4);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primario-texto);
}
.estado--ejercicio { max-width: none; }
.estado--ejercicio .estado__seccion .estado__plegar-flecha { width: 0.75rem; height: 0.75rem; color: var(--color-texto-tenue); }
.estado--ejercicio .estado__seccion .estado__concepto:not(:has(.estado__plegar:not([hidden])))::before,
.estado--ejercicio .estado__seccion .estado__plegar::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--esp-2);
  border-radius: 50%;
  background: var(--color-primario);
  vertical-align: middle;
}
.estado--ejercicio .estado__seccion .estado__plegar:not([hidden]) ~ .estado__seccion-titulo { display: none; }
.estado--ejercicio .estado__fila--subtotal td,
.estado--ejercicio .estado__fila--subtotal td.estado__concepto {
  background: color-mix(in srgb, var(--color-primario-suave) 55%, var(--color-superficie));
  font-weight: var(--peso-semi);
}
.estado--ejercicio .estado__fila--subtotal .estado__concepto,
.estado--ejercicio .estado__fila--resultado .estado__concepto,
.estado--ejercicio .estado__fila--final .estado__concepto { padding-left: var(--esp-4); }
.estado--ejercicio .estado__fila--resultado td,
.estado--ejercicio .estado__fila--resultado td.estado__concepto {
  background: var(--color-primario-suave);
  border-top: 0;
  font-weight: var(--peso-fuerte);
}
.estado--ejercicio .estado__fila--final td,
.estado--ejercicio .estado__fila--final td.estado__concepto {
  background: var(--franja-fondo);
  color: var(--franja-texto);
  padding-top: var(--esp-3);
  padding-bottom: var(--esp-3);
}
.estado--ejercicio .estado__fila--final td:first-child { border-radius: var(--radio) 0 0 var(--radio); }
.estado--ejercicio .estado__fila--final td:last-child { border-radius: 0 var(--radio) var(--radio) 0; }
.estado-con-costado .panel__encabezado.panel__encabezado--estado {
  flex-direction: row;
  align-items: baseline;
}
.estado-con-costado__unidad { font-size: var(--texto-xs); color: var(--color-texto-tenue); white-space: nowrap; }

/* Los paneles del costado apilan título y descripción; la composición y el
   cuadro, no: el título a la izquierda y lo suyo a la derecha. */
.estado-con-costado .composicion__encabezado {
  flex-direction: row;
  align-items: center;
}
.composicion__controles { margin-left: auto; }

/* La tarjeta principal y el resumen del costado en un azul más claro que la
   franja, para que se despeguen de ella. */
.estado-tarjeta--principal,
.costado-resumen {
  background: var(--franja-destacado);
  border-color: var(--franja-destacado);
}

/* Cada dato relevante con su marca en una caja. */
.costado-datos { background: var(--color-superficie); }
.costado-datos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.costado-datos li { display: flex; gap: var(--esp-3); align-items: flex-start; font-size: var(--texto-sm); color: var(--color-texto-suave); }
.costado-datos__signo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--radio-sm);
  background: var(--color-primario-suave);
  color: var(--color-primario);
  font-size: var(--texto-xs);
}

/* ---------------------------------------------------------------------------
   El resumen del contribuyente, con el diseño del estado de resultados
   (01/11/2026, maqueta aprobada): las tarjetas sobre la franja, la columna de
   lo que se trabaja y el costado que acompaña al bajar.
   ------------------------------------------------------------------------ */
.estado-tarjetas--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1300px) {
  .estado-tarjetas--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .estado-tarjetas--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .estado-tarjetas--5 { grid-template-columns: minmax(0, 1fr); }
}
/* Las tarjetas que llegan aparte ocupan el lugar que las esperaba entero. */
.estado-tarjetas__lugar { display: flex; min-width: 0; }
.estado-tarjetas__lugar > .estado-tarjeta { flex: 1; min-width: 0; }
.estado-tarjetas--5 .estado-tarjeta__importe,
.estado-tarjetas--4 .estado-tarjeta__importe { font-size: var(--texto-lg); }
a.estado-tarjeta { color: inherit; text-decoration: none; }
a.estado-tarjeta:hover { border-color: var(--color-primario-borde); }
.estado-tarjeta__importe--negativo { color: var(--color-error); }

/* Qué falta resolver, en una línea. */
.que-falta-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--color-alerta);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
  font-size: var(--texto-sm);
}
.que-falta-linea__titulo { display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--color-alerta); }
.que-falta-linea__separador { color: var(--color-borde-fuerte); }

/* La columna de lo que se trabaja y el costado. */
.resumen-con-costado {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr);
  gap: var(--esp-4);
  align-items: start;
}
@media (max-width: 1200px) {
  .resumen-con-costado { grid-template-columns: minmax(0, 1fr); }
}

/* Lo que decían las tarjetas, copiado arriba del costado al bajar. */
.costado-resumen__tarjetas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}
.costado-resumen__tarjetas .estado-tarjeta {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--franja-texto);
}
.costado-resumen__tarjetas .estado-tarjeta:last-child:nth-child(odd) { grid-column: 1 / -1; }
.costado-resumen__tarjetas .estado-tarjeta__icono { display: none; }
.costado-resumen__tarjetas .estado-tarjeta__nombre,
.costado-resumen__tarjetas .estado-tarjeta__anterior { color: var(--franja-suave); }
.costado-resumen__tarjetas .estado-tarjeta__importe { font-size: var(--texto-md); }
.costado-resumen__tarjetas .estado-tarjeta__separador { color: var(--franja-borde); }

/* Los doce meses: columnas con líneas guía y la tabla de importes debajo. */
.grafico-anual__referencias { display: flex; gap: var(--esp-3); font-size: var(--texto-xs); color: var(--color-texto-suave); }
.grafico-anual__referencias span { display: inline-flex; align-items: center; gap: var(--esp-1); }
.grafico-anual__muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
/* La muestra de una serie lleva su color; la del resumen, el de la marca. */
.grafico-anual__muestra:not([class*="serie-"]) { background: var(--serie-1); }
.grafico-anual__muestra.grafico-anual__muestra--compras { background: var(--color-primario-borde); }
.grafico-anual {
  position: relative;
  height: 180px;
  margin-left: 4.5rem;
  border-bottom: 1px solid var(--color-borde-fuerte);
}
.grafico-anual__linea {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--color-borde);
}
.grafico-anual__linea span {
  position: absolute;
  right: calc(100% + var(--esp-2));
  top: -0.6em;
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
  white-space: nowrap;
}
.grafico-anual__meses {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--esp-1);
}
.grafico-anual__mes { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.grafico-anual__columna {
  display: block;
  width: min(14px, 40%);
  min-height: 1px;
  border-radius: 3px 3px 0 0;
  background: var(--serie-1);
}
.grafico-anual__columna--compras { background: var(--color-primario-borde); }
.grafico-anual__tabla { margin-top: var(--esp-2); font-size: var(--texto-xs); }
.tabla.grafico-anual__tabla th, .tabla.grafico-anual__tabla td { padding: var(--esp-1) 2px; white-space: nowrap; font-size: var(--texto-xs); letter-spacing: 0; }
.tabla.grafico-anual__tabla th:first-child, .tabla.grafico-anual__tabla td:first-child { width: 4.5rem; padding-left: 0; }

/* Las obligaciones con los organismos: tres subtotales y una tabla. */
.obligaciones__subtotales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
}
@media (max-width: 640px) {
  .obligaciones__subtotales { grid-template-columns: minmax(0, 1fr); }
}
.obligaciones__subtotal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--esp-3);
  border-radius: var(--radio);
  background: var(--color-superficie-2);
  color: inherit;
  text-decoration: none;
}
.obligaciones__subtotal:hover { text-decoration: none; background: var(--color-primario-suave); }
.obligaciones__subtotal strong { font-size: var(--texto-lg); }
.obligaciones__subtotal--alerta { background: var(--color-error-suave); }
.obligaciones__subtotal--alerta strong,
.obligaciones__subtotal--alerta .obligaciones__rotulo { color: var(--color-error); }
.obligaciones__rotulo { font-size: var(--texto-xs); color: var(--color-texto-suave); }
.obligaciones__detalle { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.obligaciones__bloque th {
  padding-top: var(--esp-4);
  text-align: left;
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-primario-texto);
  background: var(--color-superficie);
}
.obligaciones__bloque--alerta th { color: var(--color-error); }
.obligaciones__subtotal-renglon td {
  font-weight: var(--peso-semi);
  background: color-mix(in srgb, var(--color-primario-suave) 55%, var(--color-superficie));
}
.obligaciones__organismo {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radio-full);
  background: var(--color-primario-suave);
  color: var(--color-primario-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  white-space: nowrap;
}

/* El resultado de los meses y el acumulado, que va en negrita. */
.resultado-meses .resultado-meses__acumulado { font-weight: var(--peso-fuerte); }
.resultado-meses__resultado td { background: var(--color-primario-suave); color: var(--color-primario-texto); }

/* La agenda del costado: el día en una caja del color del apuro. */
.agenda__grupo {
  margin: 0;
  padding: var(--esp-3) var(--esp-4) var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  color: var(--color-texto-suave);
}
.agenda__grupo--error { color: var(--color-error); }
.agenda__grupo--alerta { color: var(--color-alerta); }
.agenda__renglon {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
}
.agenda__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 2.9rem;
  padding: var(--esp-1) 0;
  border-radius: var(--radio);
  background: var(--color-superficie-2);
  color: var(--color-texto-suave);
  line-height: 1.1;
}
.agenda__dia strong { font-size: var(--texto-md); }
.agenda__dia span { font-size: var(--texto-xs); }
.agenda__dia--error { background: var(--color-error-suave); color: var(--color-error); }
.agenda__dia--alerta { background: var(--color-alerta-suave); color: var(--color-alerta); }
.agenda__que { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda__quien { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
/* Cada columna se achica a su lugar: una tabla ancha se corre adentro de su
   caja en lugar de ensanchar la columna y meterse debajo del costado. */
.resumen-con-costado > * { min-width: 0; }
.resumen-con-costado .pila { grid-template-columns: minmax(0, 1fr); }
.tabla .obligaciones__bloque th { padding-left: var(--esp-4); }
/* Sobre el azul el rojo no se lee: la pérdida la dice el signo. */
.costado-resumen__tarjetas .estado-tarjeta__importe--negativo { color: var(--franja-texto); }
/* Cinco tarjetas en fila dejan unos 175 px de texto: el título y la
   comparación se partían y la barra quedaba colgada al final del renglón.
   En fila el ícono, que es adorno, se va; y la comparación con el mes
   anterior va en su renglón, debajo del chip y sin la barra: con importes
   de ocho cifras no entra al lado, y cortar un importe es peor que
   partirlo. Vale también para la fila de cuatro. */
@media (min-width: 1301px) {
  .estado-tarjetas--5 .estado-tarjeta__icono { display: none; }
}
.estado-tarjetas--5 .estado-tarjeta__texto,
.estado-tarjetas--4 .estado-tarjeta__texto { flex: 1; }
.estado-tarjetas--5 .estado-tarjeta__nombre,
.estado-tarjetas--4 .estado-tarjeta__nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado-tarjetas--5 .estado-tarjeta__contra,
.estado-tarjetas--4 .estado-tarjeta__contra { row-gap: 2px; }
.estado-tarjetas--5 .estado-tarjeta__separador,
.estado-tarjetas--4 .estado-tarjeta__separador { display: none; }
.estado-tarjetas--5 .estado-tarjeta__anterior,
.estado-tarjetas--4 .estado-tarjeta__anterior { flex-basis: 100%; }

/* ---------------------------------------------------------------------------
   Los libros de IVA con el diseño de la franja (02/11/2026, maqueta
   aprobada): la tabla a todo el ancho, el concepto como chip con el color de
   su actividad, y debajo los subtotales en pestañas al lado de los controles.
   ------------------------------------------------------------------------ */
button.segmentos__opcion { border: 0; background: transparent; font: inherit; font-size: var(--texto-sm); }
.segmentos--claros { background: var(--color-superficie-2); }
.segmentos--claros .segmentos__opcion { color: var(--color-texto-suave); }
.segmentos--claros .segmentos__opcion:hover { color: var(--color-texto); }
/* La elegida, llena en el azul: sobre el gris claro del panel, la blanca de
   la franja no se distinguía. Y con este peso, porque `button.segmentos__opcion`
   le saca el fondo a cualquier botón y le ganaba a la elegida. */
.segmentos--claros .segmentos__opcion.segmentos__opcion--activa,
.segmentos--claros .segmentos__opcion.segmentos__opcion--activa:hover {
  background: var(--color-primario);
  color: #ffffff;
  box-shadow: var(--sombra-sm);
}

/* El concepto, como chip: el punto lleva el color de la serie y el texto el
   de siempre, así se lee con cualquiera de los ocho. Sugerido va punteado y
   sin imputar en ámbar, que eso sí es estado. */
.chip-concepto {
  --punto: var(--color-neutro);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: var(--radio-full);
  background: color-mix(in srgb, var(--punto) 13%, var(--color-superficie));
  color: var(--color-texto);
  font-size: var(--texto-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-concepto::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--punto); }
.chip-concepto { max-width: 12rem; }
.chip-concepto__texto { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip-concepto--serie-1 { --punto: var(--serie-1); }
.chip-concepto--serie-2 { --punto: var(--serie-2); }
.chip-concepto--serie-3 { --punto: var(--serie-3); }
.chip-concepto--serie-4 { --punto: var(--serie-4); }
.chip-concepto--serie-5 { --punto: var(--serie-5); }
.chip-concepto--serie-6 { --punto: var(--serie-6); }
.chip-concepto--serie-7 { --punto: var(--serie-7); }
.chip-concepto--serie-8 { --punto: var(--serie-8); }
.chip-concepto--sugerido { background: var(--color-superficie); border-style: dashed; border-color: var(--punto); }
.chip-concepto--falta { --punto: var(--color-alerta); background: var(--color-alerta-suave); color: var(--color-alerta); }

/* Debajo de la tabla: los subtotales, más anchos, y los controles. */
.libro-pie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: var(--esp-4);
  align-items: start;
}
@media (max-width: 1100px) {
  .libro-pie { grid-template-columns: minmax(0, 1fr); }
}
/* Las pestañas van en el encabezado, como las flechas de la composición, y
   con ellas el título de cada hoja sobra: lo dice la pestaña. Queda la
   aclaración, chica. Sin JavaScript no hay pestañas y se ven los títulos. */
.subtotales__encabezado { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.subtotales__cabeza { padding: var(--esp-3) var(--esp-4) var(--esp-2); }
.subtotales__titulo { margin: 0; font-size: var(--texto-md); }
.subtotales:has(.subtotales__botones:not([hidden])) .subtotales__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.subtotales__descripcion { margin: 2px 0 0; font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.subtotales__hoja + .subtotales__hoja { border-top: 1px solid var(--color-borde); }
.subtotales__hoja > .panel__nota { margin: 0 var(--esp-4) var(--esp-2); }

/* Las tablas, como el cuadro del estado de resultados: sin líneas entre
   renglones, uno de por medio con fondo, y el total del período en la
   franja suave. */
.subtotales .tabla th,
.subtotales .tabla td { border-bottom: 0; padding-top: var(--esp-2); padding-bottom: var(--esp-2); }
.subtotales .tabla thead th { border-bottom: 1px solid var(--color-borde); }
.subtotales .tabla tbody tr:nth-child(odd) td { background: var(--color-superficie-2); }
.subtotales .tabla tfoot td {
  border-top: 0;
  background: var(--color-primario-suave);
  color: var(--color-primario-texto);
  font-weight: var(--peso-semi);
}
.subtotales .tabla th:last-child, .subtotales .tabla td:last-child { padding-right: var(--esp-4); }
.subtotales .tabla-contenedor { padding-bottom: var(--esp-3); }

.controles-libro__lista { list-style: none; margin: 0; padding: 0; }
.controles-libro__item {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
}
.controles-libro__item:first-child { border-top: 0; }
.controles-libro__item > .icono { flex: none; margin-top: 2px; color: var(--color-exito); }
.controles-libro__item--alerta > .icono { color: var(--color-alerta); }
.controles-libro__item--info > .icono { color: var(--color-texto-tenue); }
.controles-libro__accion { display: inline; }
/* La acción principal sobre la franja: blanca, para que se despegue de las
   secundarias, que van con borde. */
.cabecera--franja .boton--primario { background: var(--franja-texto); border-color: var(--franja-texto); color: var(--franja-fondo); }
.cabecera--franja .boton--primario:hover { background: var(--franja-suave); border-color: var(--franja-suave); }
.cabecera--franja .boton--primario .icono { color: var(--franja-fondo); }
/* La contraparte se partía en tres o cuatro renglones, y cada comprobante
   ocupaba el alto de cuatro: la tabla le da lugar al nombre antes que al
   número del comprobante. */
.tabla[data-columnas^="comprobantes-"] th[data-columna="contraparte"] { min-width: 15rem; }
.tabla[data-columnas^="comprobantes-"] th[data-columna="concepto"] { min-width: 10rem; }
/* Los subtotales, más compactos: con sus siete columnas en la mitad del
   ancho, el nombre se partía y el porcentaje quedaba afuera. */
.subtotales .tabla { font-size: var(--texto-sm); }
.subtotales .tabla th, .subtotales .tabla td { padding-left: var(--esp-2); padding-right: var(--esp-2); }
.subtotales .tabla th:first-child, .subtotales .tabla td:first-child { padding-left: var(--esp-4); min-width: 9rem; }
.subtotales .tabla th { white-space: normal; }

/* ---------------------------------------------------------------------------
   El detalle mensual con el diseño de la franja (02/11/2026, maqueta
   aprobada): el gráfico de columnas apiladas arriba del cuadro y la
   composición al costado.
   ------------------------------------------------------------------------ */
.detalle-grafico__referencias { flex-wrap: wrap; margin-bottom: var(--esp-3); }
.detalle-grafico__meses { gap: var(--esp-2); }
.detalle-grafico__pila {
  display: flex;
  flex-direction: column-reverse;
  width: min(30px, 70%);
  height: 100%;
}
.detalle-grafico__pila i { display: block; flex: none; }
.detalle-grafico__pila i:last-child { border-radius: 3px 3px 0 0; }
.detalle-grafico__meses-texto {
  display: grid;
  gap: var(--esp-2);
  margin-left: 4.5rem;
  padding-top: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
  text-align: center;
}

/* «Otro tramo»: el desde y el hasta en el desplegable de la franja. */
.detalle-tramo { grid-template-columns: auto auto auto; align-items: end; }
.detalle-tramo .campo__etiqueta { color: var(--color-texto-suave); }

/* La lista entera de clientes o proveedores, plegada debajo de la torta. */
.detalle-contrapartes > summary { cursor: pointer; list-style: none; }
.detalle-contrapartes > summary::-webkit-details-marker { display: none; }
.detalle-contrapartes > summary .panel__titulo::after { content: " ▾"; color: var(--color-texto-tenue); }
.detalle-contrapartes[open] > summary .panel__titulo::after { content: " ▴"; }
.detalle-contrapartes__nota { margin: 0; padding: 0 var(--esp-4) var(--esp-2); }
.detalle-contrapartes__lista { list-style: none; margin: 0; padding: 0; max-height: 28rem; overflow-y: auto; }
.detalle-contrapartes__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4.5rem;
  gap: var(--esp-2);
  align-items: center;
  padding: var(--esp-2) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
}
.detalle-contrapartes__nombre { display: flex; flex-direction: column; min-width: 0; }
.detalle-contrapartes__nombre > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detalle-contrapartes__importe, .detalle-contrapartes__peso { text-align: right; white-space: nowrap; }
/* El gráfico del detalle es más alto que el del resumen: va al lado de la
   composición, que con su referencia mide casi el doble. */
.detalle-grafico .grafico-anual { height: 280px; }

/* La aclaración de un lote de tickets («57 comprobantes de 76 números: los
   demás…») se parte: de un renglón, estiraba la columna del comprobante a
   casi quinientos píxeles y la tabla se corría de costado. */
.fila--lote td .texto-xs { white-space: normal; max-width: 18rem; }
/* El rango de números de un lote se parte en « a » si no entra: entero en un
   renglón empujaba las acciones fuera de la tabla. */
.fila--lote td .texto-numero { white-space: normal; }
/* El número de un comprobante no se parte en el guion: con la columna
   justa, «Nota de crédito A 0011-00000001» quedaba «0011-» arriba y el resto
   abajo. Baja entero al renglón siguiente. El rango de un lote sí se parte,
   en « a ». */
.tabla[data-columnas^="comprobantes-"] tr:not(.fila--lote) .texto-numero { white-space: nowrap; }

/* ==========================================================================
   FICHA DEL CONTRIBUYENTE
   Las partes a la izquierda y un costado angosto que acompaña al bajar: el
   índice, lo que falta cargar, los contactos, los honorarios y los
   documentos. Si el costado no entra en la pantalla se desplaza solo, sin
   llevarse la ficha (02/11/2026, maqueta aprobada).
   ========================================================================== */
.ficha-con-costado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: var(--esp-4);
  align-items: start;
}
.ficha-con-costado > * { min-width: 0; }
.ficha-costado {
  max-height: calc(100vh - var(--alto-barra-superior) - var(--esp-5));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (max-width: 1100px) {
  .ficha-con-costado { grid-template-columns: minmax(0, 1fr); }
  .ficha-costado { max-height: none; overflow: visible; }
}

.ficha-actividades__codigo { width: 6.5rem; }
.ficha-actividades td { white-space: normal; vertical-align: top; }
.ficha-actividades .insignia { margin-left: var(--esp-2); }

.ficha-pares { margin: 0; display: flex; flex-direction: column; gap: var(--esp-1); font-size: var(--texto-sm); }
.ficha-pares > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--esp-2); }
.ficha-pares--anchos > div { grid-template-columns: 7rem minmax(0, 1fr); }
.ficha-pares dt { color: var(--color-texto-tenue); }
.ficha-pares dd { margin: 0; overflow-wrap: anywhere; }

.ficha-indice { display: flex; flex-direction: column; padding: var(--esp-3) 0 var(--esp-1); }
.ficha-indice__titulo { margin: 0; padding: 0 var(--esp-4) var(--esp-2); font-size: var(--texto-base); font-weight: var(--peso-semi); }
.ficha-indice__enlace {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  border-left: 3px solid transparent;
  font-size: var(--texto-sm);
  color: var(--color-texto);
}
.ficha-indice__enlace:hover { background: var(--color-superficie-2); text-decoration: none; }
.ficha-indice__enlace--activo {
  border-left-color: var(--color-primario);
  background: var(--color-primario-suave);
  font-weight: var(--peso-semi);
}

.ficha-falta { padding: var(--esp-3) var(--esp-4); border-left: 4px solid var(--color-alerta); }
.ficha-falta__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-base);
  color: var(--color-alerta);
}
.ficha-falta__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
}

.ficha-renglones { list-style: none; margin: 0; padding: 0; }
.ficha-renglon {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
}
.ficha-renglon__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ficha-renglon__detalle { font-size: var(--texto-xs); color: var(--color-texto-tenue); overflow-wrap: anywhere; }
.ficha-documentos__grupo {
  margin: 0;
  padding: var(--esp-3) var(--esp-4) var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primario);
}

/* ==========================================================================
   LIQUIDACIONES EN LA FRANJA (02/11/2026, maqueta aprobada)
   Las tarjetas de cada liquidación del mes hacen de solapas, montadas sobre
   la franja; el papel va a la izquierda y al costado lo que se mira antes de
   presentar, de dónde sale lo de a cuenta y el botón de proteger.
   ========================================================================== */
.liquidaciones-solapas { display: flex; flex-direction: column; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.liquidaciones-solapas__tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--esp-3);
}
.liquidaciones-solapas__cargando { min-height: 5.5rem; align-items: center; }
.liquidaciones-solapas__ademas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0; font-size: var(--texto-sm); }
.liquidaciones-solapas__actual { font-weight: var(--peso-semi); text-decoration: underline; }
a.liquidacion-tarjeta { border-width: 2px; border-color: transparent; transition: border-color .12s; }
a.liquidacion-tarjeta:hover { border-color: var(--color-borde-fuerte); }
a.liquidacion-tarjeta--actual,
a.liquidacion-tarjeta--actual:hover { border-color: var(--color-primario); }
.liquidacion-tarjeta .estado-tarjeta__importe { font-size: var(--texto-lg); }
.liquidacion-tarjeta__sin-importe { color: var(--color-texto-suave); }
.liquidacion-tarjeta__a-pagar { color: var(--color-alerta); }
.liquidacion-tarjeta__a-favor { color: var(--color-exito); }

/* El papel con su costado. Varias liquidaciones —la tasa de dos plazas— van
   una debajo de la otra, cada una con el suyo. */
.liquidacion-con-costado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  gap: var(--esp-4);
  align-items: start;
  margin-bottom: var(--esp-4);
}
@media (max-width: 1100px) {
  .liquidacion-con-costado { grid-template-columns: minmax(0, 1fr); }
}
.liquidacion-con-costado > .panel { margin: 0; }
.liquidacion__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-borde);
}
.liquidacion__cabeza h2 { margin: 0; font-size: var(--texto-lg); }
.liquidacion__cabeza .liquidacion__acciones { margin-left: auto; display: flex; gap: var(--esp-2); }
.liquidacion__costado { display: flex; flex-direction: column; gap: var(--esp-4); }
.liquidacion__costado > .panel { margin: 0; }
.liquidacion__costado h2 { margin: 0; font-size: var(--texto-base); }
.antes-de-presentar { margin: var(--esp-2) 0 0; padding: 0; list-style: none; }
.antes-de-presentar li {
  display: flex;
  gap: var(--esp-2);
  align-items: flex-start;
  padding: var(--esp-2) 0;
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
  line-height: 1.45;
}
.antes-de-presentar li:first-child { border-top: 0; }
.antes-de-presentar .insignia { flex: none; margin-top: 1px; }
.liquidacion__costado .filtros { flex-direction: column; align-items: stretch; margin: 0; padding: 0; border: 0; }
.liquidacion__costado .filtros > .campo { max-width: none; }
.liquidacion__costado form .boton { justify-content: center; }
.liquidacion__fuente + .liquidacion__fuente { margin-top: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--color-borde); }
.liquidacion__fuente form { flex-direction: column; align-items: flex-start !important; }

/* ==========================================================================
   PANEL DE INICIO EN LA FRANJA (02/11/2026, maqueta aprobada)
   ========================================================================== */
.panel-inicio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: var(--esp-4);
  align-items: start;
  margin-top: var(--esp-4);
}
@media (max-width: 1100px) {
  .panel-inicio { grid-template-columns: minmax(0, 1fr); }
}
.panel-inicio .panel { margin: 0; }
.panel-inicio__cifra--error { color: var(--color-error); }
.panel-inicio__cifra--alerta { color: var(--color-alerta); }
.panel-inicio__cifra--exito { color: var(--color-exito); }
.agenda__dia--neutro { background: var(--color-superficie-2); }
.agenda__dia--exito { background: var(--color-exito-suave); color: var(--color-exito); }
/* En una celda de tabla, al lado de un texto: la caja es un bloque en línea,
   centrada con lo de al lado. Con `display: flex` ocupaba el renglón entero
   y empujaba los días abajo. */
.agenda__dia--en-linea { display: inline-flex; vertical-align: middle; margin-right: var(--esp-2); }
.panel-inicio__grupo {
  padding: var(--esp-2) var(--esp-4) var(--esp-1);
  background: var(--color-superficie-2);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primario-texto);
}
.panel-inicio__renglones { margin: 0; padding: 0; list-style: none; }
.panel-inicio__renglones li {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
}
.panel-inicio__que { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.panel-inicio__que strong { font-weight: var(--peso-semi); }
.panel-inicio__cuantos { width: 3.5rem; text-align: right; font-weight: var(--peso-semi); }
.panel-inicio__quien { width: 11rem; flex: none; }
.panel-inicio__mas { margin: 0; padding: var(--esp-1) var(--esp-4) var(--esp-2); }
.panel-inicio__titulo { margin: 0 0 var(--esp-2); font-size: var(--texto-base); display: flex; align-items: center; gap: var(--esp-2); }
.panel-inicio__falta { margin: 0; padding: 0; list-style: none; }
.panel-inicio__falta li {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-sm);
}
.panel-inicio__falta li:first-child { border-top: 0; }
.panel-inicio__numero { min-width: 3rem; text-align: right; font-size: var(--texto-lg); font-weight: var(--peso-fuerte); }
.panel-inicio__persona { padding: var(--esp-2) 0; border-top: 1px solid var(--color-borde); }
.panel-inicio__persona:first-of-type { border-top: 0; }
.panel-inicio__persona-nombre { display: flex; justify-content: space-between; gap: var(--esp-2); font-size: var(--texto-sm); margin-bottom: var(--esp-1); }
.panel-inicio__barra { display: flex; height: 8px; border-radius: var(--radio-full); background: var(--color-superficie-2); overflow: hidden; }
.panel-inicio__barra i { display: block; height: 100%; }
.panel-inicio__barra--vencidas { background: var(--color-error); }
.panel-inicio__barra--semana { background: var(--color-alerta); }
.panel-inicio__barra--despues { background: var(--color-primario); opacity: .45; }
.panel-inicio__leyenda { display: flex; gap: var(--esp-3); margin: var(--esp-2) 0; }
.panel-inicio__leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 3px; }
.panel-inicio__aviso { background: var(--color-alerta-suave); border-color: var(--color-alerta-suave); color: var(--color-alerta); }

/* ==========================================================================
   MI TRABAJO EN LA FRANJA (02/11/2026, maqueta aprobada)
   Usa la grilla y los renglones del panel de inicio.
   ========================================================================== */
.mi-trabajo__titulo { display: flex; justify-content: space-between; cursor: pointer; list-style: none; }
.mi-trabajo__titulo::-webkit-details-marker { display: none; }
.mi-trabajo__titulo::before { content: "▸"; margin-right: var(--esp-2); }
.mi-trabajo__grupo[open] > .mi-trabajo__titulo::before { content: "▾"; }
.mi-trabajo__titulo > span:first-child { flex: 1; }
.mi-trabajo__obligacion { border-top: 1px solid var(--color-borde); padding: var(--esp-3) var(--esp-4); }
.mi-trabajo__cabeza { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--texto-sm); }
.mi-trabajo__que { flex: 1; min-width: 0; font-weight: var(--peso-semi); }
.mi-trabajo__etiquetas { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-2); }
.mi-trabajo__etiquetas--sangria { padding-left: calc(2.9rem + var(--esp-3)); }
.mi-trabajo__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 2px var(--esp-3) 2px 3px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-full);
  background: var(--color-superficie);
  font-size: var(--texto-xs);
}
.mi-trabajo__etiqueta form { margin: 0; display: inline-flex; }
.mi-trabajo__etiqueta .marcar-hecha { width: 22px; height: 22px; }
.mi-trabajo__cliente { align-items: flex-start !important; }

/* ==========================================================================
   MONOTRIBUTO EN LA FRANJA (02/11/2026, maquetas aprobadas)
   ========================================================================== */
.mono-tarjeta--elegida { outline: 2px solid var(--color-primario); outline-offset: -1px; }
.mono-aviso {
  display: flex; align-items: center; gap: var(--esp-2); margin: 0;
  padding: var(--esp-2) var(--esp-4); border-radius: var(--radio);
  background: var(--color-primario-suave); border: 1px solid var(--color-primario-borde);
  font-size: var(--texto-sm);
}
.mono-aviso--alerta { background: var(--color-alerta-suave); border-color: var(--color-alerta-suave); color: var(--color-alerta); }
.mono-filtros { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; margin: 0; }
.mono-filtros .buscador { width: 15rem; }
.mono-tablero__grupo td {
  background: var(--color-superficie-2); font-size: var(--texto-xs); font-weight: var(--peso-fuerte);
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-primario);
}
.mono-tablero__mirar { min-width: 14rem; }
.mono-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mono-letra {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: var(--radio-sm); font-weight: var(--peso-fuerte);
  background: var(--color-primario-suave); color: var(--color-primario);
}
.mono-letra--sube { background: var(--color-alerta-suave); color: var(--color-alerta); }
.mono-letra--pasa { background: var(--color-error-suave); color: var(--color-error); }
.mono-tope {
  position: relative; width: 150px; height: 8px; margin-bottom: 4px;
  border-radius: var(--radio-full); background: var(--color-superficie-2);
}
.mono-tope i { position: absolute; inset: 0 auto 0 0; border-radius: var(--radio-full); background: var(--color-primario); }
.mono-tope i.mono-tope__barra--alerta { background: var(--color-alerta); }
.mono-tope i.mono-tope__barra--error { background: var(--color-error); }
.mono-tope__raya { position: absolute; left: 80%; top: -3px; bottom: -3px; border-left: 1.5px dashed var(--color-alerta); }
.mono-aviso--error { background: var(--color-error-suave); border-color: var(--color-error-suave); color: var(--color-error); }
/* Contra qué tabla se mide (04/11/2026): el texto y el interruptor en un renglón. */
.mono-tabla { flex-wrap: wrap; }
.mono-tabla__texto { flex: 1 1 24rem; }
.mono-tabla .segmentos { flex: none; }
.pila > .mono-aviso, .contenido > .mono-aviso { margin-top: var(--esp-3); }
.mono-otro-tramo { padding: 0 var(--esp-4); }
.mono-otro-tramo > summary { cursor: pointer; color: var(--color-texto-suave); }
.mono-otro-tramo[open] { padding-bottom: var(--esp-3); }
.mono-grafico { height: 200px; }
.mono-grafico__columna { width: min(28px, 70%); background: var(--color-primario); }
.mono-grafico__ritmo {
  position: absolute; left: 0; right: 0; z-index: 2;
  border-top: 2px dashed var(--color-alerta); pointer-events: none;
}
.mono-grafico__ritmo span {
  position: absolute; right: 0; top: -1.4em; padding: 0 var(--esp-1);
  font-size: var(--texto-xs); font-weight: var(--peso-semi); color: var(--color-alerta);
  background: var(--color-superficie);
}
.mono-grafico__meses {
  display: grid; gap: var(--esp-1); margin-left: 4.5rem; padding-top: var(--esp-1);
  font-size: var(--texto-xs); color: var(--color-texto-tenue); text-align: center;
}
.mono-grafico__referencias { margin: var(--esp-2) 0 0 4.5rem; flex-wrap: wrap; }
.mono-grafico__muestra-ritmo { display: inline-block; width: 14px; border-top: 2px dashed var(--color-alerta); }
.mono-grafico__unidad { margin-left: auto; }
.mono-ingresos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--color-borde); }
.mono-ingresos > .tabla-contenedor + .tabla-contenedor { border-left: 1px solid var(--color-borde); }
@media (max-width: 900px) { .mono-ingresos { grid-template-columns: minmax(0, 1fr); } }
.mono-recategorizacion { border-top: 1px solid var(--color-borde); font-size: var(--texto-sm); }
.mono-costado__bajada { margin: 0 0 var(--esp-2); }
.mono-costado__subtitulo { margin: var(--esp-3) 0 var(--esp-1); font-size: var(--texto-xs); font-weight: var(--peso-semi); color: var(--color-texto-suave); }
.mono-escalon {
  display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radio-sm); font-size: var(--texto-sm);
}
.mono-escalon--actual { background: var(--color-primario-suave); }
.mono-escalon__tope { flex: 1; min-width: 0; color: var(--color-texto-suave); }
.mono-escalon__queda { white-space: nowrap; }
.mono-letra--actual { background: var(--color-primario); color: var(--color-superficie); }
.mono-barra { height: 8px; margin: var(--esp-2) 0; border-radius: var(--radio-full); background: var(--color-superficie-2); overflow: hidden; }
.mono-barra i { display: block; height: 100%; background: var(--color-primario); }
.mono-barra i.mono-tope__barra--alerta { background: var(--color-alerta); }
.mono-barra i.mono-tope__barra--error { background: var(--color-error); }
.mono-dato { display: flex; justify-content: space-between; gap: var(--esp-2); padding: var(--esp-1) 0; }
.mono-renglon { display: flex; justify-content: space-between; gap: var(--esp-2); padding: var(--esp-1) 0; border-top: 1px solid var(--color-borde); }
.mono-filtros__periodo { width: 6.5rem; }
.mono-filtros .campo__control--select { max-width: 16rem; }
.mono-turno { position: relative; }
.mono-turno > summary { cursor: pointer; list-style: none; }
.mono-turno > summary::-webkit-details-marker { display: none; }
.mono-turno__menu {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--esp-1);
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
  box-shadow: var(--sombra-2, 0 6px 18px rgba(28,37,48,.12));
}
.mono-turno__menu form { margin: 0; }
.mono-turno__menu .boton { justify-content: flex-start; width: 100%; }
.mono-punto { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--color-texto-tenue); }
.mono-punto--bien { background: var(--color-exito); }
.mono-punto--error { background: var(--color-error); }
.mono-filtros { flex-wrap: nowrap; }
.mono-filtros > .campo__control { width: auto; flex: none; }

/* Los anexos del papel de Ganancias, plegados (02/11/2026, maqueta aprobada):
   la determinación es lo que se lee; la retribución, los créditos, el ajuste
   por inflación y los anticipos se abren cuando hacen falta. */
.papel-anexo > summary { cursor: pointer; list-style: none; }
.papel-anexo > summary::-webkit-details-marker { display: none; }
.papel-anexo > summary .panel__titulo::before { content: "▸ "; color: var(--color-texto-tenue); }
.papel-anexo[open] > summary .panel__titulo::before { content: "▾ "; }
.papel-anexo:not([open]) > summary { border-bottom: 0; }
.papel-anexo > .panel { border: 0; box-shadow: none; border-radius: 0; border-top: 1px solid var(--color-borde); }
.mono-renglon > .insignia { flex: none; align-self: flex-start; white-space: nowrap; }
.papel-anexo > summary,
.panel-inicio .papel .panel__encabezado,
.costado-fijo .panel__encabezado { flex-direction: column; align-items: flex-start; }

/* Los grupos económicos, una tarjeta por grupo de a dos columnas
   (03/11/2026, maqueta aprobada). */
.grupos-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); align-items: start; }
@media (max-width: 900px) { .grupos-grilla { grid-template-columns: minmax(0, 1fr); } }
/* Las obligaciones del listado de clientes: chips chicos, para que el
   renglón entre con el costado al lado. */
.chips--chicos { gap: 3px; }
.chips--chicos .chip { font-size: var(--texto-xs); padding: 1px 6px; }
.celda-cliente { max-width: 22rem; }
.celda-cliente .identidad__texto { min-width: 0; }
.celda-obligaciones { min-width: 15rem; }

/* La bandeja de Tareas en la franja (03/11/2026): la barra de carga de cada
   persona al costado, con su número. */
.tareas-carga { display: inline-flex; align-items: center; gap: var(--esp-2); }
.tareas-carga .mono-barra { width: 90px; margin: 0; }

/* El calendario en la franja (03/11/2026): la obligación es el título de su
   grupo y no una celda que abarca los tramos; el mes se elige en la franja;
   el costado lleva el día por día o el día elegido del almanaque. */
.tabla .mono-tablero__grupo .hoja-ruta__obligacion { width: auto; background: var(--color-superficie-2); padding-left: var(--esp-3); }
.hoja-ruta__mes { display: inline-flex; align-items: center; gap: var(--esp-1); }
.hoja-ruta__mes .campo__control { width: 10rem; }
.hoja-ruta__dia { align-items: center; }
.hoja-ruta__dia-nombre { width: 4.5rem; flex: none; }
.hoja-ruta__dia .mono-barra { flex: 1; margin: 0; }
.hoja-ruta__dia .celda-numero { width: 2rem; flex: none; }
.hoja-ruta__titulo-dia { display: flex; align-items: center; gap: var(--esp-2); }
.hoja-ruta__del-dia + .hoja-ruta__del-dia { margin-top: var(--esp-2); }
.hoja-ruta__del-dia .hoja-ruta__clientes { margin: var(--esp-1) 0 0; gap: var(--esp-1) var(--esp-2); }
.hoja-ruta--almanaque { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); }
.hoja-ruta--almanaque .almanaque { margin-bottom: var(--esp-4); }
/* Los clientes de la hoja son etiquetas, como en la maqueta: el color dice
   cómo viene cada uno sin depender sólo del tono del texto. */
.hoja-ruta__clientes { gap: var(--esp-1); }
.hoja-ruta__cliente { padding: 2px 8px; border-radius: var(--radio-sm); background: var(--color-superficie-2); font-size: var(--texto-sm); }
.hoja-ruta__cliente--hecha { background: var(--color-exito-suave); color: var(--color-exito); }
.hoja-ruta__cliente--vencida { background: var(--color-error-suave); }

/* Las pantallas de pasos (maqueta del 04/11/2026, tercera fila): los pasos
   arriba con el actual marcado (componentes/_pasos.html). En píldoras para una
   importación; en tarjetas con su detalle para la facturación del mes. */
.pasos { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: 0 0 var(--esp-4); padding: 0; list-style: none; font-size: var(--texto-sm); }
.pasos__paso { display: flex; }
.pasos__caja {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--color-borde); border-radius: var(--radio-full);
  background: var(--color-superficie); color: var(--color-texto-tenue);
}
.pasos__enlace { text-decoration: none; }
.pasos__enlace:hover { border-color: var(--color-primario-borde); color: var(--color-primario-texto); }
.pasos__numero {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--color-borde-fuerte); font-size: var(--texto-xs);
}
.pasos__texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pasos__nombre { font-weight: var(--peso-semi); }
.pasos__detalle { font-size: var(--texto-xs); color: var(--color-texto-tenue); }
.pasos__paso--actual .pasos__caja { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-texto-invertido); }
.pasos__paso--actual .pasos__numero { background: var(--color-texto-invertido); border-color: var(--color-texto-invertido); color: var(--color-primario); }
.pasos__paso--actual .pasos__detalle { color: inherit; opacity: .85; }
.pasos__paso--hecho .pasos__caja { background: var(--color-exito-suave); border-color: transparent; color: var(--color-exito); }
.pasos__paso--hecho .pasos__numero { border-color: currentColor; }
.pasos--tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pasos--tarjetas .pasos__caja { flex: 1; border-radius: var(--radio-lg); padding: var(--esp-3) var(--esp-4); }
@media (max-width: 860px) { .pasos--tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Una elección corta con su explicación, en tarjetas (qué archivo es, qué
   traer de ARCA). La radio va adentro, así anda sin JavaScript. */
.opciones-tarjeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
@media (max-width: 860px) { .opciones-tarjeta { grid-template-columns: minmax(0, 1fr); } }
.opcion-tarjeta {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--color-borde); border-radius: var(--radio);
  background: var(--color-superficie); cursor: pointer;
}
.opcion-tarjeta:hover { border-color: var(--color-primario-borde); }
.opcion-tarjeta input { margin-top: 0.2rem; accent-color: var(--color-primario); flex: none; }
.opcion-tarjeta:has(input:checked) { border-color: var(--color-primario-borde); background: var(--color-primario-suave); }
.opcion-tarjeta:has(input:checked) .opcion-tarjeta__nombre { color: var(--color-primario-texto); }
.opcion-tarjeta:has(input:disabled) { cursor: default; background: var(--color-alerta-suave); border-color: transparent; }
.opcion-tarjeta__texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.opcion-tarjeta__nombre { font-weight: var(--peso-semi); }
.opcion-tarjeta__detalle { font-size: var(--texto-sm); color: var(--color-texto-tenue); }

/* Las cifras del paso de revisar: entran, ya estaban, quedan afuera. */
.cifras-paso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-4); }
@media (max-width: 860px) { .cifras-paso { grid-template-columns: minmax(0, 1fr); } }
.cifra-paso { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-4); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); }
.cifra-paso__etiqueta { font-size: var(--texto-sm); color: var(--color-texto-suave); }
.cifra-paso__valor { font-size: var(--texto-2xl); font-weight: var(--peso-semi); }
.cifra-paso__detalle { font-size: var(--texto-sm); color: var(--color-texto-tenue); }
.cifra-paso--exito .cifra-paso__valor { color: var(--color-exito); }
.cifra-paso--alerta { background: var(--color-alerta-suave); border-color: transparent; }
.cifra-paso--alerta .cifra-paso__valor, .cifra-paso--alerta .cifra-paso__etiqueta { color: var(--color-alerta); }

/* La zona de soltar el archivo: es el mismo campo de siempre, más grande. */
.zona-archivo { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: var(--esp-6) var(--esp-4); border: 2px dashed var(--color-borde-fuerte); border-radius: var(--radio-lg); background: var(--color-superficie-2); text-align: center; }
.zona-archivo:focus-within, .zona-archivo--encima { border-color: var(--color-primario); }
.zona-archivo__titulo { font-weight: var(--peso-semi); color: var(--color-texto); }

/* Un grupo de tabla que se pliega (`data-plegar-grupo`, en la base): la
   flecha va antes del título y gira al abrir, como `.plegable`. El renglón
   entero se aprieta. */
[data-grupo-titulo] { cursor: pointer; }
.grupo-plegable {
  border: 0; background: none; padding: 0 0.4em 0 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
}
.grupo-plegable::before {
  content: "›"; display: inline-block; transform: rotate(90deg);
  transition: transform var(--transicion);
}
.grupo-plegable[aria-expanded="false"]::before { transform: none; }

/* La botonera de la ventana de confirmación de la base. No es una
   `.barra-acciones`: ésa es la del formulario de la pantalla, y la buscan
   las verificaciones para leer su verbo. */
.dialogo__acciones {
  display: flex; justify-content: flex-end; gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-top: 1px solid var(--color-borde);
  background: var(--color-superficie);
  border-radius: 0 0 var(--radio-lg) var(--radio-lg);
}