/* ══════════════════════════════════════════════════════════════
   EncoExpress · Sistema de Encomiendas
   Hoja de estilos principal
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Marca (sobrescribible desde Configuración) */
  --brand:#0F766E;
  --brand-2:#14B8A6;
  --brand-soft:#E6F4F1;
  --brand-ink:#0B4F4A;

  /* Tema claro */
  --bg:#F1F5F6;
  --bg-grad-1:#EAF3F2;
  --bg-grad-2:#F6F8FA;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --surface-3:#EEF3F5;
  --elev:#FFFFFF;
  --text:#0F1F2C;
  --text-2:#38505C;
  --muted:#6B8290;
  --border:#DDE7EA;
  --border-2:#EAF0F2;
  --shadow-sm:0 1px 2px rgba(15,45,55,.06), 0 1px 3px rgba(15,45,55,.05);
  --shadow-md:0 4px 12px rgba(15,45,55,.07), 0 2px 4px rgba(15,45,55,.04);
  --shadow-lg:0 18px 45px rgba(15,45,55,.14), 0 4px 10px rgba(15,45,55,.06);

  /* Sidebar */
  --sb-bg:#0C2E2C;
  --sb-bg-2:#082321;
  --sb-txt:#CFE3E0;
  --sb-txt-dim:#8FB3AE;
  --sb-active:rgba(20,184,166,.16);
  --sb-border:rgba(255,255,255,.07);

  /* Estados */
  --ok:#12805C;   --ok-soft:#E3F6ED;
  --warn:#B45309; --warn-soft:#FEF3E2;
  --err:#B42318;  --err-soft:#FDECEA;
  --info:#1D4ED8; --info-soft:#E8EFFE;
  --purple:#6D28D9; --purple-soft:#F1EBFE;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --ff: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --sidebar-w:264px;
  --vh:100vh;
}

/* ══════════════════════════════════════════════════════════════
   MODOS DE INTERFAZ
   data-ui = verde (por defecto) · azul (azul oscuro) · claro
   data-theme = light | dark  (se combina con data-ui)
   ══════════════════════════════════════════════════════════════ */

