:root{
  --sm-yellow:#FFB90B;--sm-yellow-soft:#FFF3CC;--sm-yellow-glow:rgba(255,185,11,.35);
  --sm-teal:#2A727C;--sm-teal-soft:rgba(42,114,124,.18);--sm-teal-dark:#1f565e;
  --sm-blue:#0A2E4C;--sm-blue-soft:#123d5f;--sm-gray:#ECEBEC;--sm-white:#fff;
  --sm-border:#D1D0D1;--sm-border-strong:#B0B0B1;
  --sm-ink:#1A1A1A;--sm-text-soft:#5c6570;
  --sm-shadow:0 10px 30px rgba(10,46,76,.10);
  --sm-shadow-lg:0 18px 48px rgba(10,46,76,.14);
  --ok-bg:#D6EFE8;--ok-text:#0A4D3A;
  --bad-bg:#FDECD0;--bad-text:#7A3800;
  --sidebar:84px;--sidebar-open:300px;
  --radius:16px;--radius-sm:12px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Montserrat,system-ui,Arial,sans-serif;background:var(--sm-gray);color:var(--sm-ink);font-weight:500;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--sm-blue);margin:0 0 12px;line-height:1.2}
h1{font-size:clamp(1.35rem,2.5vw,1.75rem);font-weight:800;letter-spacing:-.02em}
button,input,select,textarea{font:inherit}
[hidden]{display:none !important}

