:root{--bg:#f6f1e8;--card:#fffdf8;--ink:#23312b;--mut:#6d7a73;--line:#e6dfd0;--pri:#2f6b4f;--pri2:#e9f2ec;--acc:#e9803a;--bad:#c4452f;--warn:#b7791f;--r:16px}
*{box-sizing:border-box;margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit;color:inherit}
header{display:flex;align-items:center;gap:20px;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.logo{font-weight:800;font-size:20px;color:var(--pri);display:flex;gap:8px;align-items:center}
nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;order:3;width:100%}
nav button{padding:8px 4px;border-radius:12px;font-weight:600;color:var(--mut);min-height:60px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;line-height:1.15;text-align:center;min-width:0}
nav button i{font-style:normal;font-size:22px;line-height:1}nav button em{font-style:normal;overflow-wrap:anywhere}
nav button[hidden]{display:none}
nav button.on{background:var(--pri);color:#fff}
.menu{display:none;margin-left:auto;padding:10px 16px;min-height:48px;border-radius:12px;background:var(--pri2);color:var(--pri);font-weight:700;max-width:50vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){header{position:static;gap:10px;padding:10px 12px}.menu{display:inline-flex;align-items:center;gap:6px}nav[id]{display:none}header.open nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.tag{order:2;width:100%;margin-left:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}}
@media(max-width:1100px){header{position:static}}
nav .badge{position:absolute;top:2px;right:2px;background:var(--acc);color:#fff;border-radius:99px;font-size:12px;padding:1px 7px}
.tag{margin-left:auto;font-size:13px;color:var(--mut)}
main{padding:20px;max-width:1300px;margin:auto}
section{display:none}section.on{display:block}
.caja{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px}
#subs:empty{display:none}
.caja>.ticket{align-self:start;position:sticky;top:84px}
#cart{max-height:46vh;overflow:auto}
/* tablet y móvil: la venta actual va justo debajo del escáner y se queda fija arriba al bajar por los productos */
@media(max-width:900px){.caja{grid-template-columns:minmax(0,1fr);gap:12px}
 .caja>div:first-child{display:contents}
 .caja>div:first-child>.bar:first-child{order:1;margin-bottom:0}
 .caja>.ticket{order:2;position:sticky;top:6px;z-index:5;box-shadow:0 6px 18px #0002;padding:12px}
 #cart{max-height:28vh}
 #cats{order:3;margin-bottom:0}#subs{order:3;margin-bottom:0}#grid{order:4}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.scan{flex:1;min-width:200px;padding:14px 16px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:16px}
.scan:focus{outline:0;border-color:var(--pri)}
.chip{padding:12px 18px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:600;min-height:48px}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.prod{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:left;display:flex;flex-direction:column;gap:4px;min-height:130px;transition:.12s}
.prod:active{transform:scale(.97)}
.prod:hover{border-color:var(--pri)}
.seccion{border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin:14px 0;background:var(--card)}
.seccion>h4{margin:0 0 10px;font-size:14px;letter-spacing:.04em}
.seccion.com{border-color:#8a8a8a;background:#f4f2ec}.seccion.com>h4{color:#555}
.seccion.gran{border-color:var(--pri)}.seccion.gran>h4{color:var(--pri)}
.seccion.uni{border-color:#d9822b;background:#fdf3e6}.seccion.uni>h4{color:#b4600f}
.prod .em{font-size:34px}
.prod img.fo{width:100%;height:92px;object-fit:cover;border-radius:10px;background:var(--pri2)}
.cc img.fo{width:56px;height:56px;object-fit:cover;border-radius:12px;background:var(--pri2)}
.prod b{font-size:15px;line-height:1.2}
.prod .pr{color:var(--pri);font-weight:700;margin-top:auto}
.prod small{color:var(--mut)}
.pill{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--pri2);color:var(--pri);font-weight:600}
.pill.low{background:#fbefd5;color:var(--warn)}.pill.out{background:#f8dcd6;color:var(--bad)}.pill.kg{background:#fde8d8;color:#b4571a}
.ticket h3{margin-bottom:10px}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:40px;height:40px;border-radius:10px;background:var(--pri2);font-size:20px;font-weight:700;color:var(--pri)}
.empty{color:var(--mut);text-align:center;padding:30px 0}
.total{display:flex;justify-content:space-between;font-size:28px;font-weight:800;margin:14px 0}
.btn{padding:16px 22px;border-radius:14px;font-weight:700;font-size:17px;min-height:56px}
.btn.pri{background:var(--pri);color:#fff}.btn.acc{background:var(--acc);color:#fff}.btn.ghost{background:var(--pri2);color:var(--pri)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}.field input,.field select{width:100%;min-width:0}
.modal{position:fixed;inset:0;background:#23312b99;display:none;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal.on{display:flex}
.sheet{background:var(--card);border-radius:20px;padding:24px;width:min(620px,100%);max-height:92vh;overflow:auto}
.dsp{background:#16211c;color:#7dffb0;font-family:ui-monospace,Consolas,monospace;border-radius:14px;padding:14px 18px;text-align:right;margin:12px 0}
.dsp .v{font-size:44px;font-weight:700}.dsp .s{font-size:13;color:#7dffb099}
.dsp .st{font-size:13px;display:flex;justify-content:space-between}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.steps button{padding:14px 0;border-radius:12px;background:var(--pri2);font-weight:700;color:var(--pri);min-height:52px}
.note{font-size:13px;color:var(--mut);margin-top:10px}
.labels{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:20px}
@media(max-width:900px){.labels{grid-template-columns:minmax(0,1fr)}}
.plist{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto}
.plist button{text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:flex;justify-content:space-between;gap:8px;min-height:48px}
.plist button.on{border-color:var(--pri);background:var(--pri2)}
.lbl{width:300px;max-width:100%;border:1px dashed #999;background:#fff;padding:10px;border-radius:6px;display:grid;grid-template-columns:1fr 84px;gap:6px;font-size:13px}
.lbl .n{font-weight:800;font-size:15px;grid-column:1/3}
.lbl .p{font-size:22px;font-weight:800}
.lbl svg{max-width:100%}
.field{display:flex;flex-direction:column;gap:4px;margin:10px 0}
.field input,.field select{padding:12px;border:2px solid var(--line);border-radius:10px;background:#fff}
.phone{width:380px;max-width:100%;margin:0 auto;background:#111;padding:12px;border-radius:44px;box-shadow:0 20px 50px #0003}
.screen{background:var(--bg);border-radius:34px;height:760px;overflow:auto;position:relative;display:flex;flex-direction:column}
.ph-h{padding:22px 18px 10px;background:var(--pri);color:#fff}
.ph-h h2{font-size:22px}.ph-h p{opacity:.85;font-size:14px}
.ph-b{padding:14px;flex:1}
.ph-nav{display:flex;position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line)}
.ph-nav button{flex:1;padding:12px 0;font-size:12px;font-weight:600;color:var(--mut);min-height:56px}
.ph-nav button.on{color:var(--pri)}.ph-nav span{display:block;font-size:20px}
.cc{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:10px}
.cc .em{font-size:36px;text-align:center}
.cc .btn{padding:10px 14px;min-height:44px;font-size:14px}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slots button{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:600;min-height:48px}
.slots button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.slots button:disabled{opacity:.35;text-decoration:line-through}
.agenda{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media(max-width:1100px){.agenda{grid-template-columns:minmax(0,1fr)}}
.item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dashed var(--line)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:14px;opacity:0;pointer-events:none;transition:.25s;z-index:30}
.toast.on{opacity:1}
.who{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.who input{flex:1;padding:8px;border:1px solid var(--line);border-radius:8px}
.tel{display:flex;border:2px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}.tel span{padding:12px;background:var(--pri2);font-weight:700;white-space:nowrap;display:flex;align-items:center}.field .tel input{border:0;border-radius:0;flex:1}
.legal{text-align:center;font-size:13px;padding:6px 16px 14px}.legal a{color:var(--mut);display:inline-block;padding:12px 10px;min-height:44px}
@media print{.legal{display:none}}
@media print{header,main>section:not(#s-etq),.no-print,.toast{display:none!important}body{background:#fff}#printarea{display:flex!important;flex-wrap:wrap;gap:6px}}
#printarea{display:none}
/* --- fase 2 --- */
.login{max-width:380px;margin:12vh auto;text-align:center}
.login h1{color:var(--pri);margin-bottom:6px}
.err{color:var(--bad);font-size:14px;min-height:20px;margin:6px 0}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:13px;color:var(--mut);padding:8px 6px}
td{padding:10px 6px;border-top:1px solid var(--line);vertical-align:middle}
td .btn{min-height:44px;padding:8px 12px;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.stat b{display:block;font-size:26px}.stat span{color:var(--mut);font-size:13px}
.nowrap{white-space:nowrap}
.scaleb{margin-top:8px;font-size:13px}
.shop{max-width:560px;margin:auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.shop .ph-nav{position:sticky;bottom:0}
@media(max-width:600px){.phone{padding:0;background:none;box-shadow:none}}

/* nada se sale de la pantalla: móvil, tablet y ordenador */
img,svg,input,select,textarea{max-width:100%}
textarea{width:100%}
@media(max-width:700px){
  main{padding:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .row{flex-wrap:wrap}.row>*{flex:1 1 130px}
  table,tbody,tr,td{display:block}
  tr:has(th){display:none}
  tr{padding:10px 0;border-bottom:1px dashed var(--line)}
  td{padding:2px 0!important;border:0!important}
  td.nowrap{white-space:normal}
}
@media(max-width:400px){.line{gap:6px}.line>div:last-child{min-width:0!important}.qty button{width:36px}}

/* Mi negocio y Contabilidad: grandes y táctiles */
nav .shoplink{color:var(--acc);border:2px solid var(--acc)}
.hero{text-align:center;padding:22px 16px}.hero small{color:var(--mut);font-weight:600}
.hero .big{font-size:44px;font-weight:800;margin:4px 0;line-height:1.1}.hero.good .big{color:var(--pri)}.hero.bad .big{color:var(--bad)}.hero .sub{color:var(--mut);margin-bottom:14px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.trio span{background:var(--pri2);border-radius:12px;padding:10px 6px;font-size:12px;color:var(--mut);line-height:1.3}.trio b{display:block;font-size:17px;color:var(--ink);margin-bottom:2px}
.prog{position:relative;height:38px;background:var(--pri2);border-radius:99px;overflow:hidden;margin-top:6px}.prog .fill{height:100%;background:linear-gradient(90deg,var(--pri),#4d9a74);border-radius:99px;transition:width .5s}.prog span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800}
.bars{display:flex;gap:8px;align-items:flex-end;height:150px;margin-top:10px}.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;height:100%;justify-content:flex-end;font-size:12px;color:var(--mut)}
.bars .stack{flex:1;width:100%;display:flex;align-items:flex-end}.bars i{display:block;width:100%;background:var(--pri);border-radius:8px 8px 0 0}.bars i.neg{background:var(--bad)}.bars b{color:var(--ink);font-size:12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-bottom:6px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px;padding:8px 4px;border:2px solid var(--line);border-radius:14px;background:#fff;font-size:13px;font-weight:600;text-align:center;line-height:1.2}
.tile span{font-size:28px}.tile.on{border-color:var(--pri);background:var(--pri2);color:var(--pri)}
.grp{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 6px}
h4.mes{margin:14px 0 2px;color:var(--mut);font-size:14px}.card.aviso{background:#fbefd5;border-color:#e6c77a}
.pdfbox{padding:30px 12px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;font-weight:600}
@media print{#s-neg,#s-con{display:none!important}}

.ck{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:14px;line-height:1.4}
.ck input{width:24px;height:24px;flex:none;margin-top:1px}
.ck a{color:var(--pri)}
.ph-b .btn[disabled]{opacity:.5}

/* fichas (modales): más anchas en ordenador, a pantalla casi completa en móvil, botones siempre a mano */
.sheet h3{margin:0 0 6px;font-size:20px}
.sheet .field input,.sheet .field select{font-size:16px;min-height:48px}
.sheet>.row:last-child{position:sticky;bottom:-24px;background:var(--card);padding:12px 0 4px;margin-top:12px;border-top:1px solid var(--line)}
.sheet input[type=radio]{flex:none}
@media(max-width:600px){
  .modal{align-items:flex-end;padding:0}
  .sheet{width:100%;max-height:94vh;border-radius:20px 20px 0 0;padding:18px 16px}
  .sheet>.row:last-child{bottom:-18px;flex-wrap:nowrap}.sheet>.row:last-child>*{flex:1 1 0}
  #fprov{margin-left:0!important}#fown{margin-left:0!important}
  #fprov{flex-wrap:wrap}#fprov input{flex:1 1 100%!important}#fprov .btn{width:100%}
}

/* Impresión de ticket (80 mm) y facturas (A4) */
#printdoc{display:none}
.tk{width:72mm;font:12px/1.35 ui-monospace,Consolas,monospace;color:#000}.tk hr{border:0;border-top:1px dashed #000;margin:6px 0}
.a4{font:13px/1.45 Arial,sans-serif;color:#000}.a4t{width:100%;border-collapse:collapse}.a4t th,.a4t td{border-bottom:1px solid #bbb;padding:6px;text-align:right}.a4t td:first-child{text-align:left}
@media print{body.pd #app>*:not(#printdoc),body.pd .legal{display:none!important}body.pd #printdoc{display:block!important}body.pd{background:#fff}}