/* ── INTERFAZ AZUL (azul oscuro con degradados y brillos) ── */
html[data-ui="azul"]{
  --brand:#1D4ED8;
  --brand-2:#3B82F6;
  --brand-soft:#E8F0FE;
  --brand-ink:#173FA8;

  --bg:#EFF4FD;
  --bg-grad-1:#E6EEFC;
  --bg-grad-2:#F5F8FE;
  --surface:#FFFFFF;
  --surface-2:#F7FAFF;
  --surface-3:#EDF3FE;
  --elev:#FFFFFF;
  --text:#0E1B33;
  --text-2:#33507A;
  --muted:#6B84A6;
  --border:#D8E3F6;
  --border-2:#E9F0FB;
  --shadow-sm:0 1px 2px rgba(14,35,80,.07), 0 1px 3px rgba(14,35,80,.05);
  --shadow-md:0 6px 18px rgba(14,45,110,.09), 0 2px 4px rgba(14,45,110,.05);
  --shadow-lg:0 22px 50px rgba(12,40,100,.16), 0 4px 10px rgba(12,40,100,.07);

  --sb-bg:#0A1F44;
  --sb-bg-2:#071630;
  --sb-txt:#C9D9F2;
  --sb-txt-dim:#7E9AC4;
  --sb-active:rgba(59,130,246,.22);
  --sb-border:rgba(255,255,255,.09);

  --ok:#0E9F6E;   --ok-soft:#E1F7EE;
  --warn:#B45309; --warn-soft:#FEF3E2;
  --err:#B42318;  --err-soft:#FDECEA;
  --info:#1D4ED8; --info-soft:#E6EEFE;
  --purple:#6D28D9; --purple-soft:#F1EBFE;

  /* Degradados del modo azul */
  --grad-brand:linear-gradient(135deg,#1D4ED8 0%,#3B82F6 55%,#22D3EE 100%);
  --grad-side:linear-gradient(180deg,#0A1F44 0%,#0C2A5C 55%,#071630 100%);
  --grad-panel:linear-gradient(120deg,#163E8F 0%,#1D4ED8 45%,#2563EB 70%,#14B8A6 100%);
  --glow:0 10px 30px rgba(37,99,235,.28);
}

/* ── INTERFAZ VERDE (actual, por defecto) ── */
:root, [data-ui="verde"]{
  --grad-brand:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%);
  --grad-side:linear-gradient(180deg,#0C2E2C,#082321);
  --grad-panel:linear-gradient(120deg,#0B3A37 0%,#0F766E 55%,#14B8A6 100%);
  --glow:0 10px 30px rgba(20,184,166,.26);
}
html[data-ui="azul"]{
  --grad-brand:linear-gradient(135deg,#1D4ED8 0%,#3B82F6 55%,#22D3EE 100%);
  --grad-side:linear-gradient(180deg,#0A1F44 0%,#0C2A5C 55%,#071630 100%);
  --grad-panel:linear-gradient(120deg,#163E8F 0%,#1D4ED8 45%,#2563EB 70%,#14B8A6 100%);
  --glow:0 10px 30px rgba(37,99,235,.28);
}
html[data-ui="claro"]{
  --grad-brand:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%);
  --grad-side:linear-gradient(180deg,#FFFFFF,#F1F7F8);
  --grad-panel:linear-gradient(120deg,#0B3A37 0%,#0F766E 55%,#14B8A6 100%);
  --glow:0 10px 26px rgba(15,118,110,.20);
}

/* ── INTERFAZ CLARA (alta luminosidad, gris azulado suave) ── */
html[data-ui="claro"]{
  --brand:#0F766E;
  --brand-2:#14B8A6;
  --brand-soft:#E9F7F4;
  --brand-ink:#0B4F4A;

  --bg:#F7F9FB;
  --bg-grad-1:#EFF6F6;
  --bg-grad-2:#FAFCFD;
  --surface:#FFFFFF;
  --surface-2:#F8FBFC;
  --surface-3:#F0F5F7;
  --elev:#FFFFFF;
  --text:#101E28;
  --text-2:#3B5563;
  --muted:#728A98;
  --border:#E3EBEF;
  --border-2:#EFF4F6;
  --shadow-sm:0 1px 2px rgba(20,50,65,.05);
  --shadow-md:0 5px 14px rgba(20,50,65,.06);
  --shadow-lg:0 16px 40px rgba(20,50,65,.10);

  --sb-bg:#FFFFFF;
  --sb-bg-2:#F4F8F9;
  --sb-txt:#2E4A56;
  --sb-txt-dim:#7D96A2;
  --sb-active:rgba(15,118,110,.10);
  --sb-border:rgba(16,50,65,.09);

  --grad-brand:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%);
  --grad-side:linear-gradient(180deg,#FFFFFF,#F1F7F8);
  --grad-panel:linear-gradient(120deg,#0B3A37 0%,#0F766E 55%,#14B8A6 100%);
  --glow:0 10px 26px rgba(15,118,110,.20);
}

/* La interfaz clara usa texto oscuro en la barra lateral */
[data-ui="claro"] .sb-brand-txt b,
[data-ui="claro"] .nav-item.active,
[data-ui="claro"] .nav-item:hover,
[data-ui="claro"] .sb-user-txt b{color:#12303B}
[data-ui="claro"] .nav-item{color:#3E5C68}
[data-ui="claro"] .nav-item.active{background:var(--sb-active);box-shadow:inset 0 0 0 1px rgba(15,118,110,.18)}
[data-ui="claro"] .nav-item.active svg{color:var(--brand)}
[data-ui="claro"] .sb-user{background:rgba(15,118,110,.06)}
[data-ui="claro"] .theme-toggle{color:#5C7783}
[data-ui="claro"] .theme-toggle:hover{background:rgba(15,118,110,.07);color:#12303B}
[data-ui="claro"] .tt-track{background:rgba(16,50,65,.15)}
[data-ui="claro"] .tt-knob{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
[data-ui="claro"] .sb-user .icon-btn{color:#6E8A96}
[data-ui="claro"] .sb-user .icon-btn:hover{color:#12303B;background:rgba(15,118,110,.08)}
[data-ui="claro"] .sb-ver{color:#6E8A96}
[data-ui="claro"] .sb-dev{color:#274653}
[data-ui="claro"] .sb-mail{color:#5B7885}
[data-ui="claro"] .sb-tel{color:#274653}
[data-ui="claro"] .sb-tel svg{color:#0F766E}
[data-ui="claro"] .sb-credit{border-top-color:rgba(16,50,65,.09)}
[data-ui="claro"] .sb-badge{background:var(--brand);color:#fff}
[data-ui="claro"] .sb-overlay{background:rgba(10,35,45,.35)}

/* Variantes oscuras de las interfaces de color */
html[data-ui="azul"][data-theme="dark"]{
  --brand:#3B82F6; --brand-2:#60A5FA; --brand-soft:#0E2144; --brand-ink:#93C5FD;
  --bg:#060D1C; --bg-grad-1:#0A1730; --bg-grad-2:#040A16;
  --surface:#0C1728; --surface-2:#101E33; --surface-3:#152743; --elev:#132238;
  --text:#E6EEFA; --text-2:#B6CAE4; --muted:#8499B8;
  --border:#1D3050; --border-2:#16253E;
  --sb-bg:#050E1F; --sb-bg-2:#03080F; --sb-txt:#C3D6EF; --sb-txt-dim:#7690B4;
  --ok:#34D399; --ok-soft:#0B2B27; --warn:#FBBF24; --warn-soft:#2B2111;
  --err:#F87171; --err-soft:#2C1417; --info:#93C5FD; --info-soft:#101C33;
  --purple:#C4B5FD; --purple-soft:#1B1633;
  --grad-side:linear-gradient(180deg,#071630,#040B18);
}

[data-theme="dark"]{
  --brand-soft:#0E2E2B;
  --brand-ink:#7FE3D3;
  --bg:#080F18;
  --bg-grad-1:#0A1720;
  --bg-grad-2:#070D14;
  --surface:#0F1A26;
  --surface-2:#131F2C;
  --surface-3:#182635;
  --elev:#152231;
  --text:#E7EFF5;
  --text-2:#BCCDD9;
  --muted:#8AA0B0;
  --border:#20303F;
  --border-2:#1A2632;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.35);
  --shadow-lg:0 24px 55px rgba(0,0,0,.55);
  --sb-bg:#08131E;
  --sb-bg-2:#050C13;
  --sb-txt:#C9DCE6;
  --sb-txt-dim:#7C97A6;
  --sb-active:rgba(20,184,166,.15);
  --sb-border:rgba(255,255,255,.06);

  --ok:#34D399;   --ok-soft:#0D2B22;
  --warn:#FBBF24; --warn-soft:#2B2111;
  --err:#F87171;  --err-soft:#2C1417;
  --info:#7DA6FF; --info-soft:#101C33;
  --purple:#C4B5FD; --purple-soft:#1B1633;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--ff);background:
    radial-gradient(1200px 600px at 100% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--bg-grad-1), transparent 60%),
    var(--bg);
  color:var(--text);font-size:14px;line-height:1.5;
  transition:background .25s ease,color .25s ease;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-3);padding:1px 5px;border-radius:5px}
.hidden{display:none !important}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
.mono{font-family:var(--mono)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 32%, transparent);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 55%, transparent);background-clip:content-box}
::selection{background:color-mix(in srgb,var(--brand) 25%, transparent)}

/* Iconos SVG */
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.bc39{stroke:none!important}   /* el código de barras no usa trazo */
/* los QR son SVG con relleno: no deben heredar el trazo de los iconos */
svg.qr, svg[aria-label="Código QR de rastreo"]{width:auto;height:auto;max-width:100%;fill:#0b0b0b;stroke:none !important}
i[data-ic]{display:inline-flex;align-items:center;justify-content:center}

/* ══════════════ LOGIN ══════════════ */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-aside{
  position:relative;overflow:hidden;padding:48px 56px;display:flex;flex-direction:column;gap:40px;
  background:linear-gradient(150deg,#0B3533 0%,#0C2E2C 45%,#071F22 100%);
  color:#DCEDEA;
}
.login-aside::before{
  content:"";position:absolute;inset:auto -120px -180px auto;width:620px;height:620px;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 30% 30%,rgba(20,184,166,.28),transparent 60%);
}
.login-aside::after{
  content:"";position:absolute;top:-160px;right:-80px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(52,211,153,.16),transparent 65%);
}
.login-brand{display:flex;align-items:center;gap:16px;position:relative;z-index:2}
.login-brand h1{font-size:22px;font-weight:700;letter-spacing:-.2px;color:#fff}
.login-brand p{font-size:12.5px;color:#93BFB8;margin-top:2px}
.login-logo,.login-logo-sm,.sb-logo{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;flex:none;overflow:hidden;
  background:linear-gradient(145deg,#19C2A8,#0E8C7F);color:#04201E;font-weight:800;font-size:19px;letter-spacing:-.5px;
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.login-logo img,.login-logo-sm img,.sb-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.login-hero{position:relative;z-index:2;margin-top:auto}
.login-hero h2{font-size:38px;line-height:1.15;font-weight:750;letter-spacing:-1.2px;color:#fff}
.login-hero h2 em{font-style:normal;background:linear-gradient(90deg,#34D399,#5EEAD4);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-hero p{margin-top:16px;max-width:430px;color:#A9CBC5;font-size:14.5px;line-height:1.65}
.login-features{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative;z-index:2}
.login-features li{display:flex;gap:12px;align-items:flex-start}
.lf-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(52,211,153,.16);color:#5EEAD4;font-size:12px;font-weight:800;border:1px solid rgba(94,234,212,.25)}
.login-features b{display:block;font-size:13.5px;color:#E4F4F1;font-weight:600}
.login-features small{color:#8FB3AE;font-size:12px}
.login-foot{position:relative;z-index:2;font-size:11.5px;color:#6E938E;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}

.login-main{display:grid;place-items:center;padding:40px 28px;background:var(--bg)}
.login-card{
  width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:34px;box-shadow:var(--shadow-lg);position:relative;
}
.login-card .login-logo-sm{width:46px;height:46px;border-radius:13px;font-size:16px;margin-bottom:18px;background:linear-gradient(145deg,var(--brand-2),var(--brand));color:#fff}
.login-card h2{font-size:24px;letter-spacing:-.5px}
.login-card .sub{color:var(--muted);font-size:13px;margin-top:6px;margin-bottom:22px}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:7px}
.input-ic{position:relative;display:flex;align-items:center}
.input-ic svg{position:absolute;left:13px;width:17px;height:17px;color:var(--muted);pointer-events:none}
.input-ic input{width:100%;padding:12px 42px 12px 40px;border:1.5px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--text);outline:none;transition:.18s}
.input-ic input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.eye{position:absolute;right:8px;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--muted)}
.eye:hover{background:var(--surface-3);color:var(--text)}
.login-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px;font-size:12.5px}
.chk{display:flex;gap:7px;align-items:center;color:var(--text-2);cursor:pointer;user-select:none}
.chk input{accent-color:var(--brand);width:15px;height:15px}
.link{color:var(--brand);font-size:12.5px;font-weight:600}
.link:hover{text-decoration:underline}
.btn-login{
  width:100%;padding:13px;border-radius:11px;font-weight:700;font-size:14.5px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 32%,transparent);
  transition:.18s;
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 12px 26px color-mix(in srgb,var(--brand) 40%,transparent)}
.btn-login:active{transform:translateY(0)}
.login-hint{margin-top:20px;padding:11px 13px;border-radius:10px;background:var(--brand-soft);border:1px dashed color-mix(in srgb,var(--brand) 35%,transparent);font-size:12px;color:var(--text-2)}
.login-hint b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--brand);margin-bottom:2px}
.alert{padding:11px 13px;border-radius:10px;background:var(--err-soft);color:var(--err);border:1px solid color-mix(in srgb,var(--err) 28%,transparent);font-size:12.5px;margin-bottom:14px;font-weight:600;display:flex;gap:8px;align-items:center}

/* ══════════════ APP SHELL ══════════════ */
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex:none;position:fixed;inset:0 auto 0 0;z-index:60;
  background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg-2));
  color:var(--sb-txt);display:flex;flex-direction:column;border-right:1px solid var(--sb-border);
  transition:transform .25s ease;
}
.sidebar::after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,rgba(20,184,166,.35),transparent)}
.sb-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:22px 16px 26px;text-align:center}
.sb-logo{width:62px;height:62px;border-radius:19px;font-size:16px}
.sb-brand-txt b{display:block;color:#fff;font-size:17.5px;letter-spacing:-.3px;line-height:1.15;font-weight:800}
.sb-brand-txt small{display:block;margin-top:2px;color:var(--sb-txt-dim);font-size:12px;letter-spacing:.2px;font-weight:600}
.sb-nav{flex:1;overflow-y:auto;padding:6px 12px 12px}
.sb-nav::-webkit-scrollbar{width:6px}
.sb-label{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--sb-txt-dim);font-weight:700;padding:14px 12px 7px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9.5px 12px;border-radius:10px;color:var(--sb-txt);
  font-size:13.2px;font-weight:500;cursor:pointer;position:relative;margin-bottom:2px;transition:.16s;
}
.nav-item svg{width:18px;height:18px;opacity:.8}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(20,184,166,.22),rgba(20,184,166,.06));color:#fff;font-weight:650;box-shadow:inset 0 0 0 1px rgba(94,234,212,.14)}
.nav-item.active svg{opacity:1;color:#5EEAD4}
.sb-badge{margin-left:auto;background:var(--brand-2);color:#04211F;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:20px;font-style:normal}
.sb-foot{padding:10px 14px 14px;border-top:1px solid var(--sb-border);display:grid;gap:10px}
.theme-toggle{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border-radius:9px;color:var(--sb-txt-dim);font-size:12px}
.theme-toggle:hover{background:rgba(255,255,255,.05);color:#fff}
.tt-track{width:34px;height:19px;border-radius:20px;background:rgba(255,255,255,.14);position:relative;flex:none;transition:.2s}
.tt-knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.22s}
[data-theme="dark"] .tt-knob{left:17px;background:var(--brand-2)}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px;background:rgba(255,255,255,.045)}
.sb-user-txt{min-width:0;flex:1}
.sb-user-txt b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-txt small{display:block;font-size:10.5px;color:var(--sb-txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,#19C2A8,#0E8C7F);color:#fff;font-weight:700;font-size:12px;letter-spacing:.3px}
.avatar.sm{width:30px;height:30px;font-size:11px}
.sb-user .icon-btn{color:var(--sb-txt-dim);width:30px;height:30px}
.sb-user .icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}

.sb-overlay{position:fixed;inset:0;background:rgba(4,16,22,.5);backdrop-filter:blur(2px);z-index:55;opacity:0;pointer-events:none;transition:.22s}
.sb-overlay.open{opacity:1;pointer-events:auto}
.main{flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:11px 26px;
  background:color-mix(in srgb,var(--surface) 88%, transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.8px;color:var(--muted);white-space:nowrap;flex:none;max-width:44vw;overflow:hidden}
.crumbs b{overflow:hidden;text-overflow:ellipsis}
.crumbs b{color:var(--text);font-weight:650;font-size:13.5px}
.top-search{position:relative;display:flex;align-items:center;margin-left:auto;flex:1 1 180px;max-width:330px;min-width:0}
.top-search svg{position:absolute;left:11px;color:var(--muted);width:16px;height:16px}
.top-search input{width:100%;min-width:0;text-overflow:ellipsis;padding:8px 12px 8px 34px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);font-size:12.8px;outline:none;transition:.16s}
.top-search input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.top-right{display:flex;align-items:center;gap:6px;flex:none}
.chip-date,.chip-cash{white-space:nowrap;flex:none;font-size:11.8px;padding:5px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);white-space:nowrap;font-weight:550}
.chip-cash{display:inline-flex;gap:6px;align-items:center;color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 22%,transparent)}
.chip-cash.closed{color:var(--muted);background:var(--surface-2);border-color:var(--border)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.icon-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--text-2);transition:.15s;position:relative}
.menu-btn{display:none}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}
.user-pill{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border-radius:11px;cursor:pointer;position:relative;border:1px solid transparent;transition:.15s}
.user-pill:hover{background:var(--surface-2);border-color:var(--border)}
.up-txt{line-height:1.25;max-width:150px}
.up-txt b{display:block;font-size:12.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-txt small{display:block;font-size:10.6px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-pill>svg{width:14px;height:14px;color:var(--muted)}
.dropdown{
  position:absolute;top:calc(100% + 8px);right:0;min-width:232px;background:var(--elev);border:1px solid var(--border);
  border-radius:13px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:80;
}
.dropdown.open{display:block;animation:pop .14s ease}
@keyframes pop{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
.dropdown button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:8px;font-size:12.8px;color:var(--text-2);text-align:left}
.dropdown button:hover{background:var(--surface-2);color:var(--text)}
.dropdown button svg{width:16px;height:16px;color:var(--muted)}
.dropdown button.danger{color:var(--err)}
.dropdown button.danger svg{color:var(--err)}
.dropdown hr{border:0;border-top:1px solid var(--border-2);margin:5px 4px}

.view{padding:22px 26px 40px;flex:1;max-width:1600px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head .ph-txt{flex:1;min-width:240px}
.page-head h1{font-size:24px;letter-spacing:-.7px;font-weight:750}
.page-head p{color:var(--muted);font-size:13px;margin-top:4px}
.page-actions{display:flex;gap:9px;flex-wrap:wrap}
.eyebrow{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--brand);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--brand);border-radius:2px}

/* ══════════════ BOTONES ══════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:10px;
  font-weight:650;font-size:13px;border:1px solid var(--border);background:var(--surface);color:var(--text);
  transition:.16s;white-space:nowrap;line-height:1.2;
}
.btn svg{width:16px;height:16px}
.btn:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 26%,transparent)}
.btn-primary:hover{filter:brightness(1.05);background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.btn-soft{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 22%,transparent);color:var(--brand)}
.btn-soft:hover{background:color-mix(in srgb,var(--brand) 14%,var(--surface))}
.btn-danger{background:var(--err-soft);border-color:color-mix(in srgb,var(--err) 26%,transparent);color:var(--err)}
.btn-danger:hover{background:color-mix(in srgb,var(--err) 14%,var(--surface))}
.btn-ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 26%,transparent);color:var(--ok)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-lg{padding:12px 20px;font-size:14px;border-radius:12px}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn-icon-only{width:34px;height:34px;padding:0}
.btn-block{width:100%}

/* ══════════════ TARJETAS ══════════════ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--border-2)}
.card-head h3{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
.card-head p{font-size:12px;color:var(--muted);margin-top:2px}
.card-head .spacer{flex:1}
.card-body{padding:18px}
.card-foot{padding:13px 18px;border-top:1px solid var(--border-2);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.grid{display:grid;gap:16px}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-2-1{grid-template-columns:1.6fr .9fr;align-items:start}
.g-1-2{grid-template-columns:.9fr 1.6fr;align-items:start}

/* KPIs */
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 17px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:.2s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:color-mix(in srgb,var(--kpi-color,var(--brand)) 8%,transparent)}
.kpi-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kpi-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--kpi-color,var(--brand)) 13%,transparent);color:var(--kpi-color,var(--brand));flex:none}
.kpi-ic svg{width:18px;height:18px}
.kpi-lbl{font-size:11.5px;color:var(--muted);font-weight:650;text-transform:uppercase;letter-spacing:.5px}
.kpi-val{font-size:26px;font-weight:760;letter-spacing:-1.1px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-val small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;margin-right:2px}
.kpi-sub{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.7px;color:var(--muted);font-weight:550}
.trend{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:6px;font-size:11px;font-weight:700}
.trend.up{background:var(--ok-soft);color:var(--ok)}
.trend.down{background:var(--err-soft);color:var(--err)}
.trend.flat{background:var(--surface-3);color:var(--muted)}
.trend svg{width:11px;height:11px;stroke-width:2.6}

/* Barras chart */
.bars{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end;min-width:0}
.bar-stack{width:100%;max-width:42px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:100%;position:relative}
.bar{width:100%;border-radius:5px 5px 3px 3px;min-height:3px;transition:height .5s cubic-bezier(.3,1.2,.4,1);position:relative}
.bar:hover{filter:brightness(1.12)}
.bar.ing{background:linear-gradient(180deg,var(--brand-2),var(--brand))}
.bar.egr{background:linear-gradient(180deg,#F58A7A,#DB5A46)}
.bar-lbl{font-size:10.6px;color:var(--muted);white-space:nowrap}
.bar-val{font-size:10.4px;color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.legend{display:flex;gap:14px;font-size:11.6px;color:var(--text-2);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-weight:550}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* Donut */
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{width:150px;height:150px;border-radius:50%;position:relative;flex:none;display:grid;place-items:center}
.donut::before{content:"";position:absolute;inset:17px;background:var(--surface);border-radius:50%}
.donut-mid{position:relative;z-index:2;text-align:center;line-height:1.15}
.donut-mid b{display:block;font-size:19px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.donut-mid small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:700}
.donut-legend{display:grid;gap:9px;flex:1;min-width:150px}
.dl-row{display:flex;align-items:center;gap:8px;font-size:12.3px}
.dl-row i{width:9px;height:9px;border-radius:3px;flex:none}
.dl-row span{color:var(--text-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-row b{font-variant-numeric:tabular-nums;font-size:12.3px}

/* Tablas */
.table-wrap{overflow-x:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.6px}
table.tbl th{
  text-align:left;font-size:10.8px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
  font-weight:750;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--border-2);vertical-align:middle}
table.tbl tbody tr{transition:.13s}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.r,table.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
table.tbl td.c,table.tbl th.c{text-align:center}
.tbl-empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:13px}
.tbl-empty svg{width:38px;height:38px;color:color-mix(in srgb,var(--muted) 45%,transparent);margin-bottom:10px}
.cell-strong{font-weight:650;color:var(--text)}
.cell-sub{font-size:11.5px;color:var(--muted);margin-top:1px}
.actions-cell{display:flex;gap:4px;justify-content:flex-end}
.mini-btn{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent}
.mini-btn svg{width:15px;height:15px}
.mini-btn:hover{background:var(--surface-3);color:var(--brand);border-color:var(--border)}
.mini-btn.del:hover{color:var(--err);background:var(--err-soft)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.1px;white-space:nowrap}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.badge.b-ok{background:var(--ok-soft);color:var(--ok)}
.badge.b-warn{background:var(--warn-soft);color:var(--warn)}
.badge.b-err{background:var(--err-soft);color:var(--err)}
.badge.b-info{background:var(--info-soft);color:var(--info)}
.badge.b-mut{background:var(--surface-3);color:var(--muted)}
.badge.b-purple{background:var(--purple-soft);color:var(--purple)}
.badge.plain::before{display:none}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;background:var(--surface-3);color:var(--text-2);font-size:11px;font-weight:600;white-space:nowrap}

/* Formularios */
.form-grid{display:grid;gap:14px}
.form-grid.cols-2{grid-template-columns:1fr 1fr}
.form-grid.cols-3{grid-template-columns:1.2fr 1fr 1fr}
.form-grid.cols-3b{grid-template-columns:1.6fr 1fr 1fr}
.form-grid.cols-4{grid-template-columns:1.2fr .9fr 1fr 1fr}
.fg{display:grid;gap:6px;min-width:0}
.fg>label{font-size:11.7px;font-weight:650;color:var(--text-2);display:flex;align-items:center;gap:5px}
.fg>label .req{color:var(--err)}
.inp,select.inp,textarea.inp{
  width:100%;min-width:0;max-width:100%;padding:9px 11px;border:1.4px solid var(--border);border-radius:9px;background:var(--surface-2);
  color:var(--text);outline:none;transition:.15s;font-size:13px;
}
select.inp{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23768b96' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;padding-right:30px}
.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.inp::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
.inp:disabled,.inp[readonly]{background:var(--surface-3);color:var(--text-2);cursor:not-allowed}
textarea.inp{resize:vertical;min-height:70px;line-height:1.5}
.inp.err{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 12%,transparent)}
.hint{font-size:11px;color:var(--muted)}
.inp-group{display:flex;gap:7px}
.inp-group .inp{flex:1}
.inp-money{position:relative}
.inp-money .pfx{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);font-weight:650;pointer-events:none}
.inp-money .inp{padding-left:36px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;font-size:12.6px;font-weight:600;color:var(--text-2)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.sw-track{width:38px;height:21px;border-radius:20px;background:var(--surface-3);border:1px solid var(--border);position:relative;transition:.2s;flex:none}
.sw-knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s;border:1px solid rgba(0,0,0,.06)}
.switch input:checked+.sw-track{background:var(--brand);border-color:var(--brand)}
.switch input:checked+.sw-track .sw-knob{left:19px}
.switch input:focus-visible+.sw-track{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.check-line{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--text-2);cursor:pointer}
.check-line input{margin-top:2px;accent-color:var(--brand);width:15px;height:15px;flex:none}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:10px;border:2px solid transparent;cursor:pointer;position:relative;transition:.15s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatch:hover{transform:scale(1.07)}
.swatch.sel{border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.swatch.sel::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;padding-bottom:0}
.tab{padding:10px 14px;font-size:13px;font-weight:650;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:6px;border-radius:8px 8px 0 0}
.tab svg{width:15px;height:15px}
.tab:hover{color:var(--text);background:var(--surface-2)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand);background:transparent}

/* Filtros */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.filters .inp{width:auto;min-width:140px}
.filters .search{min-width:230px;padding-left:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23768b96' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:9px center;background-size:15px}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(6,20,26,.55);backdrop-filter:blur(3px);z-index:100;opacity:0;pointer-events:none;transition:.2s}
.modal-back.open{opacity:1;pointer-events:auto}
.modal{
  position:fixed;z-index:101;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;
  width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 60px);display:flex;flex-direction:column;
  background:var(--elev);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  transition:.2s cubic-bezier(.2,.9,.3,1);
}
.modal.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.modal.wide{width:min(1000px,calc(100vw - 32px))}
.modal.narrow{width:min(460px,calc(100vw - 32px))}
.modal.xwide{width:min(1240px,calc(100vw - 24px))}
.modal-head{display:flex;align-items:center;gap:12px;padding:17px 20px;border-bottom:1px solid var(--border-2)}
.modal-head h3{font-size:16px;font-weight:720;letter-spacing:-.3px;flex:1}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-foot{display:flex;gap:9px;justify-content:flex-end;align-items:center;padding:14px 20px;border-top:1px solid var(--border-2);background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl);flex-wrap:wrap}
.modal-foot .left{margin-right:auto;display:flex;gap:9px;align-items:center}

/* Popup Destino */
.modal.destino{width:min(540px,calc(100vw - 32px))}
.dest-modal{display:grid;gap:18px}
.dm-head h3{font-size:12.6px;font-weight:700;letter-spacing:.2px;color:var(--text-2);margin-bottom:8px}
.dm-select{width:100%}
#fDestInput.dest-input{cursor:pointer}

/* Toasts */
.toasts{position:fixed;bottom:22px;left:calc(var(--sidebar-w) + 22px);z-index:200;display:grid;gap:9px;max-width:370px}
.toast{
  display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:12px;background:var(--elev);
  border:1px solid var(--border);box-shadow:var(--shadow-lg);animation:slideIn .26s cubic-bezier(.2,1,.3,1);
  border-left:3px solid var(--t-color,var(--brand));font-size:12.8px;
}
.toast.out{animation:slideOut .25s forwards}
.toast .t-ic{color:var(--t-color,var(--brand));flex:none;margin-top:1px}
.toast b{display:block;font-size:12.9px;margin-bottom:1px}
.toast span{color:var(--muted);font-size:12px;line-height:1.45}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes slideOut{to{opacity:0;transform:translateX(30px)}}

/* Nuevo envío */
.pos-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.85fr);gap:16px;align-items:start}
.guia-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);margin-bottom:16px;
}
.guia-brand{font-size:19px;font-weight:800;letter-spacing:-.6px;color:var(--brand);display:flex;align-items:center;gap:9px}
.guia-brand svg{width:22px;height:22px}
.guia-num{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 12px;border:1.6px solid var(--border);border-radius:9px;background:var(--surface-2)}
.guia-num label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.guia-num b{font-family:var(--mono);font-size:15px;color:var(--err);letter-spacing:.4px;font-weight:700}
.guia-status{display:flex;align-items:center;gap:8px;margin-left:auto}
.section-title{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.section-title svg{width:14px;height:14px;color:var(--brand)}
.party-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.party{display:flex;gap:7px;align-items:flex-end}
.party .fg{flex:1}
.party-add{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);margin-bottom:2px}
.party-add:hover{background:color-mix(in srgb,var(--ok) 18%,var(--surface))}
.party-add svg{width:16px;height:16px}
.items-scroll{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:10px}
.items-table{width:100%;border-collapse:collapse;font-size:12.7px}
.items-table th{font-size:10.3px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:8px 9px;border-bottom:1px solid var(--border);background:var(--surface-2);position:sticky;top:0;z-index:2;text-align:left}
.items-table td{padding:5px 7px;border-bottom:1px solid var(--border-2)}
.items-table tr:last-child td{border-bottom:0}
.items-table input{width:100%;border:1px solid transparent;background:transparent;padding:5px 6px;border-radius:6px;font-size:12.7px;outline:none}
.items-table input:hover{background:var(--surface-2);border-color:var(--border-2)}
.items-table input:focus{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)}
.items-table .qty{width:58px;text-align:center;font-weight:700}
.items-table .importe{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--text-2);white-space:nowrap}
.items-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:12.3px}
.row-del{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.row-del:hover{color:var(--err);background:var(--err-soft)}
.row-del svg{width:13px;height:13px}

.cobro-card{position:sticky;top:82px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-md)}
.cc-head{background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;padding:13px 16px;display:flex;align-items:center;justify-content:space-between}
.cc-head h3{font-size:13.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.cc-head small{font-family:var(--mono);font-size:11.5px;opacity:.9}
.detail-list{padding:6px 16px 10px;font-size:12.4px}
.dl-item{display:flex;gap:10px;padding:5.5px 0;border-bottom:1px dashed var(--border-2)}
.dl-item:last-child{border-bottom:0}
.dl-item span{color:var(--muted);min-width:118px;flex:none}
.dl-item b{font-weight:600;text-align:right;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-item .badge{justify-content:center}
.totals-block{padding:0 16px 10px;font-size:12.6px}
.tr{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.tr span{color:var(--muted)}
.tr b{font-variant-numeric:tabular-nums;font-weight:650}
.total-box{margin:6px 16px 12px;padding:12px 14px;border-radius:11px;background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 10%,var(--surface)),color-mix(in srgb,var(--brand-2) 14%,var(--surface)));border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);display:flex;align-items:center;justify-content:space-between}
.total-box .t-lbl{font-size:16px;font-weight:800;letter-spacing:-.3px}
.total-box .t-val{font-size:24px;font-weight:800;letter-spacing:-1px;color:var(--brand);font-variant-numeric:tabular-nums}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 16px 10px}
.pay-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:9px;border:1.4px solid var(--border);background:var(--surface-2);font-size:12px;font-weight:650;color:var(--text-2);transition:.15s}
.pay-btn svg{width:14px;height:14px;color:var(--muted)}
.pay-btn:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));background:var(--surface)}
.pay-btn.sel{border-color:var(--pay,var(--brand));background:color-mix(in srgb,var(--pay,var(--brand)) 10%,var(--surface));color:var(--pay,var(--brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--pay,var(--brand)) 12%,transparent)}
.pay-btn.sel svg{color:var(--pay,var(--brand))}
.cc-actions{padding:0 16px 16px;display:grid;gap:8px}
.action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 8px;border-radius:10px;font-size:12.6px;font-weight:700;transition:.16s;border:1px solid transparent}
.act svg{width:16px;height:16px}
.act:hover{transform:translateY(-1px);filter:brightness(1.04)}
.act-pay{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 22%,transparent)}
.act-reprint{background:var(--surface-3);color:var(--text-2);border-color:var(--border)}
.act-cash{background:var(--purple-soft);color:var(--purple);border-color:color-mix(in srgb,var(--purple) 22%,transparent)}
.act-calc{background:var(--err-soft);color:var(--err);border-color:color-mix(in srgb,var(--err) 22%,transparent)}
.act-charge{background:linear-gradient(135deg,#16A34A,#0E9F6E);color:#fff;font-size:19px;font-weight:800;
  letter-spacing:2.4px;padding:14px;border-radius:12px;box-shadow:0 10px 24px rgba(14,159,110,.3);
  display:flex;align-items:center;justify-content:center;gap:11px}
.act-charge svg{width:22px;height:22px;stroke-width:2.1;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.act-charge:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(14,159,110,.36)}

/* Calculadora */
.calc{display:grid;gap:10px}
.calc-disp{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:13px 14px;text-align:right;font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.5px;overflow:hidden;min-height:56px;display:flex;align-items:center;justify-content:flex-end}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.calc-key{padding:13px 0;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);font-weight:700;font-size:15px;transition:.12s}
.calc-key:hover{background:var(--surface-3)}
.calc-key:active{transform:scale(.96)}
.calc-key.op{background:var(--brand-soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 20%,transparent)}
.calc-key.eq{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.calc-key.fn{background:var(--err-soft);color:var(--err);border-color:color-mix(in srgb,var(--err) 18%,transparent)}

/* Empty state */
.empty{text-align:center;padding:54px 24px;color:var(--muted)}
.empty .em-ic{width:64px;height:64px;border-radius:20px;background:var(--surface-3);display:grid;place-items:center;margin:0 auto 16px;color:var(--muted)}
.empty .em-ic svg{width:28px;height:28px}
.empty h3{font-size:16px;color:var(--text);margin-bottom:6px}
.empty p{font-size:13px;max-width:380px;margin:0 auto 18px}

/* Preview impresión */
.pv-wrap{background:var(--surface-3);border-radius:12px;padding:16px;display:block;overflow:auto;max-height:70vh;text-align:center}
.pv-scale{transform-origin:top center;display:inline-block;text-align:left}
.pv-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px;padding:10px 13px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border)}
.pv-toolbar .pv-info{font-size:12px;color:var(--muted);flex:1;min-width:180px}
.seg{display:inline-flex;background:var(--surface-3);border-radius:9px;padding:3px;gap:2px;border:1px solid var(--border)}
.seg button{padding:6px 12px;border-radius:7px;font-size:12px;font-weight:650;color:var(--muted)}
.seg button.sel{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm)}

