/* ═══════════════════════════════════════════════════════════════════
   Control de Gastos — sistema de diseño común (oct-2026)
   Se carga en TODAS las páginas antes del <style> propio de cada una.
   Claro y oscuro con data-theme en <html>. Tipografía Geist / Geist Mono.
   ═══════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@500;600&display=swap");

:root{
  /* superficie */
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f0f2f5; --surface-3:#e7eaef;
  --line:#e3e6eb; --line-2:#d3d7de;
  --text:#0f1115; --text-2:#5b616b; --text-3:#8b9099;
  /* acento único */
  --acc:#2563eb; --acc-2:#3b82f6; --acc-hover:#1d4ed8; --acc-soft:rgba(37,99,235,.09); --acc-line:rgba(37,99,235,.25);
  /* personas (identidad, no decoración) */
  --efren:#2563eb; --efren-soft:rgba(37,99,235,.08);
  --rebeca:#c76a1f; --rebeca-soft:rgba(199,106,31,.09);
  /* semánticos */
  --ok:#16884a; --ok-soft:rgba(22,136,74,.10);
  --err:#c93c36; --err-soft:rgba(201,60,54,.09);
  --warn:#a87a12; --warn-soft:rgba(168,122,18,.10);
  /* forma */
  --r-xl:22px; --r-lg:16px; --r-md:12px; --r-sm:8px;
  --sombra:0 1px 2px rgba(15,23,42,.04),0 12px 32px -18px rgba(15,23,42,.18);
  --bisel:0 0 0 5px rgba(15,23,42,.025),0 0 0 6px rgba(15,23,42,.05);
  --muelle:cubic-bezier(.22,1,.36,1);
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --z-cab:50; --z-modal:80; --z-aviso:90;
  color-scheme:light;

  /* nombres antiguos de las páginas → apuntan al sistema nuevo */
  --primary-color:var(--acc); --secondary-color:var(--err); --accent-color:var(--ok);
  --text-color:var(--text); --text-light:var(--text-2); --bg-color:var(--bg); --card-bg:var(--surface);
  --header-bg:var(--surface); --header-text:var(--text); --card-shadow:var(--sombra); --card-border:1px solid var(--line);
  --efren-color:var(--efren); --rebeca-color:var(--rebeca); --efren-bg:var(--efren-soft); --rebeca-bg:var(--rebeca-soft);
  --button-hover:var(--surface-2); --transition-speed:.2s;
}
[data-theme="dark"]{
  --bg:#0f0f0f; --surface:#17181b; --surface-2:#1e2024; --surface-3:#26282d;
  --line:#26282d; --line-2:#33363c;
  --text:#eef0f3; --text-2:#9aa0a9; --text-3:#6b7079;
  --acc:#3b82f6; --acc-2:#60a5fa; --acc-hover:#2563eb; --acc-soft:rgba(59,130,246,.13); --acc-line:rgba(96,165,250,.3);
  --efren:#60a5fa; --efren-soft:rgba(96,165,250,.10);
  --rebeca:#e8975a; --rebeca-soft:rgba(232,151,90,.10);
  --ok:#3fbf73; --ok-soft:rgba(63,191,115,.12);
  --err:#e5605a; --err-soft:rgba(229,96,90,.12);
  --warn:#d9a93a; --warn-soft:rgba(217,169,58,.13);
  --sombra:inset 0 1px 0 rgba(255,255,255,.04),0 18px 40px -22px rgba(2,6,23,.9);
  --bisel:0 0 0 5px rgba(255,255,255,.022),0 0 0 6px rgba(255,255,255,.045);
  color-scheme:dark;
}

