/**
 * Piezas financieras: importes, cifras del dashboard, «Págate a ti primero»,
 * listas de cuentas y movimientos.
 *
 * Criterio: el usuario tiene que entender su situación en segundos. Cifras con
 * ancho fijo, jerarquía por tamaño antes que por color, y el color nunca como
 * única pista (los importes llevan su signo en el texto).
 */

/* --- Importes ------------------------------------------------------------- */

.amount {
  white-space: nowrap;
}

.amount--positive {
  color: var(--positive);
}

.amount--negative {
  color: var(--negative);
}

.swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
}

/* Doble clase: debe ganar a `.view__title`, que se carga después. */
.view__title.view__title--eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Págate a ti primero -------------------------------------------------- */

.pyf__lead {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pyf__figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.pyf__value {
  font-size: var(--text-3xl);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.pyf__target {
  font-family: var(--font-numeric);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pyf__status {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.pyf__definition {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.progress {
  height: 10px;
  margin-top: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
}

.progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-secondary), var(--accent));
  transition: width 480ms var(--ease);
}

/* El único brillo del dashboard, y solo cuando hay algo que celebrar. */
.pyf--reached .progress__bar {
  box-shadow: var(--shadow-glow);
}

/* --- Cifras --------------------------------------------------------------- */

.stat__label {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.stat__value {
  font-size: var(--text-2xl);
  font-weight: 600;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.stat-grid__cell--wide,
.stat-grid__note {
  grid-column: 1 / -1;
}

.stat-grid__note {
  margin-top: 0;
}

.note {
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.note--warning::before {
  content: '⚠ ';
  color: var(--warning);
}

/* --- Cabeceras de sección ------------------------------------------------- */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.section-header__title {
  font-size: var(--text-lg);
}

.section-header .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Barras de gasto por categoría ---------------------------------------- */

.bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bars__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
}

.bars__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.bars__track {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
}

.bars__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  opacity: 0.8;
}

/* --- Listas --------------------------------------------------------------- */

.list.card {
  padding-block: var(--space-2);
}

.list > li + li {
  border-top: 1px solid var(--border);
}

.compact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.compact-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Fila de movimiento: toda ella es el objetivo táctil. */
.tx-row,
.account-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--space-3) 0;
  text-align: left;
}

.tx-row__body,
.account-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.tx-row__title,
.account-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-row__meta,
.account-row__meta {
  overflow: hidden;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.tx-row__amount,
.account-row__amount {
  font-size: var(--text-sm);
}

.account-row--archived {
  opacity: 0.6;
}

.day-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.day-group__date {
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Navegación por meses ------------------------------------------------- */

.month-nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}

.month-nav__label {
  font-size: var(--text-lg);
  text-align: center;
}

.month-nav__label::first-letter {
  text-transform: uppercase;
}

.month-nav__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xl);
  color: var(--text-muted);
}

/* --- Tarjeta vacía -------------------------------------------------------- */

.empty-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.empty-card__title {
  font-size: var(--text-lg);
  font-weight: 650;
}

.empty-card__hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Categorías ----------------------------------------------------------- */

.category-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.category-row--child {
  padding-left: var(--space-5);
}

.category-row--hidden .category-row__main {
  opacity: 0.55;
}

.category-row__main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 56px;
  text-align: left;
}

.category-row__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.category-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-row__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.category-row__order {
  display: flex;
  flex: none;
}

/* Etiqueta de texto: marca un movimiento generado por un gasto fijo. */
.tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: 1px;
  color: var(--text-muted);
}

/* --- Gastos fijos --------------------------------------------------------- */

/* Pide una acción: borde de aviso, sin brillo ni animación. */
.card--attention {
  border-color: rgba(245, 192, 78, 0.35);
}

.pending-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pending-list > li + li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.pending-item__meta {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.pending-item__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.pending-item__form .input {
  grid-column: 1 / -1;
}

.pending-item .field__error {
  margin-top: var(--space-2);
}

.compact-list__row--total {
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.amount-stack {
  flex: none;
}