/* ============================================================
   SMARTNOA v9 - Sistema de diseno (Noa Life)
   Extraido de doc/templateHTML/smartnoa_v9.html
   ============================================================ */
/* ══════════════════════════════════════════════════
   SMARTNOA v9 — Clarity · Fresh · Premium
   Tema claro con identidad de agua alcalina premium
   Tipografía: Plus Jakarta Sans + JetBrains Mono
══════════════════════════════════════════════════ */
:root{
  /* Fondos claros */
  --bg0:#EEF5FC;
  --bg1:#F8FAFF;
  --bg2:#FFFFFF;
  --bg3:#F1F5F9;
  --bg4:#E8F0FB;
  /* Sidebar oscuro (ancla visual) */
  --sb-bg:#162032;
  --sb-bg2:#1C2A42;
  --sb-bdr:rgba(148,163,184,.1);
  /* Agua — acento primario */
  --aq0:#0EA5E9;
  --aq1:#0284C7;
  --aq2:#06B6D4;
  --aq3:#22D3EE;
  /* Verde salud */
  --gr0:#10B981;
  --gr1:#059669;
  --gr2:#D1FAE5;
  /* Violeta analytics */
  --vio:#7C3AED;
  --vio2:#8B5CF6;
  --vio3:#EDE9FE;
  /* Texto */
  --tx0:#0F172A;
  --tx1:#1E293B;
  --tx2:#64748B;
  --tx3:#94A3B8;
  --tx4:#CBD5E1;
  /* Semáforo */
  --ok:#10B981;
  --ok2:#059669;
  --ok-bg:#D1FAE5;
  --warn:#F59E0B;
  --warn2:#D97706;
  --warn-bg:#FEF3C7;
  --err:#EF4444;
  --err2:#DC2626;
  --err-bg:#FEE2E2;
  --info:#3B82F6;
  --info-bg:#DBEAFE;
  /* Bordes */
  --bdr:#E2E8F0;
  --bdr2:#F1F5F9;
  --bdr3:rgba(14,165,233,.15);
  /* Sombras */
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --sh2:0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --sh3:0 10px 40px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.05);
  --sh-aq:0 4px 20px rgba(14,165,233,.2);
  /* Layout */
  --sw:260px;
  --hh:60px;
  /* Tipografía */
  --f:'Plus Jakarta Sans',sans-serif;
  --m:'JetBrains Mono',monospace;
  /* Radius */
  --r:10px;
  --r2:14px;
  --r3:20px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f);background:var(--bg0);
  color:var(--tx0);min-height:100vh;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bdr2)}
::-webkit-scrollbar-thumb{background:var(--tx4);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--tx3)}

/* ══ LOGIN ══════════════════════════════════════ */
#ls{
  position:fixed;inset:0;display:flex;z-index:9999;
  background:var(--bg0);overflow:hidden;
}
.ls-brand{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:56px;position:relative;
  background:linear-gradient(155deg,var(--sb-bg) 0%,#0D2040 55%,#0A2E4A 100%);
  overflow:hidden;
}
.ls-bg-pattern{
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(14,165,233,.12) 1px,transparent 0);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);
}
.ls-bg-glow{
  position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.1) 0%,transparent 65%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:glowpulse 5s ease-in-out infinite;
}
@keyframes glowpulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}
.ls-drop{
  width:160px;height:196px;margin-bottom:36px;
  filter:drop-shadow(0 24px 48px rgba(14,165,233,.4));
  animation:levitate 7s ease-in-out infinite;position:relative;z-index:1;
}
@keyframes levitate{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-14px) rotate(.5deg)}66%{transform:translateY(-8px) rotate(-.3deg)}}
.ls-tagline{
  font-size:11px;font-weight:700;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--aq3);margin-bottom:12px;
  position:relative;z-index:1;
}
.ls-headline{
  font-size:36px;font-weight:800;color:#FFFFFF;
  text-align:center;line-height:1.2;margin-bottom:10px;
  position:relative;z-index:1;letter-spacing:-.5px;
}
.ls-headline em{
  font-style:normal;
  background:linear-gradient(135deg,var(--aq3),#67E8F9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.ls-sub{
  font-size:13px;color:rgba(203,213,225,.7);text-align:center;
  line-height:1.65;max-width:300px;position:relative;z-index:1;
}
.ls-pills{
  display:flex;gap:8px;margin-top:32px;flex-wrap:wrap;
  justify-content:center;position:relative;z-index:1;
}
.ls-pill{
  padding:5px 14px;border-radius:20px;font-size:10px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.25);color:var(--aq3);
}
.ls-form-panel{
  width:440px;flex-shrink:0;background:var(--bg2);
  display:flex;flex-direction:column;justify-content:center;
  padding:60px 52px;position:relative;
  box-shadow:-8px 0 40px rgba(0,0,0,.1);
}
.ls-form-logo{margin-bottom:40px}
.ls-form-title{
  font-size:26px;font-weight:800;color:var(--tx0);
  margin-bottom:6px;letter-spacing:-.4px;
}
.ls-form-sub{font-size:13px;color:var(--tx2);margin-bottom:32px;line-height:1.6}

