/* =========================================================================
   Jade — Hoja de estilos
   Tema: oscuro moderno, con acentos de color con feedback motivador.
   ========================================================================= */

/* ---------- Fuente ---------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Superficies — negro puro, sin tinte azulado, para máximo contraste con el neón */
  --bg: #050505;
  --bg-soft: #0A0A0A;
  --card: #121212;
  --card-hover: #1B1B1B;
  --card-border: #2A2A2A;
  --elevated: #1E1E1E;

  /* Texto */
  --text: #F5F5F7;
  --text-muted: #A0A0A0;
  --text-faint: #666666;

  /* Acentos por área — neón con contraste alto sobre negro */
  --c-finanzas: #39FF14;      /* verde neón */
  --c-finanzas-soft: rgba(57, 255, 20, 0.14);
  --c-deporte: #B026FF;       /* morado/lila neón */
  --c-deporte-soft: rgba(176, 38, 255, 0.16);
  --c-tareas: #FFEA00;        /* amarillo neón */
  --c-tareas-soft: rgba(255, 234, 0, 0.14);
  --c-habitos: #FF2E4D;       /* rojo neón */
  --c-habitos-soft: rgba(255, 46, 77, 0.14);
  --c-home: #FF9500;          /* naranja neón — icono central de Inicio */
  --c-home-soft: rgba(255, 149, 0, 0.16);

  /* Feedback semántico: verde = positivo/ingreso, rojo = negativo/gasto */
  --ok: #39FF14;
  --ok-soft: rgba(57, 255, 20, 0.15);
  --warn: #FFEA00;            /* amarillo neón */
  --warn-soft: rgba(255, 234, 0, 0.14);
  --low: #FF2E4D;              /* rojo neón */
  --low-soft: rgba(255, 46, 77, 0.15);
  --streak: #FF9500;           /* naranja neón para rachas — a juego con Inicio */
  --streak-soft: rgba(255, 149, 0, 0.16);

  /* Otros */
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-card: 0 4px 20px rgba(0,0,0,0.5);
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* El atributo HTML "hidden" debe ganar SIEMPRE, sin importar qué otra regla
   (aunque sea un selector de id, como #app o #auth-container) también fije
   `display` en ese mismo elemento — si no, un elemento marcado hidden puede
   seguir viéndose porque una regla más "fuerte" pisó el display:none por
   defecto del navegador. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}

body {
  background:
    radial-gradient(900px 480px at 15% -8%, rgba(57, 255, 20, 0.07) 0%, transparent 55%),
    radial-gradient(900px 480px at 100% 0%, rgba(176, 38, 255, 0.06) 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
button { font-family: inherit; }

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------------------------------------------------------------------- */
/* AUTENTICACIÓN (login / recuperar contraseña / nueva contraseña)         */
/* ---------------------------------------------------------------------- */
#auth-container {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 20px;
}
.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
}
.auth-screen .card {
  width: 100%;
}
.auth-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------- */
/* CABECERA                                                                */
/* ---------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 10px;
  background: linear-gradient(180deg, rgba(5,5,5,0.97) 60%, rgba(5,5,5,0));
  backdrop-filter: blur(6px);
}
.topbar-greeting {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.topbar-title h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease, background .15s ease;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn:hover { color: var(--text); background: var(--card-hover); }

/* ---------------------------------------------------------------------- */
/* CONTENEDOR DE VISTAS                                                    */
/* ---------------------------------------------------------------------- */
.view-container {
  flex: 1;
  padding: 4px 16px 110px;
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 2px 16px;
}
.view-header h2 {
  font-size: 22px;
  font-weight: 700;
}
.view-header .subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}

.section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 22px 4px 10px;
}

/* ---------------------------------------------------------------------- */
/* TARJETAS                                                                */
/* ---------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.card-flat {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 14px;
}

/* Tarjeta "hero" del dashboard: racha + saludo motivador */
.hero-card {
  border-radius: var(--radius-lg);
  padding: 20px;
  background: linear-gradient(135deg, #161616 0%, #0A0A0A 100%);
  border: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,149,0,0.22), transparent 70%);
  pointer-events: none;
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: auto auto -30% -10%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(57,255,20,0.14), transparent 70%);
  pointer-events: none;
}
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hero-msg {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 74%;
}
.hero-msg strong { color: var(--streak); }
.hero-tip {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--card-border);
}

