/*
 * Picking App v2.6 - Estilos
 * TEMA OSCURO
 */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
    --b:#111;      /* Background principal */
    --c1:#1a1a1a;  /* Card/panel background */
    --c2:#252525;  /* Background secundario */
    --ok:#43A047;  /* Verde éxito */
    --tx:#fff;     /* Texto principal */
    --tx2:#ccc;    /* Texto secundario */
    --mt:#777;     /* Texto muted */
    --bd:#333;     /* Bordes */
    --er:#E53935;  /* Error/rojo */
    --wr:#FB8C00;  /* Warning/naranja */
    --bl:#1E88E5;  /* Azul info */
    --r:10px       /* Border radius */
}

html,body{
    font-family:system-ui,sans-serif;
    background:var(--b);
    color:var(--tx);
    font-size:16px;
    height:100%;
    overflow:hidden
}

/* Screens */
.sc{display:none;flex-direction:column;height:100%;padding-bottom:30px}
.sc.on{display:flex}

/* List scrollable */
.ls{flex:1;overflow-y:auto;padding:10px;padding-bottom:40px;-webkit-overflow-scrolling:touch}
.ls::-webkit-scrollbar{display:none}

/* Buttons */
.bt{
    border:none;
    color:#fff;
    border-radius:var(--r);
    font-size:1.05rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:46px
}
.bt:active{filter:brightness(.85)}
.bt:disabled{background:var(--bd)!important;color:var(--mt)!important}

/* Inputs */
.in{
    width:100%;
    background:var(--b);
    border:2px solid var(--bd);
    color:var(--tx);
    border-radius:var(--r);
    font-size:1.05rem;
    padding:12px;
    -webkit-appearance:none
}
.in:focus{outline:none;border-color:var(--ok)}

/* Login */
.login{justify-content:center;align-items:center;padding:20px}
.lbx{
    background:var(--c1);
    padding:28px 22px;
    border-radius:16px;
    width:100%;
    max-width:300px;
    text-align:center
}
.lbx h1{font-size:1.5rem;margin-bottom:6px}
.lbx p{color:var(--mt);font-size:.95rem;margin-bottom:24px}
.lbx .in{font-size:1.7rem;padding:14px;text-align:center;letter-spacing:8px;margin-bottom:10px}
.lbx .in.er{border-color:var(--er);animation:sh .3s}
.ler{color:var(--er);font-size:.9rem;margin-bottom:10px;min-height:18px}
.lbx .bt{width:100%;padding:14px;font-size:1.1rem;background:var(--ok)}
@keyframes sh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* Drawer */
.dr-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90}
.dr-overlay.on{display:block}
.dr{
    position:fixed;
    top:0;left:0;bottom:0;
    width:260px;
    background:var(--c1);
    z-index:100;
    transform:translateX(-100%);
    transition:transform .25s ease
}
.dr.on{transform:translateX(0)}
.dr-hd{padding:20px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px}
.dr-hd span{font-size:1.3rem}
.dr-hd b{font-size:1.1rem}
.dr-nav{padding:10px 0}
.dr-section{padding:8px 16px 4px;font-size:.7rem;text-transform:uppercase;color:var(--mt);letter-spacing:1px;margin-top:8px}
.dr-section:first-child{margin-top:0}
.dr-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    color:var(--tx2);
    font-size:1rem;
    cursor:pointer;
    border-left:3px solid transparent
}
.dr-item:active{background:var(--c2)}
.dr-item.on{background:var(--c2);color:var(--ok);border-left-color:var(--ok)}
.dr-item span{font-size:1.2rem}
.dr-ft{position:absolute;bottom:0;left:0;right:0;padding:16px;border-top:1px solid var(--bd);font-size:.8rem;color:var(--mt)}

/* Header */
.hd{
    background:var(--c1);
    padding:8px 10px;
    display:flex;
    gap:8px;
    align-items:center;
    border-bottom:3px solid var(--ok);
    flex-shrink:0
}
.hd h1,.hd h2{font-size:1.1rem;font-weight:700}
.hd>div{flex:1;min-width:0}
.hd small{font-size:.85rem;color:var(--mt);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}