/* Floating label */
.fl-wrap{position:relative;margin-bottom:20px}
.fl-input{
  width:100%;padding:22px 16px 10px;
  background:var(--bg3);border:1.5px solid var(--bdr);
  border-radius:var(--r);color:var(--tx0);font-family:var(--f);
  font-size:14px;outline:none;transition:all .2s;
}
.fl-input:focus{
  border-color:var(--aq0);background:var(--bg2);
  box-shadow:0 0 0 3px rgba(14,165,233,.1);
}
.fl-input::placeholder{color:transparent}
.fl-label{
  position:absolute;left:16px;top:50%;
  transform:translateY(-50%);font-size:14px;
  color:var(--tx3);pointer-events:none;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  transform-origin:left center;
}
.fl-input:focus+.fl-label,
.fl-input:not(:placeholder-shown)+.fl-label{
  top:12px;transform:translateY(0) scale(.78);
  color:var(--aq0);font-weight:600;
}
.fl-icon{
  position:absolute;right:14px;top:50%;
  transform:translateY(-50%);font-size:16px;
  color:var(--tx4);pointer-events:none;transition:color .2s;
}
.fl-input:focus~.fl-icon{color:var(--aq0)}
.ls-err{
  display:none;padding:11px 14px;
  background:var(--err-bg);border:1px solid rgba(239,68,68,.2);
  border-radius:var(--r);color:var(--err);font-size:12px;
  margin-bottom:16px;font-weight:500;
}
.ls-btn{
  width:100%;padding:16px;border:none;border-radius:var(--r);
  background:linear-gradient(135deg,var(--aq0),var(--aq1));
  color:white;font-family:var(--f);font-size:15px;font-weight:700;
  cursor:pointer;transition:all .25s;letter-spacing:.2px;
  box-shadow:var(--sh-aq);position:relative;overflow:hidden;
}
.ls-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0;transition:opacity .2s;
}
.ls-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(14,165,233,.35);
}
.ls-btn:hover::after{opacity:1}
.ls-btn:active{transform:translateY(0)}
.ls-creds{
  margin-top:20px;padding:12px 16px;
  background:var(--bg3);border:1px solid var(--bdr);
  border-radius:var(--r);font-size:11px;color:var(--tx2);line-height:1.9;
}
.ls-creds strong{
  font-size:9px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--aq0);display:block;margin-bottom:4px;
}
.ls-creds span{color:var(--tx0);font-family:var(--m);font-weight:500}
.ls-ver{
  position:absolute;bottom:20px;right:24px;
  font-size:10px;color:var(--tx4);font-family:var(--m);
}

/* ══ APP ════════════════════════════════════════ */
.app-shell{min-height:100vh}

/* ── SIDEBAR oscuro ── */
.sb{
  position:fixed;top:0;left:0;bottom:0;width:var(--sw);
  background:linear-gradient(180deg,#1A2C45 0%,#162032 100%);
  border-right:1px solid rgba(148,163,184,.1);
  display:flex;flex-direction:column;z-index:100;
  overflow-y:auto;overflow-x:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:2px 0 16px rgba(0,0,0,.1);
}
.sb::before{
  content:'';position:absolute;top:0;left:0;right:0;height:180px;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(14,165,233,.07),transparent);
  pointer-events:none;
}
.sb::-webkit-scrollbar{width:0}
.sbl{
  padding:18px 18px 16px;
  border-bottom:1px solid var(--sb-bdr);
  display:flex;align-items:center;gap:11px;flex-shrink:0;
}
.sbl-logo{display:flex;align-items:center;flex-shrink:0}
.sbl-name{font-size:14px;font-weight:800;color:#FFFFFF;letter-spacing:-.3px}
.sbl-name span{color:var(--aq3)}
.sbl-ver{
  font-size:9px;font-family:var(--m);color:rgba(148,163,184,.5);
  letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;
}
.sl{
  padding:18px 18px 5px;font-size:9px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(148,163,184,.45);flex-shrink:0;
}
.ni{
  margin:2px 10px;border-radius:var(--r);cursor:pointer;
  transition:all .18s;position:relative;overflow:hidden;flex-shrink:0;
}
.nii{display:flex;align-items:center;gap:10px;padding:9px 11px}
.nic{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
  background:rgba(203,213,225,.07);
  border:1px solid rgba(203,213,225,.1);
  transition:all .18s;
}
.nil{
  font-size:13px;font-weight:500;
  color:rgba(203,213,225,.65);
  transition:color .18s;flex:1;
}
.nb2{
  font-size:9px;font-weight:700;
  background:var(--err);color:white;
  border-radius:8px;padding:2px 6px;font-family:var(--m);
}
.nb2.warn{background:var(--warn);color:white}
.nb2.ok{background:var(--ok);color:white}
.ni:hover .nil{color:#FFFFFF}
.ni:hover .nic{background:rgba(14,165,233,.15);border-color:rgba(14,165,233,.3)}
.ni:hover{background:rgba(255,255,255,.04)}
.ni.act{background:rgba(14,165,233,.1)}
.ni.act::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;
  background:linear-gradient(180deg,var(--aq3),var(--aq0));
  border-radius:0 3px 3px 0;
}
.ni.act .nic{
  background:linear-gradient(135deg,var(--aq0),var(--aq1));
  border-color:transparent;
  box-shadow:0 4px 12px rgba(14,165,233,.35);
}
.ni.act .nil{color:#FFFFFF;font-weight:600}
.sbb{
  margin-top:auto;padding:14px;
  border-top:1px solid rgba(148,163,184,.1);flex-shrink:0;
}
.uc{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:rgba(203,213,225,.07);border-radius:var(--r);
  border:1px solid rgba(203,213,225,.1);cursor:pointer;transition:all .2s;
}
.uc:hover{background:rgba(14,165,233,.15);border-color:rgba(14,165,233,.25)}
.ua{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--aq0),var(--aq1));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:white;
}
.un{font-size:12px;font-weight:600;color:rgba(255,255,255,.9)}
.ur{font-size:9px;color:rgba(148,163,184,.5);font-family:var(--m);margin-top:1px}
.ulo{margin-left:auto;font-size:15px;color:rgba(148,163,184,.4);cursor:pointer;transition:color .2s}
.ulo:hover{color:var(--err)}

