/* ═══════════════════════════════════════════════════════════
   DAYFLOW — Premium Design System v2
   Inspired by Fantastical, Linear, premium fintech
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Custom Properties ─────────────────────────────────── */
:root {
  /* Deeper, richer palette */
  --bg:           #08080D;
  --surface:      #0F0F17;
  --surface-hi:   #16161F;
  --surface-hi2:  #1D1D28;
  --surface-hi3:  #252533;
  --border:       rgba(255,255,255,0.055);
  --border-hi:    rgba(255,255,255,0.10);
  --text:         #EEEEF8;
  --text-2:       #9090B0;
  --text-3:       #7878A0;

  /* Accent system */
  --accent-cal:   #7C5CFF;
  --accent-food:  #2DD4A4;
  --accent-money: #3B9EFF;

  /* Event type colors */
  --ev-work:      #7C5CFF;
  --ev-sport:     #FF8C42;
  --ev-food:      #2DD4A4;
  --ev-study:     #3B9EFF;
  --ev-personal:  #FF6B9D;
  --ev-rest:      #4A5066;

  /* Status */
  --danger:       #FF4D6A;
  --success:      #2DD4A4;
  --now-line:     #FF4D6A;

  /* Layout */
  --topbar-h:     60px;
  --nav-h:        68px;
  --safe-b:       env(safe-area-inset-bottom, 0px);
  --safe-t:       env(safe-area-inset-top, 0px);

  /* Radii */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-fab: 29px;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.65);

  /* Timing */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-spring: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Light theme ──────────────────────────────────────────── */
html[data-tema="claro"] {
  --bg:           #F0F0F8;
  --surface:      #FFFFFF;
  --surface-hi:   #F5F5FA;
  --surface-hi2:  #EAEAF2;
  --surface-hi3:  #D2D2DD;
  --border:       rgba(0,0,0,0.085);
  --border-hi:    rgba(0,0,0,0.16);
  --text:         #0D0D18;
  --text-2:       #3A3A52;
  --text-3:       #5F5F7A;

  /* Darker, more readable accent palette for white backgrounds */
  --accent-cal:   #4A33A5;
  --accent-food:  #04754D;
  --accent-money: #1858BE;

  --ev-work:      #4A33A5;
  --ev-sport:     #B33E15;
  --ev-food:      #04754D;
  --ev-study:     #1858BE;
  --ev-personal:  #B33068;
  --ev-rest:      #3D4256;

  --danger:       #B01F36;
  --success:      #04754D;
  --now-line:     #B01F36;
}

/* Inline-styled event cards use raw category hex colors that were tuned for dark
   bg. Apply a saturate/darken filter in light mode so they remain readable. */
html[data-tema="claro"] .event-card {
  filter: saturate(1.25) brightness(0.78);
}
html[data-tema="claro"] .plantilla-dot,
html[data-tema="claro"] .meta-bar-fill {
  filter: saturate(1.2) brightness(0.85);
}

/* ── 2. Reset + Base ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow: hidden;
  height: 100dvh;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}
button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input, select, textarea {
  font: inherit;
  font-size: 16px;
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  color: var(--text);
  outline: none;
  width: 100%;
  padding: 10px 12px;
  transition: border-color var(--t-fast);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-cal);
  box-shadow: 0 0 0 3px rgba(124,92,255,0.12);
}
textarea {
  resize: vertical;
  min-height: 72px;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238080A0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ── 3. App Shell ─────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
#main-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.seccion {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: section-in 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.seccion.oculto { display: none !important; }

@keyframes section-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 4. Top Bar ───────────────────────────────────────────── */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 12px 0 16px;
  padding-top: var(--safe-t);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  transition: box-shadow var(--t-normal), backdrop-filter var(--t-normal);
}
#top-bar.scrolled {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(15,15,23,0.85);
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.3);
}

/* Center title block */
.topbar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  gap: 1px;
}
#page-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  line-height: 1.2;
}
#page-subtitle {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  line-height: 1.2;
}

.btn-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
  font-size: 18px;
  min-width: 44px;
  min-height: 44px;
}
.btn-icon:active {
  background: var(--surface-hi2);
  color: var(--text);
}
.btn-icon svg { width: 22px; height: 22px; }

/* ── 5. Bottom Navigation — Premium ──────────────────────── */
.bottom-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(15,15,23,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  transition: color var(--t-fast);
  padding: 8px 0;
  position: relative;
  min-height: 44px;
}
.nav-btn svg {
  width: 24px;
  height: 24px;
  transition: transform var(--t-fast), color var(--t-fast);
}
/* Active tab: icon gets accent + scale */
.nav-btn.activo {
  color: var(--accent-cal);
}
.nav-btn.activo svg {
  transform: scale(1.05);
  color: var(--accent-cal);
}
.nav-btn[data-seccion="comidas"].activo { color: var(--accent-food); }
.nav-btn[data-seccion="comidas"].activo svg { color: var(--accent-food); }
.nav-btn[data-seccion="entrenos"].activo { color: var(--ev-sport); }
.nav-btn[data-seccion="entrenos"].activo svg { color: var(--ev-sport); }
.nav-btn[data-seccion="gastos"].activo  { color: var(--accent-money); }
.nav-btn[data-seccion="gastos"].activo svg  { color: var(--accent-money); }

/* Pill indicator ABOVE the active icon */
.nav-btn::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--t-normal);
}
.nav-btn.activo::before {
  opacity: 1;
}

/* ── 6. Week Strip — Premium ──────────────────────────────── */
#week-strip-wrap {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#week-strip {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
#week-strip::-webkit-scrollbar { display: none; }

.week-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 8px 4px;
  border-radius: var(--r-md);
  gap: 2px;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
  min-height: 52px;
  cursor: pointer;
}
.chip-day {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
}
.chip-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-2);
  line-height: 1;
}

/* Today chip: ring outline */
.week-chip.today:not(.activo) {
  box-shadow: inset 0 0 0 2px var(--accent-cal);
}
.week-chip.today:not(.activo) .chip-day,
.week-chip.today:not(.activo) .chip-num {
  color: var(--accent-cal);
}

/* Active chip: gradient + glow */
.week-chip.activo {
  background: linear-gradient(145deg, var(--accent-cal) 0%, #9B7FFF 100%);
  box-shadow: 0 4px 16px rgba(124,92,255,0.35);
}
.week-chip.activo .chip-day,
.week-chip.activo .chip-num {
  color: #fff;
}

/* ── 7. Timeline ──────────────────────────────────────────── */
#timeline-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hi) transparent;
  touch-action: pan-y;
}
#timeline-wrap::-webkit-scrollbar { width: 3px; }
#timeline-wrap::-webkit-scrollbar-thumb {
  background: var(--border-hi);
  border-radius: 2px;
}

#timeline-grid {
  display: grid;
  grid-template-columns: 44px 1fr;
  min-height: 100%;
}
#timeline-hours {
  position: relative;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
#timeline-events {
  position: relative;
  background: var(--bg);
}

.hour-label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  transform: translateY(-50%);
  padding: 0 4px;
  pointer-events: none;
}
.hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

