/* ============================================================
   El Ganso · Gestión de Gastos — sistema de diseño (grado financiero)
   Azul marino El Ganso + blanco frío + hilo de latón. Iconos SVG de línea.
   ============================================================ */
:root{
  --goose-navy:url("/static/img/elganso_ganso_navy.png");
  --goose-white:url("/static/img/elganso_ganso_white.png");
  --wm-navy:url("/static/img/elganso_wordmark_navy.png");
  --wm-white:url("/static/img/elganso_wordmark_white.png");
  --ground:#FBFBFD; --surface:#FFFFFF; --ink:#131A2A; --ink-2:#5A6377;
  --line:#ECEDF1; --line-2:#E3E5EB; --navy:#1B2A4A; --navy-2:#243a63; --navy-ink:#0E1830;
  --brass:#9A6E3A;
  --ok:#1E7A52; --ok-bg:#E7F2EC; --amber:#9A6B12; --amber-bg:#FAF1DE;
  --red:#B23B32; --red-bg:#FBECEA; --blue:#2B5F9E; --blue-bg:#E9F0FA;
  --violet:#5B46B8; --violet-bg:#EEEBF8; --grey-bg:#EEF0F3; --grey-ink:#5b6478;
  --shadow:0 1px 2px rgba(16,24,48,.04),0 6px 20px rgba(16,24,48,.05);
  --radius:15px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--ground);color:var(--ink);line-height:1.45;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block}

/* ---------- app bar ---------- */
.appbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + var(--safe-t)) 18px 12px}
.lockup{display:flex;align-items:center;gap:11px}
.lockup .goose{width:36px;height:36px;background:var(--goose-navy) center/contain no-repeat;flex:none}
.lk-text{display:flex;flex-direction:column;line-height:1}
.wm{height:13px;width:84px;background:var(--wm-navy) left center/contain no-repeat}
.lk-desc{font-size:.58rem;letter-spacing:.1em;color:var(--ink-2);font-weight:600;margin-top:5px;text-transform:uppercase}
.appbar .u{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:.82rem;font-weight:600}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-size:.7rem;font-weight:700}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--ink-2);border:1px solid var(--line-2)}
.icon-btn svg{width:18px;height:18px}

/* ---------- layout ---------- */
.content{max-width:620px;margin:0 auto;padding:18px 16px calc(96px + var(--safe-b))}
.h-title{font-size:1.3rem;letter-spacing:-.02em;font-weight:700;margin:2px 0 3px}
.h-sub{color:var(--ink-2);font-size:.88rem;margin:0 0 16px}
.eyebrow-sm{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700;
  margin:22px 2px 10px;display:flex;justify-content:space-between;align-items:center}
.link{color:var(--navy);font-weight:600;letter-spacing:0;text-transform:none;font-size:.78rem}
.muted{color:var(--ink-2)}

