h2{font-size:1.05rem;margin:1.2rem 0 .5rem}
.center{text-align:center;margin:1rem 0}
.btn{cursor:pointer}
.btn.small{padding:.45rem .8rem;font-size:.85rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.block{display:block;width:100%}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.row h2{margin:.2rem 0}
.tabs{grid-template-columns:repeat(4,1fr)}
.toolbar{margin:.6rem 0}
.toolbar input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.7rem .8rem;color:#fff;font:inherit}
.toolbar input:focus,.sheet input:focus,.sheet select:focus{outline:2px solid var(--primary);border-color:transparent}
.chips{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;background:var(--card);border:1px solid var(--border);border-radius:99px;padding:.35rem .85rem;font:inherit;font-size:.82rem;color:var(--muted);cursor:pointer}
.chip.on{border-color:var(--primary);color:#fff;background:rgba(56,189,248,.12)}
.chip b{margin-left:.3rem;color:var(--primary)}
.list{display:grid;gap:.6rem;margin:.8rem 0}

/* Pedidos */
.ord{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem .9rem;display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;text-align:left;width:100%;cursor:pointer;color:inherit;font:inherit}
.ord:hover{border-color:rgba(56,189,248,.5)}
.ord .nm{font-weight:700}
.ord .sub{font-size:.78rem;color:var(--muted)}
.ord .am{font-weight:800;text-align:right;font-size:1.05rem}
.ord .am small{display:block;font-weight:500;font-size:.72rem;color:var(--muted)}
.ord .bd{grid-column:1 / -1;display:flex;gap:.4rem;flex-wrap:wrap}
.b{font-size:.7rem;font-weight:700;border-radius:99px;padding:.15rem .55rem;white-space:nowrap}
.b.ok{background:rgba(45,212,191,.15);color:var(--accent)}
.b.mid{background:rgba(251,146,60,.16);color:var(--warn)}
.b.bad{background:rgba(248,113,113,.17);color:var(--danger)}
.b.warn{background:rgba(250,204,21,.14);color:#facc15}
.b.info{background:rgba(56,189,248,.15);color:var(--primary)}
.b.mute{background:rgba(255,255,255,.08);color:var(--muted)}

/* Clientes */
.cli{display:grid;grid-template-columns:42px 1fr auto;gap:.7rem;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem .9rem;text-align:left;width:100%;cursor:pointer;color:inherit;font:inherit}
.cli:hover{border-color:rgba(56,189,248,.5)}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--violet));display:grid;place-items:center;font-weight:800;color:#06101f}
.cli .nm{font-weight:700}.cli .sub{font-size:.78rem;color:var(--muted)}
.cli .debt{font-size:.82rem;font-weight:800;color:var(--danger);text-align:right}
.cli .debt.ok{color:var(--accent)}

/* Resumen */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:.8rem 0}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem;display:grid;gap:.15rem}
.kpi span{font-size:.78rem;color:var(--muted)}
.kpi b{font-size:1.35rem}
.kpi small{font-size:.72rem;color:var(--muted)}
.kpi.good b{color:var(--accent)}.kpi.bad b{color:var(--danger)}.kpi.warn b{color:var(--warn)}
.stack{display:flex;height:14px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08);margin:.4rem 0 .8rem}
.stack i{display:block;height:100%}
.legend{display:grid;gap:.35rem;font-size:.85rem}
.legend div{display:flex;justify-content:space-between;gap:1rem}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.5rem;background:var(--c)}
.hbar{margin-bottom:.8rem}.hbar:last-child{margin-bottom:0}
.hl{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.3rem}
.ht{height:9px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.ht i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--violet))}
.deb{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem .9rem}
.deb .nm{font-weight:700}.deb .sub{font-size:.78rem;color:var(--muted)}
.deb .am{font-weight:800;color:var(--danger);text-align:right}
.deb .btn{grid-column:1 / -1;padding:.5rem;font-size:.85rem}

