/* ================================================================
   NORTHVEL CONTROL TOWER — styles.css v3
   Referencia visual exacta: sidebar blanca, ilustraciones, tabla limpia
   ================================================================ */

:root {
  --brand:      #1A56DB;
  --brand-dk:   #1342B5;
  --brand-lgt:  #EBF2FF;
  --brand-mid:  #DBEAFE;
  --cyan:       #06B6D4;

  --bg:         #EEF4FB;
  --surface:    #FFFFFF;
  --border:     #E2EAF4;
  --border-dk:  #C7D9EE;

  --text-h:     #0F1D35;
  --text-b:     #2E4060;
  --text-m:     #5B7399;
  --text-l:     #8FA3BF;

  /* Sidebar — blanca */
  --sb-bg:      #FFFFFF;
  --sb-border:  #E8EFF8;
  --sb-text:    #5B7399;
  --sb-act-bg:  #EBF2FF;
  --sb-act-txt: #1A56DB;
  --sb-w:       220px;

  /* Status */
  --green:      #059669;
  --green-lgt:  #D1FAE5;
  --green-txt:  #064E3B;
  --amber:      #D97706;
  --amber-lgt:  #FEF3C7;
  --amber-txt:  #78350F;
  --red:        #DC2626;
  --red-lgt:    #FEE2E2;
  --red-txt:    #7F1D1D;
  --purple:     #7C3AED;
  --purple-lgt: #EDE9FE;
  --purple-txt: #3B0764;

  --hdr-h:   68px;
  --r-lg:    14px;
  --r-md:    10px;
  --r-sm:    8px;
  --r-pill:  999px;

  --sh-xs: 0 1px 3px rgba(15,29,53,0.05),0 1px 2px rgba(15,29,53,0.04);
  --sh-sm: 0 2px 8px rgba(15,29,53,0.07),0 1px 3px rgba(15,29,53,0.04);
  --sh-md: 0 4px 16px rgba(15,29,53,0.09),0 2px 6px rgba(15,29,53,0.05);
  --sh-lg: 0 8px 28px rgba(15,29,53,0.12),0 3px 8px rgba(15,29,53,0.06);

  --ease: cubic-bezier(0.4,0,0.2,1);
  --t: 0.15s;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-text-size-adjust:100%; }
body {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text-b);
  display:flex; min-height:100vh; overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; font-size:inherit; color:inherit; }
input,select,textarea { font-family:inherit; font-size:inherit; }
input:focus,select:focus,textarea:focus { outline:none; }

/* ══ SIDEBAR (BLANCA) ══════════════════════════════════════════ */
.sidebar {
  width:var(--sb-w); min-height:100vh;
  background:var(--sb-bg);
  border-right:1px solid var(--sb-border);
  position:fixed; top:0; left:0; z-index:300;
  display:flex; flex-direction:column;
  box-shadow:2px 0 12px rgba(15,29,53,0.05);
  transition:transform var(--t) var(--ease);
}
.sb-brand {
  display:flex; align-items:center; gap:10px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--sb-border);
}
.sb-logo-box {
  width:36px; height:36px; border-radius:9px;
  background:linear-gradient(135deg,#1A56DB,#06B6D4);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sb-logo-box svg { width:18px; height:18px; }
.sb-brand-name { font-size:0.82rem; font-weight:800; color:var(--text-h); letter-spacing:0.06em; }
.sb-brand-sub  { font-size:0.58rem; font-weight:600; color:var(--brand); letter-spacing:0.1em; margin-top:1px; }

.sb-nav { padding:10px 10px; display:flex; flex-direction:column; gap:1px; flex:1; }
.sb-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-sm);
  color:var(--sb-text); font-size:0.83rem; font-weight:500;
  transition:all var(--t) var(--ease); position:relative;
  text-align:left; width:100%;
}
.sb-ico { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sb-ico svg { width:17px; height:17px; stroke-width:1.6; }
.sb-item:hover { background:#F4F8FD; color:var(--text-h); }
.sb-item.active {
  background:var(--sb-act-bg); color:var(--sb-act-txt);
  font-weight:600;
}
.sb-item.active::before {
  content:''; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; background:var(--brand); border-radius:0 3px 3px 0;
}
.sb-item.active .sb-ico { color:var(--brand); }

.sb-foot {
  padding:14px 12px;
  border-top:1px solid var(--sb-border);
}
.sb-client {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:#F8FAFD;
}
.sb-ava {
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,var(--brand),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:800; color:white; flex-shrink:0;
}
.sb-cname { display:block; font-size:0.76rem; font-weight:700; color:var(--text-h); }
.sb-crole { display:block; font-size:0.65rem; color:var(--text-l); }
.sb-chev  { margin-left:auto; color:var(--text-l); }
.sb-chev svg { width:13px; height:13px; }

/* ══ APP SHELL ══════════════════════════════════════════════════ */
.app-shell { margin-left:var(--sb-w); width:calc(100% - var(--sb-w)); display:flex; flex-direction:column; min-height:100vh; }

/* ══ HEADER ════════════════════════════════════════════════════ */
.app-hdr {
  height:var(--hdr-h); background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 28px; gap:16px;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--sh-xs); overflow:hidden;
}
.hdr-deco {
  position:absolute; right:0; top:0; bottom:0; width:40%;
  pointer-events:none; opacity:0.5;
  background-image:radial-gradient(circle,rgba(59,130,246,0.07) 1px,transparent 1px);
  background-size:22px 22px;
}
.hdr-menu { display:none; padding:6px; border-radius:var(--r-sm); color:var(--text-m); position:relative; z-index:1; }
.hdr-menu:hover { background:var(--bg); }
.hdr-titles { flex:1; position:relative; z-index:1; }
.hdr-h { font-size:1.35rem; font-weight:800; color:var(--text-h); line-height:1.1; }
.hdr-p { font-size:0.76rem; color:var(--text-m); margin-top:2px; }
.hdr-right { display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.hdr-bell {
  position:relative; width:38px; height:38px;
  border-radius:var(--r-sm); background:var(--bg);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-m); transition:all var(--t);
}
.hdr-bell:hover { background:var(--brand-mid); color:var(--brand); }
.bell-badge {
  position:absolute; top:4px; right:4px;
  width:15px; height:15px; border-radius:50%;
  background:var(--brand); color:white;
  font-size:0.56rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid white;
}
.hdr-profile {
  display:flex; align-items:center; gap:9px;
  padding:6px 10px 6px 6px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); cursor:pointer;
  transition:all var(--t);
}
.hdr-profile:hover { border-color:var(--border-dk); }
.hdr-ava {
  width:30px; height:30px; border-radius:7px;
  background:linear-gradient(135deg,var(--brand),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-size:0.58rem; font-weight:800; color:white;
}
.hdr-pname { font-size:0.76rem; font-weight:700; color:var(--text-h); }
.hdr-prole { font-size:0.62rem; color:var(--text-l); }
.hdr-chev svg { width:13px; height:13px; color:var(--text-l); }

/* ══ CONTENT ═══════════════════════════════════════════════════ */
.app-content { flex:1; overflow-y:visible; }
.page-inner  { max-width:1220px; margin:0 auto; padding:26px 28px 60px; }

.screen { display:none; }
.screen.active { display:block; animation:pgIn 0.18s var(--ease); }
@keyframes pgIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

/* ══ KPI CARDS ══════════════════════════════════════════════════ */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.kpi-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px 18px 14px;
  box-shadow:var(--sh-xs); cursor:pointer;
  transition:all var(--t) var(--ease); display:flex; flex-direction:column; gap:4px;
}
.kpi-card:hover { box-shadow:var(--sh-md); transform:translateY(-2px); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.kpi-icon {
  width:44px; height:44px; border-radius:50%;
  background:var(--brand-lgt);
  display:flex; align-items:center; justify-content:center;
}
.kpi-icon svg { width:22px; height:22px; color:var(--brand); }
.kpi-icon.green { background:var(--green-lgt); } .kpi-icon.green svg { color:var(--green); }
.kpi-val { font-size:2rem; font-weight:800; color:var(--text-h); line-height:1; }
.kpi-lbl { font-size:0.75rem; color:var(--text-m); font-weight:500; }
.kpi-link { font-size:0.72rem; font-weight:700; color:var(--brand); margin-top:6px; display:inline-flex; align-items:center; gap:3px; }

/* ══ CARDS ══════════════════════════════════════════════════════ */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-xs);
}
.card-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px; border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:10px;
}
.card-ttl { font-size:0.9rem; font-weight:700; color:var(--text-h); }
.mt-16 { margin-top:16px; }
.mt-20 { margin-top:20px; }
.mt-14 { margin-top:14px; }

/* ══ TWO COLUMN LAYOUTS ════════════════════════════════════════ */
.layout-main-side { display:grid; grid-template-columns:1fr 280px; gap:18px; }
.layout-main-side-lg { display:grid; grid-template-columns:1fr 300px; gap:18px; }
.layout-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ══ HOME ═══════════════════════════════════════════════════════ */
.welcome-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.welcome-h { font-size:1.65rem; font-weight:800; color:var(--text-h); }
.welcome-p { font-size:0.82rem; color:var(--text-m); margin-top:4px; }
.welcome-date { font-size:0.72rem; color:var(--text-l); }