/* ── 8. Event Cards — Premium ─────────────────────────────── */
.event-card {
  position: absolute;
  left: 6px; right: 6px;
  border-radius: var(--r-sm);
  padding: 5px 8px;
  cursor: pointer;
  overflow: hidden;
  transition: opacity var(--t-fast), transform var(--t-fast);
  min-height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 3px solid transparent;
  z-index: 3;
}
.event-card:active {
  opacity: 0.8;
  transform: scale(0.98);
}
.event-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-time {
  font-size: 11px;
  opacity: 0.75;
  line-height: 1.2;
}
.event-check {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
}

/* Event type backgrounds: gradient left → transparent */
.event-work {
  background: linear-gradient(90deg, rgba(124,92,255,0.22) 0%, rgba(124,92,255,0.06) 100%);
  border-left-color: var(--ev-work);
  color: #C4B5FF;
}
.event-sport {
  background: linear-gradient(90deg, rgba(255,140,66,0.22) 0%, rgba(255,140,66,0.06) 100%);
  border-left-color: var(--ev-sport);
  color: #FFB87A;
}
.event-food {
  background: linear-gradient(90deg, rgba(45,212,164,0.22) 0%, rgba(45,212,164,0.06) 100%);
  border-left-color: var(--ev-food);
  color: #6EFAD5;
}
.event-study {
  background: linear-gradient(90deg, rgba(59,158,255,0.22) 0%, rgba(59,158,255,0.06) 100%);
  border-left-color: var(--ev-study);
  color: #7DC5FF;
}
.event-personal {
  background: linear-gradient(90deg, rgba(255,107,157,0.22) 0%, rgba(255,107,157,0.06) 100%);
  border-left-color: var(--ev-personal);
  color: #FFB3D1;
}
.event-rest {
  background: linear-gradient(90deg, rgba(74,80,102,0.30) 0%, rgba(74,80,102,0.08) 100%);
  border-left-color: var(--ev-rest);
  color: var(--text-2);
}

/* Done state */
.event-card.done {
  opacity: 0.35;
}
.event-card.done .event-name {
  text-decoration: line-through;
}

/* Small event cards */
.event-card[style*="height:2"],
.event-card[style*="height:3"] {
  padding: 2px 8px;
}

/* ── 9. Current Time Line + Label ────────────────────────── */
#time-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,77,106,0.65);
  pointer-events: none;
  z-index: 2;
}
#time-line::before {
  content: '';
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--now-line);
  box-shadow: 0 0 6px rgba(255,77,106,0.5);
}

/* Now time label in the hours column */
.time-now-label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--now-line);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 6;
  background: var(--bg);
  border-radius: 3px;
  padding: 1px 3px;
  margin: 0 2px;
  line-height: 1.4;
}

/* ── 10. FAB — Enhanced ───────────────────────────────────── */
.fab {
  position: absolute;
  bottom: calc(16px + var(--safe-b));
  right: 16px;
  width: 58px;
  height: 58px;
  border-radius: var(--r-fab);
  background: var(--accent-cal);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(124,92,255,0.55), 0 2px 8px rgba(124,92,255,0.3);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  z-index: 20;
  animation: fab-entrance 500ms cubic-bezier(0.34,1.56,0.64,1) both;
}
.fab:hover {
  animation: fab-bounce 600ms cubic-bezier(0.34,1.56,0.64,1);
}
.fab:active {
  transform: scale(0.92);
  box-shadow: 0 3px 12px rgba(124,92,255,0.4);
}
.fab.oculto { display: none !important; }

#fab-comidas {
  background: var(--accent-food);
  box-shadow: 0 6px 24px rgba(45,212,164,0.50), 0 2px 8px rgba(45,212,164,0.25);
}
#fab-nueva-transaccion {
  background: var(--accent-money);
  box-shadow: 0 6px 24px rgba(59,158,255,0.50), 0 2px 8px rgba(59,158,255,0.25);
}

@keyframes fab-entrance {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes fab-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* ── 11. Sheet Modal (bottom sheet — replaces centered modal) */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  touch-action: none;
}
#modal-overlay.oculto { display: none !important; }

.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  width: 100%;
  /* dvh + interactive-widget=resizes-content (in <meta viewport>) makes the
     viewport shrink when the keyboard opens, so this max-height naturally
     keeps the modal sized above the keyboard with zero JS. */
  max-height: 92dvh;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 60px rgba(0,0,0,0.6);
  border: 1px solid var(--border-hi);
  border-bottom: none;
  z-index: 200;
  display: flex;
  flex-direction: column;
  animation: sheet-up 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
  overscroll-behavior: contain;
}
/* Lock html scroll while a modal is open. We only set overflow:hidden — NOT
   touch-action — because touch-action:none on body propagates and stops
   the modal-body from scrolling on Android. */
html.modal-abierto, html.modal-abierto body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.modal.oculto { display: none !important; }

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Sheet handle — rendered as a real <div class="sheet-handle"> by Modal.abrir.
   The previous .modal::before pseudo was duplicating this and producing two
   stacked grab-bars, so the pseudo has been removed. */
.sheet-handle {
  display: block;
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  margin: 10px auto -4px;
  flex-shrink: 0;
  align-self: center;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h3 {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
}
.modal-body {
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  /* CRITICAL: without min-height:0 a flex child won't shrink below its content
     intrinsic size, which silently disables overflow scrolling. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: calc(16px + var(--safe-b));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.modal-body p { color: var(--text-2); font-size: 14px; }
.modal-footer {
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--safe-b));
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── 12. Buttons ──────────────────────────────────────────── */
.btn-primario {
  padding: 10px 20px;
  border-radius: var(--r-sm);
  background: var(--accent-cal);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: opacity var(--t-fast), transform var(--t-fast);
  min-height: 44px;
}
.btn-primario:active {
  opacity: 0.85;
  transform: scale(0.97);
}
.btn-secundario {
  padding: 10px 20px;
  border-radius: var(--r-sm);
  background: var(--surface-hi);
  color: var(--text-2);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--t-fast);
  min-height: 44px;
}
.btn-secundario:active { background: var(--surface-hi2); }
.btn-danger {
  padding: 10px 20px;
  border-radius: var(--r-sm);
  background: rgba(255,77,106,0.15);
  color: var(--danger);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--t-fast);
  min-height: 44px;
}
.btn-danger:active { background: rgba(255,77,106,0.25); }
.btn-outline {
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-hi);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  text-align: center;
  transition: background var(--t-fast);
  min-height: 44px;
}
.btn-outline:active { background: var(--surface-hi); }
.btn-outline-sm {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-hi);
  color: var(--accent-cal);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--t-fast);
  width: auto;
}
.btn-outline-sm:active { background: rgba(124,92,255,0.1); }
.btn-primario-sm {
  padding: 8px 16px;
  border-radius: var(--r-sm);
  background: var(--accent-cal);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
  width: auto;
  min-height: 44px;
}
.btn-primario-sm:active { opacity: 0.8; }