/* ---------- summary hero ---------- */
.summary{background:var(--navy);color:#fff;border-radius:18px;padding:18px;position:relative;overflow:hidden}
.summary::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(154,110,58,.35),transparent 70%)}
.summary .lbl{font-size:.76rem;color:rgba(255,255,255,.72);font-weight:500;margin-bottom:6px}
.summary .val{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.summary .meta{display:flex;gap:20px;margin-top:14px}
.summary .meta div{font-size:.74rem;color:rgba(255,255,255,.7)}
.summary .meta b{display:block;font-size:.98rem;color:#fff;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px;
  display:flex;align-items:center;gap:13px;margin-bottom:10px;box-shadow:var(--shadow)}
.card.tap{cursor:pointer;transition:transform .06s}
.card.tap:active{transform:scale(.99)}
.card.col{flex-direction:column;align-items:stretch;gap:10px}
.thumb{width:46px;height:46px;border-radius:11px;flex:none;display:grid;place-items:center;object-fit:cover;
  background:linear-gradient(145deg,#f2f3f6,#e7e9ef);color:var(--navy)}
.thumb svg{width:22px;height:22px}
.grow{flex:1;min-width:0}
.line1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.line2{display:flex;justify-content:space-between;align-items:center;margin-top:5px;gap:8px}
.name{font-weight:600;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.amt{font-weight:700;font-size:.96rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.amt.big{font-size:1.5rem}
.meta-s{font-size:.78rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{color:#c3c7d2;flex:none}
.chev svg{width:18px;height:18px}

/* ---------- status chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:3px 9px 3px 8px;
  border-radius:999px;letter-spacing:.01em;text-transform:capitalize;white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;flex:none}
.chip.borrador,.chip.grey{background:var(--grey-bg);color:var(--grey-ink)} .chip.borrador .dot,.chip.grey .dot{background:#98a0b0}
.chip.extrayendo,.chip.enviada{background:var(--amber-bg);color:var(--amber)} .chip.extrayendo .dot,.chip.enviada .dot{background:var(--amber)}
.chip.extraido,.chip.revisado{background:var(--blue-bg);color:var(--blue)} .chip.extraido .dot,.chip.revisado .dot{background:var(--blue)}
.chip.en_hoja{background:var(--violet-bg);color:var(--violet)} .chip.en_hoja .dot{background:var(--violet)}
.chip.aprobada,.chip.aprobado,.chip.contabilizada,.chip.reembolsada{background:var(--ok-bg);color:var(--ok)}
.chip.aprobada .dot,.chip.aprobado .dot,.chip.contabilizada .dot,.chip.reembolsada .dot{background:var(--ok)}
.chip.rechazada,.chip.rechazado{background:var(--red-bg);color:var(--red)} .chip.rechazada .dot,.chip.rechazado .dot{background:var(--red)}

/* ---------- forms ---------- */
.field{margin-bottom:12px}
.field label,label.lbl{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  font-weight:700;display:block;margin-bottom:6px}
input,select,textarea{width:100%;font-size:16px;font-family:inherit;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:11px;padding:11px 12px;font-weight:500}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(30,48,80,.1)}
input[disabled],select[disabled],textarea[disabled]{background:#f7f7f9;color:var(--ink-2)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.total-field input{border-color:var(--navy);border-width:1.5px;font-weight:700;font-size:1.05rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;cursor:pointer;
  font-size:.94rem;font-weight:600;padding:13px 18px;border-radius:12px;background:var(--grey-bg);color:var(--ink);font-family:inherit}
.btn:active{filter:brightness(.97)}
.btn.primary{background:var(--navy);color:#fff}
.btn.ok{background:var(--ok);color:#fff}
.btn.bad{background:var(--red);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btnrow{display:flex;gap:10px;margin-top:14px}
.btnrow .btn{flex:1}

/* ---------- receipt preview ---------- */
.receipt-img{width:100%;max-height:300px;object-fit:contain;background:#f0efec;border:1px solid var(--line);
  border-radius:14px;margin-bottom:14px}
.ai-note{display:inline-flex;align-items:center;gap:7px;background:var(--blue-bg);color:var(--blue);font-size:.78rem;
  font-weight:600;padding:7px 12px;border-radius:999px;margin-bottom:12px}
.ai-note svg{width:14px;height:14px}
.alerta{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;font-weight:500;padding:9px 12px;border-radius:11px;margin-bottom:8px}
.alerta svg{width:15px;height:15px;flex:none;margin-top:1px}
.alerta.info{background:var(--amber-bg);color:var(--amber)}
.alerta.restrictiva{background:var(--red-bg);color:var(--red)}

/* ---------- tab bar ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-around;padding:8px 8px calc(10px + var(--safe-b));
  box-shadow:0 -2px 14px rgba(16,24,48,.04)}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;color:#98a0b0;font-size:.64rem;font-weight:600;flex:1}
.tab svg{width:22px;height:22px}
.tab.active{color:var(--navy)}
.tab.mid{flex:none}
.tab.mid .fab{width:50px;height:50px;border-radius:16px;background:var(--navy);color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(27,42,74,.32);margin-top:-26px}
.tab.mid .fab svg{width:24px;height:24px;stroke-width:2}

/* ---------- login ---------- */
.login-body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:34px 26px;background:linear-gradient(165deg,#243a63,#141f38 62%)}
.login-brand{text-align:center;margin-bottom:32px}
.login-brand .goose{width:92px;height:92px;background:var(--goose-white) center/contain no-repeat;margin:0 auto 18px}
.login-brand .wm{height:30px;width:196px;background:var(--wm-white) center/contain no-repeat;margin:0 auto}
.login-brand .rule{width:34px;height:2px;background:var(--brass);margin:14px auto 0;border-radius:2px}
.login-brand p{color:rgba(255,255,255,.6);font-size:.84rem;margin:13px 0 0;letter-spacing:.02em}
.login-card{width:100%;max-width:360px;margin:0 auto}
.login-card .f{margin-bottom:12px}
.login-card .f span{color:rgba(255,255,255,.66);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;display:block;margin-bottom:7px}
.login-card input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff}
.login-card input::placeholder{color:rgba(255,255,255,.4)}
.login-card input:focus{border-color:rgba(255,255,255,.4);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.login-card .btn{margin-top:22px;background:#fff;color:var(--navy-ink)}
.alert{background:rgba(178,59,50,.18);border:1px solid rgba(178,59,50,.4);color:#ffd9d5;border-radius:11px;
  padding:11px 13px;font-size:.86rem;margin-bottom:14px}
.sso-btn{background:#fff;color:#1b2430;gap:10px;font-weight:600}
.sso-sep{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.5);font-size:.76rem;margin:18px 0 6px}
.sso-sep::before,.sso-sep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.18)}
.login-hello{color:#fff;text-align:center;font-size:1.05rem;line-height:1.35;margin:0 0 20px}
.login-hello b{font-size:1.25rem;letter-spacing:-.01em}
.login-textlink{display:block;width:100%;background:none;border:none;color:rgba(255,255,255,.72);
  font-size:.86rem;font-weight:600;text-align:center;margin-top:16px;cursor:pointer;font-family:inherit;padding:6px}
.login-textlink:hover{color:#fff}

/* ---------- misc ---------- */
.empty{text-align:center;color:var(--ink-2);padding:52px 20px}
.empty svg{width:40px;height:40px;margin:0 auto 12px;color:#c3c7d2}
.spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--navy);border-radius:50%;
  animation:spin .8s linear infinite;margin:32px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.check{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;
  margin-bottom:9px;background:var(--surface)}
.check input{width:21px;height:21px;margin:0;flex:none}
.toast{position:fixed;bottom:calc(92px + var(--safe-b));left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:.9rem;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;z-index:50;box-shadow:var(--shadow);max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sticky-cta{position:fixed;left:0;right:0;bottom:calc(70px + var(--safe-b));padding:0 16px;max-width:620px;margin:0 auto}