* { box-sizing: border-box; }

:root {
  --bg: #131A4E;
  --sheet-bg: #1B2464;
  --text: #F4F1E8;
  --text-78: rgba(244,241,232,0.78);
  --text-6: rgba(244,241,232,0.6);
  --text-5: rgba(244,241,232,0.5);
  --text-45: rgba(244,241,232,0.45);
  --text-42: rgba(244,241,232,0.42);
  --text-4: rgba(244,241,232,0.4);
  --text-14: rgba(244,241,232,0.14);
  --text-1: rgba(244,241,232,0.1);
  --text-07: rgba(244,241,232,0.07);
  --text-05: rgba(244,241,232,0.05);
  --blue: #2F6DF6;
  --purple: #7B3AF2;
  --red: #FB635C;
  --tan: #D3A06A;
}

html, body {
  margin: 0;
  background: #0B0E2A;
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}

button, input { font-family: Archivo, system-ui, sans-serif; }
input::placeholder { color: rgba(244,241,232,0.35); }

@keyframes ew-bar { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@keyframes ew-pulse {
  0% { box-shadow: 0 0 0 0 rgba(251,99,92,.45); }
  70% { box-shadow: 0 0 0 26px rgba(251,99,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,99,92,0); }
}
@keyframes ew-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ew-fade { from { opacity: 0; } to { opacity: 1; } }

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.screen {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 100%;
}
.screen.active { display: flex; }

.hidden { display: none !important; }

.mono { font-family: 'JetBrains Mono', monospace; }
.accent-tan { color: var(--tan); }
.f1 { flex: 1; min-width: 0; }

button { cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  width: 100%;
  border: none;
  border-radius: 17px;
  font-size: 16.5px;
  font-weight: 600;
  padding: 17px;
  font-family: Archivo, system-ui, sans-serif;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-tan { background: var(--tan); color: var(--bg); font-weight: 700; font-size: 16px; border-radius: 19px; }
.btn-ghost { background: none; color: var(--text-5); font-size: 14px; font-weight: 500; padding: 15px 0 0; }
.btn-outline {
  border: 1px solid rgba(244,241,232,0.18);
  background: var(--text-05);
  color: var(--text);
  font-size: 15.5px;
  border-radius: 18px;
}
.btn-danger {
  text-align: left;
  padding: 16px 18px;
  border-radius: 19px;
  background: rgba(251,99,92,0.1);
  border: 1px solid rgba(251,99,92,0.3);
  color: var(--red);
  font-size: 15px;
  font-weight: 600;
}
.btn-text-danger {
  background: none; border: none; color: var(--red);
  font-size: 14.5px; font-weight: 600; padding: 6px 0 0; margin-top: 4px;
}
.btn-small { width: auto; padding: 11px 18px; margin-top: 10px; font-size: 14px; border-radius: 14px; }
.link-btn { border: none; background: none; color: var(--blue); font-size: 13px; font-weight: 600; padding: 0; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--text-14); background: var(--text-05);
  color: var(--text); font-size: 15px; flex: none;
}
.icon-btn-sm { width: 32px; height: 32px; border-radius: 11px; border: none; background: rgba(244,241,232,0.09); font-size: 15px; }

/* ---------- Onboarding ---------- */
#screen-onboarding { padding: 8px 26px 34px; }
.onboard-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px; padding-top: 4px; }
.logo-box { width: 214px; height: 238px; overflow: hidden; position: relative; flex: none; border-radius: 30px; background: #101645; box-shadow: 0 18px 40px -22px rgba(0,0,0,.8); }
.logo-img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.onboard-copy { text-align: center; }
.onboard-title { font-size: 31px; font-weight: 700; letter-spacing: -0.03em; }
.onboard-desc { font-size: 15px; line-height: 1.5; color: var(--text-6); margin-top: 10px; max-width: 270px; margin-left: auto; margin-right: auto; }
.onboard-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.feature { display: flex; gap: 13px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-78); }
.dot { width: 7px; height: 7px; border-radius: 4px; margin-top: 7px; flex: none; }
.dot-blue { background: var(--blue); }
.dot-purple { background: var(--purple); }
.dot-red { background: var(--red); }