/* Timeline / actividad */
.feed{display:grid;gap:0}
.feed-item{display:flex;gap:11px;padding:11px 0;border-bottom:1px dashed var(--border-2);position:relative}
.feed-item:last-child{border-bottom:0}
.feed-ic{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--text-2)}
.feed-ic svg{width:14px;height:14px}
.feed-body{flex:1;min-width:0}
.feed-body b{font-size:12.5px;display:block}
.feed-body small{font-size:11.4px;color:var(--muted)}
.feed-amt{font-size:12.4px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Usuarios */
.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.user-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px;box-shadow:var(--shadow-sm);display:flex;gap:12px;transition:.18s;position:relative}
.user-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.user-card .uc-body{flex:1;min-width:0}
.user-card h4{font-size:13.6px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.user-card .uc-mail{font-size:11.8px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-card .uc-foot{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}
.avatar.lg{width:44px;height:44px;font-size:15px;border-radius:14px}
.role-list{display:grid;gap:10px}
.role-card{border:1px solid var(--border);border-radius:12px;padding:13px 15px;background:var(--surface-2)}
.role-card h4{font-size:13.3px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.role-card p{font-size:12px;color:var(--muted)}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 16px;margin-top:10px}
.perm{display:flex;align-items:center;gap:8px;font-size:12.2px;color:var(--text-2)}
.perm input{accent-color:var(--brand);width:15px;height:15px}

/* Configuración */
.cfg-layout{display:grid;grid-template-columns:214px minmax(0,1fr);gap:18px;align-items:start}
.cfg-nav{display:grid;gap:3px;position:sticky;top:82px}
.cfg-nav button{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;font-size:12.8px;font-weight:600;color:var(--text-2);text-align:left;border:1px solid transparent}
.cfg-nav button svg{width:16px;height:16px;color:var(--muted)}
.cfg-nav button:hover{background:var(--surface-2)}
.cfg-nav button.active{background:var(--brand-soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 18%,transparent)}
.cfg-nav button.active svg{color:var(--brand)}
.logo-drop{border:2px dashed var(--border);border-radius:14px;padding:18px;display:flex;gap:16px;align-items:center;background:var(--surface-2);transition:.18s}
.logo-drop:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--border));background:var(--brand-soft)}
.logo-box{width:76px;height:76px;border-radius:16px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--brand)}
.logo-box img{width:100%;height:100%;object-fit:contain;background:#fff}
.theme-pick{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.theme-opt{border:2px solid var(--border);border-radius:12px;padding:11px;cursor:pointer;transition:.17s;background:var(--surface-2)}
.theme-opt:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border))}
.theme-opt.sel{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.theme-opt .to-prev{height:52px;border-radius:8px;display:flex;overflow:hidden;margin-bottom:9px;border:1px solid var(--border)}
.theme-opt .to-prev .tp-side{width:30%;display:flex;flex-direction:column;gap:3px;padding:5px 4px}
.theme-opt .to-prev .tp-side i{display:block;height:3px;border-radius:2px;opacity:.85}
.theme-opt .to-prev .tp-main{flex:1;padding:5px;display:flex;flex-direction:column;gap:3px}
.theme-opt .to-prev .tp-main i{display:block;border-radius:2px}
.theme-opt .to-prev .tp-row{display:flex;gap:3px}
.theme-opt .to-prev .tp-row i{flex:1}
.theme-opt b{font-size:12.3px;display:block}
.theme-opt small{font-size:11px;color:var(--muted)}
.range-row{display:flex;align-items:center;gap:11px}
input[type=range]{flex:1;accent-color:var(--brand);height:4px}
.legend-preview{border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--surface-2);font-size:11.6px;color:var(--text-2);white-space:pre-wrap;line-height:1.55;max-height:170px;overflow:auto}

/* Caja */
.cash-hero{border-radius:var(--r-lg);padding:20px;background:linear-gradient(125deg,var(--brand),#0C5F58 60%,var(--brand-2));color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.cash-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}
.cash-hero .ch-lbl{font-size:11.3px;text-transform:uppercase;letter-spacing:1.2px;opacity:.78;font-weight:700}
.cash-hero .ch-val{font-size:34px;font-weight:800;letter-spacing:-1.6px;margin:3px 0 2px;font-variant-numeric:tabular-nums}
.cash-hero .ch-sub{font-size:12.3px;opacity:.85}
.cash-hero .ch-actions{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap;position:relative;z-index:2}
.cash-hero .btn{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(4px)}
.cash-hero .btn:hover{background:rgba(255,255,255,.24)}
.cash-hero .btn.solid{background:#fff;color:var(--brand);border-color:#fff}
.cash-hero.closed{background:linear-gradient(125deg,#334B54,#1E3038 60%,#2A4650)}
.mini-stat{display:grid;gap:3px;padding:11px 13px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border)}
.mini-stat small{font-size:10.8px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.mini-stat b{font-size:17px;font-weight:750;letter-spacing:-.5px;font-variant-numeric:tabular-nums}

/* Guía detalle / impresión cards */
.doc-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);margin-bottom:8px}
.doc-row .dr-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none}
.doc-row .dr-txt{flex:1;min-width:0}
.doc-row b{font-size:12.8px;display:block}
.doc-row small{font-size:11.4px;color:var(--muted)}
.doc-row .dr-actions{display:flex;gap:5px}

/* Responsive */
@media (max-width:1400px){ .chip-date{display:none} }
@media (max-width:1160px){ .chip-cash{display:none} .up-txt{display:none} }
@media (max-width:1240px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos-layout{grid-template-columns:1fr}
  .cobro-card{position:static}
  .g-2-1,.g-1-2{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .top-search{display:none}
  .up-txt{display:none}
  .cfg-layout{grid-template-columns:1fr}
  .cfg-nav{position:static;display:flex;overflow-x:auto;padding-bottom:4px}
  .cfg-nav button{white-space:nowrap}
}
@media (max-width:900px){
  .toasts{left:12px}
  .sidebar{height:var(--vh);bottom:auto;overflow-y:auto;overscroll-behavior:contain}
  .sb-nav{flex:none}
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .menu-btn{display:grid}
  .view{padding:18px 15px 40px}
  .topbar{padding:10px 14px;gap:8px}
  .login-wrap{grid-template-columns:1fr}
  .login-aside{display:none}
  .logo-drop{flex-direction:column;align-items:flex-start}
}
@media (max-width:760px){
  .form-grid.cols-2,.form-grid.cols-3,.form-grid.cols-3b,.form-grid.cols-4{grid-template-columns:1fr 1fr}
  .form-grid.cols-3b>*:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .form-grid.cols-2,.form-grid.cols-3,.form-grid.cols-3b,.form-grid.cols-4{grid-template-columns:1fr}
}
@media (max-width:640px){
  .g-4,.g-3,.g-2,.g-2-1{grid-template-columns:1fr}
  .grid{min-width:0}
  .card,.card-body{min-width:0}
  /* Gráfico de barras: no desborda en móvil */
  .bars{gap:5px;height:150px}
  .bar-col{min-width:0}
  .bar-lbl{font-size:8.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bar-val{font-size:8.6px;white-space:nowrap}
  .bar-stack{width:100%}
  .chip-date,.chip-cash{display:none}
  .page-head h1{font-size:20px}
  .pay-grid{grid-template-columns:1fr 1fr}
  .party-row{grid-template-columns:1fr}
  .modal{width:calc(100vw - 20px);max-height:calc(100vh - 30px)}
  .toasts{left:12px;right:12px;bottom:12px;max-width:none}
  .theme-pick{grid-template-columns:1fr}
  .items-table .hide-sm{display:none}
}

/* ══════════════════════════════════════════════════════════════
   SEGUIMIENTO · tarjeta de rastreo (sistema) y portal público
   ══════════════════════════════════════════════════════════════ */

/* ── Progreso tipo pasos ── */
.trk-steps{display:flex;align-items:flex-start;gap:0;position:relative}
.trk-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;min-width:0}
.trk-step::before{content:"";position:absolute;top:15px;left:0;right:50%;height:3px;background:var(--border);border-radius:2px}
.trk-step::after{content:"";position:absolute;top:15px;left:50%;right:0;height:3px;background:var(--border);border-radius:2px}
.trk-step:first-child::before,.trk-step:last-child::after{display:none}
.trk-step.done::before,.trk-step.done::after{background:var(--brand)}
.trk-step.current::after{background:linear-gradient(90deg,var(--brand) 0%,var(--border) 100%)}
.trk-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2.5px solid var(--border);
  color:var(--muted);font-size:12px;font-weight:800;position:relative;z-index:2;transition:.2s}
.trk-dot svg{width:15px;height:15px;stroke-width:3}
.trk-step.done .trk-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.trk-step.current .trk-dot{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 18%,transparent);border-color:var(--brand);color:var(--brand);background:var(--surface)}
.trk-step.done.current .trk-dot{color:#fff;background:var(--brand)}
.trk-lbl{font-size:11.4px;color:var(--muted);text-align:center;font-weight:600;line-height:1.25;max-width:100%}
.trk-step.done .trk-lbl,.trk-step.current .trk-lbl{color:var(--text);font-weight:700}

/* ── Línea de tiempo ── */
.trk-timeline{display:grid;gap:0;position:relative;padding-left:4px}
.trk-ev{display:flex;gap:12px;padding:0 0 14px;position:relative}
.trk-ev:last-child{padding-bottom:0}
.trk-ev::before{content:"";position:absolute;left:5.5px;top:14px;bottom:0;width:2px;background:var(--border-2)}
.trk-ev:last-child::before{display:none}
.trk-ev-dot{width:13px;height:13px;border-radius:50%;flex:none;margin-top:4px;border:3px solid var(--surface);
  box-shadow:0 0 0 2px var(--border);background:var(--brand);position:relative;z-index:2}
.trk-ev.latest .trk-ev-dot{box-shadow:0 0 0 2px var(--brand);background:var(--brand)!important}
.trk-ev-body{min-width:0}
.trk-ev-body b{display:block;font-size:12.8px;line-height:1.3}
.trk-ev-body small{display:block;font-size:11.4px;color:var(--muted);margin-top:1px}
.trk-ev-body p{font-size:12.1px;color:var(--text-2);margin:4px 0 0;line-height:1.45}
.trk-note{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:11px;background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);font-size:11.8px;color:var(--text-2);line-height:1.5}
.trk-note svg{width:15px;height:15px;color:var(--brand);flex:none;margin-top:1px}

/* ── Portal público ── */
.trk-page{background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
.trk-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
.trk-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.trk-header-in{display:flex;align-items:center;gap:16px;height:66px}
.trk-brand{display:flex;align-items:center;gap:11px;min-width:0;color:inherit}
.trk-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;overflow:hidden;
  background:linear-gradient(145deg,var(--brand-2),var(--brand));color:#fff;font-weight:800;font-size:14px}
.trk-brand b{display:block;font-size:14.5px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.trk-brand small{display:block;font-size:11.4px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.trk-header-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.lbl-sm{display:none}
.trk-help{display:inline-flex;align-items:center;gap:6px;font-size:12.6px;color:var(--text-2);font-weight:600;padding:7px 10px;border-radius:9px}
.trk-help:hover{background:var(--surface-2)}
.trk-help svg{width:15px;height:15px;color:var(--brand)}
.trk-main{flex:1;padding-bottom:40px}

.trk-hero{position:relative;overflow:hidden;padding:30px 0 88px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 10%,var(--surface)) 0%,var(--surface) 46%,color-mix(in srgb,var(--brand-2) 9%,var(--surface)) 100%);
  border-bottom:1px solid var(--border)}
.trk-hero::before{content:"";position:absolute;right:-140px;top:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 16%,transparent),transparent 66%)}
.trk-hero-in{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;position:relative;z-index:2;padding-bottom:56px}
.trk-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);padding:5px 11px;border-radius:20px}
.trk-pill svg{width:14px;height:14px}
.trk-hero h1{font-size:38px;line-height:1.12;letter-spacing:-1.3px;font-weight:780;margin:14px 0 10px;color:var(--text)}
.trk-hero-txt p{font-size:14.5px;color:var(--text-2);line-height:1.6;max-width:520px}
.trk-hero-art{display:grid;place-items:center}
.trk-art-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);padding:15px 17px;width:100%;max-width:280px}
.trk-art-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.trk-art-dot{width:10px;height:10px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 20%,transparent);flex:none}
.trk-art-row b{display:block;font-size:12.6px}
.trk-art-row small{font-size:11px;color:var(--muted)}
.trk-art-bar{height:6px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.trk-art-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.trk-art-legend{display:flex;justify-content:space-between;font-size:10.4px;color:var(--muted);margin-top:6px;font-weight:600}

.trk-search{position:relative;z-index:3;margin-top:-52px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-lg);padding:18px}
.trk-search-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end}
.trk-field{display:grid;gap:6px;min-width:0}
.trk-field>span{font-size:11.6px;font-weight:700;color:var(--text-2)}
.trk-field>span b{color:var(--err)}
.trk-input{position:relative;display:flex;align-items:center}
.trk-input>span{position:absolute;left:12px;display:flex;color:var(--muted);pointer-events:none}
.trk-input svg{width:16px;height:16px}
.trk-input input{width:100%;min-width:0;padding:12px 12px 12px 38px;border:1.5px solid var(--border);border-radius:11px;
  background:var(--surface-2);color:var(--text);font-size:13.4px;outline:none;transition:.16s}