/* ── 13. Settings Drawer ──────────────────────────────────── */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 90vw);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  display: flex;
  flex-direction: column;
  animation: drawer-in 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.drawer.oculto { display: none !important; }
.drawer.drawer-bajo-modal {
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
@keyframes drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  padding-top: calc(16px + var(--safe-t));
  border-bottom: 1px solid var(--border);
}
.drawer-header h2 { font-size: 18px; font-weight: 700; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.ajuste-section-title {
  padding: 16px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
}
.ajuste-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
  font-size: 15px;
}
.toggle-grupo {
  display: flex;
  background: var(--surface-hi);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
}
.toggle-opt {
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.toggle-opt.activo { background: var(--accent-cal); color: #fff; }
.ajuste-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  width: 100%;
  font-size: 15px;
  color: var(--text);
  text-align: left;
  transition: background var(--t-fast);
  border-bottom: 1px solid var(--border);
  min-height: 44px;
}
.ajuste-btn:active { background: var(--surface-hi); }
.ajuste-meta {
  padding: 4px 16px 12px;
  font-size: 12px;
  color: var(--text-2);
}
.ajuste-version {
  padding: 20px 16px 12px;
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}
.ajuste-btn-highlight {
  color: var(--accent-cal);
  font-weight: 600;
}

/* ── 14. Comidas ──────────────────────────────────────────── */
/* Segmented-control style subtab bar (used everywhere) */
.subtab-bar {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  gap: 6px;
  flex-shrink: 0;
  justify-content: center;
}
.subtab-bar > button {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  min-height: 38px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subtab-bar > button:active { transform: scale(0.97); }

/* Per-section accent colors when active — tinted background + accent text */
.comidas-tab-btn.activo {
  background: rgba(45,212,164,0.22);
  color: var(--accent-food);
  border-color: rgba(45,212,164,0.55);
  box-shadow: 0 4px 14px rgba(45,212,164,0.22), inset 0 0 0 1px rgba(45,212,164,0.3);
}
.gastos-tab-btn.activo {
  background: rgba(59,158,255,0.22);
  color: var(--accent-money);
  border-color: rgba(59,158,255,0.55);
  box-shadow: 0 4px 14px rgba(59,158,255,0.22), inset 0 0 0 1px rgba(59,158,255,0.3);
}
.entrenos-tab-btn.activo {
  background: rgba(255,107,53,0.22);
  color: #FFA070;
  border-color: rgba(255,107,53,0.55);
  box-shadow: 0 4px 14px rgba(255,107,53,0.25), inset 0 0 0 1px rgba(255,107,53,0.3);
}
.rutina-tab-btn.activo {
  background: rgba(124,92,255,0.22);
  color: #B5A3FF;
  border-color: rgba(124,92,255,0.55);
  box-shadow: 0 4px 14px rgba(124,92,255,0.25), inset 0 0 0 1px rgba(124,92,255,0.3);
}
html[data-tema="claro"] .comidas-tab-btn.activo  { color: var(--accent-food); background: rgba(4,117,77,0.12); border-color: rgba(4,117,77,0.45); }
html[data-tema="claro"] .gastos-tab-btn.activo   { color: var(--accent-money); background: rgba(24,88,190,0.12); border-color: rgba(24,88,190,0.45); }
html[data-tema="claro"] .entrenos-tab-btn.activo { color: #8E3614; background: rgba(179,62,21,0.12); border-color: rgba(179,62,21,0.45); }
html[data-tema="claro"] .rutina-tab-btn.activo   { color: var(--accent-cal); background: rgba(74,51,165,0.12); border-color: rgba(74,51,165,0.45); }
html[data-tema="claro"] .chip-picker .chip.activo {
  color: var(--accent-money);
  background: rgba(24,88,190,0.12);
  border-color: rgba(24,88,190,0.45);
}
html[data-tema="claro"] .tipo-btn.activo {
  background: rgba(24,88,190,0.13);
  color: var(--accent-money);
  box-shadow: inset 0 0 0 1px rgba(24,88,190,0.4);
}
html[data-tema="claro"] .tipo-btn[data-tipo="ahorro"].activo {
  background: rgba(4,117,77,0.13);
  color: var(--success);
  box-shadow: inset 0 0 0 1px rgba(4,117,77,0.4);
}
.comidas-subtab {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}
.comidas-subtab.oculto { display: none !important; }

/* ── Recipe Grid & Cards — Colored ───────────────────────── */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.recipe-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  min-height: 120px;
  box-shadow: var(--shadow-sm);
}
.recipe-card:active {
  background: var(--surface-hi);
  transform: scale(0.97);
}
.recipe-emoji {
  font-size: 44px;
  line-height: 1;
}
.recipe-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}
.recipe-name {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.recipe-time { font-size: 11px; color: var(--text-2); }

/* Recipe color variants — 8 gradient backgrounds */
.recipe-bg-0 {
  background: linear-gradient(145deg, rgba(124,92,255,0.18) 0%, rgba(124,92,255,0.04) 100%);
  border-color: rgba(124,92,255,0.25);
}
.recipe-bg-1 {
  background: linear-gradient(145deg, rgba(45,212,164,0.18) 0%, rgba(45,212,164,0.04) 100%);
  border-color: rgba(45,212,164,0.25);
}
.recipe-bg-2 {
  background: linear-gradient(145deg, rgba(255,140,66,0.18) 0%, rgba(255,140,66,0.04) 100%);
  border-color: rgba(255,140,66,0.25);
}
.recipe-bg-3 {
  background: linear-gradient(145deg, rgba(59,158,255,0.18) 0%, rgba(59,158,255,0.04) 100%);
  border-color: rgba(59,158,255,0.25);
}
.recipe-bg-4 {
  background: linear-gradient(145deg, rgba(255,107,157,0.18) 0%, rgba(255,107,157,0.04) 100%);
  border-color: rgba(255,107,157,0.25);
}
.recipe-bg-5 {
  background: linear-gradient(145deg, rgba(250,204,21,0.18) 0%, rgba(250,204,21,0.04) 100%);
  border-color: rgba(250,204,21,0.25);
}
.recipe-bg-6 {
  background: linear-gradient(145deg, rgba(255,77,106,0.18) 0%, rgba(255,77,106,0.04) 100%);
  border-color: rgba(255,77,106,0.25);
}
.recipe-bg-7 {
  background: linear-gradient(145deg, rgba(99,102,241,0.18) 0%, rgba(99,102,241,0.04) 100%);
  border-color: rgba(99,102,241,0.25);
}

/* Recipe detail */
.recipe-detail h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-top: 8px;
  margin-bottom: 6px;
}
.recipe-detail ul, .recipe-detail ol {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recipe-detail li { font-size: 14px; color: var(--text-2); }
.recipe-time-detail { font-size: 13px; color: var(--text-2); }

/* Recipe form */
.form-row { display: flex; gap: 8px; }
.input-emoji {
  width: 52px;
  flex-shrink: 0;
  text-align: center;
  font-size: 22px;
  padding: 8px 4px;
}
.input-grow { flex: 1; }
.list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.list-row input, .list-row textarea { flex: 1; }
.paso-num {
  width: 20px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  text-align: center;
}
.btn-remove-ing, .btn-remove-paso {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,77,106,0.12);
  color: var(--danger);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
  min-width: 44px;
  min-height: 44px;
}
.btn-remove-ing:active,
.btn-remove-paso:active { background: rgba(255,77,106,0.25); }

/* Meal planner */
.semana-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 12px;
  gap: 8px;
}
.semana-label { font-size: 14px; font-weight: 600; color: var(--text-2); }
.semana-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px 12px;
  scrollbar-width: none;
}
.semana-grid::-webkit-scrollbar { display: none; }
.semana-col { display: flex; flex-direction: column; gap: 4px; min-width: 76px; }
.semana-dia-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-align: center;
  text-transform: uppercase;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.semana-dia-header span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.semana-cell {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 5px 3px;
  min-height: 50px;
  cursor: pointer;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.semana-cell:active { background: var(--surface-hi); }
.semana-receta {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: var(--accent-food);
  word-break: break-word;
}
.semana-vacio { font-size: 9px; color: var(--text-3); text-align: center; }
.recipe-select-item {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 15px;
  transition: background var(--t-fast);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  min-height: 44px;
}
.recipe-select-item:active { background: var(--surface-hi); }
.recipe-select-item:last-child { border-bottom: none; }

/* Shopping list */
.compra-add-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.compra-add-bar input { flex: 1; }
#compra-list { display: flex; flex-direction: column; gap: 8px; }
.compra-section { margin-bottom: 8px; }
.compra-cat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  padding: 4px 0 6px;
}
.compra-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  transition: opacity var(--t-fast);
  margin-bottom: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.compra-item.completado { opacity: 0.45; }