/* ── TOPBAR claro ── */
.tb{
  position:fixed;top:0;left:var(--sw);right:0;height:var(--hh);
  background:rgba(248,250,255,.95);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;padding:0 24px;gap:14px;
  z-index:50;box-shadow:0 1px 0 var(--bdr),0 2px 8px rgba(0,0,0,.04);
  transition:left .28s;
}
.tbt{font-size:15px;font-weight:700;color:var(--tx0);letter-spacing:-.2px}
.tbbc{font-size:10px;color:var(--tx3);font-family:var(--m)}
.tbs{flex:1}
.tbc2{
  display:flex;align-items:center;gap:6px;padding:5px 12px;
  background:var(--ok-bg);border:1px solid rgba(16,185,129,.25);
  border-radius:20px;font-size:10px;font-weight:700;
  color:var(--ok2);font-family:var(--m);
}
.tbc2::before{
  content:'';width:5px;height:5px;background:var(--ok);
  border-radius:50%;animation:pulse3 2s infinite;
}
@keyframes pulse3{0%,100%{opacity:1}50%{opacity:.35}}
.tbbtn{
  width:32px;height:32px;background:var(--bg3);
  border:1px solid var(--bdr);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--tx3);font-size:14px;transition:all .2s;
}
.tbbtn:hover{background:var(--info-bg);color:var(--info);border-color:rgba(59,130,246,.2)}
#tbd{font-size:11px;color:var(--tx3);font-family:var(--m)}
.ham-btn{
  display:none;width:36px;height:36px;
  background:var(--bg3);border:1px solid var(--bdr);
  border-radius:8px;cursor:pointer;align-items:center;
  justify-content:center;font-size:16px;flex-shrink:0;
  color:var(--tx2);transition:all .2s;
}
.ham-btn:hover{background:var(--info-bg);color:var(--info)}
.sb-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.6);z-index:99;backdrop-filter:blur(4px);
}
.sb-overlay.open{display:block}

/* ── MAIN ── */
.mc{
  margin-left:var(--sw);margin-top:var(--hh);
  padding:24px;min-height:calc(100vh - var(--hh));
}
.mv{display:none;animation:fadeUp .28s ease}
.mv.act{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ══ COMPONENTES ══════════════════════════════ */

/* Quick access cards */
.qg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:20px}
.qc{
  background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r2);padding:22px;cursor:pointer;
  transition:all .22s;position:relative;overflow:hidden;
  box-shadow:var(--sh);
}
.qc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--qcol,var(--aq0));opacity:.9;
  border-radius:var(--r2) var(--r2) 0 0;
}
.qc::after{
  content:'';position:absolute;bottom:-30px;right:-15px;
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.06),transparent 70%);
  transition:all .3s;
}
.qc:hover{
  border-color:var(--qcol,var(--aq0));
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.1),0 0 0 1px var(--qcol,var(--aq0));
}
.qc:hover::after{transform:scale(2.5)}
.qi{font-size:26px;margin-bottom:11px;display:block}
.qt{font-size:14px;font-weight:700;color:var(--tx0);margin-bottom:5px}
.qd{font-size:12px;color:var(--tx2);line-height:1.5}
.qbdg{
  position:absolute;top:14px;right:14px;
  background:var(--err);color:white;
  font-size:10px;font-weight:700;border-radius:10px;
  padding:2px 7px;font-family:var(--m);
}

