/**
 * 04-rejilla.css — La tabla del flujo de caja.
 *
 * Es el componente más denso de la aplicación y el único con reglas de
 * posicionamiento no triviales, por eso vive aparte.
 *
 * FIJADO EN DOS EJES. La primera columna (`.cor`) se fija a la izquierda y las
 * dos filas de encabezado se fijan arriba. Para que `position: sticky` no se
 * lleve por delante los bordes, la tabla usa `border-collapse: separate` y cada
 * celda pinta solo su borde derecho e inferior.
 *
 * ESCALERA DE z-index:
 *   6  esquina superior izquierda (fija en ambos ejes)
 *   4  primera columna del cuerpo
 *   3  filas de encabezado
 *   2  celda con foco (su anillo debe montarse sobre las vecinas)
 *
 * ALTURAS FIJAS DEL ENCABEZADO. La segunda fila se ancla en `top: 38px`, que es
 * exactamente la altura de la primera. Si cambia una, cambia la otra.
 */

.gwrap {
  overflow: auto;
  max-height: min(70vh, 760px);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

table.g {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table.g th, table.g td {
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.g thead th { position: sticky; z-index: 3; background: var(--surf2); font-weight: 600; }
table.g thead tr:nth-child(1) th { top: 0;    height: 38px; }
table.g thead tr:nth-child(2) th { top: 38px; height: 24px; }

th.cor, td.cor {
  position: sticky;
  left: 0;
  z-index: 4;
  width: 252px;
  min-width: 252px;
  max-width: 252px;
  background: var(--surf);
  border-right: 1px solid var(--line2);
}
thead th.cor { z-index: 6; background: var(--surf2); }

/* ── Encabezado de semana ────────────────────────────────────────────── */
.wk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 9px;
  line-height: 1.2;
}
.wk .n { font-family: var(--f-num); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
.wk .d { font-family: var(--f-num); font-size: 9.5px; color: var(--tx3); }

th.wcol { min-width: 104px; }
th.wcol.hoy  { background: var(--ambSoft); box-shadow: inset 3px 0 0 var(--amb); }
th.wcol.hoy .n { color: var(--amb); }
th.wcol.hist { background: var(--surf-hist); }
th.wcol.hist .n { color: var(--tx3); }

th.sub {
  min-width: 104px;
  text-align: center;
  font-family: var(--f-num);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx3);
}
th.sub.hist { background: var(--surf-hist); }
th.sub.hoy  { background: var(--ambSoft); }

/* Candado de congelado */
.lk {
  position: absolute;
  top: 2px;
  right: 3px;
  padding: 2px;
  background: none;
  border: 0;
  color: var(--tx3);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.lk:hover { color: var(--acc); }

/* ── Columna de conceptos ────────────────────────────────────────────── */
td.cor .lbl { display: flex; align-items: center; gap: 7px; padding: 3px 9px; overflow: hidden; }
td.cor .lbl .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  flex: none;
  padding: 1px 5px;
  border: 1px solid var(--line2);
  border-radius: 2px;
  font-family: var(--f-num);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx3);
}
.chip.f { border-color: var(--accLine); background: var(--accSoft); color: var(--acc); }

.rowact { flex: none; display: flex; gap: 2px; opacity: 0; }
tr:hover .rowact { opacity: 1; }

/* ── Celdas de valor ─────────────────────────────────────────────────── */
td.c { position: relative; height: 26px; text-align: right; }
td.c.hist { background: var(--surf-hist); }
td.c.hoy  { background: color-mix(in srgb, var(--ambSoft) 45%, transparent); }

td.c input {
  width: 100%;
  height: 25px;
  padding: 0 8px;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: right;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
td.c input:hover:not(:disabled) { background: var(--surf2); box-shadow: inset 0 0 0 1px var(--line2); }
td.c input:focus {
  position: relative;
  z-index: 2;
  outline: 0;
  background: var(--surf);
  box-shadow: inset 0 0 0 2px var(--focus);
}

/* Punto ámbar: valor sobrescrito a mano, ya no lo calcula el modelo. */
td.c.ovr::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amb);
}

td.c .ro {
  display: block;
  padding: 0 8px;
  line-height: 25px;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* ── Filas estructurales ─────────────────────────────────────────────── */
tr.grp td {
  height: 24px;
  background: var(--surf2);
  font-family: var(--f-num);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx2);
}
tr.grp td.cor { background: var(--surf2); padding: 0 9px; }
tr.grp.ing td.cor { box-shadow: inset 3px 0 0 var(--pos); }
tr.grp.sal td.cor { box-shadow: inset 3px 0 0 var(--neg); }

tr.sub td { background: color-mix(in srgb, var(--surf2) 45%, transparent); font-size: 12px; }
tr.sub td.cor {
  background: color-mix(in srgb, var(--surf2) 45%, var(--surf));
  font-style: italic;
  color: var(--tx2);
}
tr.sub td.cor .lbl { padding-left: 20px; }

tr.tot td { background: var(--surf3); border-top: 1px solid var(--line2); font-weight: 700; }
tr.tot td.cor { background: var(--surf3); }

tr.neto td { background: var(--surf2); font-weight: 600; }
tr.neto td.cor { background: var(--surf2); }

tr.saldo td {
  background: var(--accSoft);
  border-top: 1px solid var(--accLine);
  border-bottom: 1px solid var(--accLine);
  font-weight: 700;
}
tr.saldo td.cor { background: var(--accSoft); color: var(--acc); }

.pos  { color: var(--pos); }
.negv { color: var(--neg); }
.mut  { color: var(--tx3); }