.compra-item.completado .compra-nombre {
  text-decoration: line-through;
  color: var(--text-3);
}
.compra-check {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--border-hi);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-food);
  transition: background var(--t-fast), border-color var(--t-fast);
  min-width: 44px;
  min-height: 44px;
}
.compra-item.completado .compra-check {
  background: rgba(45,212,164,0.2);
  border-color: var(--accent-food);
}
.compra-nombre { flex: 1; font-size: 14px; }
.compra-delete {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-3);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
  min-width: 44px;
  min-height: 44px;
}
.compra-delete:active {
  color: var(--danger);
  background: rgba(255,77,106,0.1);
}
.compra-done { margin-top: 12px; }

/* ── 15. Gastos — Premium ─────────────────────────────────── */
#seccion-gastos { overflow: hidden; }

#gastos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 12px 12px;
  background: linear-gradient(160deg, #13131E 0%, #0A0A14 100%);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#gastos-mes-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
#gastos-mes-label { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; }

#gastos-resumen {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  overflow-y: auto;
  max-height: 45vh;
}
#gastos-lista {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 80px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Transaction items — premium */
.tx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.tx-item:active { opacity: 0.7; }
.tx-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  background: var(--surface-hi);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tx-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tx-desc {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-meta { font-size: 12px; color: var(--text-3); }
.tx-amount {
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.tx-amount.ingreso { color: var(--success); }
.tx-amount.gasto   { color: var(--danger); }

/* Transaction form */
.tipo-toggle {
  display: flex;
  background: var(--surface-hi);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 3px;
}
.tipo-btn {
  flex: 1;
  padding: 8px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
  text-align: center;
  min-height: 44px;
}
.tipo-btn.activo {
  background: rgba(59,158,255,0.18);
  color: var(--accent-money);
  box-shadow: inset 0 0 0 1px rgba(59,158,255,0.35);
}
.tipo-btn[data-tipo="ahorro"].activo {
  background: rgba(45,212,164,0.18);
  color: var(--success);
  box-shadow: inset 0 0 0 1px rgba(45,212,164,0.35);
}
html[data-tema="claro"] .tipo-btn.activo {
  background: rgba(29,111,232,0.13);
  color: var(--accent-money);
  box-shadow: inset 0 0 0 1px rgba(29,111,232,0.35);
}
html[data-tema="claro"] .tipo-btn[data-tipo="ahorro"].activo {
  background: rgba(6,151,101,0.13);
  color: var(--success);
  box-shadow: inset 0 0 0 1px rgba(6,151,101,0.35);
}
.tx-amount.ahorro { color: var(--success); }

/* ── 16. Event Detail ─────────────────────────────────────── */
.event-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.event-dot.event-work     { background: var(--ev-work); }
.event-dot.event-sport    { background: var(--ev-sport); }
.event-dot.event-food     { background: var(--ev-food); }
.event-dot.event-study    { background: var(--ev-study); }
.event-dot.event-personal { background: var(--ev-personal); }
.event-dot.event-rest     { background: var(--ev-rest); }
.event-detail-time {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2) !important;
}

/* ── 17. Form labels ──────────────────────────────────────── */
.modal-body label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  display: block;
  margin-bottom: 4px;
}

/* ── 18. Utilities ────────────────────────────────────────── */
.oculto { display: none !important; }

/* Empty states — premium */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin: 16px;
}
.empty-state::before {
  font-size: 56px;
  opacity: 0.35;
  line-height: 1;
}
#comidas-recetas .empty-state::before { content: '🍽️'; }
#gastos-lista .empty-state::before    { content: '💳'; }
.empty-state p {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-2);
}
.empty-state p.text-2 {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-3);
}

.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }

/* ── 19. Donut Chart ──────────────────────────────────────── */
.donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px 16px;
  gap: 12px;
}
.donut-svg {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.35));
  overflow: visible;
}
.donut-segment {
  transition: opacity 200ms ease;
  cursor: pointer;
}
.donut-segment:active { opacity: 0.75; }
@keyframes donut-segment-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.donut-center-label {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: var(--text-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.donut-center-total {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  fill: var(--text);
  letter-spacing: -0.5px;
}
html[data-tema="claro"] .donut-center-label { fill: #9A9AB0; }
html[data-tema="claro"] .donut-center-total { fill: #0D0D18; }

.donut-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.donut-legend-row:active { background: var(--surface-hi); }
.donut-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-legend-cat {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.donut-legend-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.donut-legend-pct {
  font-size: 12px;
  color: var(--text-3);
  min-width: 32px;
  text-align: right;
}

/* ── 20. Mobile Critical Fixes ────────────────────────────── */
/* Prevent iOS input zoom — all inputs must be ≥ 16px */
input, select, textarea, .input-emoji { font-size: 16px !important; }

/* Smooth scrolling */
* { scroll-behavior: smooth; }

/* Refined scrollbars */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

/* ── 21. Light Theme Refinements ──────────────────────────── */
html[data-tema="claro"] #top-bar {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(0,0,0,0.06);
}
html[data-tema="claro"] .bottom-nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -1px 0 var(--border);
}
html[data-tema="claro"] .fab {
  box-shadow: 0 4px 20px rgba(124,92,255,0.30), 0 2px 6px rgba(124,92,255,0.15);
}
html[data-tema="claro"] .modal {
  box-shadow: 0 -8px 60px rgba(0,0,0,0.15);
}
html[data-tema="claro"] #gastos-header {
  background: linear-gradient(160deg, #F0F0FA 0%, #E8E8F4 100%);
}
html[data-tema="claro"] .event-work {
  background: linear-gradient(90deg, rgba(124,92,255,0.13) 0%, rgba(124,92,255,0.03) 100%);
  color: #5A3FCC;
}
html[data-tema="claro"] .event-sport {
  background: linear-gradient(90deg, rgba(255,140,66,0.13) 0%, rgba(255,140,66,0.03) 100%);
  color: #C65A00;
}
html[data-tema="claro"] .event-food {
  background: linear-gradient(90deg, rgba(45,212,164,0.13) 0%, rgba(45,212,164,0.03) 100%);
  color: #0D9A74;
}
html[data-tema="claro"] .event-study {
  background: linear-gradient(90deg, rgba(59,158,255,0.13) 0%, rgba(59,158,255,0.03) 100%);
  color: #1A6FCC;
}
html[data-tema="claro"] .event-personal {
  background: linear-gradient(90deg, rgba(255,107,157,0.13) 0%, rgba(255,107,157,0.03) 100%);
  color: #CC2060;
}
html[data-tema="claro"] .event-rest {
  background: linear-gradient(90deg, rgba(74,80,102,0.10) 0%, rgba(74,80,102,0.02) 100%);
  color: #5A6070;
}
html[data-tema="claro"] .recipe-bg-0 {
  background: linear-gradient(145deg, rgba(124,92,255,0.10) 0%, rgba(124,92,255,0.02) 100%);
}
html[data-tema="claro"] .recipe-bg-1 {
  background: linear-gradient(145deg, rgba(45,212,164,0.10) 0%, rgba(45,212,164,0.02) 100%);
}
html[data-tema="claro"] .recipe-bg-2 {
  background: linear-gradient(145deg, rgba(255,140,66,0.10) 0%, rgba(255,140,66,0.02) 100%);
}
html[data-tema="claro"] .recipe-bg-3 {
  background: linear-gradient(145deg, rgba(59,158,255,0.10) 0%, rgba(59,158,255,0.02) 100%);
}
html[data-tema="claro"] .recipe-bg-4 {
  background: linear-gradient(145deg, rgba(255,107,157,0.10) 0%, rgba(255,107,157,0.02) 100%);
}
html[data-tema="claro"] .recipe-bg-5 {
  background: linear-gradient(145deg, rgba(250,204,21,0.10) 0%, rgba(250,204,21,0.02) 100%);
}
html[data-tema="claro"] .recipe-bg-6 {
  background: linear-gradient(145deg, rgba(255,77,106,0.10) 0%, rgba(255,77,106,0.02) 100%);
}
html[data-tema="claro"] .recipe-bg-7 {
  background: linear-gradient(145deg, rgba(99,102,241,0.10) 0%, rgba(99,102,241,0.02) 100%);
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--safe-b) + 16px);
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-hi2);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-hi);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  max-width: 80vw;
  text-align: center;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-ok      { border-color: rgba(45,212,164,0.35); }
.toast-error   { border-color: rgba(255,77,106,0.40); color: var(--danger); }

/* ── 22. Responsive / Large Screen ───────────────────────── */
@media (min-width: 390px) {
  .modal {
    max-width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 24px 24px 0 0;
  }
  @keyframes sheet-up {
    from {
      transform: translateX(-50%) translateY(100%);
      opacity: 0.6;
    }
    to {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
  }
}

/* ── Drag & Drop Calendar Events ─────────────────────────── */
.event-dragging {
  opacity: 0.3 !important;
  transform: scale(0.97) !important;
}

.event-drag-ghost {
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.15) !important;
  transform: scale(1.04) !important;
  transition: none !important;
  pointer-events: none;
  z-index: 1000;
}

.drag-delete-zone {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 72px;
  background: linear-gradient(to top, rgba(255,77,106,0.35), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 50;
  pointer-events: none;
  border-top: 1px solid rgba(255,77,106,0.3);
}
.drag-delete-zone.visible {
  opacity: 1;
  transform: translateY(0);
}
.drag-delete-zone.over {
  background: linear-gradient(to top, rgba(255,77,106,0.6), transparent);
}

/* ── Entrenamientos Section ───────────────────────────────── */
.entrenos-subtab {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 100px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.entrenos-subtab.oculto { display: none; }

/* Entrenos tabs: handled by .subtab-bar segmented control above */

/* ── Session Header ──────────────────────────────────────── */
.entreno-session-header {
  margin: 12px 16px;
  padding: 16px;
  border-radius: var(--r-lg);
  border-left: 4px solid #FF6B35;
  background: rgba(255,107,53,0.08);
  border: 1px solid rgba(255,107,53,0.2);
  border-left-width: 4px;
}
.entreno-session-nombre {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.entreno-session-meta {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 3px;
}
.entreno-session-progreso {
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}
.entreno-completado-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(45,212,164,0.15);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--success);
}

/* ── Exercise Cards ──────────────────────────────────────── */
.ejercicios-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 16px;
}
.plan-dia-row--hoy {
  border: 1px solid rgba(255,107,53,0.4) !important;
  background: rgba(255,107,53,0.05) !important;
}

.ejercicio-card {
  margin: 0 16px 8px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--surface-hi3);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.ejercicio-card.all-done {
  border-left-color: #FF6B35;
  background: rgba(255,107,53,0.03);
}

.ejercicio-card-header {
  padding: 12px 14px 8px;
}
.ejercicio-nombre-text {
  font-size: 15px;
  font-weight: 700;
}
.ejercicio-ref-text {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.sets-row {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
  flex-wrap: wrap;
}
.set-chip {
  min-width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface-hi2);
  border: 2px solid var(--border-hi);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  transition: all var(--t-fast);
  cursor: pointer;
  padding: 0 10px;
  letter-spacing: -0.3px;
}
.set-chip:active { transform: scale(0.90); }
.set-chip.done {
  background: rgba(255,107,53,0.18);
  border-color: rgba(255,107,53,0.5);
  color: #FF6B35;
  box-shadow: 0 2px 8px rgba(255,107,53,0.2);
}
.set-chip-label { font-size: 9px; font-weight: 600; color: var(--text-3); line-height: 1; text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Set Registration Modal ──────────────────────────────── */
.set-registro-body {
  display: flex;
  gap: 16px;
  padding: 8px 0;
}
.set-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.set-input-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
}
.set-input-big {
  font-size: 28px !important;
  font-weight: 800;
  text-align: center;
  padding: 12px !important;
  border-radius: var(--r-md) !important;
}

/* ── Rest Timer ──────────────────────────────────────────── */
.rest-timer-bar {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  left: 16px; right: 16px;
  background: var(--surface-hi2);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(calc(100% + var(--nav-h) + 100px));
  opacity: 0;
  visibility: hidden;
  transition: transform var(--t-spring), opacity 300ms ease, visibility 0ms 380ms;
  z-index: 50;
  box-shadow: var(--shadow-lg);
}
.rest-timer-bar.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--t-spring), opacity 300ms ease, visibility 0ms 0ms;
}
.rest-timer-time {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #FF6B35;
  min-width: 64px;
}
.rest-timer-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-3);
  font-weight: 500;
}
.rest-timer-cancel {
  padding: 7px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-hi3);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

