/* El chasis usa la escala de espaciado (00-tokens.css) en vez de números elegidos de a uno: 17px
   y 18px de padding no querían decir nada distinto de 16. El desvío máximo es de 2px. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-7);box-shadow:var(--shadow);margin-bottom:var(--sp-7)}
.chartbox{position:relative;height:300px}
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);margin-bottom:var(--sp-3)}
/* «Hay más a la derecha». La clase la pone marcarSombra() en comun/chasis.js cuando la tabla desborda y
   todavía no se llegó al final; se va sola al terminar de scrollear. Sin esto la tabla se cortaba en el
   borde sin ningún aviso y no había forma de saber si faltaba un mes o si el dato no estaba.
   Es una MÁSCARA y no un box-shadow porque un `inset` se pinta antes que los hijos y los fondos de las
   celdas —fila par, encabezado, primera columna pegajosa— lo taparían (ver el comentario de la función).
   No se desvanece a transparente: queda en 30% para que el marco de la tarjeta siga cerrando y el efecto
   se lea como una sombra, no como una tabla recortada. */
.tscroll.mas-der{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),rgba(0,0,0,.30) 100%);
          mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 34px),rgba(0,0,0,.30) 100%)}
/* ---- "No hay nada que mostrar" ----
   Había tres formas de decirlo: una fila de tabla con cuatro declaraciones inline (y el padding en
   16, 18 o 20px según el archivo), un <div class="note"> —que es el mismo cajón que usan las
   ADVERTENCIAS, así que "no hay reclamos" se veía igual que "⚠ CAMMESA está mal cargado"— y un
   .sub. Ahora es .vacio en los dos formatos, fila o bloque.

   .bien es para cuando el vacío es una BUENA noticia: "nada bajo el punto de pedido" no es la
   ausencia de un dato, es que no falta nada. Iba en verde a mano en un solo lugar; ahora es una
   variante con nombre.

   Lo que NO es un estado vacío y sigue siendo .note: "la lista todavía no está habilitada (falta
   correr el SQL en Supabase)". Eso no es que no haya datos, es que falta hacer algo. */
tr.vacio td{text-align:center;color:var(--muted);padding:18px}
tr.vacio.bien td{color:var(--pos)}
.vacio{text-align:center;color:var(--muted);padding:18px 14px;font-size:13.5px;
  background:var(--card);border:1px dashed var(--line);border-radius:var(--r);margin-bottom:12px}
