/* ==========================================================================
   Okeymoney — Componentes reutilizables (TODO.md §3)

   Este archivo es la fuente única de verdad para los componentes visuales
   de la app. Sustituye al antiguo components.css renombrado en Fase 2.
   Requiere tokens.css y base.css.

   Convenciones:
   - Todos los colores, espaciados, radios y motion vienen de tokens.css.
   - Los componentes son accesibles por teclado (:focus-visible usa --acento).
   - Se respeta prefers-reduced-motion (override global en base.css).
   - Nombres de clase en kebab-case; modificadores con --variante.
   ========================================================================== */

/* ---- Utilities ---- */
.center { text-align: center; }
.hidden { display: none !important; }
.stack { display: flex; flex-direction: column; gap: var(--espacio-3); }
.row { display: flex; align-items: center; gap: var(--espacio-4); flex-wrap: wrap; }

/* ---- Page container ----
   Padding inferior para que el contenido respire al final del scroll. */
.container {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: var(--espacio-5) var(--espacio-4) var(--espacio-6);
}

@media (min-height: 720px) {
  .container { padding: var(--espacio-4) var(--espacio-4) calc(var(--tocable-lg) + var(--espacio-5)); }
}

/* ==========================================================================
   §3.1 Botón
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  min-height: var(--tocable);
  min-width: var(--tocable);
  width: 100%;
  padding: var(--espacio-3) var(--espacio-5);
  border: 3px solid transparent;
  border-radius: var(--radio-2);
  background: var(--acento);
  color: var(--texto-primario);
  font-family: inherit;
  font-size: var(--texto-400);
  font-weight: var(--peso-medio);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-rapida) var(--ease-suave),
              box-shadow var(--motion-rapida) var(--ease-suave),
              background var(--motion-rapida) var(--ease-suave);
}

.btn:hover { transform: scale(1.02); box-shadow: var(--sombra-2); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; transform: none; cursor: default; }
.btn:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--acento);
}

/* Variantes */
.btn--secundario {
  background: var(--superficie-2);
  color: var(--texto-primario);
  border-color: var(--borde);
}
.btn--fantasma {
  background: transparent;
  color: var(--texto-primario);
  border-color: transparent;
}
.btn--fantasma:hover { background: var(--superficie-2); }
.btn--peligro {
  background: var(--error);
  color: var(--texto-primario);
}

/* Tamaños */
.btn--grande { min-height: var(--tocable-lg); font-size: var(--texto-500); }
.btn--xl { min-height: var(--tocable-xl); font-size: var(--texto-500); padding: var(--espacio-4); }

/* Alias legacy (v1) — mantiene compatibilidad con clases ya en uso en
   index.html / tools/* mientras se migran a los modificadores BEM. */
.btn-secondary {
  background: var(--superficie-2);
  color: var(--texto-primario);
  border-color: var(--borde);
}
.btn-audio {
  width: auto;
  background: var(--superficie-1);
  color: var(--texto-primario);
  border: 3px solid var(--borde);
}

@media (min-height: 720px) {
  .btn {
    padding: 6px var(--espacio-5);
    font-size: var(--texto-300);
    border-width: 2px;
  }
}

/* ---- Back / close link (top of every wizard step) ---- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: var(--tocable);
  padding: var(--espacio-2) var(--espacio-4);
  border-radius: var(--radio-2);
  background: var(--superficie-1);
  border: 2px solid var(--borde);
  color: var(--texto-primario);
  font-size: var(--texto-300);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.back-link:hover { border-color: var(--acento); }
.back-link:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--acento);
}

/* ==========================================================================
   §3.2 Tarjeta
   ========================================================================== */
.card {
  background: var(--superficie-1);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: var(--espacio-5);
  box-shadow: var(--sombra-1);
}

/* Variante elevada (hojas, modales) */
.card--elevada {
  box-shadow: var(--sombra-2);
  border-color: transparent;
}

@media (min-height: 720px) {
  .card { padding: var(--espacio-4); }
}

/* ==========================================================================
   §3.3 Input / keypad numérico (selector principal para importes)
   ========================================================================== */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-3);
  max-width: 420px;
  margin: 0 auto;
}

.keypad__tecla,
.keypad-key {
  min-height: var(--tocable-xl);
  min-width: var(--tocable-xl);
  font-size: var(--texto-600);
  font-weight: var(--peso-fuerte);
  background: var(--superficie-1);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  color: var(--texto-primario);
  cursor: pointer;
  transition: background var(--motion-rapida) var(--ease-suave),
              transform var(--motion-rapida) var(--ease-suave);
}
.keypad__tecla:hover,
.keypad-key:hover { background: var(--superficie-2); }
.keypad__tecla:active,
.keypad-key:active { transform: scale(0.97); }
.keypad__tecla:focus-visible,
.keypad-key:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--acento);
}
.keypad__tecla--borrar {
  background: var(--superficie-2);
  color: var(--texto-secundario);
}
.keypad__tecla--limpiar {
  background: var(--superficie-2);
  color: var(--aliento);
}

/* Dynamic choice buttons used by the amount wizards and euro simulations.
   Keep the touch target and visual hierarchy in the shared component layer. */
.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espacio-4);
}

.btn-option {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  width: 100%;
  min-height: var(--tocable);
  padding: var(--espacio-3) var(--espacio-4);
  border: 2px solid var(--borde);
  border-radius: var(--radio-2);
  background: var(--superficie-1);
  color: var(--texto-primario);
  font: inherit;
  font-weight: var(--peso-medio);
  text-align: left;
  cursor: pointer;
}

.btn-option:hover,
.btn-option:focus-visible,
.btn-option[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.btn-option:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--acento);
}

.btn-option:disabled { opacity: 0.55; cursor: default; }
.btn-option .icon { flex: 0 0 auto; font-size: 28px; line-height: 1; }
.option-classification { display: block; color: var(--texto-secundario); font-size: var(--texto-200); }