.trk-input input:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent)}
.trk-input input.inp-err{border-color:var(--err);box-shadow:0 0 0 4px color-mix(in srgb,var(--err) 12%,transparent)}
.trk-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700;font-size:14px;
  box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 30%,transparent);transition:.16s;white-space:nowrap}
.trk-submit:hover{transform:translateY(-1px);filter:brightness(1.05)}
.trk-submit svg{width:17px;height:17px}
.trk-search-foot{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:11.6px;color:var(--muted)}
.trk-search-foot svg{width:14px;height:14px;color:var(--brand);flex:none}

.trk-results{padding-top:26px}
.trk-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.trk-tip{display:flex;gap:11px;align-items:flex-start;padding:15px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.trk-tip>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--brand-soft);color:var(--brand)}
.trk-tip svg{width:17px;height:17px}
.trk-tip b{display:block;font-size:12.8px;margin-bottom:2px}
.trk-tip small{font-size:11.6px;color:var(--muted);line-height:1.4;display:block}

.trk-alert{display:flex;gap:13px;align-items:flex-start;padding:17px 19px;border-radius:14px;background:var(--err-soft);
  border:1px solid color-mix(in srgb,var(--err) 26%,transparent);animation:pop .2s ease}
.trk-alert-ic{width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--err) 16%,var(--surface));color:var(--err);display:grid;place-items:center;flex:none}
.trk-alert-ic svg{width:19px;height:19px}
.trk-alert b{display:block;font-size:13.6px;color:var(--err);margin-bottom:2px}
.trk-alert p{font-size:12.8px;color:var(--text-2);line-height:1.5;margin:0}

.trk-result{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-md);overflow:hidden;animation:pop .22s ease}
.trk-result-head{display:grid;grid-template-columns:1.1fr auto 1fr;gap:18px;align-items:center;padding:18px 20px;
  border-bottom:1px solid var(--border-2);background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 7%,var(--surface)),var(--surface))}
.trk-result-status{display:flex;align-items:center;gap:12px;min-width:0}
.trk-result-status>div,.trk-result-eta{min-width:0}
.trk-result-status small,.trk-result-eta small{white-space:nowrap}
.trk-result-status b,.trk-result-eta b{overflow-wrap:anywhere}
.trk-rs-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}
.trk-rs-ic svg{width:22px;height:22px}
.trk-result-status small{display:block;font-size:10.6px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:800}
.trk-result-status b{display:block;font-size:19px;letter-spacing:-.4px;color:var(--accent);line-height:1.2}
.trk-result-code{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 16px;border-left:1px solid var(--border-2);border-right:1px solid var(--border-2)}
.trk-result-code small{display:block;font-size:10.4px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:800}
.trk-result-code b{font-size:16px;letter-spacing:.4px;display:block;margin-top:2px}
.trk-code-row{display:inline-flex;align-items:center;gap:6px}
.trk-copy{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--muted);flex:none}
.trk-copy:hover{background:var(--surface-3);color:var(--brand)}
.trk-copy svg{width:14px;height:14px}
.trk-result-eta{text-align:right;min-width:0}
.trk-result-eta small{display:block;font-size:10.6px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:800}
.trk-result-eta b{display:block;font-size:13.6px;margin-top:2px;line-height:1.3}

.trk-progress{display:flex;padding:22px 24px 6px;gap:0}
.trk-pstep{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.trk-pdot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);
  border:2.5px solid var(--border);color:var(--muted);font-weight:800;font-size:9.8px;letter-spacing:.2px;position:relative;z-index:2}
.trk-pdot svg{width:14px;height:14px;stroke-width:3}
.trk-pstep.done .trk-pdot{background:var(--brand);border-color:var(--brand);color:#fff}
.trk-pstep.current .trk-pdot{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.trk-plabel{font-size:9.8px;color:var(--muted);font-weight:600;text-align:center;margin-top:7px;line-height:1.2;word-break:break-word}
.trk-pstep.done .trk-plabel{color:var(--text);font-weight:700}
.trk-pstep.current .trk-plabel{color:var(--brand)}
.trk-pline{position:absolute;top:14px;left:50%;width:100%;height:3px;background:var(--border);border-radius:2px;z-index:1}
.trk-pline.done{background:var(--brand)}

.trk-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px}
.trk-panel h3{display:flex;align-items:center;gap:7px;font-size:12.6px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:11px}
.trk-panel h3 svg{width:15px;height:15px;color:var(--brand)}
.trk-dl{display:grid;gap:0}
.trk-dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border-2);font-size:12.6px}
.trk-dl>div:last-child{border-bottom:0}
.trk-dl span{color:var(--muted);flex:none}
.trk-dl b{font-weight:650;text-align:right;min-width:0;word-break:break-word}
.trk-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.8px;font-weight:600;color:var(--text-2);
  background:var(--surface-3);padding:2px 7px;border-radius:6px;margin-top:5px}
.trk-tag svg{width:12px;height:12px;color:var(--muted)}
.trk-result-foot{display:flex;gap:9px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--border-2);background:var(--surface-2)}
.trk-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;font-size:12.8px;font-weight:650;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:1px solid transparent;transition:.16s}
.trk-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.trk-btn svg{width:15px;height:15px}
.trk-btn.ghost{background:var(--surface);color:var(--text-2);border-color:var(--border)}
.trk-btn.ghost:hover{background:var(--surface-3);color:var(--text)}

.trk-footer{border-top:1px solid var(--border);background:var(--surface);padding:22px 0 14px}
.trk-footer-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.trk-footer b{display:block;font-size:13px}
.trk-footer span{font-size:11.8px;color:var(--muted)}
.trk-foot-links{display:flex;gap:16px;flex-wrap:wrap;font-size:11.8px;color:var(--muted)}
.trk-foot-links a{color:var(--brand);font-weight:600}
.trk-copyright{margin-top:14px;font-size:11px;color:var(--muted);border-top:1px solid var(--border-2);padding-top:11px}

@media (max-width:960px){
  .trk-hero-in{grid-template-columns:1fr}
  .trk-hero-art{display:none}
  .trk-search-grid{grid-template-columns:1fr 1fr}
  .trk-submit{grid-column:1/-1}
  .trk-result-head{grid-template-columns:1fr 1fr;gap:12px}
  .trk-result-code{grid-column:1/-1;grid-row:1;border:0;border-bottom:1px solid var(--border-2);order:-1;padding-bottom:12px}
  .trk-result-eta{text-align:left}
  .trk-result-grid{grid-template-columns:1fr}
  .trk-tips{grid-template-columns:1fr}
}
@media (max-width:640px){
  .trk-hero{padding:22px 0 74px}
  .trk-wrap{padding:0 14px}
  .trk-brand b{font-size:13px;max-width:38vw}
  .trk-hero h1{font-size:27px}
  .trk-hero-txt p{font-size:13.4px}
  .trk-search-grid{grid-template-columns:1fr}
  .trk-header-in{height:60px}
  .trk-brand small{display:none}
  .trk-help .txt{display:none}
  .trk-progress{padding:18px 10px 4px}
  .trk-progress-steps{padding-bottom:6px}
  .trk-pstep{flex:0 0 58px}
  .trk-plabel{font-size:9.4px}
  .trk-result-status b{font-size:16px}
  .trk-result-foot{padding:12px}
  .trk-btn{flex:1;justify-content:center;font-size:12px}
  .trk-step .trk-lbl{font-size:10px}
}

@media (max-width:430px){
  .trk-header-in{gap:10px}
  .trk-brand b{max-width:32vw;font-size:12.4px}
  .trk-header-right .btn .lbl{display:none}
  .trk-header-right .btn .lbl-sm{display:inline}
  .trk-header-right a.btn{padding:8px 9px}
  .trk-help{padding:6px 4px}
}

@media (max-width:560px){
  .trk-result-head{grid-template-columns:1fr;gap:13px;padding:15px 16px}
  .trk-result-code{grid-column:1;grid-row:1;border:0;border-bottom:1px solid var(--border-2);padding:0 0 11px;align-items:flex-start;text-align:left}
  .trk-result-status b{font-size:17px}
  .trk-result-eta{text-align:left;border-top:1px solid var(--border-2);padding-top:10px}
  .trk-result-eta small,.trk-result-eta b{display:inline-block}
  .trk-result-eta small{margin-right:6px}
}