/* —— Carga / arranque —— */
.boot-screen{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(145deg,var(--sm-blue) 0%,var(--sm-teal-dark) 55%,var(--sm-blue-soft) 100%)}
.boot-screen::before{content:"";position:absolute;inset:0;opacity:.12;background-image:radial-gradient(circle at 20% 30%,var(--sm-yellow) 0,transparent 45%),radial-gradient(circle at 80% 70%,#fff 0,transparent 40%)}
.boot-card{position:relative;text-align:center;color:#fff;max-width:320px}
.boot-card img{width:min(280px,72vw);height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.25));margin-bottom:20px}
.boot-card p{margin:0;font-weight:600;opacity:.92;font-size:14px}
.boot-spinner{width:44px;height:44px;margin:18px auto 0;border:3px solid rgba(255,255,255,.25);border-top-color:var(--sm-yellow);border-radius:50%;animation:spin .85s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* —— Login —— */
.login-screen{position:fixed;inset:0;z-index:55;display:flex;min-height:100vh;background:var(--sm-gray)}
.login-visual{flex:1;display:none;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--sm-blue) 0%,#134a6b 40%,var(--sm-teal) 100%)}
.login-visual::after{content:"";position:absolute;inset:0;background:url("logo.png") center 42% / min(420px,70%) no-repeat;opacity:.95;filter:drop-shadow(0 12px 40px rgba(0,0,0,.2))}
.login-visual .login-tagline{position:absolute;bottom:48px;left:40px;right:40px;color:#fff;z-index:1}
.login-visual .login-tagline h2{margin:0 0 8px;font-size:1.5rem;font-weight:800;color:#fff}
.login-visual .login-tagline p{margin:0;opacity:.88;font-size:14px;max-width:360px;line-height:1.5}
.login-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.login-form{width:100%;max-width:400px;background:#fff;border-radius:22px;padding:28px 26px 26px;box-shadow:var(--sm-shadow-lg);border:1px solid rgba(255,255,255,.8)}
.login-form .login-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.login-form .login-brand img{width:52px;height:52px;object-fit:contain;border-radius:14px;background:var(--sm-gray);padding:4px}
.login-form .login-brand div strong{display:block;font-size:1.05rem;color:var(--sm-blue);font-weight:800}
.login-form .login-brand div span{font-size:11px;color:var(--sm-text-soft);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.login-form label{display:block;font-size:12px;font-weight:700;color:var(--sm-blue);margin:14px 0 6px}
.login-form input{width:100%;min-width:0;margin:0}
.login-form .btn-login{margin-top:20px;width:100%;padding:12px 16px;font-size:15px}
.login-form .login-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--sm-border);font-size:11px;color:var(--sm-text-soft);text-align:center}
.login-error{color:#b42318;font-size:13px;font-weight:600;margin:10px 0 0;min-height:1.2em}
@media(min-width:960px){.login-visual{display:block;min-width:42%}}

/* —— Shell —— */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,var(--sm-blue) 0%,#08243d 100%);color:#fff;padding:16px 12px;z-index:20;overflow:hidden;transition:width .22s ease;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(10,46,76,.15)}
.sidebar:hover{width:var(--sidebar-open)}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;white-space:nowrap;margin-bottom:20px;padding:6px 4px}
.brand img{width:48px;height:48px;background:#fff;border-radius:14px;object-fit:contain;padding:3px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.brand-text{opacity:0;transition:opacity .15s}
.brand-text strong{display:block;font-size:14px;line-height:1.2}
.brand-text small{display:block;font-size:10px;font-weight:600;opacity:.75;margin-top:2px;letter-spacing:.04em}
.sidebar:hover .brand-text{opacity:1}
.nav{flex:1;display:flex;flex-direction:column;gap:4px}
.nav button{display:flex;gap:12px;align-items:center;width:100%;border:0;background:transparent;color:rgba(255,255,255,.88);padding:11px 10px;border-radius:var(--radius-sm);cursor:pointer;font-weight:700;text-align:left;white-space:nowrap;font-size:13px;position:relative;transition:background .15s,color .15s}
.nav button .nav-ico{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.08)}
.nav button .nav-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav button .nav-label{opacity:0;transition:opacity .15s}
.sidebar:hover .nav-label{opacity:1}
.nav button.active,.nav button:hover{background:rgba(255,185,11,.16);color:#fff}
.nav button.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--sm-yellow)}
.nav button#logout{margin-top:auto;color:rgba(255,255,255,.65)}
.nav button#logout:hover{color:#fff;background:rgba(255,255,255,.08)}
.sidebar-foot{opacity:0;font-size:10px;color:rgba(255,255,255,.45);padding:8px 10px;white-space:nowrap}
.sidebar:hover .sidebar-foot{opacity:1}

.main{margin-left:var(--sidebar);padding:24px 28px 48px;min-height:100vh;background:linear-gradient(180deg,#f4f5f6 0%,var(--sm-gray) 120px)}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.top-lead{flex:1;min-width:200px}
.top-lead .page-eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--sm-teal);margin-bottom:6px}
.top-lead .muted{margin:6px 0 0;max-width:52ch;line-height:1.45}
.user-chip{display:flex;align-items:center;gap:10px;background:#fff;padding:8px 14px 8px 10px;border-radius:999px;box-shadow:var(--sm-shadow);border:1px solid var(--sm-border)}
.user-chip .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--sm-teal),var(--sm-blue));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.user-chip .user-meta{font-size:12px;line-height:1.3}
.user-chip .user-meta b{display:block;color:var(--sm-blue);font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .user-meta span{color:var(--sm-text-soft);font-size:11px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.card{background:#fff;border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--sm-shadow);border:1px solid rgba(255,255,255,.6);border-top:5px solid var(--sm-yellow);position:relative;overflow:hidden}
.card::after{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:var(--sm-yellow-soft);opacity:.5}
.card.warn{border-top-color:#C2410C}
.card b{display:block;font-size:1.65rem;color:var(--sm-blue);font-weight:800;position:relative;z-index:1}
.card span{color:var(--sm-text-soft);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;position:relative;z-index:1}

.panel{background:#fff;border-radius:var(--radius);padding:18px 16px;box-shadow:var(--sm-shadow);border:1px solid rgba(209,208,209,.6)}
.panel h3{font-size:1rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--sm-yellow-soft)}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--sm-border);vertical-align:top}
th{color:var(--sm-blue);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;background:linear-gradient(180deg,#fafbfc,#f3f4f5)}
tbody tr:hover td{background:#f8fafb}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.03em}
.ok{background:var(--ok-bg);color:var(--ok-text)}
.bad{background:var(--bad-bg);color:var(--bad-text)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:flex-end}
.lines{width:100%;border-collapse:collapse;margin:8px 0 12px}
.lines input,.lines select{min-width:0;width:100%;padding:8px}
.order-total{font-weight:800;color:var(--sm-blue);margin:0 0 12px;font-size:1.05rem}
input,select,textarea{border:1.5px solid var(--sm-border-strong);border-radius:var(--radius-sm);padding:10px 12px;color:var(--sm-blue);font-weight:600;min-width:160px;background:#fff;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sm-teal);box-shadow:0 0 0 3px var(--sm-teal-soft)}
textarea{min-width:280px}
.btn{border:0;background:linear-gradient(180deg,var(--sm-teal) 0%,var(--sm-teal-dark) 100%);color:#fff;border-radius:var(--radius-sm);padding:10px 16px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(42,114,124,.25);transition:transform .12s,box-shadow .12s,filter .12s}
.btn:hover{filter:brightness(1.05);box-shadow:0 6px 16px rgba(10,46,76,.2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.alt{background:#fff;color:var(--sm-blue);border:1.5px solid var(--sm-border-strong);box-shadow:none}
.btn.alt:hover{background:#f8f9fa}
.flecha{width:34px;height:34px;border:1.5px solid var(--sm-border-strong);background:#fff;color:var(--sm-blue);border-radius:10px;font-weight:800;cursor:pointer;transition:background .12s,border-color .12s}
.flecha:hover{background:var(--sm-yellow-soft);border-color:var(--sm-yellow)}
tr.tipo td{background:#f7f9fa;color:#334}
tr.familia td{font-weight:700;color:var(--sm-blue)}

.rastreo{position:fixed;inset:0;z-index:40;background:rgba(10,46,76,.5);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow:auto}
.rastreo-card{width:min(520px,100%);max-height:none;background:#fff;border-radius:20px;border-top:6px solid var(--sm-yellow);box-shadow:var(--sm-shadow-lg);padding:22px;overflow:hidden}
.rastreo-card h3,.rastreo-card p,.rastreo-desc{margin:4px 0;overflow-wrap:anywhere}
.rastreo-envio{margin-top:16px;padding-top:12px;border-top:1px solid var(--sm-border);min-width:0}
.rastreo-envio header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rastreo-linea{list-style:none;margin:0;padding:0 0 0 2px;overflow:hidden}
.rastreo-linea li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;position:relative;padding-bottom:16px}
.rastreo-linea li p{margin:2px 0 0}
.rastreo-fecha{display:block;color:var(--sm-text-soft);font-size:12px;margin-bottom:2px}
.punto{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--sm-teal);display:block;position:relative;z-index:1}
.rastreo-linea li:not(:last-child)::before{content:"";position:absolute;left:8px;top:16px;bottom:0;width:2px;background:var(--sm-teal)}
.rastreo-linea li.actual .punto{background:var(--sm-yellow);border-color:var(--sm-blue)}
.barra{display:grid;grid-template-columns:180px 1fr 48px;gap:10px;align-items:center;margin:8px 0}
.pista{height:14px;background:#e7eef2;border-radius:8px;overflow:hidden}
.pista div{height:100%;background:linear-gradient(90deg,var(--sm-teal),#3d9aaa)}
.muted{color:var(--sm-text-soft);font-size:13px}
#lectura{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--sm-blue)}
.bar{width:160px;height:8px;border-radius:99px;background:var(--sm-border);overflow:hidden}
.bar-fill{height:100%;width:40%;background:var(--sm-teal);animation:avance 1s ease-in-out infinite}
@keyframes avance{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.lookup{position:relative;display:flex;align-items:center;min-width:280px}
.lookup-text{flex:1;background:var(--sm-yellow-soft);border-radius:10px 0 0 10px;min-width:0;border-right:0}
.lookup-open{border:0;background:var(--sm-teal);color:#fff;border-radius:0 10px 10px 0;padding:10px 14px;cursor:pointer;font-weight:800}
.lookup-pop{position:absolute;top:46px;left:0;z-index:30;width:520px;max-width:90vw;background:#fff;border:1px solid var(--sm-border-strong);box-shadow:var(--sm-shadow-lg);border-radius:var(--radius-sm);padding:10px}
.lookup-head{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px}
.lookup-head input{width:100%;min-width:0;background:var(--sm-yellow-soft)}
.lookup-list{max-height:240px;overflow:auto}
.lookup-list tr{cursor:pointer}
.lookup-list tr:hover{background:#e8f4f5}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;padding:4px;background:#eef0f2;border-radius:var(--radius-sm);width:fit-content;max-width:100%}
.tabs button{border:0;background:transparent;padding:10px 14px;border-radius:10px;font-weight:700;font-size:12px;color:var(--sm-text-soft);cursor:pointer}
.tabs button.active{background:#fff;color:var(--sm-blue);box-shadow:0 2px 8px rgba(10,46,76,.08)}

.app-footer{margin-top:28px;padding-top:16px;border-top:1px solid var(--sm-border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--sm-text-soft);font-weight:600}
.app-footer img{height:22px;opacity:.85;vertical-align:middle;margin-right:6px}

@media(max-width:900px){
  .kpis{grid-template-columns:1fr 1fr}
  .sidebar{width:var(--sidebar)}
  .main{margin-left:var(--sidebar);padding:16px}
  .user-chip{display:none}
}