:root{--or:#FF671F;--pk:#E11383;--br:#6b3e2e;--gn:#28a745;--rd:#dc3545;--yw:#e6a817;--bg:#f4f5f7;--ca:#fff;--bd:#e4e4e4;--mu:#888}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',sans-serif;background:var(--bg);color:#333;font-size:14px}
header{background:#fff;border-bottom:4px solid var(--pk);padding:11px 22px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.hb{display:flex;align-items:center;gap:14px;font-size:1.05rem;font-weight:700;color:var(--br)}
.htitulo{display:flex;flex-direction:column;justify-content:center}
#tituloApp{font-size:1.05rem;font-weight:800;color:var(--br);letter-spacing:.5px;line-height:1.2}
.hi{font-size:.8rem;color:var(--mu);background:var(--bg);padding:5px 13px;border-radius:20px;display:flex;align-items:center;gap:10px}
.tnav{display:flex;align-items:stretch;background:#fff;border-bottom:1px solid var(--bd);padding:0 22px;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tnav-sep{flex:1}
.tbtn{padding:11px 20px;border:none;background:none;cursor:pointer;font-weight:600;color:var(--mu);border-bottom:3px solid transparent;transition:.2s;white-space:nowrap}
.tbtn-main{font-size:1rem;font-weight:800;color:var(--or);letter-spacing:.5px;border-bottom:3px solid var(--or)}
.tbtn-main:hover{color:#e05015}.tbtn-main.active{color:var(--or);border-bottom-color:var(--or)}
.tbtn-sec{font-size:.82rem;color:var(--mu)}
.tbtn-sec:hover{color:var(--or)}.tbtn-sec.active{color:var(--or);border-bottom-color:var(--or)}
.tc{display:none}.tc.active{display:block}
.pg{max-width:1300px;margin:0 auto;padding:18px;display:flex;flex-direction:column;gap:15px}
.card{background:var(--ca);border-radius:10px;padding:18px 22px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.card h2{font-size:.97rem;color:var(--or);border-bottom:2px solid var(--bg);padding-bottom:9px;margin-bottom:14px}
.dnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dnav input[type=date]{padding:8px 11px;border:2px solid var(--or);border-radius:6px;font-size:.97rem;font-weight:700;color:var(--br);cursor:pointer}
.dlb{font-size:.88rem;color:var(--mu)}
.dst{padding:3px 11px;border-radius:20px;font-size:.78rem;font-weight:700}
.dst.open{background:#e8f5e9;color:#2e7d32}.dst.closed{background:#fce4ec;color:#c62828}
.ua{border:2px dashed var(--bd);border-radius:8px;padding:26px 18px;text-align:center;cursor:pointer;transition:.3s;background:#fafafa}
.ua:hover,.ua.drag{border-color:var(--or);background:#fff8f5}
.ua p{color:var(--mu);margin-bottom:6px;font-size:.9rem}
.btn{padding:8px 17px;border:none;border-radius:6px;font-size:.87rem;font-weight:700;cursor:pointer;transition:.18s;background:var(--or);color:#fff}
.btn:hover{background:#e05015}
.btnp{background:var(--pk)!important}.btnp:hover{background:#c00f6d!important}
.btng{background:var(--gn)!important;color:#fff!important}.btng:hover{background:#1e7e34!important}
.btns{background:#f0f0f0!important;color:#555!important}.btns:hover{background:#e0e0e0!important}
.brow{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:11px}
.fr{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.fg{display:flex;flex-direction:column;gap:4px;min-width:130px}
.fg label{font-size:.78rem;font-weight:700;color:var(--br)}
.fc{padding:8px 10px;border:1px solid var(--bd);border-radius:5px;font-size:.88rem;width:100%}
.fc:focus{outline:none;border-color:var(--or)}
.tw{overflow-x:auto;margin-top:10px}
table{width:100%;border-collapse:collapse;font-size:.81rem}
th,td{padding:6px 8px;text-align:center;border-bottom:1px solid #f0f0f0;white-space:nowrap}
td:first-child,th:first-child{text-align:left;padding-left:11px;white-space:normal;min-width:140px;max-width:200px}
th{background:#f8f8f8;color:var(--br);font-size:.77rem;line-height:1.3}
tr:hover{background:#fff9f7}
.ic{width:88px;padding:4px 6px;text-align:right;border:2px solid var(--or);border-radius:4px;font-weight:700;font-size:.82rem}
.tc2{font-weight:700;color:var(--br);background:#f8f8f8}
.bg{padding:3px 9px;border-radius:10px;font-size:.73rem;font-weight:700;color:#fff;white-space:nowrap;display:inline-block}
.bgo{background:var(--gn)}.bgf{background:var(--rd)}.bgp{background:var(--yw);color:#333}.bgpos{background:var(--pk)}
.ml{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.mi{display:flex;gap:8px;align-items:center;padding:5px 10px;border-radius:5px;background:var(--bg);font-size:.81rem;flex-wrap:wrap}
.mt{padding:2px 8px;border-radius:10px;font-size:.71rem;font-weight:700;color:#fff;flex-shrink:0}
.mt.entrada{background:var(--gn)}.mt.salida{background:#555}
.mt.merma{background:var(--yw);color:#333}.mt.desperdicio{background:var(--rd)}.mt.venta_pos{background:var(--pk)}
.md{cursor:pointer;color:var(--rd);margin-left:auto;font-weight:700;font-size:1rem;flex-shrink:0}
.al{padding:9px 13px;border-radius:6px;font-size:.87rem;margin-top:8px}
.ai{background:#e3f2fd;color:#1565c0}.ae{background:#fce4ec;color:#c62828}.aw{background:#fff3e0;color:#e65100}
#tst{position:fixed;bottom:22px;right:22px;padding:11px 19px;border-radius:8px;color:#fff;font-weight:700;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none}
@media(max-width:768px){
  header{padding:9px 14px;flex-wrap:wrap;gap:8px;row-gap:6px}
  .hb{flex-wrap:wrap;row-gap:6px}
  .hi{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
  #selectorTiendaWrap{width:100%}
  #selectorTiendaWrap select{width:100%;max-width:100%;margin-left:0!important}
  .pg{padding:11px;gap:11px}
  .card{padding:14px}
  .fr{flex-direction:column;align-items:stretch}
  .fg{min-width:unset}
  .dnav{gap:8px}
  /* Primera columna fija al hacer scroll horizontal: mantiene visible el
     nombre del insumo/tienda mientras se desliza para ver el resto de la
     tabla (el kardex diario tiene 12 columnas, imposible de mostrar entero
     en un telefono). */
  table{font-size:.74rem}
  th,td{padding:5px 6px}
  td:first-child,th:first-child{position:sticky;left:0;z-index:2;min-width:108px;max-width:130px;box-shadow:2px 0 4px rgba(0,0,0,.08)}
  td:first-child{background:#fff}
  th:first-child{background:#f8f8f8;z-index:3}
  .ic{width:62px;padding:3px 5px;font-size:.76rem}
  .msel-panel{min-width:unset}
  .kpi-row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}
@media(max-width:420px){
  #tituloApp{font-size:.92rem}
  .btn{padding:7px 13px;font-size:.83rem}
  table{font-size:.7rem}
  .ic{width:54px}
}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff8f5,var(--bg))}
.login-card{background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.1);padding:34px 32px;width:100%;max-width:360px}
.login-card h1{font-size:1.15rem;color:var(--br);margin-bottom:4px}
.login-card p{font-size:.82rem;color:var(--mu);margin-bottom:20px}
.login-logo{display:flex;justify-content:center;margin-bottom:14px}

/* Reportes / consolidado */
.rpt-scroll,.consol-scroll{overflow-x:auto;margin-top:10px}
.rpt-tbl,.consol-tbl{border-collapse:collapse;font-size:.75rem;white-space:nowrap;min-width:100%}
.rpt-tbl th,.rpt-tbl td,.consol-tbl th,.consol-tbl td{border:1px solid #ddd;padding:4px 6px;text-align:center}
.rpt-th-lbl,.consol-tbl th:first-child{background:#f0f0f0;font-weight:700;text-align:left!important;position:sticky;left:0;z-index:2;min-width:140px}
.rpt-grp td{font-weight:800;font-size:.74rem;color:#fff;text-align:left!important;padding:4px 8px}
.rpt-dif-neg{background:#fff176!important;font-weight:700}
.rpt-dif-pos{background:#ffe0b2!important;font-weight:700}
.c-ok{color:var(--gn);font-weight:700}.c-falt{color:var(--rd);font-weight:700}.c-sob{color:var(--yw);font-weight:700}
.c-empty{color:#ccc}

/* Admin dashboard */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.kpi{background:var(--bg);border-radius:8px;padding:12px 14px}
.kpi .v{font-size:1.5rem;font-weight:800;color:var(--br)}
.kpi .l{font-size:.75rem;color:var(--mu)}

/* Selector multiple con buscador (ej. tiendas asignadas) */
.msel{position:relative}
.msel-btn{width:100%;text-align:left;background:#fff;color:#333;cursor:pointer;font-weight:400}
.msel-btn:hover{border-color:var(--or)}
.msel-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:#fff;border:1px solid var(--bd);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:10px;min-width:260px}
.msel-actions{display:flex;justify-content:space-between;font-size:.75rem;margin:8px 0 4px}
.msel-actions a{color:var(--or);text-decoration:none;font-weight:600}
.msel-actions a:hover{text-decoration:underline}
.msel-list{max-height:220px;overflow-y:auto;border-top:1px solid var(--bg);padding-top:6px}
.msel-item{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:.83rem;cursor:pointer;border-radius:4px}
.msel-item:hover{background:var(--bg)}
.msel-item input{margin:0;flex-shrink:0}