.amount-display {
  font-size: var(--texto-700);
  font-weight: var(--peso-fuerte);
  line-height: var(--linea-apretada);
  color: var(--acento);
  text-align: center;
  padding: var(--espacio-4) 0;
  min-height: var(--tocable-xl);
}

/* Money pieces used by the learning activities and the change preview. */
.money-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--tocable);
  min-height: var(--tocable);
  padding: var(--espacio-2);
  color: var(--texto-primario);
  font-size: var(--texto-300);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  box-shadow: var(--sombra-1);
}
.money-token.coin {
  width: var(--tocable);
  height: var(--tocable);
  border: 3px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--superficie-3);
}
.money-token.note {
  min-width: var(--tocable-xl);
  min-height: var(--tocable);
  border: 2px solid var(--acento);
  border-radius: var(--radio-1);
  background: var(--acento-suave);
}

/* Euro denomination colours: keep the visual cue and the text label together. */
.money-token.money-c1cent,
.money-token.money-c2cent,
.money-token.money-c5 {
  border-color: #8a4f21;
  background: #b87333;
  color: #ffffff;
}
.money-token.money-c1us {
  border-color: #8a4f21;
  background: #b87333;
  color: #ffffff;
}
.money-token.money-c5us,
.money-token.money-c10us,
.money-token.money-c25us,
.money-token.money-c50us {
  border-color: #747474;
  background: #b8b8b8;
  color: var(--texto-primario);
}
.money-token.money-d1us {
  border-color: #8f7118;
  background: #c9a227;
  color: var(--texto-primario);
}
.money-token.money-c10,
.money-token.money-c20,
.money-token.money-c50 {
  border-color: #9a6b16;
  background: #d9a441;
  color: var(--texto-primario);
}
.money-token.money-c1 {
  border-color: #9a6b16;
  background: radial-gradient(circle, #d7d7d7 0 57%, #d9a441 58% 100%);
  color: var(--texto-primario);
}
.money-token.money-c2 {
  border-color: #747474;
  background: radial-gradient(circle, #d9a441 0 57%, #b8b8b8 58% 100%);
  color: var(--texto-primario);
}
.money-token.money-n5 {
  border-color: #737373;
  background: #b8b8b8;
  color: var(--texto-primario);
}
.money-token.money-n10 {
  border-color: #7b2525;
  background: #a83232;
  color: #ffffff;
}
.money-token.money-n20 {
  border-color: #32658e;
  background: #75add5;
  color: var(--texto-primario);
}
.money-token.money-n50 {
  border-color: #9a5b1b;
  background: #e49448;
  color: var(--texto-primario);
}
.money-token.money-n5us,
.money-token.money-n10us,
.money-token.money-n20us,
.money-token.money-n50us,
.money-token.money-n100us {
  border-color: #35633b;
  background: #6f9f63;
  color: var(--texto-primario);
}
.money-token.token-grande.coin {
  width: var(--tocable-xl);
  height: var(--tocable-xl);
  font-size: var(--texto-400);
}
.money-token.token-grande.note {
  min-width: calc(var(--tocable-xl) + var(--espacio-6));
  min-height: var(--tocable-lg);
  font-size: var(--texto-400);
}
.money-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tocable-xl);
  min-height: var(--tocable-lg);
  padding: var(--espacio-3) var(--espacio-4);
  border: 2px solid var(--borde);
  border-radius: var(--radio-1);
  background: var(--superficie-2);
  color: var(--texto-primario);
  font-size: var(--texto-400);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}

/* Money-table (preview de monedas/billetes bajo el keypad) */
.money-table {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: center;
  margin: var(--espacio-4) 0;
}
.money-table__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--acento-suave);
  border-radius: var(--radio-1);
  color: var(--texto-primario);
  font-weight: var(--peso-medio);
  font-size: var(--texto-300);
}

/* ==========================================================================
   §3.4 Tab bar (navegación inferior)
   ========================================================================== */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3) calc(var(--espacio-2) + env(safe-area-inset-bottom));
  background: var(--superficie-1);
  border-top: 1px solid var(--borde);
  z-index: 50;
  min-height: var(--tabbar-height);
}

.tab-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tocable);
  padding: var(--espacio-2);
  background: transparent;
  border: none;
  border-radius: var(--radio-1);
  color: var(--texto-secundario);
  font-family: inherit;
  font-size: var(--texto-200);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: color var(--motion-rapida) var(--ease-suave),
              background var(--motion-rapida) var(--ease-suave);
}
.tab-button:hover { background: var(--superficie-2); }
.tab-button:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 2px;
}
.tab-button[aria-current="page"] {
  color: var(--acento);
  position: relative;
}
.tab-button[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--acento);
}
.tab-button .icon { font-size: 28px; line-height: 1; }

/* FAB "+" central (legacy del tabbar; la home actual no lo renderiza). */
.fab-button {
  width: var(--tocable-lg);
  height: var(--tocable-lg);
  border-radius: 50%;
  background: var(--acento);
  color: var(--texto-primario);
  border: none;
  font-size: 40px;
  font-weight: var(--peso-fuerte);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sombra-2);
  transition: transform var(--motion-rapida) var(--ease-suave),
              box-shadow var(--motion-rapida) var(--ease-suave);
  justify-self: center;
}
.fab-button:hover { transform: scale(1.05); box-shadow: var(--sombra-3); }
.fab-button:active { transform: scale(0.96); }
.fab-button:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 3px;
}

/* ==========================================================================
   §3.5 Hoja / wizard
   ========================================================================== */
.wizard {
  background: var(--superficie-1);
  border-radius: var(--radio-3) var(--radio-3) 0 0;
  box-shadow: var(--sombra-2);
  padding: var(--espacio-5);
  border: 1px solid transparent;
}