.vacio.bien{color:var(--pos);border-color:#cfe6dc}
/* Alto de las tablas que scrollean. Eran 10 valores distintos escritos a mano en el HTML —260, 280,
   360, 420, 440, 460, 480, 520, 600 y 640— sin ninguna diferencia de criterio entre 460 y 480: eran
   números elegidos de a uno. Tres pasos alcanzan, y ahora el alto se elige nombrando cuánto se
   quiere mostrar, no tipeando un número. La desviación máxima contra el valor viejo es de 80px.
     corta  ~6 filas · listas de apoyo (el detalle de una tarjeta, un ranking corto)
     media  ~10 filas · el caso normal
     larga  ~15 filas · listas de trabajo largas (para corte, judicial, el listado de reclamos) */
.tscroll.corta{max-height:280px}
.tscroll.media{max-height:440px}
.tscroll.larga{max-height:600px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:9px 12px;text-align:right;white-space:nowrap;border-bottom:none}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}
thead th{background:#f7f9fc;color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
thead th:first-child{background:#f7f9fc}
/* ---- Columna ordenable (comun/ordenar.js y attachSort) ----
   La flecha apagada es lo que avisa que la columna se puede ordenar: en las 27 tablas .sortbl no
   había ninguna señal y había que descubrirlo haciendo clic. La activa se ve al 100%. */
thead th.ord{cursor:pointer;user-select:none}
thead th.ord:hover{color:var(--brand-ink);background:#eef3f7}
thead th.ord .ord-fl{opacity:.32;font-size:11px;font-weight:400;margin-left:1px}
thead th.ord:hover .ord-fl{opacity:.6}
thead th.ord.ord-on{color:var(--brand-ink)}
thead th.ord.ord-on .ord-fl{opacity:1;font-weight:700}
.tscroll tbody tr:nth-child(even) td{background:#f9fbfd}
.tscroll tbody tr:hover:not(.total):not(.warn-row):not(.tar-ipc) td{background:var(--accent-bg)}
.tscroll tbody tr.total td,tr.total td{font-weight:700;border-top:1.5px solid var(--brand);background:var(--brand-bg)}
.tscroll tbody tr.total td:first-child,tr.total td:first-child{background:var(--brand-bg)}
/* Pie fijo abajo en las tablas que scrollean: con 293 filas, un total al que hay que scrollear no
   sirve. Estaba resuelto para una sola tabla (#judTbl) y ahora vale para todas las que tienen un
   alto acotado, que son justo las que lo necesitan — en una tabla que se ve entera, sticky no hace
   nada, así que no hay caso en el que moleste.
   Se pide :last-child a propósito: seis tablas tienen VARIAS filas .total (subtotales por sección
   en Margen, Prov, Fact…). Si se pegaran todas, los subtotales se apilarían tapando las filas. Sólo
   se pega el último, que es el total de verdad. */
.tscroll.corta tfoot tr.total td,.tscroll.media tfoot tr.total td,.tscroll.larga tfoot tr.total td,
.tscroll.corta tbody tr.total:last-child td,.tscroll.media tbody tr.total:last-child td,
.tscroll.larga tbody tr.total:last-child td{
  position:sticky;bottom:0;z-index:2;box-shadow:0 -1px 0 var(--line)}
/* ---- Selección múltiple: barra de acción en lote ---- */
.selbar{display:none;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;padding:10px 14px;
  background:var(--accent-bg);border:1px solid var(--accent);border-radius:var(--r);font-size:13.5px}
.selbar.on{display:flex}
.selbar .seln{font-weight:700;color:var(--brand)}
.selbar .selsp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.selchk{width:17px;height:17px;cursor:pointer;vertical-align:middle;accent-color:var(--accent)}
/* La fila seleccionada se distingue del hover para que se vea qué entra en la acción. */
tbody tr.selrow td{background:var(--accent-bg)!important}
@media(pointer:coarse){.selchk{width:22px;height:22px}}
.tscroll tbody tr.warn-row td,tr.warn-row td{background:var(--warn-bg);color:var(--warn);font-weight:600}
.tscroll tbody tr.warn-row td:first-child,tr.warn-row td:first-child{background:var(--warn-bg)}
/* La fila de INFLACIÓN (pestaña Tarifas Nplay): gris, para que se lea como REFERENCIA y no como algo
   que la cooperativa factura — pedido de Matías («quizás en un colorcito gris o algo que se entienda
   que no es algo que facturamos»).
   CONTRASTE MEDIDO, no supuesto (este proyecto ya se tropezó cuatro veces con tinta clara sobre fondo
   claro): texto var(--muted) #5a6862 sobre fondo var(--line-soft) #eef2f0 da 5,18:1 (WCAG AA para
   texto normal pide 4,5:1). Con el fondo más blanco de la tarjeta (var(--card) #fff) da 5,85:1, así
   que cualquiera de los dos cumple; se usa --line-soft porque además diferencia la fila del zebra
   striping normal (nth-child(even) ya usa #f9fbfd para las filas de datos).
   La regla de :hover de arriba excluye .tar-ipc a propósito: si tomara el verde de --accent-bg al
   pasar el mouse, por un instante parecería una fila de datos como cualquier otra.
   Las flechas de pctCell (.pct.up/.down, verde/rojo) TAMBIÉN se fuerzan a gris acá: un ▲/▼ en color
   al lado de la variación del IPC se lee como «esto es bueno/malo», y una suba de precios de
   referencia no es ni una cosa ni la otra — es un dato para comparar, no un resultado a festejar o
   lamentar. Se anula con .pct sin más especificidad que la necesaria, no por el empate de
   especificidad con «tr.tar-ipc td» (que además es frágil si el selector cambia). */
.tscroll tbody tr.tar-ipc td{background:var(--line-soft);color:var(--muted)}
.tscroll tbody tr.tar-ipc td:first-child{background:var(--line-soft);font-weight:600}
.tscroll tbody tr.tar-ipc .pct{color:inherit}
td.pos{color:var(--pos)} td.neg{color:var(--neg)}
.bad,span.bad{color:var(--neg)}
.pct{font-size:12px;font-weight:600}
.pct.up{color:var(--pos)} .pct.down{color:var(--neg)} .pct.flat{color:var(--muted)}
/* ══ LA CASCADA DE TESORERÍA ══════════════════════════════════════════════════════════════════════
   Pedido de Matías: «mejor diseño, para que a la vista sea más simple de comprender y mirar; no algo
   con exceso de colores pero sí alguito». Así que la jerarquía la hace la TIPOGRAFÍA y el COLOR va sólo
   en el importe y sólo por signo (td.pos / td.neg, que ya existían arriba). Ninguna fila lleva fondo
   saturado: nueve renglones con nueve colores se vuelven un semáforo roto.

   Los cinco niveles, de mayor a menor peso visual:
     .casc-hito   DISPONIBLE y POSICIÓN — los dos números que alguien busca al abrir la tabla.
     .casc-sub    subtotal (Total en bancos): negrita, con su regla arriba.
     .casc-mas    renglón que suma o resta al hito siguiente.
     .casc-cta    una cuenta bancaria: el nivel más liviano de los que suman.
     .casc-det    detalle indentado: NO suma, es parte del renglón de arriba. Más chico y en gris.
   Las etiquetas .casc-grupo / .casc-subgrupo no son renglones de datos: son títulos dentro de la tabla.

   Los importes van tabulares (lo hace 00-tokens.css para todo th/td) y alineados a la derecha, que es
   lo que permite comparar una columna de arriba abajo sin leer cada número. */
table.casc td,table.casc th{padding:7px 12px;vertical-align:baseline}
table.casc td.casc-lab,table.casc th.casc-lab{text-align:left}
table.casc td.casc-imp,table.casc th.casc-imp{text-align:right;white-space:nowrap;font-weight:600}
table.casc td.casc-nota,table.casc td.casc-cuando{text-align:left;font-size:12.5px;color:var(--muted)}
table.casc th.casc-nota,table.casc th.casc-cuando{text-align:left}

/* Una cuenta: el renglón más liviano. Sangría chica para que se lea como «parte de los bancos». */
table.casc tr.casc-cta td.casc-lab{padding-left:24px;color:var(--muted)}
table.casc tr.casc-cta td.casc-imp{font-weight:500}

/* Subtotal: negrita y una regla ARRIBA, que es el gesto de «acá se sumó lo de encima». */
table.casc tr.casc-sub td{border-top:1px solid var(--line);font-weight:700;padding-top:9px}

/* Los que suman o restan hacia el hito siguiente. */
table.casc tr.casc-mas td.casc-lab,table.casc tr.casc-menos td.casc-lab{font-weight:600}

/* LOS DOS HITOS. Regla doble arriba (border-top + box-shadow, que es la forma de dibujar dos líneas sin
   un elemento extra), versalita espaciada y el importe un punto más grande. Sin fondo: el peso lo dan
   el trazo y la tipografía. */
table.casc tr.casc-hito td{border-top:2px solid var(--ink);box-shadow:inset 0 3px 0 -2px var(--ink);
  padding-top:11px;padding-bottom:11px}
table.casc tr.casc-hito td.casc-lab{font-weight:800;letter-spacing:.04em;font-size:13.5px}
table.casc tr.casc-hito td.casc-imp{font-weight:800;font-size:16px}
/* Cuando la posición tiene renglones incluidos, el rótulo lo dice y se marca con un filete al costado:
   es la señal de que ESE número no es el número base. Nada de fondo de color — el aviso está en el
   texto, que es lo que sobrevive a una captura de pantalla. */
table.casc tr.casc-hito-mod td.casc-lab{border-left:3px solid var(--accent);padding-left:9px}
/* .casc-inc y .casc-pat se usaban para las píldoras que enumeraban qué renglón estaba conmutado al
   lado de POSICIÓN. Se sacaron el 20/08/2026: cada píldora ensanchaba la tabla y el aviso ya lo da la
   banda ámbar del hito. La clase se conserva SÓLO porque toma.js cita su color como referencia. */
.casc-inc{font-weight:700;color:var(--accent);letter-spacing:0;font-size:13px}

/* Detalle indentado: NO suma. Más chico, gris, con una guía a la izquierda para que se lea como parte
   del renglón de arriba y no como un renglón más de la cuenta. */
table.casc tr.casc-det td{font-size:12.5px;color:var(--muted);padding-top:3px;padding-bottom:3px}
table.casc tr.casc-det td.casc-lab{padding-left:34px;position:relative}
table.casc tr.casc-det td.casc-lab::before{content:'';position:absolute;left:20px;top:.55em;width:8px;
  height:1px;background:var(--line)}
table.casc tr.casc-det td.casc-imp{font-weight:500}

/* Títulos dentro de la tabla: no son datos, así que no compiten con los importes. */
table.casc tr.casc-grupo td{padding-top:16px;font-weight:800;font-size:12px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);border-top:1px solid var(--line)}
table.casc tr.casc-subgrupo td{padding:8px 12px 2px;font-weight:700;font-size:12.5px;color:var(--ink)}

/* Los renglones conmutables. Excluido = gris y sin peso; incluido = tinta normal, con el filete del
   acento a la izquierda. La diferencia se ve de un vistazo sin pintar la fila entera. */
table.casc tr.casc-fuera td{color:var(--muted)}
table.casc tr.casc-fuera td.casc-lab{padding-left:6px}
table.casc tr.casc-fuera td.casc-imp{font-weight:500;opacity:.75}
table.casc tr.casc-fuera-on td{color:var(--ink)}
table.casc tr.casc-fuera-on td.casc-imp{font-weight:700;opacity:1}
table.casc tr.casc-fuera-on td.casc-lab{box-shadow:inset 3px 0 0 var(--accent)}
.casc-chk{display:inline-flex;align-items:center;vertical-align:middle;margin-right:8px;cursor:pointer}
.casc-chk input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);margin:0}
@media(pointer:coarse){.casc-chk input{width:22px;height:22px}}
@media(max-width:700px){
  table.casc td.casc-nota,table.casc th.casc-nota{white-space:normal}
  table.casc tr.casc-cta td.casc-lab{padding-left:14px}
  table.casc tr.casc-det td.casc-lab{padding-left:24px}
  table.casc tr.casc-det td.casc-lab::before{left:12px}
}

/* ── El detalle plegable de la alerta de comprobantes (Inicio) ────────────────────────────────────
   <details> nativo. Se le da forma de control clicable porque el de fábrica se lee como texto suelto y
   nadie descubre que se puede apretar. El triángulo propio del navegador se reemplaza por uno nuestro
   para que gire igual en Chrome y en Safari, donde el de fábrica no coincide.
   El foco visible NO se toca: es la única forma de usar esto con teclado.
   Contrastes medidos: el rótulo --accent sobre --card da 5,14:1 y sobre el hover --brand-bg 4,61:1
   (mínimo 4,5 para texto); el triángulo --muted da 5,85:1 y 5,25:1 (mínimo 3 para un indicador).
   El hover es el que queda más justo: si alguna vez se aclara --accent, este par se rompe primero. */
.cmpdet > summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--sp-4);
  font-size:13px; font-weight:650; color:var(--accent);
  padding:7px 10px; margin-bottom:var(--sp-3);
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
}
.cmpdet > summary::-webkit-details-marker{display:none}
.cmpdet > summary::before{
  content:'▸'; font-size:11px; color:var(--muted);
  transition:transform .15s ease; transform-origin:50% 50%;
}
.cmpdet[open] > summary::before{transform:rotate(90deg)}
.cmpdet > summary:hover{background:var(--brand-bg); border-color:var(--accent)}
/* La tabla ya trae su propio borde y sombra (.tscroll): pegada al summary quedaban dos bordes juntos. */
.cmpdet[open] > summary{margin-bottom:var(--sp-4)}
@media (prefers-reduced-motion:reduce){ .cmpdet > summary::before{transition:none} }