/* Featured order card */
.featured-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 24px;
  box-shadow:var(--sh-xs);
}
.fc-eyebrow { font-size:0.65rem; font-weight:600; color:var(--text-l); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.fc-eyebrow svg { width:13px; height:13px; color:var(--text-l); }
.fc-id { font-size:1.15rem; font-weight:800; color:var(--text-h); margin-bottom:14px; }
.fc-status-row { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.fc-status-ico {
  width:42px; height:42px; border-radius:50%;
  background:var(--brand-lgt); display:flex; align-items:center; justify-content:center;
}
.fc-status-ico svg { width:22px; height:22px; color:var(--brand); }
.fc-status-txt { font-size:1rem; font-weight:700; color:var(--brand); }
.fc-meta { display:grid; grid-template-columns:repeat(5,1fr); gap:12px 16px; margin-bottom:18px; }
.fc-meta-item label { font-size:0.62rem; color:var(--text-l); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; display:block; margin-bottom:3px; }
.fc-meta-item span  { font-size:0.8rem; font-weight:600; color:var(--text-h); }
.fc-adv { display:flex; align-items:center; gap:7px; }
.fc-adv-ava { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--cyan)); display:flex; align-items:center; justify-content:center; font-size:0.55rem; font-weight:800; color:white; flex-shrink:0; }

/* Timeline horizontal */
.tl-h-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 24px;
  box-shadow:var(--sh-xs); overflow-x:auto;
}
.tl-h { display:flex; align-items:flex-start; min-width:560px; }
.tl-h-step { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
.tl-h-step:not(:last-child)::after {
  content:''; position:absolute; top:15px; left:50%; width:100%; height:2px; z-index:0;
}
.tl-h-step.done:not(:last-child)::after { background:var(--green); }
.tl-h-step.curr:not(:last-child)::after { background:linear-gradient(90deg,var(--brand),var(--border-dk)); }
.tl-h-step.pend:not(:last-child)::after { background:var(--border); }
.tl-node {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  z-index:1; margin-bottom:8px; flex-shrink:0; position:relative;
}
.tl-node svg { width:14px; height:14px; }
.nd-done { background:var(--green); color:white; }
.nd-curr { background:var(--brand); color:white; box-shadow:0 0 0 5px rgba(26,86,219,0.15); animation:pulse 2s ease-in-out infinite; }
.nd-pend { background:var(--bg); border:2px solid var(--border-dk); color:var(--text-l); }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 5px rgba(26,86,219,0.15)} 50%{box-shadow:0 0 0 8px rgba(26,86,219,0.07)} }
.tl-lbl { font-size:0.68rem; font-weight:600; color:var(--text-b); text-align:center; max-width:90px; line-height:1.3; }
.tl-lbl.curr { color:var(--brand); font-weight:700; }
.tl-lbl.pend { color:var(--text-l); font-weight:400; }
.tl-date { font-size:0.6rem; color:var(--text-l); text-align:center; margin-top:3px; }
.tl-date.curr { color:var(--brand); font-weight:600; }

/* Side widget boxes */
.side-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-xs);
}
.side-box + .side-box { margin-top:14px; }
.side-box-ttl { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-l); margin-bottom:12px; }

/* Illustration container */
.illus-box { background:var(--bg); border-radius:var(--r-md); padding:16px; text-align:center; margin-bottom:12px; overflow:hidden; }
.illus-svg { width:100%; max-width:180px; }

/* Route mini */
.route-mini { background:var(--bg); border-radius:var(--r-sm); padding:10px 12px; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.route-pt   { font-size:0.8rem; font-weight:700; color:var(--text-h); }
.route-arr  { color:var(--brand); font-size:0.9rem; }
.route-stats { display:flex; justify-content:space-between; }
.route-stat label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-l); display:block; }
.route-stat span  { font-size:0.78rem; font-weight:700; color:var(--brand); }

/* History feed */
.hist-row { display:flex; gap:16px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--bg); }
.hist-row:last-child { border-bottom:none; }
.hist-dot  { width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:5px; }
.hist-date { font-size:0.72rem; color:var(--text-m); white-space:nowrap; min-width:80px; }
.hist-ev   { font-size:0.78rem; font-weight:700; color:var(--text-h); }
.hist-desc { font-size:0.73rem; color:var(--text-m); margin-top:1px; }

/* Quick actions bar */
.qa-row { display:flex; gap:8px; flex-wrap:wrap; }
.qa-btn-wa    { background:#22C55E; color:white; display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:var(--r-sm); font-size:0.82rem; font-weight:700; transition:opacity var(--t); }
.qa-btn-wa:hover { opacity:0.88; }
.qa-btn-out { background:var(--surface); color:var(--text-b); border:1.5px solid var(--border); display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:var(--r-sm); font-size:0.82rem; font-weight:600; transition:all var(--t); }
.qa-btn-out:hover { border-color:var(--brand); color:var(--brand); }

/* Doc mini list */
.doc-mini-item { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--bg); }
.doc-mini-item:last-of-type { border-bottom:none; }
.doc-ico-badge { width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:0.58rem; font-weight:800; flex-shrink:0; }
.dib-pdf  { background:#FEE2E2; color:#DC2626; }
.dib-img  { background:#D1FAE5; color:#059669; }
.dib-xls  { background:#D1FAE5; color:#059669; }
.dib-other{ background:var(--brand-lgt); color:var(--brand); }
.doc-mini-name { font-size:0.77rem; color:var(--text-b); flex:1; }
.doc-mini-link { font-size:0.7rem; color:var(--brand); font-weight:600; }

/* Help quick links */
.help-quick-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:16px 18px;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--sh-xs); cursor:pointer;
  transition:all var(--t); justify-content:space-between;
}
.help-quick-card:hover { box-shadow:var(--sh-md); border-color:var(--border-dk); }
.hqc-left { display:flex; align-items:center; gap:14px; }
.hqc-ico {
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hqc-ico svg { width:24px; height:24px; }
.hqi-wa    { background:#DCFCE7; color:#16A34A; }
.hqi-call  { background:var(--brand-lgt); color:var(--brand); }
.hqi-alert { background:#F3F0FF; color:var(--purple); }
.hqc-name  { font-size:0.92rem; font-weight:700; color:var(--text-h); }
.hqc-desc  { font-size:0.75rem; color:var(--text-m); margin-top:2px; }
.hqc-arr   { color:var(--brand); } .hqc-arr svg { width:16px; height:16px; }

/* Advisor card home */
.advisor-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px 20px;
  box-shadow:var(--sh-xs);
}
.adv-photo { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--cyan)); display:flex; align-items:center; justify-content:center; font-size:0.88rem; font-weight:800; color:white; margin-bottom:10px; position:relative; }
.adv-online { position:absolute; bottom:1px; right:1px; width:12px; height:12px; border-radius:50%; background:var(--green); border:2px solid white; }
.adv-name { font-size:1rem; font-weight:800; color:var(--text-h); }
.adv-role { font-size:0.75rem; color:var(--brand); font-weight:600; margin-bottom:6px; }
.adv-bio  { font-size:0.75rem; color:var(--text-m); line-height:1.55; margin-bottom:14px; }
.adv-info-row { display:flex; align-items:center; gap:8px; font-size:0.76rem; color:var(--text-m); margin-bottom:6px; }
.adv-info-row svg { width:14px; height:14px; color:var(--text-l); flex-shrink:0; }

/* ══ ORDERS ══════════════════════════════════════════════════════ */
.orders-wrap { display:grid; grid-template-columns:1fr 280px; gap:18px; }

.srch-full {
  width:100%; padding:10px 12px 10px 40px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); color:var(--text-b); font-size:0.85rem;
  transition:all var(--t); margin-bottom:12px;
}
.srch-full:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(26,86,219,0.08); }
.srch-full::placeholder { color:var(--text-l); }
.srch-wrap { position:relative; }
.srch-ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-l); pointer-events:none; }

/* Filters row (dropdowns style) */
.filter-row { display:flex; gap:10px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid var(--border); }
.filter-dd {
  display:flex; align-items:center; gap:4px;
  padding:7px 12px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); font-size:0.78rem; font-weight:600; color:var(--text-b);
  background:var(--surface); cursor:pointer; transition:all var(--t);
}
.filter-dd:hover { border-color:var(--brand); color:var(--brand); }
.filter-dd.on { border-color:var(--brand); background:var(--brand-lgt); color:var(--brand); }
.filter-dd svg { width:13px; height:13px; color:var(--text-l); }
.filter-clear { font-size:0.75rem; font-weight:600; color:var(--brand); display:flex; align-items:center; gap:4px; margin-left:auto; }
.filter-clear svg { width:13px; height:13px; }

