:root{
  --paper:#f1eee7;
  --paper-raised:#ffffff;
  --ink:#202b2f;
  --ink-soft:#57666b;
  --ink-faint:#8a9598;
  --line:#dad4c6;
  --accent:#2e6b57;
  --accent-strong:#1f5344;
  --accent-tint:#e1ebe6;
  --ochre:#a8752b;
  --ochre-tint:#f3e7d2;
  --danger:#a0443a;
  --danger-tint:#f1e1de;
  --shadow:rgba(32,43,47,0.14);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171d1f;
    --paper-raised:#1f2628;
    --ink:#ede9e1;
    --ink-soft:#aeb6b6;
    --ink-faint:#78807f;
    --line:#333b3c;
    --accent:#59a88c;
    --accent-strong:#7dc3a8;
    --accent-tint:#1e332c;
    --ochre:#d9a85b;
    --ochre-tint:#3a2f1c;
    --danger:#d98c82;
    --danger-tint:#3a2420;
    --shadow:rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --paper:#171d1f;
  --paper-raised:#1f2628;
  --ink:#ede9e1;
  --ink-soft:#aeb6b6;
  --ink-faint:#78807f;
  --line:#333b3c;
  --accent:#59a88c;
  --accent-strong:#7dc3a8;
  --accent-tint:#1e332c;
  --ochre:#d9a85b;
  --ochre-tint:#3a2f1c;
  --danger:#d98c82;
  --danger-tint:#3a2420;
  --shadow:rgba(0,0,0,0.45);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}
.tabular{font-variant-numeric:tabular-nums;}

#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:76px; /* espacio para la barra inferior */
}

header.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 10px;
}
header.topbar h1{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600; font-size:1.5rem; margin:0;
}
header.topbar h1 em{ color:var(--accent); font-style:italic; }
header.topbar .company{
  font-size:0.7rem; color:var(--ink-soft); text-align:right; line-height:1.3;
}

main{ flex:1; padding:4px 20px 20px; }
section[hidden]{ display:none !important; }

h2.screen-title{ font-size:1.15rem; font-weight:600; margin:4px 0 4px; }
p.screen-sub{ font-size:0.85rem; color:var(--ink-soft); margin:0 0 20px; }

/* captura */
.dropzone{
  border:2px dashed var(--line); border-radius:20px;
  padding:36px 20px; text-align:center; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:20px; background:var(--paper-raised);
}
.dropzone svg{ width:44px; height:44px; opacity:0.55; }
.dropzone .hint{ font-size:0.78rem; }

.btn{
  border:none; border-radius:12px; padding:14px 16px;
  font-family:inherit; font-size:0.95rem; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
}
.btn + .btn{ margin-top:10px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:active{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--ink); }
.btn:disabled{ opacity:0.55; }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ margin-top:0; }

input[type="file"]{ display:none; }

/* revisar */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ochre-tint); color:var(--ochre);
  font-size:0.72rem; font-weight:600; padding:6px 10px; border-radius:20px;
  margin-bottom:16px;
}
.badge.ok{ background:var(--accent-tint); color:var(--accent-strong); }

.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.field label{ font-size:0.72rem; color:var(--ink-soft); font-weight:500; }
.field input{
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
  font-size:0.95rem; background:var(--paper-raised); color:var(--ink);
  font-family:inherit; width:100%;
}
.field input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field.money input{ font-family:"IBM Plex Mono",monospace; }
.row2{ display:flex; gap:10px; }
.row2 .field{ flex:1; min-width:0; }

.total-line{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line); padding-top:14px; margin:6px 0 20px;
}
.total-line .lbl{ font-size:0.88rem; color:var(--ink-soft); }
.total-line .amt{ font-family:"IBM Plex Mono",monospace; font-size:1.3rem; font-weight:600; }

/* guardada */
.saved-mid{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px; padding:30px 0 10px;
}
.check{
  width:64px; height:64px; border-radius:50%; background:var(--accent-tint);
  display:flex; align-items:center; justify-content:center;
}
.check svg{ width:30px; height:30px; color:var(--accent-strong); }
.saved-card{
  width:100%; border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  text-align:left; font-size:0.85rem; color:var(--ink-soft);
  display:flex; flex-direction:column; gap:4px; background:var(--paper-raised);
}
.saved-card .prov{ color:var(--ink); font-weight:600; font-size:0.95rem; }
.saved-card .amt{ font-family:"IBM Plex Mono",monospace; color:var(--ink); font-weight:600; }

/* panel */
.stats{ display:flex; gap:10px; margin-bottom:20px; }
.stat{
  flex:1; min-width:0; background:var(--paper-raised); border-radius:14px;
  padding:12px 14px; border:1px solid var(--line);
}
.stat .k{ font-size:0.66rem; color:var(--ink-soft); margin-bottom:5px; }
.stat .v{ font-family:"IBM Plex Mono",monospace; font-size:1.05rem; font-weight:600; }
.stat.accent{ background:var(--accent-tint); border-color:transparent; }
.stat.accent .v{ color:var(--accent-strong); }

.invoice-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 4px; border-bottom:1px solid var(--line); gap:10px;
}
.invoice-row:last-child{ border-bottom:none; }
.invoice-row .who{ min-width:0; }
.invoice-row .who .name{ font-weight:600; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.invoice-row .who .meta{ font-size:0.72rem; color:var(--ink-faint); font-family:"IBM Plex Mono",monospace; }
.invoice-row .amt{ font-family:"IBM Plex Mono",monospace; font-weight:600; white-space:nowrap; }

.empty{
  text-align:center; color:var(--ink-faint); font-size:0.85rem; padding:40px 10px;
}

/* nav inferior */
nav.tabbar{
  position:fixed; bottom:0; left:0; right:0;
  background:var(--paper-raised); border-top:1px solid var(--line);
  display:flex; justify-content:center;
}
nav.tabbar .inner{
  max-width:480px; width:100%; display:flex;
}
nav.tabbar button{
  flex:1; background:none; border:none; padding:12px 4px 10px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--ink-faint); font-family:inherit; font-size:0.68rem; font-weight:600;
  cursor:pointer;
}
nav.tabbar button.active{ color:var(--accent-strong); }
nav.tabbar svg{ width:22px; height:22px; }

/* overlay de carga */
.overlay{
  position:fixed; inset:0; background:rgba(23,29,31,0.55);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
.overlay .card{
  background:var(--paper-raised); border-radius:16px; padding:24px 30px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--ink); font-size:0.88rem; font-weight:500;
}
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.toast{
  position:fixed; left:20px; right:20px; bottom:88px;
  background:var(--danger-tint); color:var(--danger);
  border-radius:12px; padding:12px 16px; font-size:0.85rem; font-weight:500;
  max-width:440px; margin:0 auto; z-index:60;
}

@media (prefers-reduced-motion: reduce){
  .spinner{ animation:none; border-top-color:var(--line); }
}