/* ══ LA CASCADA, JERARQUÍA (20/08/2026) ═══════════════════════════════════════════════════════════
   Reemplaza a los tres parches que fueron saliendo con cada nivel nuevo. La tabla llegó a tener SEIS
   niveles de significado —cuentas, subtotal, pasos ± de la cascada, los dos hitos, el desglose de
   cuatro niveles y lo de abajo de la línea— y casi todos se apoyaban en lo mismo: sangría y gris.
   Acá el trabajo se reparte en cuatro recursos, cada uno resolviendo UNA confusión.

   Mockup aprobado por Matías: docs/mockups/2026-08-20-tesoreria-jerarquia.html
   Sin colores nuevos: todo sale de los tokens que ya existen. */

/* 1. LA COLUMNA DE SIGNO. El + y el − salen del texto y forman columna propia, así la aritmética se
      sigue por el borde izquierdo y todos los conceptos empiezan a la misma altura. */
table.casc td.casc-sig,table.casc th.casc-sig{width:22px;padding-left:2px;padding-right:0;
  text-align:center;color:var(--muted);font-weight:700;font-size:13px}
table.casc tr.casc-hito td.casc-sig,table.casc tr.casc-sub td.casc-sig{color:var(--brand2)}

/* 2. CIFRAS TABULARES. Todos los dígitos ocupan lo mismo, así que los importes caen en columna y se
      comparan sin leerlos. Va en toda la columna, incluidos los hitos. */
