/* Balance compacto — radio 12, borde 1px, tokens vivos, sin sombra.
   T16: lo compartido con Inicio (cabecera --nav, nivel 1 del bottomnav) vive en styles.css —
   aquí solo lo específico de Balance: mesNavInicio() es el único hijo, así que se centra a
   secas (Inicio necesita los dos spans .page-head__balance para el mismo efecto). */
.page-head--balance { justify-content: center; }

.balance-hero { margin: 8px var(--space-page) 0; }
.balance-hero__label {
  font: var(--text-label);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.balance-hero__value {
  /* mismo escalón display que .hero-comparativa__num (Inicio) — 3 niveles: display / stats / num-row */
  font: var(--text-display);
  font-family: var(--font);
  color: var(--color-ink);
  margin: 4px 0 6px;
  font-variant-numeric: tabular-nums;
}
.balance-hero__sub { font: var(--text-meta); font-weight: 600; }
/* T07: línea de cuadre honesto ("de los cuales X € sin categoría") — tinta neutra, no acento:
   es una aclaración del número de arriba, no un segundo dato con jerarquía propia. */
.balance-hero__sincat { font: var(--text-meta); color: var(--color-muted); margin-top: 2px; }

.balance-bar {
  height: 18px;
  border-radius: var(--radius-field);
  overflow: hidden;
  display: flex;
  margin: 14px var(--space-page) 0;
}
/* T07: cada segmento es un <button>, no un <i aria-hidden> — accesible a lector de pantalla
   (aria-label por segmento) y tocable/enfocable (Enter/Espacio disparan el click nativo del
   botón, sin JS extra). Reset de chrome de botón: el color lo sigue poniendo el inline style. */
.balance-bar > .balance-bar__seg {
  display: block;
  min-width: 0;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.balance-lista {
  margin: 16px var(--space-page) 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}
.balance-vacio { padding: 14px 16px; font: var(--text-meta); color: var(--color-muted); }

.balance-grupo { border-bottom: 1px solid var(--color-line); }
.balance-grupo:last-child { border-bottom: none; }
.balance-grupo__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--color-ink);
}
.balance-grupo__name { display: flex; align-items: center; gap: 8px; font: var(--text-row); min-width: 0; }
.balance-grupo__amt { font: var(--text-num); white-space: nowrap; font-variant-numeric: tabular-nums; }

.balance-grupo__hijos { padding: 0 14px 8px 32px; }
.balance-hijo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font: var(--text-meta);
  color: var(--color-body);
}

/* 3er nivel (movimientos reales de la categoría) — misma sangría visual que .inicio-hijos
   (inicio-portada.css), un nivel más adentro que .balance-grupo__hijos. */
.balance-hijo__movs {
  margin: 0 0 6px 8px;
  padding-left: 10px;
  border-left: 1px solid var(--color-line);
}

.balance-skel {
  height: 12px;
  border-radius: var(--radius-field);
  background: var(--color-track);
  margin: 10px 14px;
  animation: skel-pulse 1.2s var(--ease-estandar) infinite;
}
@keyframes skel-pulse { 50% { opacity: .45 } }
.balance-skel--num { height: 28px; width: 42%; margin: 8px 0 6px; }

@media (min-width: 900px) {
  .balance-lista { margin-left: 0; margin-right: 0; width: auto; }
}