/* Table */
.tbl-head {
  display:grid; align-items:center;
  padding:10px 20px; background:var(--bg);
  border-bottom:1px solid var(--border);
  font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text-l);
  grid-template-columns:var(--tbl-cols);
}
.tbl-body {}
.tbl-row {
  display:grid; align-items:center; padding:14px 20px;
  border-bottom:1px solid var(--bg);
  grid-template-columns:var(--tbl-cols);
  transition:background var(--t); cursor:pointer; gap:8px;
}
.tbl-row:last-child { border-bottom:none; }
.tbl-row:hover { background:#F8FAFD; }
.tbl-orders { --tbl-cols:140px 1fr 1fr 140px 140px 80px; }
.t-id    { font-size:0.85rem; font-weight:700; color:var(--text-h); }
.t-sub   { font-size:0.7rem; color:var(--text-l); margin-top:1px; }
.t-dest  { font-size:0.8rem; color:var(--text-b); }
.t-svc   { font-size:0.78rem; color:var(--text-m); }
.t-eta   { font-size:0.82rem; font-weight:700; color:var(--text-h); }
.t-upd   { font-size:0.72rem; color:var(--text-m); }
.t-arr   { text-align:right; }
.t-arr svg { width:16px; height:16px; color:var(--text-l); }

/* Table pagination */
.tbl-foot { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--border); font-size:0.75rem; color:var(--text-m); flex-wrap:wrap; gap:8px; }
.pg-btns { display:flex; align-items:center; gap:6px; }
.pg-btn { width:28px; height:28px; border-radius:var(--r-xs); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700; color:var(--text-m); transition:all var(--t); }
.pg-btn.curr { background:var(--brand); border-color:var(--brand); color:white; }
.pg-btn:hover:not(.curr) { border-color:var(--brand); color:var(--brand); }
.pg-btn svg { width:13px; height:13px; }
.pg-per { display:flex; align-items:center; gap:6px; }

/* Next arrival side */
.na-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px;
  box-shadow:var(--sh-xs);
}
.na-ttl { font-size:0.8rem; font-weight:700; color:var(--text-h); margin-bottom:10px; }
.na-time { font-size:1.2rem; font-weight:800; color:var(--text-h); display:flex; align-items:center; gap:8px; }
.na-sub  { font-size:0.75rem; color:var(--text-m); margin-top:4px; }
.na-sep  { height:1px; background:var(--border); margin:12px 0; }
.na-act-ttl { font-size:0.75rem; font-weight:700; color:var(--text-h); margin-bottom:6px; }
.na-act-desc { font-size:0.72rem; color:var(--text-m); line-height:1.5; margin-bottom:10px; }

/* ══ TRACKING ═══════════════════════════════════════════════════ */
.trk-sel-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:12px 18px;
  display:flex; align-items:center; gap:12px;
  box-shadow:var(--sh-xs); margin-bottom:16px;
}
.trk-sel-ico { width:32px; height:32px; border-radius:var(--r-sm); background:var(--brand-lgt); display:flex; align-items:center; justify-content:center; }
.trk-sel-ico svg { width:16px; height:16px; color:var(--brand); }
.trk-select {
  flex:1; border:none; background:transparent;
  font-size:0.92rem; font-weight:700; color:var(--text-h);
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238FA3BF'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; background-size:16px;
  padding-right:24px;
}