/* KPI cards */
.kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.kc{
  background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r2);padding:18px 20px;
  position:relative;overflow:hidden;transition:all .2s;
  box-shadow:var(--sh);
}
.kc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--ac,var(--aq0));border-radius:var(--r2) var(--r2) 0 0;
}
.kc:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--ac,var(--aq0))}
.ki{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;margin-bottom:10px;
  background:var(--bg3);border:1px solid var(--bdr);
}
.kv{font-size:24px;font-weight:800;color:var(--tx0);line-height:1;margin-bottom:4px;letter-spacing:-.5px}
.kl{font-size:11px;color:var(--tx2);font-weight:500}
.kt{font-size:10px;margin-top:5px;font-family:var(--m)}
.kt.up{color:var(--ok)}.kt.warn{color:var(--warn)}

/* Panels */
.pn{
  background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r2);overflow:hidden;margin-bottom:14px;
  box-shadow:var(--sh);
}
.ph{
  padding:14px 18px;border-bottom:1px solid var(--bdr2);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--bg2);
}
.ptl{font-size:13px;font-weight:700;color:var(--tx0);flex:1}
.pb{padding:18px}

/* Banner bienvenida */
.wb{
  background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(6,182,212,.04));
  border:1px solid rgba(14,165,233,.15);border-radius:var(--r2);
  padding:22px 26px;display:flex;align-items:center;gap:18px;
  position:relative;overflow:hidden;margin-bottom:20px;
  box-shadow:var(--sh);
}
.wb::before{
  content:'';position:absolute;right:-30px;top:-30px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,233,.06),transparent 70%);
}
.wt{flex:1}
.wtt{font-size:18px;font-weight:800;color:var(--tx0);margin-bottom:4px;letter-spacing:-.3px}
.wts{font-size:12px;color:var(--tx2);line-height:1.5}
.wb-logo-wrap{display:flex;align-items:center;flex-shrink:0}
.bcart{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border:none;border-radius:var(--r);
  background:linear-gradient(135deg,var(--aq0),var(--aq1));
  color:white;font-family:var(--f);font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;box-shadow:var(--sh-aq);transition:all .22s;
}
.bcart:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,165,233,.3)}

/* Formularios */
.fg2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fg3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ff{grid-column:1/-1}
.fgr{display:flex;flex-direction:column;gap:5px}
.fla{
  font-size:10px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--aq0);
}
.fc{
  padding:9px 13px;background:var(--bg3);
  border:1.5px solid var(--bdr);border-radius:8px;
  color:var(--tx0);font-family:var(--f);font-size:13px;
  outline:none;transition:all .2s;width:100%;
}
.fc:focus{border-color:var(--aq0);background:var(--bg2);box-shadow:0 0 0 3px rgba(14,165,233,.1)}
.fc::placeholder{color:var(--tx4)}
select.fc option{background:var(--bg2);color:var(--tx0)}
textarea.fc{resize:vertical}
.fc[readonly]{background:var(--bg3);opacity:.75;cursor:default}

/* Autocomplete */
.acd{
  position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--bg2);border:1.5px solid var(--aq0);
  border-radius:var(--r);z-index:500;max-height:200px;
  overflow-y:auto;box-shadow:var(--sh3);display:none;
}
.aci{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--bdr2);transition:background .15s}
.aci:hover{background:rgba(14,165,233,.06)}
.acin{font-size:13px;font-weight:600;color:var(--tx0)}
.acis{font-size:11px;color:var(--tx2);font-family:var(--m)}
.aci:last-child{border-bottom:none}

.sw2{position:relative}
.sw2 .fc{padding-left:32px}
.sico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:13px;pointer-events:none}

/* Botones */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border-radius:8px;font-family:var(--f);font-size:13px;font-weight:600;
  cursor:pointer;border:none;transition:all .2s;white-space:nowrap;
}
.bp{background:linear-gradient(135deg,var(--aq0),var(--aq1));color:white;box-shadow:var(--sh-aq)}
.bp:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(14,165,233,.3)}
.bo{background:transparent;border:1.5px solid var(--aq0);color:var(--aq0)}
.bo:hover{background:rgba(14,165,233,.07)}
.bg2{background:var(--bg3);border:1px solid var(--bdr);color:var(--tx2)}
.bg2:hover{background:var(--bg4);color:var(--tx0);border-color:var(--tx4)}
.bsm{padding:6px 12px;font-size:11px;border-radius:7px}
.bsu{background:var(--ok-bg);border:1px solid rgba(16,185,129,.25);color:var(--ok2)}
.bd{background:var(--err-bg);border:1px solid rgba(239,68,68,.2);color:var(--err2)}
.bw{background:var(--warn-bg);border:1px solid rgba(245,158,11,.2);color:var(--warn2)}