/* ── Rutinas List ────────────────────────────────────────── */
.rutinas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.rutina-list-card {
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  cursor: pointer;
  transition: background var(--t-fast);
  overflow: hidden;
  position: relative;
}
.rutina-list-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--rutina-color, #FF6B35);
}
.rutina-list-card:active { background: var(--surface-hi); }
.rutina-list-info { flex: 1; min-width: 0; }
.rutina-list-nombre {
  font-size: 15px;
  font-weight: 700;
}
.rutina-list-ejercicios {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rutina-list-chevron {
  font-size: 18px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* Color swatches in form */
.color-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.color-swatch.selected {
  border-color: var(--text);
  transform: scale(1.15);
}

/* ── Plan Grid ───────────────────────────────────────────── */
.plan-entreno-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.plan-dia-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
}
.plan-dia-row:active { background: var(--surface-hi); }
.plan-dia-nombre {
  font-size: 15px;
  font-weight: 700;
  width: 72px;
  flex-shrink: 0;
}
.plan-dia-rutina-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.plan-color-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.plan-dia-nombre-rutina {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-dia-descanso {
  font-size: 14px;
  color: var(--text-3);
}
.plan-dia-chevron {
  font-size: 16px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* ── Rest day view ───────────────────────────────────────── */
.entreno-rest-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 24px;
  text-align: center;
}
.entreno-rest-day h3 {
  font-size: 22px;
  font-weight: 800;
}
.entreno-rest-day p {
  font-size: 15px;
  color: var(--text-3);
}

/* ── Terminar button ─────────────────────────────────────── */
.btn-terminar-entreno {
  margin: 8px 16px 0;
  padding: 14px;
  width: calc(100% - 32px);
  border-radius: var(--r-md);
  background: #FF6B35;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  transition: opacity var(--t-fast), transform var(--t-fast);
  box-shadow: 0 4px 20px rgba(255,107,53,0.35);
}
.btn-terminar-entreno:active { opacity: 0.85; transform: scale(0.98); }
.btn-terminar-entreno.completado {
  background: var(--surface-hi2);
  color: var(--success);
  box-shadow: none;
}

/* ── Streak badge ────────────────────────────────────────── */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255,107,53,0.15);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #FF6B35;
  margin-top: 6px;
}

/* FAB orange for entrenos */
.fab-entrenos { background: #FF6B35; box-shadow: 0 4px 16px rgba(255,107,53,0.4); }

/* ── 23. User-select on interactive elements ──────────────── */
.nav-btn, .btn-icon, .week-chip, .event-card, .nav-btn span,
.fab, .comidas-tab-btn, .tipo-btn, .toggle-opt { user-select: none; }

/* ── Calendar event color swatches ───────────────────────── */
.ev-color-swatch {
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.ev-color-swatch:active { transform: scale(0.9); }
.ev-color-swatch.selected { transform: scale(1.15); }
.ev-color-extra:active { transform: scale(0.9) !important; opacity: 1 !important; }
.ev-color-extra:hover  { opacity: 1 !important; }

/* ── Compact event card (short events < 38px) ─────────────── */
.event-card.compact {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
}

/* ── Day-of-week pill buttons ─────────────────────────────── */
.dias-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dia-pill {
  min-width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--surface-hi);
  border: 1.5px solid var(--border-hi);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  transition: all var(--t-fast);
  cursor: pointer;
  flex-shrink: 0;
}
.dia-pill:active { transform: scale(0.93); }
.dia-pill.activo {
  background: var(--accent-cal);
  border-color: var(--accent-cal);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124,92,255,0.35);
}

/* ── Number stepper ───────────────────────────────────────── */
.num-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  overflow: hidden;
}
.num-stepper input {
  flex: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  padding: 12px 4px;
  min-width: 60px;
}
.num-stepper input:focus {
  box-shadow: none;
  border-color: transparent;
}
.stepper-btn {
  width: 48px;
  height: 52px;
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--text-2);
  background: var(--surface-hi2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
  border: none;
}
.stepper-btn:active { background: var(--surface-hi3); color: var(--text); }

/* ── Comidas tiempo stepper row ───────────────────────────── */
.stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.stepper-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface-hi2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.stepper .stepper-btn {
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 0;
}
.stepper-val {
  min-width: 42px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.stepper-unit {
  font-size: 12px;
  color: var(--text-3);
  padding-right: 4px;
}

/* ── Ajustes collapsible section ──────────────────────────── */
.ajuste-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  transition: background var(--t-fast);
  border-bottom: 1px solid var(--border);
}
.ajuste-toggle-header:active { background: var(--surface-hi); }
.ajuste-toggle-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
}
.ajuste-toggle-chevron {
  font-size: 12px;
  color: var(--text-3);
  transition: transform var(--t-fast);
}
.ajuste-toggle-chevron.open { transform: rotate(180deg); }
.ajuste-collapsible {
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms ease;
}
.ajuste-collapsible.open { max-height: 600px; }

/* ── Dual Donut Layout (Gastos) ───────────────────────────── */
.dual-donut-row {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
}

.mini-donut-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  max-width: 50%;
}
.mini-donut-wrap + .mini-donut-wrap {
  border-left: 1px solid var(--border);
}

.mini-donut-label-text {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-3);
}

.mini-donut-svg {
  width: 140px;
  height: 140px;
  overflow: visible;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,0.3));
}

.mini-donut-total {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  fill: var(--text);
  letter-spacing: -0.5px;
}
html[data-tema="claro"] .mini-donut-total { fill: #0D0D18; }

.mini-donut-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 140px;
}
.mini-donut-zero {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-3);
}

.mini-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}

.mini-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.mini-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mini-legend-cat {
  flex: 1;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mini-legend-val {
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

/* ── Transaction date groups ──────────────────────────────── */
.tx-group {
  margin-bottom: 4px;
}
.tx-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 6px;
}
.tx-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
}
.tx-group-total {
  font-size: 12px;
  font-weight: 700;
}
.tx-group-total.ingreso { color: var(--success); }
.tx-group-total.gasto   { color: var(--danger); }

/* ── Week activity dots on calendar ──────────────────────── */
.chip-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 2px;
  min-height: 5px;
}
.chip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.week-chip.activo .chip-dot { opacity: 0.9; }

/* ── Weekly summary badge (Entrenos) ─────────────────────── */
.semana-entrenos-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
}
.semana-entrenos-ring {
  flex-shrink: 0;
}
.semana-entrenos-text strong {
  color: var(--text);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   MEJORAS MAYO 2026
   ══════════════════════════════════════════════════════ */

/* ── Rutina tabs (Hoy / Plantilla): handled by .subtab-bar segmented control */
#rutina-tabs { flex-shrink: 0; }

/* ── Plantilla list ────────────────────────────────────── */
#plantilla-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 80px;
}
#plantilla-list.oculto { display: none !important; }

