/* ============================================================
   Vista INDICADORES (KPIs del período + pivote).
   ============================================================
   Extraído VERBATIM de styles.css el 20-ago-2026 (líneas 4053-4289), espejando la regla
   de `js/<zona>.js`: la hoja de una zona se llama como su archivo de JS.
   ⚠⚠ EL ORDEN DE CARGA ES LA CASCADA: este archivo va DESPUÉS de styles.css y en el
   mismo orden relativo que tenía adentro (ver los <link> de index.html). Moverlo de
   lugar cambia qué regla gana, sin ningún error.
   ============================================================ */
/* ===== Vista INDICADORES ===== */
/* Encabezado: el selector de período a la derecha del título, con el año de comparación al lado
   (el usuario tiene que saber CONTRA QUÉ mira la variación sin abrir nada). */
.ind-header-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* El selector de período es EL control de esta vista: todo lo que se ve arriba y abajo depende
   de él, así que va como acción primaria (una sola por pantalla). Se pinta sólo acá y no en el
   componente compartido: en Operaciones o Cobranzas el período es un filtro más entre varios y
   ahí un botón lleno competiría con el resto de la toolbar. */
/* ⚠ El alto lo fija `.fp-trigger` en 34px: acá sólo se cambia el color y el padding HORIZONTAL.
   Tocar el vertical con un alto fijo puesto no agranda el botón, aplasta el contenido. */
/* Cinco KPIs, no cuatro (entró "Neto de cartera"). ⚠ NO van con `repeat(5, 1fr)`: a 1280px eso
   deja cards de ~185px y el monto de prima se recorta con ellipsis — el dato principal de la
   vista. Con auto-fit se acomodan 5 en una fila cuando hay lugar y bajan a dos filas cuando no,
   que es preferible a truncar. */
#view-indicadores .kpi-grid-compact { grid-template-columns:repeat(auto-fit, minmax(215px, 1fr)); }

#filter-ind-periodo .fp-trigger { background:var(--c-primary); border-color:var(--c-primary); color:#fff;
  height:36px; padding:0 12px 0 16px; font-size:13px; box-shadow:var(--sh-xs); }
#filter-ind-periodo .fp-trigger:hover { background:var(--c-primary-strong); border-color:var(--c-primary-strong); }
#filter-ind-periodo .fp-caret { color:rgba(255,255,255,.75); }

/* ── Números ──────────────────────────────────────────────────────────────────────────────
   TABULARES en toda la vista: con figuras proporcionales las columnas de plata no alinean por
   la coma y la tabla se lee como una lista de textos, no como datos. El símbolo $ va atenuado
   y a menor tamaño para que el ojo caiga en la cifra. */