/* formulario de búsqueda interna */
.trk-form{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:13px}
.trk-form .trk-form-actions{grid-column:1/-1;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
@media (max-width:760px){ .trk-form{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════════════
   SEGUIMIENTO · panel de control de envíos (lista + filtros)
   ══════════════════════════════════════════════════════════════ */
:root{
  --j-info:#2563EB; --j-warn:#D97706; --j-purple:#7C3AED; --j-ok:#059669; --j-err:#DC2626;
}
/* ══════════════════════════════════════════════════════════════
   MODOS DE INTERFAZ
   data-ui = verde (por defecto) · azul (azul oscuro) · claro
   data-theme = light | dark  (se combina con data-ui)
   ══════════════════════════════════════════════════════════════ */

/* ── INTERFAZ AZUL (azul oscuro con degradados y brillos) ── */
html[data-ui="azul"]{
  --brand:#1D4ED8;
  --brand-2:#3B82F6;
  --brand-soft:#E8F0FE;
  --brand-ink:#173FA8;

  --bg:#EFF4FD;
  --bg-grad-1:#E6EEFC;
  --bg-grad-2:#F5F8FE;
  --surface:#FFFFFF;
  --surface-2:#F7FAFF;
  --surface-3:#EDF3FE;
  --elev:#FFFFFF;
  --text:#0E1B33;
  --text-2:#33507A;
  --muted:#6B84A6;
  --border:#D8E3F6;
  --border-2:#E9F0FB;
  --shadow-sm:0 1px 2px rgba(14,35,80,.07), 0 1px 3px rgba(14,35,80,.05);
  --shadow-md:0 6px 18px rgba(14,45,110,.09), 0 2px 4px rgba(14,45,110,.05);
  --shadow-lg:0 22px 50px rgba(12,40,100,.16), 0 4px 10px rgba(12,40,100,.07);

  --sb-bg:#0A1F44;
  --sb-bg-2:#071630;
  --sb-txt:#C9D9F2;
  --sb-txt-dim:#7E9AC4;
  --sb-active:rgba(59,130,246,.22);
  --sb-border:rgba(255,255,255,.09);

  --ok:#0E9F6E;   --ok-soft:#E1F7EE;
  --warn:#B45309; --warn-soft:#FEF3E2;
  --err:#B42318;  --err-soft:#FDECEA;
  --info:#1D4ED8; --info-soft:#E6EEFE;
  --purple:#6D28D9; --purple-soft:#F1EBFE;

  /* Degradados del modo azul */
  --grad-brand:linear-gradient(135deg,#1D4ED8 0%,#3B82F6 55%,#22D3EE 100%);
  --grad-side:linear-gradient(180deg,#0A1F44 0%,#0C2A5C 55%,#071630 100%);
  --grad-panel:linear-gradient(120deg,#163E8F 0%,#1D4ED8 45%,#2563EB 70%,#14B8A6 100%);
  --glow:0 10px 30px rgba(37,99,235,.28);
}

/* ── INTERFAZ VERDE (actual, por defecto) ── */
:root, [data-ui="verde"]{
  --grad-brand:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%);
  --grad-side:linear-gradient(180deg,#0C2E2C,#082321);
  --grad-panel:linear-gradient(120deg,#0B3A37 0%,#0F766E 55%,#14B8A6 100%);
  --glow:0 10px 30px rgba(20,184,166,.26);
}
html[data-ui="azul"]{
  --grad-brand:linear-gradient(135deg,#1D4ED8 0%,#3B82F6 55%,#22D3EE 100%);
  --grad-side:linear-gradient(180deg,#0A1F44 0%,#0C2A5C 55%,#071630 100%);
  --grad-panel:linear-gradient(120deg,#163E8F 0%,#1D4ED8 45%,#2563EB 70%,#14B8A6 100%);
  --glow:0 10px 30px rgba(37,99,235,.28);
}
html[data-ui="claro"]{
  --grad-brand:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%);
  --grad-side:linear-gradient(180deg,#FFFFFF,#F1F7F8);
  --grad-panel:linear-gradient(120deg,#0B3A37 0%,#0F766E 55%,#14B8A6 100%);
  --glow:0 10px 26px rgba(15,118,110,.20);
}

/* ── INTERFAZ CLARA (alta luminosidad, gris azulado suave) ── */
html[data-ui="claro"]{
  --brand:#0F766E;
  --brand-2:#14B8A6;
  --brand-soft:#E9F7F4;
  --brand-ink:#0B4F4A;

  --bg:#F7F9FB;
  --bg-grad-1:#EFF6F6;
  --bg-grad-2:#FAFCFD;
  --surface:#FFFFFF;
  --surface-2:#F8FBFC;
  --surface-3:#F0F5F7;
  --elev:#FFFFFF;
  --text:#101E28;
  --text-2:#3B5563;
  --muted:#728A98;
  --border:#E3EBEF;
  --border-2:#EFF4F6;
  --shadow-sm:0 1px 2px rgba(20,50,65,.05);
  --shadow-md:0 5px 14px rgba(20,50,65,.06);
  --shadow-lg:0 16px 40px rgba(20,50,65,.10);

  --sb-bg:#FFFFFF;
  --sb-bg-2:#F4F8F9;
  --sb-txt:#2E4A56;
  --sb-txt-dim:#7D96A2;
  --sb-active:rgba(15,118,110,.10);
  --sb-border:rgba(16,50,65,.09);

  --grad-brand:linear-gradient(135deg,#0F766E 0%,#14B8A6 100%);
  --grad-side:linear-gradient(180deg,#FFFFFF,#F1F7F8);
  --grad-panel:linear-gradient(120deg,#0B3A37 0%,#0F766E 55%,#14B8A6 100%);
  --glow:0 10px 26px rgba(15,118,110,.20);
}

/* La interfaz clara usa texto oscuro en la barra lateral */
[data-ui="claro"] .sb-brand-txt b,
[data-ui="claro"] .nav-item.active,
[data-ui="claro"] .nav-item:hover,
[data-ui="claro"] .sb-user-txt b{color:#12303B}
[data-ui="claro"] .nav-item{color:#3E5C68}
[data-ui="claro"] .nav-item.active{background:var(--sb-active);box-shadow:inset 0 0 0 1px rgba(15,118,110,.18)}
[data-ui="claro"] .nav-item.active svg{color:var(--brand)}
[data-ui="claro"] .sb-user{background:rgba(15,118,110,.06)}
[data-ui="claro"] .theme-toggle{color:#5C7783}
[data-ui="claro"] .theme-toggle:hover{background:rgba(15,118,110,.07);color:#12303B}
[data-ui="claro"] .tt-track{background:rgba(16,50,65,.15)}
[data-ui="claro"] .tt-knob{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
[data-ui="claro"] .sb-user .icon-btn{color:#6E8A96}
[data-ui="claro"] .sb-user .icon-btn:hover{color:#12303B;background:rgba(15,118,110,.08)}
[data-ui="claro"] .sb-ver{color:#6E8A96}
[data-ui="claro"] .sb-dev{color:#274653}
[data-ui="claro"] .sb-mail{color:#5B7885}
[data-ui="claro"] .sb-tel{color:#274653}
[data-ui="claro"] .sb-tel svg{color:#0F766E}
[data-ui="claro"] .sb-credit{border-top-color:rgba(16,50,65,.09)}
[data-ui="claro"] .sb-badge{background:var(--brand);color:#fff}
[data-ui="claro"] .sb-overlay{background:rgba(10,35,45,.35)}

/* Variantes oscuras de las interfaces de color */
html[data-ui="azul"][data-theme="dark"]{
  --brand:#3B82F6; --brand-2:#60A5FA; --brand-soft:#0E2144; --brand-ink:#93C5FD;
  --bg:#060D1C; --bg-grad-1:#0A1730; --bg-grad-2:#040A16;
  --surface:#0C1728; --surface-2:#101E33; --surface-3:#152743; --elev:#132238;
  --text:#E6EEFA; --text-2:#B6CAE4; --muted:#8499B8;
  --border:#1D3050; --border-2:#16253E;
  --sb-bg:#050E1F; --sb-bg-2:#03080F; --sb-txt:#C3D6EF; --sb-txt-dim:#7690B4;
  --ok:#34D399; --ok-soft:#0B2B27; --warn:#FBBF24; --warn-soft:#2B2111;
  --err:#F87171; --err-soft:#2C1417; --info:#93C5FD; --info-soft:#101C33;
  --purple:#C4B5FD; --purple-soft:#1B1633;
  --grad-side:linear-gradient(180deg,#071630,#040B18);
}

[data-theme="dark"]{
  --j-info:#60A5FA; --j-warn:#FBBF24; --j-purple:#A78BFA; --j-ok:#34D399; --j-err:#F87171;
}

/* Selector de período */
.sg-period{display:flex;align-items:stretch;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.sg-period-btn{
  flex:1;min-width:132px;text-align:left;padding:12px 15px;border-radius:13px;border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--shadow-sm);transition:.16s;position:relative;overflow:hidden;
}
.sg-period-btn b{display:block;font-size:14px;font-weight:700;letter-spacing:-.2px}
.sg-period-btn small{display:block;font-size:11.4px;color:var(--muted);margin-top:1px}
.sg-period-btn:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));transform:translateY(-1px)}
.sg-period-btn.active{
  border-color:var(--brand);background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 30%,transparent);
}
.sg-period-btn.active small{color:rgba(255,255,255,.82)}
.sg-period-range{
  display:inline-flex;align-items:center;gap:7px;padding:0 16px;font-size:11.8px;color:var(--muted);
  border-radius:13px;border:1px dashed var(--border-2);background:var(--surface-2);white-space:nowrap;
}
.sg-period-range svg{width:15px;height:15px;color:var(--brand)}

/* Métricas */
.sg-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.sg-metric{
  display:flex;gap:11px;align-items:center;padding:14px 15px;border-radius:14px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);min-width:0;overflow:hidden;
}
.sg-metric>div{min-width:0}
.sg-metric.alert{border-color:color-mix(in srgb,var(--err) 40%,var(--border));background:color-mix(in srgb,var(--err) 5%,var(--surface))}
.sg-m-ic{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%,var(--surface));color:var(--c);
}
.sg-m-ic svg{width:18px;height:18px}
.sg-metric small{display:block;font-size:10.2px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800;white-space:normal;line-height:1.2}
.sg-metric b{display:block;font-size:21px;line-height:1.15;letter-spacing:-.6px}
.sg-metric em{display:block;font-size:10.8px;color:var(--muted);font-style:normal;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Paneles */
.sg-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:14px;overflow:hidden}
.sg-panel-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--border-2);flex-wrap:wrap}
.sg-panel-head h3{display:flex;align-items:center;gap:7px;font-size:13.4px;font-weight:700}
.sg-panel-head h3 svg{width:16px;height:16px;color:var(--brand)}
.sg-hint{margin-left:auto;font-size:11.2px;color:var(--muted)}

/* Chips de tipo de envío */
.sg-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;padding:14px 16px}
.sg-chip{
  display:grid;gap:5px;padding:11px 13px;border-radius:11px;border:1px solid var(--border);background:var(--surface-2);
  text-align:left;transition:.15s;position:relative;
}
.sg-chip:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));background:var(--surface);transform:translateY(-1px)}
.sg-chip.active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.sg-chip-name{font-size:12px;font-weight:650;color:var(--text)}
.sg-chip-num{font-size:20px;font-weight:800;letter-spacing:-.7px;line-height:1;color:var(--brand)}
.sg-chip-bar{height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.sg-chip-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:4px}
.sg-chip-sub{font-size:10.2px;color:var(--muted)}
.sg-empty-inline{padding:16px;font-size:12.4px;color:var(--muted)}

/* Recorrido por etapas */
.sg-journey{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px;padding:14px 16px}
.sg-stage{
  display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);text-align:left;transition:.15s;min-width:0;
}
.sg-stage:hover{border-color:color-mix(in srgb,var(--jc) 45%,var(--border));background:var(--surface)}
.sg-stage.has{background:color-mix(in srgb,var(--jc) 7%,var(--surface));border-color:color-mix(in srgb,var(--jc) 26%,var(--border))}
.sg-stage.active{border-color:var(--jc);box-shadow:0 0 0 3px color-mix(in srgb,var(--jc) 16%,transparent);background:color-mix(in srgb,var(--jc) 12%,var(--surface))}
.sg-stage-idx{
  width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  font-size:10.4px;font-weight:800;background:var(--surface-3);color:var(--muted);
}
.sg-stage.has .sg-stage-idx,.sg-stage.active .sg-stage-idx{background:var(--jc);color:#fff}
.sg-stage-body{min-width:0;flex:1}
.sg-stage-body b{display:block;font-size:11.8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-stage-body small{display:block;font-size:10.2px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-stage-num{font-size:13px;font-weight:800;color:var(--muted);flex:none}
.sg-stage.has .sg-stage-num,.sg-stage.active .sg-stage-num{color:var(--jc)}
.sg-stage-cancel{--jc:var(--j-err)}

/* Barra de filtros */
.sg-filterbar{display:flex;align-items:center;gap:8px;margin:16px 0 10px;flex-wrap:nowrap}
.sg-filterbar .sg-search{flex:1 1 240px;min-width:180px}
.sg-search{position:relative;display:flex;align-items:center;min-width:180px;flex:1 1 240px}
.sg-search svg{position:absolute;left:12px;width:16px;height:16px;color:var(--muted)}
.sg-filterbar .sg-search{flex:1 1 auto!important;min-width:220px;max-width:none!important}
.sg-search input{
  width:100%!important;min-width:0;padding:9px 12px 9px 36px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:12.8px;outline:none;transition:.15s;
}
.sg-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.sg-active-filters{display:flex;gap:6px;flex-wrap:nowrap;flex:0 0 auto}
.sg-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.4px;font-weight:600;padding:6px 8px 6px 10px;
  border-radius:8px;background:var(--brand-soft);color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 24%,transparent)}
.sg-tag svg{width:12px;height:12px}
.sg-tag button{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;color:inherit}
.sg-tag button:hover{background:color-mix(in srgb,var(--brand) 20%,transparent)}
.sg-sort{width:auto!important;flex:0 0 auto;min-width:132px;max-width:152px;padding:9px 28px 9px 10px;font-size:12px}
.sg-count{font-size:12px;color:var(--muted);white-space:nowrap;flex:0 0 auto;margin-left:auto}
.sg-count b{color:var(--text)}

/* Tabla */
.sg-table col.c-code{width:11%}.sg-table col.c-send{width:17%}.sg-table col.c-recv{width:17%}
.sg-table col.c-date{width:10%}.sg-table col.c-arr{width:10%}.sg-table col.c-kind{width:9%}
.sg-table col.c-stage{width:14%}.sg-table col.c-act{width:12%}
.sg-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);overflow-x:auto;max-width:100%}
.sg-table{min-width:820px}
.sg-table{width:100%;border-collapse:collapse;min-width:0}
.sg-table thead th{
  padding:10px;text-align:left;font-size:9.8px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);
  font-weight:800;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap;
}
.sg-table thead th.r{text-align:right}
.sg-table tbody td{padding:9px 10px;border-bottom:1px solid var(--border-2);vertical-align:middle;overflow:hidden}
.sg-table tbody tr:last-child td{border-bottom:0}
.sg-table tbody tr{transition:.12s}
.sg-table tbody tr:hover{background:var(--surface-2)}
.sg-table tbody td.r{text-align:right}

.sg-code b{display:block;font-size:12.6px;letter-spacing:.2px}
.sg-code small{display:block;font-size:10.4px;color:var(--muted);margin-top:1px}
.sg-person{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%}
.sg-person>div{min-width:0}
.sg-avatar{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:10.6px;font-weight:800;
  background:color-mix(in srgb,var(--a) 14%,var(--surface));color:var(--a);
}
.sg-person b{display:block;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:148px}
.sg-person small{display:block;font-size:10.2px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:148px}
.sg-date b{display:block;font-size:12.2px;font-weight:650;white-space:nowrap}
.sg-date small{display:block;font-size:10.4px;color:var(--muted)}
.sg-date.late b{color:var(--err)}
.sg-date.late small{color:var(--err);font-weight:600}
.sg-kind{font-size:11.4px;padding:4px 9px;border-radius:7px;background:var(--surface-3);color:var(--text-2);font-weight:600;white-space:nowrap}
.sg-stage-cell{display:grid;gap:5px;min-width:120px}
.sg-pill{
  display:inline-flex;align-items:center;gap:5px;font-size:10.8px;font-weight:700;padding:3.5px 8px;border-radius:6px;
  white-space:nowrap;width:fit-content;
}
.sg-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.sg-pill.j-info{background:color-mix(in srgb,var(--j-info) 13%,transparent);color:var(--j-info)}
.sg-pill.j-warn{background:color-mix(in srgb,var(--j-warn) 15%,transparent);color:var(--j-warn)}
.sg-pill.j-purple{background:color-mix(in srgb,var(--j-purple) 14%,transparent);color:var(--j-purple)}
.sg-pill.j-ok{background:color-mix(in srgb,var(--j-ok) 13%,transparent);color:var(--j-ok)}
.sg-pill.j-err{background:color-mix(in srgb,var(--j-err) 13%,transparent);color:var(--j-err)}
.sg-bar{height:3px;border-radius:3px;background:var(--surface-3);overflow:hidden;max-width:104px}
.sg-bar i{display:block;height:100%;border-radius:3px}
.sg-bar i.j-info{background:var(--j-info)}
.sg-bar i.j-warn{background:var(--j-warn)}
.sg-bar i.j-purple{background:var(--j-purple)}
.sg-bar i.j-ok{background:var(--j-ok)}
.sg-bar i.j-err{background:var(--j-err)}

/* Acciones */
.sg-actions{display:inline-flex;gap:4px;justify-content:flex-end}
.sg-act{
  display:inline-flex;align-items:center;gap:3px;padding:5px 6px;border-radius:7px;font-size:10.6px;font-weight:650;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);transition:.14s;white-space:nowrap;
}
.sg-act svg{width:12px;height:12px}
.sg-act:hover{transform:translateY(-1px)}
.sg-act.view:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.sg-act.edit:hover{border-color:var(--info);color:var(--info);background:color-mix(in srgb,var(--info) 10%,var(--surface))}
.sg-act.del:hover{border-color:var(--err);color:var(--err);background:var(--err-soft)}

.sg-empty{display:grid;place-items:center;gap:6px;padding:40px 20px;text-align:center}
.sg-empty-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);margin-bottom:4px}
.sg-empty-ic svg{width:24px;height:24px}
.sg-empty h3{font-size:14px}
.sg-empty p{font-size:12.4px;color:var(--muted);max-width:330px;line-height:1.5;margin-bottom:6px}
.sg-foot{padding:11px 4px;font-size:11.8px;color:var(--muted)}
.sg-foot b{color:var(--text)}

/* Modal de detalle */
.vd{display:grid;gap:16px}
.vd-head{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--border)}
.vd-status{display:flex;gap:11px;align-items:center;min-width:0}
.vd-status>span{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 14%,var(--surface));color:var(--c)}
.vd-status svg{width:20px;height:20px}
.vd-status small{display:block;font-size:10.2px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:800}
.vd-status b{display:block;font-size:14.4px;line-height:1.25;color:var(--c)}
.vd-status em{display:block;font-size:11px;color:var(--muted);font-style:normal}
.vd-mini small{display:block;font-size:10.2px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800}
.vd-mini b{display:block;font-size:12.4px;margin-top:2px}

.vd-track{display:flex;gap:3px}
.vd-track-step{flex:1;display:grid;gap:5px}
.vd-track-step span{height:5px;border-radius:4px;background:var(--surface-3)}
.vd-track-step.done span{background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.vd-track-step small{font-size:9px;color:var(--muted);text-align:center;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-track-step.done small{color:var(--text-2);font-weight:600}

.vd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vd-block{border:1px solid var(--border);border-radius:11px;padding:12px 14px;background:var(--surface)}
.vd-block h4{display:flex;align-items:center;gap:6px;font-size:11.4px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:9px}
.vd-block h4 svg{width:14px;height:14px;color:var(--brand)}
.vd-dl>div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.2px;border-bottom:1px dashed var(--border-2)}
.vd-dl>div:last-child{border-bottom:0}
.vd-dl span{color:var(--muted);flex:none}
.vd-dl b{text-align:right;font-weight:650;overflow-wrap:anywhere}
.vd-timeline{max-height:190px;overflow:auto;display:grid;gap:0}
.vd-ev{display:flex;gap:9px;padding-bottom:11px;position:relative}
.vd-ev:last-child{padding-bottom:0}
.vd-ev::before{content:"";position:absolute;left:4.5px;top:12px;bottom:0;width:1.5px;background:var(--border-2)}
.vd-ev:last-child::before{display:none}
.vd-ev-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:3px;background:var(--j-info)}
.vd-ev-dot.j-warn{background:var(--j-warn)}.vd-ev-dot.j-purple{background:var(--j-purple)}
.vd-ev-dot.j-ok{background:var(--j-ok)}.vd-ev-dot.j-err{background:var(--j-err)}
.vd-ev b{display:block;font-size:11.8px;line-height:1.3}
.vd-ev small{display:block;font-size:10.4px;color:var(--muted)}
.vd-ev p{font-size:11.4px;color:var(--text-2);margin:2px 0 0;line-height:1.4}

/* Modal de edición */
.ed-grid{display:grid;gap:16px}
.ed-col{display:grid;gap:9px;padding:13px 14px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}
.ed-col h4{display:flex;align-items:center;gap:6px;font-size:11.2px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.ed-col h4 svg{width:14px;height:14px;color:var(--brand)}
.del-ic{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--err-soft);color:var(--err)}
.del-ic svg{width:19px;height:19px}
.btn-danger{background:var(--err);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--err) 28%,transparent)}
.btn-danger:hover{filter:brightness(1.06)}

@media (max-width:1180px){
  .sg-metrics{grid-template-columns:repeat(3,1fr)}
  .vd-grid{grid-template-columns:1fr}
  .vd-head{grid-template-columns:1fr 1fr}
  .vd-status{grid-column:1/-1}
}
@media (max-width:900px){
  .sg-filterbar{flex-wrap:wrap}
  .sg-filterbar .sg-search{flex:1 1 100%}
  .sg-count{margin-left:0}
}
@media (max-width:760px){
  .sg-metrics{grid-template-columns:1fr}
  .sg-metric em{white-space:normal}
  .sg-period-btn{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .sg-period-range{width:100%;justify-content:center;padding:8px}
  .sg-journey{grid-template-columns:1fr}
  .sg-actions{flex-wrap:wrap;justify-content:flex-end}
  .sg-act span{display:none}
  .vd-track-step small{display:none}
}

/* Portal · avance del envío (12 etapas agrupadas en hitos) */
.trk-progress-wrap{padding:20px 22px 6px}
.trk-progress-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.trk-progress-head span{display:inline-flex;align-items:center;gap:6px;font-size:11.4px;text-transform:uppercase;
  letter-spacing:.7px;font-weight:800;color:var(--muted)}
.trk-progress-head svg{width:15px;height:15px;color:var(--brand)}
.trk-progress-head b{font-size:15px;letter-spacing:-.3px;color:var(--brand)}
.trk-progress-bar{height:8px;border-radius:6px;background:var(--surface-3);overflow:hidden;margin-bottom:18px}
.trk-progress-bar i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .5s ease}
.trk-progress-steps{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;scrollbar-width:thin}

/* ══════════════════════════════════════════════════════════════
   REMITENTES Y DESTINATARIOS · directorio de clientes
   ══════════════════════════════════════════════════════════════ */
.cl-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.cl-metric{display:flex;gap:11px;align-items:center;padding:13px 15px;border-radius:13px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);min-width:0}
.cl-m-ic{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%,var(--surface));color:var(--c)}
.cl-m-ic svg{width:17px;height:17px}
.cl-metric small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800;line-height:1.2}
.cl-metric b{display:block;font-size:20px;letter-spacing:-.5px;line-height:1.15}

.cl-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.cl-search{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:180px}
.cl-search svg{position:absolute;left:12px;width:16px;height:16px;color:var(--muted)}
.cl-search input{width:100%!important;min-width:0;padding:9px 12px 9px 36px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:12.6px;outline:none;transition:.15s}
.cl-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.cl-filter{width:auto!important;flex:0 0 auto;min-width:132px;max-width:172px;padding:9px 28px 9px 10px;font-size:12px}
.cl-count{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto}
.cl-count b{color:var(--text)}

.cl-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);overflow-x:auto}
.cl-table{width:100%;border-collapse:collapse;table-layout:auto}
.cl-table thead th{text-align:left;font-size:9.6px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:800;padding:10px 8px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
.cl-table thead th.c{text-align:center}
.cl-table thead th.r{text-align:right}
.cl-table tbody td{padding:8px;border-bottom:1px solid var(--border-2);vertical-align:middle}
.cl-table tbody tr:last-child td{border-bottom:0}
.cl-table tbody tr:hover{background:var(--surface-2)}
.cl-table tbody td.c{text-align:center}
.cl-table tbody td.r{text-align:right}

.cl-id{font-size:10.2px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:3px 6px;border-radius:6px;white-space:nowrap}
.cl-person{display:flex;align-items:center;gap:8px;min-width:0}
.cl-avatar{width:29px;height:29px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:9.8px;font-weight:800;
  background:color-mix(in srgb,var(--a) 14%,var(--surface));color:var(--a)}
.cl-person>div{min-width:0}
.cl-person b{display:block;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.cl-person small{display:block;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.cl-doc{display:grid;gap:1px}
.cl-doctype{font-size:9.2px;font-weight:800;color:var(--muted);letter-spacing:.4px}
.cl-doc b{font-size:11.2px}
.cl-contact{display:grid;gap:2px;font-size:10.8px;color:var(--text-2)}
.cl-contact span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.cl-contact svg{width:11px;height:11px;color:var(--muted);flex:none}
.cl-contact .wa{color:var(--ok);font-weight:600}
.cl-contact .wa svg{color:var(--ok)}
.cl-city{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--text-2);white-space:nowrap}
.cl-city svg{width:12px;height:12px;color:var(--muted);flex:none}
.cl-country{font-size:10.8px;color:var(--text-2);white-space:nowrap}
.cl-mail{font-size:11px;color:var(--brand);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;max-width:150px}
.cl-mail:hover{text-decoration:underline}
.cl-none{color:var(--muted);font-size:11.6px}
.cl-envios{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:7px;
  font-size:11px;font-weight:800;background:var(--surface-3);color:var(--muted)}
.cl-envios.has{background:var(--brand-soft);color:var(--brand)}

.cl-actions{display:inline-flex;gap:4px;justify-content:flex-end}
.cl-act{width:28px!important;height:28px!important;min-width:28px;flex:0 0 28px;padding:0!important;border-radius:8px;
  display:grid!important;place-items:center;border:1px solid var(--border);background:var(--surface);color:var(--text-2);transition:.14s}
.cl-act svg{width:13px;height:13px}
.cl-act:hover{transform:translateY(-1px)}
.cl-act.act-view:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.cl-act.act-edit:hover{border-color:var(--info);color:var(--info);background:color-mix(in srgb,var(--info) 10%,var(--surface))}
.cl-act.act-del:hover{border-color:var(--err);color:var(--err);background:var(--err-soft)}

.cl-empty{display:grid;place-items:center;gap:6px;padding:42px 20px;text-align:center}
.cl-empty-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);margin-bottom:4px}
.cl-empty-ic svg{width:25px;height:25px}
.cl-empty h3{font-size:14.4px}
.cl-empty p{font-size:12.4px;color:var(--muted);max-width:340px;line-height:1.5;margin-bottom:8px}

.cl-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.cl-pager-btns{display:flex;gap:7px}
.cl-pager .btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── Formulario de cliente ── */
.cf{display:grid;gap:14px}
.cf-group{border:1px solid var(--border);border-radius:12px;padding:13px 14px;background:var(--surface-2);display:grid;gap:10px}
.cf-group.cf-delivery{background:color-mix(in srgb,var(--brand) 5%,var(--surface));border-color:color-mix(in srgb,var(--brand) 22%,var(--border))}
.cf-group h4{display:flex;align-items:center;gap:6px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800}
.cf-group h4 svg{width:14px;height:14px;color:var(--brand)}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.cf-grid .fg{min-width:0}
.cf-hint{display:flex;align-items:center;gap:6px;font-size:11.2px;color:var(--muted);line-height:1.45}
.cf-hint svg{width:13px;height:13px;color:var(--brand);flex:none}

/* ── Ficha del cliente ── */
.cd{display:grid;gap:14px}
.cd-head{display:flex;gap:14px;align-items:center;padding:15px 16px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--border);flex-wrap:wrap}
.cd-avatar{width:54px;height:54px;border-radius:15px;flex:none;display:grid;place-items:center;font-size:17px;font-weight:800;
  background:color-mix(in srgb,var(--a) 15%,var(--surface));color:var(--a)}