/* Barras de resumen por área (home): una fila de lado a lado por área,
   con el dato clave, la racha/tendencia, y una barra de progreso hacia
   el siguiente rango personalizado (ver levels.js). */
.area-bar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.area-bar {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--area-color, var(--card-border));
  transition: background .15s ease, border-color .15s;
  position: relative;
  overflow: hidden;
}
.area-bar:hover { background: var(--card-hover); }
.area-bar-clickzone {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.area-bar-clickzone:active { transform: scale(0.98); }
.area-bar-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.area-bar .area-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
}
.area-bar-main { flex: 1; min-width: 0; }
.area-bar-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.area-bar-level {
  font-size: 11px;
  font-weight: 700;
  color: var(--area-color, var(--text-muted));
}
.area-bar-value {
  font-size: 19px;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: right;
}
.area-bar-value small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.area-bar-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;
}
.area-bar-sub.trend-up { color: var(--ok); }
.area-bar-sub.trend-down { color: var(--low); }
.area-bar-progress {
  margin-top: 10px;
}
.area-bar-progress .progress-bar-fill {
  background: linear-gradient(90deg, var(--area-color), var(--area-color));
  box-shadow: 0 0 8px var(--area-color);
  opacity: 0.9;
}
.area-bar-faltan-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--card-border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--area-color, var(--text-muted));
  text-align: left;
}
.area-bar-faltan-btn:hover { text-decoration: underline; }
.area-bar-faltan-btn .arrow { flex-shrink: 0; opacity: 0.8; }

.area--finanzas { --area-color: var(--c-finanzas); }
.area--deporte { --area-color: var(--c-deporte); }
.area--tareas { --area-color: var(--c-tareas); }
.area--habitos { --area-color: var(--c-habitos); }
.area-bar .area-icon { background: color-mix(in srgb, var(--area-color) 18%, transparent); color: var(--area-color); }

/* ---------------------------------------------------------------------- */
/* RACHAS (streaks)                                                        */
/* ---------------------------------------------------------------------- */
.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(255,149,0,0.28), var(--streak-soft));
  border: 1.5px solid var(--streak);
  box-shadow: 0 0 10px rgba(255,149,0,0.3);
  color: var(--streak);
  font-weight: 800;
  font-size: 13px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.streak-pill .flame { font-size: 14px; line-height: 1; }
.streak-pill.streak-off {
  background: var(--elevated);
  border-color: var(--card-border);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------- */
/* ANILLOS DE PROGRESO (SVG)                                               */
/* ---------------------------------------------------------------------- */
.ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ring-wrap svg circle {
  transition: stroke-dashoffset 0.8s cubic-bezier(.22,1,.36,1);
}
.ring-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Donut multicolor (composición de patrimonio, etc.) */
.donut-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.donut-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: background 0.6s ease;
}
.donut-hole {
  position: absolute;
  border-radius: 50%;
  background: var(--card);
}
.patrimonio-breakdown {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
  flex-wrap: wrap;
}
.patrimonio-breakdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.patrimonio-breakdown-item strong { color: var(--text); font-weight: 800; }
.patrimonio-breakdown-item .dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.donut-legend-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.donut-legend-item strong { flex-shrink: 0; }

/* Insignia "vinculado a ISIN, se actualiza solo" en la lista de fondos */
.auto-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--c-finanzas);
  background: var(--c-finanzas-soft);
  border-radius: 999px;
  padding: 2px 7px;
  text-transform: uppercase;
}
.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.donut-legend-item strong { color: var(--text); font-weight: 800; }

