/* Portada de Inicio — radio 12 en controles de esta pantalla, sin sombra. T16: lo compartido con
   Balance (cabecera --nav, nivel 1 del bottomnav) vive en styles.css, aquí solo lo propio.
   T19 (producto-publico IU2, 19a+19b): la cabecera de color con delta YoY (T07, buddy-estandar)
   deja de pintarse — vInicio pinta un <h1 class="sr-only"> + mesNavInicio() + inbox de avisos
   (19a) + «Movimientos · {n}» con la lista plana del mes (19b). La mayoría de las reglas de abajo
   (.summary/.hero-comparativa/.stats/...) siguen aquí porque sus funciones no se borran (T20/T21
   mueven heroPresupuesto/grupoRowInicio/budgetRowInicio; el resto queda como deuda marcada — ver
   views/inicio.js) — candidatas a retirar en higiene (IU9) cuando ya no las use nada. Las que SÍ
   se han verificado sin ningún productor (ni vivo ni deuda) se retiran aquí mismo, no se marcan:
   .inicio-chips/.chip--inicio-on/.inicio-extra/.hero-inicio__ledger (19b, grep en app/public/js
   e index.html = 0 referencias) ya no tienen ninguna función, ni siquiera muerta, que las pinte. */

/* mesNavInicio() (js/views/inicio.js → mesNavInicio) es compartida con vBalance (compacto) —
   centrado propio y label con área táctil, ambos independientes de dónde se monte (tarjeta de
   Inicio o cabecera de Balance). */
.month-nav--inicio { margin: 0 auto; }
.month-nav__label { font: var(--text-title); color: var(--color-ink); cursor: pointer; padding: 8px 4px; min-height: var(--tap); }

/* Cabecera de resumen — Vive UI: la jerarquía la hace la cifra, no un bloque de color. */
.summary { padding: calc(14px + env(safe-area-inset-top)) var(--space-page) 2px }
.summary__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.summary__title { font: var(--text-title); margin: 0; flex: 1; min-width: 0 }
.summary__hero { margin-top: var(--space-md) }
.summary__label { display: block; font: var(--text-label); color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em }
.summary__n { margin-top: 10px; font: var(--text-meta); color: var(--color-muted) }
.delta { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 6px 12px; min-height: 32px; border-radius: var(--radius-chip); font: 600 13px/1 var(--font-ui) }
.delta--ok { background: var(--color-ok-bg); color: var(--color-ok) }
.delta--over { background: var(--color-danger-bg); color: var(--color-danger) }
.delta--none { background: var(--color-surface-2); color: var(--color-muted) }

/* === Tarjeta de nav de mes (mesNavInicio() + N movimientos) === */
.inicio-mes-card {
  margin: var(--space-xs) var(--space-page) 0; padding: var(--space-xs) var(--space-sm);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.inicio-mes-card .month-nav { width: 100% }
.inicio-mes-card__n { font: var(--text-meta); color: var(--color-muted) }

/* Tira Ingresos · Gastos · Quedan — plana, tabular, Open Design. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); margin: var(--space-md) var(--space-page) 0;
  padding: var(--space-sm) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line) }
.sumstat { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit }
.sumstat + .sumstat { border-left: 1px solid var(--color-line); padding-left: 14px }
.sumstat__k { display: block; font: var(--text-label); color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em }
.sumstat__v { display: block; margin-top: 5px; font: 500 20px/1.2 var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums }
.sumstat--in .sumstat__v { color: var(--color-ok) }
.sumstat--over .sumstat__v { color: var(--color-over) }

/* Escritorio: el carril de 720 lo pone main; aquí solo se anula el gutter de móvil para
   alinear cifra, stats y secciones al mismo borde. */
@media (min-width: 900px) {
  .summary { padding-left: 0; padding-right: 0; padding-top: 18px }
  .stats, .inicio-mes-card {
    margin-left: 0; margin-right: 0;
  }
}

.insight--linea { padding: 10px 14px; margin-top: 10px; align-items: center; }
.section__meta { font: var(--text-meta); color: var(--color-muted); }
.inicio-vacio { padding: 14px 0; font: var(--text-meta); color: var(--color-muted); }
/* T19 (IU2, 19b): «Movimientos · {n}» — lista plana de txRow(t), fecha por fila en vez de headers
   por día (spec.md §8, decisión T19 inputs #1). Mismo nombre de clase que docs/design/
   prototipo-od (.tx-list, sistema.css) y mismos tokens que el resto de .list-row__*. */
.tx-list { display: flex; flex-direction: column; gap: 6px; }
.list-row__date { flex: none; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; min-width: 30px; }
.list-row__date b { font: var(--text-num); font-variant-numeric: tabular-nums; }
.list-row__date span { font: var(--text-label); color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; }
/* T19 (IU2, 19a): inbox de avisos — punto de tono delante del título. Un único tono hoy
   (sinClasificar); IU3 añade el resto de tipos de avisosInicio() del prototipo. */
.aviso-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-warn); }
.inicio-hijos { margin: 4px 0 8px 8px; padding-left: 10px; border-left: 1px solid var(--color-line); }
/* T06 (redisenov2): grupo → categoría, mismo criterio visual que .balance-grupo (nombre + total),
   sin acordeón propio de grupo — lo que abre es cada categoría (budget-row) hacia sus
   movimientos. */
