/* FINANZAS › PROYECCIÓN — la planilla de carga.
   Es una grilla editable, y una grilla editable tiene una exigencia que una tabla de lectura no
   tiene: la mano tiene que poder ir de celda en celda sin pensar. De ahí las decisiones de acá —
   columna de concepto pegada, celdas angostas y parejas, y el estado de cada celda visible de un
   vistazo: vacía, cargada, o hecha. */

.pgrid .tscroll{ overflow:auto; max-height:70vh }
table.ptab{ border-collapse:separate; border-spacing:0; font-size:13px; width:auto; min-width:100% }
table.ptab th, table.ptab td{ border-bottom:1px solid var(--line-soft); padding:0; text-align:right; white-space:nowrap }
table.ptab thead th{
  position:sticky; top:0; z-index:3; background:var(--card); padding:7px 8px;
  font-weight:600; color:var(--muted); border-bottom:1px solid var(--line);
}

/* La columna de concepto queda fija: con 31 columnas de días, perder de vista de qué fila se trata
   es el error más fácil de cometer y el más caro. */
table.ptab .pconcepto{
  position:sticky; left:0; z-index:2; background:var(--card);
  text-align:left; padding:6px 10px 6px 8px; min-width:230px; max-width:300px;
  overflow:hidden; text-overflow:ellipsis;
}
table.ptab thead th.pconcepto{ z-index:4 }

/* Las tres columnas de referencia, antes de los períodos: Pendiente, Estimado y el Saldo inicial.
   Van visualmente separadas de las celdas de carga —fondo apenas distinto y un borde a la derecha
   del saldo inicial— porque no son lo mismo: dos salen de ProCoop o son del mes entero, y las otras
   son la carga día por día. Mezclarlas invita a escribir en la columna equivocada. */
th.pref, td.pref{ background:color-mix(in srgb, var(--ink) 3%, transparent); min-width:86px }
td.pref{ padding:6px 8px; font-variant-numeric:tabular-nums; color:var(--muted) }
td.pref.pvenc{ color:var(--neg) }                    /* hay saldo vencido: se ve sin buscarlo */
td.pref.pest{ padding:0; color:var(--ink) }
td.pref.pest input.pine{ color:var(--ink); font-weight:500 }
th.pcero, td.pcero{
  min-width:96px; border-right:2px solid var(--line);
  background:color-mix(in srgb, var(--accent) 4%, transparent);
}
td.pcero{ padding:6px 8px; font-variant-numeric:tabular-nums }
td.pcerosaldo{ padding:0 }
td.pcerosaldo input.pini{ font-weight:700; color:var(--ink) }
tr.pres td.sinini{ color:var(--muted); font-weight:500 }

/* El triángulo de plegar una categoría */
.ptog{ display:inline-block; width:14px; color:var(--muted); font-size:10px }
tr.pgrp.psub:hover .pconcepto{ background:color-mix(in srgb, var(--accent) 10%, var(--card)) }

/* Celdas de dato */
td.pcel{ position:relative; min-width:78px }
/* El estilo de un campo de carga NO puede depender de en qué columna está. Esto arrancó escrito como
   `td.pcel input.pin` —solo las celdas de día— y los otros dos campos editables, el **Estimado** del
   mes y el **Saldo inicial**, se quedaban con el input por defecto del navegador: un cuadro blanco
   con borde, distinto de todas las celdas de al lado. Se cargan igual, así que se tienen que ver
   igual. La regla va por la clase `.pin`, que es lo que los tres comparten. */
input.pin{
  width:100%; border:0; background:transparent; text-align:right;
  padding:6px 8px; font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--ink); font-family:inherit;
}
input.pin::placeholder{ color:transparent }
input.pin:hover{ background:color-mix(in srgb, var(--accent) 6%, transparent) }
input.pin:focus{
  outline:0; background:var(--card);
  box-shadow:inset 0 0 0 2px var(--accent); border-radius:4px;
}
/* Solo en las celdas de día: el hueco de la derecha es para el tilde de la esquina. En el Estimado y
   en el Saldo inicial no hay tilde, así que ahí ese hueco desalinearía el número contra su columna. */
td.pcel input.pin{ padding-right:20px }
td.pcel .pv{ display:block; padding:6px 8px; font-variant-numeric:tabular-nums }
td.pcel.pcargada{ background:color-mix(in srgb, var(--accent) 5%, transparent) }
/* Hecho: verde suave. Es el equivalente del tilde de la planilla y tiene que leerse sin buscarlo. */
td.pcel.pconf{ background:color-mix(in srgb, var(--pos) 12%, transparent) }
td.pcel.multi{ background:color-mix(in srgb, var(--warn) 10%, transparent); cursor:help }
td.pcel.multi .pn{
  position:absolute; top:2px; right:3px; font-size:9px; font-weight:700;
  color:var(--warn-bright); line-height:1;
}