/* Badges de estado */
.bdg{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:600;font-family:var(--m)}
.bo2{background:var(--warn-bg);border:1px solid rgba(245,158,11,.2);color:var(--warn2)}
.bk{background:var(--ok-bg);border:1px solid rgba(16,185,129,.2);color:var(--ok2)}
.bb{background:var(--info-bg);border:1px solid rgba(59,130,246,.2);color:var(--info)}
.br2{background:var(--err-bg);border:1px solid rgba(239,68,68,.15);color:var(--err2)}
.bga{background:var(--bg3);border:1px solid var(--bdr);color:var(--tx2)}
.bgd{background:var(--warn-bg);border:1px solid rgba(245,158,11,.2);color:var(--warn2)}
.bpur{background:var(--vio3);border:1px solid rgba(124,58,237,.2);color:var(--vio)}
.tg{color:var(--ok2)}.tc{color:var(--aq0)}.tm{color:var(--tx2)}

/* Tablas */
.dt{width:100%;border-collapse:collapse}
.dt th{
  padding:10px 13px;text-align:left;font-size:9.5px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--tx3);
  border-bottom:1.5px solid var(--bdr);background:var(--bg3);
}
.dt td{
  padding:11px 13px;font-size:12.5px;color:var(--tx1);
  border-bottom:1px solid var(--bdr2);transition:background .15s;
}
.dt tr:nth-child(even) td{background:rgba(241,245,249,.5)}
.dt tr:last-child td{border-bottom:none}
.dt tr:hover td{background:rgba(14,165,233,.05);color:var(--tx0)}

/* Barra capacidad */
.ctr{height:8px;background:var(--bg3);border-radius:8px;overflow:hidden;margin:5px 0}
.cfi{height:100%;border-radius:8px;transition:width .4s ease;background:linear-gradient(90deg,var(--aq0),var(--aq2))}
.cfi.warn{background:linear-gradient(90deg,var(--warn),var(--warn2))}
.cfi.full{background:linear-gradient(90deg,var(--err),var(--err2))}

/* Inputs de líneas */
.oli{
  padding:8px 10px;background:var(--bg3);border:1px solid var(--bdr);
  border-radius:7px;color:var(--tx0);font-family:var(--f);
  font-size:12px;outline:none;width:100%;transition:all .2s;
}
.oli:focus{border-color:var(--aq0);background:var(--bg2);box-shadow:0 0 0 2px rgba(14,165,233,.1)}
select.oli option{background:var(--bg2);color:var(--tx0)}
.oltbl{width:100%;border-collapse:collapse}
.oltbl th{padding:8px 9px;font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx3);background:var(--bg3);text-align:left}
.oltbl td{padding:7px 8px;vertical-align:middle}
.oltbl tr{border-bottom:1px solid var(--bdr2)}

/* Promo box */
.prb{
  display:none;margin:10px 0;padding:12px 16px;
  background:var(--warn-bg);border:1px solid rgba(245,158,11,.25);
  border-radius:var(--r);
}
.prt{font-size:12px;font-weight:700;color:var(--warn2);margin-bottom:5px}
.pri{font-size:12px;color:var(--tx1);padding:3px 0}
.pra{font-size:11px;color:var(--aq0);cursor:pointer;font-weight:600;text-decoration:underline}
.disc-line{
  display:none;padding:6px 12px;background:var(--ok-bg);
  border:1px solid rgba(16,185,129,.2);border-radius:7px;
  font-size:12px;color:var(--ok2);margin:4px 0;
}

/* Búsqueda de cliente */
.cli-search-bar{
  background:linear-gradient(135deg,rgba(14,165,233,.06),rgba(6,182,212,.03));
  border:1px solid rgba(14,165,233,.2);border-radius:var(--r2);
  padding:16px 18px;margin-bottom:14px;position:relative;
}
.cli-search-bar input{
  width:100%;background:var(--bg2);border:1.5px solid var(--bdr);
  border-radius:var(--r);color:var(--tx0);font-family:var(--f);
  font-size:14px;padding:11px 14px 11px 42px;outline:none;transition:all .2s;
}
.cli-search-bar input:focus{border-color:var(--aq0);box-shadow:0 0 0 3px rgba(14,165,233,.1)}
.cli-search-bar input::placeholder{color:var(--tx4)}

#cred-info{
  margin-top:10px;padding:10px 14px;background:var(--warn-bg);
  border:1px solid rgba(245,158,11,.2);border-radius:8px;
  font-size:12px;color:var(--warn2);
}

/* Truck visualizer */
.tviz{
  background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r2);padding:20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  box-shadow:var(--sh);
}
.tem{font-size:52px;transition:all .3s;filter:drop-shadow(0 3px 10px rgba(14,165,233,.2))}
.tpct{font-size:28px;font-weight:800;color:var(--tx0);font-family:var(--m)}
.tlbl{font-size:11px;color:var(--tx2);text-align:center}