.trk-main-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:24px;
  box-shadow:var(--sh-xs); margin-bottom:16px;
}
.trk-eyebrow { font-size:0.65rem; font-weight:600; color:var(--text-l); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.trk-id { font-size:1.15rem; font-weight:800; color:var(--text-h); margin-bottom:14px; }
.trk-status-row { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.trk-sico { width:42px; height:42px; border-radius:50%; background:var(--brand-lgt); display:flex; align-items:center; justify-content:center; }
.trk-sico svg { width:22px; height:22px; color:var(--brand); }
.trk-stxt { font-size:1rem; font-weight:700; color:var(--brand); }
.trk-meta { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:0; }
.trk-meta-item label { font-size:0.6rem; color:var(--text-l); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:3px; }
.trk-meta-item span  { font-size:0.78rem; font-weight:600; color:var(--text-h); }

/* Route card in tracking */
.trk-route-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--sh-xs);
}
.trc-ttl { font-size:0.85rem; font-weight:700; color:var(--text-h); margin-bottom:14px; }
.trc-map { background:var(--bg); border-radius:var(--r-md); padding:16px 20px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.trc-pt { }
.trc-pt-name { font-size:0.85rem; font-weight:800; color:var(--text-h); }
.trc-pt-sub  { font-size:0.7rem; color:var(--text-m); }
.trc-path { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; }
.trc-dashes { border-top:2px dashed var(--border-dk); flex:1; }
.trc-ship-ico { color:var(--brand); } .trc-ship-ico svg { width:24px; height:24px; }
.trc-stats { display:flex; gap:20px; }
.trc-stat { display:flex; align-items:center; gap:6px; font-size:0.78rem; color:var(--text-m); }
.trc-stat svg { width:15px; height:15px; color:var(--brand); }
.trc-stat-val { font-weight:700; color:var(--brand); }

/* Updates feed */
.upd-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--bg); }
.upd-item:last-child { border-bottom:none; }
.upd-ico { width:32px; height:32px; border-radius:50%; background:var(--brand-lgt); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.upd-ico svg { width:15px; height:15px; color:var(--brand); }
.upd-ico.gr { background:var(--green-lgt); } .upd-ico.gr svg { color:var(--green); }
.upd-ico.am { background:var(--amber-lgt); } .upd-ico.am svg { color:var(--amber); }
.upd-date { font-size:0.7rem; color:var(--text-l); margin-bottom:1px; }
.upd-ev   { font-size:0.8rem; font-weight:700; color:var(--text-h); }
.upd-desc { font-size:0.73rem; color:var(--text-m); margin-top:2px; line-height:1.5; }

/* ══ DOCUMENTS ══════════════════════════════════════════════════ */
.docs-layout { display:grid; grid-template-columns:1fr 280px; gap:18px; }
.docs-filter-pills { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.dpill {
  padding:6px 16px; border-radius:var(--r-pill);
  font-size:0.78rem; font-weight:600;
  border:1.5px solid var(--border); color:var(--text-m);
  background:var(--surface); cursor:pointer; transition:all var(--t);
}
.dpill:hover { border-color:var(--brand); color:var(--brand); }
.dpill.on { background:var(--brand); border-color:var(--brand); color:white; }

/* Featured order in docs */
.doc-order-hero {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:20px 24px;
  margin-bottom:20px; box-shadow:var(--sh-xs);
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
}
.doh-left {}
.doh-eyebrow { font-size:0.63rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-l); margin-bottom:4px; }
.doh-id { font-size:1.1rem; font-weight:800; color:var(--text-h); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.doh-meta { display:flex; gap:28px; flex-wrap:wrap; }
.doh-meta-item label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-l); font-weight:600; display:block; margin-bottom:2px; }
.doh-meta-item span  { font-size:0.78rem; font-weight:600; color:var(--text-h); }
.doh-right { flex-shrink:0; }
.doh-note  { font-size:0.73rem; color:var(--text-m); margin-top:12px; }
.doh-link  { font-size:0.75rem; color:var(--brand); font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.doh-link svg { width:13px; height:13px; }

/* Docs table */
.docs-tbl { }
.docs-tbl-head { --tbl-cols:2.5fr 1fr 140px 120px 90px 140px; }
.docs-tbl-row  { --tbl-cols:2.5fr 1fr 140px 120px 90px 140px; }
.dt-name { font-size:0.83rem; font-weight:700; color:var(--text-h); }
.dt-file { font-size:0.68rem; color:var(--text-l); font-family:'DM Mono',monospace; margin-top:1px; }
.dt-chip { font-size:0.65rem; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); }
.dtc-fac { background:#FEE2E2; color:#DC2626; }
.dtc-gui { background:#DBEAFE; color:#1D4ED8; }
.dtc-evi { background:var(--green-lgt); color:var(--green-txt); }
.dtc-oth { background:var(--bg); color:var(--text-m); }
.dt-ord  { font-size:0.75rem; font-weight:700; color:var(--brand); }
.dt-date { font-size:0.73rem; color:var(--text-m); }
.dt-sta  { font-size:0.72rem; font-weight:700; color:var(--green); display:flex; align-items:center; gap:4px; }
.dt-sta svg { width:12px; height:12px; }
.dt-acts { display:flex; gap:6px; }

/* Docs right panel */
.docs-recent-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:16px 18px;
  box-shadow:var(--sh-xs);
}
.drc-ttl { font-size:0.82rem; font-weight:700; color:var(--text-h); margin-bottom:12px; }
.drc-item { display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-bottom:1px solid var(--bg); }
.drc-item:last-of-type { border-bottom:none; }
.drc-ico { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:0.56rem; font-weight:800; flex-shrink:0; }
.drc-name { font-size:0.75rem; font-weight:600; color:var(--text-h); }
.drc-order{ font-size:0.68rem; color:var(--text-l); }
.drc-date { font-size:0.67rem; color:var(--text-l); white-space:nowrap; margin-left:auto; padding-top:1px; }
.drc-link { font-size:0.72rem; color:var(--brand); font-weight:700; margin-top:10px; display:block; }

/* Trust mini */
.trust-mini { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:#F0F7FF; border:1px solid #BFDBFE; border-radius:var(--r-md); }
.trust-mini svg { width:20px; height:20px; color:var(--brand); flex-shrink:0; margin-top:1px; }
.trust-mini strong { font-size:0.78rem; color:var(--text-h); display:block; margin-bottom:2px; }
.trust-mini p { font-size:0.72rem; color:var(--text-m); line-height:1.5; }

/* ══ HELP ════════════════════════════════════════════════════════ */
.help-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.help-2col   { display:grid; grid-template-columns:1fr 300px; gap:18px; }
.help-left-col { display:flex; flex-direction:column; gap:16px; }

/* Channels list */
.channel-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--bg); }
.channel-item:last-child { border-bottom:none; }
.ch-ico { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ch-ico svg { width:16px; height:16px; }
.chi-wa { background:#DCFCE7; color:#16A34A; }
.chi-ph { background:var(--brand-lgt); color:var(--brand); }
.chi-em { background:var(--amber-lgt); color:var(--amber); }
.chi-al { background:#F3F0FF; color:var(--purple); }
.ch-name { font-size:0.82rem; font-weight:600; color:var(--text-h); flex:1; }
.ch-sla  { font-size:0.68rem; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); }
.chs-wa { background:#DCFCE7; color:#166534; }
.chs-ph { background:var(--brand-lgt); color:var(--brand-dk); }
.chs-em { background:var(--amber-lgt); color:var(--amber-txt); }
.chs-al { background:var(--red-lgt); color:var(--red-txt); }

/* FAQ */
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:last-child { border-bottom:none; }
.faq-q {
  width:100%; text-align:left; padding:13px 20px;
  font-size:0.83rem; font-weight:600; color:var(--text-h);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  transition:background var(--t);
}
.faq-q:hover { background:#F8FAFD; }
.faq-q svg { width:15px; height:15px; color:var(--text-l); flex-shrink:0; transition:transform 0.15s; }
.faq-q.open svg { transform:rotate(180deg); color:var(--brand); }
.faq-a { display:none; padding:0 20px 13px; font-size:0.78rem; color:var(--text-m); line-height:1.65; }
.faq-a.vis { display:block; }

/* Cases table in help */
.case-row { display:flex; align-items:center; gap:10px; padding:9px 20px; border-bottom:1px solid var(--bg); flex-wrap:wrap; }
.case-row:last-child { border-bottom:none; }
.c-id   { font-family:'DM Mono',monospace; font-size:0.72rem; font-weight:600; color:var(--text-m); min-width:90px; }
.c-sub  { flex:1; font-size:0.8rem; color:var(--text-b); }
.c-st   { font-size:0.66rem; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.cst-act{ background:var(--brand-mid); color:var(--brand-dk); }
.cst-res{ background:var(--green-lgt); color:var(--green-txt); }
.cst-cls{ background:var(--bg); color:var(--text-l); border:1px solid var(--border); }
.c-dt   { font-size:0.68rem; color:var(--text-l); white-space:nowrap; }
.c-arr  { color:var(--text-l); } .c-arr svg { width:15px; height:15px; }

/* Help right panel */
.help-channels-card { }
.hcc-ttl { font-size:0.8rem; font-weight:700; color:var(--text-h); margin-bottom:12px; }
.hcc-hrs { font-size:0.72rem; color:var(--text-m); margin-top:8px; display:flex; align-items:center; gap:6px; }
.hcc-hrs svg { width:13px; height:13px; color:var(--text-l); }

/* Alert box */
.alert-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-xs); overflow:hidden;
  position:relative;
}
.alert-card-inner { display:flex; gap:14px; }
.alc-ico { width:44px; height:44px; border-radius:50%; background:#FEE2E2; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.alc-ico svg { width:20px; height:20px; color:var(--red); }
.alc-h  { font-size:0.9rem; font-weight:800; color:var(--text-h); margin-bottom:4px; }
.alc-p  { font-size:0.75rem; color:var(--text-m); line-height:1.55; margin-bottom:12px; }
.alc-note { font-size:0.68rem; color:var(--text-l); display:flex; align-items:center; gap:5px; margin-top:8px; }
.alc-note svg { width:12px; height:12px; color:var(--green); }

/* Trust banner */
.trust-full {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 28px;
  display:flex; align-items:center; gap:20px;
  box-shadow:var(--sh-xs);
}
.tf-ico { width:52px; height:52px; border-radius:50%; background:var(--brand-lgt); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tf-ico svg { width:24px; height:24px; color:var(--brand); }
.tf-h { font-size:1rem; font-weight:800; color:var(--text-h); margin-bottom:4px; }
.tf-p { font-size:0.78rem; color:var(--text-m); line-height:1.6; }

/* ══ STATUS CHIPS ════════════════════════════════════════════════ */
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:var(--r-pill); font-size:0.7rem; font-weight:700; }
.chip::before { content:''; width:5px; height:5px; border-radius:50%; }
.c-transit   { background:var(--brand-mid); color:#1E40AF; } .c-transit::before { background:var(--brand); }
.c-prep      { background:var(--purple-lgt); color:var(--purple-txt); } .c-prep::before { background:var(--purple); }
.c-confirm   { background:#E0F2FE; color:#0369A1; } .c-confirm::before { background:var(--cyan); }
.c-delivered { background:var(--green-lgt); color:var(--green-txt); } .c-delivered::before { background:var(--green); }
.c-request   { background:var(--bg); color:var(--text-m); } .c-request::before { background:var(--text-l); }

.sla-ok   { display:inline-flex; align-items:center; gap:4px; font-size:0.7rem; font-weight:700; color:var(--green); background:var(--green-lgt); padding:3px 9px; border-radius:var(--r-pill); }
.sla-ok::before { content:'✓'; }
.sla-risk { display:inline-flex; align-items:center; gap:4px; font-size:0.7rem; font-weight:700; color:var(--amber); background:var(--amber-lgt); padding:3px 9px; border-radius:var(--r-pill); }

/* ══ BUTTONS ════════════════════════════════════════════════════ */
.btn-pri { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--r-sm); background:var(--brand); color:white; font-size:0.8rem; font-weight:700; box-shadow:0 2px 8px rgba(26,86,219,0.25); transition:all var(--t); }
.btn-pri:hover { background:var(--brand-dk); transform:translateY(-1px); }
.btn-sec { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--r-sm); background:var(--surface); color:var(--text-b); border:1.5px solid var(--border); font-size:0.8rem; font-weight:700; transition:all var(--t); }
.btn-sec:hover { border-color:var(--brand); color:var(--brand); }
.btn-wa  { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--r-sm); background:#22C55E; color:white; font-size:0.83rem; font-weight:700; transition:opacity var(--t); width:100%; justify-content:center; }
.btn-wa:hover { opacity:0.88; }
.btn-outline-red { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--r-sm); background:var(--red); color:white; font-size:0.82rem; font-weight:700; transition:all var(--t); width:100%; justify-content:center; }
.btn-outline-red:hover { background:#B91C1C; }
.btn-icon { width:32px; height:32px; border-radius:var(--r-xs); background:var(--bg); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-m); transition:all var(--t); }
.btn-icon:hover { background:var(--brand-lgt); color:var(--brand); border-color:#BFDBFE; }
.btn-icon svg { width:14px; height:14px; }
.btn-ghost { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border-radius:var(--r-sm); color:var(--brand); font-size:0.78rem; font-weight:700; transition:background var(--t); }
.btn-ghost:hover { background:var(--brand-lgt); }
.txt-link { font-size:0.75rem; font-weight:700; color:var(--brand); cursor:pointer; display:inline-flex; align-items:center; gap:3px; }
.txt-link:hover { text-decoration:underline; }
.txt-link svg { width:13px; height:13px; }

/* ══ MODALS ══════════════════════════════════════════════════════ */
.modal-layer { position:fixed; inset:0; background:rgba(15,29,53,0.5); backdrop-filter:blur(5px); z-index:1000; display:none; align-items:center; justify-content:center; padding:16px; }
.modal-layer.open { display:flex; animation:pgIn 0.16s var(--ease); }
.modal-box { background:var(--surface); border-radius:16px; width:100%; max-width:480px; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh-lg); }
.modal-lg  { max-width:580px; }
.modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:17px 22px; border-bottom:1px solid var(--border); }
.modal-ttl { font-size:0.95rem; font-weight:800; color:var(--text-h); }
.modal-x   { width:28px; height:28px; border-radius:var(--r-xs); background:var(--bg); color:var(--text-m); display:flex; align-items:center; justify-content:center; transition:all var(--t); }
.modal-x:hover { background:var(--red-lgt); color:var(--red); }
.modal-body { padding:20px 22px; overflow-y:auto; flex:1; }
.modal-ftr  { padding:13px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

.doc-prev-box { background:var(--bg); border-radius:var(--r-md); padding:24px; text-align:center; margin-bottom:16px; }
.dpb-ico  { font-size:2.8rem; margin-bottom:8px; }
.dpb-name { font-size:0.9rem; font-weight:700; color:var(--text-h); margin-bottom:2px; }
.dpb-sub  { font-size:0.72rem; color:var(--text-l); }
.dp-rows  {}
.dp-row   { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--bg); font-size:0.8rem; }
.dp-row:last-child { border-bottom:none; }
.dp-row label { color:var(--text-m); }
.dp-row span  { font-weight:600; color:var(--text-h); }

/* Form */
.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f-col  { display:flex; flex-direction:column; gap:5px; }
.f-full { grid-column:1/-1; }
.f-lbl  { font-size:0.73rem; font-weight:700; color:var(--text-b); }
.f-ctrl { padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--r-sm); background:var(--bg); color:var(--text-h); font-size:0.83rem; width:100%; transition:all var(--t); resize:vertical; }
.f-ctrl:focus { border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 3px rgba(26,86,219,0.08); }
select.f-ctrl { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238FA3BF'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; padding-right:32px; cursor:pointer; }
.urg-row { display:flex; gap:8px; }
.urg-opt { cursor:pointer; } .urg-opt input { display:none; }
.urg-chip { display:block; padding:5px 13px; border-radius:var(--r-pill); font-size:0.73rem; font-weight:700; border:2px solid transparent; cursor:pointer; transition:all var(--t); }
.urg-chip.low { background:var(--green-lgt); color:var(--green-txt); }
.urg-chip.mid { background:var(--amber-lgt); color:var(--amber-txt); }
.urg-chip.hi  { background:var(--red-lgt); color:var(--red-txt); }
.urg-opt input:checked + .urg-chip { border-color:currentColor; }
.f-drop { border:2px dashed var(--border-dk); border-radius:var(--r-sm); padding:14px; text-align:center; cursor:pointer; color:var(--text-l); font-size:0.78rem; display:flex; flex-direction:column; align-items:center; gap:6px; transition:all var(--t); }
.f-drop:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-lgt); }