.ring-center .ring-value {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}
.ring-center .ring-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------------------------------------------------------------------- */
/* BARRAS DE PROGRESO                                                      */
/* ---------------------------------------------------------------------- */
.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--elevated);
  overflow: hidden;
  position: relative;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ok), #8CFF66);
  width: 0%;
  transition: width 0.9s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 10px rgba(57,255,20,0.5);
}
.progress-bar-fill.warn { background: linear-gradient(90deg, var(--warn), #FFF67A); box-shadow: 0 0 10px rgba(255,234,0,0.45); }
.progress-bar-fill.low { background: linear-gradient(90deg, var(--low), #FF7A90); box-shadow: 0 0 10px rgba(255,46,77,0.45); }
.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* BOTONES                                                                 */
/* ---------------------------------------------------------------------- */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 18px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, filter .15s ease, background .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--text); color: var(--bg); width: 100%; }
.btn-primary:hover { filter: brightness(0.92); }
.btn-accent { color: var(--bg); width: 100%; font-weight: 800; }
.btn-ghost {
  background: var(--elevated);
  color: var(--text);
  border: 1px solid var(--card-border);
}
.btn-ghost:hover { background: var(--card-hover); }
.btn-danger-ghost {
  background: var(--low-soft);
  color: var(--low);
  border: 1px solid rgba(255,46,77,0.35);
}
.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; }

/* Botón "outline + glow": sin relleno degradado, borde grueso en el color
   del área y un halo que se intensifica al pulsar. Se fija el color con
   la variable --btn-color en el propio elemento (ver views/finanzas.js y
   views/deporte.js). */
.btn-outline-glow {
  background: color-mix(in srgb, var(--btn-color, var(--ok)) 8%, transparent);
  color: var(--btn-color, var(--ok));
  border: 2.5px solid var(--btn-color, var(--ok));
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 0 16px color-mix(in srgb, var(--btn-color, var(--ok)) 40%, transparent);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn-outline-glow:active {
  transform: scale(0.97);
  background: color-mix(in srgb, var(--btn-color, var(--ok)) 22%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--btn-color, var(--ok)) 80%, transparent), inset 0 0 16px color-mix(in srgb, var(--btn-color, var(--ok)) 30%, transparent);
}

/* Botón de registro rápido: en línea dentro de la hero card (no flotante),
   para no tapar contenido de las tarjetas al hacer scroll. */
.fab {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #8CFF66, #39FF14);
  color: #001a10;
  font-size: 24px;
  box-shadow: 0 0 18px rgba(57,255,20,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.fab:active { transform: scale(0.9) rotate(90deg); }

/* ---------------------------------------------------------------------- */
/* NAVEGACIÓN INFERIOR                                                     */
/* ---------------------------------------------------------------------- */
.bottom-nav {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  background: rgba(5,5,5,0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 -1px 16px rgba(255,255,255,0.08), 0 -10px 26px rgba(0,0,0,0.65);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
}
.nav-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
  flex: 1;
}
.nav-btn svg { transition: transform .15s ease, filter .15s ease, color .15s ease; }
.nav-btn.active { color: var(--text); background: var(--elevated); }
.nav-btn.active svg { transform: translateY(-1px); color: var(--ok); filter: drop-shadow(0 0 6px var(--ok)); }
.nav-btn:active svg { transform: scale(0.85); }

/* Cada área ilumina el nav con su propio color, tanto al seleccionarla como
   al pasar el ratón por encima en escritorio (mismo brillo neón en ambos
   casos, para que el hover ya adelante el color antes de hacer clic). */
.nav-btn[data-view="finanzas"]:is(.active, :hover) { color: var(--c-finanzas); }
.nav-btn[data-view="finanzas"]:is(.active, :hover) svg { color: var(--c-finanzas); filter: drop-shadow(0 0 6px var(--c-finanzas)); }
.nav-btn[data-view="deporte"]:is(.active, :hover) { color: var(--c-deporte); }
.nav-btn[data-view="deporte"]:is(.active, :hover) svg { color: var(--c-deporte); filter: drop-shadow(0 0 6px var(--c-deporte)); }
.nav-btn[data-view="tareas"]:is(.active, :hover) { color: var(--c-tareas); }
.nav-btn[data-view="tareas"]:is(.active, :hover) svg { color: var(--c-tareas); filter: drop-shadow(0 0 6px var(--c-tareas)); }
.nav-btn[data-view="habitos"]:is(.active, :hover) { color: var(--c-habitos); }
.nav-btn[data-view="habitos"]:is(.active, :hover) svg { color: var(--c-habitos); filter: drop-shadow(0 0 6px var(--c-habitos)); }
.nav-btn[data-view="home"]:is(.active, :hover) { color: var(--c-home); }
.nav-btn[data-view="home"]:is(.active, :hover) svg { color: var(--c-home); filter: drop-shadow(0 0 6px var(--c-home)); transform: translateY(-1px); }

/* Inicio va en el centro del footer, pero ya no lleva insignia/círculo
   propio: mismo tamaño y misma línea que el resto, solo el diamante,
   para que no sobresalga por arriba ni en reposo ni seleccionado. */
.nav-btn-home { color: var(--c-home); }

/* ---------------------------------------------------------------------- */
/* MODAL / BOTTOM SHEET                                                    */
/* ---------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3,6,15,0.6);
  backdrop-filter: blur(2px);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-overlay.open { opacity: 1; }
.modal-overlay[hidden] { display: none; }
.modal-sheet {
  width: 100%;
  max-width: 560px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  max-height: 86vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.modal-overlay.open .modal-sheet { transform: translateY(0); }
.modal-handle {
  width: 40px;
  height: 4px;
  background: var(--card-border);
  border-radius: 999px;
  margin: 6px auto 16px;
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--elevated);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:active { transform: scale(0.92); }
.modal-content h3 { font-size: 18px; margin-bottom: 4px; }
.modal-content .modal-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }

/* Formularios dentro de modales */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field input[type="email"],
.field input[type="password"],
.field select,
.field textarea {
  width: 100%;
  background: var(--elevated);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-finanzas);
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--elevated);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all .15s ease;
}
.chip.selected {
  /* Por defecto usa el verde de Finanzas; un chip-group puede fijar
     --chip-color (ej. style="--chip-color:var(--c-deporte)") para que el
     chip seleccionado use el color del área en la que aparece. */
  background: color-mix(in srgb, var(--chip-color, var(--c-finanzas)) 16%, transparent);
  border-color: var(--chip-color, var(--c-finanzas));
  color: var(--chip-color, var(--c-finanzas));
  box-shadow: 0 0 10px color-mix(in srgb, var(--chip-color, var(--c-finanzas)) 30%, transparent);
}

.emoji-scale { display: flex; justify-content: space-between; gap: 6px; }
.emoji-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--elevated);
  cursor: pointer;
  font-size: 24px;
  transition: all .15s ease;
}
.emoji-opt span.num { font-size: 10px; color: var(--text-muted); font-weight: 700; }
.emoji-opt.selected { border-color: var(--c-habitos); background: var(--c-habitos-soft); box-shadow: 0 0 12px rgba(255,46,77,0.3); transform: translateY(-2px); }