/* Calendario */
.calg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.calh{text-align:center;font-size:9px;font-weight:700;color:var(--tx3);letter-spacing:1px;padding:5px 0}
.cald{
  min-height:68px;background:var(--bg3);border:1px solid var(--bdr2);
  border-radius:8px;padding:5px;cursor:pointer;transition:all .2s;
}
.cald:hover{border-color:var(--aq0);background:rgba(14,165,233,.04)}
.cald.today{border-color:var(--aq0);background:rgba(14,165,233,.06)}
.cald.empty{background:transparent;border-color:transparent;cursor:default}
.caldn{font-size:10px;font-weight:600;color:var(--tx3);margin-bottom:3px}
.caldt{
  background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.2);
  border-radius:4px;padding:2px 5px;font-size:9px;color:var(--aq0);
  margin-top:2px;display:flex;align-items:center;gap:2px;cursor:pointer;
}
.cald-pct{font-size:9px;color:var(--warn);font-family:var(--m)}

/* Modal */
.mo{
  position:fixed;inset:0;background:rgba(15,23,42,.5);
  backdrop-filter:blur(6px);z-index:8000;
  display:none;align-items:center;justify-content:center;
}
.mo.open{display:flex}
.mbox{
  background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r3);padding:28px;width:520px;max-width:96vw;
  box-shadow:var(--sh3);animation:fadeUp .28s ease;
  max-height:90vh;overflow-y:auto;
}

/* Toast */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--bg2);border:1px solid var(--bdr);
  border-radius:var(--r2);padding:13px 18px;
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--tx0);
  box-shadow:var(--sh3);
  transform:translateY(100px);opacity:0;
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  z-index:9000;min-width:250px;
  border-bottom:3px solid var(--aq0);
}
.toast.show{transform:translateY(0);opacity:1}

/* Políticas */
.pols{margin-bottom:18px}
.pols-t{
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--aq0);margin-bottom:8px;padding-bottom:6px;
  border-bottom:1px solid var(--bdr);
}

/* Helpers */
.dv{height:1px;background:var(--bdr);margin:12px 0}
.es{text-align:center;padding:40px 20px;color:var(--tx3)}
.es .ei{font-size:36px;margin-bottom:10px;opacity:.5}
.fx{display:flex}.fxc{display:flex;align-items:center}
.fxb{display:flex;align-items:center;justify-content:space-between}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}
.mt12{margin-top:12px}.mt16{margin-top:16px}
.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.mo2{font-family:var(--m)}

/* RPT tabs activo */
.rpt-tab{border:1.5px solid var(--bdr)!important}
.rpt-tab.act{
  background:linear-gradient(135deg,var(--aq0),var(--aq1))!important;
  color:white!important;border-color:transparent!important;
  box-shadow:var(--sh-aq)!important;
}