table.casc td.casc-imp{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* 3. LOS HITOS: banda y doble raya, que es como cierra una hoja de contabilidad. Son los dos números
      que se citan en la reunión, así que dejan de ser una fila más. El ::before dibuja la doble raya
      sobre el ancho entero de la fila (un border-top en cada td dejaría cortes en los bordes). */
table.casc tr.casc-hito td{font-weight:800;font-size:16px;padding-top:11px;padding-bottom:11px;
  border-top:0;border-bottom:0;background:var(--brand-bg);position:relative}
table.casc tr.casc-hito td.casc-imp{font-size:19px;letter-spacing:-.02em}
table.casc tr.casc-hito td.casc-sig{border-radius:8px 0 0 8px}
table.casc tr.casc-hito td.casc-cuando{border-radius:0 8px 8px 0}
table.casc tr.casc-hito td::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  border-top:1px solid var(--brand);border-bottom:1px solid var(--brand)}
table.casc tr.casc-hito td .sub{font-size:12px;font-weight:400}
/* Con algo conmutado el hito ya venía marcado con casc-hito-mod: se conserva y se apoya en la banda. */
table.casc tr.casc-hito-mod td{background:var(--warn-bg)}
table.casc tr.casc-hito-mod td::before{border-top-color:var(--warn);border-bottom-color:var(--warn)}