.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  background: var(--elevated);
  border-radius: 14px;
  padding: 10px;
}
.stepper button {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--card);
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.stepper .stepper-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* LISTAS                                                                  */
/* ---------------------------------------------------------------------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
}
.list-item .li-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 700; font-size: 14.5px; }
.list-item .li-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.list-item .li-value { font-weight: 800; font-family: var(--font-display); white-space: nowrap; }
.list-item .li-delete {
  background: none; border: none; color: var(--text-faint);
  cursor: pointer; padding: 4px;
}
.list-item .li-delete:hover { color: var(--low); }

.empty-state {
  text-align: center;
  padding: 34px 16px;
  color: var(--text-muted);
}
.empty-state .emoji { font-size: 34px; display: block; margin-bottom: 10px; }
.empty-state p { font-size: 13.5px; line-height: 1.5; }

/* ---------------------------------------------------------------------- */
/* CHECKLIST (tareas)                                                      */
/* ---------------------------------------------------------------------- */
.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s ease;
}
.task-item.done { background: rgba(57,255,20,0.08); border-color: rgba(57,255,20,0.35); box-shadow: 0 0 14px rgba(57,255,20,0.12); }
.checkbox {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 2px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s cubic-bezier(.22,1.4,.36,1);
  color: transparent;
}
.task-item.done .checkbox {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--bg);
  animation: checkPop .35s cubic-bezier(.22,1.4,.36,1);
}
@keyframes checkPop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.task-item .task-title { flex: 1; font-weight: 600; font-size: 14.5px; }
.task-item.done .task-title { color: var(--text-muted); text-decoration: line-through; }
.task-badge {
  font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: var(--elevated); color: var(--text-muted);
}
.task-badge.recurrente { background: var(--c-tareas-soft); color: var(--c-tareas); }