/* Menu button */
.mn-bt{
    width:46px;height:46px;
    background:transparent;
    border:none;
    color:var(--tx);
    font-size:1.4rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0
}
.mn-bt:active{opacity:.7}

/* Search */
.sr{flex:1;position:relative}
.sr::before{content:'🔍';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:.9rem;opacity:.5}
.sr .in{padding:10px 10px 10px 36px;font-size:1rem}
.sr .x{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    background:var(--c2);border:none;color:var(--mt);
    width:26px;height:26px;border-radius:50%;font-size:.8rem;
    display:none;cursor:pointer
}
.sr.on .x{display:flex;align-items:center;justify-content:center}

.hd .bt{width:46px;height:46px;font-size:1.3rem;flex-shrink:0;background:var(--ok)}
.hd .bt.cl{background:var(--er)}

/* Loading spinner */
.ld{animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* Filter tabs */
.ft{display:flex;gap:6px;padding:8px 10px;background:var(--c1);flex-shrink:0}
.ft button{
    flex:1;
    background:var(--b);
    border:2px solid var(--bd);
    color:var(--mt);
    padding:8px 4px;
    border-radius:8px;
    font-size:.85rem;
    font-weight:700;
    cursor:pointer
}
.ft button span{display:block;font-size:1.3rem;margin-top:2px;font-weight:800}
.ft button.on{background:var(--ok);border-color:var(--ok);color:#fff}
.ft button.at.on{background:var(--er);border-color:var(--er)}

/* Cards de pedido */
.cd{
    background:var(--c1);
    border-radius:var(--r);
    padding:12px;
    margin-bottom:8px;
    border-left:4px solid var(--ok);
    cursor:pointer
}
.cd:active{background:var(--c2)}
.cd.at{border-color:var(--er)}
.cd.dn{opacity:.6}
.cd.pt{border-color:var(--wr)}
.cd-r{display:flex;justify-content:space-between;gap:8px}
.cd-i{flex:1;min-width:0}
.cd-t{font-size:1.05rem;font-weight:600;line-height:1.25}
.cd-n{font-size:.9rem;color:var(--ok);margin-top:3px;font-weight:700}
.cd.at .cd-n{color:var(--er)}
.cd-x{display:flex;align-items:center;gap:6px}
.cd-b{background:var(--wr);color:#000;font-size:.9rem;font-weight:700;padding:6px 10px;border-radius:5px}
.cd-d{background:var(--b);padding:6px 10px;border-radius:6px;text-align:center;min-width:44px}
.cd-d b{font-size:1.15rem;display:block}
.cd-d small{font-size:.65rem;color:var(--mt);text-transform:uppercase}
.cd-p{height:5px;background:var(--bd);border-radius:3px;overflow:hidden;margin-top:10px}
.cd-p div{height:100%;background:var(--ok)}
.cd.pt .cd-p div{background:var(--wr)}
.cd-s{display:flex;justify-content:space-between;font-size:.85rem;color:var(--mt);margin-top:5px}

/* Empty state */
.em{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:100%;
    color:var(--mt);
    padding:20px;
    text-align:center
}
.em i{font-size:2.5rem;margin-bottom:10px;font-style:normal}
.em span{font-size:1rem}

/* Modals fullscreen */
.mo{display:none;position:fixed;inset:0;background:var(--b);z-index:10;flex-direction:column}
.mo.on{display:flex}
.mo .hd{border-color:var(--bl)}
.mo footer{padding:10px;background:var(--c1);border-top:1px solid var(--bd);flex-shrink:0;display:flex;gap:8px}
.mo footer .bt{flex:1;padding:14px;font-size:1.05rem}

/* Info bar */
.if{background:var(--c1);padding:10px 8px;display:flex;justify-content:space-around;border-bottom:1px solid var(--bd);flex-shrink:0}
.if div{text-align:center}
.if small{color:var(--mt);font-size:.65rem;text-transform:uppercase;letter-spacing:.3px}
.if b{display:block;font-size:1.05rem;margin-top:1px}

/* List header */
.lh{background:var(--c2);padding:8px 12px;font-size:.75rem;color:var(--mt);font-weight:700;display:flex;text-transform:uppercase;flex-shrink:0}
.lh span:first-child{flex:1}

/* List item */
.li{display:flex;align-items:center;padding:10px 12px;background:var(--c1);border-bottom:1px solid var(--bd);gap:10px}
.li-d{flex:1;min-width:0}
.li-c{font-size:.85rem;color:var(--bl);font-weight:700}
.li-t{font-size:.95rem;margin-top:2px;color:var(--tx2);line-height:1.25}
.li-q{text-align:right}
.li-q b{font-size:1.4rem;color:var(--ok);display:block}
.li-q small{font-size:.75rem;color:var(--mt)}
.li-b{background:var(--wr);color:#000;font-size:1rem;font-weight:700;padding:10px 12px;border-radius:6px;min-width:46px;text-align:center}

/* Scan bar */
.sn{background:var(--c2);padding:6px 10px;border-bottom:2px solid var(--ok);flex-shrink:0;display:flex;align-items:center;gap:8px}
.sn .in{width:45%;flex-shrink:0;font-size:.9rem;padding:7px 10px;font-family:monospace;letter-spacing:1px;border-color:var(--bd);background:var(--b)}
.sn .in:focus{border-color:var(--bl)}
.sn .in.ok{animation:fo .25s}
.sn .in.er{animation:fe .25s}
@keyframes fo{50%{background:rgba(67,160,71,.15)}}
@keyframes fe{50%{background:rgba(229,57,53,.15)}}
.sn-info{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.sn-ok{font-size:.9rem;font-weight:600;color:var(--ok);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-err{font-size:.9rem;font-weight:600;color:var(--er)}

/* Picking lines */
.pl{background:var(--c1);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;border-left:4px solid var(--bd)}
.pl.ok{border-color:var(--ok)}
.pl.pt{border-color:var(--wr)}
.pl-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.pl-c{font-size:.95rem;color:var(--bl);font-weight:700}
.pl-p{font-size:1rem;font-weight:700}
.pl-p.ok{color:var(--ok)}
.pl-p.pt{color:var(--wr)}
.pl-d{font-size:.85rem;color:var(--mt);margin-bottom:5px;line-height:1.2}
.pl-bar{height:4px;background:var(--bd);border-radius:2px;overflow:hidden;margin-bottom:6px}
.pl-bar div{height:100%;background:var(--ok)}
.pl.pt .pl-bar div{background:var(--wr)}

/* Lotes dentro de línea */
.pl-lotes{display:flex;flex-direction:column;gap:6px}
.pl-lote{background:var(--b);border-radius:6px;padding:8px 10px}
.pl-lote-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.pl-lote-id{font-family:monospace;font-size:.95rem;color:var(--bl);font-weight:700}
.pl-lote-sum{font-size:.9rem;color:var(--mt)}
.pl-lote-sum b{color:var(--ok)}
.pl-pesos{display:flex;flex-wrap:wrap;gap:4px}
.pl-peso{background:var(--c2);padding:4px 7px;border-radius:4px;font-size:.9rem;color:var(--tx2);font-weight:600}

/* Toast */
.ts{
    position:fixed;
    bottom:46px;left:10px;right:10px;
    padding:12px;
    border-radius:var(--r);
    font-size:1rem;
    font-weight:600;
    z-index:100;
    opacity:0;
    transition:opacity .2s;
    text-align:center;
    pointer-events:none
}
.ts.on{opacity:1}
.ts.ok{background:var(--ok);color:#fff}
.ts.er{background:var(--er);color:#fff}
.ts.wr{background:var(--wr);color:#000}

/* Confirm dialog */
.cf{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:50;align-items:center;justify-content:center;padding:16px}
.cf.on{display:flex}
.cf>div{background:var(--c1);border-radius:14px;padding:20px;max-width:280px;width:100%;text-align:center}
.cf p{font-size:1.05rem;margin-bottom:18px;color:var(--tx2);line-height:1.35}
.cf .bs{display:flex;gap:10px}
.cf .bt{flex:1;padding:12px}

/* Footer brand */
.br{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:.75rem;color:#666;padding:8px;background:var(--b);border-top:1px solid var(--bd);z-index:1}

/* ===== ENTREGA ===== */

/* Firma canvas */
.sig-wrap{background:var(--c1);border-radius:var(--r);padding:12px;margin:10px}
.sig-label{font-size:.85rem;color:var(--mt);margin-bottom:8px;text-align:center}
.sig-canvas{width:100%;height:150px;background:#fff;border-radius:8px;touch-action:none}
.sig-btns{display:flex;gap:8px;margin-top:10px}
.sig-btns .bt{flex:1;padding:10px;font-size:.9rem}

/* Bulto individual */
.eb{
    background:var(--c1);
    border-radius:var(--r);
    padding:10px 12px;
    margin-bottom:6px;
    display:flex;
    align-items:center;
    gap:10px;
    border-left:4px solid var(--bd)
}
.eb.ok{border-color:var(--ok);background:rgba(67,160,71,.1)}
.eb.pend{border-color:var(--wr)}
.eb-icon{font-size:1.3rem;width:30px;text-align:center}
.eb-info{flex:1;min-width:0}
.eb-top{display:flex;justify-content:space-between;align-items:center}
.eb-code{font-size:.85rem;color:var(--bl);font-weight:700;font-family:monospace}
.eb-peso{font-size:.95rem;font-weight:700;color:var(--ok)}
.eb.pend .eb-peso{color:var(--mt)}
.eb-lote{font-size:.8rem;color:var(--mt);margin-top:2px}
.eb-desc{font-size:.85rem;color:var(--tx2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Resumen por artículo entrega */
.ea{background:var(--c1);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;border-left:4px solid var(--bd)}
.ea.ok{border-color:var(--ok)}
.ea.pt{border-color:var(--wr)}
.ea-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.ea-c{font-size:.9rem;color:var(--bl);font-weight:700}
.ea-st{font-size:1.3rem}
.ea-d{font-size:.85rem;color:var(--tx2);margin-bottom:6px;line-height:1.2}
.ea-prog{display:flex;align-items:center;gap:10px}
.ea-bar{flex:1;height:6px;background:var(--bd);border-radius:3px;overflow:hidden}
.ea-bar div{height:100%;background:var(--ok);transition:width .2s}
.ea.pt .ea-bar div{background:var(--wr)}
.ea-kg{font-size:.85rem;color:var(--mt);min-width:90px;text-align:right}
.ea-kg b{color:var(--ok)}
.ea.pt .ea-kg b{color:var(--wr)}

/* ===== FACTURA ENTREGADA (Vista orientativa) ===== */
.ed-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--c1);border-radius:var(--r);margin-bottom:12px}
.ed-badge{padding:6px 12px;border-radius:20px;font-size:.85rem;font-weight:600}
.ed-badge.ok{background:var(--ok);color:#fff}
.ed-fact{font-size:1.1rem;font-weight:600;color:var(--tx)}
.ed-card{background:var(--c1);border-radius:var(--r);padding:16px;margin-bottom:12px}
.ed-client{font-size:1.1rem;font-weight:600;color:var(--tx);margin-bottom:12px}
.ed-info{display:flex;flex-direction:column;gap:8px}
.ed-row{display:flex;justify-content:space-between;font-size:.9rem}
.ed-row span{color:var(--tx2)}
.ed-row b{color:var(--tx)}
.ed-firma{text-align:center;margin-top:12px}
.ed-firma img{max-width:200px;border-radius:8px;background:#fff;border:1px solid var(--bd)}
.ed-note{text-align:center;font-size:.85rem;color:var(--mt);padding:8px}

/* ===== ETIQUETAS ===== */

/* Card pedido compra */
.cd.cmp{border-color:var(--wr)}
.cd.cmp .cd-n{color:var(--wr)}

/* Lista items con estado OK */
.li.ok{border-left:3px solid var(--ok);background:rgba(67,160,71,.05)}

/* Tabs etiquetas - badge contador */
#tTabs button span{display:inline;font-size:.75rem;background:var(--wr);color:#000;padding:2px 6px;border-radius:10px;margin-left:4px;font-weight:700}
#tTabs button.on{background:var(--wr);border-color:var(--wr);color:#000}

/* ===== CARGA ===== */

/* Botón validar en header */
.cg-validate-btn{
    background:var(--c2);
    border:1px solid var(--bd);
    color:var(--tx2);
    padding:8px 12px;
    border-radius:var(--r);
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px
}
.cg-validate-btn:active{background:var(--bd)}

/* Resumen actual */
.cg-summary{
    background:linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    border-radius:var(--r);
    padding:16px;
    margin-bottom:12px;
    border:1px solid var(--bd)
}
.cg-summary-title{
    font-size:.75rem;
    color:var(--mt);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:12px;
    text-align:center
}
.cg-summary-data{
    display:flex;
    justify-content:space-around
}
.cg-summary-item{
    text-align:center
}
.cg-summary-value{
    display:block;
    font-size:1.8rem;
    font-weight:700;
    color:var(--wr);
    line-height:1
}
.cg-summary-label{
    font-size:.75rem;
    color:var(--mt);
    margin-top:4px
}

/* Factura en lista de carga */
.cg-fact{
    background:var(--c1);
    border-radius:var(--r);
    padding:12px;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-left:4px solid var(--wr)
}
.cg-fact-info{
    flex:1;
    min-width:0
}
.cg-fact-num{
    font-size:1rem;
    font-weight:700;
    color:var(--wr)
}
.cg-fact-client{
    font-size:.85rem;
    color:var(--tx2);
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.cg-fact-data{
    display:flex;
    align-items:center;
    gap:10px
}
.cg-fact-bultos{
    background:var(--c2);
    padding:4px 10px;
    border-radius:4px;
    font-size:.85rem;
    color:var(--tx2);
    font-weight:600
}
.cg-fact-bultos::after{
    content:' bul.';
    font-size:.7rem;
    color:var(--mt)
}
.cg-fact-peso{
    font-size:.9rem;
    font-weight:700;
    color:var(--ok);
    min-width:70px;
    text-align:right
}
.cg-fact-remove{
    background:var(--er);
    border:none;
    color:#fff;
    width:32px;
    height:32px;
    border-radius:6px;
    font-size:1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center
}
.cg-fact-remove:active{filter:brightness(.8)}

/* Items de carga (en modal validación) */
.cg-item{
    background:var(--c1);
    border-radius:var(--r);
    padding:14px;
    margin-bottom:10px;
    border-left:4px solid var(--bd)
}
.cg-item.pendiente{border-color:var(--wr)}
.cg-item.validada{border-color:var(--ok)}
.cg-item.cancelada{border-color:var(--er);opacity:.7}

.cg-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px
}
.cg-codigo{
    font-size:1.1rem;
    font-weight:700;
    color:var(--tx);
    font-family:monospace
}
.cg-estado{
    padding:4px 10px;
    border-radius:12px;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase
}
.cg-estado.pendiente{background:var(--wr);color:#000}
.cg-estado.validada{background:var(--ok);color:#fff}
.cg-estado.cancelada{background:var(--er);color:#fff}

.cg-info{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:12px
}
.cg-info-row{
    display:flex;
    justify-content:space-between;
    font-size:.9rem
}
.cg-info-row span{color:var(--mt)}
.cg-info-row b{color:var(--tx2)}

.cg-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end
}
.cg-btn{
    border:none;
    padding:10px 14px;
    border-radius:8px;
    font-size:1rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center
}
.cg-btn:active{filter:brightness(.85)}
.cg-btn.view{background:var(--bl);color:#fff}
.cg-btn.validate{background:var(--ok);color:#fff}
.cg-btn.cancel{background:var(--er);color:#fff}

/* Filtros de cargas */
.cg-filters{
    display:flex;
    gap:6px;
    padding:10px;
    background:var(--c1);
    border-bottom:1px solid var(--bd)
}
.cg-filter{
    flex:1;
    background:var(--b);
    border:2px solid var(--bd);
    color:var(--mt);
    padding:10px 8px;
    border-radius:8px;
    font-size:.8rem;
    font-weight:700;
    cursor:pointer;
    text-transform:uppercase
}
.cg-filter:active{background:var(--c2)}
.cg-filter.on{color:#fff}
.cg-filter.pendiente.on{background:var(--wr);border-color:var(--wr);color:#000}
.cg-filter.validada.on{background:var(--ok);border-color:var(--ok)}
.cg-filter.cancelada.on{background:var(--er);border-color:var(--er)}