/* ══ TOAST ═══════════════════════════════════════════════════════ */
.toast { position:fixed; bottom:30px; right:24px; background:var(--text-h); color:white; padding:12px 18px; border-radius:var(--r-md); font-size:0.82rem; font-weight:500; box-shadow:var(--sh-lg); z-index:2000; opacity:0; transform:translateY(8px); transition:all 0.2s var(--ease); pointer-events:none; max-width:320px; display:flex; align-items:center; gap:8px; }
.toast.show { opacity:1; transform:translateY(0); }
.t-ico { width:18px; height:18px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.t-ico svg { width:10px; height:10px; }

/* ══ BOTTOM NAV ══════════════════════════════════════════════════ */
.bot-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); z-index:200; padding:6px 0 env(safe-area-inset-bottom,0); box-shadow:0 -3px 16px rgba(15,29,53,0.07); justify-content:space-around; }
.bn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 10px; border-radius:var(--r-sm); color:var(--text-l); font-size:0.6rem; font-weight:700; transition:color var(--t); min-width:52px; }
.bn svg { width:20px; height:20px; }
.bn.active { color:var(--brand); }
.bn-center { background:var(--brand); color:white !important; border-radius:13px; padding:7px 12px; margin-top:-10px; box-shadow:0 4px 14px rgba(26,86,219,0.35); }

/* Mobile overlay */
.mob-bg { display:none; position:fixed; inset:0; background:rgba(15,29,53,0.4); z-index:250; }
.mob-bg.show { display:block; }

/* ══ MISC ════════════════════════════════════════════════════════ */
.sep { height:1px; background:var(--border); margin:12px 0; }
.empty-st { padding:32px 20px; text-align:center; color:var(--text-l); font-size:0.83rem; }
.empty-st svg { width:40px; height:40px; margin-bottom:8px; opacity:0.3; display:block; margin-left:auto; margin-right:auto; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; border-radius:var(--r-pill); background:var(--brand); color:white; font-size:0.56rem; font-weight:800; padding:0 5px; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
@media(max-width:1080px){
  .trk-meta { grid-template-columns:repeat(3,1fr); }
  .docs-layout { grid-template-columns:1fr; }
  .help-2col { grid-template-columns:1fr; }
  .layout-main-side,.layout-main-side-lg { grid-template-columns:1fr; }
  .orders-wrap { grid-template-columns:1fr; }
}
@media(max-width:800px){
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .help-layout { grid-template-columns:1fr; }
  .fc-meta { grid-template-columns:repeat(3,1fr); }
  .layout-3col { grid-template-columns:1fr; }
}
@media(max-width:640px){
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .app-shell { margin-left:0; width:100%; }
  .hdr-menu { display:flex; }
  .bot-nav  { display:flex; }
  .app-content { padding-bottom:80px; }
  .page-inner { padding:16px 14px 60px; }
  .hdr-pname,.hdr-prole { display:none; }
  .kpi-row { gap:10px; }
  .fc-meta { grid-template-columns:repeat(2,1fr); }
  .trk-meta { grid-template-columns:repeat(2,1fr); }
  .f-grid { grid-template-columns:1fr; }
  .f-full { grid-column:1; }
  .tbl-head { display:none; }
  .tbl-row.tbl-orders { grid-template-columns:1fr; gap:4px; }
  .docs-tbl-head { display:none; }
  .tbl-row.docs-tbl-row { grid-template-columns:1fr; gap:4px; }
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-dk); border-radius:3px; }

/* =====================================================
   PATCH VISUAL v4 — NORTHVEL CONTROL TOWER
   Objetivo: acercar el portal al mockup premium generado:
   canvas azul hielo, cards compactas, KPI horizontales,
   sombra suave y jerarquía SaaS multinacional.
   ===================================================== */

:root {
  --bg: #edf5fc;
  --surface: #ffffff;
  --border: #dfeaf7;
  --border-dk: #c7d9ee;
  --brand: #1a56db;
  --brand-dk: #123fa8;
  --brand-lgt: #edf4ff;
  --brand-mid: #dbeafe;
  --text-h: #0f1d35;
  --text-b: #263a5c;
  --text-m: #536b90;
  --text-l: #8da0bd;
  --sh-xs: 0 4px 14px rgba(15, 29, 53, .045);
  --sh-sm: 0 8px 24px rgba(15, 29, 53, .06);
  --sh-md: 0 12px 34px rgba(15, 29, 53, .10);
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
}

body {
  background:
    radial-gradient(circle at 78% 3%, rgba(26, 86, 219, 0.10), transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(6, 182, 212, 0.07), transparent 28%),
    linear-gradient(180deg, #eaf3fb 0%, #f5f9fd 46%, #edf5fc 100%);
}

.app-shell,
.app-content {
  background: transparent;
}

.page-inner {
  max-width: 1240px;
  padding: 26px 28px 70px;
}

.app-hdr {
  height: 74px;
  background:
    radial-gradient(circle at 82% 20%, rgba(26, 86, 219, 0.10), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(235,244,255,.92) 100%);
  border-bottom: 1px solid #dce8f6;
  box-shadow: 0 8px 28px rgba(15, 29, 53, .05);
}

.hdr-h {
  color: #0a1b35;
  font-size: 1.28rem;
}

.hdr-p {
  color: #5c7192;
  font-size: .77rem;
}

.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 6px 0 24px rgba(15, 29, 53, .05);
}

.sb-item {
  min-height: 42px;
  border-radius: 12px;
}

.sb-item.active {
  background: linear-gradient(90deg, #eaf3ff 0%, #f5f9ff 100%);
  box-shadow: inset 0 0 0 1px rgba(26,86,219,.03);
}

.welcome-row {
  align-items: flex-start;
  margin-bottom: 18px;
}

.welcome-h {
  font-size: 1.55rem;
  line-height: 1.12;
  font-weight: 800;
  color: #0f1d35;
}

.welcome-p {
  margin-top: 5px;
  font-size: .82rem;
  color: #536b90;
}

.welcome-date {
  padding-top: 6px;
  font-size: .72rem;
  color: #8498b5;
}

/* KPI cards: versión horizontal compacta como el mockup */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kpi-card {
  min-height: 104px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #dfeaf7;
  box-shadow: 0 8px 24px rgba(15, 29, 53, 0.06);
  display: grid;
  grid-template-columns: 54px 1fr 16px;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,86,219,.035), transparent 45%);
  pointer-events: none;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 29, 53, 0.10);
  border-color: #c7d9ee;
}

.kpi-top {
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 1;
}

.kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #edf4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(26,86,219,.05);
}

.kpi-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.1;
  color: #1a56db;
}

.kpi-icon.green {
  background: #d8f8e8;
}

.kpi-icon.green svg {
  color: #059669;
}

.kpi-val {
  grid-column: 2;
  grid-row: 2;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  color: #0f1d35;
  margin: 0;
  position: relative;
  z-index: 1;
}

.kpi-lbl {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.76rem;
  font-weight: 700;
  color: #0f1d35;
  margin: 0;
  position: relative;
  z-index: 1;
}