/* ─ base ─ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--sans)!important;background:var(--bg)!important;color:var(--text);font-size:15.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100dvh;-webkit-tap-highlight-color:transparent;
  padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit;color:inherit}
button,a,[role=button],label,select{touch-action:manipulation}
button,a,input,select,textarea,[role=button]{transition:background-color .2s var(--muelle),border-color .2s var(--muelle),color .2s var(--muelle),box-shadow .2s var(--muelle),transform .2s var(--muelle),opacity .2s}
button,[role=button]{cursor:pointer}
button:active:not(:disabled),[role=button]:active{transform:scale(.97)}
:focus-visible{outline:2px solid var(--acc-2);outline-offset:2px}
::selection{background:var(--acc-line)}
a{color:var(--acc)}
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─ contenedor ─ */
.container{max-width:880px;margin:0 auto;padding:16px 18px 48px}

/* ─ cabecera: isla flotante ─ */
/* la cabecera arranca en el borde de arriba (top:0) y su relleno cubre la barra de estado del iPhone
   con el color de fondo: así nada se ve por detrás de la hora y la isla no se separa del tope */
header{position:sticky!important;top:0!important;z-index:var(--z-cab)!important;
  background:linear-gradient(to bottom,var(--bg) 0,var(--bg) calc(100% - 18px),transparent)!important;box-shadow:none!important;
  padding:calc(env(safe-area-inset-top) + 8px) 12px 10px!important;color:var(--text)!important}
.header-content{max-width:880px!important;margin:0 auto!important;display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 16px!important;border-radius:20px;
  background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);box-shadow:var(--sombra)}
header h1{font-size:17px!important;font-weight:650!important;letter-spacing:-.03em;flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
header h1 i,header h1 svg{color:var(--acc)}
.theme-toggle,.icon-btn{flex:none;width:40px!important;height:40px!important;border-radius:12px!important;border:0;background:transparent!important;
  color:var(--text-2)!important;display:inline-flex!important;align-items:center;justify-content:center;font-size:16px!important}
.theme-toggle:hover,.icon-btn:hover{background:var(--surface-2)!important;color:var(--text)!important}
.back-link,.back-button{display:inline-flex!important;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px!important;border-radius:12px!important;
  border:0;background:transparent!important;color:var(--text-2)!important;text-decoration:none!important;font-weight:550;font-size:14.5px!important;margin:0!important}
.back-link:hover,.back-button:hover{background:var(--surface-2)!important;color:var(--text)!important;transform:none!important}
.back-link i,.back-button i{margin:0!important;font-size:13px}

/* ─ tarjetas: doble bisel ─ */
.card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--r-xl)!important;
  box-shadow:var(--bisel),var(--sombra)!important;padding:20px!important;margin:6px 6px 22px!important}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px!important;padding-bottom:0!important;border-bottom:0!important}
.card-title{font-size:16px!important;font-weight:600!important;letter-spacing:-.015em;color:var(--text)!important}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* ─ botones ─ */
.btn,.btn-primary,.btn-ghost,.add-button,.submit-button,.save-button,.reset-button,.action-button,.primary-button{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;border:0!important;border-radius:99px!important;
  font-weight:600!important;font-size:15px!important;line-height:1;cursor:pointer;text-decoration:none}
.btn-primary,.submit-button,.save-button,.primary-button{background:var(--acc)!important;color:#fff!important;min-height:52px;padding:8px 8px 8px 24px!important;
  justify-content:space-between;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px rgba(37,99,235,.75)}
