/* Marca TécnicoCerca: azul #29ABE2 · rojo #DF040B. El tema sigue el modo claro/oscuro del sistema. */
:root{color-scheme:light dark;
  --brand:#29abe2;--brand-strong:#1479b8;--brand-strong2:#0f6399;--accent:#df040b;
  --bg:#e8f4fb;--card:#ffffff;--ink:#0f172a;--muted:#5b6b7f;--line:#d7e3ec;--soft:#eef3f8;
  --ok:#16a34a;--warn:#b45309;--err:#c81e1e;--bank:#e6f5fc;--bad:#fdecec;--del:#fde2e2;
  --shadow:0 10px 30px rgba(20,121,184,.10);--overlay:rgba(15,23,42,.55)}
@media (prefers-color-scheme:dark){:root{
  --bg:#070d18;--card:#101a2b;--ink:#e7eef6;--muted:#94a6ba;--line:#22314a;--soft:#1a2740;
  --ok:#22c55e;--warn:#f59e0b;--err:#f87171;--bank:#0e2a3e;--bad:#2c1518;--del:#3a1719;
  --shadow:0 10px 30px rgba(0,0,0,.45);--overlay:rgba(0,0,0,.65)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);font-size:20px;
  user-select:none;-webkit-user-select:none;overscroll-behavior:none}
input{user-select:text;-webkit-user-select:text}
#app{height:100%;padding:24px}
.screen{display:none;height:100%;background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:32px;flex-direction:column;gap:18px;overflow-y:auto}
.screen.active{display:flex}
#s-home,#s-done,#s-blocked,.screen.center{align-items:center;justify-content:safe center;text-align:center}
.screen>*{flex-shrink:0}.screen>.list{flex-shrink:1;min-height:0}
.logo{width:min(520px,70vw);height:auto}.mark{height:48px;width:auto}
.brandbar{display:flex;align-items:center;gap:14px}
h1{font-size:44px;margin:.2em 0}h2{font-size:34px;margin:0}
.lead{font-size:26px;color:var(--muted);max-width:900px}.sub{color:var(--muted);font-size:20px}
.btn{border:0;border-radius:16px;padding:18px 28px;font-size:24px;font-weight:700;cursor:pointer;min-height:68px;min-width:140px}
.btn:disabled{opacity:.45}
.btn.primary{background:var(--brand-strong);color:#fff}.btn.primary:active{background:var(--brand-strong2)}
.btn.ghost{background:var(--soft);color:var(--ink)}
.btn.xl{font-size:30px;padding:26px 48px;min-height:88px}
.btn.cart{background:var(--ink);color:var(--card)}
.btn.qty{min-width:64px;padding:12px;font-size:30px;background:var(--soft);color:var(--ink)}
.btn.add{background:var(--ok);color:#fff}
.btn.del{background:var(--del);color:var(--err);min-width:auto}
.btn.pay{background:var(--soft);color:var(--ink);border:3px solid transparent}.btn.pay.sel{background:var(--brand-strong);color:#fff;border-color:var(--brand)}
.row{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
input[type=email],input[type=search],#code{width:100%;font-size:32px;padding:20px 24px;border:3px solid var(--line);border-radius:16px;outline:none;background:var(--card);color:var(--ink)}
input:focus{border-color:var(--brand)}
.msg{min-height:1.4em;font-size:22px;color:var(--err);margin:0}
.msg.info{color:var(--muted)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.bar.bottom{margin-top:auto}
.who{font-size:24px;font-weight:700}.who small{color:var(--muted);font-weight:400}
.list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px}
.item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:2px solid var(--line);border-radius:16px;padding:16px 20px}
.item .d{font-size:24px;font-weight:700}.item .m{color:var(--muted);font-size:18px}
.item .p{font-size:26px;font-weight:800}.item .w{font-size:17px;color:var(--warn)}
.ctl{display:flex;align-items:center;gap:10px}.ctl .n{font-size:30px;min-width:48px;text-align:center;font-weight:800}
table.cart{width:100%;border-collapse:collapse;font-size:22px}
.cart th{text-align:left;color:var(--muted);font-weight:600;border-bottom:2px solid var(--line);padding:8px}
.cart td{border-bottom:1px solid var(--line);padding:10px 8px;vertical-align:middle}
.cart tr.bad td{background:var(--bad)}
.total{font-size:34px;text-align:right}
.pay p{margin:0 0 8px;font-size:22px;color:var(--muted)}
.ok{font-size:64px;line-height:1;color:var(--ok)}.order{font-size:56px;font-weight:900;margin:0}
.bank{background:var(--bank);border-left:6px solid var(--brand);border-radius:16px;padding:18px 28px;font-size:24px;text-align:left}
.bank b{font-size:30px}
.hidden{display:none!important}
.overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:10}
.overlay .card{background:var(--card);color:var(--ink);border-radius:24px;padding:40px;text-align:center;min-width:420px}
.spinner{width:64px;height:64px;border:8px solid var(--line);border-top-color:var(--brand);border-radius:50%;margin:0 auto 16px;animation:s 1s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--card);padding:18px 28px;border-radius:14px;font-size:22px;z-index:20}
/* Tablets en vertical y celulares */
@media (max-width:900px){
  html,body{font-size:17px}#app{padding:10px}.screen{padding:18px;border-radius:16px;gap:12px}
  h1{font-size:32px}h2{font-size:26px}.lead{font-size:20px}.mark{height:36px}
  .btn{font-size:19px;padding:14px 18px;min-height:56px;min-width:0}.btn.xl{font-size:22px;padding:18px 28px;min-height:64px}
  .btn.qty{min-width:52px;font-size:24px}
  input[type=email],input[type=search],#code{font-size:22px;padding:14px 16px}
  .bar{flex-wrap:wrap}.who{font-size:19px}
  .item{grid-template-columns:1fr}.item .ctl{justify-content:flex-end}
  /* carrito como tarjetas */
  table.cart thead{display:none}
  table.cart,table.cart tbody,table.cart tr,table.cart td{display:block;width:100%}
  table.cart tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;border:2px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
  table.cart td{border:0;padding:0}
  table.cart td:nth-child(1){grid-column:1/3}
  table.cart td:nth-child(3){text-align:right;align-self:center}
  table.cart td:nth-child(3)::before{content:"Unitario: ";color:var(--muted)}
  table.cart td:nth-child(4){font-weight:800;align-self:center}
  table.cart td:nth-child(4)::before{content:"Subtotal: ";color:var(--muted);font-weight:400}
  table.cart td:nth-child(5){text-align:right}
  .total{font-size:26px}.order{font-size:40px}.overlay .card{min-width:0;width:90%;padding:24px}
  .row .btn{flex:1}.btn.pay{font-size:15px;padding:12px 8px;white-space:nowrap}
}
.order{color:var(--brand-strong)}
@media (prefers-color-scheme:dark){.order{color:var(--brand)}}
.item:active{border-color:var(--brand)}