/* Contribution graph (cuadrícula tipo GitHub) */
.contrib-graph {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.contrib-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--elevated);
  border: 1px solid var(--card-border);
  position: relative;
}
.contrib-cell.future { opacity: 0.35; }
.contrib-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); justify-content: flex-end; margin-top: 10px;}
.contrib-legend .contrib-cell { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------- */
/* GRÁFICOS SVG (barras / líneas)                                          */
/* ---------------------------------------------------------------------- */
.chart-wrap { width: 100%; overflow: hidden; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.bar-rect { transition: height .6s cubic-bezier(.22,1,.36,1), y .6s cubic-bezier(.22,1,.36,1); }
.line-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 1.1s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; }

/* ---------------------------------------------------------------------- */
/* MENSAJES COACH                                                          */
/* ---------------------------------------------------------------------- */
.coach-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* Por defecto usa el "semáforo" (tone-good/nudge/insight/info, ver abajo)
     — pensado para el resumen de Inicio, que mezcla las 4 áreas y necesita
     un color de sentimiento, no de área. Los mensajes DENTRO de una vista
     de área fijan --msg-color/--msg-bg/--msg-shadow en línea con el color
     de esa área (ver views/finanzas.js, deporte.js, tareas.js, habitos.js),
     que siempre gana sobre el tono. */
  background: var(--msg-bg, var(--card));
  border: 1px solid var(--msg-color, var(--card-border));
  border-radius: var(--radius-md);
  padding: 13px 14px;
  margin-bottom: 12px;
  box-shadow: var(--msg-shadow, none);
}
.coach-msg .coach-emoji { font-size: 20px; line-height: 1.2; }
.coach-msg p { font-size: 13.5px; line-height: 1.45; }
.coach-msg.tone-good { border-color: rgba(57,255,20,0.4); background: var(--ok-soft); box-shadow: 0 0 14px rgba(57,255,20,0.1); }
.coach-msg.tone-info { border-color: var(--card-border); }
.coach-msg.tone-nudge { border-color: rgba(255,234,0,0.4); background: var(--warn-soft); box-shadow: 0 0 14px rgba(255,234,0,0.1); }
.coach-msg.tone-insight { border-color: rgba(176,38,255,0.4); background: var(--c-deporte-soft); box-shadow: 0 0 14px rgba(176,38,255,0.12); }

/* ---------------------------------------------------------------------- */
/* LOGROS / INSIGNIAS                                                      */
/* ---------------------------------------------------------------------- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px solid var(--card-border);
  text-align: center;
}
.badge-item .badge-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: var(--elevated);
}
.badge-item.unlocked .badge-icon { background: linear-gradient(135deg, var(--streak), #FFC266); box-shadow: 0 0 14px rgba(255,149,0,0.4); }
.badge-item.locked { opacity: 0.4; }
.badge-item .badge-name { font-size: 10.5px; font-weight: 700; line-height: 1.3; }

/* Logro destacado (el más cercano a desbloquear), misión de la semana y
   Modo Sinergia (combo de días con 2+ áreas tocadas) */
