/* =========================================================================
   REVIN — CIFRAS FINANCIERAS
   ---------------------------------------------------------------------------
   Clases de utilidad para pintar importes según lo que SON, no según quien las
   escribe. Los valores viven en `colors_and_type.css` (--color-ingreso,
   --color-gasto, --color-pendiente, --color-informativo, --color-balance-*);
   aquí solo se aplican. Ningún componente vuelve a llevar un hex ni un
   `style={{color: "var(--danger)"}}`.

   POR QUÉ ESTE ARCHIVO SE CARGA EL ÚLTIMO
   `colors_and_type.css` entra por @import en la primera línea de `app.css`, o
   sea que es la PRIMERA hoja del documento. Una clase suelta definida allí
   (0,1,0) perdería contra reglas de misma especificidad escritas después —
   `.kpi-val { color: var(--fg-1) }` de `dashboard.css` es el caso real: el KPI
   se quedaría gris. Cargando este archivo detrás de todos, gana por orden sin
   necesidad de inflar selectores ni de recurrir a !important.

   REGLA DE USO
   Se pinta el ESTADO del dinero, no el signo a secas:
     · ingreso / cobrado ....... .fin-in
     · gasto ................... .fin-out
     · pendiente (aún no) ...... .fin-pend   ← manda sobre el signo
     · Plano 1 (informativo) ... .fin-info   ← y SIN signo delante
     · balance ................. window.finBalCls(n) elige pos/neg/cero
   ========================================================================= */

.fin-in   { color: var(--color-ingreso); }
.fin-out  { color: var(--color-gasto); }
.fin-pend { color: var(--color-pendiente); }
.fin-info { color: var(--color-informativo); }
.fin-zero { color: var(--color-balance-cero); }

/* Alias semánticos: mismo color, distinta intención en el código. Que la
   plantilla diga `fin-cobrado` y no `fin-in` documenta que eso es CAJA. */
.fin-cobrado { color: var(--color-cobrado); }
.fin-bal-pos { color: var(--color-balance-pos); }
.fin-bal-neg { color: var(--color-balance-neg); }

/* Forma de una cifra: nunca parte en dos líneas y las columnas alinean. */
.fin-amt {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Pastilla del Plano 1 y del pendiente, para cuando hace falta el fondo
   teñido (fila de tabla, no cifra suelta). */
.fin-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.fin-tag.pend { background: var(--color-pendiente-bg); color: var(--color-pendiente); }
.fin-tag.info { background: var(--color-informativo-bg); color: var(--color-informativo); }

/* -------------------------------------------------------------------------
   SUPERFICIES SIEMPRE NEGRAS
   El resumen de la calculadora FLIP y los KPI "accent" van sobre el negro de
   marca en AMBOS temas, así que los tonos claros (pensados para fondo blanco)
   se hundirían: #A32B31 sobre #161A1D da 1.9:1. En vez de inventar clases
   aparte, se REBINDAN los tokens en ese subárbol — las mismas .fin-* siguen
   valiendo y el componente no se entera.
   ------------------------------------------------------------------------- */
.flip-summary,
.kpi.accent,
.m-kpi.accent {
  --color-ingreso:      #57BE90;
  --color-gasto:        #D9868B;
  --color-pendiente:    #DFA45C;
  --color-informativo:  #A8AAAC;
  --color-balance-cero: #C2C4C6;
}