/* ══ RESPONSIVE ══════════════════════════════ */
@media(max-width:1024px){:root{--sw:224px}}
@media(max-width:768px){
  :root{--sw:0px;--hh:54px}
  .sb{transform:translateX(-100%);width:272px!important;z-index:200;box-shadow:6px 0 32px rgba(0,0,0,.2)}
  .sb.open{transform:translateX(0)}
  .tb{left:0!important;padding:0 14px;gap:10px}
  .tbt{font-size:14px}.tbbc{display:none}
  #tbd{display:none}
  .tbbtn:last-child{display:none}
  .tbc2{font-size:9px;padding:3px 8px}
  .mc{margin-left:0!important;padding:14px}
  .ham-btn{display:flex}
  .qg{grid-template-columns:1fr!important}
  .kg{grid-template-columns:1fr 1fr!important}
  .fg2,.fg3{grid-template-columns:1fr!important}
  /* Grids con columnas fijas — todos colapsan a 1 columna */
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 3"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1fr 2"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:280px"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:240px"]{grid-template-columns:1fr!important}
  /* repeat(N,1fr) en inline style */
  [style*="repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important}
  [style*="repeat(2,1fr)"]{grid-template-columns:1fr!important}
  .pn .pb{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pn .pb::-webkit-scrollbar{height:3px}
  .pn .pb::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
  .dt{min-width:500px}
  .wb{flex-direction:column;padding:16px;gap:12px}
  .wb-logo-wrap{display:none}
  .wtt{font-size:15px}.bcart{width:100%;justify-content:center}
  .kc{padding:14px}.kv{font-size:20px}
  .mbox{width:96vw;padding:20px}
  .ls-brand{display:none}
  .ls-form-panel{width:100%;padding:40px 28px}
  /* Overrides adicionales para grids en módulos específicos */
  #v-despacho [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #v-pedidos [style*="grid-template-columns:1fr 285"]{grid-template-columns:1fr!important}
  #v-reporteria [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #v-stock [style*="grid-template-columns:1fr 310"]{grid-template-columns:1fr!important}
  /* KPIs siempre 2 col en tablet/mobile mediano */
  .kg{grid-template-columns:1fr 1fr!important}
  /* Tablas scroll */
  .pn>.pb{overflow-x:auto!important}
  /* Modal más alto en mobile */
  .mbox{max-height:92vh}
  #v-reporteria>div:first-child{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
}
@media(max-width:480px){
  .kg{grid-template-columns:1fr!important}
  .kv{font-size:17px}.mc{padding:10px}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .qg{grid-template-columns:1fr!important}
  .ls-form-panel{padding:28px 16px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
  .pn .ph{flex-direction:column;align-items:flex-start;gap:8px}
  .ph .btn{align-self:flex-start}
  .dt{min-width:420px}
  .bcart{font-size:12px;padding:9px 14px}
  .tbt{font-size:13px}
}

/* ============================================================
   Clases v10: formularios compactos + Vista Chofer + bottom sheet
   (no existían en la base v9; agregadas para fidelidad y Fase Chofer)
   ============================================================ */
.fg4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fc-sm{padding:7px 11px;font-size:12px}

/* Vista chofer en desktop — max width centrado */
@media(min-width:769px){
  #chofer-view{max-width:480px;margin:0 auto;box-shadow:var(--sh3)}
}
@media(max-width:360px){
  .mc{padding:8px}
  .kv{font-size:16px}
  .kc{padding:12px}
  .sbl{padding:14px 12px}
  .ni .nii{padding:8px 10px}
  .ls-form-title{font-size:20px}
  .ls-form-panel{padding:24px 14px}
}

/* ══ VISTA CHOFER — Mobile First ══ */
#chofer-view{
  display:none;position:fixed;inset:0;
  background:var(--bg0);z-index:9998;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.chf-header{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(135deg,var(--sb-bg),var(--sb-bg2));
  padding:14px 16px 12px;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.chf-header-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.chf-plate{
  font-family:var(--m);font-size:13px;font-weight:700;
  color:var(--aq3);letter-spacing:1px;
}
.chf-name{font-size:12px;color:rgba(203,213,225,.7);margin-top:1px}
.chf-logout{
  padding:6px 12px;background:rgba(239,68,68,.15);
  border:1px solid rgba(239,68,68,.25);border-radius:8px;
  color:var(--err);font-size:11px;font-weight:700;
  cursor:pointer;
}
.chf-progress{
  background:rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;
}
.chf-prog-bar{
  height:6px;background:rgba(255,255,255,.1);border-radius:6px;
  overflow:hidden;margin:6px 0;
}
.chf-prog-fill{
  height:100%;background:linear-gradient(90deg,var(--aq0),var(--ok));
  border-radius:6px;transition:width .4s ease;
}
.chf-prog-stats{
  display:flex;justify-content:space-between;font-size:11px;
  font-family:var(--m);
}
.chf-body{padding:12px}
/* Tarjeta de pedido del chofer */
.chf-card{
  background:var(--bg2);border:1.5px solid var(--bdr);
  border-radius:14px;margin-bottom:12px;overflow:hidden;
  box-shadow:var(--sh);transition:all .2s;
}
.chf-card.entregado{
  border-color:rgba(16,185,129,.3);
  background:rgba(16,185,129,.04);
}
.chf-card.no-entregado{
  border-color:rgba(239,68,68,.25);
  background:rgba(239,68,68,.03);
}
.chf-card.reprogramado{
  border-color:rgba(245,158,11,.25);
  background:rgba(245,158,11,.03);
}
.chf-card-header{
  padding:12px 14px 10px;
  border-bottom:1px solid var(--bdr2);
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.chf-order-num{
  font-family:var(--m);font-size:11px;font-weight:700;
  color:var(--aq0);
}
.chf-client{
  font-size:15px;font-weight:700;color:var(--tx0);
  line-height:1.3;margin-top:2px;
}
.chf-addr{
  font-size:12px;color:var(--tx2);margin-top:3px;
  line-height:1.5;
}
.chf-dist{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:4px;padding:3px 8px;border-radius:20px;
  background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.2);
  font-size:10px;font-weight:700;color:var(--aq0);
}
.chf-total{
  font-family:var(--m);font-size:16px;font-weight:800;
  color:var(--tx0);white-space:nowrap;
}
/* Botones de navegación */
.chf-nav-btns{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:10px 14px;border-bottom:1px solid var(--bdr2);
}
.chf-nav-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 8px;border-radius:10px;font-size:12px;font-weight:700;
  cursor:pointer;border:1.5px solid;text-decoration:none;
  transition:all .18s;-webkit-tap-highlight-color:transparent;
}
.chf-nav-waze{
  background:rgba(0,151,255,.08);border-color:rgba(0,151,255,.25);
  color:#0097FF;
}
.chf-nav-maps{
  background:rgba(234,67,53,.08);border-color:rgba(234,67,53,.25);
  color:#EA4335;
}
.chf-nav-btn:active{transform:scale(.97)}
.chf-eta{
  padding:6px 14px 8px;
  font-size:11px;color:var(--tx3);
  display:flex;align-items:center;gap:6px;
}
/* Botones de acción (grandes para táctil) */
.chf-actions{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.chf-btn-ent{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px;border-radius:12px;font-size:15px;font-weight:700;
  cursor:pointer;border:none;transition:all .2s;
  background:linear-gradient(135deg,var(--ok),var(--ok2));
  color:white;box-shadow:0 4px 16px rgba(16,185,129,.25);
  -webkit-tap-highlight-color:transparent;
  min-height:52px;
}
.chf-btn-ent:active{transform:scale(.98)}
.chf-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chf-btn-rep{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 8px;border-radius:12px;font-size:13px;font-weight:700;
  cursor:pointer;border:1.5px solid;transition:all .2s;
  background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3);
  color:var(--warn2);min-height:52px;
  -webkit-tap-highlight-color:transparent;
}
.chf-btn-no{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 8px;border-radius:12px;font-size:13px;font-weight:700;
  cursor:pointer;border:1.5px solid;transition:all .2s;
  background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.25);
  color:var(--err2);min-height:52px;
  -webkit-tap-highlight-color:transparent;
}
.chf-btn-rep:active,.chf-btn-no:active{transform:scale(.98)}
/* Estado terminado */
.chf-done-badge{
  padding:10px 14px;display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;
}
/* Modal de motivos — bottom sheet en mobile */
.motivo-sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:10001;
  background:var(--bg2);border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.15);
  z-index:10000;padding:16px 16px 32px;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  max-height:85vh;overflow-y:auto;
}
.motivo-sheet.open{transform:translateY(0)}
@media(min-width:769px){
  .motivo-sheet{max-width:480px;left:50%;right:auto;transform:translateY(100%) translateX(-50%)}
  .motivo-sheet.open{transform:translateY(0) translateX(-50%)}
}
.motivo-sheet-drag{
  width:40px;height:4px;background:var(--bdr);
  border-radius:4px;margin:0 auto 16px;
}
.motivo-item{
  padding:14px 16px;border:1.5px solid var(--bdr);border-radius:12px;
  margin-bottom:8px;cursor:pointer;font-size:14px;color:var(--tx0);
  display:flex;align-items:center;gap:10px;
  -webkit-tap-highlight-color:transparent;
  transition:all .15s;
}
.motivo-item:active{background:rgba(14,165,233,.06)}
.motivo-item.sel{
  border-color:var(--aq0);background:rgba(14,165,233,.08);
  color:var(--aq0);font-weight:700;
}
.chf-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);z-index:9999;
}
.chf-overlay.open{display:block}
/* Fecha reprogramar */
.reprog-panel{
  display:none;padding:14px;background:var(--bg3);
  border-radius:10px;margin-top:8px;
}
/* Safe area iPhone */
.chf-body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}