.btn-primary:hover,.submit-button:hover,.save-button:hover,.primary-button:hover{background:var(--acc-hover)!important;transform:none}
.nucleo{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.17);display:grid;place-items:center;flex:none;transition:transform .35s var(--muelle)}
:hover>.nucleo{transform:translateX(3px) scale(1.05)}
.add-button{background:var(--acc-soft)!important;color:var(--acc)!important;padding:9px 14px!important;font-size:14px!important;min-height:38px}
.add-button:hover{background:var(--acc)!important;color:#fff!important}
.add-button i{margin:0!important}
.btn-ghost,.reset-button{background:transparent!important;color:var(--text)!important;border:1px solid var(--line-2)!important;padding:12px 20px!important;min-height:46px}
.btn-ghost:hover,.reset-button:hover{background:var(--surface-2)!important;transform:none!important}
.reset-button i{margin:0!important;color:var(--text-2)}
.btn-danger{color:var(--err)!important}
.delete-button{color:var(--text-3)!important}
.delete-button:hover{background:var(--err-soft)!important;color:var(--err)!important}
button:disabled{opacity:.5;cursor:default}

/* ─ formularios ─ */
label{font-size:13px;font-weight:550;color:var(--text-2)}
.form-group{margin-bottom:16px!important}
.form-group label{display:block;margin-bottom:7px!important;font-size:13px!important;font-weight:550!important;color:var(--text-2)!important}
input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],input[type=search],input[type=tel],input:not([type]),select,textarea{
  width:100%;background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line-2)!important;border-radius:var(--r-md)!important;
  padding:12px 14px!important;font-size:16px!important;min-height:48px;box-shadow:none!important;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%)!important;
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px!important;background-size:5px 5px!important;background-repeat:no-repeat!important;padding-right:36px!important}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:var(--acc)!important;box-shadow:0 0 0 4px var(--acc-soft)!important}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input[type=checkbox],input[type=radio]{accent-color:var(--acc);width:18px;height:18px}

/* ─ avisos ─ */
.alert{border-radius:var(--r-md)!important;padding:12px 14px!important;margin:12px 6px!important;font-weight:550!important;font-size:14.5px;border:1px solid transparent}
.alert.success{background:var(--ok-soft)!important;color:var(--ok)!important;border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.alert.error{background:var(--err-soft)!important;color:var(--err)!important;border-color:color-mix(in srgb,var(--err) 25%,transparent)}
.alert.info{background:var(--acc-soft)!important;color:var(--acc)!important;border-color:var(--acc-line)}

/* ─ estado vacío y carga ─ */
.empty-message,.empty-state{text-align:center;padding:36px 20px!important;color:var(--text-2)!important;font-style:normal!important;font-size:14.5px;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);margin:4px 0}
.empty-message i.fa-spinner{display:none}
.esq{display:block;border-radius:var(--r-md);background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);
  background-size:300% 100%;animation:esq 1.4s ease-in-out infinite;height:58px;margin:8px 0}
@keyframes esq{from{background-position:100% 0}to{background-position:0 0}}

/* ─ modales ─ */
.modal{background:rgba(8,10,14,.55)!important;-webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important;
  z-index:var(--z-modal)!important;overscroll-behavior:contain;padding:16px}
.modal-content{background:var(--surface)!important;color:var(--text);border:1px solid var(--line)!important;border-radius:var(--r-xl)!important;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6)!important;max-width:560px;width:100%!important;margin:8vh auto!important;overflow:hidden;
  animation:entra .35s var(--muelle)!important}
.modal-header{padding:16px 18px!important;border-bottom:1px solid var(--line)!important;display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-title,.modal-header h2,.modal-header h3{font-size:16px!important;font-weight:600!important;letter-spacing:-.015em}
.modal-body{padding:18px!important}
.close,.close-modal{width:36px;height:36px;border-radius:10px;display:inline-grid!important;place-items:center;color:var(--text-2)!important;
  font-size:22px!important;font-weight:400!important;cursor:pointer;line-height:1;background:transparent;border:0}
.close:hover,.close-modal:hover{background:var(--surface-2);color:var(--text)!important}
@keyframes entra{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ─ listas ─ */
.lista{list-style:none;display:flex;flex-direction:column}
.fila{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--line)}
.fila:first-child{border-top:0}
.chip-persona{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px 3px 7px;border-radius:7px}
.chip-persona::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip-persona.efren{background:var(--efren-soft);color:var(--efren)}
.chip-persona.rebeca{background:var(--rebeca-soft);color:var(--rebeca)}

/* ─ grano muy suave (fijo, no repinta al hacer scroll) ─ */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header,.container,.modal{position:relative;z-index:2}
.modal{position:fixed}

@media (max-width:520px){
  .container{padding:12px 14px 40px}
  header{padding:calc(env(safe-area-inset-top) + 6px) 8px 10px!important}
  .card{padding:16px!important;margin:6px 4px 18px!important}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}