.wizard__header {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-5);
}

.wizard__title {
  flex: 1;
  font-size: var(--texto-500);
  font-weight: var(--peso-fuerte);
  line-height: var(--linea-apretada);
  color: var(--texto-primario);
}

.wizard__close {
  min-height: var(--tocable);
  min-width: var(--tocable);
  background: transparent;
  border: none;
  border-radius: var(--radio-1);
  color: var(--texto-secundario);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.wizard__close:hover { background: var(--superficie-2); color: var(--texto-primario); }
.wizard__close:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 2px;
}

.wizard__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: var(--espacio-4);
}
.wizard__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--superficie-3);
}
.wizard__dot.is-active { background: var(--acento); }

.wizard__footer {
  display: flex;
  gap: var(--espacio-3);
  margin-top: var(--espacio-5);
  flex-wrap: wrap;
}
.wizard__footer .btn { flex: 1; min-width: 0; }

/* ==========================================================================
   §3.6 Chip (wallet de práctica, estado de meta)
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--acento-suave);
  border-radius: var(--radio-pill);
  color: var(--texto-primario);
  font-weight: var(--peso-medio);
  font-size: var(--texto-300);
}
.chip--logro {
  background: var(--acento-2-suave);
}
.chip__icon { font-size: 20px; line-height: 1; }

/* Alias legacy (v1) — el nombre "wallet-chip" sigue apareciendo en
   index.html, app.js y tools/*. Lo tratamos como componente §3.6. */
.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--acento-suave);
  border-radius: var(--radio-pill);
  color: var(--texto-primario);
  font-weight: var(--peso-medio);
  font-size: var(--texto-300);
  align-self: flex-start;
}
.wallet-chip__icon { font-size: 20px; line-height: 1; }

/* ==========================================================================
   §3.7 Display de saldo (héroe de Mi dinero)
   ========================================================================== */
.balance-card {
  text-align: center;
  padding: var(--espacio-6) var(--espacio-5);
}
.balance-card .balance-label {
  color: var(--texto-secundario);
  font-size: var(--texto-300);
  margin: 0;
}
.balance-amount {
  display: inline-flex;
  min-height: var(--tocable-lg);
  padding: var(--espacio-3) var(--espacio-5);
  border-radius: var(--radio-2);
  background: transparent;
  border: 2px solid transparent;
  color: var(--acento);
  font-size: var(--texto-700);
  font-weight: var(--peso-fuerte);
  line-height: var(--linea-apretada);
  cursor: pointer;
  transition: background var(--motion-rapida) var(--ease-suave);
}
.balance-amount:hover { background: var(--superficie-2); }
.balance-amount:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--acento);
}
.balance-card .balance-label[data-i18n="home.editHint"] {
  color: var(--texto-tenue);
  font-size: var(--texto-200);
  margin-top: var(--espacio-2);
}

/* ==========================================================================
   §3.8 Fila de movimiento (historial de Mi dinero)
   ========================================================================== */
.movement-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3);
  background: var(--superficie-1);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
}
.movement-row__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie-2);
  border-radius: 50%;
  font-size: 28px;
}
.movement-row__label {
  color: var(--texto-primario);
  font-weight: var(--peso-medio);
  font-size: var(--texto-300);
}
.movement-row__date {
  color: var(--texto-tenue);
  font-size: var(--texto-200);
  margin-top: 2px;
}
.movement-row__amount {
  color: var(--texto-primario);
  font-weight: var(--peso-medio);
  font-size: var(--texto-400);
  text-align: right;
}

/* ==========================================================================
   §3.9 Tarjeta de meta
   ========================================================================== */
.goal-card {
  background: var(--superficie-1);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
  padding: var(--espacio-5);
  box-shadow: var(--sombra-1);
}
.goal-card__header {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
}
.goal-card__icon { font-size: var(--texto-500); line-height: 1; }
.goal-card__name {
  flex: 1;
  font-size: var(--texto-400);
  font-weight: var(--peso-medio);
  color: var(--texto-primario);
}
.goal-card__target {
  color: var(--texto-secundario);
  font-size: var(--texto-300);
  margin: var(--espacio-3) 0;
}

/* ==========================================================================
   §3.10 Toast de feedback (complementa feedback.js)
   ========================================================================== */
.toast-feedback {
  position: fixed;
  bottom: calc(var(--tabbar-height) + var(--espacio-4));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-5);
  background: var(--superficie-1);
  border-radius: var(--radio-pill);
  border-left: 4px solid var(--exito);
  color: var(--exito);
  font-size: var(--texto-300);
  font-weight: var(--peso-medio);
  box-shadow: var(--sombra-2);
  z-index: 100;
  animation: toast-in var(--motion-normal) var(--ease-suave);
}
.toast-feedback--aliento {
  border-left-color: var(--aliento);
  color: var(--aliento);
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   Compact progress track, matching Ludia
   ========================================================================== */
.progress-bar {
  position: relative;
  height: 6px;
  background: #ddd9eb;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: #7462bb;
  border-radius: 4px;
  transition: width var(--motion-normal) var(--ease-suave);
}
/* Ocultar números (estilo runtime: barra limpia sin presión) */
.progress-text {
  display: none;
}

/* ==========================================================================
   Feedback inline (legado — feedback.js usa .feedback)
   ========================================================================== */
.feedback {
  min-height: var(--tocable);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  font-size: var(--texto-500);
  font-weight: var(--peso-fuerte);
  text-align: center;
}
.feedback.success { color: var(--exito); }
.feedback.encourage { color: var(--aliento); }

/* ==========================================================================
   Celebración (complementa .celebration de feedback.js)
   ========================================================================== */
.celebration {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-4);
  background: rgba(250, 247, 242, 0.92);
  z-index: 200;
  text-align: center;
  padding: var(--espacio-4);
}
.celebration.hidden { display: none; }
.celebration .emoji {
  font-size: 96px;
  animation: celebrate var(--motion-lenta) var(--ease-suave);
}
.celebration .message {
  font-size: var(--texto-600);
  font-weight: var(--peso-fuerte);
  color: var(--exito);
}

