:root{
  --bg:#f1f5f9; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --brand:#0f766e; --brand-dark:#115e59; --ok:#16a34a; --warn:#d97706; --danger:#dc2626;
  --radius:14px; --shadow:0 1px 3px rgba(15,23,42,.08),0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px; background:var(--brand); color:#fff;
}
.topbar h1{margin:2px 0 0; font-size:1.15rem}
.eyebrow{margin:0; font-size:.62rem; letter-spacing:.14em; opacity:.8}
.who{display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:.65rem}
.who span{opacity:.85; text-transform:uppercase; letter-spacing:.08em}
/* 16px minimo: por debajo, iOS hace zoom al enfocar el control. */
.who select{border:0; border-radius:8px; padding:4px 6px; font-size:16px; max-width:104px; background:rgba(255,255,255,.16); color:#fff}
.who select option{color:#0f172a}

.screen{padding:14px 14px 24px; display:flex; flex-direction:column; gap:12px; max-width:720px; margin:0 auto}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px}
.card h2{margin:0 0 10px; font-size:1rem}
.card h3{margin:0 0 6px; font-size:.9rem}
.muted{color:var(--muted); font-size:.82rem; margin:0}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.stat{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px}
.stat span{display:block; font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.stat strong{display:block; font-size:1.12rem; margin-top:4px}
.stat.brand{background:var(--brand); color:#fff}
.stat.brand span{color:rgba(255,255,255,.85)}

button{font:inherit}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%;
  padding:13px 14px; border:0; border-radius:12px; background:var(--brand); color:#fff;
  font-weight:600; font-size:.95rem; cursor:pointer; min-height:48px;
}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#0f172a}
.btn.ghost{background:#fff; color:var(--brand); border:1.5px solid var(--brand)}
.btn.ok{background:var(--ok)} .btn.warn{background:var(--warn)} .btn.danger{background:var(--danger)}
.btn.small{width:auto; min-height:38px; padding:8px 12px; font-size:.82rem; border-radius:10px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row > .btn{flex:1 1 140px}

label.field{display:block; margin-bottom:10px}
label.field span{display:block; font-size:.78rem; color:var(--muted); margin-bottom:4px}
input,select,textarea{
  width:100%; padding:12px; border:1.5px solid var(--line); border-radius:11px;
  font-size:1rem; background:#fff; color:var(--ink); min-height:46px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); border-color:transparent}

.list{display:flex; flex-direction:column; gap:8px}
.item{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:var(--card); border:0; border-radius:12px; box-shadow:var(--shadow);
  padding:12px; text-align:left; cursor:pointer;
}
.item small{display:block; color:var(--muted); font-size:.76rem; margin-top:2px}
.item .amount{font-weight:700; white-space:nowrap}
.amount.debt{color:var(--danger)} .amount.clear{color:var(--ok)}

.pill{display:inline-block; padding:3px 9px; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.03em}
.pill.open{background:#fef3c7; color:#92400e}
.pill.partial{background:#dbeafe; color:#1e40af}
.pill.paid{background:#dcfce7; color:#166534}
.pill.void{background:#e2e8f0; color:#475569}
.pill.pending{background:#fef3c7; color:#92400e}

.cartline{display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--line)}
.cartline:last-child{border-bottom:0}
.cartline .name{flex:1; min-width:0}
.cartline .name strong{display:block; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.qty{display:flex; align-items:center; gap:6px}
.qty button{width:34px; height:34px; border-radius:9px; border:1.5px solid var(--line); background:#fff; font-size:1.1rem; line-height:1; cursor:pointer}
.qty b{min-width:24px; text-align:center}

.totalbar{display:flex; justify-content:space-between; align-items:center; padding-top:10px; margin-top:6px; border-top:2px solid var(--ink)}
.totalbar strong{font-size:1.25rem}

.chiprow{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.chip{white-space:nowrap; padding:8px 13px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-size:.82rem; cursor:pointer}
.chip.active{background:var(--brand); color:#fff; border-color:var(--brand)}

.table{width:100%; border-collapse:collapse; font-size:.8rem}
.table th,.table td{padding:8px 6px; border-bottom:1px solid var(--line); text-align:left}
.table th{font-size:.68rem; text-transform:uppercase; color:var(--muted); letter-spacing:.05em}
.table td.num,.table th.num{text-align:right; white-space:nowrap}
.scroll-x{overflow-x:auto}

.empty{text-align:center; color:var(--muted); padding:22px 10px; font-size:.86rem}
.alert{border-radius:12px; padding:11px 12px; font-size:.85rem; margin:0}
.alert.warn{background:#fef3c7; color:#92400e}
.alert.err{background:#fee2e2; color:#991b1b}
.alert.ok{background:#dcfce7; color:#166534}
pre.receipt{white-space:pre-wrap; font-size:.76rem; background:#f8fafc; border:1px solid var(--line); border-radius:10px; padding:10px; max-height:210px; overflow:auto; margin:0}

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:2px;
  overflow-x:auto; background:#fff; border-top:1px solid var(--line);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tabbar button{
  flex:0 0 auto; min-width:70px; border:0; background:none; color:var(--muted);
  font-size:.62rem; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 6px; cursor:pointer;
}
.tabbar button b{font-size:1.15rem; line-height:1}
.tabbar button.active{color:var(--brand); font-weight:700}

.toast{
  position:fixed; left:50%; bottom:86px; transform:translate(-50%,16px); opacity:0; pointer-events:none;
  background:#0f172a; color:#fff; padding:11px 16px; border-radius:11px; font-size:.85rem;
  max-width:88vw; text-align:center; transition:.22s; z-index:40;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.err{background:var(--danger)}

@media (min-width:760px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .tabbar{justify-content:center}
}

/* ---------------- PWA: estado de conexión y aviso de actualización -------- */
.topright{display:flex; align-items:center; gap:10px}
.netstate{
  font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.18); color:#fff; white-space:nowrap;
}
.netstate.offline{background:#b45309}
.updatebar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#0f172a; color:#fff; padding:10px 14px; font-size:.84rem;
}
.updatebar.hidden{display:none}
.updatebar button{
  border:0; border-radius:9px; padding:8px 14px; background:#22c55e; color:#04250f;
  font-weight:700; font-size:.82rem; cursor:pointer; min-height:38px;
}
/* Comodidad tactil en iPhone */
button,.btn,.item,.chip,select,input{-webkit-tap-highlight-color:transparent}
.item,.btn,.chip{touch-action:manipulation}
.screen{-webkit-overflow-scrolling:touch}

/* ================= UX-01: menu lateral y respiracion en movil ============ */
body{ padding-bottom:calc(24px + env(safe-area-inset-bottom)); }

.topbar{ gap:10px; }
.topbar-title{ flex:1; min-width:0; }
.hamburger{
  width:46px; height:46px; border:0; border-radius:12px; background:rgba(255,255,255,.16);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; flex:0 0 auto;
}
.hamburger span{ width:20px; height:2px; background:#fff; border-radius:2px; }

.scrim{
  position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:45; opacity:1; transition:opacity .2s;
}
.scrim.hidden{ opacity:0; pointer-events:none; }

.drawer{
  position:fixed; top:0; bottom:0; left:0; width:min(84vw,320px); z-index:46;
  background:#0f172a; color:#e2e8f0; transform:translateX(-102%); transition:transform .22s ease;
  display:flex; flex-direction:column; overflow-y:auto;
  padding:calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
  box-shadow:4px 0 24px rgba(15,23,42,.3);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ padding:6px 10px 16px; border-bottom:1px solid #1e293b; margin-bottom:10px; }
.drawer-head strong{ display:block; font-size:1.05rem; color:#fff; }
.drawer-head small{ color:#94a3b8; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; }
.dev-switch{ display:block; margin-top:10px; font-size:.66rem; color:#94a3b8; }
.dev-switch.hidden{ display:none; }
.dev-switch select{ margin-top:4px; font-size:16px; padding:6px; border-radius:8px; border:0; }

.drawer-nav{ display:flex; flex-direction:column; gap:4px; }
/* Opciones grandes, comodas para una sola mano. */
.drawer-nav button{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  border:0; background:none; color:#e2e8f0; font-size:1rem; font-weight:500;
  padding:15px 14px; border-radius:12px; min-height:56px;
}
.drawer-nav button:active{ background:#1e293b; }
.drawer-nav button.active{ background:var(--brand); color:#fff; font-weight:700; }
.drawer-nav button b{ font-size:1.35rem; line-height:1; width:28px; text-align:center; }
.drawer-nav .separator{ height:1px; background:#1e293b; margin:8px 6px; }
.drawer-nav button.logout{ color:#fca5a5; }

/* ================= UX-02: clientes como centro operativo ================= */
.search-big input{ font-size:17px; min-height:54px; padding:14px 16px; }
.client-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.client-actions .btn{ min-height:60px; font-size:1rem; flex-direction:column; gap:2px; }
.client-actions .btn small{ font-size:.68rem; opacity:.85; font-weight:500; }
.client-actions .wide{ grid-column:1 / -1; }
.client-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.client-head h2{ margin:0; font-size:1.15rem; }
.balance-big{ text-align:right; }
.balance-big strong{ display:block; font-size:1.3rem; }
.balance-big span{ font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.result-item{ min-height:62px; }

/* ---------------------------- pantalla de acceso ------------------------- */
.login-wrap{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card{
  background:var(--card); border-radius:16px; box-shadow:var(--shadow);
  padding:26px 20px; width:min(400px,100%);
}
.login-card h1{ margin:0 0 2px; font-size:1.3rem; }
.login-sub{ margin:0 0 20px; color:var(--muted); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.login-card .btn{ margin-top:6px; }
.login-error{ margin:12px 0 0; padding:10px 12px; border-radius:10px; background:#fee2e2; color:#991b1b; font-size:.85rem; }
.login-error.hidden{ display:none; }
.app-hidden{ display:none !important; }