/* Fotos y catalogo */
.th{display:block;border-radius:8px;object-fit:cover;background:#e6ebf2;flex:none}
.th.sm{width:36px;height:27px}
.th.big{width:100%;aspect-ratio:4/3;border-radius:10px 10px 0 0}
.th.hero{width:100%;aspect-ratio:4/3;max-height:240px;border-radius:12px;margin:.3rem 0 .6rem}
.th.box{display:grid;place-items:center;background:var(--bg-alt);font-size:1.4rem}
.th.sm.box{font-size:1rem}.th.big.box,.th.hero.box{font-size:3rem}
.lp{display:flex;align-items:center;gap:.5rem}
.nline{margin-bottom:.45rem}.warnl{font-size:.72rem;color:var(--warn);min-height:0;padding-left:44px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:.8rem 0}
.prd{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-align:left;cursor:pointer;color:inherit;font:inherit;padding:0;display:block;width:100%}
.prd:hover{border-color:rgba(56,189,248,.5)}
.prd .pi{padding:.6rem .7rem .7rem;display:grid;gap:.1rem}
.prd .code{font-weight:800;font-size:.95rem}
.prd .pn{font-size:.76rem;color:var(--muted)}
.prd .pp{font-weight:700;margin-top:.2rem}
.prd .ps{font-size:.76rem;color:var(--accent)}.prd .ps.low{color:var(--warn);font-weight:700}

/* Ventana inferior */
dialog{border:1px solid var(--border);border-radius:18px 18px 0 0;background:var(--bg-alt);color:#fff;width:100%;max-width:520px;margin:auto auto 0;padding:1.2rem;overflow:auto;max-height:92vh}
dialog::backdrop{background:rgba(0,0,0,.6)}
.sheet h3{margin-bottom:.4rem;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.sheet label{display:grid;gap:.25rem;font-size:.85rem;margin-bottom:.7rem;color:var(--muted)}
.sheet input:not([type=checkbox]),.sheet select{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.65rem .8rem;color:#fff;font:inherit;width:100%}
.sheet .two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.sheet .actions{display:grid;gap:.55rem;margin-top:.7rem}
.sheet .actions.row2{grid-template-columns:1fr 1fr}
.x{background:none;border:0;font-size:1.4rem;color:var(--muted);cursor:pointer}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:.88rem;margin:.5rem 0 .8rem}
.kv span:nth-child(odd){color:var(--muted)}
table.lines{width:100%;border-collapse:collapse;font-size:.85rem;margin:.4rem 0}
table.lines th{font-weight:600;color:var(--muted);text-align:left;font-size:.75rem;border-bottom:1px solid var(--border);padding:.3rem 0}
table.lines td{padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
table.lines .r{text-align:right}
.totals{display:grid;gap:.25rem;font-size:.9rem;margin:.6rem 0}
.totals div{display:flex;justify-content:space-between}
.totals .big{font-size:1.1rem;font-weight:800;border-top:1px solid var(--border);padding-top:.4rem}
.totals .pos{color:var(--accent)}.totals .neg{color:var(--danger)}
.box{border:1px solid var(--border);border-radius:12px;padding:.8rem;margin:.6rem 0;background:var(--card)}
.box h4{font-size:.85rem;margin-bottom:.5rem}
.pay{display:flex;gap:.5rem}.pay input{flex:1;min-width:0}
.line{display:grid;grid-template-columns:40px 1fr 84px 28px;gap:.4rem;align-items:center}
.line button{background:none;border:0;color:var(--danger);font-size:1.1rem;cursor:pointer}
.check{display:flex!important;align-items:center;gap:.5rem;color:#fff!important;margin:.5rem 0}
.check input{width:auto!important}
.hist{list-style:none;font-size:.8rem;color:var(--muted);display:grid;gap:.25rem;margin-top:.4rem}

/* Factura */
.inv{background:#fff;color:#16202e;border-radius:12px;padding:1.1rem;font-size:.85rem;line-height:1.5}
.inv-head{display:flex;justify-content:space-between;gap:1rem;border-bottom:2px solid #16202e;padding-bottom:.7rem;margin-bottom:.7rem}
.inv-head b{font-size:1rem}
.inv .inv-num{text-align:right}
.inv table.lines th{color:#5a6678;border-color:#d7dde7}
.inv table.lines td{border-color:#e6eaf1;color:#16202e}
.inv .totals{color:#16202e}.inv .totals .big{border-color:#16202e}
.inv .totals .pos{color:#0a8a64}.inv .totals .neg{color:#c0392b}
.inv-note{font-size:.72rem;color:#7a8699;margin-top:.7rem;border-top:1px dashed #cdd5e1;padding-top:.5rem}
.stamp{display:inline-block;border:2px solid #0a8a64;color:#0a8a64;border-radius:6px;padding:.1rem .6rem;font-weight:800;transform:rotate(-6deg);margin-top:.4rem}

@media print{
  body *{visibility:hidden}
  #sheet,#sheet .inv,#sheet .inv *{visibility:visible}
  dialog{position:absolute;inset:0;max-width:none;width:100%;max-height:none;border:0;background:#fff;padding:0;overflow:visible}
  .sheet h3,.sheet .actions,.demo-banner{display:none!important}
  .inv{border-radius:0}
}

/* Selector Web | App */
.viewtoggle{display:none}
@media (min-width:900px){
  .viewtoggle{display:inline-flex;border:1px solid var(--border);border-radius:99px;overflow:hidden;margin-right:.4rem}
  .viewtoggle button{background:none;border:0;color:var(--muted);font:inherit;font-size:.82rem;padding:.35rem .85rem;cursor:pointer}
  .viewtoggle button.on{background:var(--primary);color:#06101f;font-weight:700}
  .shell.as-app{box-shadow:0 0 0 1px var(--border),0 20px 60px rgba(0,0,0,.45)}
  body:has(.shell.as-app){background:#060b15}
}

/* Version web: pantalla completa */
@media (min-width:900px){
  .shell:not(.as-app){max-width:none;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto auto 1fr;min-height:100vh}
  .shell:not(.as-app) .demo-banner,.shell:not(.as-app) .top{grid-column:1 / -1}
  .shell:not(.as-app) .top{padding:1rem 2.5rem}
  .shell:not(.as-app) .top h1{font-size:1.5rem}
  .shell:not(.as-app) .tabs{position:sticky;top:5rem;left:auto;bottom:auto;transform:none;align-self:start;grid-column:1;grid-row:3;width:auto;max-width:none;display:flex;flex-direction:column;gap:.35rem;padding:1.5rem 1rem;border:0;background:transparent}
  .shell:not(.as-app) .tabs button{flex-direction:row;display:flex;align-items:center;gap:.8rem;font-size:1rem;padding:.85rem 1.1rem;border-radius:14px;text-align:left}
  .shell:not(.as-app) .tabs button span{font-size:1.3rem}
  .shell:not(.as-app) .tabs button:hover{background:var(--card);color:#fff}
  .shell:not(.as-app) .tabs button.on{background:rgba(56,189,248,.14);color:#fff}
  .shell:not(.as-app) .content{grid-column:2;grid-row:3;width:100%;max-width:1180px;padding:1.8rem 2.5rem 4rem}
  .shell:not(.as-app) .content h2{font-size:1.3rem}
  .shell:not(.as-app) #orders,.shell:not(.as-app) #clients{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
  .shell:not(.as-app) .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
  .shell:not(.as-app) .toolbar{max-width:460px}
  .shell:not(.as-app) .kpis{grid-template-columns:repeat(3,1fr)}
  .shell:not(.as-app) .cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
  .shell:not(.as-app) dialog{margin:auto;border-radius:20px;max-width:620px;max-height:90vh}
  .shell:not(.as-app) .toast{bottom:2rem}
}

/* Encabezado ordenado en pantallas angostas */
.top h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:600px){#qr-open{display:none}.top{gap:.4rem}.top .back{font-size:.8rem}}

/* Cobro mas claro */
.paynote{font-size:.92rem;margin-bottom:.6rem}
.hint{display:block;font-size:.76rem;color:var(--muted);margin:.7rem 0 .4rem}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.quick .btn{padding:.55rem .4rem;font-size:.85rem}

/* Cuenta por renglon */
.lcalc{font-size:.8rem;color:var(--muted);text-align:right;margin:.15rem .2rem .4rem}