@keyframes celebrate {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   Screen header (cabecera de pestaña)
   ========================================================================== */
.screen-header {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-4);
}
.screen-header h1, .screen-header h2 {
  flex: 1;
  font-size: var(--texto-500);
  font-weight: var(--peso-fuerte);
  line-height: var(--linea-apretada);
  color: var(--texto-primario);
}

/* ==========================================================================
   Footer y anclas hermanas
   ========================================================================== */
.footer-app {
  margin-top: var(--espacio-6);
  padding-top: var(--espacio-4);
  border-top: 1px solid var(--borde);
  text-align: center;
}

.legal-link {
  color: var(--texto-secundario);
  font-size: var(--texto-200);
  text-decoration: underline;
}

/* ==========================================================================
   Goal grid
   ========================================================================== */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--espacio-4);
}

/* ==========================================================================
   §3.X Cabecera, anclas y tarjetas grandes (estilo Routime)
   El home de Okeymoney es un catálogo: cabecera con idioma + marca +
   saludo + barra de anclas a los módulos temáticos y
   tarjetas grandes con pictograma + nombre + detalle. Cada módulo
   define --acento / --acento-suave localmente (inline) y todas las
   tarjetas / cabeceras de módulo lo leen: un solo set de reglas,
   varios temas.
   ========================================================================== */

/* ---- Cabecera ---- */
.cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-4) 0 var(--espacio-3);
}

.cabecera .logo {
  margin: 0 auto;
  display: block;
}

.cabecera h1 {
  margin: 0;
  font-size: var(--texto-600, var(--texto-500));
  font-weight: var(--peso-fuerte);
  color: var(--texto-primario);
  text-align: center;
  line-height: var(--linea-apretada);
}

.welcome {
  margin: 0;
  font-size: var(--texto-400);
  font-weight: var(--peso-medio);
  color: var(--texto-secundario);
  text-align: center;
}

/* ---- Selector de idioma (Routime) ---- */
.idioma-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: center;
  align-self: stretch;
}

.btn-lang {
  min-height: var(--tocable);
  padding: var(--espacio-2) var(--espacio-3);
  font-family: inherit;
  font-size: var(--texto-300);
  font-weight: var(--peso-medio);
  color: var(--texto-primario);
  background: var(--superficie-1);
  border: 2px solid var(--borde);
  border-radius: var(--radio-2);
  cursor: pointer;
  transition: border-color var(--motion-rapida) var(--ease-suave),
              background var(--motion-rapida) var(--ease-suave);
}

.btn-lang:hover { border-color: var(--acento); }

.btn-lang[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.btn-lang:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--acento);
}

/* (legacy .stars rules removed: el contador de práctica ya no aparece
   en el home. Vive solo en la cabecera de cada tool como
   .practice-tokens, definido en §3.Y más abajo.) */

/* ---- Anclas de módulo (jump-to-section) ---- */
.anclas-modulo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  justify-content: center;
  padding: 0 0 var(--espacio-4);
}

.ancla-modulo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocable);
  padding: var(--espacio-2) var(--espacio-3);
  font-family: inherit;
  font-size: var(--texto-300);
  font-weight: var(--peso-medio);
  text-decoration: none;
  color: var(--texto-primario);
  background: var(--superficie-1);
  border: 2px solid var(--acento);
  border-radius: var(--radio-2);
  transition: background var(--motion-rapida) var(--ease-suave),
              color var(--motion-rapida) var(--ease-suave);
}

.ancla-modulo:hover,
.ancla-modulo:focus-visible {
  background: var(--acento);
  color: var(--texto-primario);
  filter: brightness(0.92);
}

.ancla-modulo:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 2px;
}

/* ---- Guía contextual: una acción siguiente, sin presión ---- */
.next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-5);
  padding: var(--espacio-4) var(--espacio-5);
  background: var(--superficie-1);
  border: 2px solid var(--acento-3);
  border-radius: var(--radio-2);
  box-shadow: var(--sombra-1);
}

.next-step__copy { min-width: 0; }
.next-step__eyebrow {
  margin: 0 0 var(--espacio-1);
  color: var(--acento-3);
  font-size: var(--texto-200);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.next-step h2,
.next-step h3 {
  margin: 0;
  color: var(--texto-primario);
  font-size: var(--texto-500);
  line-height: var(--linea-apretada);
}
.next-step p { margin: var(--espacio-1) 0 0; color: var(--texto-secundario); }
.next-step__note { font-size: var(--texto-200); color: var(--texto-tenue) !important; }
.next-step__action { flex: 0 0 auto; width: auto; background: var(--acento-3); }

@media (max-width: 640px) {
  .next-step { align-items: stretch; flex-direction: column; padding: var(--espacio-4) var(--espacio-3); }
  .next-step__action { width: 100%; }
}

/* ---- Módulo temático (sección del catálogo) ---- */
.modulos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-5);
}

.modulo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.modulo h2 {
  margin: 0;
  font-size: var(--texto-500);
  font-weight: var(--peso-fuerte);
  line-height: var(--linea-apretada);
  color: var(--acento);
  border-left: 6px solid var(--acento);
  padding-left: 12px;
}

/* ---- Grid de tarjetas grandes ---- */
.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--espacio-4);
}

/* ---- Tarjeta genérica (Routime: picto + nombre + detalle) ---- */
.tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 160px;
  padding: var(--espacio-4);
  background: var(--superficie-1);
  border: 2px solid var(--acento-suave);
  border-radius: var(--radio-2);
  box-shadow: var(--sombra-1);
  text-decoration: none;
  text-align: center;
  color: var(--texto-primario);
  transition: transform var(--motion-rapida) var(--ease-suave),
              border-color var(--motion-rapida) var(--ease-suave);
}