.cd-ident{min-width:0;flex:1}
.cd-ident small{display:block;font-size:9.8px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:800}
.cd-ident>b{display:inline-block;font-size:12.4px;color:var(--brand);margin-top:1px}
.cd-name{display:block;font-size:16.4px;font-weight:750;letter-spacing:-.3px;margin-top:3px}
.cd-kpis{display:flex;gap:18px}
.cd-kpis>div{text-align:center}
.cd-kpis b{display:block;font-size:18px;letter-spacing:-.4px;line-height:1.1}
.cd-kpis small{display:block;font-size:9.8px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:800}

.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cd-block{border:1px solid var(--border);border-radius:11px;padding:12px 14px;background:var(--surface)}
.cd-block h4{display:flex;align-items:center;gap:6px;font-size:10.8px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:800;margin-bottom:8px}
.cd-block h4 svg{width:13px;height:13px;color:var(--brand)}
.cd-dl>div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:12.2px;border-bottom:1px dashed var(--border-2)}
.cd-dl>div:last-child{border-bottom:0}
.cd-dl span{color:var(--muted);flex:none}
.cd-dl b{text-align:right;font-weight:650;overflow-wrap:anywhere}
.cd-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.cd-quick .btn{font-size:11.2px;padding:5px 9px}
.cd-notes{display:flex;gap:8px;align-items:flex-start;padding:10px 13px;border-radius:10px;background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 24%,transparent);font-size:11.8px;color:var(--text-2);line-height:1.5}
.cd-notes svg{width:14px;height:14px;color:var(--warn);flex:none;margin-top:1px}
.cd-guides h4{display:flex;align-items:center;gap:6px;font-size:10.8px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:800;margin-bottom:8px}
.cd-guides h4 svg{width:13px;height:13px;color:var(--brand)}
.cd-guides h4 span{color:var(--text-2);font-weight:700}
.cd-guides-list{display:grid;gap:0;max-height:180px;overflow:auto}
.cd-guide{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px dashed var(--border-2);font-size:11.8px}
.cd-guide:last-child{border-bottom:0}
.cd-g-code{font-weight:800;font-size:11.4px}
.cd-g-date{color:var(--muted);font-size:11px;white-space:nowrap}
.cd-g-dest{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1450px){
  .cl-table th:nth-child(6), .cl-table td:nth-child(6){display:none}   /* País */
  .cl-mail{max-width:130px}
  .cl-person b,.cl-person small{max-width:150px}
}
@media (max-width:1300px){
  .cl-table th:nth-child(7), .cl-table td:nth-child(7){display:none}   /* Email */
  .cl-table th:nth-child(4), .cl-table td:nth-child(4){display:none}   /* Documento */
  .cl-mail{max-width:130px}
}
@media (max-width:1200px){
  .cl-metrics{grid-template-columns:repeat(3,1fr)}
  .cd-grid{grid-template-columns:1fr}
}
@media (max-width:1000px){
  .cl-table th:nth-child(5), .cl-table td:nth-child(5){display:none}   /* Ciudad */
  .cl-person b,.cl-person small{max-width:130px}
  .cl-table thead th, .cl-table tbody td{padding:8px 6px}
}
@media (max-width:760px){
  .cl-metrics{grid-template-columns:1fr 1fr}
  .cl-toolbar .cl-search{flex:1 1 100%}
  .cl-filter{flex:1 1 calc(50% - 5px);max-width:none}
  .cl-count{margin-left:0}
  .cd-head{flex-direction:column;align-items:flex-start}
  .cd-kpis{width:100%;justify-content:space-around;border-top:1px solid var(--border-2);padding-top:10px}
  .cf-grid{grid-template-columns:1fr}
}

/* Selector de remitente / destinatario en Nuevo Envío */
.pp-list{display:grid;gap:6px;max-height:380px;overflow:auto;padding-right:2px}
.pp-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);transition:.14s;color:inherit}
.pp-row:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.pp-row>svg{width:15px;height:15px;color:var(--muted);flex:none}
.pp-info{flex:1;min-width:0}
.pp-info b{display:block;font-size:12.6px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-info small{display:block;font-size:10.8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-row .cl-avatar{width:30px;height:30px;font-size:10px}


/* ══════════ MÉTODOS DE PAGO · Configuración ══════════ */
.pm-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.4px;font-weight:650;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);padding:5px 10px;border-radius:99px}
.pm-pill b{color:var(--text);font-weight:800}
.pm-pill svg{width:13px;height:13px;color:var(--brand)}
.pm-table td{vertical-align:middle}
.pm-table tr.pm-off{opacity:.62}
.pm-name{display:flex;align-items:center;gap:10px}
.pm-name b{display:block;font-size:12.6px;font-weight:700}
.pm-name small{display:block;font-size:10.4px;color:var(--muted)}
.pm-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--pc) 12%,var(--surface));color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 22%,transparent)}
.pm-ic svg{width:15px;height:15px}
.pm-ord{display:flex;flex-direction:column;gap:1px}
.pm-mv{border:1px solid var(--border);background:var(--surface);border-radius:5px;width:20px;height:15px;
  display:grid;place-items:center;color:var(--muted);transition:.14s}
.pm-mv:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.pm-mv:disabled{opacity:.3;cursor:not-allowed}
.pm-mv svg{width:11px;height:11px}
.pm-mv[data-mv="up"] svg{transform:rotate(180deg)}
.pm-toggle{display:inline-flex;align-items:center;gap:7px;font-size:11.4px;font-weight:650;color:var(--muted);
  border:1px solid var(--border);background:var(--surface);padding:4px 10px 4px 6px;border-radius:99px;transition:.15s}
.pm-sw{width:26px;height:15px;border-radius:99px;background:var(--border);position:relative;transition:.18s;flex:none}
.pm-sw::after{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.pm-toggle.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.pm-toggle.on .pm-sw{background:var(--ok)}
.pm-toggle.on .pm-sw::after{left:13px}
.pm-use{font-size:11.4px;color:var(--muted)}
.pm-acts{display:inline-flex;gap:6px}
/* Formulario */
.pm-icons{display:flex;flex-wrap:wrap;gap:6px}
.pm-ic-opt{width:38px;height:38px;border-radius:9px;border:1.4px solid var(--border);background:var(--surface-2);
  display:grid;place-items:center;color:var(--text-2);transition:.14s}
.pm-ic-opt:hover{border-color:var(--brand);color:var(--brand)}
.pm-ic-opt.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)}
.pm-ic-opt svg{width:17px;height:17px}
.pm-colors{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.pm-col-opt{width:22px;height:22px;border-radius:50%;background:var(--pc);border:2px solid transparent;transition:.14s;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 30%,transparent)}
.pm-col-opt:hover{transform:scale(1.12)}
.pm-col-opt.sel{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--pc)}
.pm-color-input{width:26px;height:26px;padding:0;border:1px solid var(--border);border-radius:7px;background:var(--surface);cursor:pointer}
.pm-preview .pay-btn{cursor:default;max-width:220px}
.pm-check{display:flex;align-items:center;gap:8px;font-size:12.4px;color:var(--text-2);cursor:pointer}
.pm-check input{width:16px;height:16px;accent-color:var(--brand);flex:none}
/* Indicador del método elegido en Nuevo Envío */
.pay-current{display:flex;align-items:center;gap:9px;margin:0 16px 10px;padding:9px 11px;border-radius:11px;
  border:1px dashed color-mix(in srgb,var(--brand) 32%,var(--border));background:var(--brand-soft)}