.spotlight-card, .mission-card, .sinergia-card {
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
}
.spotlight-card {
  background: linear-gradient(135deg, rgba(255,149,0,0.10), rgba(255,149,0,0.02));
  border-color: rgba(255,149,0,0.3);
}
.mission-card {
  background: linear-gradient(135deg, rgba(176,38,255,0.10), rgba(176,38,255,0.02));
  border-color: rgba(176,38,255,0.3);
}
.spotlight-icon, .mission-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  background: var(--elevated);
}
.spotlight-icon { box-shadow: 0 0 16px rgba(255,149,0,0.35); }
.mission-icon { box-shadow: 0 0 16px rgba(176,38,255,0.35); }
.spotlight-body, .mission-body { flex: 1; min-width: 0; }
.spotlight-tag, .mission-tag {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.spotlight-tag { color: var(--streak); }
.mission-tag { color: var(--c-tareas); }
.spotlight-title, .mission-title { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; }
.spotlight-body .progress-bar-fill, .mission-body .progress-bar-fill {
  background: linear-gradient(90deg, var(--streak), #FFC266);
  box-shadow: 0 0 8px rgba(255,149,0,0.4);
}
.mission-body .progress-bar-fill {
  background: linear-gradient(90deg, var(--c-tareas), #E0AFFF);
  box-shadow: 0 0 8px rgba(176,38,255,0.4);
}
.sinergia-card {
  background: linear-gradient(135deg, rgba(255,149,0,0.10), rgba(0,229,255,0.04));
  border-color: rgba(255,149,0,0.3);
}
.sinergia-icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  background: var(--elevated);
  box-shadow: 0 0 16px rgba(255,149,0,0.35);
}
.sinergia-body { flex: 1; min-width: 0; }
.sinergia-tag {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  color: var(--c-home);
}
.sinergia-title { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.sinergia-sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; }
.sinergia-body .progress-bar-fill {
  background: linear-gradient(90deg, var(--c-home), #00E5FF);
  box-shadow: 0 0 8px rgba(255,149,0,0.4);
}

.unlocked-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.unlocked-strip::-webkit-scrollbar { display: none; }
.unlocked-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--elevated);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 7px 12px 7px 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.unlocked-chip .chip-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  background: linear-gradient(135deg, var(--streak), #FFC266);
}

/* ---------------------------------------------------------------------- */
/* DESCUBRIMIENTOS (insights cruzados entre áreas)                         */
/* ---------------------------------------------------------------------- */
.discovery-list { display: flex; flex-direction: column; gap: 10px; }
.discovery-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  /* Por defecto (Inicio, cruce de las 4 áreas): degradado neutro cian/morado.
     Las vistas de área pasan --disc-color inline para que el descubrimiento
     se vea del color propio de esa área, con el mismo fondo-bajo-mismo-color
     que el resto de recuadros neon de la app. */
  background: var(--disc-bg, linear-gradient(135deg, rgba(0,229,255,0.08), rgba(176,38,255,0.06)));
  border: 1px solid var(--disc-border, rgba(0,229,255,0.25));
}
.discovery-item .discovery-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  background: var(--elevated);
  box-shadow: 0 0 10px var(--disc-glow, rgba(0,229,255,0.3));
}
.discovery-item p { font-size: 13.5px; line-height: 1.5; }
.discovery-item strong { color: var(--disc-color, var(--c-deporte)); }

/* ---------------------------------------------------------------------- */
/* TOASTS                                                                  */
/* ---------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}
.toast {
  background: #141414;
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn .25s cubic-bezier(.22,1.4,.36,1), toastOut .25s ease 2.6s forwards;
}
.toast.success { border-color: rgba(57,255,20,0.45); box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 16px rgba(57,255,20,0.25); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(0.95); } }

/* ---------------------------------------------------------------------- */
/* CONFETI                                                                 */
/* ---------------------------------------------------------------------- */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
}

/* ---------------------------------------------------------------------- */
/* UTILIDADES                                                              */
/* ---------------------------------------------------------------------- */
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-muted { color: var(--text-muted); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-low { color: var(--low); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.gap-8 { gap: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* Simulador "si sigues así 90 días" (home): una mini-tarjeta por área,
   coloreada igual que su area-bar, con la proyección en prosa. */
.sim-card { border-left: 3px solid var(--area-color, var(--card-border)); }
.sim-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--area-color, var(--text-muted));
  margin-bottom: 6px;
}
.sim-card-text { font-size: 12.5px; line-height: 1.5; color: var(--text); margin: 0; }
.sim-card-text strong { color: var(--area-color, var(--text)); }

@media (min-width: 600px) {
  .bottom-nav { border-radius: 20px 20px 0 0; }
}