.tarjeta:hover {
  transform: translateY(-2px);
  border-color: var(--acento);
}

.tarjeta:focus-visible {
  outline: 2px solid var(--superficie-3);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--acento);
}

.tarjeta .picto {
  flex: 0 0 auto;
  max-width: 100%;
  font-size: 48px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-variant-emoji: emoji;
  line-height: 1;
}

/* Flex items keep their min-content width by default. That makes a long
   title or description escape the card instead of wrapping inside it. */
.tarjeta > * {
  min-width: 0;
  max-width: 100%;
}

.tarjeta__etiqueta,
.tarjeta__nombre,
.tarjeta__detalle,
.topic-card__unit,
.topic-card__title,
.topic-card__detail,
.topic-card__progress,
.topic-card__action {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.tarjeta .nombre {
  font-size: var(--texto-400);
  font-weight: var(--peso-fuerte);
  color: var(--acento);
  line-height: var(--linea-apretada);
}

.tarjeta .detalle {
  font-size: var(--texto-300);
  color: var(--texto-secundario);
  line-height: var(--linea-normal, 1.4);
}

.tarjeta__estado {
  position: absolute;
  top: var(--espacio-2);
  right: var(--espacio-2);
  font-size: 18px;
  line-height: 1;
  color: var(--exito);
}

.tarjeta { position: relative; } /* ancla para .tarjeta__estado */

/* ---- Variantes de tarjeta ---- */

/* Mi dinero — saldo grande, pictograma dinero, color principal */
.tarjeta--money .tarjeta__nombre {
  font-size: var(--texto-700, 40px);
  font-variant-numeric: tabular-nums;
}

/* Mis metas — pictograma de objetivo, detalle con progreso de la primera meta */
.tarjeta--goals .tarjeta__estado {
  background: var(--acento);
  color: var(--texto-primario);
  padding: 4px 10px;
  border-radius: var(--radio-pill);
  font-size: var(--texto-200);
  font-weight: var(--peso-medio);
  position: static;
  margin-top: var(--espacio-2);
}

/* Etiqueta pequeña encima del nombre (Mi dinero · Mis metas usan esto) */
.tarjeta__etiqueta {
  font-size: var(--texto-200);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-secundario);
}

/* ==========================================================================
   §3.Z Tres partes de producto (estética Apptonomia)
   Cada parte funciona como una sección reconocible del recorrido:
   situaciones cotidianas → acciones con dinero → ideas para cuidarlo.
   ========================================================================== */
.learning-block {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-5);
  background: var(--superficie-1);
  border: 1px solid var(--borde);
  border-left: 8px solid var(--acento);
  border-radius: var(--radio-2);
  box-shadow: var(--sombra-1);
  scroll-margin-top: var(--espacio-4);
}

.learning-block--didactic { background: color-mix(in srgb, var(--acento-3-suave) 32%, var(--superficie-1)); }
.learning-block--simulation { background: color-mix(in srgb, var(--acento-suave) 26%, var(--superficie-1)); }
.learning-block--guide { background: color-mix(in srgb, var(--acento-2-suave) 26%, var(--superficie-1)); }

.learning-block__header {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

.learning-block__eyebrow {
  margin: 0;
  color: var(--acento);
  font-size: var(--texto-200);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.learning-block h2 {
  margin: 0;
  color: var(--acento);
  font-size: var(--texto-600);
  line-height: var(--linea-apretada);
}

.learning-block__intro {
  margin: 0;
  color: var(--texto-secundario);
  font-size: var(--texto-300);
}

.learning-block__cta {
  align-self: flex-start;
  width: auto;
  text-align: center;
}

.didactic-grid,
.simulation-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.didactic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--espacio-4);
}

.simulation-grid__group-title {
  grid-column: 1 / -1;
  margin: var(--espacio-2) 0 calc(var(--espacio-1) * -1);
  padding-top: var(--espacio-2);
  border-top: 2px solid var(--acento-suave);
  color: var(--acento);
  font-size: var(--texto-400);
  font-weight: var(--peso-fuerte);
}

.simulation-grid__group-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Keep optional, more demanding simulations after the everyday path on
   wide screens and on mobile. */
.simulation-card--advanced { order: 3; }

.topic-card {
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 210px;
  text-align: left;
  appearance: none;
  font: inherit;
  cursor: pointer;
}

.topic-card .picto {
  margin-bottom: var(--espacio-2);
}

.topic-card__title {
  color: var(--acento-3);
  font-size: var(--texto-400);
  font-weight: var(--peso-fuerte);
  line-height: var(--linea-apretada);
}

.topic-card__detail {
  color: var(--texto-secundario);
  font-size: var(--texto-300);
  line-height: var(--linea-normal, 1.4);
}

.topic-card__unit,
.topic-card__progress {
  color: var(--texto-secundario);
  font-size: var(--texto-200);
  font-weight: var(--peso-medio);
}

.topic-card__unit {
  order: -1;
  color: var(--acento-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.topic-card__progress { margin-top: auto; }

.topic-card__action {
  padding-top: var(--espacio-3);
  color: var(--acento-3);
  font-size: var(--texto-200);
  font-weight: var(--peso-fuerte);
}

.guide-content {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
}

.learning-unit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  background: var(--superficie-1);
  border: 2px solid var(--acento-3-suave);
  border-radius: var(--radio-2);
  box-shadow: var(--sombra-1);
}

.learning-unit__lesson,
.learning-unit__test {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-2);
  min-height: 0;
  padding: var(--espacio-4);
  text-align: center;
}

.learning-unit__lesson {
  background: color-mix(in srgb, var(--acento-3-suave) 35%, var(--superficie-1));
}

