/* ============================================================
   ESTILOS — Inventario Sabeamex / Formexa
   Mobile-first · fondo blanco · Arial/system · semáforo suave.
   Utilidad de bodega, sin adornos. (Preferencia del dueño.)
   ============================================================ */
:root{
  --bg:#ffffff; --ink:#111111; --muted:#6b6b6b; --line:#e6e6e6; --soft:#f7f7f7;
  --verde:#2e7d4f; --verde-bg:#e7f3ec;
  --naranja:#c47a1a; --naranja-bg:#fbf0df;
  --rojo:#c0392b; --rojo-bg:#fbe9e7;
  --negro:#1a1a1a; --negro-bg:#e2e2e2;
  --tap:54px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.4}
body{padding-bottom:90px}
.hidden{display:none!important}

/* layout */
header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);
  padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
header .brand{font-weight:bold;font-size:15px;letter-spacing:.5px}
header .sel{margin-left:auto;display:flex;align-items:center;gap:6px}
header select{font-family:inherit;font-size:14px;border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;background:#fff}
main{padding:14px;max-width:680px;margin:0 auto}
h1{font-size:20px;margin:4px 0 14px}
h2{font-size:16px;margin:18px 0 8px}
.muted{color:var(--muted);font-size:14px}

/* botones */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--tap);
  border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:12px;
  font-family:inherit;font-size:16px;font-weight:bold;cursor:pointer;padding:14px;text-align:center}
.btn.solid{background:var(--ink);color:#fff}
.btn.ghost{border-color:var(--line);font-weight:normal}
.btn:active{opacity:.7}
.btn.sm{min-height:44px;font-size:14px;padding:10px 14px;width:auto}
.row{display:flex;gap:10px}
.row>*{flex:1}

/* puertas entrada/salida */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 4px}
.door{border:1px solid var(--ink);border-radius:14px;padding:22px 14px;text-align:center;cursor:pointer;background:#fff}
.door:active{opacity:.7}
.door .big{font-size:17px;font-weight:bold;margin-top:6px}
.door .sub{font-size:12px;color:var(--muted)}
.door .arrow{font-size:26px;line-height:1}
.door.door-off{border-color:var(--line);color:var(--muted);background:var(--soft);cursor:not-allowed}
.door.door-off:active{opacity:1}

/* campos */
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
input,select{width:100%;font-family:inherit;font-size:16px;padding:12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--ink)}

/* tarjetas */
.card{border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0;background:#fff}
.pallet{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:var(--soft)}
.pallet .head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pallet .idx{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold;flex-shrink:0}
.pallet .pcs{margin-left:auto;font-weight:bold;font-size:15px;white-space:nowrap}
.pallet .del{background:none;border:none;color:var(--rojo);font-size:16px;cursor:pointer;padding:4px}
.pallet.compacto{cursor:pointer;padding:10px 12px}
.pallet.compacto .head{margin-bottom:0}
.pallet .head .nm{font-weight:bold;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pallet .head .meta{font-size:12px;color:var(--muted)}
.photo-prev{width:100%;max-height:160px;object-fit:cover;border-radius:10px;margin-top:8px;border:1px solid var(--line)}

/* footer fijo de acción */
.footbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:10px 14px;z-index:40;max-width:680px;margin:0 auto}

/* pestañas */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  display:flex;z-index:40}
.tabbar button{flex:1;background:none;border:none;font-family:inherit;font-size:11px;color:var(--muted);
  padding:8px 4px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar button.on{color:var(--ink);font-weight:bold}
.tabbar .ic{font-size:18px;line-height:1}

/* inventario */
.invrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;margin:8px 0;background:#fff}
.dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.invrow .nm{font-weight:bold;font-size:14px}
.invrow .meta{font-size:12px;color:var(--muted)}
.invrow .qty{margin-left:auto;text-align:right}
.invrow .qty b{font-size:15px}
.pill{display:inline-block;font-size:11px;font-weight:bold;padding:2px 8px;border-radius:20px}
.pill.verde{background:var(--verde-bg);color:var(--verde)}
.pill.naranja{background:var(--naranja-bg);color:var(--naranja)}
.pill.rojo{background:var(--rojo-bg);color:var(--rojo)}
.pill.negro{background:var(--negro-bg);color:var(--negro)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.chip{font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;cursor:pointer}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* banners y alertas */
.banner{font-size:13px;padding:10px 12px;border-radius:10px;margin:0 0 12px}
.banner.warn{background:var(--naranja-bg);color:var(--naranja);border:1px solid #eccf9a}
.banner.ok{background:var(--verde-bg);color:var(--verde);border:1px solid #bfe0cc}
.alert-banner{background:var(--rojo-bg);color:var(--rojo);border:1px solid #e6b8b2;
  font-size:13px;padding:10px 12px;border-radius:10px;margin:8px 0}
.empty{color:var(--muted);text-align:center;padding:40px 10px;font-size:14px}

/* KPIs */
.kpis{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin:10px 0}
.kpi{border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center}
.kpi b{display:block;font-size:18px}
.kpi span{font-size:11px;color:var(--muted)}

/* login */
#loginScreen{position:fixed;inset:0;background:#fff;z-index:60;display:flex;
  align-items:center;justify-content:center;padding:24px}
#loginScreen .login-box{width:100%;max-width:320px;text-align:center}
#loginScreen .login-logo{width:72px;height:72px;border-radius:16px;margin-bottom:14px}
#loginScreen .login-title{font-weight:bold;font-size:20px;letter-spacing:1px}
#loginScreen input{margin:6px 0;text-align:center}
#loginScreen .btn{margin-top:8px}

.twodate{display:flex;gap:8px;align-items:flex-end}
.twodate>div{flex:1}
small.hint{display:block;color:var(--muted);font-size:12px;margin-top:4px}