/* 4. LAS GUÍAS DE ÁRBOL. La profundidad se lee de las líneas verticales y no de la sangría, así que
      se indenta MENOS que antes y se entiende de qué cuelga cada fila aunque el detalle sea largo.
      Cada `.casc-g` es un tramo de guía; el último de la fila lleva el codo (`.fin`). */
table.casc td.casc-lab .casc-g{display:inline-block;width:15px;height:1.15em;vertical-align:top;
  position:relative}
table.casc td.casc-lab .casc-g::before{content:'';position:absolute;left:6px;top:-5px;bottom:-5px;
  width:1px;background:var(--line)}
table.casc td.casc-lab .casc-g.fin::before{bottom:50%}
table.casc td.casc-lab .casc-g.fin::after{content:'';position:absolute;left:6px;top:50%;width:7px;
  height:1px;background:var(--line)}
/* Los cuatro niveles del desglose comparten sangría base: la profundidad la ponen las guías. El
   ::before del detalle viejo (el guioncito suelto) se apaga, porque ahora lo dice el codo. */
table.casc tr.casc-det td.casc-lab,table.casc tr.casc-rub td.casc-lab,
table.casc tr.casc-prov td.casc-lab,table.casc tr.casc-comp td.casc-lab{padding-left:8px}
table.casc tr.casc-det td.casc-lab::before{display:none}
table.casc tr.casc-det td,table.casc tr.casc-rub td,table.casc tr.casc-prov td{font-size:12.5px;
  color:var(--muted);padding-top:3px;padding-bottom:3px}
table.casc tr.casc-comp td{font-size:12px;color:var(--muted);padding-top:2px;padding-bottom:2px;
  border-bottom:0}
table.casc tr.casc-det td.casc-imp,table.casc tr.casc-rub td.casc-imp,
table.casc tr.casc-prov td.casc-imp{font-weight:500}
table.casc tr.casc-comp td.casc-imp{font-weight:400;opacity:.85}
table.casc tr.casc-comp:hover td{background:var(--brand-bg)}

/* 5. ABAJO DE LA LÍNEA SE HUNDE. «Fuera de la posición» está literalmente afuera de la cuenta, así
      que se lee como otra superficie: fondo apenas distinto y doble raya de separación. */
table.casc tbody.casc-abajo td{background:#fbfcfc}
table.casc tbody.casc-abajo tr.casc-grupo td{padding-top:18px;border-top:3px double var(--line);
  letter-spacing:.09em;font-size:11px}

/* Apagado: ni rojo ni tachado. Un renglón destildado es una hipótesis de trabajo, no un error — y el
   tachado, en una tabla de plata, se lee como «anulado». */
table.casc tr.casc-tog-off td{opacity:.45}
table.casc tr.casc-tog-off td.casc-imp{font-weight:500}
table.casc tr.casc-tog td.casc-lab{padding-left:8px}

/* El rótulo que abre y cierra un grupo. */
.casc-abrir{cursor:pointer;border-radius:6px;padding:1px 4px;margin-left:-4px}
.casc-abrir:hover{background:var(--brand-bg)}
.casc-abrir:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.casc-flecha{display:inline-block;width:.9em;color:var(--muted);font-size:11px}

@media(max-width:700px){
  table.casc td.casc-lab .casc-g{width:11px}
  table.casc td.casc-lab .casc-g::before,table.casc td.casc-lab .casc-g.fin::after{left:4px}
  table.casc td.casc-sig,table.casc th.casc-sig{width:16px}
  table.casc tr.casc-hito td{font-size:15px}
  table.casc tr.casc-hito td.casc-imp{font-size:17px}
}