.learning-unit__test {
  align-items: stretch;
  border-top: 1px solid var(--borde);
  background: var(--superficie-1);
  padding-top: var(--espacio-3);
}

.learning-unit__lesson h3 {
  color: var(--acento-3);
  font-size: var(--texto-400);
  line-height: var(--linea-apretada);
}

.learning-unit__lesson p,
.learning-unit__test-prompt {
  color: var(--texto-secundario);
  font-size: var(--texto-300);
}

.learning-unit__test-prompt {
  margin: 0;
  color: var(--texto-primario);
  font-weight: var(--peso-fuerte);
}

.learning-unit__phase {
  margin: 0;
  color: var(--acento-3);
  font-size: var(--texto-200);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.learning-unit__test .learning-unit__phase { color: var(--acento-2); }

.learning-unit__test-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espacio-2);
  width: 100%;
  margin-top: auto;
  padding-top: var(--espacio-2);
}

.learning-unit__test-link {
  display: flex;
  align-items: center;
  min-height: var(--tocable);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio-1);
  background: var(--acento-2-suave);
  color: var(--texto-primario);
  font-size: var(--texto-200);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.learning-unit__test-link:hover,
.learning-unit__test-link:focus-visible {
  background: var(--acento-2);
  color: var(--texto-primario);
}

.lesson-detail {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  padding: var(--espacio-4);
  background: var(--superficie-1);
  border: 2px solid var(--acento-3-suave);
  border-radius: var(--radio-2);
  box-shadow: var(--sombra-1);
  scroll-margin-top: var(--espacio-4);
}

.lesson-detail__back {
  align-self: flex-start;
}

.lesson-detail__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-2);
  text-align: center;
}

.lesson-detail__header .picto {
  font-size: 56px;
  line-height: 1;
}

.lesson-detail__header h3 {
  margin: 0;
  color: var(--acento-3);
  font-size: var(--texto-500);
  line-height: var(--linea-apretada);
}

.lesson-detail__body {
  max-width: 66ch;
  margin: 0;
  color: var(--texto-primario);
  font-size: var(--texto-400);
  line-height: var(--linea-normal, 1.5);
}

.lesson-detail__explanation {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  border: 1px solid var(--acento-3-suave);
  border-radius: var(--radio-1);
  background: color-mix(in srgb, var(--acento-3-suave) 28%, var(--superficie-1));
}

.lesson-detail__explanation h4 {
  margin: 0;
  color: var(--acento-3);
  font-size: var(--texto-400);
}

.lesson-detail__steps {
  display: grid;
  gap: var(--espacio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lesson-detail__steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  color: var(--texto-primario);
  font-size: var(--texto-300);
  line-height: var(--linea-normal, 1.5);
}

.lesson-detail__step-number {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acento-3);
  color: var(--superficie-1);
  font-weight: var(--peso-fuerte);
}

.lesson-detail__example {
  padding: var(--espacio-3);
  border-left: 4px solid var(--acento-2);
  border-radius: var(--radio-1);
  background: var(--superficie-1);
}

.lesson-detail__example p { margin: 0; }

.lesson-detail__example-label {
  margin-bottom: var(--espacio-1) !important;
  color: var(--acento-2);
  font-size: var(--texto-200);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lesson-detail__practice {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding-top: var(--espacio-3);
  border-top: 1px solid var(--borde);
}

.lesson-detail__practice .learning-unit__test-link {
  font-size: var(--texto-300);
}

.guide-callout {
  padding: var(--espacio-4);
  border: 2px solid var(--acento);
  border-radius: var(--radio-2);
  background: var(--superficie-1);
  box-shadow: var(--sombra-1);
}

.guide-callout h3 {
  margin: var(--espacio-1) 0 var(--espacio-2);
  color: var(--acento);
  font-size: var(--texto-500);
  line-height: var(--linea-apretada);
}

.guide-callout > p:not(.learning-block__eyebrow) {
  margin: 0;
  color: var(--texto-secundario);
  font-size: var(--texto-300);
}

.guide-callout ol {
  display: grid;
  gap: var(--espacio-2);
  margin: var(--espacio-3) 0 0;
  padding-left: 1.4rem;
  color: var(--texto-primario);
  font-size: var(--texto-300);
}

.guide-principles {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.guide-principles__header h3 {
  margin: 0;
  color: var(--texto-primario);
  font-size: var(--texto-400);
}

.guide-principles__header p {
  margin: var(--espacio-1) 0 0;
  color: var(--texto-secundario);
  font-size: var(--texto-300);
}

.guide-principles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--espacio-3);
}

.guide-principle {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--espacio-2);
  align-items: start;
  padding: var(--espacio-3);
  background: var(--superficie-1);
  border: 1px solid var(--borde);
  border-radius: var(--radio-1);
}

.guide-principle > * {
  min-width: 0;
}

.guide-principle__icon {
  grid-row: span 2;
  font-size: 28px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-variant-emoji: emoji;
  line-height: 1;
}

.guide-principle h4 {
  margin: 0;
  color: var(--texto-primario);
  font-size: var(--texto-300);
  line-height: var(--linea-apretada);
}

.guide-principle p {
  margin: var(--espacio-1) 0 0;
  color: var(--texto-secundario);
  font-size: var(--texto-200);
}

.option-classification {
  display: block;
  margin-top: 2px;
  color: var(--texto-secundario);
  font-size: var(--texto-200);
  font-weight: var(--peso-medio);
}

.expense-classification {
  display: inline-block;
  margin: 0;
  padding: 3px 9px;
  border-radius: var(--radio-pill);
  background: var(--acento-3-suave);
  color: var(--texto-primario);
  font-size: var(--texto-200);
  font-weight: var(--peso-fuerte);
}

