/* Rediseño · frente inicio. Clases con prefijo .ini-. Solo var(--…); sin colores hex ni position fixed/sticky. */
.ini-pantalla { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 20px var(--e-5); } /* la zona segura de abajo la suma una sola vez .raiz */
.ini-top { display: flex; align-items: center; gap: var(--e-3); padding: calc(var(--e-4) + var(--safe-top)) 0 var(--e-4); }
.ini-top .avatar { width: 44px; height: 44px; }
.ini-saludo { flex: 1; min-width: 0; }
.ini-titulo { margin: 0; font-family: var(--fuente-titulos); font-size: 1.375rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.ini-sub { margin: 0; color: var(--texto-suave); font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; }
.ini-cuerpo { display: flex; flex-direction: column; gap: var(--e-4); }

.ini-resumen { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-5) 20px 20px; background: var(--color-primario); color: var(--sobre-primario); border-radius: var(--r-resumen); box-shadow: var(--sombra-2); }
.ini-resumen-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-1) var(--e-3); }
.ini-resumen-etq { font-size: 0.875rem; font-weight: 500; opacity: .9; }
.ini-pildora { padding: var(--e-1) var(--e-3); font-size: 0.8125rem; white-space: nowrap; border-radius: var(--r-pildora); background: color-mix(in srgb, var(--sobre-primario) 16%, var(--color-primario)); }
.ini-total { margin: 0; font-family: var(--fuente-monto); font-size: 2.5rem; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; overflow-wrap: anywhere; }
.ini-resumen .ini-nuevo { margin-top: var(--e-1); white-space: nowrap; background: var(--color-secundario); color: var(--sobre-secundario); text-decoration: none; }
.ini-resumen .ini-nuevo:focus-visible { outline: 3px solid var(--sobre-primario); outline-offset: 2px; }

.ini-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.ini-card { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding: var(--e-4); background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde-suave); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1); text-decoration: none; transition: transform var(--dur-corta) var(--ease), box-shadow var(--dur-corta) var(--ease); }
a.ini-card:active { transform: scale(.97); box-shadow: var(--sombra-2); }
.ini-card-enlace:focus-visible, .ini-enlace:focus-visible, .ini-caja-enlace:focus-visible, .ini-ult:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }
.ini-etq-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-2); min-height: 28px; }
.ini-etq { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; text-transform: uppercase; color: var(--texto-suave); }
.ini-card .contador { flex: none; background: var(--color-secundario); color: var(--sobre-secundario); font-family: var(--fuente-texto); }
.ini-monto { margin: 0; font-family: var(--fuente-monto); font-size: 1.125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
@media (max-width: 379px) { .ini-etq-fila { flex-wrap: wrap; } }
@media (min-width: 380px) { .ini-monto { font-size: 1.25rem; } }
.ini-caja-cuerpo { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.ini-caja-cuerpo .progreso-contenedor { width: 100%; }
.ini-card .progreso-barra { transition: width var(--dur-media) var(--ease); }
.ini-caja-enlace { display: inline-flex; align-items: center; min-height: 44px; margin: calc(var(--e-2) * -1) 0; color: var(--texto); text-decoration: none; }
.ini-enlace { display: inline-flex; flex: none; align-items: center; min-height: 44px; margin: 0 calc(var(--e-2) * -1); padding: 0 var(--e-2); font-weight: 600; font-size: 0.875rem; white-space: nowrap; color: var(--color-primario); text-decoration: none; border-radius: var(--r-campo); transition: transform var(--dur-corta) var(--ease), box-shadow var(--dur-corta) var(--ease), background-color var(--dur-corta) var(--ease); }
.ini-enlace:active { transform: scale(.97); box-shadow: var(--sombra-2); background: var(--relleno); }

.ini-lista { padding: var(--e-1) var(--e-4); box-shadow: var(--sombra-1); }
.ini-lista .lista-fila, .ini-lista .ini-ult { box-shadow: none; border-radius: 0; }
.ini-lista .lista-fila.ini-ult { padding: var(--e-2) 0; }
.ini-lista .lista-fila:last-child { border-bottom: 0; }
.ini-lista .lista-fila:active, .ini-lista a.ini-ult:active { transform: scale(.985); box-shadow: none; background: var(--relleno); } /* dentro de la tarjeta: escala suave y fondo, sin recortar */
.ini-bloque { margin-top: var(--e-2); }
.ini-bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); margin-bottom: var(--e-1); }
.ini-h2 { margin: 0; min-width: 0; font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 600; }
.ini-ult { display: flex; align-items: center; gap: var(--e-3); min-height: 64px; padding: var(--e-2) 0; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--separador); transition: transform var(--dur-corta) var(--ease), background-color var(--dur-corta) var(--ease); }
.ini-ult:last-child { border-bottom: 0; }
.ini-ult-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--relleno); border-radius: var(--r-campo); }
.ini-ult-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ini-ult-concepto { font-weight: 600; overflow-wrap: anywhere; }
.ini-ult-der { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--e-1); max-width: 45%; }
.ini-ult-der .pastilla { white-space: nowrap; }
.ini-ult-monto { font-family: var(--fuente-monto); font-weight: 700; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; overflow-wrap: anywhere; text-align: right; }

/* Aviso de entrada: aparece con la animación de la base (se apaga con reduced-motion) */
.ini-cuerpo > .toast { margin: 0; animation: entrada-sube var(--dur-media) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .ini-lista .lista-fila:active, .ini-lista a.ini-ult:active, .ini-enlace:active { transform: none; }
}

/* ---------- Ronda 3: proporciones ---------- */
.ini-card { gap: var(--e-1); padding: var(--e-3) var(--e-4); }
.ini-etq-fila { min-height: 24px; }
.ini-card .ini-sub { font-size: 0.8125rem; line-height: 1.3; }
.ini-caja-cuerpo { gap: var(--e-1); }
.ini-lista .lista-fila:not(.ini-ult) { min-height: 56px; }