/**
 * Ingresos — fuentes múltiples, radiografía y proyección.
 * Todo el color sale de css/tokens.css. Aquí no hay un solo hex.
 */

/* ─── Formulario ──────────────────────────────────────────────────────────── */

.ing-form,
.ing-gasto-control {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.ing-gasto-control { margin: 0 0 var(--e-4); }

.ing-form-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-3);
}

.ing-form label,
.ing-gasto-control label {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

.ing-opcional {
  font-weight: var(--peso-normal);
  text-transform: none;
  letter-spacing: normal;
}

.ing-form input,
.ing-form select,
.ing-gasto-control input {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  color: var(--texto);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

/* ─── Total y lista de fuentes ────────────────────────────────────────────── */

.ing-total {
  margin: 0 0 var(--e-4);
  font-size: var(--txt-4);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-cifra);
}

.ing-total-unidad {
  display: block;
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
}

.ing-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }

.ing-fuente {
  position: relative;
  border: var(--regla-fina) solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e-3);
  background: var(--superficie);
}

.ing-fuente-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
  padding-right: var(--e-6);
}

.ing-fuente-monto {
  flex-shrink: 0;
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

/* Peso de cada fuente sobre el total. Se lee sin números. */
.ing-barra {
  height: var(--e-2);
  border: var(--regla-fina) solid var(--borde-fuerte);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: var(--e-2);
}

.ing-barra-relleno { display: block; height: 100%; background: var(--capital); }

.ing-fuente-meta {
  margin: 0 0 var(--e-2);
  font-size: var(--txt-1);
  color: var(--texto-suave);
}

.ing-fuente-sellos { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-1); }

.ing-sello {
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  border: var(--regla-fina) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 0 var(--e-2);
  color: var(--texto-suave);
}

.ing-sello-ojo { border-color: var(--urgencia-media); color: var(--urgencia-media); }
.ing-sello-fin { border-color: var(--interes); color: var(--interes); }

.ing-borrar {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  min-height: var(--toque-min);
  min-width: var(--toque-min);
  padding: 0 var(--e-2);
  background: none;
  /* --texto-tenue da 3.85:1 en claro. Sirve para un control desactivado,
     que WCAG exime, pero éste se puede tocar y borra una fuente. */
  color: var(--texto-suave);
  border: 0;
  border-radius: var(--radio);
  font-family: inherit;
  font-size: var(--txt-1);
  cursor: pointer;
}
.ing-borrar:active { color: var(--interes); }

/* ─── Radiografía ─────────────────────────────────────────────────────────── */

.ing-composicion {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--regla);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--borde-fuerte);
  margin-bottom: var(--e-4);
}

.ing-comp-dato {
  background: var(--superficie);
  padding: var(--e-3) var(--e-2);
  text-align: center;
}

.ing-comp-etiqueta,
.ing-comp-pie {
  display: block;
  font-size: var(--txt-1);
  color: var(--texto-suave);
}

.ing-comp-etiqueta {
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  margin-bottom: var(--e-1);
}

.ing-comp-dato strong {
  display: block;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.ing-comp-pie { margin-top: var(--e-1); }

.ing-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }

.ing-alertas li {
  border-left: var(--e-2) solid var(--urgencia-media);
  background: var(--urgencia-media-fondo);
  padding: var(--e-3);
  font-size: var(--txt-2);
  line-height: var(--alto-linea);
}

/* Un ingreso con fecha de caducidad es lo que rompe los planes a la mitad. */
.ing-alertas li[data-alerta='ingreso_termina'],
.ing-alertas li[data-alerta='fuente_unica'] {
  border-left-color: var(--interes);
  background: var(--interes-fondo);
}

.ing-sin-alertas {
  margin: 0;
  padding: var(--e-3);
  border: var(--regla) solid var(--capital);
  border-radius: var(--radio);
  background: var(--capital-fondo);
  font-weight: var(--peso-fuerte);
  text-align: center;
}

/* ─── Escenarios ──────────────────────────────────────────────────────────── */

.ing-escenarios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }

.ing-escenario {
  border: var(--regla-fina) solid var(--borde);
  border-left: var(--e-2) solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: var(--e-3);
  background: var(--superficie);
}

.ing-escenario-rojo {
  border-left-color: var(--interes);
  background: var(--interes-fondo);
}

.ing-escenario h4 {
  margin: 0 0 var(--e-2);
  font-size: var(--txt-2);
  font-weight: var(--peso-fuerte);
}

.ing-escenario-cifra {
  margin: 0 0 var(--e-1);
  font-size: var(--txt-2);
  font-variant-numeric: tabular-nums;
}

.ing-escenario-perdida { color: var(--texto-suave); }

.ing-escenario-veredicto {
  margin: 0;
  font-size: var(--txt-1);
  color: var(--texto-suave);
  line-height: var(--alto-linea);
}

/* ─── Proyección ──────────────────────────────────────────────────────────── */

.ing-resumen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--regla);
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--borde-fuerte);
  margin-bottom: var(--e-4);
}

.ing-dato { background: var(--superficie); padding: var(--e-3) var(--e-2); text-align: center; }

.ing-dato-etiqueta {
  display: block;
  font-size: var(--txt-1);
  font-weight: var(--peso-medio);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: var(--e-1);
}

.ing-dato-valor {
  display: block;
  font-size: var(--txt-3);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
}

.ing-negativo { color: var(--interes); }

.ing-aclaracion {
  margin: calc(-1 * var(--e-3)) 0 var(--e-4);
  padding: var(--e-3);
  border-left: var(--e-2) solid var(--capital);
  background: var(--capital-fondo);
  font-size: var(--txt-2);
  line-height: var(--alto-linea);
}

.ing-libertad {
  margin: 0 0 var(--e-4);
  padding: var(--e-3);
  border: var(--regla-fina) solid var(--borde);
  border-radius: var(--radio);
  font-size: var(--txt-2);
  line-height: var(--alto-linea);
}

.ing-alerta-fuerte {
  border-color: var(--interes);
  border-left-width: var(--e-2);
  background: var(--interes-fondo);
}

/* ─── Gráfica ─────────────────────────────────────────────────────────────── */

.ing-grafica {
  display: block;
  width: 100%;
  height: auto;
  border: var(--regla) solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie-hundida);
}

.ing-eje-cero { stroke: var(--graf-eje); stroke-width: 1; stroke-dasharray: 3 3; }

.ing-linea-ahorro {
  fill: none;
  stroke: var(--capital);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ing-linea-deuda {
  fill: none;
  stroke: var(--interes);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ing-hito {
  fill: var(--graf-hito-relleno);
  stroke: var(--graf-hito-trazo);
  stroke-width: 2;
}

.ing-eje-texto {
  fill: var(--graf-eje-texto);
  font-size: 9px;
  font-family: inherit;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
}

.ing-leyenda {
  display: flex;
  gap: var(--e-4);
  margin: var(--e-2) 0 0;
  font-size: var(--txt-1);
  color: var(--texto-suave);
}

.ing-clave { display: flex; align-items: center; gap: var(--e-1); }

.ing-clave::before {
  content: '';
  width: var(--e-4);
  height: var(--regla-activa);
  flex-shrink: 0;
}

.ing-clave-ahorro::before { background: var(--capital); }
.ing-clave-deuda::before { background: var(--interes); }

/* ─── Movimiento ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .ing-barra-relleno { transition: width 0.25s ease-out; }
}