.kpi-link {
  grid-column: 2;
  grid-row: 3;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a56db;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}

.kpi-card::after {
  content: "›";
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: end;
  color: #1a56db;
  font-size: 1.45rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.kpi-link svg {
  display: none;
}

.card,
.featured-card,
.side-box,
.tl-h-wrap,
.trk-main-card,
.na-card,
.trk-sel-card,
.help-quick-card,
.advisor-card,
.doc-order-card,
.trust-banner {
  background: rgba(255, 255, 255, .96);
  border: 1px solid #dfeaf7;
  box-shadow: 0 8px 24px rgba(15, 29, 53, .055);
  border-radius: 16px;
}

.featured-card,
.trk-main-card {
  padding: 22px 24px;
}

.fc-status-txt,
.trk-status-txt {
  color: #0f65ff;
}

.sla-ok {
  background: #dff8eb !important;
  color: #047857 !important;
  border: 1px solid rgba(5, 150, 105, .16);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: .7rem;
}

.tl-h-wrap {
  margin-top: 16px;
  padding: 22px 24px;
}

.layout-3col {
  gap: 16px;
}

.side-box {
  min-height: 204px;
}

.hist-row {
  grid-template-columns: 12px 96px minmax(0, 1fr);
}

.btn-pri,
.btn-wa,
.qa-btn-wa {
  box-shadow: 0 10px 20px rgba(22, 163, 74, .16);
}

.txt-link {
  color: #0f65ff;
}

/* Tablas más limpias y compactas */
.tbl-head,
.tbl-row {
  column-gap: 16px;
}

.tbl-row {
  transition: background .15s ease, transform .15s ease;
}

.tbl-row:hover {
  background: #f6faff;
  transform: translateX(2px);
}

.chip {
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
}

/* Mobile: app real, no web achicada */
@media (max-width: 900px) {
  .page-inner {
    padding: 22px 18px 110px;
  }

  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .kpi-card {
    min-height: 98px;
  }
}

@media (max-width: 520px) {
  .welcome-h {
    font-size: 1.35rem;
  }

  .kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .kpi-card {
    padding: 14px;
    grid-template-columns: 42px 1fr 10px;
    min-height: 92px;
  }

  .kpi-icon {
    width: 38px;
    height: 38px;
  }

  .kpi-icon svg {
    width: 19px;
    height: 19px;
  }

  .kpi-val {
    font-size: 1.35rem;
  }

  .kpi-lbl {
    font-size: 0.68rem;
  }

  .kpi-link {
    font-size: 0.66rem;
  }

  .kpi-card::after {
    font-size: 1.15rem;
  }
}

/* ================================================================
   RESPONSIVE STABILITY PATCH v5
   Regla de trabajo: cada mejora desktop debe conservar app móvil.
   Este bloque fuerza comportamiento móvil limpio en teléfonos/tablets.
   ================================================================ */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.app-shell,
.app-content,
.screen,
.page-inner {
  min-width: 0;
}

@media (max-width: 900px) {
  body {
    display: block;
    overflow-x: hidden;
  }

  .sidebar {
    width: min(280px, 84vw);
    transform: translateX(-105%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .app-shell {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-content {
    width: 100%;
    max-width: 100%;
    padding-bottom: 94px;
    overflow-x: hidden;
  }

  .app-hdr {
    width: 100%;
    max-width: 100%;
    min-height: 74px;
    height: auto;
    padding: 10px 14px;
    gap: 10px;
    position: sticky;
  }

  .hdr-menu {
    display: flex !important;
    flex: 0 0 auto;
  }

  .hdr-titles {
    min-width: 0;
    flex: 1 1 auto;
  }

  .hdr-h {
    font-size: 1.12rem;
    line-height: 1.1;
    white-space: normal;
  }

  .hdr-p {
    font-size: 0.72rem;
    line-height: 1.25;
    max-width: 220px;
  }

  .hdr-right {
    flex: 0 0 auto;
    gap: 8px;
  }

  .hdr-bell {
    width: 42px;
    height: 42px;
  }

  .hdr-profile {
    width: auto;
    min-width: 76px;
    padding: 6px 8px 6px 6px;
  }

  .hdr-pname,
  .hdr-prole {
    display: none !important;
  }

  .hdr-ava {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .bot-nav {
    display: flex !important;
  }

  .page-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 14px 108px !important;
  }

  .welcome-row {
    display: block;
    margin-bottom: 18px;
  }

  .welcome-h {
    font-size: 1.32rem;
    line-height: 1.15;
  }

  .welcome-p {
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 92%;
  }

  .welcome-date {
    margin-top: 12px;
    font-size: 0.68rem;
  }

  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 20px;
  }

  .kpi-card {
    min-width: 0;
    min-height: 96px;
    padding: 14px 12px;
    grid-template-columns: 40px minmax(0, 1fr) 10px;
    column-gap: 10px;
    border-radius: 16px;
  }

  .kpi-icon {
    width: 38px;
    height: 38px;
  }

  .kpi-icon svg {
    width: 19px;
    height: 19px;
  }

  .kpi-lbl {
    font-size: 0.66rem;
    line-height: 1.2;
  }

  .kpi-val {
    font-size: 1.35rem;
  }

  .kpi-link {
    font-size: 0.64rem;
  }

  .home-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .featured-card,
  .home-featured-main,
  .side-box,
  .card,
  .trk-main-card {
    width: 100%;
    max-width: 100%;
  }

  .featured-card,
  .trk-main-card {
    padding: 20px 18px;
  }

  .fc-id,
  .trk-id {
    font-size: 1.15rem;
  }

  .fc-status-row,
  .trk-status-row {
    align-items: center;
    gap: 10px;
  }

  .fc-status-txt,
  .trk-stxt,
  .trk-status-txt {
    font-size: 1rem;
    line-height: 1.25;
  }

  .fc-meta,
  .trk-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 16px;
  }

  .fc-meta-item span,
  .trk-meta-item span {
    font-size: 0.78rem;
    overflow-wrap: anywhere;
  }

  .home-embedded-tl {
    margin-top: 18px;
  }

  .home-embedded-tl .tl-h-wrap,
  .tl-h-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px;
  }

  .tl-h {
    min-width: 620px;
  }

  .home-next-card {
    margin-top: 0;
  }

  .home-next-illus {
    min-height: 128px;
  }

  .layout-3col,
  .home-info-grid,
  .docs-layout,
  .orders-wrap,
  .help-2col,
  .layout-main-side,
  .layout-main-side-lg {
    grid-template-columns: 1fr !important;
  }

  .tbl-row.tbl-orders,
  .tbl-row.docs-tbl-row {
    grid-template-columns: 1fr !important;
  }

  .trk-sel-card,
  .srch-wrap,
  .filter-row,
  .docs-filter-pills {
    width: 100%;
    max-width: 100%;
  }

  .filter-row,
  .docs-filter-pills {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
}

@media (max-width: 420px) {
  .page-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .app-hdr {
    padding-left: 10px;
    padding-right: 10px;
  }

  .hdr-p {
    max-width: 185px;
  }

  .kpi-card {
    min-height: 92px;
    padding: 12px 10px;
    grid-template-columns: 36px minmax(0, 1fr) 8px;
    column-gap: 8px;
  }

  .kpi-icon {
    width: 34px;
    height: 34px;
  }

  .kpi-icon svg {
    width: 17px;
    height: 17px;
  }

  .kpi-lbl {
    font-size: 0.61rem;
  }

  .kpi-val {
    font-size: 1.22rem;
  }

  .kpi-link {
    font-size: 0.6rem;
  }

  .featured-card,
  .trk-main-card,
  .side-box,
  .card {
    border-radius: 18px;
  }

  .featured-card,
  .trk-main-card {
    padding: 18px 16px;
  }

  .fc-meta,
  .trk-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px;
  }

  .fc-status-txt,
  .trk-stxt,
  .trk-status-txt {
    font-size: 0.94rem;
  }

  .sla-ok,
  .sla-warn,
  .sla-bad {
    padding: 5px 9px;
    font-size: 0.64rem;
  }
}


/* ================================================================
   PANEL PRINCIPAL — AJUSTE FINO / CONGRUENCIA VISUAL
   Solo afecta Inicio
   ================================================================ */
#screen-home .page-inner{max-width:1220px}
#homeTL{display:none}

.pp-cycle-card,
.pp-box,
.pp-history-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--sh-xs);
}

.pp-cycle-card{padding:18px 20px;margin-bottom:16px}
.pp-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.pp-overline{font-size:.67rem;line-height:1;text-transform:uppercase;letter-spacing:.08em;color:var(--text-l);font-weight:800;margin-bottom:5px}
.pp-main-title{font-size:1.18rem;line-height:1.08;color:var(--text-h);font-weight:800}
.pp-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--green-lgt);color:var(--green-txt);font-size:.72rem;font-weight:800;white-space:nowrap;border:1px solid rgba(5,150,105,.14)}
.pp-chip svg{width:12px;height:12px}