.pay-current:empty{display:none}
.pc-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--pc) 14%,var(--surface));color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 25%,transparent)}
.pc-ic svg{width:15px;height:15px}
.pc-txt{flex:1;min-width:0;line-height:1.25}
.pc-txt small{display:block;font-size:9.4px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.pc-txt b{display:block;font-size:12.6px;font-weight:750;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-btn{border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);background:var(--surface);color:var(--brand);
  font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px;transition:.14s}
.pc-btn:hover{background:var(--brand);color:#fff}
@media (max-width:720px){
  /* Cabecera de la tarjeta en columna */
  #cfgBody .card-head{flex-wrap:wrap;gap:10px}
  #cfgBody .card-head>div:not(.kpi-ic){flex:1 1 100%;min-width:0}
  #cfgBody .card-head .btn{margin-left:0!important;width:100%;justify-content:center}
  /* Tabla como tarjetas apiladas */
  .pm-table thead{display:none}
  .pm-table,.pm-table tbody{display:block;width:100%}
  .pm-table tbody tr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:
      "ord name acts" "use state state";gap:8px 10px;padding:12px;border-bottom:1px solid var(--border-2);position:relative}
  .pm-table tbody td{border:0;padding:0;display:block}
  .pm-table td:nth-child(1){grid-area:ord}
  .pm-table td:nth-child(2){grid-area:name;min-width:0}
  .pm-table td:nth-child(3){grid-area:state;justify-self:start}
  .pm-table td:nth-child(4){grid-area:use}
  .pm-table td:nth-child(5){grid-area:acts;justify-self:end}
  .pm-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pm-ord{flex-direction:row;gap:4px}
  .pm-mv{width:26px;height:22px}
  .pm-summary{gap:8px}
  .pm-summary .hint{flex:1 1 100%}
}

/* Tipo de envío personalizado en el resumen de cobro */
#ccShipType.is-custom{color:var(--brand);font-weight:750}
#fShipTypeOtherWrap .inp{border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}
#fShipTypeOtherWrap .inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}

/* Código de barras Code 39: proporciones reales, sin deformar.
   Se anula la regla global svg{18px} para que use sus medidas en mm. */
svg.bc39{display:block;flex:none;fill:#000;stroke:none;shape-rendering:crispEdges}
svg.bc39 rect{fill:#000!important;stroke:none!important}

/* Pie de la barra lateral: versión y créditos del desarrollador */
.sb-credit{padding:12px 2px 2px;border-top:1px solid rgba(255,255,255,.1);margin-top:10px;line-height:1.35}
.sb-ver{font-size:11.4px;font-weight:600;color:rgba(233,245,243,.62);margin-bottom:5px}
.sb-dev{font-size:11.2px;font-weight:650;color:rgba(233,245,243,.9)}
.sb-mail{display:block;font-size:11px;color:rgba(233,245,243,.72);text-decoration:none;word-break:break-all;transition:.14s}
.sb-mail:hover{color:#7FE3D3;text-decoration:underline}
.sb-tel{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:11px;font-weight:650;
  color:rgba(233,245,243,.86);text-decoration:none;transition:.14s}
.sb-tel svg{width:13px;height:13px;color:#34D399;flex:none}
.sb-tel:hover{color:#7FE3D3}
/* En pantallas bajas el bloque se compacta para dejar sitio al menú */
@media (max-height:900px){
  .sb-credit{padding-top:9px;margin-top:8px}
  .sb-ver{font-size:10.6px;margin-bottom:2px;line-height:1.2}
  .sb-dev{font-size:10.6px;line-height:1.25}
  .sb-mail,.sb-tel{font-size:10.2px;line-height:1.25}
  .sb-tel{margin-top:2px}
  .sb-tel svg{width:12px;height:12px}
  .sb-foot{gap:8px;padding-bottom:12px}
}
@media (max-height:720px){
  .sb-credit{display:none}   /* prioriza el menú de navegación */
}
@media (max-width:640px){
  .sb-credit{display:none}   /* el drawer móvil ya es estrecho */
}

/* ══════════════════════════════════════════════════════════════
   EFECTOS Y DEGRADADOS DE INTERFAZ (como en la referencia)
   ══════════════════════════════════════════════════════════════ */

/* ── Barra lateral con degradado y ondas decorativas ── */
.sidebar{background:var(--grad-side);position:fixed;overflow:hidden}
.sidebar::before{
  content:'';position:absolute;left:-90px;bottom:-70px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--brand-2) 34%,transparent), transparent 66%);
  pointer-events:none;filter:blur(2px);
}
.sidebar::after{
  content:'';position:absolute;right:-120px;top:18%;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--brand) 26%,transparent), transparent 68%);
  pointer-events:none;border:0;
}
.sb-brand,.sb-nav,.sb-foot{position:relative;z-index:1}

/* Elemento activo del menú: barra luminosa y degradado */
.nav-item.active{
  background:linear-gradient(90deg, color-mix(in srgb,var(--brand-2) 30%,transparent), color-mix(in srgb,var(--brand-2) 8%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-2) 24%,transparent), 0 4px 14px color-mix(in srgb,var(--brand) 18%,transparent);
}
.nav-item.active::before{
  content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:4px;height:60%;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--brand-2),var(--brand));
  box-shadow:0 0 12px color-mix(in srgb,var(--brand-2) 70%,transparent);
}

/* Logo con brillo */
.sb-logo,.login-logo,.login-logo-sm{
  background:var(--grad-brand);
  box-shadow:0 10px 26px color-mix(in srgb,var(--brand) 40%,transparent), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ── Barra superior con vidrio y sombra suave ── */
.topbar{
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  box-shadow:0 1px 0 var(--border), 0 6px 18px -12px rgba(10,40,60,.28);
}

/* ── Encabezado de Nuevo Envío: panel azul con ondas ── */
.guia-bar{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--grad-panel);
  color:#FFFFFF;padding:16px 20px;
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.18);
  border:1px solid color-mix(in srgb,var(--brand) 55%,transparent);
}
.guia-bar::before{
  content:'';position:absolute;right:-60px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle at 40% 60%, rgba(255,255,255,.30), transparent 62%);pointer-events:none;
}
.guia-bar::after{
  content:'';position:absolute;left:8%;bottom:-120px;width:420px;height:240px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(125,227,211,.42), transparent 62%);pointer-events:none;
}
.guia-bar>*{position:relative;z-index:2}
.guia-brand{font-weight:800;letter-spacing:-.2px;color:#FFFFFF}
.guia-brand svg{color:#FFFFFF;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.guia-num{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:10px}
.guia-num label{color:rgba(255,255,255,.78)}
.guia-num b{color:#FFFFFF !important}
.guia-bar .btn-ok{background:#FFFFFF;color:var(--brand-ink);border-color:transparent;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.guia-bar .btn-ok:hover{background:#F1FFFB;transform:translateY(-1px)}
.guia-bar .chip,.guia-bar .badge{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3)}

/* ── Fecha de salida fija ── */
.guia-bar .btn-shipdate{
  background:#F5A623;color:#3B2404;border-color:transparent;font-weight:800;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.guia-bar .btn-shipdate:hover{background:#FFB53D;transform:translateY(-1px)}
.guia-bar .btn-shipdate svg{width:15px;height:15px}

/* ── Resumen rápido por estado (barra de Nuevo Envío) ── */
.guia-stats{display:flex;flex-direction:column;gap:5px;min-width:0}
.gs-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gs-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 7px 5px 11px;border-radius:999px;
  background:#FFFFFF;color:var(--brand-ink);font-size:11.8px;font-weight:700;line-height:1;
  border:1px solid rgba(255,255,255,.65);box-shadow:0 6px 16px rgba(0,0,0,.14);
  white-space:nowrap;user-select:none}
.gs-lbl{letter-spacing:-.1px}
.gs-badge{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#E23D3D;color:#FFFFFF;
  font-size:10.8px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(226,61,61,.45)}
.gs-badge.zero{background:#9AA7B2;box-shadow:none}
.gs-sub{font-size:10.8px;font-weight:700;color:rgba(255,255,255,.85);letter-spacing:.2px;padding-left:4px;line-height:1.2}
@media (max-width:760px){
  .guia-stats{order:5;width:100%}
  .gs-sub{padding-left:0}
}
.inp-fixed{cursor:default;background:var(--surface-2);font-weight:600}
.inp-fixed::-webkit-calendar-picker-indicator{display:none}

/* Calendario del popup · fecha de salida */
.sd-modal{display:grid;gap:13px}
.sd-selected{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 20%,transparent)}
.sd-selected small{display:block;font-size:10.4px;text-transform:uppercase;letter-spacing:.7px;font-weight:800;color:var(--muted)}
.sd-selected b{display:block;font-size:15px;color:var(--brand);margin-top:2px}
.sd-cal{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--surface)}
.sd-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.sd-cal-head b{font-size:13px;font-weight:800}
.sd-nav{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--text-2);flex:none}
.sd-nav:hover{background:var(--surface-3);color:var(--brand)}
.sd-nav svg{width:15px;height:15px}
.sd-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.sd-wd{font-size:10px;font-weight:800;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.4px}
.sd-day{height:32px;border-radius:8px;font-size:12.2px;font-weight:600;color:var(--text-2);display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;font-family:inherit}
.sd-day:hover{background:var(--brand-soft);color:var(--brand)}
.sd-day.today{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent)}
.sd-day.sel{background:var(--brand);color:#fff;font-weight:800;box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 35%,transparent)}
.sd-day.empty{pointer-events:none}
.sd-hint{display:flex;gap:8px;align-items:flex-start;font-size:11.6px;color:var(--text-2);line-height:1.5;
  padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-2)}
.sd-hint svg{width:14px;height:14px;color:var(--brand);flex:none;margin-top:1px}
.sd-check{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--text-2);line-height:1.45}
.sd-check input{margin-top:3px}

/* ── Panel de cobro con cabecera degradada ── */
.cc-head,.cash-head,.pay-head{
  background:var(--grad-panel);
  color:#fff;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.cc-head::before{
  content:'';position:absolute;right:-40px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle at 40% 60%, rgba(255,255,255,.26), transparent 64%);pointer-events:none;
}
.cc-head>*{position:relative;z-index:1}

/* ── Tarjetas con más profundidad y borde luminoso ── */
.card{
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--brand) 18%,var(--border))}
.kpi{
  position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.kpi::after{
  content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--kpi-color,var(--brand)) 18%,transparent), transparent 68%);
  pointer-events:none;
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi-ic{
  background:color-mix(in srgb,var(--kpi-color,var(--brand)) 14%,var(--surface));
  color:var(--kpi-color,var(--brand));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kpi-color,var(--brand)) 24%,transparent);
}

/* Botón principal con degradado y elevación */
.btn-primary{
  background:var(--grad-brand);border-color:transparent;color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 30%,transparent), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px color-mix(in srgb,var(--brand) 38%,transparent)}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 28%,transparent)}
.btn-soft{background:color-mix(in srgb,var(--brand) 9%,var(--surface));color:var(--brand);border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border))}
.btn-soft:hover{background:color-mix(in srgb,var(--brand) 15%,var(--surface))}

/* Botón COBRAR con brillo */
.act-charge{
  background:linear-gradient(135deg,#0E9F6E 0%,#12B886 55%,#22C55E 100%);
  color:#fff;box-shadow:0 10px 24px rgba(16,150,110,.34), inset 0 1px 0 rgba(255,255,255,.26);
  letter-spacing:.4px;
  display:flex;align-items:center;justify-content:center;gap:11px;
}
.act-charge svg{width:22px;height:22px;stroke-width:2.1;flex:none}
.act-charge:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(16,150,110,.42)}
.act-charge:active{transform:translateY(0)}

/* Campos con foco luminoso */
.inp:focus, .fg select:focus, .fg input:focus, .fg textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent);
}
.fg>label svg{color:var(--brand)}

/* Sección de títulos con acento */
.section-title svg{color:var(--brand)}
.section-title{color:var(--text-2)}

/* Tablas con encabezado degradado suave */
.tbl thead th{
  background:color-mix(in srgb,var(--brand) 6%,var(--surface-2));
  color:var(--text-2);
}

/* Chips/badges con degradado sutil */
.chip-cash{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 18%,transparent)}
.badge, .pill{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}

/* ── Scrollbars y transiciones globales de interfaz ── */
.sidebar, .topbar, .card, .btn, .nav-item{transition-property:background,color,box-shadow,border-color,transform}
body{transition:background .3s ease,color .3s ease}