.guide-roadmap {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.guide-roadmap__header h3 {
  margin: 0;
  color: var(--texto-primario);
  font-size: var(--texto-400);
}

.guide-roadmap__header p {
  margin: var(--espacio-1) 0 0;
  color: var(--texto-secundario);
  font-size: var(--texto-300);
}

.guide-roadmap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--espacio-3);
}

.guide-roadmap__step {
  padding: var(--espacio-3);
  border-left: 4px solid var(--acento);
  background: var(--superficie-1);
  border-radius: var(--radio-1);
}

.guide-roadmap__step h4 {
  margin: 0;
  color: var(--acento);
  font-size: var(--texto-300);
}

.guide-roadmap__step p {
  margin: var(--espacio-1) 0 0;
  color: var(--texto-secundario);
  font-size: var(--texto-200);
}

.simulation-card--action {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.simulation-card--action:hover { background: var(--acento-suave); }

.simulation-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--espacio-4);
}

.movement-summary {
  padding: var(--espacio-4);
  background: var(--superficie-1);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
}

.movement-summary h3 {
  margin: 0 0 var(--espacio-3);
  color: var(--texto-primario);
  font-size: var(--texto-400);
}

.movement-summary__empty { margin: 0; color: var(--texto-secundario); font-size: var(--texto-300); }
.movement-summary__list,
.commitments-list { display: flex; flex-direction: column; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.movement-summary__list li,
.commitments-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-2) 0; border-bottom: 1px solid var(--borde); }

.settings-link {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4) 0;
  border-bottom: 1px solid var(--borde);
}

.settings-group h3,
.settings-group p { margin: 0; }

.settings-group--danger { border-bottom: 0; }

.settings-file {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  font-weight: var(--peso-medio);
}

.settings-file input {
  width: 100%;
  min-height: var(--tocable);
  padding: var(--espacio-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-1);
  background: var(--superficie-2);
  color: var(--texto-primario);
}
.movement-summary__list li:last-child,
.commitments-list li:last-child { border-bottom: 0; }
.commitments-list li span { display: flex; flex-direction: column; gap: 2px; }
.commitment-overdue { color: var(--error); }
.insights-top { color: var(--texto-secundario); font-weight: var(--peso-medio); }
.financial-statement__note { color: var(--texto-secundario); font-size: var(--texto-200); }
.statement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3); }
.statement-grid > div { display: flex; flex-direction: column; gap: var(--espacio-1); padding: var(--espacio-3); background: var(--superficie-2); border-radius: var(--radio-1); }
.statement-grid b { color: var(--acento); font-size: var(--texto-400); }
.statement-grid small { color: var(--texto-secundario); }
.statement-position { margin-bottom: 0; padding-top: var(--espacio-3); border-top: 1px solid var(--borde); }

.purchase-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espacio-2);
  margin: var(--espacio-4) 0;
}

.purchase-timeline__item {
  padding: var(--espacio-2);
  border-bottom: 3px solid var(--borde);
  color: var(--texto-tenue);
  font-size: var(--texto-100);
  text-align: center;
}

.purchase-timeline__item.is-done,
.purchase-timeline__item.is-current {
  border-color: var(--acento);
  color: var(--texto-primario);
}

.financial-cycle {
  margin: 0 0 var(--espacio-5);
  padding: var(--espacio-4);
  background: var(--superficie-1);
  border: 1px solid var(--borde);
  border-radius: var(--radio-2);
}

.financial-cycle__header h3,
.financial-cycle__header p { margin: 0; }
.financial-cycle__header p { margin-top: var(--espacio-2); color: var(--texto-secundario); }
.financial-cycle__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}
.financial-cycle__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espacio-2);
  min-height: 128px;
  padding: var(--espacio-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-1);
  background: var(--superficie-2);
  color: var(--texto-primario);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.financial-cycle__step strong,
.financial-cycle__step small {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.financial-cycle__icon {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-variant-emoji: emoji;
}
.financial-cycle__step:hover,
.financial-cycle__step:focus-visible { border-color: var(--acento); background: var(--acento-suave); }
.financial-cycle__step.is-done { border-color: var(--exito); }
.financial-cycle__icon { font-size: 28px; line-height: 1; }
.financial-cycle__step small { color: var(--texto-secundario); }
.financial-cycle__done { position: absolute; top: var(--espacio-2); right: var(--espacio-2); color: var(--exito); font-weight: var(--peso-fuerte); }

@media (max-width: 520px) {
  .purchase-timeline__item { font-size: 12px; }
  .financial-cycle__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statement-grid { grid-template-columns: 1fr; }
}
.movement-summary__list small { display: block; margin-top: 2px; color: var(--texto-tenue); font-size: var(--texto-200); }
.movement-summary__amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.movement-summary__amount.is-in { color: var(--exito); }
.movement-summary__amount.is-out { color: var(--texto-primario); }

.money-after {
  margin: var(--espacio-3) 0 0;
  padding: var(--espacio-3);
  background: var(--acento-suave);
  border-radius: var(--radio-1);
  color: var(--texto-primario);
  font-weight: var(--peso-fuerte);
}

.money-warning {
  margin: var(--espacio-3) 0 0;
  padding: var(--espacio-3);
  background: var(--acento-2-suave);
  border-left: 5px solid var(--acento-2);
  border-radius: var(--radio-1);
  color: var(--texto-primario);
  font-weight: var(--peso-medio);
}

.simulation-scene {
  margin: var(--espacio-3) 0;
  border-left: 6px solid var(--acento-2);
}

.simulation-scene p { margin: 0; }
.simulation-scene__amounts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--espacio-3);
  margin-top: var(--espacio-3) !important;
  font-size: var(--texto-500);
}
.simulation-scene__formula {
  margin-top: var(--espacio-3) !important;
  color: var(--texto-secundario);
  font-size: var(--texto-300);
}

@media (max-width: 640px) {
  .learning-block { padding: var(--espacio-4) var(--espacio-3); }
  .learning-block__cta { width: 100%; }
}