.mv.act>*:first-child{margin-top:0!important}
.pn>.pb{overflow-x:auto}

/* ─── Buscador (combo con búsqueda) ─── */
.bsc{position:relative;width:100%}
.bsc-inp{width:100%}
.bsc-inp::placeholder{color:var(--tx3,#8a99a8)}
.bsc-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:9600;background:#fff;
  border:1px solid var(--bdr,#dde7f0);border-radius:10px;box-shadow:0 10px 30px rgba(12,36,59,.16);
  max-height:264px;overflow-y:auto;padding:4px}
.bsc-item{padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--tx1,#0c243b);
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.bsc-item>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsc-item:hover,.bsc-item.act{background:var(--bg2,#eef4fa)}
.bsc-sub{color:var(--tx3,#8a99a8);font-size:11px;white-space:nowrap;flex-shrink:0}
.bsc-vacio{padding:10px;color:var(--tx3,#8a99a8);font-size:12px;text-align:center}

/* ─── Paginador de tablas ─── */
.pgn-bar{display:flex;justify-content:flex-end;padding:10px 12px 4px}
.pgn-bar .pgn-q{max-width:300px}
.pgn{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px}
.pgn-info{font-size:12px;color:var(--tx3,#8a99a8)}
.pgn-ctl{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pgn-n{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--bdr,#e2e8f0);background:#fff;
  border-radius:8px;font-size:13px;font-weight:600;color:var(--tx1,#1e293b);cursor:pointer;transition:all .15s}
.pgn-n:hover:not(:disabled):not(.act){background:var(--bg3,#f1f5f9)}
.pgn-n.act{background:var(--aq0,#0ea5e9);color:#fff;border-color:var(--aq0,#0ea5e9)}
.pgn-n:disabled{opacity:.4;cursor:default}
.pgn-e{padding:0 2px;color:var(--tx3,#94a3b8)}