/* El tilde. Chico, en la esquina, y siempre en el mismo lugar: la mano lo encuentra sin mirar. */
.ptick{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; line-height:14px; padding:0; border-radius:4px;
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  font-size:10px; cursor:pointer; opacity:.35; transition:opacity .12s, background .12s;
}
td.pcel:hover .ptick{ opacity:1 }
.ptick.on{ opacity:1; background:var(--pos); border-color:var(--pos); color:#fff; font-weight:700 }
.ptick.ro{ cursor:default; position:static; transform:none; margin-left:4px }
.ptick.off{ position:static; display:inline-block; width:0 }

/* Filas de agrupación y totales */
tr.pgrp td{ font-weight:600; background:color-mix(in srgb, var(--ink) 4%, transparent); padding:6px 8px }
tr.pgrp.ping td, tr.pgrp.pegr td{
  font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
}
tr.pgrp.psub td{ font-weight:500; background:color-mix(in srgb, var(--ink) 2%, transparent) }
tr.pgrp .pconcepto{ background:color-mix(in srgb, var(--ink) 6%, var(--card)) }
tr.pfila:hover td{ background:color-mix(in srgb, var(--accent) 4%, transparent) }
tr.pfila:hover .pconcepto{ background:color-mix(in srgb, var(--accent) 8%, var(--card)) }
td.ptot{ font-weight:600; padding:6px 8px; font-variant-numeric:tabular-nums }

/* El resultado por columna: es la fila que se mira para decidir si se mueve un pago, así que queda
   pegada abajo mientras se scrollea la grilla. */
tr.pres td{
  position:sticky; bottom:26px; z-index:3;
  background:var(--card); border-top:2px solid var(--line); font-weight:700;
  padding:8px; font-variant-numeric:tabular-nums;
}
tr.pres.pacum td{
  bottom:0; border-top:1px solid var(--line-soft);
  background:color-mix(in srgb, var(--accent) 7%, var(--card));
}
tr.pres .pconcepto{ z-index:4 }
tr.pres td.pos{ color:var(--pos) }
tr.pres td.neg{ color:var(--neg) }

/* El buscador de conceptos */
.plrow{ padding:7px 9px; border-radius:6px; cursor:pointer; border:1px solid transparent }
.plrow:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent); border-color:var(--line) }

/* ── Ingreso vs egreso: que se vea de qué lado está cada fila ─────────────────────────────────────
   Las cabeceras INGRESOS y EGRESOS tenían la MISMA regla, así que no se distinguían. Y el problema
   de fondo aparece al hacer scroll: una fila como «HONORARIOS» no dice de qué lado está. Por eso el
   color no va sólo en las dos cabeceras: cada fila y cada sub-bloque llevan un borde en su celda de
   concepto. Se usan los tokens --pos/--neg que ya existen; no se inventa una paleta nueva. */
tr.pgrp.ping td{ background:color-mix(in srgb, var(--pos) 12%, transparent) }
tr.pgrp.pegr td{ background:color-mix(in srgb, var(--neg) 12%, transparent) }
tr.pgrp.ping .pconcepto{ color:var(--pos); border-left:4px solid var(--pos) }
tr.pgrp.pegr .pconcepto{ color:var(--neg); border-left:4px solid var(--neg) }
tr.pl-i .pconcepto{ border-left:4px solid color-mix(in srgb, var(--pos) 55%, transparent) }
tr.pl-e .pconcepto{ border-left:4px solid color-mix(in srgb, var(--neg) 55%, transparent) }
tr.pgrp.psub.pl-i td{ background:color-mix(in srgb, var(--pos) 5%, transparent) }
tr.pgrp.psub.pl-e td{ background:color-mix(in srgb, var(--neg) 5%, transparent) }

/* ── El buscador de filas ─────────────────────────────────────────────────────────────────────────
   Oculta filas por CSS y NO filtra los datos: así los totales de grupo siguen siendo los del mes de
   verdad. Filtrando los datos, buscar una fila haría parecer que el mes cambió. */
tr.pl-oculta{ display:none }
.pbusca{ display:flex; gap:8px; align-items:center; margin:0 0 8px }
.pbusca input{ flex:1; min-width:200px; padding:6px 10px; border:1px solid var(--line); border-radius:6px }

/* El Estimado de las filas de facturación no se carga: sale de ProCoop. Se distingue del que sí se
   tipea, para que nadie busque el campo que no está. */
td.pest.pfacreal{ font-style:italic; color:var(--muted) }