.pp-hero-grid{display:grid;grid-template-columns:330px minmax(0,1fr) 250px;gap:18px;align-items:center}
.pp-visual-card{position:relative;border:1px solid var(--border);background:linear-gradient(180deg,#F3F8FF 0%,#EAF3FF 100%);border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.pp-ship-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .25s var(--ease)}
.pp-visual-card:hover .pp-ship-img{transform:scale(1.02)}
.pp-ship-img.is-hidden{display:none}
.pp-image-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:8px;padding:18px;text-align:center;color:var(--brand);background:linear-gradient(180deg,#F3F8FF 0%,#EAF3FF 100%)}
.pp-image-fallback.show{display:flex}
.pp-image-fallback svg{width:42px;height:42px}
.pp-image-fallback span{font-size:.78rem;font-weight:800;color:var(--text-m)}

.pp-summary-card{min-width:0}
.pp-summary-block + .pp-summary-block{margin-top:12px}
.pp-summary-block label,
.pp-next-card label,
.pp-mini-stat label{display:block;font-size:.64rem;line-height:1.1;text-transform:uppercase;letter-spacing:.065em;color:var(--text-l);font-weight:800;margin-bottom:5px}
.pp-summary-block strong{display:block;font-size:1.1rem;line-height:1.05;color:var(--text-h);font-weight:800}
.pp-route-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.88rem;color:var(--text-h);font-weight:800;line-height:1.35}
.pp-route-row b{color:var(--brand)}
.pp-status-row{display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:800;font-size:.92rem}
.pp-status-row svg{width:17px;height:17px;flex-shrink:0}

.pp-next-card{background:linear-gradient(180deg,#FBFDFF 0%,#F5F9FF 100%);border:1px solid var(--border);border-radius:14px;padding:16px 16px 15px;min-height:100%}
.pp-next-card strong{display:block;font-size:1.14rem;line-height:1.12;color:var(--text-h);font-weight:800;margin-bottom:6px}
.pp-next-card span{font-size:.82rem;color:var(--text-m);font-weight:700;line-height:1.3}

.pp-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.pp-mini-stat{background:#FBFDFF;border:1px solid var(--border);border-radius:14px;padding:12px 14px}
.pp-mini-stat strong{font-size:.92rem;line-height:1.2;color:var(--text-h);font-weight:800}

.pp-timeline-card{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px;padding:12px 6px 4px;background:#FBFDFF;border:1px solid var(--border);border-radius:14px}
.pp-timeline-line{position:absolute;top:26px;left:7%;right:7%;height:2px;background:var(--border);border-radius:999px;z-index:0}
.pp-step{position:relative;z-index:1;text-align:center}
.pp-step-dot{width:28px;height:28px;margin:0 auto 8px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);border:2px solid var(--border-dk);color:var(--text-l);font-size:.68rem;font-weight:900}
.pp-step.done .pp-step-dot{background:var(--green);border-color:var(--green);color:#fff}
.pp-step.curr .pp-step-dot{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 5px rgba(26,86,219,.12)}
.pp-step span{display:block;font-size:.66rem;line-height:1.25;color:var(--text-b);font-weight:800;padding:0 2px}
.pp-step small{display:block;font-size:.6rem;color:var(--text-l);margin-top:3px;line-height:1.2}
.pp-step.curr span,.pp-step.curr small{color:var(--brand)}
.pp-step.pend span{color:var(--text-m);font-weight:700}

.pp-info-grid{display:grid;grid-template-columns:1.03fr 1fr 1.06fr .95fr;gap:16px}
.pp-box{padding:16px 17px;min-height:236px}
.pp-box-title{font-size:.82rem;line-height:1.2;font-weight:900;color:var(--text-h);text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px}

.pp-eta-grid{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center}
.pp-mini-map{position:relative;height:118px;border-radius:12px;background:linear-gradient(180deg,#F4F8FF 0%,#ECF4FF 100%);border:1px solid var(--border);overflow:hidden}
.pp-mini-map svg{position:absolute;inset:0;width:100%;height:100%}
.pp-mini-ship{position:absolute;top:22px;left:56px;font-size:1rem;z-index:1}
.pp-eta-list{display:flex;flex-direction:column;gap:10px}
.pp-eta-list div{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pp-eta-list span{font-size:.76rem;color:var(--text-b);font-weight:800}
.pp-eta-list strong{font-size:.66rem;color:var(--brand);background:var(--brand-lgt);padding:5px 8px;border-radius:999px;white-space:nowrap}

.pp-alert-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.pp-alert-row span{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:900;flex-shrink:0}
.pp-alert-row .amber{background:var(--amber-lgt);color:var(--amber)}
.pp-alert-row .blue{background:var(--brand-lgt);color:var(--brand)}
.pp-alert-row p{font-size:.74rem;line-height:1.45;color:var(--text-b)}

.pp-window-row,
.pp-order-row{display:grid;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--bg)}
.pp-window-row{grid-template-columns:74px 1fr auto}
.pp-window-row:last-child,.pp-order-row:last-child{border-bottom:none;padding-bottom:0}
.pp-window-row b{font-size:.72rem;color:var(--text-h)}
.pp-window-row span{font-size:.72rem;color:var(--text-b);line-height:1.25}
.pp-window-row strong{font-size:.66rem;color:var(--green);background:var(--green-lgt);padding:5px 8px;border-radius:999px;white-space:nowrap}

.pp-order-row{grid-template-columns:84px 1fr auto}
.pp-order-row b{font-size:.76rem;color:var(--text-h)}
.pp-order-row span{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:999px;font-size:.62rem;font-weight:800;white-space:nowrap}
.pp-order-row span.blue{background:var(--brand-lgt);color:var(--brand)}
.pp-order-row span.green{background:var(--green-lgt);color:var(--green)}
.pp-order-row button{font-size:.69rem;color:var(--brand);font-weight:800}

.pp-history-card{margin-top:16px;padding:16px 17px}
.pp-history-row{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:8px 0;border-bottom:1px solid var(--bg)}
.pp-history-row:last-child{border-bottom:none;padding-bottom:0}
.pp-history-row span{font-size:.68rem;color:var(--text-m);white-space:nowrap}
.pp-history-row strong{display:block;font-size:.77rem;color:var(--text-h);font-weight:800}
.pp-history-row p{font-size:.72rem;color:var(--text-m);line-height:1.42;margin-top:2px}

@media (max-width:1200px){
  .pp-hero-grid{grid-template-columns:1fr 1fr}
  .pp-next-card{grid-column:1 / -1}
  .pp-info-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .pp-hero-grid,.pp-mini-stats,.pp-info-grid{grid-template-columns:1fr}
  .pp-timeline-card{grid-template-columns:1fr;gap:10px;padding:12px}
  .pp-timeline-line{display:none}
  .pp-step{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;text-align:left;border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px}
  .pp-step-dot{margin:0}
  .pp-eta-grid{grid-template-columns:1fr}
}


/* Cliente MySQL V1 — imagen mapa Galápagos en ETA */
.pp-mini-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.pp-image-fallback {
  display: none;
}

.pp-image-fallback.show {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-m);
  font-size: .78rem;
}

.pp-ship-img.is-hidden {
  display: none;
}

/* Fix identidad cliente / cliente sin pedidos */
.empty-st.client-empty {
  min-height: 220px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  margin-top: 14px;
}

.empty-st.client-empty .empty-title {
  color: var(--text-h);
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 4px;
}

.empty-st.client-empty .empty-sub {
  color: var(--text-m);
  font-size: .78rem;
  line-height: 1.45;
  max-width: 420px;
}

/* Fix navegación cliente */
.sidebar {
  pointer-events: auto !important;
}

.sb-nav,
.sb-item,
.sb-foot,
.sb-client {
  pointer-events: auto !important;
}

.app-shell {
  position: relative;
  z-index: 1;
}

.sidebar {
  z-index: 500 !important;
}

.mob-bg {
  pointer-events: none;
}

.mob-bg.show {
  pointer-events: auto;
}

/* Fix detalle de casos / solicitudes */
.case-row-btn {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.case-row-btn:hover {
  background: #F8FBFF;
}

.case-empty {
  min-height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  color: var(--text-m);
  font-size: .75rem;
}

.case-empty strong {
  color: var(--text-h);
  font-size: .82rem;
}

.case-empty.big {
  min-height: 180px;
  align-items: center;
  text-align: center;
}

.case-list-modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-card-modal {
  width: 100%;
  border: 1px solid var(--border);
  background: #FFFFFF;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .15s ease;
}

.case-card-modal:hover {
  border-color: var(--brand);
  background: #F8FBFF;
  transform: translateY(-1px);
}

.case-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.case-card-top strong {
  font-family: 'DM Mono', monospace;
  font-size: .76rem;
  color: var(--text-h);
}

.case-card-sub {
  color: var(--text-h);
  font-weight: 800;
  font-size: .84rem;
  margin-bottom: 4px;
}

.case-card-meta {
  color: var(--text-m);
  font-size: .72rem;
}

.case-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.case-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  background: #F8FBFF;
  border-radius: 16px;
}

.case-detail-head label,
.case-detail-item label,
.case-detail-block label,
.case-response label {
  display: block;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-l);
  margin-bottom: 5px;
}

.case-detail-head strong {
  font-family: 'DM Mono', monospace;
  color: var(--text-h);
}

.case-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.case-detail-item,
.case-detail-block,
.case-response {
  border: 1px solid var(--border);
  background: #FFFFFF;
  border-radius: 14px;
  padding: 13px;
}

.case-detail-item span {
  color: var(--text-h);
  font-weight: 700;
  font-size: .82rem;
}

.case-detail-block p,
.case-response p {
  color: var(--text-m);
  line-height: 1.55;
  font-size: .82rem;
}

.case-response {
  background: #F8FBFF;
}

.case-response.has-response {
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.case-response.has-response label {
  color: #047857;
}

@media (max-width: 720px) {
  .case-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Notificaciones cliente */
.hdr-bell {
  cursor: pointer;
}

.bell-badge.is-zero {
  opacity: 0;
  transform: scale(.5);
}

.notif-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 650;
  background: transparent;
}

.notif-backdrop.show {
  display: block;
}

.notif-panel {
  position: fixed;
  top: 62px;
  right: 74px;
  width: min(380px, calc(100vw - 28px));
  max-height: min(640px, calc(100vh - 88px));
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(15,29,53,.18);
  z-index: 700;
  overflow: hidden;
  display: none;
}

.notif-panel.open {
  display: block;
  animation: notifIn .16s ease;
}

@keyframes notifIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: #F8FBFF;
}

.notif-head strong {
  display: block;
  color: var(--text-h);
  font-size: .92rem;
  font-weight: 800;
}

.notif-head span {
  display: block;
  color: var(--text-m);
  font-size: .72rem;
  margin-top: 2px;
}

.notif-mark {
  border: 0;
  background: #EBF2FF;
  color: var(--brand);
  font-size: .68rem;
  font-weight: 800;
  padding: 7px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.notif-list {
  max-height: 520px;
  overflow: auto;
  padding: 8px;
}

.notif-item {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 14px;
  padding: 11px 10px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  text-align: left;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
}

.notif-item:hover {
  background: #F4F8FD;
}

.notif-item.read {
  opacity: .72;
}

.notif-ico {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.notif-ico.blue { background:#EBF2FF; color:#1A56DB; }
.notif-ico.green { background:#D1FAE5; color:#047857; }
.notif-ico.amber { background:#FEF3C7; color:#92400E; }
.notif-ico.purple { background:#F3E8FF; color:#7E22CE; }

.notif-copy strong {
  display: block;
  color: var(--text-h);
  font-size: .78rem;
  font-weight: 800;
  margin-bottom: 3px;
}

.notif-copy small {
  display: block;
  color: var(--text-m);
  font-size: .72rem;
  line-height: 1.35;
}

.notif-copy em {
  display: block;
  color: var(--text-l);
  font-size: .64rem;
  font-style: normal;
  margin-top: 4px;
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(26,86,219,.12);
}

.notif-empty {
  min-height: 140px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--text-m);
  text-align: center;
  gap: 5px;
}

.notif-empty strong {
  color: var(--text-h);
}

@media (max-width: 720px) {
  .notif-panel {
    top: 64px;
    right: 14px;
    left: 14px;
    width: auto;
  }
}

/* Perfil cliente */
.hdr-profile-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.hdr-profile-btn:hover {
  background: rgba(26,86,219,.06);
}

.client-profile-card {
  padding: 14px;
  border: 1px solid var(--border);
  background: #F8FBFF;
  border-radius: 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.client-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand), var(--cyan));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.client-profile-card strong {
  display: block;
  color: var(--text-h);
  font-size: .92rem;
  font-weight: 800;
}

.client-profile-card span {
  display: block;
  color: var(--brand);
  font-size: .72rem;
  font-weight: 800;
  margin-top: 2px;
}

.profile-grid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.profile-grid-form h3 {
  color: var(--text-h);
  font-size: .9rem;
  font-weight: 800;
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .profile-grid-form {
    grid-template-columns: 1fr;
  }
}



/* ================================================================
   NORTHVEL AUTH — Fix visual login / recuperar / reset
   ================================================================ */
.auth-body {
  min-height: 100vh !important;
  margin: 0 !important;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(6, 182, 212, .20), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(26, 86, 219, .18), transparent 34%),
    linear-gradient(135deg, #F8FBFF 0%, #EAF4FF 48%, #F4FAFF 100%) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: #0F1D35;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-shell {
  width: min(1120px, 100%);
  min-height: 640px;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(211,225,242,.95);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(15,29,53,.14);
  backdrop-filter: blur(14px);
}

.auth-hero {
  position: relative;
  padding: 42px;
  overflow: hidden;
  color: #FFFFFF;
  background:
    linear-gradient(135deg, rgba(7,35,75,.98), rgba(26,86,219,.86)),
    radial-gradient(circle at 20% 20%, rgba(6,182,212,.40), transparent 38%);
}

.auth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.12) 0 1px, transparent 1px 72px),
    linear-gradient(30deg, rgba(255,255,255,.08) 0 1px, transparent 1px 82px);
  opacity: .22;
}

.auth-hero > * {
  position: relative;
  z-index: 1;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  margin-bottom: 92px;
}

.auth-brand .sb-logo-box {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1A56DB, #06B6D4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-brand div div {
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .78rem;
}

.auth-brand small {
  display: block;
  font-size: .62rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.auth-copy h1 {
  max-width: 520px;
  font-size: clamp(2.2rem, 4.5vw, 4.4rem);
  line-height: .96;
  letter-spacing: -.065em;
  margin: 0 0 20px;
  font-weight: 900;
}

.auth-copy p {
  max-width: 540px;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  font-size: 1rem;
  margin: 0;
}

.auth-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
}

.auth-pill {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: .76rem;
  font-weight: 800;
}

.auth-panel {
  padding: 54px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 90% 10%, rgba(6,182,212,.10), transparent 28%),
    rgba(255,255,255,.86);
}

.auth-panel h2 {
  color: #0F1D35;
  font-size: 2rem;
  letter-spacing: -.04em;
  font-weight: 900;
  margin: 0 0 8px;
}

.auth-panel > p {
  color: #5B7399;
  font-size: .92rem;
  line-height: 1.55;
  margin: 0 0 24px;
}

.auth-error,
.auth-success {
  display: none;
  border-radius: 14px;
  padding: 11px 13px;
  font-size: .78rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.auth-error.show,
.auth-success.show,
.auth-error:not(:empty),
.auth-success:not(:empty) {
  display: block;
}

.auth-error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

.auth-success {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-field label {
  display: block;
  color: #6B83A6;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  margin-bottom: 7px;
}

.auth-field input {
  width: 100%;
  height: 48px;
  border: 1px solid #D8E4F2;
  border-radius: 15px;
  background: #FFFFFF;
  color: #0F1D35;
  font-size: .92rem;
  font-weight: 700;
  padding: 0 14px;
  outline: none;
  transition: all .16s ease;
  box-shadow: 0 1px 0 rgba(15,29,53,.03);
}

.auth-field input:focus {
  border-color: #1A56DB;
  box-shadow: 0 0 0 4px rgba(26,86,219,.11);
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #5B7399;
  font-size: .78rem;
}

.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5B7399;
  font-size: .78rem;
  font-weight: 700;
}

.auth-check input {
  width: 16px;
  height: 16px;
  accent-color: #1A56DB;
}

.auth-link {
  color: #1A56DB;
  font-weight: 900;
  text-decoration: none;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-btn {
  height: 50px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #1A56DB, #0B7DDC);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(26,86,219,.24);
  transition: all .16s ease;
}

.auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(26,86,219,.28);
}

.auth-btn.secondary {
  background: #F3F7FC;
  color: #1A56DB;
  box-shadow: none;
  border: 1px solid #D8E4F2;
}

.auth-demo {
  margin-top: 26px;
  padding: 16px;
  border: 1px dashed #CBD8EA;
  border-radius: 18px;
  background: #F8FBFF;
  color: #5B7399;
  font-size: .78rem;
  line-height: 1.65;
}

.auth-demo b,
.auth-demo strong {
  color: #0F1D35;
}

@media (max-width: 920px) {
  .auth-body {
    align-items: flex-start;
    padding: 18px;
  }

  .auth-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-hero {
    padding: 30px;
  }

  .auth-brand {
    margin-bottom: 42px;
  }

  .auth-panel {
    padding: 34px 26px;
  }
}

@media (max-width: 560px) {
  .auth-body {
    padding: 0;
  }

  .auth-shell {
    min-height: 100vh;
    border-radius: 0;
    border: 0;
  }

  .auth-hero {
    padding: 24px 20px;
  }

  .auth-copy h1 {
    font-size: 2rem;
    letter-spacing: -.045em;
  }

  .auth-panel {
    padding: 28px 20px 36px;
  }

  .auth-row {
    align-items: flex-start;
    flex-direction: column;
  }
}