:root{--rosa:#DE497B;--rosa-o:#C23A68;--rosa-s:#FBE3EB;--turq:#37ABB6;--turq-s:#DDF1F3;--nar:#FF9E18;--nar-s:#FFEBCF;--azul:#3E579D;--azul-s:#E2E7F4;--crema:#F5F0E8;--negro:#1D1D1B;--gris:#6b6a66;--borde:#E6DFD2;--ok:#2e8b57;--mal:#c0392b}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Outfit","Segoe UI",Arial,sans-serif;background:var(--crema);color:var(--negro);line-height:1.4}
.franja{height:5px;background:linear-gradient(90deg,var(--rosa) 0 25%,var(--nar) 25% 50%,var(--turq) 50% 75%,var(--azul) 75% 100%)}
header{background:#fff;border-bottom:1px solid var(--borde)}
.hin{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}.marca img{height:38px}.marca span{color:var(--gris);font-weight:500}
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav a,.btn-o{color:var(--rosa);text-decoration:none;font-weight:600;font-size:.9rem;border:1.5px solid var(--rosa);padding:6px 14px;border-radius:999px;background:#fff;cursor:pointer;font-family:inherit}
.nav a:hover,.btn-o:hover{background:var(--rosa);color:#fff}
.quien{font-size:.85rem;color:var(--gris)}
main{max-width:1200px;margin:0 auto;padding:18px 16px 90px}
h1{font-size:1.4rem;margin:.2em 0 .6em}h2{font-size:1.1rem;margin:0 0 .6em}
.card{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:16px;margin-bottom:16px}
label{font-weight:600;font-size:.9rem;display:block;margin-bottom:4px}
select,input[type=text],input[type=password],input[type=search],input[type=number]{width:100%;padding:11px 12px;border:1.5px solid var(--borde);border-radius:10px;font-size:1rem;font-family:inherit;background:#fff}
.btn{background:var(--rosa);color:#fff;border:0;padding:12px 22px;border-radius:999px;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--rosa-o)}.btn:disabled{opacity:.5;cursor:default}
.btn-sec{background:#fff;color:var(--azul);border:1.5px solid var(--azul)}.btn-sec:hover{background:var(--azul-s)}
.btn-ok{background:var(--ok)}.btn-ok:hover{background:#25724a}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;margin-top:6px}
.chk{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--borde);border-radius:10px;font-weight:500;cursor:pointer;background:#fff;margin:0}
.chk input{width:20px;height:20px;accent-color:var(--rosa)}.chk.on{border-color:var(--rosa);background:var(--rosa-s)}
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{padding:8px 8px;border-bottom:1px solid var(--borde);text-align:left;vertical-align:middle}
th{background:#faf7f1;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--gris);position:sticky;top:0;z-index:1;white-space:nowrap}
th.ord{cursor:pointer}th.ord:hover{color:var(--rosa)}
.r{text-align:right}.neg{color:var(--mal);font-weight:600}.pos{color:var(--ok);font-weight:600}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:600}
.t-en_conteo{background:var(--nar-s);color:#9a5b00}.t-contado{background:var(--turq-s);color:#17707a}.t-procesado{background:#dff3e7;color:var(--ok)}.t-cancelado{background:#eee;color:#777}.t-procesando{background:var(--azul-s);color:var(--azul)}
.msg{padding:10px 14px;border-radius:10px;margin:10px 0}.msg.err{background:var(--rosa-s);color:#8c1d44}.msg.ok{background:#dff3e7;color:#1f6b43}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:10px 14px}.kpi b{display:block;font-size:1.3rem}.kpi span{font-size:.78rem;color:var(--gris);text-transform:uppercase}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.tools>*{flex:0 0 auto}.tools .grow{flex:1 1 220px}
.foto{width:54px;height:54px;border-radius:10px;object-fit:contain;background:#faf7f1;border:1px solid var(--borde);display:block}
.wrap{overflow:auto;max-height:70vh;border:1px solid var(--borde);border-radius:12px;background:#fff}
.login{max-width:380px;margin:40px auto}.login .btn{width:100%;margin-top:14px}
.vacio{text-align:center;color:var(--gris);padding:30px}
/* ---- conteo (cajero) ---- */
.cbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--borde);padding:10px 16px}
.cbar .in{max-width:1200px;margin:0 auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.prog{flex:1 1 200px}.prog .bar{height:12px;background:var(--borde);border-radius:99px;overflow:hidden}.prog .bar i{display:block;height:100%;background:var(--turq);width:0;transition:width .3s}
.prog b{font-size:1.15rem}.crono{font-size:1.15rem;font-weight:700;color:var(--azul);font-variant-numeric:tabular-nums}
.filtros{max-width:1200px;margin:10px auto;padding:0 16px;display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:center}
@media(max-width:700px){.filtros{grid-template-columns:1fr 1fr}.filtros .full{grid-column:1/-1}}
.busca{display:flex;gap:8px}.busca input{flex:1}
.btn-cam{background:var(--azul);color:#fff;border:0;border-radius:10px;padding:0 16px;font-size:1.3rem;cursor:pointer}
.tabs{max-width:1200px;margin:0 auto 8px;padding:0 16px;display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:8px 16px;border-radius:999px;border:1.5px solid var(--borde);background:#fff;font-weight:600;cursor:pointer;font-family:inherit;font-size:.95rem}.tab.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.lista{max-width:1200px;margin:0 auto;padding:0 16px}
.cab,.fila{display:grid;grid-template-columns:70px 130px minmax(160px,1fr) 150px 250px;gap:10px;align-items:center}
.cab{padding:6px 12px;font-size:.78rem;text-transform:uppercase;color:var(--gris);font-weight:600}.cab span.ord{cursor:pointer}.cab span.ord:hover{color:var(--rosa)}
.fila{background:#fff;border:1.5px solid var(--borde);border-radius:14px;padding:8px 12px;margin-bottom:8px}
.fila.hecho{border-color:#9ad3b0;background:#f3fbf6}.fila.resalta{outline:3px solid var(--nar)}
.fila .cod{font-family:ui-monospace,Menlo,monospace;font-size:.9rem}.fila .nom{font-weight:600}.fila .nom small{display:none}.fila .cat{font-size:.85rem;color:var(--gris)}
.qty{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.qty button{width:58px;height:58px;border-radius:14px;border:0;font-size:2rem;font-weight:700;cursor:pointer;color:#fff;line-height:1}
.qty .menos{background:var(--nar)}.qty .mas{background:var(--turq)}
.qty input{width:84px;height:58px;text-align:center;font-size:1.9rem;font-weight:700;border:2px solid var(--borde);border-radius:14px;padding:0;font-variant-numeric:tabular-nums}
.qty input.vacio{color:#bbb}
@media(max-width:820px){.marca span{display:none}.cab{display:none}.fila{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"f n" "q q"}.fila .foto{grid-area:f}.fila .cod,.fila .cat{display:none}.fila .nom{grid-area:n}.fila .nom small{display:block;font-weight:400;color:var(--gris);font-size:.82rem}.fila .qty{grid-area:q;justify-content:space-between;gap:8px}.qty button{flex:0 0 28%;width:auto;height:64px}.qty input{flex:1 1 0;min-width:0;height:64px;width:100%}}
.pie{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--borde);padding:10px 16px;z-index:20}.pie .in{max-width:1200px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:14px}.modal.on{display:flex}
.modal .box{background:#fff;border-radius:16px;padding:18px;max-width:560px;width:100%;max-height:88vh;overflow:auto}
.modal video{width:100%;border-radius:12px;background:#000;max-height:60vh}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;background:var(--negro);color:#fff;padding:10px 18px;border-radius:999px;z-index:60;font-weight:600;display:none;max-width:92vw;text-align:center}
.falt li{padding:5px 0;border-bottom:1px solid var(--borde)}
a.btn{display:inline-block;text-decoration:none;text-align:center}
a.tab{color:var(--negro)}a.tab.on{color:#fff}