.inicio-grupo { padding: 6px 0; border-bottom: 1px solid var(--color-line); }
.inicio-grupo:last-child { border-bottom: none; }
.inicio-grupo__head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.inicio-grupo__name { font: var(--text-label); color: var(--color-muted-2); text-transform: uppercase; letter-spacing: .02em; }
.inicio-grupo__amt { font: var(--text-num); color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* Hero de comparación interanual (T02, redisenov2; T07 lo traslada a la cabecera de color) —
   heroComparativa()/copyDelta() no se tocan, solo su contenedor y su color. */
.hero-comparativa { padding-top: var(--space-sm); }
.hero-comparativa__tabs { display: flex; gap: 8px; margin-bottom: var(--space-xs); overflow-x: auto; }
.hero-comparativa__tab {
  padding: 7px 13px; border-radius: var(--radius-chip); border: 1px solid var(--color-line);
  background: var(--color-surface); color: var(--color-muted-2); font: var(--text-meta);
  font-family: inherit; white-space: nowrap; cursor: pointer;
}
.hero-comparativa__tab.is-on { border-color: var(--color-ink); color: var(--color-ink); font-weight: 600; }
.hero-comparativa__viewport { overflow: hidden; }
.hero-comparativa__track {
  display: flex; width: calc(var(--hc-n, 1) * 100%);
  transition: transform var(--dur-panel) var(--ease-salida);
}
.hero-comparativa__panel { width: calc(100% / var(--hc-n, 1)); flex: none; }
.hero-comparativa__num { font: var(--text-display); color: var(--color-ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.hero-comparativa__num.is-ok { color: var(--color-ok); }
.hero-comparativa__num.is-over { color: var(--color-over); }
button.hero-comparativa__num {
  display: block; margin: 0; padding: 0; border: none; background: none;
  font: var(--text-display); color: inherit; font-variant-numeric: tabular-nums;
  cursor: pointer; text-align: left; font-family: inherit;
}
.hero-comparativa__sub { font: var(--text-meta); font-weight: 600; margin-top: 4px; color: var(--color-muted); }
.hero-comparativa__amt { font: var(--text-title); color: var(--color-ink); font-variant-numeric: tabular-nums; margin-top: var(--space-xs); }

/* P0 jobs: resto de presupuesto familiar bajo el hero YoY (no sustituye comparativa). */
.hero-presupuesto {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: var(--space-sm); padding: 10px 12px;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-field);
}
.hero-presupuesto__main { display: flex; align-items: baseline; gap: 8px; }
.hero-presupuesto__label { font: var(--text-meta); color: var(--color-muted); font-weight: 600; }
.hero-presupuesto__main b { font: 600 18px/1.2 var(--font); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.hero-presupuesto__main b.num--over { color: var(--color-over); }
.hero-presupuesto__pct { display: flex; align-items: baseline; gap: 6px; }
.hero-presupuesto__pct .num { font: var(--text-num); font-variant-numeric: tabular-nums; }
.hero-presupuesto__meta { font: var(--text-meta); color: var(--color-muted); }
.hero-presupuesto--vacio { justify-content: flex-start; padding: 6px 0; background: transparent; border: none; }