.plantilla-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plantilla-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface-hi);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.plantilla-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.plantilla-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plantilla-nombre {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plantilla-time {
  font-size: 12px;
  color: var(--text-2);
}
.plantilla-days {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.plantilla-day-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--surface-hi2);
  color: var(--text-3);
  border: 1px solid transparent;
  letter-spacing: 0.3px;
}
.plantilla-day-chip.activo {
  background: rgba(124,92,255,0.18);
  color: var(--accent-cal);
  border-color: rgba(124,92,255,0.3);
}
.plantilla-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.plantilla-actions .btn-icon {
  font-size: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}

/* ── Gastos sub-tabs: handled by .subtab-bar segmented control */
.gastos-tabs { flex-shrink: 0; }
#gastos-movimientos-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
#gastos-movimientos-content.oculto { display: none !important; }
#gastos-ahorros {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#gastos-ahorros.oculto { display: none !important; }

/* ── Ahorros — saldo global card ──────────────────────── */
.ahorros-saldo-card {
  background: linear-gradient(135deg, rgba(59,158,255,0.15), rgba(45,212,164,0.08));
  border: 1px solid rgba(59,158,255,0.25);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ahorros-saldo-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-2);
}
.ahorros-saldo-amount {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--accent-money);
}
.ahorros-saldo-libre {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 4px;
}
.ahorros-saldo-btns {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.ahorros-saldo-btns .btn-secundario,
.ahorros-saldo-btns .btn-primario {
  flex: 1;
}

/* ── Ahorros — metas header ───────────────────────────── */
.ahorros-metas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.ahorros-metas-header span:first-child {
  font-size: 15px;
  font-weight: 700;
}

/* ── Ahorros — meta card (premium v2) ─────────────────── */
.meta-card {
  position: relative;
  background: linear-gradient(160deg, var(--surface-hi) 0%, var(--surface) 100%);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.meta-card-done {
  border-color: rgba(45,212,164,0.4);
  background: linear-gradient(160deg, rgba(45,212,164,0.08) 0%, var(--surface) 100%);
}
.meta-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-3);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.meta-menu-btn:active { background: var(--surface-hi2); color: var(--text); }

.meta-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 36px; /* leave room for menu button */
}
.meta-emoji {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}
.meta-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-nombre {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta-progress-text {
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.meta-progress-text strong {
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}
.meta-pct-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(59,158,255,0.18);
  color: var(--accent-money);
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.meta-pct-badge.done {
  background: rgba(45,212,164,0.22);
  color: var(--success);
  font-size: 14px;
  padding: 4px 10px;
}
.meta-bar-track {
  height: 8px;
  background: var(--surface-hi2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.meta-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-money), #6BE3C5);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.34,1.1,0.64,1);
  min-width: 0%;
  max-width: 100%;
  box-shadow: 0 0 12px rgba(59,158,255,0.4);
}
.meta-bar-fill.done {
  background: linear-gradient(90deg, var(--success), #6BE3C5);
  box-shadow: 0 0 12px rgba(45,212,164,0.5);
}
.meta-bar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.meta-restante {
  font-size: 13px;
  color: var(--text-2);
}
.meta-restante .priv-amount {
  color: var(--text);
  font-weight: 700;
}
.meta-retirar-btn {
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-hi);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.meta-retirar-btn:active {
  background: var(--surface-hi2);
  color: var(--text);
  border-color: var(--text-3);
}

/* ── Action sheet (used by meta menu) ─────────────────── */
.action-sheet {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: transparent;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  transition: background var(--t-fast);
  min-height: 52px;
  border-radius: 10px;
  margin: 0 6px;
}
.action-row:active { background: var(--surface-hi2); }
.action-row .action-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.action-row.danger { color: var(--danger); }
.action-row.danger:active { background: rgba(255,77,106,0.12); }

.btn-outline-sm.meta-asignar {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent-money);
  color: var(--accent-money);
  background: transparent;
  transition: background var(--t-fast);
}
.btn-outline-sm.meta-asignar:active {
  background: rgba(59,158,255,0.1);
}
#fab-nueva-meta {
  background: linear-gradient(135deg, var(--accent-money), var(--accent-food));
  box-shadow: 0 4px 16px rgba(59,158,255,0.4);
}

/* ── Ajustes — danger zone ─────────────────────────────── */
.ajuste-btn-danger {
  color: var(--danger) !important;
  font-weight: 600;
}

/* ── Toggle single button ───────────────────────────────── */
.toggle-opt-single {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  background: var(--surface-hi2);
  color: var(--text-2);
  border: 1px solid var(--border-hi);
  transition: background var(--t-fast), color var(--t-fast);
}
.toggle-opt-single.activo {
  background: rgba(124,92,255,0.18);
  color: var(--accent-cal);
  border-color: rgba(124,92,255,0.3);
}

/* ── Event resize handles ───────────────────────────────── */
.ev-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  background: rgba(255,255,255,0.35);
  border-radius: 2px;
  pointer-events: none;
  flex-shrink: 0;
}
.ev-handle-top { top: 4px; }
.ev-handle-bot { bottom: 4px; }

.event-resizing {
  opacity: 0.75;
  z-index: 10 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25) !important;
}

/* Live time indicator during resize drag */
.drag-time-indicator {
  position: absolute;
  right: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
  transform: translateY(-50%);
}
.drag-time-indicator-start {
  background: rgba(124,92,255,0.9);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.drag-time-indicator-end {
  background: rgba(124,92,255,0.9);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ══════════════════════════════════════════════════════
   GASTOS V2 — Recurrentes · Historial · Budget Ring
   ══════════════════════════════════════════════════════ */

/* ── 🔄 Recurrentes button in gastos header ────────────── */
#btn-recurrentes {
  color: var(--text-3);
  transition: color var(--t-fast);
}
#btn-recurrentes:active { color: var(--accent-money); }

/* ── Discreet link toggle (used for "Hacer recurrente" etc.) */
.link-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  align-self: flex-start;
  transition: color var(--t-fast);
}
.link-toggle:active { color: var(--text-2); }
.link-toggle.activo { color: var(--accent-money); }
.link-toggle .link-toggle-icon { font-size: 13px; opacity: 0.85; }
.link-toggle .link-toggle-text { text-decoration: underline; text-decoration-color: rgba(128,128,160,0.35); text-underline-offset: 3px; }
.link-toggle.activo .link-toggle-text { text-decoration-color: var(--accent-money); }
#frecuente-day-wrap { margin-top: 6px; }