/* ---------- Lista header / budget ---------- */
.lista-header { display: flex; align-items: center; gap: 11px; padding: 14px 20px 14px; }
.logo-thumb { width: 40px; height: 44px; overflow: hidden; border-radius: 12px; background: #101645; flex: none; }
.logo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.header-titles { flex: 1; min-width: 0; }
.header-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.header-sub { font-size: 12px; color: var(--text-45); margin-top: 1px; }
.header-title-lg { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }

.budget-card {
  margin: 0 20px 16px; padding: 18px; border-radius: 22px;
  background: var(--text-05); border: 1px solid var(--text-1);
  transition: background .2s, border-color .2s;
}
.budget-card.over { background: rgba(251,99,92,0.13); border-color: rgba(251,99,92,0.4); }
.budget-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.budget-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-5); }
.budget-total { font-size: 38px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
.budget-target { text-align: right; padding-bottom: 6px; }
.budget-target-label { font-size: 12px; color: var(--text-45); }
.budget-target-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.budget-track { height: 6px; border-radius: 4px; background: rgba(244,241,232,0.12); margin-top: 14px; overflow: hidden; }
.budget-fill { height: 100%; border-radius: 4px; background: var(--blue); width: 0%; transition: width .45s cubic-bezier(.2,.8,.2,1), background .2s; }
.budget-fill.near { background: var(--tan); }
.budget-fill.over { background: var(--red); }
.budget-remaining { font-size: 12.5px; margin-top: 9px; color: var(--text-5); font-weight: 500; }
.budget-remaining.near { color: var(--tan); }
.budget-remaining.over { color: var(--red); }

.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 40px; text-align: center; }
.empty-title { font-size: 15px; font-weight: 600; }
.empty-desc { font-size: 13.5px; line-height: 1.5; color: var(--text-5); }

.items-section { flex: 1; }
.items-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 8px; }
.section-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,241,232,0.42); }

.item-row { display: flex; align-items: center; gap: 13px; padding: 12px 20px; border-top: 1px solid var(--text-07); }
.item-row.item-new { animation: ew-up .3s cubic-bezier(.2,.9,.2,1); }
.item-check {
  width: 25px; height: 25px; border-radius: 13px; border: 1.5px solid rgba(244,241,232,0.28);
  background: transparent; display: flex; align-items: center; justify-content: center; flex: none;
  font-size: 12px; color: var(--bg); font-weight: 800;
}
.item-check.done { background: var(--tan); border-color: var(--tan); }
.item-main { flex: 1; min-width: 0; }
.item-name { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-row.done .item-name { text-decoration: line-through; opacity: .5; }
.item-detail { font-size: 12px; color: var(--text-42); margin-top: 2px; font-variant-numeric: tabular-nums; }
.item-price { font-size: 16.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.item-row.done .item-price { opacity: .5; }
.item-row.pendiente .item-detail { color: var(--tan); }
.item-row.pendiente .item-price { font-size: 13.5px; font-weight: 600; color: var(--tan); }

.sticky-actions {
  position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--bg) 62%, rgba(19,26,78,0));
  padding: 16px 20px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 11px;
}
.btn-mic { display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 10px 26px -12px rgba(47,109,246,.9); }
.mic-emoji { font-size: 19px; }
#btn-ir-total.disabled { opacity: .45; pointer-events: none; }

/* ---------- Total screen ---------- */
.total-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px 10px; }
.total-hero { padding: 26px 20px 22px; text-align: center; animation: ew-fade .25s; }
.total-count { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-45); }
.total-amount { font-size: 56px; font-weight: 800; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 8px; }
.total-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(47,109,246,0.16); color: #8FB4FF; }
.total-chip.over { background: rgba(251,99,92,0.15); color: var(--red); }
.total-card { flex: 1; margin: 0 20px; border-radius: 22px; background: var(--text-05); border: 1px solid var(--text-1); overflow: hidden; }
.total-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--text-07); }
.total-item-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.total-item-detail { font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.total-item-price { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
.total-grand { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; background: rgba(244,241,232,0.04); }
.grand-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-5); }
.grand-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.total-actions { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }

/* ---------- Historial ---------- */
.simple-header { padding: 14px 20px 16px; }
.historial-list { flex: 1; padding: 0 20px; display: flex; flex-direction: column; gap: 11px; }
.historial-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 19px; background: var(--text-05); border: 1px solid var(--text-1); }
.historial-bar { width: 4px; align-self: stretch; border-radius: 3px; flex: none; }
.historial-fecha { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.historial-detalle { font-size: 12.5px; color: var(--text-45); margin-top: 2px; }
.historial-total { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.historial-delta { font-size: 11.5px; font-weight: 500; margin-top: 2px; text-align: right; }
.historial-empty { color: var(--text-45); font-size: 14px; text-align: center; padding: 40px 20px; }

/* ---------- Ajustes ---------- */
.ajustes-list { padding: 0 20px; display: flex; flex-direction: column; gap: 11px; }
.ajustes-card { padding: 16px 18px; border-radius: 19px; background: var(--text-05); border: 1px solid var(--text-1); }
.ajustes-toggle, .ajustes-static { display: flex; align-items: center; gap: 14px; }
.ajustes-title { font-size: 15px; font-weight: 600; }
.ajustes-desc { font-size: 12.5px; color: var(--text-45); margin-top: 2px; }
.presupuesto-input-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.presupuesto-sign { font-size: 24px; font-weight: 600; color: var(--text-5); }
.presupuesto-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; width: 100%; }
.presupuesto-unit { font-size: 13px; font-weight: 600; color: var(--text-4); }
.switch { width: 48px; height: 29px; border-radius: 16px; background: rgba(244,241,232,0.18); padding: 3px; box-sizing: border-box; flex: none; transition: background .2s; }
.switch.on { background: var(--blue); }
.switch-knob { width: 23px; height: 23px; border-radius: 12px; background: #fff; transition: transform .2s; }
.switch.on .switch-knob { transform: translateX(19px); }

/* ---------- Bottom nav ---------- */
.bottom-nav { display: none; border-top: 1px solid var(--text-1); background: rgba(19,26,78,0.96); padding: 8px 12px calc(4px + env(safe-area-inset-bottom)); }
.bottom-nav.active { display: flex; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: rgba(244,241,232,0.4); }
.nav-item.active { color: var(--text); }
.nav-icon { font-size: 17px; }
.nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }

/* ---------- Overlays ---------- */
.overlay { position: absolute; inset: 0; z-index: 40; animation: ew-fade .18s; }
.overlay-bottom { z-index: 50; background: rgba(11,16,52,0.6); display: flex; flex-direction: column; justify-content: flex-end; }

#overlay-listening {
  background: rgba(11,16,52,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 28px calc(44px + env(safe-area-inset-bottom));
}
.listening-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; }
.bars { display: flex; align-items: center; gap: 7px; height: 74px; }
.bar { width: 9px; height: 74px; border-radius: 6px; transform-origin: center; animation: ew-bar .8s ease-in-out infinite; }
.bar:nth-child(1), .bar:nth-child(5) { background: var(--blue); }
.bar:nth-child(2), .bar:nth-child(4) { background: var(--purple); }
.bar:nth-child(3) { background: var(--text); }
.listening-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.listening-transcript { font-size: 19px; line-height: 1.45; margin-top: 14px; min-height: 56px; max-width: 290px; }
.listening-hint { font-size: 13px; color: var(--text-45); max-width: 250px; line-height: 1.5; }
.stop-btn { width: 74px; height: 74px; border-radius: 40px; border: none; background: var(--red); color: #fff; font-size: 22px; animation: ew-pulse 1.8s infinite; align-self: center; }

.sheet {
  background: var(--sheet-bg); border-radius: 28px 28px 0 0; border-top: 1px solid var(--text-14);
  padding: 20px 22px calc(30px + env(safe-area-inset-bottom)); animation: ew-up .24s cubic-bezier(.2,.9,.2,1);
}
.sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-warning { font-size: 13px; line-height: 1.45; color: var(--tan); background: rgba(211,160,106,0.12); border-radius: 14px; padding: 11px 13px; margin-bottom: 14px; }
.sheet-fields { display: flex; flex-direction: column; gap: 12px; }
.field { display: block; }
.field-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-5); }
.field-input {
  width: 100%; box-sizing: border-box; margin-top: 7px; background: rgba(244,241,232,0.07);
  border: 1px solid var(--text-14); border-radius: 14px; padding: 14px; color: var(--text);
  font-size: 16px; font-weight: 500; outline: none;
}
.field-row { display: flex; gap: 12px; }
.field-with-mic { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.field-with-mic .field-input { margin-top: 0; }
.mic-mini {
  flex: none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--text-14);
  background: rgba(244,241,232,0.07); color: var(--text); font-size: 17px;
}
.mic-mini.listening { background: var(--blue); border-color: var(--blue); animation: ew-pulse 1.2s infinite; }
.field-qty { width: 132px; flex: none; }
.qty-control { display: flex; align-items: center; gap: 4px; margin-top: 7px; background: rgba(244,241,232,0.07); border: 1px solid var(--text-14); border-radius: 14px; padding: 5px; }
.qty-btn { width: 36px; height: 38px; border: none; border-radius: 11px; background: rgba(244,241,232,0.08); color: var(--text); font-size: 18px; }
.qty-value { flex: 1; text-align: center; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.toast {
  position: absolute; left: 20px; right: 20px; bottom: 96px; z-index: 60;
  display: flex; justify-content: center; pointer-events: none;
}
.toast span {
  background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  animation: ew-up .2s;
}