/* ==========================================================================
   §3.Y Cabecera de herramientas (.tool-header)

   Patrón Routime: cada tools/<slug>/index.html lleva un
   <header class="tool-header"> con tres hijos en una fila flex:
     1. <a class="back-link">          ← Volver al catálogo
     2. <h1> (flex: 1)                 título, ocupa el espacio central
     3. <span class="practice-tokens"> contador de práctica, esquina sup. derecha

   El contador de práctica (🪙 N) lo actualiza activity-runtime.js con
   el saldo de App.wallet (en céntimos, redondeado a enteros de
   1 token = 1 €). El emoji 🪙 lo añade CSS via ::before.
   ========================================================================== */
.tool-header {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-4);
}

.tool-header h1 {
  flex: 1;
  margin: 0;
  font-size: var(--texto-500);
  font-weight: var(--peso-fuerte);
  line-height: var(--linea-apretada);
  color: var(--texto-primario);
  min-width: 0; /* permite que el texto se trunque si el título es largo */
}

/* Tokens de práctica en tools: pill con fondo verde claro, emoji 🪙
   aplicado por CSS, número entero escrito por activity-runtime.js.
   El <h1> con flex:1 empuja este <span> a la esquina superior derecha. */
.tool-header .practice-tokens {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--acento-suave);
  border-radius: var(--radio-pill);
  color: var(--texto-primario);
  font-size: var(--texto-400);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.tool-header .practice-tokens::before {
  content: "🪙";
  font-size: 1.2em;
  line-height: 1;
}

/* ==========================================================================
   §X Responsive: móvil (≤ 640px)
   Sin `@media (max-width)` previo — el layout mobile-first asume una sola
   columna, pero conviene apretar padding y tipografía en pantallas muy
   estrechas para que el contenido respire. Las metas (.tarjeta--goals)
   ya viven como tarjetas de ancho completo; aquí reforzamos los botones
   grandes y los títulos de sección.
   ========================================================================== */
@media (max-width: 640px) {
  .container {
    padding-left: var(--espacio-3);
    padding-right: var(--espacio-3);
  }
  .tool-header h1 { font-size: 1.75rem; }
  .tarjeta--money,
  .tarjeta--goals { padding: var(--espacio-3); }
  .btn { padding: var(--espacio-2) var(--espacio-3); }
}

/* ==========================================================================
   §X Responsive: tablet (641px–1023px)
   Ajustes intermedios: el contenedor respira más, los títulos crecen un
   punto. No movemos layout porque el grid sigue siendo auto-fill.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1023px) {
  .tool-header h1 { font-size: 2rem; }
  .tarjeta--money,
  .tarjeta--goals { padding: var(--espacio-4); }
}

/* ==========================================================================
   §X Responsive: escritorio ancho (≥ 1024px)
   En monitor 1080p+ el contenedor (--contenedor-max 960px) se ve cómodo,
   pero los títulos y las metas se ven pequeños. Engordamos tipografía y
   damos aire extra. .catalogo (la home con tarjetas de actividad) sigue
   siendo auto-fill/minmax así que se reordenará sola.
   ========================================================================== */
@media (min-width: 1024px) {
  .tool-header h1 { font-size: 2.25rem; }
  .tarjeta--money,
  .tarjeta--goals { padding: var(--espacio-5); }
  .catalogo { gap: var(--espacio-4); }
}

/* Compact suite header: branding and controls share one row. */
header.suite-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding-block: 8px;
  margin-bottom: 0;
  text-align: left;
}
.suite-header .suite-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
}
.suite-header .suite-brand > img,
.suite-header .hero-mark { width: 44px; height: 44px; flex: 0 0 44px; margin: 0; }
.suite-header .hero-mark img { width: 100%; height: 100%; }
.suite-header .suite-brand-copy { min-width: 0; }
.suite-header .suite-brand-copy h1,
.suite-header .suite-brand-copy .logo,
.suite-header .brand {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--accent);
  font-size: 28px;
  line-height: 1.1;
  text-align: left;
}
.suite-header .suite-attribution {
  position: static;
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  color: inherit;
}
.suite-attribution a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
.suite-attribution a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.suite-header .suite-controls,
.suite-header .suite-controls [role="group"] { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; margin: 0; }
.suite-header .suite-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.2;
  border-width: 2px;
  white-space: nowrap;
}
.suite-header .locale-short { display: none; }
.suite-header .suite-details {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.suite-header .suite-details .fila { justify-content: flex-start; min-width: 0; flex: 1; margin: 0; gap: 8px; }
.suite-header .welcome,
.suite-header .tagline { font-weight: 400; color: var(--color-text-soft); margin: 0; max-width: none; font-size: 18px; line-height: 1.35; text-align: left; }
.suite-header .stars { min-height: 0; background: var(--accent-2-soft, #F7EFDD); border-radius: 999px; flex: 0 0 auto; margin: 0; padding: 2px 8px; font-size: 18px; line-height: 1.3; white-space: nowrap; }
@media (max-width: 650px) {
  header.suite-header { gap: 6px 8px; padding-block: 8px; margin-bottom: 0; }
  .suite-header .suite-brand { gap: 8px; }
  .suite-header .suite-brand > img,
  .suite-header .hero-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .suite-header .suite-brand-copy h1,
  .suite-header .suite-brand-copy .logo,
  .suite-header .brand { font-size: 22px; }
  .suite-header .locale-full { display: none; }
  .suite-header .locale-short { display: inline; }
  .suite-header .suite-controls button { padding-inline: 6px; }
  .suite-header .welcome,
  .suite-header .tagline { font-size: 16px; }
}


.container.suite-home { padding-top: 0; }
.suite-header + .anclas-modulo { padding-top: 8px; }
@media (max-width: 650px) {
  .container.suite-home { padding-inline: 12px; }
}