/* ── Modo oscuro: ajustes finos de efecto ── */
html[data-ui="claro"][data-theme="dark"]{
  --brand:#2DD4BF; --brand-2:#5EEAD4; --brand-soft:#0C2B2A; --brand-ink:#99F6E4;
  --bg:#0B1418; --bg-grad-1:#0F1D22; --bg-grad-2:#080F12;
  --surface:#101C21; --surface-2:#152429; --surface-3:#1A2C32; --elev:#16262B;
  --text:#E8F1F3; --text-2:#B9CDD2; --muted:#87A0A6;
  --border:#1F3238; --border-2:#182A30;
  --sb-bg:#0A1417; --sb-bg-2:#060E11;
  --sb-txt:#C4D8DC; --sb-txt-dim:#7A9399;
  --sb-active:rgba(45,212,191,.16);
  --sb-border:rgba(255,255,255,.07);
  --grad-side:linear-gradient(180deg,#0A1417,#060E11);
  --ok:#34D399; --ok-soft:#0B2B27; --warn:#FBBF24; --warn-soft:#2B2111;
  --err:#F87171; --err-soft:#2C1417; --info:#93C5FD; --info-soft:#101C33;
}
/* En oscuro la interfaz clara vuelve a texto claro en el menú */
html[data-ui="claro"][data-theme="dark"] .sb-brand-txt b,
html[data-ui="claro"][data-theme="dark"] .nav-item.active,
html[data-ui="claro"][data-theme="dark"] .sb-user-txt b{color:#EAF4F5}
html[data-ui="claro"][data-theme="dark"] .nav-item{color:#B4C9CE}
html[data-ui="claro"][data-theme="dark"] .theme-toggle{color:#8BA3A9}
html[data-ui="claro"][data-theme="dark"] .sb-dev{color:#C9DCE0}
html[data-ui="claro"][data-theme="dark"] .sb-mail{color:#93AEB4}
html[data-ui="claro"][data-theme="dark"] .sb-tel{color:#C9DCE0}
html[data-theme="dark"] .guia-bar{box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12)}
[data-theme="dark"] .card:hover{border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}
[data-theme="dark"] .topbar{box-shadow:0 1px 0 var(--border), 0 8px 22px -14px rgba(0,0,0,.6)}

/* ══════════════ SELECTOR DE MODOS DE INTERFAZ ══════════════ */
.theme-toggle{position:relative;display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;
  color:var(--sb-txt);font-size:12.2px;font-weight:600;transition:.15s}
.theme-toggle i{display:flex;align-items:center;margin-left:auto;opacity:.6}
.theme-toggle i svg{width:14px;height:14px}
.theme-toggle:hover{background:rgba(255,255,255,.07)}
[data-ui="claro"] .theme-toggle:hover{background:rgba(15,118,110,.08)}
.tt-dot{width:20px;height:20px;border-radius:6px;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.4);
  transition:.2s}

.ui-pop{
  position:fixed;z-index:200;background:var(--elev);border:1px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;animation:pop .16s ease;
  font-family:var(--ff);
}
.ui-pop-head{display:flex;align-items:center;gap:8px;padding:7px 9px 9px;font-size:11px;
  text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:800;border-bottom:1px solid var(--border-2);margin-bottom:6px}
.ui-pop-head svg{width:14px;height:14px;color:var(--brand)}
.ui-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px;border-radius:10px;
  border:1.4px solid transparent;text-align:left;transition:.14s;color:var(--text)}
.ui-opt:hover{background:var(--surface-2);border-color:var(--border)}
.ui-opt.sel{background:color-mix(in srgb,var(--brand) 9%,var(--surface));border-color:color-mix(in srgb,var(--brand) 35%,transparent)}
.ui-opt>svg{width:15px;height:15px;color:var(--brand);flex:none;margin-left:auto}
.ui-sw{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.12)}
.ui-txt{min-width:0;flex:1;line-height:1.25}
.ui-txt b{display:block;font-size:12.6px;font-weight:700}
.ui-txt small{display:block;font-size:10.6px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-pop-foot{border-top:1px solid var(--border-2);margin-top:6px;padding-top:6px}
.ui-dark{display:flex;align-items:center;gap:8px;width:100%;padding:8px 9px;border-radius:9px;
  font-size:12px;font-weight:600;color:var(--text-2);transition:.14s}
.ui-dark:hover{background:var(--surface-2);color:var(--text)}
.ui-dark svg{width:15px;height:15px;color:var(--brand)}

/* ══════════════════════════════════════════════════════════════
   LOGIN · diseño con fondo claro, ondas y tarjeta flotante
   ══════════════════════════════════════════════════════════════ */
.login-wrap{
  background:
    radial-gradient(1100px 520px at 12% -10%, #DCE8FB 0%, transparent 58%),
    radial-gradient(900px 480px at 95% 12%, #E3F1FF 0%, transparent 60%),
    linear-gradient(180deg,#F2F7FE 0%,#EAF2FD 60%,#E8F1FC 100%);
  position:relative;overflow:hidden;
}
/* Onda inferior celeste */
.login-wrap::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 100% at 20% 100%, rgba(147,197,253,.55), transparent 62%),
    radial-gradient(ellipse 70% 100% at 78% 110%, rgba(191,219,254,.65), transparent 60%);
}

/* Panel izquierdo: azul profundo con el logo 3D arriba */
.login-aside{
  position:relative;isolation:isolate;
  /* Capa azul translúcida (15% de transparencia) sobre la foto de fondo */
  background:
    radial-gradient(680px 420px at 80% 6%, rgba(59,130,246,.55), transparent 64%),
    radial-gradient(620px 520px at 6% 98%, rgba(14,165,233,.40), transparent 66%),
    linear-gradient(155deg, rgba(23,74,164,.78) 0%, rgba(21,68,158,.77) 26%,
                    rgba(13,48,116,.81) 62%, rgba(9,28,64,.86) 100%);
  border-radius:0;
  box-shadow:26px 0 60px -30px rgba(12,40,110,.45);
  color:#DCE9FB;
}
/* Fotografía de fondo, debajo de la capa azul */
.login-aside .login-bg{
  position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  border-radius:inherit;
  background:url('../img/login-bg.jpg') center 32%/cover no-repeat;
  transform:scale(1.02);
}
/* Círculo blanco translúcido sobre el fondo (como en la referencia) */
.login-aside .login-bg::after{
  content:'';position:absolute;left:-22%;bottom:-34%;
  width:132%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,
      rgba(255,255,255,.30) 0%, rgba(255,255,255,.21) 40%,
      rgba(255,255,255,.12) 62%, rgba(255,255,255,.04) 74%, transparent 80%);
  box-shadow:inset 0 0 90px rgba(255,255,255,.16);
}
/* Velo que asegura el contraste del texto (15% de transparencia) */
.login-aside .login-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg, rgba(7,26,62,.54) 0%, rgba(7,26,62,.24) 34%,
              rgba(7,26,62,.28) 60%, rgba(6,20,50,.58) 100%);
}
.login-aside::before{
  background:radial-gradient(circle at 35% 35%, rgba(96,165,250,.34), transparent 62%);
  inset:auto -140px -200px auto;width:680px;height:680px;
}
.login-aside::after{
  background:radial-gradient(circle at 50% 50%, rgba(34,211,238,.20), transparent 64%);
  top:-190px;right:-110px;width:470px;height:470px;z-index:0;pointer-events:none;
}

/* Insignia del logo 3D */
.login-brand{gap:18px}
.login-logo{
  width:74px;height:74px;border-radius:0;position:relative;
  background:none;
  color:#123E92;
  box-shadow:none;
  border:0;
  transform:none;
}
.login-logo::after{display:none}
.login-logo img{background:transparent}
.login-logo svg{width:56px;height:56px;filter:none}
.login-brand h1{color:#FFFFFF;font-size:23px;letter-spacing:-.3px;text-shadow:0 2px 14px rgba(3,22,60,.4)}
.login-brand p{color:#A8C6EE}

.login-hero h2{color:#FFFFFF;text-shadow:0 3px 18px rgba(3,22,60,.35)}
.login-hero h2 em{background:linear-gradient(90deg,#7DD3FC,#A5F3FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-hero p{color:#B8D0EE}

.login-features li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  border-radius:13px;padding:11px 13px;backdrop-filter:blur(4px)}
.lf-ic{background:rgba(96,165,250,.22);border-color:rgba(147,197,253,.45);color:#BFDBFE}
.login-features b{color:#EAF3FF}
.login-features small{color:#A5C0E2}
.login-foot{color:#8FAAD0;border-top:1px solid rgba(255,255,255,.12)}

/* Tarjeta de login flotante */
.login-main{background:transparent;position:relative;z-index:2}
.login-card{
  border-radius:22px;border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFF 100%);
  box-shadow:0 34px 70px -26px rgba(12,40,110,.35), 0 8px 22px -12px rgba(12,40,110,.18), inset 0 1px 0 #fff;
  padding:36px;
}
.login-card .login-logo-sm{
  width:112px;height:112px;border-radius:24px;background:none;
  color:#fff;box-shadow:none;margin:0 auto 22px;
}
.login-card .login-logo-sm svg{width:100%;height:100%}
.login-card h2{font-size:26px;color:#0E1B33;letter-spacing:-.6px}
.login-card .sub{color:#6B84A6;margin-bottom:24px}
.field>span{color:#33507A;font-weight:650}
.input-ic input{
  border:1.5px solid #D8E3F6;background:#F7FAFF;border-radius:12px;padding:13px 42px 13px 42px;
  transition:.16s;
}
.input-ic input::placeholder{color:#9AAFCB}
.input-ic input:focus{border-color:#2563EB;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.input-ic svg{color:#7B94B4}
.eye:hover{background:#EDF3FE;color:#1D4ED8}
.chk{color:#33507A}
.chk input{accent-color:#2563EB}
.link{color:#1D4ED8;font-weight:650}
.btn-login{
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 62%,#1E40AF 100%);
  box-shadow:0 14px 30px -8px rgba(29,78,216,.55), inset 0 1px 0 rgba(255,255,255,.25);
  border-radius:12px;letter-spacing:.2px;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 20px 38px -10px rgba(29,78,216,.62)}
.login-hint{
  margin-top:18px;padding:0;background:none;border:0;
  font-size:11.5px;color:#AEB9C9;text-align:center;letter-spacing:.1px;
}
.login-hint code{background:none;color:#AEB9C9;font-size:11px;padding:0}
.setup-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.setup-2 .field{margin:0}
.setup-note{margin-top:16px;font-size:11.8px;color:#6B84A6;text-align:center;line-height:1.5}
@media (max-width:560px){.setup-2{grid-template-columns:1fr}}

/* Botones de modo de interfaz dentro del login */
/* Logo vectorial 3D */
.logo-3d{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.7;
  filter:drop-shadow(0 2px 3px rgba(15,40,90,.28))}
[data-ui="azul"] .login-logo .logo-3d{stroke:#1D4ED8}
.sb-logo .logo-3d{stroke:#FFFFFF;width:60%;height:60%}
.login-card .login-logo-sm .logo-3d{stroke:#FFFFFF}

/* Íconos en encabezados de sección de formularios */
.fg>label{display:flex;align-items:center;gap:5px}
.fg>label svg{width:13px;height:13px;opacity:.9}

/* Tarjetas de selección de Modos de Interfaz (Configuración) */
.ui-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.ui-card{display:flex;align-items:center;gap:12px;padding:13px;border-radius:14px;text-align:left;
  border:1.6px solid var(--border);background:var(--surface);transition:.16s;position:relative}
.ui-card:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ui-card.sel{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,var(--surface));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.ui-card-sw{width:52px;height:52px;border-radius:12px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.15)}
.ui-card-txt{min-width:0;flex:1;line-height:1.3}
.ui-card-txt b{display:block;font-size:13.2px;font-weight:750}
.ui-card-txt small{display:block;font-size:11px;color:var(--muted)}
.ui-card-check{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center}
.ui-card-check svg{width:12px;height:12px;stroke-width:3}

/* ══════════════════════════════════════════════════════════════
   ZONA BLANCA SUPERIOR IZQUIERDA (barra lateral)
   Área luminosa blanca que aloja la marca y desciende en curva
   suave hacia la derecha, como en el diseño de referencia.
   ══════════════════════════════════════════════════════════════ */
.sidebar .sb-white{
  position:absolute;top:0;left:0;width:100%;height:var(--sb-white-h,222px);
  pointer-events:none;z-index:0;
  /* El borde inferior arranca alto a la izquierda y baja hacia la derecha */
  border-radius:0 0 0 92% / 0 0 0 34%;
  background:
    radial-gradient(115% 120% at 18% -14%, #FFFFFF 0%, #FFFFFF 44%, #F4F9FF 74%, #E4EFFC 100%);
  box-shadow:
    0 16px 34px -14px rgba(6,24,60,.42),
    0 4px 12px -6px rgba(6,24,60,.24),
    inset 0 -1px 0 rgba(255,255,255,.85);
}
/* Refuerzo del brillo blanco en la esquina superior izquierda */
.sidebar .sb-white::before{
  content:'';position:absolute;left:-30%;top:-46%;width:132%;height:150%;
  background:radial-gradient(closest-side, #FFFFFF 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.34) 68%, transparent 86%);
}
/* Brillo diagonal de vidrio sobre el área blanca */
.sidebar .sb-white::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(158deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.16) 46%, transparent 68%);
}

/* La marca se coloca encima del área blanca y usa tinta oscura */
.sidebar .sb-brand{position:relative;z-index:2;color:#0A1F44}
.sidebar .sb-brand-txt b{color:#0B2447 !important;text-shadow:none}
.sidebar .sb-brand-txt small{color:#3F608F !important;text-shadow:none}

/* Logo con volumen azul sobre fondo blanco */
.sidebar .sb-logo{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.5), transparent 54%),
    linear-gradient(150deg,#2E8BF0 0%,#1554C8 54%,#0B2E8A 100%);
  box-shadow:
    0 16px 28px -10px rgba(16,76,190,.62),
    0 4px 10px rgba(8,32,86,.22),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 8px rgba(4,20,60,.32);
  color:#fff;position:relative;
}
.sidebar .sb-logo .logo-3d{stroke:#FFFFFF;filter:drop-shadow(0 2px 3px rgba(4,24,70,.35))}

.sidebar .sb-nav{padding-top:46px}

@media (max-width:900px){
  .sidebar .sb-white{--sb-white-h:196px;border-radius:0 0 0 64% / 0 0 0 30%}
}

/* La interfaz clara integra el blanco con el resto del panel */
html[data-ui="claro"] .sidebar .sb-white{
  background:radial-gradient(115% 120% at 18% -14%, #FFFFFF 0%, #FFFFFF 60%, #FAFDFF 82%, #F2F8FE 100%);
  box-shadow:0 12px 26px -18px rgba(20,60,110,.26), inset 0 -1px 0 rgba(255,255,255,.9);
}
html[data-ui="claro"] .sidebar .sb-brand-txt b{color:#0F3B6B !important}
html[data-ui="claro"] .sidebar .sb-brand-txt small{color:#4B6B8F !important}

/* ── Cubo 3D flotante de la marca (encabezado de la barra lateral) ── */
.sidebar .sb-logo{
  background:none !important;box-shadow:none !important;
  width:104px;height:104px;border-radius:0;display:grid;place-items:center;
}
.sidebar .sb-logo img{background:transparent}
.sidebar .sb-logo .logo-cube{width:100%;height:100%;position:relative;z-index:1;
  fill:unset!important;stroke-width:0!important}
/* El cubo conserva los rellenos de degradado de su SVG */
.sidebar .sb-logo .logo-cube path{stroke-width:inherit}
.sidebar .sb-logo .logo-cube path[stroke]{stroke-width:11.5}
/* Reflejo azul bajo la curva del área blanca, como en la referencia */
.sidebar .sb-white .sb-glow{
  position:absolute;left:-14%;bottom:-58%;width:132%;height:126%;
  background:radial-gradient(closest-side, rgba(37,110,235,.30) 0%, rgba(59,130,246,.16) 52%, transparent 76%);
  filter:blur(2px);
}
/* Sombra suave bajo el área blanca para dar profundidad */
.sidebar .sb-white{overflow:hidden}

@media (max-width:900px){
  .sidebar .sb-logo{width:72px;height:72px}
}

/* ── Logo del cubo en documentos impresos (guía A4 y ticket) ── */
.a4-logo-fb.a4-logo-cube,.tk-logo-fb.tk-logo-cube{
  display:grid!important;place-items:center;background:transparent!important;color:inherit;
  border:0!important;border-radius:0!important;font-size:0;
}
.a4-logo-cube .logo-print{width:100%;height:100%;fill:unset!important;stroke-width:0!important}
.tk-logo-cube .logo-print{width:22px;height:22px;fill:unset!important;stroke-width:0!important}

/* ── Pie del panel de acceso: créditos del desarrollador ── */
.login-foot{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 8px;
  font-size:11.8px;line-height:1.5;color:#D3E3F8;
  text-shadow:0 1px 3px rgba(3,16,42,.75);
  border-top:1px solid rgba(255,255,255,.16);padding-top:16px;
}
.login-foot>span{color:#D3E3F8}
.login-foot .lf-sep{opacity:.45}
.login-foot a{color:#C6DAF6;text-decoration:none;border-bottom:1px solid transparent;transition:.15s}
.login-foot a:hover{color:#FFFFFF;border-bottom-color:rgba(255,255,255,.5)}
.login-foot .lf-wa{display:inline-flex;align-items:center;gap:5px}
.login-foot .lf-wa svg{width:13px;height:13px;flex:none;fill:none;stroke:#7DD3A8;stroke-width:1.9}
.login-foot .lf-wa a{color:#C6DAF6}
.login-foot .lf-wa:hover svg{stroke:#4ADE80}

/* Las capas decorativas del panel de acceso van bajo el contenido */
.login-aside > .login-brand,
.login-aside > .login-hero,
.login-aside > .login-features,
.login-aside > .login-foot{position:relative;z-index:2}
.login-aside .login-bg,.login-aside .login-veil{z-index:0}

@media (max-width:1100px){
  .login-foot{font-size:11px}
}

/* ── Botón Ampliar pantalla (encabezado de Nuevo Envío) ── */
.fs-btn{
  display:inline-grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:9px;border:1.6px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.16);color:#FFFFFF;
  transition:transform .15s, background .15s, box-shadow .15s, border-color .15s;
  box-shadow:0 2px 8px rgba(6,26,66,.18), inset 0 1px 0 rgba(255,255,255,.3);
  cursor:pointer;
}
.fs-btn:hover{
  background:rgba(255,255,255,.28);border-color:#fff;transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(6,26,66,.26), inset 0 1px 0 rgba(255,255,255,.45);
}
.fs-btn:active{transform:translateY(0) scale(.96)}
.fs-btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.fs-btn svg{width:16px;height:16px;stroke-width:2.1;color:#fff}
.fs-btn.on{background:rgba(255,255,255,.34);border-color:#fff}

/* En pantalla completa el botón se mantiene sobre el encabezado */
:fullscreen .guia-bar{position:relative;z-index:5}
:fullscreen .fs-btn{background:rgba(255,255,255,.24)}

@media (max-width:640px){
  .fs-btn{width:30px;height:30px}
  .fs-btn svg{width:15px;height:15px}
}

/* ── Selector de color de la guía ── */
.guide-colors{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0 2px}
.gc-dot{
  width:30px;height:30px;border-radius:50%;flex:none;cursor:pointer;position:relative;
  background:var(--gc);border:0;
  box-shadow:0 2px 6px rgba(10,30,60,.20), inset 0 -2px 5px rgba(0,0,0,.16), inset 0 2px 4px rgba(255,255,255,.24);
  transition:transform .16s, box-shadow .16s;
}
.gc-dot:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 6px 14px rgba(10,30,60,.26), inset 0 -2px 5px rgba(0,0,0,.16)}
.gc-dot:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* Anillo + check cuando está seleccionado (como en la referencia) */
.gc-dot.sel{
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--gc), 0 4px 10px rgba(10,30,60,.24);
  transform:scale(1.04);
}
.gc-dot.sel::after{
  content:'';position:absolute;inset:0;margin:auto;width:11px;height:6px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;
  transform:translateY(-2px) rotate(-45deg);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
@media (max-width:640px){
  .gc-dot{width:27px;height:27px}
  .guide-colors{gap:10px}
}

/* ══════════════════════════════════════════════════════════════
   MODO AMPLIADO PROPIO (respaldo cuando el navegador bloquea
   la Fullscreen API: iframes con sandbox, permisos, iOS…)
   Oculta barra lateral y barra superior y da todo el ancho al área
   de trabajo. Se sale con Esc o con el mismo botón.
   ══════════════════════════════════════════════════════════════ */
body.fs-expanded,
html.fs-expanded{overflow:hidden!important}

body.fs-expanded .sidebar,
body.fs-expanded .topbar,
body.fs-expanded .sb-overlay,
body.fs-expanded .top-burger{display:none!important}

body.fs-expanded .main{
  margin-left:0!important;width:100vw!important;max-width:100vw;
  height:100vh;overflow:hidden;display:flex;flex-direction:column;
}
body.fs-expanded .view,
body.fs-expanded main.view{
  flex:1;min-height:0;overflow:auto;
  padding:18px 32px 26px!important;
  max-width:none!important;width:100%!important;
}
/* El contenido aprovecha el ancho completo */
body.fs-expanded .pos-layout{grid-template-columns:minmax(0,1fr) 392px}
body.fs-expanded .guia-bar{position:sticky;top:0;z-index:20}

/* Aviso flotante de salida */
body.fs-expanded::after{
  content:'Pantalla ampliada · presiona Esc para volver';
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  z-index:9998;pointer-events:none;
  background:rgba(12,26,52,.92);color:#fff;
  font:600 11.5px/1 "Segoe UI",Arial,sans-serif;letter-spacing:.3px;
  padding:8px 15px;border-radius:999px;
  box-shadow:0 8px 22px rgba(4,16,40,.4);
  animation:fsHint 4.2s ease forwards;
}
@keyframes fsHint{
  0%{opacity:0;transform:translateX(-50%) translateY(8px)}
  10%,78%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(6px);visibility:hidden}
}

@media (max-width:1100px){
  body.fs-expanded .pos-layout{grid-template-columns:1fr}
  body.fs-expanded .view{padding:14px 16px 20px!important}
}

/* ── Fila Documento / Razón Social + Teléfono (Remitente y Destinatario) ── */
.doc-tel-row{display:grid;grid-template-columns:1.15fr 1fr;gap:9px}
.doc-tel-row .fg{min-width:0}
@media (max-width:520px){
  .doc-tel-row{grid-template-columns:1fr}
}