.ind-tabla .ind-num, .ind-kpis .kpi-value, .ind-var { font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
.ind-moneda { color:var(--c-text-3); font-size:.82em; margin-right:2px; font-weight:400; }

/* ── Variación: chip, no texto suelto ─────────────────────────────────────────────────────
   El fondo tenue lo separa de la cifra que está al lado (si no, dos números pegados compiten)
   y la flecha acompaña al color, que nunca puede ser la única señal. */
.ind-var { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:500;
  padding:2px 7px; border-radius:var(--r-pill); white-space:nowrap; line-height:1.4; }
.ind-var-sube   { color:var(--c-success); background:var(--c-success-bg); }
.ind-var-baja   { color:var(--c-danger);  background:var(--c-danger-bg); }
.ind-var-neutra { color:var(--c-text-3);  background:var(--c-border-soft); }
/* ⚠ La card compacta tiene 66px con overflow hidden (alto uniforme entre vistas, decisión del
   proyecto). Con la variación en una TERCERA línea se pasaba 5px y quedaba cortada: va AL LADO
   de la cifra, que además le da más aire al número —que es el dato— y deja la card en dos
   líneas. El valor del año anterior vive en el title del chip. */
.ind-kpi-row { display:flex; align-items:baseline; gap:8px; min-width:0; }
.ind-kpi-row .kpi-value { font-size:20px; letter-spacing:-.2px; white-space:nowrap; }
.ind-kpi-row .ind-var { flex-shrink:0; font-size:11px; padding:1px 6px; line-height:1.3; }

/* ── Selector de dimensión ────────────────────────────────────────────────────────────────
   Chips y no un <select>: son cuatro, el cambio es instantáneo (no pide datos al server) y
   verlos todos muestra que la tabla se puede pivotear. */
.ind-dims { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.ind-dims-label { font-size:12px; color:var(--c-text-3); margin-right:2px; }
.ind-chip { font-size:13px; padding:7px 15px; border-radius:var(--r-pill); border:1px solid var(--c-border);
  background:var(--c-surface); color:var(--c-text-2); cursor:pointer; font-weight:500;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.ind-chip:hover { border-color:var(--c-secondary); color:var(--c-text); }
.ind-chip.on { background:var(--c-primary); border-color:var(--c-primary); color:#fff; }

/* ── Tabla ────────────────────────────────────────────────────────────────────────────────
   Filas de 44px (no los 60 de .list-table-uniform, que es para filas con dos renglones):
   acá cada fila es UN dato y el alto de más sólo obliga a scrollear. 44 sigue siendo un
   destino táctil válido. */
.ind-tabla table { table-layout:fixed; }
/* ⚠ `table.list-table td` es 0-1-2 y le gana a `.ind-tabla td` (0-1-1): con el selector corto,
   el padding de 13px de la tabla base sobrevivía y las filas quedaban en 53px en vez de 44 —
   medido, no deducido. Por eso los selectores llevan la tabla adentro. */
.ind-tabla table.list-table th { height:38px; box-sizing:border-box; white-space:nowrap; font-size:10.5px;
  padding:9px 8px; letter-spacing:.2px; }
.ind-tabla table.list-table td { padding-left:8px; padding-right:8px; }
.ind-tabla table.list-table th:first-child, .ind-tabla table.list-table td:first-child { padding-left:14px; }
.ind-tabla table.list-table th:last-child, .ind-tabla table.list-table td:last-child { padding-right:14px; }
.ind-tabla table.list-table td { height:44px; box-sizing:border-box; padding:6px 14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ind-tabla table.list-table .ind-num { text-align:right; }

/* ── Jerarquía dentro de las celdas ───────────────────────────────────────────────────────
   Antes todas las cifras y todos los guiones iban al mismo gris: una grilla de 9 columnas así
   se lee plana, que fue exactamente el comentario de Martín. El dato pesa, el vacío se corre
   del camino, y las bajas se distinguen sin depender sólo del color (llevan su propia columna
   y el Neto lleva signo). */
.ind-cero { color:var(--c-border); }
.ind-cant { color:var(--c-text); font-weight:500; }
.ind-cant-baja { color:var(--c-danger); }
/* Éxito: el % manda y el ratio queda de apoyo, más chico y atenuado, sobre la misma celda. */
.ind-exito { display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.ind-exito b { font-weight:600; color:var(--c-text); font-size:13px; }
.ind-exito i { font-style:normal; font-size:10.5px; color:var(--c-text-3); margin-top:1px; }
.ind-tabla tbody tr:hover { background:var(--c-border-soft); }

/* Encabezado ordenable: el estado va en aria-sort (lo lee el lector de pantalla) y en el cursor. */
.ind-th-sort { cursor:pointer; user-select:none; }
.ind-th-sort:hover { color:var(--c-text); }
.ind-th-sort .ind-orden { opacity:0; margin-left:4px; font-size:9px; }
.ind-th-sort[aria-sort]:not([aria-sort="none"]) { color:var(--c-primary); }
.ind-th-sort[aria-sort]:not([aria-sort="none"]) .ind-orden { opacity:1; }

/* Primera celda: ícono/logo + nombre + barra de proporción. La barra es el único "gráfico" de
   la vista y no necesita librería: muestra cuánto pesa cada fila sobre el total, que es lo que
   una tabla de números sola no deja ver de un vistazo. */
.ind-fila-id { display:flex; align-items:center; gap:9px; min-width:0; }
.ind-fila-nom { min-width:0; flex:1 1 0; }
.ind-fila-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; line-height:1.25; }
/* ── Peso: la barra tiene COLUMNA PROPIA ──────────────────────────────────────────────────
   Se probaron las dos alternativas y ninguna funciona: colgada del NOMBRE se lee como el
   subrayado de un input, y debajo del MONTO como un artefacto tipográfico bajo los dígitos.
   En su propia columna todas arrancan del mismo borde, que es la única forma de que las
   longitudes se comparen entre sí — una barra que empieza en un x distinto por fila no compara
   nada. El riel tenue marca el 100% (la fila mayor); el % exacto va en el title. */
.ind-peso, .ind-peso-th { padding-left:6px !important; padding-right:14px !important; }
.ind-barra { height:6px; border-radius:3px; background:var(--c-border-soft); overflow:hidden; }
.ind-barra > i { display:block; height:100%; border-radius:3px; background:var(--c-secondary); }
.ind-avatar { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:10.5px; font-weight:600; background:#e0e7ff; color:var(--c-primary); }
.ind-avatar-agr { background:var(--c-border-soft); color:var(--c-text-3); font-size:13px; }
.ind-tabla .ramo-icon-pill { width:26px; height:26px; font-size:13px; }

/* Fila de total: es un resumen, no un dato más — va separada por una línea fuerte y sin hover. */
.ind-tabla table.list-table tfoot td { height:42px; font-weight:600; border-top:2px solid var(--c-border);
  border-bottom:none; background:var(--c-surface); color:var(--c-text); }
.ind-tabla tfoot tr:hover { background:var(--c-surface); }

/* ⚠ Siete columnas con encabezados largos ("Renovaciones", "Anulaciones") no entran abajo de
   ~1200px: el <th> sigue conteniendo la palabra entera y en pantalla se lee "ANULACIONE" — un
   truncado que ningún assert sobre textContent ve, sólo la medición de la caja. La salida es
   un ancho mínimo + scroll DENTRO de la tabla: preferible a inventar abreviaturas o a esconder
   una columna por posición, que es como este proyecto ya se comió una feature invisible a
   ≤1280px. El scroll queda contenido: la PÁGINA no scrollea de costado. */
.ind-tabla { overflow-x:auto; }
.ind-tabla table.list-table { min-width:980px; }

.ind-estado { padding:44px; text-align:center; color:var(--c-text-3); background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:var(--r-md); }
.ind-estado-error { color:var(--c-danger); }

@media (max-width:860px){
  .ind-header-right { width:100%; justify-content:space-between; }
}

/* Card "La compañía informa" (paneles read-only de MA / San Cristóbal). Reusa .profile-field y
   .sin-sub-* de la card de coberturas: acá sólo va lo propio — el subtítulo de la sincronización
   y el botón de bajar un archivo que vive en la compañía. */
.sin-cia-sync { font-size:11px; color:#94a3b8; font-weight:500; margin-left:auto; }
.sin-cia-baja { flex-shrink:0; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:14px; color:#475569; background:#f1f5f9; border:1px solid #e2e8f0; }
.sin-cia-baja:hover { background:#e2e8f0; color:#0f172a; }
@media (max-width:640px){
  .sin-cia-sync { margin-left:0; flex-basis:100%; margin-top:2px; }
}

  /* ===== Administración (la caja de la organización) ===== */
  .caja-mes { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
  .caja-mes .mes-btn { width:32px; height:34px; border:1px solid #cbd5e1; background:#fff; border-radius:8px; color:var(--c-text-2); font-size:14px; cursor:pointer; font-family:inherit; }
  .caja-mes .mes-cur { background:#fff; border:1px solid #cbd5e1; border-radius:9px; padding:6px 16px; min-width:172px; text-align:center; }
  .caja-mes .mes-cur b { display:block; font-size:13.5px; font-weight:700; color:var(--c-text); }
  .caja-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:var(--sh-xs); overflow:hidden; margin-bottom:14px; }
  /* ⚠ NO reusa .card / .card-title: `.card` trae padding:20px (metería la tabla para adentro)
     y `.card-title` un margin-bottom + border-bottom pensados para otro layout. */
  .caja-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--c-border-soft); flex-wrap:wrap; }
  .caja-card-title { font-size:13.5px; font-weight:700; color:var(--c-text); display:flex; align-items:center; gap:8px; }
  /* La flecha va en un casillero de color (mismo patrón que .kpi-icon / .profile-field-icon:
     el color sale del SENTIDO —verde entra, rojo sale—, no de la variedad). */
  .caja-card-ico { width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
  .caja-card-ico.ok { background:var(--c-success-bg); color:var(--c-success); }
  .caja-card-ico.bad { background:var(--c-danger-bg); color:var(--c-danger); }
  .caja-card-total { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
  .caja-card-total-sub { font-weight:500; color:var(--c-text-3); font-size:12px; }
  .caja-tblwrap { overflow-x:auto; }
  /* Dentro de un modal la tabla no tiene el marco que le da .data-table en la vista. */
  .caja-modal .caja-tblwrap { border:1px solid var(--c-border); border-radius:var(--r-sm); }
  /* ⚠ La tabla es `class="list-table caja-tabla"`: el th/td (11px/700 versalita, padding
     11-13/16, #f8fafc) sale de table.list-table, que es la tabla de TODA la app —acá vivía una
     copia con medio punto menos de fuente y otro gris, y esa mezcla es justo lo que hacía que
     la vista se leyera como de otra aplicación. Estas reglas son sólo lo PROPIO de la caja. */
  /* ⚠ 8 columnas de plata no entran con el padding de 16px de la app: a 909px de contenido
     (1280 de viewport menos sidebar y paddings) la columna Estado quedaba CORTADA, que se lee
     como una tabla rota. Se achica el padding LATERAL —lo que no se toca es la tipografía, que
     es lo que hace que la tabla se lea como las demás— y se prohíbe el wrap en las celdas
     numéricas (un importe partido en dos renglones no se puede leer). */
  .caja-tabla th, .caja-tabla td { padding-left:12px; padding-right:12px; white-space:nowrap; }
  .caja-tabla .sub { white-space:normal; }
  /* …salvo en las celdas de plata: "Neto $ 1.520.661 · IVA $ 319.338" partido en dos renglones
     queda distinto en cada fila según cuánto mida el número, y una columna de importes con el
     alto bailando fila a fila se lee peor que una columna un poco más ancha. */
  .caja-tabla td.num .sub { white-space:nowrap; }
  /* ⚠ tabular-nums: sin esto las columnas de plata no alinean y una diferencia de un dígito
     se lee como un orden de magnitud. Es dato denso de uso diario. */
  .caja-tabla .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .caja-tabla .empty-cell { text-align:center; color:var(--c-text-3); padding:22px 16px; }
  /* ⚠ El selector lleva `.caja-tabla` adelante A PROPÓSITO: `table.list-table td` es (0,1,2) y
     le ganaba a un `.caja-rubro td` pelado (0,1,1) — la fila de rubro perdía su fondo y su
     versalita sin un solo error, que es la forma más cara de romper una tabla. */
  .caja-tabla tr.caja-rubro td { background:#f8fafc; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--c-text-3); font-weight:700; padding:8px 16px; }
  .caja-tabla tr.caja-desglose td { background:#fcfdff; padding:7px 16px; font-size:12px; color:var(--c-text-3); }
  /* Fila de totales al pie de Ingresos: mismo criterio de especificidad que .caja-rubro (el
     `.caja-tabla` adelante para ganarle a table.list-table td). El doble borde la separa del
     cuerpo sin inventar otro fondo. */
  .caja-tabla tr.caja-total-row td { border-top:2px solid var(--c-border); background:#f8fafc; }
  /* Factura del mes cobrada en otro mes: está acá por su FACTURA (eje facturado); atenuada
     para que no se lea como plata de este mes. */
  .caja-tabla tr.caja-row-otromes td { opacity:.62; }
  .caja-desglose .pad { padding-left:38px; }
  .caja-resultado { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border-radius:var(--r-md); background:var(--chrome-1); color:#fff; flex-wrap:wrap; }
  .caja-res-lbl { font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; color:#94a3b8; }
  .caja-res-val { font-size:26px; font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
  .caja-res-cuenta { font-size:12px; color:#cbd5e1; font-variant-numeric:tabular-nums; text-align:right; }
  .caja-tira-wrap { flex:1; min-width:220px; }
  .caja-tira { display:flex; align-items:flex-end; gap:5px; height:56px; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:2px; }
  .caja-tira .bar { flex:1; border-radius:3px 3px 0 0; background:#c7d2fe; }
  .caja-tira .bar.on { background:var(--c-secondary); }
  .caja-tira .bar.neg { background:#fca5a5; }
  /* Mes actual EN PÉRDIDA: ni el resaltado de "actual" ni el rojo de "negativo" solos alcanzan
     —los dos estados conviven, no son alternativas (ver administracion.js)—, así que el mes en
     curso con pérdida tiene que distinguirse TANTO del mes actual en ganancia como de un mes
     pasado en pérdida. */
  .caja-tira .bar.on.neg { background:var(--c-danger); }
  /* Clases propias en vez de reusar nombres que no existen en el resto de la app
     (.empty-state, .loading, .row-click y .btn-icon no están definidas en styles.css:
     usarlas dejaba filas sin estilo y botones invisibles). */
  .caja-aviso-vacio { text-align:center; color:var(--c-text-3); padding:26px 16px; font-size:13px; }
  .caja-row { cursor:pointer; }
  .caja-row:hover td { background:#f8fafc; }
  .caja-aviso { background:var(--c-warn-bg); color:var(--c-warn); border-radius:var(--r-sm); padding:9px 11px; font-size:12px; margin-top:8px; }
  .caja-ayuda { font-size:12.5px; color:var(--c-text-2); margin:0 0 12px; }
  .caja-btn-icon { background:none; border:none; color:var(--c-text-3); font-size:14px; cursor:pointer; padding:4px 7px; border-radius:6px; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; }
  .caja-btn-icon:hover { background:var(--c-border-soft); color:var(--c-danger); }
  /* El modal reusa .modal-overlay + .modal (styles.css:2079), que sí existen; sólo se
     ensancha y se le arma la cabecera/pie propios. */
  /* ⚠⚠ Los campos de las fichas usan el LENGUAJE DE FORMULARIOS de la app —
     .form-section / .form-section-title / .form-grid / .form-field / .form-input— y NO una
     variante propia. La primera versión envolvía cada campo en `.profile-field` (que es un
     TILE DE LECTURA de 64px con casillero de ícono, no un campo editable) con `<input>` sin
     clase, o sea controles NATIVOS del navegador: Martín, 20-ago-2026, "no tiene nada que ver
     con el resto de la app". Antes de agregar un campo acá, copiar la fila de al lado. */
  .caja-modal { max-width:680px; }
  .caja-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .caja-modal-head h2 { margin:0; }
  .caja-modal-body { display:flex; flex-direction:column; gap:12px; }
  .caja-modal-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
  /* DOS columnas DECLARADAS, no auto-fit: el ancho del modal es fijo y "auto-fit" haría que la
     cantidad de columnas dependiera del zoom del navegador (skill verificar-ui). */
  .caja-modal .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
  .caja-modal .form-field.caja-w2 { grid-column:1 / -1; }
  .caja-modal .form-section { padding:14px 16px; }
  .caja-modal .form-section-title { margin-bottom:12px; }
  .caja-opt, .form-section-opt { font-weight:500; color:var(--c-text-3); }
  .caja-form-acciones { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
  /* ── Carga desde el comprobante (etapa 2) ────────────────────────────────────────────────
     El banner usa el MISMO ámbar que `.sol-ia-dudoso` marca en los campos: es la misma señal
     ("esto lo leyó la IA, confirmalo"), y darle otro color la partiría en dos idiomas. */
  .caja-comp-banner { background:#fef9c3; border:1px solid #facc15; color:#713f12; border-radius:var(--r-sm); padding:10px 12px; font-size:12.5px; line-height:1.5; }
  .caja-comp-fila { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--c-border-soft); }
  .caja-comp-fila:last-of-type { border-bottom:none; }
  .caja-comp-link { font-size:13px; color:var(--c-primary); text-decoration:none; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  a.caja-comp-link:hover { text-decoration:underline; }
  .caja-comp-pend { font-size:11.5px; color:var(--c-text-3); font-style:italic; margin-left:auto; white-space:nowrap; }
  .caja-fila-ret, .caja-fila-linea { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
  .caja-fila-ret select, .caja-fila-linea input { flex:1; min-width:0; }
  .caja-fila-ret .caja-ret-monto, .caja-fila-linea .caja-lin-monto { flex:0 0 150px; }
  @media (max-width:640px){ .caja-modal .form-grid { grid-template-columns:1fr; } }
  @media (max-width:900px){ .caja-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }

  /* Catálogo (Task 10): filas del editor de rubros/conceptos/retenciones. Mismo patrón que
     .caja-fila-ret/.caja-fila-linea (flex + inputs sin borde propio, como el resto de la
     ficha), con wrap para que la fila de un concepto (nombre + rubro + acciones) no se rompa
     en pantallas angostas. */
  .caja-cat-fila { display:flex; gap:8px; align-items:center; padding:5px 0; flex-wrap:wrap; }
  .caja-cat-fila.caja-cat-inactivo { opacity:.6; }
  .caja-cat-fila-ro { justify-content:space-between; padding:7px 2px; border-bottom:1px solid var(--c-border-soft); }
  .caja-cat-fila-ro:last-child { border-bottom:none; }
  .caja-cat-in, .caja-cat-sel { flex:1; min-width:120px; }
  .caja-cat-orden { width:74px; flex:none; }
  .caja-cat-acciones { display:flex; gap:2px; align-items:center; flex:none; margin-left:auto; }
  .caja-cat-alta { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
  .caja-cat-alta input, .caja-cat-alta select { flex:1; min-width:120px; }
  /* Botón de "Desactivar/Reactivar": un pill chico, no un .btn-secondary de tamaño completo —
     conviven varios por fila (nombre + rubro + esto + borrar) y necesitan pesar poco. */
  .caja-cat-toggle { font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--c-border); background:#fff; color:var(--c-text-2); cursor:pointer; font-family:inherit; white-space:nowrap; }
  .caja-cat-toggle:hover { background:var(--c-border-soft); }

  /* ── Estado inline dentro de .caja-tabla: .strong/.sub/.muted no existen como clases
     bare en ningún otro lugar del repo (siempre van scopeadas, p.ej. .name-info .sub) —
     acá se scopean a .caja-tabla para no filtrar a otras tablas de la app. Y los .tag.t-*
     tampoco existían: sin esto las 5 clases de estado (cobrada/facturada/liquidada/pagado/
     pendiente) y los tags de recurrente/proyectado/desglose salían con el gris base de
     .tag, sin ninguna diferencia visual entre "cobrado" y "pendiente". ────────────────── */
  .caja-tabla .strong { font-weight:700; color:var(--c-text); }
  .caja-tabla .sub { font-size:11px; color:var(--c-text-3); margin-top:2px; }
  .caja-tabla .muted { color:var(--c-text-3); font-style:italic; }
  .tag.t-ok { background:var(--c-success-bg); color:var(--c-success); }
  .tag.t-blue { background:#dbeafe; color:var(--c-primary); }
  .tag.t-warn { background:var(--c-warn-bg); color:var(--c-warn); }
  .tag.t-grey { background:#f1f5f9; color:var(--c-text-3); }