/* ── Recurrente row in modal ────────────────────────────── */
.recurrente-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.recurrente-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.recurrente-badge.gasto    { background: rgba(255,77,106,0.18); color: var(--danger); }
.recurrente-badge.ingreso  { background: rgba(45,212,164,0.18); color: var(--success); }
.recurrente-badge.ahorro   { background: rgba(45,212,164,0.18); color: var(--success); font-size: 14px; }
.recurrente-cantidad.ahorro { color: var(--success); }
.recurrente-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recurrente-desc { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recurrente-meta { font-size: 11px; color: var(--text-3); }
.recurrente-cantidad { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.recurrente-cantidad.gasto   { color: var(--danger); }
.recurrente-cantidad.ingreso { color: var(--success); }
.recurrente-actions { display: flex; gap: 2px; flex-shrink: 0; }
.toggle-recurrente { font-size: 16px; opacity: 0.5; }
.toggle-recurrente.activo { opacity: 1; color: var(--success); }

/* ── Savings history rows ───────────────────────────────── */
.historial-section { margin-top: 16px; }
.historial-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-hi2);
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
}
.historial-chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
}
.historial-list {
  display: flex;
  flex-direction: column;
}
.historial-list.oculto {
  display: none;
}
.historial-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.historial-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.historial-info { flex: 1; min-width: 0; }
.historial-desc { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.historial-meta { display: block; font-size: 12px; color: var(--text-3); }
.historial-cantidad { font-size: 14px; font-weight: 600; white-space: nowrap; }
.historial-cantidad.aporte        { color: #2DD4A4; }
.historial-cantidad.retiro        { color: var(--danger); }
.historial-cantidad.transferencia { color: #3B9EFF; }
.historial-ver-todo {
  margin: 8px 16px;
  width: calc(100% - 32px);
}

/* ── Gastos tabs + privacy eye row ──────────────────────── */
.gastos-tabs-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.gastos-tabs-wrap .subtab-bar {
  flex: 1;
  border-bottom: none;
  padding-right: 4px;
}
.gastos-tabs-wrap #btn-toggle-priv {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 999px;
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  color: var(--text-2);
}

/* ── Lock overlay (PIN + biometric) ─────────────────────── */
#lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 50% 30%, #1a1a2a 0%, #08080f 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lock-in 240ms ease;
}
#lock-overlay.fading { opacity: 0; transition: opacity 200ms ease; }
@keyframes lock-in { from { opacity: 0 } to { opacity: 1 } }

.lock-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lock-card.shake { animation: lock-shake 380ms ease; }
@keyframes lock-shake {
  10%, 90%   { transform: translateX(-4px); }
  20%, 80%   { transform: translateX(6px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60%   { transform: translateX(8px); }
}

.lock-logo {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #7C5CFF, #2DD4A4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lock-prompt {
  font-size: 14px;
  color: #9999b3;
  font-weight: 500;
}
.lock-dots {
  display: flex;
  gap: 16px;
  padding: 8px 0;
}
.lock-dots > span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #4a4a66;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.lock-dots > span.filled {
  background: #7C5CFF;
  border-color: #7C5CFF;
  transform: scale(1.1);
}
.lock-keypad {
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 14px;
  margin-top: 4px;
}
.lock-key {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e8e8f5;
  font-size: 28px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 80ms, transform 80ms;
  -webkit-tap-highlight-color: transparent;
}
.lock-key:active {
  background: rgba(124,92,255,0.25);
  transform: scale(0.93);
}
.lock-key-back, .lock-key-bio {
  background: transparent;
  border-color: transparent;
  color: #7C5CFF;
}
.lock-key-bio.busy {
  animation: lock-bio-pulse 1.2s ease-in-out infinite;
}
@keyframes lock-bio-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
.lock-error {
  font-size: 13px;
  color: #FF4D6A;
  min-height: 18px;
  font-weight: 500;
  margin-top: -4px;
}

html[data-tema="claro"] #lock-overlay {
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #ececf2 70%);
}
html[data-tema="claro"] .lock-key {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.06);
  color: #1a1a2e;
}
html[data-tema="claro"] .lock-prompt { color: #5a5a7a; }
html[data-tema="claro"] .lock-dots > span { border-color: #c0c0d0; }

/* ── Dropdown (categoria / meta in gastos form) ────────── */
.dropdown {
  position: relative;
}
.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  text-align: left;
  min-height: 44px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropdown-trigger:active { background: var(--surface-hi2); }
.dropdown-current {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-chevron {
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 180ms ease;
}
.dropdown.open .dropdown-trigger {
  border-color: var(--accent-money);
  background: var(--surface-hi);
}
.dropdown.open .dropdown-chevron {
  transform: rotate(180deg);
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  animation: dropdown-in 160ms ease;
  max-height: 240px;
  overflow-y: auto;
}
.dropdown-menu.oculto { display: none !important; }
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-option {
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  text-align: left;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
  min-height: 44px;
}
.dropdown-option:last-child { border-bottom: none; }
.dropdown-option:active { background: var(--surface-hi2); }
.dropdown-option.activo {
  color: var(--accent-money);
  font-weight: 700;
  background: rgba(59,158,255,0.08);
}

/* ── Chip picker (replaces native <select> in forms) ─────── */
.chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.chip-picker .chip {
  flex: 0 0 auto;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-hi);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  min-height: 38px;
}
.chip-picker .chip:active { transform: scale(0.96); }
.chip-picker .chip.activo {
  background: rgba(59,158,255,0.16);
  color: var(--accent-money);
  border-color: rgba(59,158,255,0.55);
  box-shadow: 0 3px 12px rgba(59,158,255,0.18), inset 0 0 0 1px rgba(59,158,255,0.25);
}
html[data-tema="claro"] .chip-picker .chip.activo {
  color: var(--accent-money);
  background: rgba(29,111,232,0.12);
  border-color: rgba(29,111,232,0.45);
}
.chip-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-3);
  margin-bottom: 2px;
}

/* ── Privacy mode (blur amounts) ────────────────────────── */
body[data-priv="on"] .priv-amount {
  filter: blur(8px);
  transition: filter 180ms ease;
  pointer-events: none;
  user-select: none;
}
body[data-priv="on"] svg .priv-amount,
body[data-priv="on"] .priv-amount svg,
body[data-priv="on"] svg.priv-amount {
  filter: blur(8px);
}
body[data-priv="on"] #btn-toggle-priv .priv-eye-on { display: none; }
body[data-priv="on"] #btn-toggle-priv .priv-eye-off { display: block !important; }
#btn-toggle-priv .priv-eye-off.oculto { display: none; }
#btn-toggle-priv:active { background: var(--surface-hi2); }

/* ── Budget ring ────────────────────────────────────────── */
.budget-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px 0;
  gap: 12px;
}
.budget-ring-svg { overflow: visible; }
.budget-ring-center-val {
  font-size: 22px;
  font-weight: 800;
  font-family: -apple-system, system-ui, sans-serif;
}
.budget-ring-center-label {
  font-size: 11px;
  fill: var(--text-3);
  font-family: -apple-system, system-ui, sans-serif;
}
.budget-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.budget-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
}
.budget-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.budget-legend-val { font-weight: 700; color: var(--text); }
.budget-legend-row { display:flex;align-items:center;gap:8px;font-size:14px; }
.budget-legend-label { flex:1;color:var(--text-2); }
.budget-ring-svg { width:220px;height:220px; }
.budget-center-val { font-size:20px;font-weight:700; }
.budget-center-label { font-size:11px;text-transform:uppercase;letter-spacing:.5px; }