/* ─── RESET & VARIABLES ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Linear/Vercel 2026 palette — neutral base, brand accent reserved for actions */
  --void:#0a0a0b;
  --surf:#111113;
  --panel:#161618;
  --panel-2:#1c1c1f;
  --line:rgba(255,255,255,.06);
  --line-s:rgba(255,255,255,.14);
  --line-hi:rgba(255,255,255,.22);
  /* Brand accent (Inuit ice) — used sparingly for primary action */
  --ice:#00d4ec;
  --ice-b:#67e8f9;
  --aur-g:#22c55e;
  --aur-v:#8b5cf6;
  --gold:#eab308;
  --red:#ef4444;
  /* Text hierarchy */
  --cream:#ededee;
  --cream-d:rgba(237,237,238,.72);
  --cream-f:rgba(237,237,238,.60); /* WCAG AA 4.5:1 sobre --void (subido de .48 que daba 4.42:1) */
  --cream-x:rgba(237,237,238,.32);
  /* Unit accents (kept for continuity) */
  --gacama:#818cf8;
  --canastas:#fb923c;
  --hielos:#00d4ec;
  --tequilera:#d4a84d;
  /* Layout */
  --sidebar:240px;
  --topbar:52px;
  /* Radius scale Apple-inspired (múltiplos generosos) — reemplaza --radius/--radius-lg/--radius-xl */
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;
  --radius:var(--r-sm);       /* alias back-compat */
  --radius-lg:var(--r-md);
  --radius-xl:var(--r-lg);
  /* Motion — Apple spring + Linear snappy */
  --trans:.14s cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.32,.72,0,1);
  --ease:.16s cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(0.5,1.15,0.5,1.15);
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
  --dur-fast:150ms;
  --dur:250ms;
  --dur-slow:400ms;
  /* Frosted material */
  --glass-bg:rgba(15,15,19,.72);
  --glass-bg-fallback:rgba(15,15,19,.92);
  --glass-border:1px solid rgba(255,255,255,.08);
  /* Elevation legacy + Apple depth scale */
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 4px 12px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.20);
  --shadow-lg:0 12px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
  --shadow-focus:0 0 0 3px rgba(0,212,236,.24);
  --sh-1:0 1px 3px rgba(0,0,0,.16);
  --sh-2:0 8px 24px rgba(0,0,0,.28);
  --sh-3:0 24px 60px rgba(0,0,0,.44),0 1px 0 rgba(255,255,255,.08) inset;
  --sh-fab:0 10px 30px rgba(0,212,236,.35),0 1px 0 rgba(255,255,255,.12) inset;
}
/* Fallback si backdrop-filter no soportado */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root{ --glass-bg:var(--glass-bg-fallback); }
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",system-ui,'Segoe UI',sans-serif;
  font-feature-settings:'cv11','ss01','ss03';
  background:var(--void);
  color:var(--cream);
  min-height:100vh;
  overflow-x:hidden;
  font-size:14px;
  line-height:1.5;
  letter-spacing:-0.005em;
}
h1,h2,h3,h4{font-family:inherit;line-height:1.15;letter-spacing:-0.02em;font-weight:600}
code,kbd,.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-s);border-radius:99px}
::selection{background:rgba(0,212,236,.25)}

/* ═══ Apple polish: press states universal ═══ */
button,.btn,[role="button"],.tile,.sb-link,.side-item,.card,.chip,.tab,
.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-icon,.btn-sm,.btn-lg{
  transition:transform var(--dur-fast) var(--ease-out-quart),
             filter var(--dur-fast) linear,
             box-shadow var(--dur) var(--ease-out-quart),
             background-color var(--dur-fast) var(--ease-out-quart),
             border-color var(--dur-fast) var(--ease-out-quart),
             color var(--dur-fast) var(--ease-out-quart);
}
button:active,.btn:active,[role="button"]:active,.tile:active,
.btn-primary:active,.btn-secondary:active,.btn-ghost:active,.btn-danger:active,.btn-icon:active{
  transform:scale(0.96);
  filter:brightness(0.85);
}

/* ═══ Reduce motion respect (Apple a11y) ═══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* ═══ Focus visible global (WCAG 2.4.11 AA) ═══
   Ring cyan sutil solo cuando el usuario navega con keyboard/Tab.
   No aparece en click (:focus-visible respeta interaction mode). */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(103,232,249,.55),
             0 0 0 5px rgba(15,15,19,.90);
  border-radius:inherit;
}
/* Focus con contenedor blanco no rompe estilos existentes de shadow */
button:focus-visible:hover,
[role="button"]:focus-visible:hover{
  box-shadow:0 0 0 3px rgba(103,232,249,.65),
             0 0 0 5px rgba(15,15,19,.90);
}

/* ═══ Canonical button system (4 variants + sizes + icon-only) ═══ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border:none;border-radius:var(--r-md);cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;letter-spacing:-.005em;
  background:linear-gradient(135deg,var(--ice),#0891b2);color:#fff;
  box-shadow:var(--sh-fab);
  min-height:44px;
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;letter-spacing:-.005em;
  background:rgba(255,255,255,.06);color:var(--cream);
  min-height:44px;
}
.btn-secondary:hover{background:rgba(255,255,255,.10);border-color:var(--line-s)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 16px;border:none;border-radius:var(--r-md);cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;
  background:transparent;color:var(--cream-d);
  min-height:40px;
}
.btn-ghost:hover{background:rgba(255,255,255,.05);color:var(--cream)}
.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border:1px solid rgba(239,68,68,.35);border-radius:var(--r-md);cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;
  background:rgba(239,68,68,.14);color:var(--red);
  min-height:44px;
}
.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn-sm{padding:8px 12px;font-size:13px;min-height:36px}
.btn-lg{padding:16px 28px;font-size:16px;min-height:52px}
.btn-icon{padding:10px;aspect-ratio:1;min-width:40px;min-height:40px}
.btn-icon.btn-lg{padding:14px;min-width:52px;min-height:52px}
/* Loading spinner state */
.btn-primary.is-loading,.btn-secondary.is-loading,.btn-danger.is-loading{
  pointer-events:none;opacity:.75;position:relative;color:transparent !important;
}
.btn-primary.is-loading::after,.btn-secondary.is-loading::after,.btn-danger.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;
  width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--cream);
  animation:btn-spin .7s linear infinite;
}
.btn-primary.is-loading::after{color:#fff}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .btn-primary.is-loading::after,.btn-secondary.is-loading::after,.btn-danger.is-loading::after{animation:none}
}

/* ═══ Canonical segmented control — iOS pill style ═══
   Uso: <div class="seg"><button class="active">A</button><button>B</button></div>
   También aplicado por overrides a: .unit-seg-nav, .task-filter-seg, .filter-tabs,
   .hmapa-filters, .inv-zonas (chips), y variantes tab-group existentes.  */
.seg{
  display:inline-flex;
  background:rgba(255,255,255,.06);
  padding:3px;
  border-radius:999px;
  gap:0;
  position:relative;
  white-space:nowrap;
}
.seg > *{
  padding:6px 14px;
  border-radius:999px;
  background:transparent;
  color:var(--cream-d);
  font-size:13px;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:color var(--dur) var(--ease-out-quart),
             background-color var(--dur) var(--ease-out-quart),
             box-shadow var(--dur) var(--ease-out-quart);
  letter-spacing:-.005em;
  line-height:1.2;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family:inherit;
}
.seg > *:hover{ color:var(--cream); }
.seg > .active,
.seg > [aria-selected="true"],
.seg > [data-active="true"]{
  background:rgba(255,255,255,.12);
  color:var(--cream);
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 .5px rgba(255,255,255,.08) inset;
}
.seg > *:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,212,236,.28), inset 0 0 0 1px rgba(0,212,236,.4);
}
.seg-sm > *{ padding:4px 10px; font-size:12px; min-height:26px; }
.seg-lg > *{ padding:10px 18px; font-size:14px; min-height:40px; }
@media (max-width:640px){
  .seg{ flex-wrap:wrap; }
}

/* ═══ iOS-pill overrides para tab groups existentes (minimal-diff) ═══ */
/* .unit-seg-nav (segmented nav Unidades) */
.unit-seg-nav{
  display:inline-flex;background:rgba(255,255,255,.06)!important;
  padding:3px!important;border-radius:999px!important;
  gap:0!important;white-space:nowrap;border:none!important;
}
.unit-seg-nav .unit-seg-btn{
  border-radius:999px!important;
  padding:10px 16px;background:transparent;
  color:var(--cream-d);font-size:13px;font-weight:600;
  min-height:44px;line-height:1.2;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--dur) var(--ease-out-quart),
             background-color var(--dur) var(--ease-out-quart),
             box-shadow var(--dur) var(--ease-out-quart);
}
.unit-seg-nav .unit-seg-btn:hover:not(.active){color:var(--cream);background:transparent}
.unit-seg-nav .unit-seg-btn.active{
  background:rgba(255,255,255,.12)!important;color:var(--cream)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 .5px rgba(255,255,255,.08) inset!important;
}

/* .task-filter-seg (task sub-filter) */
.task-filter-seg{
  display:inline-flex;background:rgba(255,255,255,.06)!important;
  padding:3px!important;border-radius:999px!important;
  gap:0!important;border:none!important;
}
.task-filter-seg .tfs-btn{
  border-radius:999px!important;padding:10px 14px;
  font-size:12px;font-weight:600;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--cream-d);background:transparent;
}
.task-filter-seg .tfs-btn:hover:not(.active){color:var(--cream);background:transparent}
.task-filter-seg .tfs-btn.active{
  background:rgba(255,255,255,.12)!important;color:var(--cream)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 .5px rgba(255,255,255,.08) inset!important;
}

/* .filter-tabs (legacy tabs) */
.filter-tabs{
  display:inline-flex;background:rgba(255,255,255,.06)!important;
  padding:3px!important;border-radius:999px!important;
  gap:0!important;border:none!important;
}
.filter-tabs .filter-tab{
  border-radius:999px!important;padding:6px 14px;
  font-size:12px;font-weight:600;min-height:30px;
  color:var(--cream-d);background:transparent;
}
.filter-tabs .filter-tab:hover:not(.active){color:var(--cream);background:transparent}
.filter-tabs .filter-tab.active{
  background:rgba(255,255,255,.12)!important;color:var(--cream)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 .5px rgba(255,255,255,.08) inset!important;
}

/* .hmapa-filters (grupo filtros mapa hielo) */
.hmapa-filters{
  display:inline-flex;background:rgba(255,255,255,.06)!important;
  padding:3px!important;border-radius:999px!important;
  gap:0!important;border:none!important;flex-wrap:wrap;
}
.hmapa-filters .hmapa-filter-btn{
  border-radius:999px!important;padding:10px 14px;
  font-size:12px;font-weight:600;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  color:var(--cream-d);background:transparent;
  transition:color var(--dur) var(--ease-out-quart),
             background-color var(--dur) var(--ease-out-quart),
             box-shadow var(--dur) var(--ease-out-quart);
}
.hmapa-filters .hmapa-filter-btn:hover:not(.active):not(:disabled){color:var(--cream);background:transparent}
.hmapa-filters .hmapa-filter-btn.active{
  background:rgba(255,255,255,.12)!important;color:var(--cream)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 .5px rgba(255,255,255,.08) inset!important;
}
/* Preservar variantes alert (destructive) */
.hmapa-filters .hmapa-filter-btn.alert.active{
  background:#ef4444!important;color:var(--void)!important;
}

/* .inv-zonas > .inv-chip (chips filtro inventarios) */
.inv-zonas{
  display:inline-flex;background:rgba(255,255,255,.06);
  padding:3px;border-radius:999px;gap:0;flex-wrap:wrap;
}
.inv-zonas .inv-chip{
  border-radius:999px!important;padding:6px 14px!important;
  font-size:12px!important;font-weight:600!important;min-height:30px;
  color:var(--cream-d)!important;background:transparent!important;
  border:none!important;letter-spacing:-.005em!important;
  display:inline-flex;align-items:center;
  transition:color var(--dur) var(--ease-out-quart),
             background-color var(--dur) var(--ease-out-quart),
             box-shadow var(--dur) var(--ease-out-quart);
}
.inv-zonas .inv-chip:hover:not(.active){color:var(--cream)!important;background:transparent!important}
.inv-zonas .inv-chip.active{
  background:rgba(255,255,255,.12)!important;color:var(--cream)!important;
  border-color:transparent!important;
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 .5px rgba(255,255,255,.08) inset!important;
}

/* ═══════════════════════════════════════════════════════════════
   📈 REPORTES HIELOS — Apple-cinematic analytics dashboard
   Mobile-first · WCAG 44px touch · frosted glass · spring motion
   ═══════════════════════════════════════════════════════════════ */
.rep-shell{
  display:flex;flex-direction:column;gap:14px;
  padding-bottom:calc(120px + var(--safe-bottom,0px));
  min-width:0;max-width:100%;
}
.rep-filters{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  position:sticky;top:calc(var(--topbar) + 4px);z-index:12;
}
.rep-filter-group{
  display:inline-flex;background:rgba(255,255,255,.06);padding:3px;
  border-radius:999px;gap:0;
}
.rep-range-btn,.rep-sku-btn{
  border:none;background:transparent;color:var(--cream-d);
  padding:10px 16px;border-radius:999px;font:inherit;font-size:12px;font-weight:600;
  min-height:44px;cursor:pointer;letter-spacing:-.005em;
  transition:color var(--dur) var(--ease-out-quart),background-color var(--dur) var(--ease-out-quart),
             box-shadow var(--dur) var(--ease-out-quart);
}
.rep-range-btn:hover:not(.active),.rep-sku-btn:hover:not(.active){color:var(--cream)}
.rep-range-btn.active,.rep-sku-btn.active{
  background:rgba(255,255,255,.12);color:var(--cream);
  box-shadow:0 2px 8px rgba(0,0,0,.24),0 0 0 .5px rgba(255,255,255,.08) inset;
}
.rep-filter-actions{display:inline-flex;gap:6px;flex-wrap:wrap}
.rep-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:var(--cream);padding:10px 14px;border-radius:var(--r-md);
  font:inherit;font-size:12px;font-weight:600;min-height:44px;cursor:pointer;
  transition:background-color var(--dur) var(--ease-out-quart),
             border-color var(--dur) var(--ease-out-quart);
}
.rep-btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14)}
.rep-btn-ghost:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,212,236,.32)}

/* KPI cards */
.rep-kpi-row{
  display:grid;gap:12px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
/* Feature 14: YoY KPI se acomoda como 5to (grid auto-fills at responsive) */
.rep-kpi-row:has(.rep-kpi-yoy){grid-template-columns:repeat(5, minmax(0, 1fr))}
.rep-kpi-yoy-empty{opacity:.55}
@media (max-width:1024px){
  .rep-kpi-row:has(.rep-kpi-yoy){grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width:640px){
  .rep-kpi-row:has(.rep-kpi-yoy){grid-template-columns:repeat(2, minmax(0, 1fr))}
}
.rep-kpi{
  padding:16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);
  min-height:104px;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform var(--dur) var(--ease-spring),background-color var(--dur) var(--ease-out-quart);
}
.rep-kpi:hover{transform:translateY(-2px);background:rgba(255,255,255,.05)}
.rep-kpi-lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-f);font-weight:600}
.rep-kpi-num{font-size:26px;font-weight:700;color:var(--cream);letter-spacing:-.02em;line-height:1.15;margin:6px 0 4px}
.rep-kpi-sub{font-size:11px;color:var(--cream-d);line-height:1.4}
.rep-kpi-primary{background:linear-gradient(135deg,rgba(0,212,236,.10),rgba(0,212,236,.02));border-color:rgba(0,212,236,.20)}
.rep-kpi-primary .rep-kpi-num{color:var(--ice-b)}
.rep-kpi-delta[data-dir="up"] .rep-kpi-num{color:#22c55e}
.rep-kpi-delta[data-dir="down"] .rep-kpi-num{color:#ef4444}
.rep-kpi-delta[data-dir="flat"] .rep-kpi-num{color:var(--cream-d)}

/* Cards genéricas */
.rep-card{
  padding:14px 16px 16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);
  min-width:0;
}
.rep-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.rep-card-title{font-size:14px;font-weight:600;color:var(--cream);margin:0;letter-spacing:-.01em}
.rep-card-meta{font-size:11px;color:var(--cream-f)}

/* Chart */
.rep-chart-wrap{width:100%;overflow:hidden;border-radius:var(--r-sm);background:rgba(0,0,0,.16);padding:6px}
.rep-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--cream-d)}
.rep-leg{display:inline-flex;align-items:center;gap:6px}
.rep-leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.rep-leg-hint{margin-left:auto;font-size:10px;color:var(--cream-f)}

/* Two-col layout: leaderboard + heatmap */
.rep-two-col{display:grid;gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}

/* Progressive-disclosure accordions (Reportes) — WCAG 2.1 AA, native <details> */
.rep-acc{margin:14px 0;border-radius:14px;background:var(--glass-bg);border:1px solid var(--line-s);overflow:hidden;transition:border-color .2s ease;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.rep-acc[open]{border-color:var(--line-m);box-shadow:0 4px 20px rgba(0,0,0,.10)}
.rep-acc>summary{list-style:none;cursor:pointer;padding:14px 18px;display:flex;align-items:center;gap:12px;font-weight:600;color:var(--cream);min-height:44px;user-select:none;transition:background .18s ease;font-size:14px;letter-spacing:-.01em}
.rep-acc>summary::-webkit-details-marker{display:none}
.rep-acc>summary::marker{display:none;content:''}
.rep-acc>summary:hover{background:rgba(255,255,255,.035)}
.rep-acc>summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(103,232,249,.45)}
.rep-acc-chev{width:18px;height:18px;color:var(--cream-d);transition:transform .28s cubic-bezier(.22,1,.36,1);flex-shrink:0}
.rep-acc[open] .rep-acc-chev{transform:rotate(90deg);color:var(--cyan,#67e8f9)}
.rep-acc-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-acc-badge{font-size:10px;padding:3px 8px;border-radius:999px;background:rgba(103,232,249,.14);color:var(--cyan,#67e8f9);font-weight:600;letter-spacing:.02em;text-transform:uppercase;flex-shrink:0}
.rep-acc-meta{font-size:11px;color:var(--cream-f);font-weight:500;font-variant-numeric:tabular-nums;flex-shrink:0}
.rep-acc-body{padding:2px 4px 4px;animation:accSlide .32s cubic-bezier(.22,1,.36,1)}
.rep-acc-body>.rep-card,.rep-acc-body>.rep-two-col{margin-top:8px}
.rep-acc-body>.rep-card+.rep-card,.rep-acc-body>.rep-two-col+.rep-card,.rep-acc-body>.rep-card+.rep-two-col{margin-top:12px}
@keyframes accSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:480px){
  .rep-acc{margin:10px 0;border-radius:14px}
  .rep-acc>summary{padding:12px 14px;font-size:13px;gap:10px}
  .rep-acc-meta{display:none}
  .rep-acc-badge{font-size:9px;padding:2px 6px}
}
@media (prefers-reduced-motion:reduce){
  .rep-acc,.rep-acc-chev,.rep-acc-body{transition:none;animation:none}
}

/* Leaderboard */
.rep-leader{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.rep-leader-item{display:flex;align-items:center;gap:12px;padding:10px;background:rgba(255,255,255,.03);border-radius:var(--r-sm);min-height:52px}
.rep-leader-rank{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:rgba(255,255,255,.08);color:var(--cream-d);
}
.rep-leader-rank.gold{background:linear-gradient(135deg,#fbbf24,#d97706);color:#0a0a0f}
.rep-leader-rank.silver{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#0a0a0f}
.rep-leader-rank.bronze{background:linear-gradient(135deg,#f59e0b,#78350f);color:#0a0a0f}
.rep-leader-body{flex:1;min-width:0}
.rep-leader-name{font-size:13px;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-leader-bar{height:5px;background:rgba(255,255,255,.06);border-radius:99px;margin:4px 0;overflow:hidden}
.rep-leader-fill{height:100%;background:linear-gradient(90deg,var(--ice),var(--ice-b));border-radius:99px;transition:width .5s var(--ease-spring)}
.rep-leader-meta{font-size:11px;color:var(--cream-f)}

/* Heatmap */
.rep-heatmap-wrap{margin:0 -4px}
.rep-heatmap-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 4px 4px}
.rep-heatmap{border-collapse:separate;border-spacing:3px;width:100%;font-size:10px}
.rep-heatmap th.rep-hm-suc{
  text-align:left;padding:6px 8px;font-weight:600;color:var(--cream-d);
  background:transparent;position:sticky;left:0;z-index:2;
  min-width:120px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rep-heatmap th.rep-hm-day{
  padding:4px 2px;font-weight:600;color:var(--cream-f);text-align:center;
  background:transparent;min-width:26px;
}
.rep-heatmap th.rep-hm-day span{display:block;font-size:12px;color:var(--cream)}
.rep-heatmap th.rep-hm-day small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.rep-heatmap td.rep-hm-cell{
  text-align:center;padding:0;min-width:26px;height:26px;
  border-radius:6px;font-size:9px;font-weight:600;
  /* El fondo es cian con opacidad variable: cuando la opacidad baja, el cian
     desaparece y queda texto oscuro sobre fondo oscuro. Medido: 1.05:1, o sea
     invisible. El cruce esta en opacidad .55 — por encima gana el texto
     oscuro (4.7:1), por debajo el claro (4.6:1 y subiendo). --tinta lo
     decide celda por celda desde el JS. */
  color:var(--tinta, var(--cream));
  background:rgba(0,212,236,var(--op,0));
  transition:transform .12s var(--ease-out-quart);
  cursor:default;
}
.rep-heatmap td.rep-hm-cell:hover{transform:scale(1.14);z-index:3;position:relative}
.rep-heatmap th.rep-hm-suc{position:sticky;left:0;background:rgba(15,15,19,.94)}

/* Detail table */
.rep-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.rep-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:520px}
.rep-table thead th{
  padding:8px 10px;font-weight:600;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cream-f);text-align:right;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rep-table thead th:first-child{text-align:left}
.rep-table .rep-tr{cursor:pointer;transition:background-color var(--dur) var(--ease-out-quart)}
.rep-table .rep-tr:hover{background:rgba(0,212,236,.06)}
.rep-table .rep-tr td{padding:10px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.rep-td-name{color:var(--cream);font-weight:600;text-align:left}
.rep-td-num{text-align:right;color:var(--cream-d);font-variant-numeric:tabular-nums}
.rep-td-strong{color:var(--cream);font-weight:700}
.rep-td-share{text-align:right;min-width:110px}
.rep-td-share .rep-share-bar{display:inline-block;width:60px;height:5px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;vertical-align:middle;margin-right:6px}
.rep-td-share .rep-share-fill{height:100%;background:var(--ice);border-radius:99px}
.rep-td-share span{font-variant-numeric:tabular-nums;color:var(--cream-d)}

/* Modal sucursales filter */
.rep-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.58);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.rep-modal.open{display:flex}
.rep-modal-card{
  background:var(--glass-bg);border:var(--glass-border);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-radius:var(--r-lg);
  width:100%;max-width:480px;max-height:82vh;display:flex;flex-direction:column;
  box-shadow:var(--sh-3);
}
.rep-modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.rep-modal-head h3{margin:0;font-size:16px;font-weight:600;color:var(--cream)}
.rep-modal-close{
  background:rgba(255,255,255,.08);border:none;color:var(--cream);
  width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;
}
.rep-modal-actions{display:flex;gap:8px;padding:10px 20px;border-bottom:1px solid rgba(255,255,255,.04)}
.rep-suc-list{list-style:none;padding:8px 12px;margin:0;overflow-y:auto;flex:1}
.rep-suc-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-sm);cursor:pointer;min-height:48px}
.rep-suc-row:hover{background:rgba(255,255,255,.04)}
.rep-suc-row input{width:20px;height:20px;accent-color:var(--ice)}
.rep-suc-name{flex:1;font-size:13px;color:var(--cream);font-weight:500}
.rep-suc-city{font-size:11px;color:var(--cream-f)}
.rep-modal-foot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:flex-end}

/* Empty / error states */
.rep-empty-hero{
  padding:48px 24px;text-align:center;background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.08);border-radius:var(--r-md);
}
.rep-empty-icon{font-size:44px;margin-bottom:12px;opacity:.5}
.rep-empty-title{font-size:16px;font-weight:600;color:var(--cream);margin-bottom:8px}
.rep-empty-desc{font-size:13px;color:var(--cream-d);line-height:1.6}
.rep-empty{padding:32px 16px;text-align:center;color:var(--cream-f);font-size:12px}
.rep-error{padding:24px;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.20);border-radius:var(--r-md);color:var(--cream)}
.rep-error b{color:#ef4444;font-size:14px;display:block;margin-bottom:8px}
.rep-error p{font-size:12px;color:var(--cream-d);margin:6px 0}
.rep-error code{background:rgba(0,0,0,.4);padding:2px 6px;border-radius:6px;font-size:11px}
.rep-error button{margin-top:8px}
.rep-footer{padding:12px 4px;font-size:11px;color:var(--cream-f);text-align:center}
.rep-footer code{background:rgba(255,255,255,.06);padding:1px 6px;border-radius:6px}

/* ═══ Responsive: iPad ═══ */
@media (max-width:1024px){
  .rep-kpi-row{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rep-two-col{grid-template-columns:1fr}
  .rep-kpi-num{font-size:22px}
}

/* ═══ Responsive: Mobile ═══ */
@media (max-width:640px){
  .rep-shell{gap:12px}
  .rep-filters{
    padding:8px;gap:8px;flex-direction:column;align-items:stretch;
    position:sticky;top:calc(var(--topbar,52px) + 4px);z-index:15;
    background:rgba(15,15,19,.92);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
  }
  .rep-filter-group{width:100%;justify-content:space-around;flex-wrap:nowrap}
  .rep-range-btn,.rep-sku-btn{flex:1;min-width:0;padding:12px 6px;font-size:11px;min-height:44px}
  .rep-filter-actions{width:100%;justify-content:space-between}
  .rep-btn-ghost{flex:1;padding:12px 8px;min-height:44px;font-size:11px}
  .rep-btn-ghost span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rep-kpi-row{grid-template-columns:repeat(2, minmax(0,1fr));gap:8px}
  .rep-kpi{padding:12px;min-height:88px}
  .rep-kpi-num{font-size:18px}
  .rep-kpi-lbl{font-size:10px}
  .rep-kpi-sub{font-size:10px}
  .rep-card{padding:12px}
  .rep-card-title{font-size:13px}
  .rep-leader-item{padding:8px;gap:10px;min-height:56px}
  .rep-leader-rank{width:32px;height:32px;font-size:13px}
  .rep-heatmap{font-size:9px}
  .rep-heatmap th.rep-hm-suc{min-width:96px;max-width:110px;font-size:10px;padding:4px 6px}
  .rep-heatmap td.rep-hm-cell{min-width:22px;height:22px;font-size:8px}
  .rep-table{min-width:0;font-size:11px}
  .rep-table thead th{padding:6px 6px;font-size:9px}
  .rep-table .rep-tr td{padding:10px 6px;font-size:11px}
  .rep-td-share{min-width:90px}
  .rep-td-share .rep-share-bar{width:44px}
  .rep-modal-card{max-width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:auto;align-self:stretch}
  .rep-modal{padding:0;align-items:flex-end}
  .rep-suc-row{min-height:52px;padding:12px 10px}
}

/* ═══════════════════════════════════════════════════════════════
   📊 HEATMAP TOGGLE días/semanas — Feature 2 (hielos)
════════════════════════════════════════════════════════════════ */
.rep-heatmap-toggle{
  display:inline-flex;background:rgba(255,255,255,.06);padding:3px;
  border-radius:999px;gap:0;margin:0 0 12px;
}
.rep-hm-toggle-btn{
  border:none;background:transparent;color:var(--cream-d);
  padding:8px 14px;border-radius:999px;font:inherit;font-size:12px;font-weight:600;
  min-height:36px;cursor:pointer;letter-spacing:-.005em;
  transition:color var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart);
}
.rep-hm-toggle-btn:hover:not(.active){color:var(--cream)}
.rep-hm-toggle-btn.active{
  background:rgba(255,255,255,.12);color:var(--cream);
  box-shadow:0 2px 8px rgba(0,0,0,.24), 0 0 0 .5px rgba(255,255,255,.08) inset;
}
.rep-hm-week span{font-size:11px !important;letter-spacing:.02em}
.rep-hm-trend{background:rgba(255,255,255,.04);font-size:9px;font-weight:600;text-align:center;color:var(--cream-d);min-width:52px}
.rep-hm-delta{
  text-align:center;font:700 11px/1 -apple-system, "SF Pro Text", system-ui;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:52px;
  background:rgba(255,255,255,.02) !important;
}
.rep-hm-delta[data-dir="up"]{color:#22c55e}
.rep-hm-delta[data-dir="down"]{color:#ef4444}
.rep-hm-delta[data-dir="flat"]{color:var(--cream-d)}
/* Feature 13: anomaly row (caída >30% vs baseline 4 semanas) */
.rep-anomaly-row{background:linear-gradient(90deg, rgba(239,68,68,.08), transparent)}
.rep-anomaly-row .rep-hm-suc{color:#f87171 !important;font-weight:700}
.rep-anomaly-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;margin-right:4px;
  animation:repAnomalyPulse 2s ease-in-out infinite;
}
@keyframes repAnomalyPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.75;transform:scale(1.15)}
}
@media (prefers-reduced-motion:reduce){
  .rep-anomaly-badge{animation:none}
}
@media (max-width:640px){
  .rep-hm-toggle-btn{padding:12px 14px;min-height:44px;font-size:11px}
}

/* Generar ventas button — prominente (gradient ice) */
.rep-btn-generate{
  display:inline-flex;align-items:center;gap:6px;
  padding:12px 18px;min-height:44px;
  background:linear-gradient(135deg, var(--ice), var(--ice-b));
  color:var(--void);border:none;border-radius:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.005em;
  box-shadow:0 4px 14px rgba(0,212,236,.28);
  transition:transform 200ms var(--spring), box-shadow 200ms, filter 200ms;
}
.rep-btn-generate:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 6px 18px rgba(0,212,236,.42);
}
.rep-btn-generate:active:not(:disabled){transform:translateY(0) scale(.97)}
.rep-btn-generate:disabled{opacity:.6;cursor:wait}
.rep-btn-generate:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(103,232,249,.45), 0 4px 14px rgba(0,212,236,.28)}

/* ═══════════════════════════════════════════════════════════════
   🚨 STOCK-OUT PREDICT WIDGET — Feature 1 (hielos + tequila)
════════════════════════════════════════════════════════════════ */
.rep-predict-card{
  background:linear-gradient(135deg, rgba(239,68,68,.06), rgba(239,68,68,.02));
  border-color:rgba(239,68,68,.20);
}
.rep-predict-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.rep-predict-item{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  padding:10px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
  border:0.5px solid rgba(255,255,255,.06);
  min-height:52px;
  transition:transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart);
}
.rep-predict-item .rep-predict-icon,
.rep-predict-item .rep-predict-body{cursor:pointer}
/* Feature 12: Reorder button */
.rep-predict-reorder{
  display:inline-flex;align-items:center;gap:4px;
  padding:8px 12px;min-height:44px;
  background:linear-gradient(135deg, rgba(139,92,246,.16), rgba(139,92,246,.06));
  border:0.5px solid rgba(139,92,246,.32);
  color:#c4b5fd;border-radius:8px;cursor:pointer;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  transition:transform 200ms var(--spring), background 200ms, border-color 200ms;
  white-space:nowrap;
}
.rep-predict-reorder:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(139,92,246,.24), rgba(139,92,246,.10));
  border-color:rgba(139,92,246,.48);
  color:#ddd6fe;
}
.rep-predict-reorder:active{transform:translateY(0) scale(.97)}
@media (max-width:640px){
  .rep-predict-item{grid-template-columns:auto 1fr auto auto;gap:8px}
  .rep-predict-reorder{padding:8px 10px;font-size:11px}
}
.rep-predict-item:hover{transform:translateY(-1px);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.rep-predict-item[data-urgency="critical"]{border-color:rgba(239,68,68,.35);background:linear-gradient(90deg, rgba(239,68,68,.10), rgba(255,255,255,.02))}
.rep-predict-item[data-urgency="high"]{border-color:rgba(249,115,22,.28);background:linear-gradient(90deg, rgba(249,115,22,.08), rgba(255,255,255,.02))}
.rep-predict-item[data-urgency="medium"]{border-color:rgba(234,179,8,.24)}
.rep-predict-icon{font-size:18px;line-height:1;flex-shrink:0}
.rep-predict-body{min-width:0}
.rep-predict-name{font:600 13px/1.3 -apple-system, "SF Pro Text", system-ui;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-predict-detail{font:500 11px/1.4 -apple-system, "SF Pro Text", system-ui;color:var(--cream-d);margin-top:2px;font-variant-numeric:tabular-nums}
.rep-predict-detail b{color:var(--cream);font-weight:700}
.rep-predict-days{
  font:700 15px/1 -apple-system, "SF Pro Display", system-ui;
  color:#f87171;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  min-width:44px;text-align:right;
}
.rep-predict-item[data-urgency="critical"] .rep-predict-days{color:#ef4444}
.rep-predict-item[data-urgency="medium"] .rep-predict-days{color:#facc15}

/* Feature 11: WhatsApp send button */
.rep-predict-wa-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;min-height:44px;
  background:linear-gradient(135deg, #25D366, #128C7E);
  color:#fff;border:none;border-radius:999px;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(37,211,102,.28);
  transition:transform 200ms var(--spring), box-shadow 200ms;
}
.rep-predict-wa-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(37,211,102,.40);
}
.rep-predict-wa-btn:active{transform:translateY(0) scale(.97)}
.rep-predict-wa-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,211,102,.35), 0 4px 12px rgba(37,211,102,.28)}
@media (max-width:640px){
  .rep-predict-item{padding:10px;gap:10px;min-height:56px}
  .rep-predict-name{font-size:12px}
  .rep-predict-detail{font-size:11px}
  .rep-predict-days{font-size:13px;min-width:38px}
}

/* ═══════════════════════════════════════════════════════════════
   📈 REPORTES TEQUILA — variantes gold + product cards con imagen
   Extiende .rep-* con estilos específicos para tequila
   ═══════════════════════════════════════════════════════════════ */
.trp-shell .rep-kpi-primary{
  background:linear-gradient(135deg,rgba(212,168,77,.14),rgba(212,168,77,.02));
  border-color:rgba(212,168,77,.24);
}
.trp-shell .rep-kpi-primary .rep-kpi-num{color:var(--tequilera)}
.trp-shell .rep-chart-wrap{background:rgba(212,168,77,.04)}
.trp-shell .rep-leader-fill{background:linear-gradient(90deg,var(--tequilera),#f5c777)}

/* Family filter (dynamic count) — needs to wrap on tablet */
.trp-fam-group{flex-wrap:wrap;padding:2px}
.trp-fam-group .rep-sku-btn{padding:10px 12px;font-size:11px}

/* Top products list — image thumbnails */
.trp-product-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.trp-product-item{
  display:flex;align-items:center;gap:12px;padding:10px;
  background:rgba(255,255,255,.03);border-radius:var(--r-sm);
  min-height:76px;cursor:pointer;
  transition:transform var(--dur) var(--ease-spring),background-color var(--dur) var(--ease-out-quart);
}
.trp-product-item:hover{transform:translateY(-1px);background:rgba(212,168,77,.06)}
.trp-product-img{
  flex-shrink:0;width:56px;height:56px;border-radius:8px;
  background:rgba(0,0,0,.4);overflow:hidden;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.06);
}
.trp-product-img img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity var(--dur) linear}
.trp-product-body{flex:1;min-width:0}
.trp-product-name{
  font-size:13px;font-weight:600;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.trp-product-fam{font-size:10px;font-weight:600;margin:2px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.trp-product-meta{font-size:11px;color:var(--cream-d);margin-top:3px;font-variant-numeric:tabular-nums}
.trp-product-meta b{color:var(--tequilera);font-weight:700}

/* Heatmap tweaks para tequila (más SKUs, columnas más angostas) */
.trp-heatmap th.trp-hm-sku{min-width:140px;max-width:180px}
.trp-heatmap td.trp-hm-cell{background:rgba(212,168,77,var(--op,0))}

/* Snapshot button destacado cuando busy */
.trp-shell .rep-btn-ghost[disabled]{opacity:.55;cursor:wait}

@media (max-width:1024px){
  .trp-heatmap th.trp-hm-sku{min-width:120px;max-width:140px}
}
@media (max-width:640px){
  /* Family chips: scroll horizontal en vez de wrap para ahorrar altura */
  .trp-fam-group{
    flex-wrap:nowrap;overflow-x:auto;gap:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding:2px;
  }
  .trp-fam-group::-webkit-scrollbar{display:none}
  .trp-fam-group .rep-sku-btn{
    padding:10px 12px;font-size:11px;flex:0 0 auto;min-width:auto;
    scroll-snap-align:start;white-space:nowrap;
  }
  /* Actions: 3-col grid compacto */
  .trp-shell .rep-filter-actions{flex-wrap:wrap;gap:6px}
  .trp-shell .rep-filter-actions .rep-btn-ghost{
    flex:1 1 calc(33.33% - 6px);
    min-width:calc(33.33% - 6px);
    min-height:44px;padding:10px 6px;font-size:11px;
  }
  .trp-product-item{min-height:80px;padding:8px;gap:10px}
  .trp-product-img{width:48px;height:48px}
  .trp-product-name{font-size:12px}
  .trp-heatmap th.trp-hm-sku{min-width:96px;max-width:110px;font-size:10px}
  /* Empty hero — más aire y CTA más grande */
  .trp-shell .rep-empty-hero{padding:36px 20px}
  .trp-shell .rep-empty-icon{font-size:38px}
  .trp-shell .rep-empty-title{font-size:15px}
  .trp-shell .rep-empty-desc{font-size:13px;line-height:1.6}
}

/* ═══════════════════════════════════════════════════════════════
   📊 INVENTARIO POR FAMILIA — Feature spirits KPIs (donut + cards)
════════════════════════════════════════════════════════════════ */
.trp-fam-analysis{
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
}
.trp-fam-donut-wrap{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:16px;background:rgba(255,255,255,.02);border-radius:14px;
  border:0.5px solid rgba(255,255,255,.06);
}
.trp-fam-legend{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--cream-d)}
.trp-fam-legend-item{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.trp-fam-legend-item b{color:var(--cream);margin-left:4px}
.trp-fam-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.trp-fam-cards{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:10px;
}
.trp-fam-card{
  padding:14px;background:rgba(255,255,255,.03);border-radius:14px;
  border:0.5px solid rgba(255,255,255,.06);
  transition:transform var(--dur) var(--ease-spring), border-color var(--dur);
}
.trp-fam-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.14)}
.trp-fam-card[data-health="excellent"]{border-color:rgba(34,197,94,.32);background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(255,255,255,.02))}
.trp-fam-card[data-health="healthy"]{border-color:rgba(103,232,249,.24)}
.trp-fam-card[data-health="medium"]{border-color:rgba(234,179,8,.24)}
.trp-fam-card[data-health="slow"]{border-color:rgba(239,68,68,.28);background:linear-gradient(135deg,rgba(239,68,68,.06),rgba(255,255,255,.02))}
.trp-fam-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.trp-fam-emoji{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;font-size:18px;flex-shrink:0;
}
.trp-fam-title{
  font:700 13px/1 -apple-system, "SF Pro Text", system-ui;
  letter-spacing:.02em;text-transform:uppercase;flex:1;
}
.trp-fam-pct{
  font:700 13px/1 -apple-system, "SF Pro Display", system-ui;
  color:var(--cream);font-variant-numeric:tabular-nums;
}
.trp-fam-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.trp-fam-metric-num{
  font:600 15px/1.15 -apple-system, "SF Pro Display", system-ui;
  color:var(--cream);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.trp-fam-metric-lbl{font-size:10px;color:var(--cream-f);text-transform:uppercase;letter-spacing:.05em;margin-top:3px;line-height:1.3}
.trp-fam-metric-turnover .trp-fam-metric-num{color:var(--tequilera)}
.trp-fam-card[data-health="excellent"] .trp-fam-metric-turnover .trp-fam-metric-num{color:#4ade80}
.trp-fam-card[data-health="slow"] .trp-fam-metric-turnover .trp-fam-metric-num{color:#f87171}
.trp-fam-health{
  font:600 11px/1.3 -apple-system, "SF Pro Text", system-ui;
  padding:5px 10px;border-radius:999px;text-align:center;
  background:rgba(255,255,255,.05);color:var(--cream-d);
}
.trp-fam-card[data-health="excellent"] .trp-fam-health{background:rgba(34,197,94,.14);color:#4ade80}
.trp-fam-card[data-health="healthy"] .trp-fam-health{background:rgba(103,232,249,.14);color:var(--ice-b)}
.trp-fam-card[data-health="medium"] .trp-fam-health{background:rgba(234,179,8,.14);color:#facc15}
.trp-fam-card[data-health="slow"] .trp-fam-health{background:rgba(239,68,68,.14);color:#f87171}

/* Rotation list (top 10 productos por turnover) */
.trp-rotation-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.trp-rotation-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;border-radius:8px;
  background:rgba(255,255,255,.02);border:0.5px solid rgba(255,255,255,.06);
  min-height:56px;
}
.trp-rot-emoji{font-size:18px;flex-shrink:0}
.trp-rot-body{min-width:0}
.trp-rot-name{
  font:600 12.5px/1.3 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:4px;
}
.trp-rot-bar-wrap{height:6px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden}
.trp-rot-bar{height:100%;border-radius:99px;transition:width .5s var(--ease-spring)}
.trp-rot-bar[data-health="excellent"]{background:linear-gradient(90deg,#22c55e,#4ade80)}
.trp-rot-bar[data-health="healthy"]{background:linear-gradient(90deg,var(--ice),var(--ice-b))}
.trp-rot-bar[data-health="medium"]{background:linear-gradient(90deg,#eab308,#facc15)}
.trp-rot-bar[data-health="slow"]{background:linear-gradient(90deg,#ef4444,#f87171)}
.trp-rot-metrics{text-align:right;min-width:78px}
.trp-rot-turn{
  font:700 14px/1 -apple-system, "SF Pro Display", system-ui;
  color:var(--cream);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.trp-rot-item[data-health="excellent"] .trp-rot-turn{color:#4ade80}
.trp-rot-item[data-health="slow"] .trp-rot-turn{color:#f87171}
.trp-rot-days{font-size:10px;color:var(--cream-f);margin-top:2px;font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .trp-fam-analysis{grid-template-columns:1fr}
  .trp-fam-donut-wrap{flex-direction:row;justify-content:center;gap:20px}
  .trp-fam-legend{flex:1;max-width:200px}
}
@media (max-width:640px){
  .trp-fam-donut-wrap{flex-direction:column}
  .trp-fam-cards{grid-template-columns:1fr}
  .trp-fam-metrics{grid-template-columns:repeat(3,1fr);gap:4px}
  .trp-fam-metric-num{font-size:13px}
  .trp-fam-metric-lbl{font-size:9px}
  .trp-rotation-item{padding:10px;gap:10px;min-height:60px}
  .trp-rot-name{font-size:12px}
  .trp-rot-turn{font-size:13px}
}

/* ═══════════════════════════════════════════════════════════════
   📊 INFORMACIÓN DE APP — Dashboard admin (solo Carlos creator)
════════════════════════════════════════════════════════════════ */
.modal.ai-modal{max-width:1100px;width:96vw;max-height:92vh}
.ai-body{max-height:calc(92vh - 60px);overflow-y:auto;padding:0}
.ai-kpi-row{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:8px;padding:16px 16px 12px;
}
.ai-kpi{
  padding:12px 14px;background:rgba(255,255,255,.04);border-radius:14px;
  border:0.5px solid rgba(255,255,255,.08);text-align:left;
}
.ai-kpi-num{
  font:700 22px/1 -apple-system, "SF Pro Display", system-ui;
  color:var(--cream);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.ai-kpi-lbl{font-size:11px;color:var(--cream-d);text-transform:uppercase;letter-spacing:.05em;margin-top:4px;font-weight:600}
.ai-filters{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:0 16px 12px;border-bottom:0.5px solid rgba(255,255,255,.08);
}
.ai-select{
  background:rgba(255,255,255,.06);border:0.5px solid rgba(255,255,255,.12);
  color:var(--cream);border-radius:8px;padding:10px 14px;min-height:44px;
  font:inherit;font-size:13px;cursor:pointer;letter-spacing:-.005em;
  transition:border-color .2s, background .2s;
}
.ai-select:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20)}
.ai-select:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(103,232,249,.32)}
.ai-btn-ghost{
  padding:10px 14px;background:rgba(255,255,255,.06);border:0.5px solid rgba(255,255,255,.12);
  color:var(--cream);border-radius:8px;cursor:pointer;font:inherit;font-size:13px;
  min-height:44px;transition:background .2s, border-color .2s;
}
.ai-btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20)}
.ai-tabs{
  display:flex;gap:2px;padding:12px 16px;background:rgba(255,255,255,.03);
}
.ai-tab{
  padding:10px 16px;min-height:44px;background:transparent;border:none;
  color:var(--cream-d);border-radius:8px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  transition:color .18s, background .18s;
}
.ai-tab:hover:not(.active){color:var(--cream);background:rgba(255,255,255,.04)}
.ai-tab.active{background:rgba(255,255,255,.10);color:var(--cream)}
.ai-content{padding:16px}

/* Table view */
.ai-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:0.5px solid rgba(255,255,255,.06)}
.ai-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;min-width:640px}
.ai-table thead th{
  padding:10px 12px;background:rgba(15,15,19,.94);position:sticky;top:0;z-index:1;
  text-align:left;font:600 10.5px/1.2 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d);text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ai-table tbody tr{transition:background .12s}
.ai-table tbody tr:hover{background:rgba(255,255,255,.03)}
.ai-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.ai-td-time{font-variant-numeric:tabular-nums;color:var(--cream-d);white-space:nowrap;font-size:11px}
.ai-td-user b{color:var(--cream)}
.ai-td-key{font-size:11px;color:var(--cream-f);margin-left:4px}
.ai-td-event{font-weight:700;white-space:nowrap}
.ai-td-loc{color:var(--cream-d);font-size:12px}
.ai-td-det{color:var(--cream-f);font-size:11px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-more{padding:10px;text-align:center;color:var(--cream-f);font-size:11px;background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.04)}

/* Heatmap 7×24 */
.ai-heatmap-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ai-heatmap{border-collapse:separate;border-spacing:2px;font-size:9px}
.ai-heatmap th{padding:4px 6px;text-align:center;color:var(--cream-f);font-weight:600;font-size:9px}
.ai-heatmap .ai-hm-day{
  text-align:right;padding:4px 8px;background:transparent;
  min-width:60px;font-size:11px;color:var(--cream);
}
.ai-heatmap .ai-hm-day span{display:block;font-weight:700;text-transform:capitalize}
.ai-heatmap .ai-hm-day small{display:block;font-size:9px;color:var(--cream-f);letter-spacing:.02em}
.ai-heatmap td.ai-hm-cell{
  min-width:22px;height:22px;text-align:center;border-radius:6px;
  background:rgba(103,232,249,var(--op,0));color:var(--void);
  font-weight:700;font-variant-numeric:tabular-nums;font-size:9px;
  transition:transform .12s;
}
.ai-heatmap td.ai-hm-cell:hover{transform:scale(1.15);z-index:3;position:relative}
.ai-hm-legend{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;font-size:11px;color:var(--cream-d);
}
.ai-hm-scale{display:inline-flex;gap:2px;margin:0 4px}
.ai-hm-scale i{width:16px;height:16px;border-radius:3px;background:rgba(103,232,249,var(--op,0));display:inline-block;border:0.5px solid rgba(255,255,255,.08)}

/* Users view */
.ai-users{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:10px}
.ai-user-card{
  display:flex;gap:12px;align-items:flex-start;padding:14px;
  background:rgba(255,255,255,.03);border:0.5px solid rgba(255,255,255,.06);border-radius:14px;
  transition:transform .2s var(--ease-spring), border-color .2s;
}
.ai-user-card:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.14)}
.ai-user-avatar{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg, var(--ice), var(--ice-b));color:var(--void);
  display:flex;align-items:center;justify-content:center;
  font:700 15px/1 -apple-system, "SF Pro Display", system-ui;letter-spacing:-.02em;
}
.ai-user-name{font:600 14px/1.2 -apple-system, "SF Pro Text", system-ui;color:var(--cream)}
.ai-user-meta{font-size:11px;color:var(--cream-d);margin-top:4px;font-variant-numeric:tabular-nums}
.ai-user-meta b{color:var(--cream)}
.ai-user-detail{font-size:11px;color:var(--cream-f);margin-top:4px}
.ai-user-detail b{color:var(--cream-d)}

/* Empty / error */
.ai-empty{padding:40px 20px;text-align:center;color:var(--cream-f);font-size:13px}
.ai-error{padding:20px;background:rgba(239,68,68,.08);border:0.5px solid rgba(239,68,68,.24);border-radius:14px;color:var(--cream)}
.ai-error b{color:#ef4444}
.ai-error code{background:rgba(0,0,0,.4);padding:1px 6px;border-radius:6px;font-size:11px}

@media (max-width:640px){
  .modal.ai-modal{max-width:100vw;max-height:100vh;border-radius:0;width:100vw}
  .ai-body{max-height:calc(100vh - 60px)}
  .ai-filters{flex-direction:column}
  .ai-select, .ai-btn-ghost{width:100%}
  .ai-users{grid-template-columns:1fr}
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
#app{display:flex;min-height:100vh}

/* SIDEBAR (frosted material) */
#sidebar{
  width:var(--sidebar);
  min-height:100vh;
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;left:0;bottom:0;
  z-index:100;
  transition:transform var(--trans);
}
.sb-logo{
  padding:22px 18px 16px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.sb-logo svg{width:30px;height:30px;flex-shrink:0}
.sb-logo-text{font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:var(--cream);letter-spacing:-.01em;line-height:1.1}
.sb-logo-text span{display:block;font-size:10px;font-weight:600;color:var(--cream-f);letter-spacing:1.4px;text-transform:uppercase;margin-top:2px}
.sb-nav{padding:12px 0;flex:1;overflow-y:auto}
.sb-section-label{
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--cream-f);padding:14px 18px 6px;
}
/* Sidebar links premium — chip layout + hover translate + active gradient (madera-style 2026) */
.sb-link{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;min-height:44px;
  margin:2px 8px;
  border-radius:8px;
  border:none;background:transparent;
  color:var(--cream-d);font-size:14px;font-weight:600;letter-spacing:-.005em;
  width:calc(100% - 16px);text-align:left;
  transition:background .18s cubic-bezier(.22,1,.36,1), color .18s ease, transform .15s ease;
  position:relative;
  opacity:0;
  transform:translateX(-12px);
  animation:sbSlide .35s forwards;
  cursor:pointer;
}
.sb-link::before{
  content:'';position:absolute;left:-8px;top:8px;bottom:8px;width:0;
  background:linear-gradient(180deg,#00d4ec,#0891b2);border-radius:0 3px 3px 0;
  transition:width .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  opacity:0;
}
.sb-link:hover{background:rgba(255,255,255,.04);color:var(--cream);transform:translateX(2px)}
.sb-link:hover::before{width:2px;opacity:.5}
.sb-link.active{color:var(--cream);background:linear-gradient(90deg,rgba(0,212,236,.10),rgba(0,212,236,.02) 80%)}
.sb-link.active::before{width:3px;opacity:1;box-shadow:0 0 12px rgba(0,212,236,.4)}
.sb-link:focus-visible{outline:2px solid rgba(0,212,236,.5);outline-offset:2px}
.sb-link .sb-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
.sb-link .sb-unit-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-left:auto;box-shadow:0 0 8px currentColor}
@keyframes sbSlide{to{opacity:1;transform:translateX(0)}}
.sb-link:nth-child(1){animation-delay:.05s}
.sb-link:nth-child(2){animation-delay:.10s}
.sb-link:nth-child(3){animation-delay:.15s}
.sb-link:nth-child(4){animation-delay:.20s}
.sb-link:nth-child(5){animation-delay:.25s}
.sb-link:nth-child(6){animation-delay:.30s}
.sb-footer{
  padding:14px 14px 16px;border-top:1px solid var(--line);
}
.sb-user-btn{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:none;color:var(--cream-d);
  font-size:13px;font-weight:600;width:100%;padding:9px 8px;
  border-radius:8px;
  transition:color .18s,background .18s;
  cursor:pointer;
}
.sb-user-btn:hover{color:var(--cream);background:rgba(255,255,255,.04)}
.sb-user-btn:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.sb-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--ice),var(--aur-v));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.sb-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80px}

/* MAIN */
#main{margin-left:var(--sidebar);flex:1;display:flex;flex-direction:column;min-height:100vh}

/* TOPBAR */
#topbar{
  height:var(--topbar);
  background:var(--glass-bg);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
  padding:0 20px;
  position:sticky;top:0;z-index:90;
}
.topbar-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;color:var(--cream);white-space:nowrap}
.search-wrap{flex:1;max-width:400px;position:relative}
.search-input{
  width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:12px 12px 12px 34px;min-height:44px;
  color:var(--cream);font-size:14px;outline:none;
  transition:border-color var(--trans);
}
.search-input::placeholder{color:var(--cream-f)}
.search-input:focus{border-color:var(--line-s)}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--cream-f);pointer-events:none;font-size:14px}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--panel);border:1px solid var(--line-s);
  border-radius:var(--radius);overflow:hidden;z-index:200;
  max-height:280px;overflow-y:auto;
  display:none;
}
.search-results.show{display:block}
.search-result-item{
  padding:10px 14px;display:flex;align-items:center;gap:10px;
  cursor:pointer;transition:background var(--trans);border-bottom:1px solid var(--line);
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--line)}
.search-result-unit{
  font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:2px 6px;border-radius:6px;flex-shrink:0;
}
.search-result-title{font-size:12px;font-weight:500;color:var(--cream)}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar-btn{
  background:transparent;border:none;color:var(--cream-d);
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:background var(--trans),color var(--trans);
  position:relative;
}
.topbar-btn:hover{background:var(--line);color:var(--cream)}
.notif-badge{
  position:absolute;top:4px;right:4px;
  background:var(--red);color:#fff;
  font-size:9px;font-weight:700;
  min-width:15px;height:15px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;
  animation:bounceBadge .4s ease;
}
@keyframes bounceBadge{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}

/* CONTENT */
#content{flex:1;padding:24px;overflow-y:auto}

/* ─── DASHBOARD ──────────────────────────────────────────────── */
.quick-stats{
  display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap;
}
.qs-card{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;
  flex:1;min-width:140px;
}
.qs-label{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--cream-f);margin-bottom:4px}
.qs-value{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;color:var(--cream)}
.qs-value.ice{color:var(--ice)}
.qs-value.green{color:var(--aur-g)}
.qs-value.red{color:var(--red)}
.qs-value.gold{color:var(--gold)}

.section-title{
  font-family:'Inter',sans-serif;font-size:16px;font-weight:600;
  color:var(--cream);margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.section-title .st-count{
  font-size:11px;font-weight:600;background:var(--line);
  color:var(--cream-d);padding:2px 8px;border-radius:99px;
}

.unit-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:28px}
.unit-stat-card{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:20px;
  cursor:pointer;transition:border-color var(--trans),transform var(--trans);
  position:relative;overflow:hidden;
}
.unit-stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
}
.unit-stat-card[data-unit="gacama"]::before{background:var(--gacama)}
.unit-stat-card[data-unit="canastas"]::before{background:var(--canastas)}
.unit-stat-card[data-unit="hielos"]::before{background:var(--hielos)}
.unit-stat-card[data-unit="tequilera"]::before{background:var(--tequilera)}
.unit-stat-card:hover{border-color:var(--line-s);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.03)}
.unit-stat-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.03),transparent 60%);pointer-events:none;opacity:0;transition:opacity .3s ease}
.unit-stat-card:hover::after{opacity:1}
.usc-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.usc-icon{font-size:32px;line-height:1}
.usc-name{font-family:'Inter',sans-serif;font-size:15px;font-weight:600}
.usc-desc{font-size:11px;color:var(--cream-d);margin-top:2px}
.usc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.usc-stat{text-align:center;background:var(--panel);border-radius:8px;padding:8px 4px}
.usc-stat-val{font-family:'Inter',sans-serif;font-size:18px;font-weight:700}
.usc-stat-lbl{font-size:9px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--cream-f);margin-top:2px}

.dashboard-cols{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
/* renderDashboardNew wrapper — padding responsive para reducir densidad mobile */
.dash-new-wrap{padding:28px 24px 24px}
@media (max-width:640px){
  .dash-new-wrap{padding:16px 14px 20px}
  .dash-new-wrap .dash-kpi{padding:12px 14px !important}
  .dash-new-wrap .dash-kpi [style*="font-size:32px"]{font-size:24px !important}
  .dash-new-wrap .dash-kpi [style*="font-size:15px"]{font-size:13px !important}
  /* Loop pule #5: compactar listas y secciones globales en mobile
     !important porque declaraciones base están DESPUÉS en el archivo
     (líneas 2286+ y 3133+) y ganarían por cascade order sin él */
  .section-title{font-size:14px !important;margin-bottom:10px !important}
  .accordion-header{padding:12px 14px !important;min-height:44px}
  .accordion-body{padding:0 12px 12px !important}
  .task-row{padding:10px 12px !important;gap:10px !important}
  .task-row-priority{height:26px !important}
  .upcoming-list{padding:12px !important}
  .unit-cards-grid{gap:12px !important;margin-bottom:20px !important}
  .unit-stat-card{padding:14px !important}
}
/* Dashboard: Actividad reciente collapsable (default cerrado mobile, abierto desktop) */
.dash-activity-collapse{background:transparent;border:none}
.dash-activity-collapse>summary{list-style:none;cursor:pointer;padding:6px 4px;display:flex;align-items:center;gap:10px;min-height:44px;user-select:none;border-radius:8px;transition:background .18s ease}
.dash-activity-collapse>summary::-webkit-details-marker{display:none}
.dash-activity-collapse>summary::marker{display:none;content:''}
.dash-activity-collapse>summary:hover{background:rgba(255,255,255,.03)}
.dash-activity-collapse>summary:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(103,232,249,.4)}
.dash-activity-chev{width:16px;height:16px;color:var(--cream-d);transition:transform .28s cubic-bezier(.22,1,.36,1);flex-shrink:0;margin-left:4px}
.dash-activity-collapse[open] .dash-activity-chev{transform:rotate(90deg);color:var(--cyan,#67e8f9)}
.dash-activity-count{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(103,232,249,.12);color:var(--cyan,#67e8f9);font-weight:600;letter-spacing:.02em;margin-left:auto}
.upcoming-list{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px}
.upcoming-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background var(--trans);
  border-radius:6px;padding:10px 8px;
  margin:0 -8px;
}
.upcoming-item:last-child{border-bottom:none}
.upcoming-item:hover{background:var(--line)}
.up-urgency{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.up-title{font-size:13px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-meta{font-size:11px;color:var(--cream-d);white-space:nowrap}
.up-unit-badge{
  font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;flex-shrink:0;
}

.activity-feed{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px}
.activity-item{
  display:flex;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12px;
}
.activity-item:last-child{border-bottom:none}
.act-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.act-text{color:var(--cream-d);flex:1;line-height:1.4}
.act-text strong{color:var(--cream);font-weight:600}
.act-time{font-size:10px;color:var(--cream-f);white-space:nowrap;margin-top:2px}

/* ─── UNIT VIEW ──────────────────────────────────────────────── */
/* ── UNIT PAGE — Apple-style redesign ─────────────────────── */
.unit-page{display:flex;flex-direction:column;height:100%}
.unit-topbar{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px 0;
  position:relative;
}
.unit-topbar::after{
  content:'';position:absolute;bottom:0;left:20px;right:20px;
  height:1px;background:rgba(255,255,255,.07);
}
.unit-topbar-icon{
  width:38px;height:38px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.unit-topbar-icon[data-unit="gacama"]{background:rgba(129,140,248,.15)}
.unit-topbar-icon[data-unit="canastas"]{background:rgba(245,158,11,.15)}
.unit-topbar-icon[data-unit="hielos"]{background:rgba(0,212,236,.15)}
.unit-topbar-icon[data-unit="tequilera"]{background:rgba(251,146,60,.15)}
.unit-topbar-info{flex:1;min-width:0}
.unit-topbar-name{font-family:'Inter',sans-serif;font-size:18px;font-weight:700;line-height:1.1}
.unit-topbar-desc{font-size:11px;color:var(--cream-f);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-stat-pills{display:flex;gap:6px;flex-wrap:wrap}
.usp{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700}
.usp.pending{background:rgba(245,158,11,.12);color:#f59e0b;border:1px solid rgba(245,158,11,.2)}
.usp.progress{background:rgba(0,212,236,.10);color:var(--ice);border:1px solid rgba(0,212,236,.18)}
.usp.done{background:rgba(52,211,153,.10);color:#34d399;border:1px solid rgba(52,211,153,.18)}
.usp.overdue{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.2)}

/* ── Segmented nav ────────────────────────────────────────── */
.unit-seg-wrap{padding:14px 20px 0;margin-bottom:0}
.unit-seg-nav{
  display:flex;background:rgba(255,255,255,.05);
  border-radius:14px;padding:3px;gap:2px;
}
.unit-seg-btn{
  flex:1;padding:12px 14px;border-radius:8px;border:none;
  background:transparent;color:rgba(228,242,247,.4);
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all .18s;white-space:nowrap;text-align:center;
  font-family:'Inter',sans-serif;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
}
.unit-seg-btn.active{
  background:rgba(255,255,255,.11);color:#e4f2f7;
  box-shadow:0 1px 6px rgba(0,0,0,.3),0 0 0 .5px rgba(255,255,255,.08);
}
.unit-seg-btn:hover:not(.active){color:rgba(228,242,247,.65);background:rgba(255,255,255,.04)}
.unit-tab-content{padding:16px 20px 32px;flex:1;overflow-y:auto;min-height:60vh;contain:layout style}

/* ── Task sub-filter (dentro de tab Tareas) ───────────────── */
.task-filter-seg{
  display:flex;gap:3px;background:rgba(255,255,255,.04);
  border-radius:8px;padding:3px;margin-bottom:14px;
}
.tfs-btn{
  flex:1;padding:10px 8px;border-radius:8px;border:none;
  background:transparent;color:rgba(228,242,247,.4);
  font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;
  font-family:'Inter',sans-serif;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
}
.tfs-btn.active{background:rgba(255,255,255,.09);color:#e4f2f7;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tfs-btn:hover:not(.active){color:rgba(228,242,247,.6)}

/* ── Quick add inline ─────────────────────────────────────── */
.quick-add-inline{
  display:flex;gap:8px;margin-bottom:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:10px 12px;transition:border-color .2s;
}
.quick-add-inline:focus-within{border-color:rgba(0,212,236,.3)}
.qa-input{
  flex:1;background:transparent;border:none;
  color:var(--cream);font-size:13px;outline:none;font-family:'Inter',sans-serif;
}
.qa-input::placeholder{color:rgba(228,242,247,.3)}
.qa-send{background:rgba(0,212,236,.15);border:none;border-radius:8px;
  padding:5px 12px;font-size:12px;font-weight:700;color:var(--ice);
  cursor:pointer;transition:all .2s;white-space:nowrap}
.qa-send:hover{background:rgba(0,212,236,.25)}

/* ── Legacy kept for dashboard ────────────────────────────── */
.unit-header{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px 24px;
  margin-bottom:20px;position:relative;overflow:hidden;
}
.unit-header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.unit-header[data-unit="gacama"]::before{background:var(--gacama)}
.unit-header[data-unit="canastas"]::before{background:var(--canastas)}
.unit-header[data-unit="hielos"]::before{background:var(--hielos)}
.unit-header[data-unit="tequilera"]::before{background:var(--tequilera)}
.uh-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.uh-icon{font-size:44px;line-height:1}
.uh-title{font-family:'Inter',sans-serif;font-size:22px;font-weight:700}
.uh-desc{font-size:13px;color:var(--cream-d);margin-top:3px}
.uh-stats{display:flex;gap:16px;flex-wrap:wrap}
.uh-stat{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.uh-stat-dot{width:8px;height:8px;border-radius:50%}
.uh-stat-val{font-size:18px;font-weight:700;font-family:'Inter',sans-serif}
.uh-stat-lbl{color:var(--cream-d)}

.quick-add-bar{
  display:flex;gap:8px;margin-bottom:16px;
}
.quick-add-input{
  flex:1;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 14px;
  color:var(--cream);font-size:13px;outline:none;
  transition:border-color var(--trans);
}
.quick-add-input::placeholder{color:var(--cream-f)}
.quick-add-input:focus{border-color:var(--line-s)}
/* .btn = legacy base — mantenida para back-compat con clases inline en HTML.
   Los canonical .btn-primary/.btn-secondary/.btn-ghost/.btn-danger (arriba) toman precedencia
   por especificidad y por definir fondo/borde/padding explícitos. */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;border:none;
  cursor:pointer;
  min-height:36px;
}
.btn:hover{opacity:.85}
.btn-ice{background:var(--ice);color:#020810}
/* .btn-xs = tamaño ultra-compacto legacy (chips) */
.btn-xs{padding:4px 9px;font-size:11px;min-height:28px}

.filter-tabs{
  display:flex;gap:4px;margin-bottom:16px;
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius);padding:4px;
}
.filter-tab{
  flex:1;padding:7px 6px;border-radius:8px;
  border:none;background:transparent;
  color:var(--cream-d);font-size:11px;font-weight:600;
  cursor:pointer;transition:all var(--trans);white-space:nowrap;text-align:center;
}
.filter-tab.active{background:var(--panel);color:var(--cream);box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* TASK CARDS */
.task-list{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}
.task-card{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;
  cursor:pointer;transition:border-color var(--trans),transform var(--trans);
  position:relative;
  opacity:0;transform:translateY(10px);
  animation:fadeUp .3s forwards;
}
.task-card:hover{border-color:var(--line-s);transform:translateY(-1px)}
.task-card.done-card{opacity:.55}
.task-card.done-card .tc-title{text-decoration:line-through;color:var(--cream-d)}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.tc-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.tc-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tc-status-dot.pending{background:var(--cream-f)}
.tc-status-dot.in_progress{background:var(--ice)}
.tc-status-dot.done{background:var(--aur-g)}
.pill{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.pill-high{background:rgba(239,68,68,.15);color:var(--red)}
.pill-medium{background:rgba(245,158,11,.15);color:var(--gold)}
.pill-low{background:rgba(52,211,153,.15);color:var(--aur-g)}
.countdown{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:99px;
  font-size:10px;font-weight:700;
}
.cd-overdue{background:rgba(239,68,68,.2);color:var(--red)}
.cd-today{background:rgba(239,68,68,.15);color:var(--red)}
.cd-1d{background:rgba(245,158,11,.15);color:var(--gold)}
.cd-3d{background:rgba(245,158,11,.10);color:var(--gold)}
.cd-7d{background:rgba(52,211,153,.12);color:var(--aur-g)}
.cd-14d{background:var(--line);color:var(--cream-f)}
.tc-progress{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11px;color:var(--cream-d)}
.progress-bar-mini{width:48px;height:4px;background:var(--line);border-radius:99px;overflow:hidden}
.progress-bar-mini-fill{height:100%;background:var(--ice);border-radius:99px;transition:width .4s}
.tc-title{font-size:14px;font-weight:600;color:var(--cream);margin-bottom:4px}
.tc-desc{font-size:12px;color:var(--cream-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:8px}
.tc-meta{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--cream-d);margin-bottom:10px;flex-wrap:wrap}
.tc-meta-item{display:flex;align-items:center;gap:4px}
.tc-actions{display:flex;gap:6px;align-items:center}
.tc-action-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:8px;
  font-size:11px;font-weight:600;
  border:1px solid var(--line);background:transparent;color:var(--cream-d);
  transition:all var(--trans);
}
.tc-action-btn:hover{border-color:var(--line-s);color:var(--cream);background:var(--line)}
.tc-action-btn.complete{border-color:rgba(52,211,153,.3);color:var(--aur-g);background:rgba(52,211,153,.08)}
.tc-action-btn.complete:hover{background:rgba(52,211,153,.15)}
.tc-action-btn.progress-btn{border-color:rgba(0,212,236,.3);color:var(--ice);background:rgba(0,212,236,.06)}
.tc-more-btn{
  width:28px;height:28px;border-radius:8px;
  border:1px solid var(--line);background:transparent;color:var(--cream-d);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;margin-left:auto;transition:all var(--trans);
}
.tc-more-btn:hover{border-color:var(--line-s);color:var(--cream);background:var(--line)}

/* ─── NOTES ──────────────────────────────────────────────────── */
.notes-section{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:20px;
}
.notes-divider{
  display:flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  color:var(--cream);margin-bottom:16px;
}
.notes-divider::before,.notes-divider::after{
  content:'';flex:1;height:1px;background:var(--line);
}
.note-compose{margin-bottom:18px}
.note-textarea{
  width:100%;min-height:80px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;
  color:var(--cream);font-size:13px;resize:vertical;outline:none;
  transition:border-color var(--trans);line-height:1.5;
}
.note-textarea::placeholder{color:var(--cream-f)}
.note-textarea:focus{border-color:var(--line-s)}
.note-compose-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.file-input-label{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);
  color:var(--cream-d);font-size:12px;font-weight:500;
  cursor:pointer;transition:all var(--trans);
}
.file-input-label:hover{border-color:var(--line-s);color:var(--cream)}
.note-img-preview{max-height:60px;border-radius:6px;margin-top:6px}
.note-item{
  border-top:1px solid var(--line);padding:14px 0;
}
.note-author-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.note-author-avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--ice),var(--aur-v));
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;flex-shrink:0;
}
.note-author-name{font-size:12px;font-weight:600;color:var(--cream)}
.note-date{font-size:11px;color:var(--cream-f)}
.note-content{font-size:13px;color:var(--cream-d);line-height:1.55;margin-bottom:6px}
.note-img-thumb{max-height:80px;border-radius:8px;cursor:pointer;transition:opacity var(--trans)}
.note-img-thumb:hover{opacity:.85}

/* ─── MODALS ─────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(2,8,16,.85);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:20px;
  opacity:0;animation:modalFadeIn .2s forwards;
}
@keyframes modalFadeIn{to{opacity:1}}
.modal{
  background:var(--panel);border:1px solid var(--line-s);
  border-radius:var(--radius-lg);width:100%;max-width:560px;
  max-height:90vh;overflow-y:auto;
  transform:scale(.95);animation:modalScale .2s forwards;
}
.modal-lg{max-width:640px}
@keyframes modalScale{to{transform:scale(1)}}
.modal-header{
  padding:18px 20px 14px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:12px;
}
.modal-title{font-family:'Inter',sans-serif;font-size:17px;font-weight:700;flex:1}
.modal-title-input{
  width:100%;background:transparent;border:none;outline:none;
  font-family:'Inter',sans-serif;font-size:17px;font-weight:700;
  color:var(--cream);
}
.modal-title-input::placeholder{color:var(--cream-f)}
.modal-close{
  background:transparent;border:none;color:var(--cream-d);
  font-size:18px;width:44px;height:44px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--trans);flex-shrink:0;cursor:pointer;
}
.modal-close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(103,232,249,.35)}
.modal-close:hover{background:var(--line);color:var(--cream)}
.modal-body{padding:18px 20px}
.modal-footer{
  padding:14px 20px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.form-group{margin-bottom:14px}
.form-label{
  display:block;font-size:11px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;
  color:var(--cream-d);margin-bottom:6px;
}
.form-input,.form-select,.form-textarea{
  width:100%;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px 14px;
  color:var(--cream);font-size:14px;outline:none;min-height:40px;
  transition:border-color var(--dur-fast) var(--ease-out-quart),
             box-shadow var(--dur-fast) var(--ease-out-quart),
             background-color var(--dur-fast) var(--ease-out-quart);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--ice);
  box-shadow:0 0 0 4px rgba(0,212,236,.22);
}
.form-input:focus-visible,.form-select:focus-visible,.form-textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,212,236,.28);
  border-color:var(--ice);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--cream-f)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(228,242,247,.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.form-select option{background:var(--panel)}
.form-textarea{min-height:80px;resize:vertical;line-height:1.5}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* CHECKLIST in modal */
.checklist-section{margin-top:4px}
.checklist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.checklist-title{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--cream-d)}
.checklist-progress{font-size:12px;color:var(--cream-d)}
.checklist-bar{height:4px;background:var(--line);border-radius:99px;margin-bottom:12px;overflow:hidden}
.checklist-bar-fill{height:100%;background:var(--aur-g);border-radius:99px;transition:width .4s}
.checklist-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;border-bottom:1px solid var(--line);
}
.checklist-item:last-child{border-bottom:none}
.checklist-cb{
  width:16px;height:16px;border-radius:6px;
  border:1.5px solid var(--line-s);background:transparent;
  appearance:none;cursor:pointer;flex-shrink:0;
  position:relative;transition:all var(--trans);
}
.checklist-cb:checked{background:var(--aur-g);border-color:var(--aur-g)}
.checklist-cb:checked::after{
  content:'✓';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);font-size:9px;color:#020810;font-weight:700;
}
.checklist-text{flex:1;font-size:13px;color:var(--cream);transition:all var(--trans)}
.checklist-text.done-text{text-decoration:line-through;color:var(--cream-f)}
.checklist-del{
  background:transparent;border:none;color:var(--cream-f);
  font-size:12px;padding:2px 4px;border-radius:6px;
  transition:all var(--trans);
}
.checklist-del:hover{background:rgba(239,68,68,.15);color:var(--red)}
.checklist-add-row{display:flex;gap:6px;margin-top:10px}
.checklist-add-input{
  flex:1;background:var(--surf);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;color:var(--cream);font-size:12px;outline:none;
  transition:border-color var(--trans);
}
.checklist-add-input::placeholder{color:var(--cream-f)}
.checklist-add-input:focus{border-color:var(--line-s)}

/* STATUS SELECT */
.status-select-wrap{position:relative;display:inline-block}
.status-select-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:8px;
  border:1px solid var(--line-s);background:rgba(0,212,236,.06);
  color:var(--ice);font-size:12px;font-weight:600;cursor:pointer;
  transition:all var(--trans);
}
.status-select-btn:hover{background:rgba(0,212,236,.12)}
.status-dropdown{
  position:absolute;bottom:calc(100% + 6px);left:0;
  background:var(--panel);border:1px solid var(--line-s);
  border-radius:var(--radius);overflow:hidden;z-index:10;min-width:140px;
  display:none;
}
.status-dropdown.open{display:block}
.status-option{
  padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;
  transition:background var(--trans);display:flex;align-items:center;gap:7px;
}
.status-option:hover{background:var(--line)}

/* NOTIFICATIONS PANEL */
.notif-panel{
  position:absolute;top:calc(100% + 8px);right:0;
  width:320px;
  background:var(--panel);border:1px solid var(--line-s);
  border-radius:var(--radius-lg);overflow:hidden;
  z-index:300;display:none;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.notif-panel.open{display:block}
.notif-panel-header{
  padding:12px 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.notif-panel-title{font-size:13px;font-weight:700;color:var(--cream)}
.notif-mark-all{
  font-size:11px;color:var(--ice);background:transparent;border:none;cursor:pointer;
  transition:opacity var(--trans);
}
.notif-mark-all:hover{opacity:.75}
.notif-list{max-height:300px;overflow-y:auto}
.notif-item{
  padding:10px 14px;border-bottom:1px solid var(--line);
  display:flex;gap:8px;
  transition:background var(--trans);
}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:rgba(0,212,236,.04)}
.notif-item:hover{background:var(--line)}
.notif-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.notif-content{flex:1}
.notif-text{font-size:12px;color:var(--cream-d);line-height:1.4}
.notif-text strong{color:var(--cream)}
.notif-time{font-size:10px;color:var(--cream-f);margin-top:2px}
.notif-dot{width:6px;height:6px;border-radius:50%;background:var(--ice);flex-shrink:0;margin-top:5px}
.notif-empty{padding:24px 14px;text-align:center;font-size:13px;color:var(--cream-f);line-height:1.5;background:transparent;border-radius:14px;transition:background .2s}
.notif-empty::before{content:'';display:block;font-size:24px;margin-bottom:6px;opacity:.5}

/* FAB */
#fab{
  position:fixed;bottom:28px;right:28px;
  width:52px;height:52px;border-radius:50%;
  background:var(--ice);color:#020810;
  font-size:24px;font-weight:300;
  border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,212,236,.35);
  transition:transform var(--trans),box-shadow var(--trans);
  z-index:80;
}
#fab:hover{transform:scale(1.08);box-shadow:0 12px 32px rgba(0,212,236,.5)}
#fab:active{transform:scale(.95)}

/* USERNAME MODAL */
.username-modal{
  position:fixed;inset:0;background:rgba(2,8,16,.92);
  display:flex;align-items:center;justify-content:center;
  z-index:2000;padding:20px;
}
.username-card{
  background:var(--panel);border:1px solid var(--line-s);
  border-radius:var(--radius-lg);padding:36px;
  max-width:380px;width:100%;text-align:center;
}
.username-logo{margin-bottom:20px;display:flex;justify-content:center}
.username-title{font-family:'Inter',sans-serif;font-size:22px;font-weight:700;margin-bottom:8px}
.username-sub{font-size:13px;color:var(--cream-d);margin-bottom:24px}

/* ─── WELCOME CORPORATE GATE (2026 Aurora Apple/Linear/Vercel) ─── */
#welcomeGate{
  position:fixed;inset:0;z-index:6000;
  background:radial-gradient(ellipse 100% 60% at 50% 0%, #0d1120 0%, #050810 45%, #000 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:#f8fafc;letter-spacing:.005em;
  animation:wgFadeIn .5s cubic-bezier(.22,1,.36,1);
}
#welcomeGate.wg-leaving{animation:wgFadeOut .45s cubic-bezier(.55,0,.55,1) forwards}
@keyframes wgFadeIn{from{opacity:0}to{opacity:1}}
@keyframes wgFadeOut{to{opacity:0;transform:scale(1.02);pointer-events:none}}
.wg-aurora{position:absolute;border-radius:50%;filter:blur(120px);opacity:.55;pointer-events:none;will-change:transform}
.wg-aurora-1{width:55vw;height:55vw;top:-18vw;right:-15vw;background:radial-gradient(circle,#fb923c 0%,transparent 65%);animation:wgAur1 18s ease-in-out infinite alternate}
.wg-aurora-2{width:48vw;height:48vw;bottom:-14vw;left:-12vw;background:radial-gradient(circle,#8b5cf6 0%,transparent 65%);animation:wgAur2 22s ease-in-out infinite alternate}
.wg-aurora-3{width:35vw;height:35vw;top:35%;left:45%;background:radial-gradient(circle,#0ea5e9 0%,transparent 60%);opacity:.35;animation:wgAur3 26s ease-in-out infinite alternate}
@keyframes wgAur1{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,6vw) scale(1.15)}}
@keyframes wgAur2{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,-4vw) scale(1.1)}}
@keyframes wgAur3{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-40%,-55%) scale(1.2)}}
.wg-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:36px;
  padding:48px 40px;
  max-width:520px;width:calc(100% - 32px);
  animation:wgRise .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes wgRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.wg-logo-wrap{
  width:120px;height:120px;border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(251,146,60,.15),0 0 40px rgba(251,146,60,.15);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
.wg-logo-wrap:hover{transform:scale(1.03) rotate(-1deg)}
.wg-logo{width:100%;height:100%;object-fit:contain;padding:8px}
.wg-title-block{text-align:center}
.wg-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.28em;color:#94a3b8;font-weight:700;margin-bottom:14px}
.wg-title{font-size:44px;font-weight:800;line-height:.95;margin:0;letter-spacing:-.03em;color:#f8fafc;font-family:'Inter',sans-serif}
.wg-title span{background:linear-gradient(135deg,#fb923c 0%,#f97316 50%,#c084fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.wg-tagline{font-size:13px;color:#94a3b8;margin-top:16px;font-weight:500;letter-spacing:.01em}
.wg-chips{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.unit-chip{
  display:inline-flex;align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;font-weight:600;
  color:#fff;letter-spacing:.01em;
  line-height:1.4;
}
.unit-chip--hielos{background:var(--hielos);color:#0b1220}
.unit-chip--tequilera{background:var(--tequilera);color:#1a1200}
.unit-chip--canastas{background:var(--canastas);color:#fff}
.unit-chip--gacama{background:var(--gacama);color:#fff}
.wg-form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
.wg-label{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#64748b;font-weight:700;padding-left:2px}
.wg-input-wrap{
  display:flex;align-items:center;gap:8px;padding:6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  backdrop-filter:blur(12px);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.wg-input-wrap:focus-within{
  border-color:rgba(251,146,60,.55);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(251,146,60,.12),0 8px 30px rgba(0,0,0,.4);
}
.wg-input-wrap.wg-shake{animation:wgShake .45s cubic-bezier(.36,.07,.19,.97);border-color:rgba(239,68,68,.6);box-shadow:0 0 0 4px rgba(239,68,68,.12)}
@keyframes wgShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-8px)}30%{transform:translateX(8px)}
  45%{transform:translateX(-6px)}60%{transform:translateX(6px)}
  75%{transform:translateX(-3px)}90%{transform:translateX(3px)}
}
.wg-input{
  flex:1;background:transparent;border:none;outline:none;
  color:#f8fafc;font-size:16px;font-weight:600;padding:12px 14px;
  font-family:inherit;letter-spacing:.05em;
}
.wg-input::placeholder{color:#475569;letter-spacing:.4em;font-size:20px}
.wg-btn{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,#fb923c 0%,#ea580c 100%);
  border:none;color:#0a0a0b;font-size:20px;font-weight:800;
  cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),filter .18s;
  box-shadow:0 4px 14px rgba(251,146,60,.35);
}
.wg-btn:hover{transform:translateX(2px);filter:brightness(1.08)}
.wg-btn:active{transform:scale(.94)}
.wg-error{
  font-size:12px;color:#fca5a5;padding:0 4px;height:16px;font-weight:600;
  opacity:0;transition:opacity .2s ease;
}
.wg-error.wg-visible{opacity:1}
.wg-footer{
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:#475569;letter-spacing:.05em;font-weight:500;
  margin-top:8px;
}
.wg-dot{opacity:.5}
@media (max-width:640px){
  .wg-content{gap:28px;padding:36px 24px}
  .wg-logo-wrap{width:96px;height:96px;border-radius:20px}
  .wg-title{font-size:36px}
  .wg-tagline{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .wg-aurora{animation:none}
  #welcomeGate,.wg-content{animation:none}
}

/* ─── LOGIN SCREEN ───────────────────────────────────────────── */
#loginScreen{
  position:fixed;inset:0;background:var(--void);
  display:flex;align-items:center;justify-content:center;
  z-index:5000;flex-direction:column;gap:0;
  overflow:hidden;
}
.login-aurora{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.login-aurora-1{width:50vw;height:50vw;top:-15vw;right:-10vw;background:radial-gradient(circle,rgba(0,212,236,.35),transparent 65%);animation:laur 20s ease-in-out infinite alternate}
.login-aurora-2{width:40vw;height:40vw;bottom:-12vw;left:-8vw;background:radial-gradient(circle,rgba(139,92,246,.28),transparent 65%);animation:laur 16s ease-in-out infinite alternate-reverse}
@keyframes laur{from{transform:translate(0,0) scale(1)}to{transform:translate(5vw,8vw) scale(1.1)}}
.login-card{
  position:relative;z-index:2;
  width:min(520px,92vw);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  padding:40px 36px;
  text-align:center;
}
.login-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.login-logo svg{width:32px;height:32px}
.login-logo-name{font-family:'Inter',sans-serif;font-size:22px;font-weight:700;letter-spacing:.06em}
.login-tagline{font-size:12px;color:var(--cream-f);letter-spacing:.14em;text-transform:uppercase;margin-bottom:32px}
.login-section-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-f);text-align:left;margin-bottom:10px;margin-top:20px}
.login-section-label:first-of-type{margin-top:0}
.login-users-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px}
.login-avatar-btn{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:16px 8px;cursor:pointer;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.login-avatar-btn:hover{
  background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);
  transform:translateY(-3px) scale(1.03);
}
.login-avatar-btn:active{transform:scale(.97)}
.login-avatar-circle{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:700;
  color:#fff;position:relative;
}
.login-avatar-circle::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:2px solid transparent;
  background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.05)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;mask-composite:exclude;
}
.login-avatar-name{font-size:12px;font-weight:600;color:var(--cream);line-height:1.2}
.login-avatar-role{font-size:9px;color:var(--cream-f);letter-spacing:.08em;text-transform:uppercase}
.login-footer{margin-top:24px;font-size:11px;color:var(--cream-f);opacity:.6}
.login-avatar-btn.is-admin{position:relative}
.login-avatar-btn.is-admin .login-avatar-circle::after{content:'🔒';position:absolute;bottom:-5px;right:-5px;font-size:9px;width:18px;height:18px;border-radius:50%;background:rgba(8,15,30,.95);display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(245,158,11,.5)}

/* ── Admin Password Modal ─────────────────────────────── */
#adminPassModal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#adminPassModal.open{display:flex}
.apm-card{background:var(--surf);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px 24px;width:min(340px,90vw);box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);animation:apmIn .22s cubic-bezier(.34,1.5,.64,1)}
@keyframes apmIn{from{transform:scale(.88) translateY(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes apmShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.apm-shake{animation:apmShake .38s ease}
.apm-avatar{width:58px;height:58px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;margin:0 auto 12px;position:relative}
.apm-lock-badge{position:absolute;bottom:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:rgba(245,158,11,.95);display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--surf)}
.apm-title{font-size:15px;font-weight:700;color:var(--cream);text-align:center;margin-bottom:2px}
.apm-sub{font-size:11px;color:var(--cream-f);text-align:center;margin-bottom:18px}
.apm-input-wrap{position:relative;margin-bottom:10px}
.apm-input{width:100%;padding:12px 44px 12px 14px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:14px;color:var(--cream);font-size:14px;font-family:'Inter',sans-serif;outline:none;box-sizing:border-box;transition:border-color .2s,background .2s}
.apm-input:focus{border-color:rgba(0,212,236,.45);background:rgba(0,212,236,.05)}
.apm-input:disabled{opacity:.4;cursor:not-allowed}
.apm-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--cream-f);cursor:pointer;font-size:15px;padding:4px;line-height:1}
.apm-btn{width:100%;padding:12px;background:rgba(0,212,236,.15);border:1px solid rgba(0,212,236,.3);border-radius:14px;color:var(--ice);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif;margin-bottom:8px}
.apm-btn:hover:not(:disabled){background:rgba(0,212,236,.28)}
.apm-btn:disabled{opacity:.4;cursor:not-allowed}
.apm-cancel{width:100%;padding:9px;background:none;border:none;color:var(--cream-f);font-size:12px;cursor:pointer;font-family:'Inter',sans-serif;transition:color .2s}
.apm-cancel:hover{color:var(--cream)}
.apm-error{font-size:12px;color:#ef4444;text-align:center;min-height:16px;margin-bottom:6px}
.apm-attempts{font-size:10px;color:rgba(239,68,68,.65);text-align:center;margin-bottom:8px}
.apm-locked-msg{font-size:12px;color:#f59e0b;text-align:center;margin-bottom:10px;padding:8px 12px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px}

/* ─── APPLE LIQUID GLASS improvements ───────────────────────── */
:root{ --spring:cubic-bezier(.34,1.56,.64,1); --ease:.18s cubic-bezier(.4,0,.2,1); }
.topbar-user-chip{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:100px;padding:4px 12px 4px 5px;cursor:pointer;
  transition:all var(--ease);
}
.topbar-user-chip:hover{background:rgba(255,255,255,.12)}
.topbar-user-avatar{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
}
.topbar-user-name{font-size:12px;font-weight:600;color:var(--cream);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:180px;
  background:rgba(13,22,40,.95);backdrop-filter:blur(20px);
  border:1px solid var(--line-s);border-radius:14px;
  padding:6px;z-index:200;
  opacity:0;transform:scale(.95) translateY(-6px);
  transform-origin:top right;
  transition:all .2s var(--spring);pointer-events:none;
}
.user-menu.open{opacity:1;transform:scale(1) translateY(0);pointer-events:all}
.user-menu-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:8px;cursor:pointer;font-size:13px;
  transition:background .15s;color:var(--cream-d);
}
.user-menu-item:hover{background:rgba(255,255,255,.07);color:var(--cream)}
.user-menu-item.danger:hover{background:rgba(239,68,68,.12);color:#ef4444}
.user-menu-divider{height:1px;background:var(--line);margin:4px 0}

/* ─── ACCORDION ──────────────────────────────────────────────── */
.accordion{background:rgba(255,255,255,.04);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden;margin-bottom:12px;transition:box-shadow .3s}
.accordion:hover{box-shadow:0 4px 24px rgba(0,0,0,.15)}
.accordion-header{
  display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;
  transition:background .2s;user-select:none;
}
.accordion-header:hover{background:rgba(255,255,255,.04)}
.accordion-icon{font-size:20px;flex-shrink:0}
.accordion-title{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;flex:1}
.accordion-badge{font-size:11px;color:var(--cream-d);background:rgba(255,255,255,.08);padding:2px 8px;border-radius:100px}
.accordion-badge.overdue{background:rgba(239,68,68,.18);color:#ef4444}
.accordion-chevron{font-size:12px;color:var(--cream-f);transition:transform .3s var(--spring);flex-shrink:0}
.accordion-content{
  max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s;
  opacity:0;
}
/* Combinador de hijo, no de descendiente. Con el descendiente, abrir una
   unidad en Inicio forzaba max-height a TODOS los .accordion-content de
   dentro — hay 14 anidados: notas, taller CNC, asistencia — y sus propios
   toggles quedaban muertos, porque al quitarles .open la regla de fuera
   los seguia manteniendo abiertos. El chevron, lo mismo: giraba el de los
   hijos al abrir el padre. */
.accordion.open > .accordion-content{max-height:9999px;opacity:1}
.accordion.open > .accordion-header .accordion-chevron{transform:rotate(180deg)}
.accordion-body{padding:0 16px 16px}
.accordion-add-btn{
  display:flex;align-items:center;gap:6px;
  margin-left:auto;background:rgba(0,212,236,.12);
  border:1px solid rgba(0,212,236,.25);border-radius:100px;
  padding:4px 12px;font-size:12px;font-weight:600;
  color:var(--ice);cursor:pointer;transition:all .2s;
  white-space:nowrap;
}
.accordion-add-btn:hover{background:rgba(0,212,236,.22);border-color:rgba(0,212,236,.4)}

/* ─── TASK COMPACT ROW ───────────────────────────────────────── */
.task-row{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-radius:14px;cursor:pointer;
  transition:background .2s;border-bottom:1px solid rgba(255,255,255,.05);
  position:relative;
}
.task-row:last-child{border-bottom:none}
.task-row:hover{background:rgba(255,255,255,.05)}
.task-row:active{background:rgba(255,255,255,.08);transform:scale(.99)}
.task-row-priority{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:1px}
.task-row-priority.high{background:#ef4444}
.task-row-priority.medium{background:#f59e0b}
.task-row-priority.low{background:#34d399}
.task-row-content{flex:1;min-width:0}
.task-row-title{font-size:14px;font-weight:500;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-row-title.done{text-decoration:line-through;opacity:.5}
.task-row-meta{font-size:11px;color:var(--cream-f);display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.task-row-progress{font-size:10px;color:var(--cream-f);display:flex;align-items:center;gap:3px}
.task-row-arrow{color:var(--cream-f);font-size:12px;flex-shrink:0}
.task-row.done-row{opacity:.6}
.ver-mas-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px;border-radius:8px;font-size:12px;
  color:var(--ice);cursor:pointer;transition:background .2s;
  background:rgba(0,212,236,.06);margin-top:8px;
  border:1px solid rgba(0,212,236,.15);
}
.ver-mas-btn:hover{background:rgba(0,212,236,.12)}

/* ─── TASK DETAIL SLIDE PANEL ────────────────────────────────── */
#taskPanel{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);
  background:rgba(8,15,30,.97);backdrop-filter:blur(24px);
  border-left:1px solid rgba(255,255,255,.09);
  z-index:500;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s var(--spring);
  overflow-y:auto;
}
#taskPanel.open{transform:translateX(0)}
#taskPanelBg{
  position:fixed;inset:0;background:rgba(2,8,16,.45);
  z-index:499;opacity:0;pointer-events:none;transition:opacity .3s;
}
#taskPanelBg.open{opacity:1;pointer-events:all}
.panel-header{padding:20px 20px 14px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:12px;position:sticky;top:0;background:rgba(8,15,30,.95);backdrop-filter:blur(10px);z-index:10}
.panel-back-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:none;color:var(--cream);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.panel-back-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(103,232,249,.35)}
.panel-back-btn:hover{background:rgba(255,255,255,.14)}
.panel-unit-label{font-size:12px;color:var(--cream-f);flex:1}
.panel-body{padding:20px;flex:1}
.panel-task-title{font-family:'Inter',sans-serif;font-size:20px;font-weight:700;line-height:1.2;margin-bottom:12px;word-break:break-word}
.panel-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.panel-section-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-f);margin-bottom:8px;margin-top:16px}
.panel-desc{font-size:14px;color:var(--cream-d);line-height:1.6;background:rgba(255,255,255,.04);border-radius:8px;padding:12px;min-height:48px}
.panel-field-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.panel-field-row:last-child{border-bottom:none}
.panel-field-label{font-size:12px;color:var(--cream-f);width:90px;flex-shrink:0}
.panel-field-value{font-size:13px;color:var(--cream);flex:1}
.panel-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:8px;flex-wrap:wrap;position:sticky;bottom:0;background:rgba(8,15,30,.95);backdrop-filter:blur(10px)}
.worker-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--aur-g);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.2);padding:3px 9px;border-radius:100px}

/* ─── REPARTOS / VENTAS ──────────────────────────────────── */
.ventas-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.ventas-period{font-size:12px;color:var(--cream-d);background:rgba(0,212,236,.08);border:1px solid rgba(0,212,236,.18);border-radius:100px;padding:4px 12px}
.ventas-export{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--aur-g);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);border-radius:100px;padding:6px 14px;cursor:pointer;transition:all .2s}
.ventas-export:hover{background:rgba(52,211,153,.15)}
.ventas-empty{padding:32px 16px;text-align:center;color:var(--cream-f);font-size:13px}
.ventas-empty-icon{font-size:32px;margin-bottom:8px}
.chart-wrap{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px;margin-bottom:12px}
.chart-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.chart-tab{font-size:11px;padding:5px 12px;border-radius:100px;border:1px solid var(--line);color:var(--cream-d);cursor:pointer;transition:all .2s}
.chart-tab.active{background:rgba(0,212,236,.15);border-color:rgba(0,212,236,.35);color:var(--ice)}
.no-data-msg{font-size:11px;color:var(--cream-f);text-align:center;padding:16px;opacity:.7}
/* sub-tabs dentro de ventas */
.ventas-sub-tabs{display:flex;background:rgba(255,255,255,.05);border-radius:14px;padding:3px;gap:2px;margin-bottom:16px}
.vst-btn{flex:1;padding:7px 6px;border-radius:8px;border:none;background:transparent;color:rgba(228,242,247,.4);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s;font-family:'Inter',sans-serif;white-space:nowrap}
.vst-btn.active{background:rgba(255,255,255,.11);color:#e4f2f7;box-shadow:0 1px 6px rgba(0,0,0,.3)}
/* ── Inventario Canastas ────────────────────────────── */
.inv-name{font-weight:600;font-size:12px;color:var(--cream);cursor:text;padding:3px 7px;border-radius:6px;transition:background .15s;display:inline-block}
.inv-name:hover{background:rgba(251,146,60,.12);color:#fb923c}
.inv-unit-tag{font-size:11px;color:var(--cream-d);padding:3px 8px;border-radius:6px;cursor:text;transition:background .15s;display:inline-block}
.inv-unit-tag:hover{background:rgba(255,255,255,.08);color:var(--cream)}
/* ── Módulo Canastas v7 ─────────────────────────────── */
.cn-wrap{padding:4px}
.cn-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(251,146,60,.05);border:1px solid rgba(251,146,60,.16);border-radius:14px;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.cn-toolbar-info{font-size:12px;color:var(--cream-d)}
.cn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cn-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;display:flex;flex-direction:column;transition:border-color .15s}
.cn-card:hover{border-color:rgba(251,146,60,.35)}
.cn-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px}
/* Stock inline spinner — reemplaza modal, cambios instant + auto-save 400ms debounce */
.cn-stock-inline{display:inline-flex;align-items:center;gap:2px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:3px;flex-shrink:0}
.cn-stk-btn{width:26px;height:26px;padding:0;background:transparent;border:none;color:var(--cream-d);font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;border-radius:6px;transition:background .12s,color .12s;font-variant-numeric:tabular-nums;line-height:1}
.cn-stk-btn:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.cn-stk-btn:active{transform:scale(.92)}
.cn-stk-btn.cn-stk-plus{color:#86efac}
.cn-stk-btn.cn-stk-plus:hover{background:rgba(34,197,94,.18);color:#22c55e}
.cn-stk-btn.cn-stk-minus{color:#fca5a5}
.cn-stk-btn.cn-stk-minus:hover{background:rgba(239,68,68,.18);color:#ef4444}
.cn-stk-val{width:44px;height:28px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--cream);font-size:15px;font-weight:800;font-family:inherit;font-variant-numeric:tabular-nums;padding:0;-moz-appearance:textfield;transition:border-color .15s}
.cn-stk-val::-webkit-outer-spin-button,.cn-stk-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cn-stk-val:focus{outline:none;border-color:#fb923c;background:rgba(255,255,255,.08);box-shadow:0 0 0 2px rgba(251,146,60,.15)}
.cn-card-title{font-weight:700;color:var(--cream);font-size:13px}
.cn-card-meta{font-size:10px;color:var(--cream-f);white-space:nowrap}
.cn-card-body{min-height:80px;flex:1;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.cn-empty{padding:14px;font-size:11px;color:var(--cream-f);text-align:center;border:1px dashed rgba(255,255,255,.08);border-radius:8px}
.cn-chip{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:rgba(251,146,60,.06);border:1px solid rgba(251,146,60,.16);border-radius:8px;gap:6px}
.cn-chip-body{flex:1;min-width:0}
.cn-chip-name{font-size:12px;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-chip-meta{font-size:10px;color:var(--cream-d)}
.cn-chip-del{background:none;border:none;color:rgba(239,68,68,.7);font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
.cn-chip-del:hover{color:#ef4444}
.cn-card-actions{display:flex;gap:6px}
.cn-btn{padding:6px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--cream);font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.cn-btn:hover{background:rgba(255,255,255,.09)}
.cn-btn:disabled{opacity:.4;cursor:not-allowed}
.cn-btn-add{background:rgba(251,146,60,.14);border-color:rgba(251,146,60,.3);color:#fb923c;flex:1}
.cn-btn-add:hover{background:rgba(251,146,60,.22)}
.cn-btn-clear{color:#ef4444;border-color:rgba(239,68,68,.3)}
.cn-btn-primary{background:#fb923c;border-color:#fb923c;color:#0a0a0b}
.cn-btn-primary:hover{background:#f97316}
.cn-btn-cat{background:rgba(255,255,255,.06)}
.cn-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;color:var(--cream);font-size:12px;font-family:'Inter',sans-serif;outline:none;transition:border-color .15s}
.cn-input:focus{border-color:rgba(251,146,60,.4)}
.cn-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-f);margin:8px 0 4px}
.cn-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.cn-modal{background:#161618;border:1px solid rgba(255,255,255,.1);border-radius:14px;max-width:400px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cn-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.cn-modal-title{font-size:14px;font-weight:700;color:var(--cream)}
.cn-modal-close{background:none;border:none;color:var(--cream-d);font-size:24px;cursor:pointer;line-height:1;padding:0 6px}
.cn-modal-body{padding:14px 16px}
.cn-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.06)}
.cn-table{width:100%;border-collapse:collapse;font-size:12px}
.cn-table th,.cn-table td{padding:8px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}
.cn-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cream-f);background:rgba(255,255,255,.03);position:sticky;top:0}
.cn-canasta-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:6px;font-size:10px;color:var(--cream-d);cursor:pointer;font-weight:600}
.cn-canasta-chip.active{background:rgba(251,146,60,.2);border-color:#fb923c;color:#fb923c}
.cn-canasta-chip input{margin:0;width:10px;height:10px;accent-color:#fb923c}
/* Route Builder Canastas — grid layout */
.rb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.rb-panel{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.rb-add{display:flex;gap:6px}
.rb-paradas{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto}
.rb-parada{display:flex;align-items:flex-start;gap:8px;padding:8px;background:rgba(251,146,60,.05);border:1px solid rgba(251,146,60,.16);border-radius:8px}
.rb-parada-num{background:#fb923c;color:#0a0a0b;font-weight:800;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.rb-parada-body{flex:1;min-width:0}
.rb-parada-name{font-size:12px;font-weight:700;color:var(--cream)}
.rb-parada-del{background:none;border:none;color:rgba(239,68,68,.7);font-size:18px;cursor:pointer;padding:0 4px;line-height:1}
.rb-parada-del:hover{color:#ef4444}
.rb-assign{display:flex;flex-direction:column;gap:2px}
.rb-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
/* Notificación chofer */
.driver-banner{position:sticky;top:0;z-index:100;background:linear-gradient(135deg,#fb923c,#c2410c);color:#fff;padding:12px 16px;border-radius:0 0 12px 12px;box-shadow:0 6px 18px rgba(251,146,60,.35);display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;animation:slideDown .4s ease-out}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.driver-banner-body{flex:1;min-width:0}
.driver-banner-title{font-size:13px;font-weight:700;letter-spacing:.02em}
.driver-banner-sub{font-size:11px;opacity:.9;margin-top:2px}
.driver-banner-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:7px 14px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s}
.driver-banner-btn:hover{background:rgba(255,255,255,.32)}
.driver-banner-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0 4px;opacity:.7}
.driver-banner-close:hover{opacity:1}
/* Mi Ruta view */
.mri-wrap{padding:14px}
.mri-viaje{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;margin-bottom:12px}
.mri-viaje-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:8px}
.mri-viaje-fecha{font-size:11px;color:var(--cream-d);text-transform:capitalize}
.mri-viaje-est{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:100px}
.mri-est-pendiente{background:rgba(251,191,36,.14);color:#fbbf24}
.mri-est-en_camino{background:rgba(59,130,246,.14);color:#3b82f6}
.mri-est-entregado{background:rgba(34,197,94,.14);color:#22c55e}
.mri-viaje-meta{font-size:12px;color:var(--cream);margin-bottom:8px}
.mri-viaje-paradas{list-style:none;padding-left:0;margin:8px 0 12px}
.mri-viaje-paradas li{padding:8px 10px;background:rgba(251,146,60,.05);border-left:3px solid #fb923c;border-radius:6px;margin-bottom:4px;font-size:12px;color:var(--cream);display:flex;justify-content:space-between;gap:8px}
.mri-viaje-paradas .mri-canastas{font-size:10px;color:var(--cream-d);white-space:nowrap}
.mri-viaje-actions{display:flex;gap:6px;flex-wrap:wrap}
.mri-btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--cream);font-size:11px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif}
.mri-btn:hover{background:rgba(255,255,255,.1)}
.mri-btn-primary{background:#fb923c;color:#0a0a0b;border-color:#fb923c}
.mri-btn-primary:hover{background:#f97316}
/* CRUD trabajadores */
.tw-list{display:flex;flex-direction:column;gap:6px;max-height:400px;overflow:auto}
.tw-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px}
.tw-avatar{width:32px;height:32px;border-radius:100px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.tw-body{flex:1;min-width:0}
.tw-name{font-size:12px;font-weight:700;color:var(--cream)}
.tw-meta{font-size:10px;color:var(--cream-d)}
.tw-actions{display:flex;gap:4px}
@media (max-width:900px){
  .rb-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cn-grid{grid-template-columns:1fr}
  .rv-metrics{grid-template-columns:1fr 1fr!important}
}
/* ── Stock Hielos fin de día ────────────────────────── */
.stock-day-card{background:rgba(0,212,236,.04);border:1px solid rgba(0,212,236,.14);border-radius:14px;padding:14px;margin-bottom:12px}
.stock-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.stock-field{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;transition:border-color .2s}
.stock-field:focus-within{border-color:rgba(0,212,236,.35)}
.stock-field-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-f);margin-bottom:5px}
.stock-field-input{width:100%;background:transparent;border:none;color:var(--cream);font-size:15px;font-weight:700;outline:none;font-family:'Inter',sans-serif}
.stock-field-input::placeholder{color:rgba(228,242,247,.2);font-weight:400}
.stock-obs-area{width:100%;background:transparent;border:none;color:var(--cream);font-size:12px;outline:none;font-family:'Inter',sans-serif;resize:none}
.stock-obs-area::placeholder{color:rgba(228,242,247,.2)}
.stock-save-btn{width:100%;padding:11px;background:rgba(0,212,236,.15);border:1px solid rgba(0,212,236,.3);border-radius:8px;color:var(--ice);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.stock-save-btn:hover{background:rgba(0,212,236,.28)}
.stock-hist-val{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--cream-d)}
.stock-hist-val span{font-weight:700;color:var(--cream)}
/* ── Sucursales Card UI ─────────────────────────────── */
.suc-search-wrap{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 12px;margin-bottom:10px;transition:border-color .2s}
.suc-search-wrap:focus-within{border-color:rgba(0,212,236,.3)}
.suc-search-inp{flex:1;background:transparent;border:none;color:var(--cream);font-size:13px;outline:none;font-family:'Inter',sans-serif}
.suc-search-inp::placeholder{color:rgba(228,242,247,.3)}
.suc-filter-strip{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.sfc-btn{padding:5px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--cream-d);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.sfc-btn.active{background:rgba(0,212,236,.15);border-color:rgba(0,212,236,.3);color:var(--ice)}
.suc-grp-hdr{display:flex;align-items:center;gap:8px;margin:12px 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-f)}
.suc-grp-line{flex:1;height:1px;background:rgba(255,255,255,.07)}
.suc-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:6px}
@media(min-width:480px){.suc-card-grid{grid-template-columns:repeat(3,1fr)}}
.suc-cv{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:10px;transition:all .2s;position:relative;overflow:hidden}
.suc-cv::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background .2s}
.suc-cv.has-data{border-color:rgba(52,211,153,.22);background:rgba(52,211,153,.03)}
.suc-cv.has-data::before{background:linear-gradient(90deg,rgba(52,211,153,.7),rgba(52,211,153,.3))}
.suc-cv-top{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.suc-cv-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.suc-cv-name{font-size:12px;font-weight:700;color:var(--cream);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.suc-ctr-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.suc-ctr-lbl{font-size:10px;color:var(--cream-f);font-weight:600;min-width:22px}
.suc-ctr{display:flex;align-items:center;gap:3px}
.suc-ctr-btn{width:22px;height:22px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--cream-d);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-weight:700;font-family:'Inter',sans-serif;flex-shrink:0;line-height:1;padding:0}
.suc-ctr-btn:hover{background:rgba(0,212,236,.18);border-color:rgba(0,212,236,.35);color:var(--ice)}
.suc-ctr-btn:active{transform:scale(.88)}
.suc-ctr-val{min-width:28px;text-align:center;font-size:13px;font-weight:700;color:var(--cream-d);cursor:pointer;padding:2px 3px;border-radius:6px;transition:all .15s;line-height:1.4}
.suc-ctr-val:hover{background:rgba(0,212,236,.1);color:var(--ice)}
.suc-ctr-val.nz{color:#34d399}
.day-total-bar{background:rgba(0,212,236,.06);border:1px solid rgba(0,212,236,.14);border-radius:14px;padding:10px 14px;display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.dtb-item{display:flex;flex-direction:column;align-items:center;min-width:54px}
.dtb-val{font-size:16px;font-weight:800;color:var(--ice)}
.dtb-lbl{font-size:9px;color:var(--cream-f);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
/* management chips */
.suc-mgmt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media(min-width:480px){.suc-mgmt-grid{grid-template-columns:repeat(3,1fr)}}
.suc-chip{display:flex;align-items:center;gap:6px;padding:8px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:8px;transition:background .15s}
.suc-chip:hover{background:rgba(255,255,255,.07)}
.suc-chip-name{flex:1;font-size:12px;font-weight:600;color:var(--cream);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suc-chip-type{font-size:9px;padding:2px 6px;border-radius:100px;font-weight:700;flex-shrink:0}
.suc-chip-type.playa{background:rgba(103,232,249,.12);color:#67e8f9;border:1px solid rgba(103,232,249,.2)}
.suc-chip-type.externa{background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.2)}
/* ── Viaje Card (trip-based entry) ─────────────────── */
.viaje-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;margin-bottom:12px;transition:box-shadow .2s}
.viaje-card:focus-within{box-shadow:0 0 0 1.5px rgba(0,212,236,.25)}
.viaje-header{display:flex;align-items:center;gap:10px;padding:13px 16px;background:rgba(255,255,255,.025);border-bottom:1px solid rgba(255,255,255,.06)}
.viaje-num{font-size:14px;font-weight:800;color:var(--cream);letter-spacing:-.01em}
.viaje-meta{font-size:10px;color:var(--cream-f);margin-top:1px}
.viaje-del-btn{margin-left:auto;background:none;border:none;color:rgba(239,68,68,.4);cursor:pointer;font-size:11px;font-weight:600;padding:5px 8px;border-radius:8px;transition:all .15s;font-family:'Inter',sans-serif}
.viaje-del-btn:hover{background:rgba(239,68,68,.08);color:#ef4444}
.viaje-body{padding:14px 16px}
.viaje-grp-lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cream-f);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.vsuc-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:11px;margin-bottom:6px;flex-wrap:wrap}
.vsuc-info{display:flex;align-items:center;gap:7px;min-width:90px;flex:1}
.vsuc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.vsuc-name{font-size:12px;font-weight:700;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsuc-ctrs{display:flex;gap:8px;align-items:center;flex-shrink:0}
.vsuc-ctr-grp{display:flex;align-items:center;gap:3px}
.vsuc-lbl{font-size:9px;color:var(--cream-f);font-weight:700;letter-spacing:.04em;min-width:18px;text-align:right}
.vsuc-del{background:none;border:none;color:rgba(239,68,68,.3);cursor:pointer;font-size:14px;padding:3px 5px;transition:all .15s;border-radius:6px;line-height:1;flex-shrink:0}
.vsuc-del:hover{color:#ef4444;background:rgba(239,68,68,.08)}
.viaje-add-btn{display:flex;align-items:center;gap:7px;width:100%;padding:9px 12px;border-radius:11px;border:1.5px dashed rgba(255,255,255,.13);background:transparent;color:rgba(228,242,247,.45);font-size:12px;font-weight:600;cursor:pointer;transition:all .18s;font-family:'Inter',sans-serif;margin-top:6px}
.viaje-add-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.25);color:var(--cream)}
/* picker panel */
.suc-picker-panel{background:rgba(10,18,36,.98);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:12px;margin-top:8px;box-shadow:0 10px 36px rgba(0,0,0,.45);animation:apmIn .18s ease}
.suc-picker-row{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:7px 10px;margin-bottom:10px}
.suc-picker-inp{flex:1;background:transparent;border:none;color:var(--cream);font-size:12px;outline:none;font-family:'Inter',sans-serif}
.suc-picker-inp::placeholder{color:rgba(228,242,247,.3)}
.suc-picker-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow-y:auto}
.spc{display:flex;align-items:center;gap:5px;padding:6px 11px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--cream-d);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.spc:hover{background:rgba(0,212,236,.14);border-color:rgba(0,212,236,.32);color:var(--ice)}
.spc:active{transform:scale(.95)}
/* add viaje */
.add-viaje-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:14px;border:1.5px dashed rgba(0,212,236,.22);background:rgba(0,212,236,.03);color:rgba(0,212,236,.6);font-size:13px;font-weight:700;cursor:pointer;transition:all .22s;font-family:'Inter',sans-serif;margin-top:4px}
.add-viaje-btn:hover{background:rgba(0,212,236,.1);border-color:rgba(0,212,236,.45);color:var(--ice)}
/* Inline-editable reparto table */
.rep-table{width:100%;border-collapse:collapse;font-size:12px}
.rep-table th{padding:8px 10px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cream-f);border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.rep-table th:first-child{text-align:left}
.rep-table td{padding:0;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}
.rep-table tr:last-child td{border-bottom:none}
.rep-table tr:hover td{background:rgba(255,255,255,.02)}
.rep-cell{padding:8px 10px;text-align:center;cursor:pointer;min-width:52px;color:var(--cream-d);transition:all .15s;border-radius:6px;margin:2px}
.rep-cell:hover{background:rgba(0,212,236,.1);color:var(--ice)}
.rep-cell.has-val{color:var(--cream);font-weight:600}
.rep-cell-input{width:60px;padding:5px 6px;background:rgba(0,212,236,.12);border:1.5px solid rgba(0,212,236,.4);border-radius:8px;color:var(--ice);font-size:12px;font-weight:700;text-align:center;outline:none;font-family:'Inter',sans-serif}
.rep-suc-name{padding:8px 10px;font-weight:600;color:var(--cream);font-size:12px;min-width:120px}
.rep-total{padding:8px 10px;text-align:center;font-weight:700;color:#34d399;font-size:12px}
.rep-grand{background:rgba(52,211,153,.05);border-top:2px solid rgba(52,211,153,.2)!important}
/* ── Rep table group headers ─────────────────────────────── */
.rep-group-th{padding:6px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.06)}
.rep-group-th.playa{color:#67e8f9;background:rgba(103,232,249,.05)}
.rep-group-th.externa{color:#a78bfa;background:rgba(167,139,250,.05)}
.rep-add-row td{padding:0!important}
.rep-add-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;font-size:12px;color:var(--cream-f);cursor:pointer;transition:all .15s;width:100%;background:transparent;border:none;font-family:'Inter',sans-serif;text-align:left}
.rep-add-btn:hover{color:var(--cream);background:rgba(255,255,255,.03)}
.rep-add-btn .rep-add-icon{width:20px;height:20px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--cream-f);transition:all .15s;flex-shrink:0}
.rep-add-btn:hover .rep-add-icon{border-color:var(--ice);color:var(--ice)}
.rep-inline-input{background:rgba(0,212,236,.08);border:1.5px solid rgba(0,212,236,.3);border-radius:8px;padding:6px 10px;color:var(--cream);font-size:12px;outline:none;font-family:'Inter',sans-serif;width:100%;min-width:120px}
.rep-inline-input:focus{border-color:rgba(0,212,236,.6);background:rgba(0,212,236,.12)}

/* Sucursales management */
.suc-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:.05em}
.suc-badge.playa{background:rgba(103,232,249,.12);color:#67e8f9;border:1px solid rgba(103,232,249,.25)}
.suc-badge.externa{background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.25)}
.suc-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;margin-bottom:6px}
.suc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.suc-edit-input{background:rgba(255,255,255,.06);border:1px solid var(--line-s);border-radius:8px;padding:4px 10px;color:var(--cream);font-size:13px;outline:none;flex:1}
/* Reporte cards */
.rep-stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.rep-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;text-align:center}
.rep-stat-val{font-family:'Inter',sans-serif;font-size:22px;font-weight:700;line-height:1}
.rep-stat-lbl{font-size:10px;color:var(--cream-f);margin-top:4px;letter-spacing:.04em}
.ranking-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.03);border-radius:8px;margin-bottom:5px}
.ranking-bar-bg{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
.ranking-bar{height:6px;border-radius:100px;transition:width .5s ease}
.day-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.day-nav-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 12px;color:var(--cream-d);cursor:pointer;font-size:12px;transition:all .2s}
.day-nav-btn:hover{background:rgba(255,255,255,.12);color:var(--cream)}
.day-nav-btn:disabled{opacity:.3;cursor:not-allowed}

/* ─── CNC SECTION ────────────────────────────────────────────── */
.cnc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.cnc-add-btn{display:flex;align-items:center;gap:6px;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);border-radius:100px;padding:6px 14px;font-size:12px;font-weight:600;color:#a78bfa;cursor:pointer;transition:all .2s}
.cnc-add-btn:hover{background:rgba(139,92,246,.25);transform:translateY(-1px)}
.cnc-add-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.cnc-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;margin-bottom:10px;transition:all .2s}
.cnc-card:hover{border-color:rgba(139,92,246,.25);background:rgba(139,92,246,.04)}
.cnc-card-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.cnc-card-icon{font-size:20px;flex-shrink:0}
.cnc-card-title{font-size:14px;font-weight:600;color:var(--cream);flex:1;line-height:1.2}
.cnc-status-badge{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px;flex-shrink:0}
.cnc-status-badge.pendiente{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.25)}
.cnc-status-badge.en_proceso{background:rgba(0,212,236,.12);color:var(--ice);border:1px solid rgba(0,212,236,.22)}
.cnc-status-badge.terminado{background:rgba(52,211,153,.12);color:var(--aur-g);border:1px solid rgba(52,211,153,.22)}
.cnc-card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--cream-f);margin-bottom:8px}
.cnc-card-img{width:100%;max-height:140px;object-fit:cover;border-radius:8px;margin-top:8px;cursor:pointer}
.cnc-card-img:hover{opacity:.9}
.cnc-card-desc{font-size:12px;color:var(--cream-d);line-height:1.5;margin-top:4px}
.cnc-empty{padding:24px;text-align:center;color:var(--cream-f);font-size:13px}
.priority-btn-row{display:flex;gap:6px;flex-wrap:wrap}
.priority-btn-row button{flex:1;min-width:80px;padding:7px;border-radius:8px;font-size:12px;font-weight:600;border:1.5px solid transparent;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.05);color:var(--cream-d)}
.priority-btn-row button.sel-pending{border-color:#f59e0b;background:rgba(245,158,11,.12);color:#f59e0b}
.priority-btn-row button.sel-progress{border-color:var(--ice);background:rgba(0,212,236,.10);color:var(--ice)}
.priority-btn-row button.sel-done{border-color:var(--aur-g);background:rgba(52,211,153,.10);color:var(--aur-g)}

/* ─── MULTI-ASSIGNEE ─────────────────────────────────────── */
.assignees-wrap{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:36px;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:5px 10px;cursor:text;transition:border-color .2s}
.assignees-wrap:focus-within{border-color:var(--line-s)}
.assignee-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(0,212,236,.12);border:1px solid rgba(0,212,236,.25);border-radius:100px;padding:2px 8px 2px 10px;font-size:11px;font-weight:600;color:var(--ice);white-space:nowrap}
.assignee-chip button{background:none;border:none;color:rgba(0,212,236,.6);cursor:pointer;font-size:12px;padding:0;line-height:1;transition:color .15s}
.assignee-chip button:hover{color:#ef4444}
.assignee-input{border:none;background:transparent;color:var(--cream);font-size:13px;outline:none;min-width:100px;flex:1;font-family:'Inter',sans-serif}
.assignee-input::placeholder{color:rgba(228,242,247,.3)}
.assignee-suggestions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.assignee-sug-btn{font-size:11px;padding:3px 10px;border-radius:100px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--cream-d);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.assignee-sug-btn:hover{background:rgba(0,212,236,.1);border-color:rgba(0,212,236,.3);color:var(--ice)}
.assignee-display{display:flex;flex-wrap:wrap;gap:4px}
.assignee-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(0,212,236,.1);border:1px solid rgba(0,212,236,.2);border-radius:100px;padding:1px 8px;font-size:11px;font-weight:600;color:var(--ice)}

/* ─── ASISTENCIA ─────────────────────────────────────────── */
.asist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.asist-date-pill{font-size:12px;color:var(--cream-d);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.18);border-radius:100px;padding:4px 12px}
.asist-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:16px;table-layout:fixed;word-break:break-word}
.asist-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px 12px}
@media (max-width:640px){
  .asist-table{font-size:11px}
  .asist-table th,.asist-table td{padding:4px 3px !important;min-width:32px}
}
/* Media query para Reporte de Viajes en móvil: metrics 2×2, filters full-width */
@media (max-width:640px){
  .rv-metrics{grid-template-columns:repeat(2,1fr)}
  .rv-filters{flex-direction:column;gap:6px}
  .rv-filter-sel{min-width:0;width:100%}
  .rv-row-main{grid-template-columns:44px 1fr auto;gap:8px;padding:8px 10px}
  .rv-row-title{font-size:13px}
  .rv-row-meta{font-size:11px}
}
/* Route builder móvil: bottom sheet mejor spaced */
@media (max-width:640px){
  .rb-assign-row{grid-template-columns:60px 1fr;gap:8px}
  .rb-actions{flex-wrap:wrap;gap:6px}
  .rb-actions .rb-btn{flex:1 1 calc(50% - 3px);padding:10px 8px;font-size:12px}
  .rb-actions .rb-btn.ghost{flex:0 0 auto;padding:10px 12px}
  .rb-actions .rb-btn.save{flex:1 1 100%}
}
.asist-table th{background:rgba(255,255,255,.04);color:var(--cream-f);padding:8px 10px;text-align:left;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line-s)}
.asist-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.asist-table tr:hover td{background:rgba(255,255,255,.02)}
.asist-table tr:last-child td{border-bottom:none}
.worker-name{font-weight:600;color:var(--cream);font-size:13px}
/* Trabajador dado de baja que aun aparece por tener historial en el periodo */
.worker-baja-tag{
  margin-left:6px;padding:1px 6px;border-radius:100px;
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cream-f);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);white-space:nowrap;
}
.worker-horario{font-size:10px;color:var(--cream-f);margin-top:2px}
.status-btns{display:flex;gap:4px;flex-wrap:wrap}
.sbtn{font-size:10px;padding:4px 8px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;font-weight:600;transition:all .15s;background:rgba(255,255,255,.05);color:var(--cream-f)}
.sbtn:hover{transform:translateY(-1px)}
.sbtn.sel-ok{background:rgba(52,211,153,.15);border-color:#34d399;color:#34d399}
.sbtn.sel-tarde{background:rgba(245,158,11,.15);border-color:#f59e0b;color:#f59e0b}
.sbtn.sel-falta{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444}
.sbtn.sel-permiso{background:rgba(129,140,248,.15);border-color:#818cf8;color:#818cf8}
.sbtn.sel-incap{background:rgba(251,146,60,.15);border-color:#fb923c;color:#fb923c}
.tardanza-input{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);border-radius:8px;padding:4px 8px;color:#f59e0b;font-size:11px;width:80px;outline:none;margin-left:4px}
.tardanza-badge{display:inline-block;font-size:10px;background:rgba(245,158,11,.15);color:#f59e0b;border-radius:100px;padding:2px 8px;margin-left:4px}
.horario-edit-btn{font-size:10px;background:none;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:var(--cream-f);padding:5px 8px;min-height:26px;cursor:pointer;transition:all .2s}
.horario-edit-btn:hover{border-color:var(--ice);color:var(--ice)}
.resumen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:14px}
.resumen-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:12px;text-align:center}
.resumen-card .rc-name{font-size:11px;font-weight:600;color:var(--cream);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resumen-card .rc-pct{font-family:'Inter',sans-serif;font-size:20px;font-weight:700;line-height:1}
.resumen-card .rc-sub{font-size:9px;color:var(--cream-f);margin-top:3px}
.asist-nav{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.asist-nav-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;padding:5px 10px;color:var(--cream-d);cursor:pointer;font-size:12px;transition:all .2s}
.asist-nav-btn:hover{background:rgba(255,255,255,.1);color:var(--cream)}
.asist-view-tab{font-size:11px;padding:5px 12px;border-radius:100px;border:1px solid var(--line);color:var(--cream-d);cursor:pointer;transition:all .2s}
.asist-view-tab.active{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.3);color:#34d399}

/* ─── MATERIALES / SOLICITUDES ──────────────────────────── */
.mat-form-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:14px;margin-bottom:16px;overflow:hidden;transition:all .25s}
.mat-form-header{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;user-select:none}
.mat-form-toggle{width:30px;height:30px;border-radius:50%;background:rgba(0,212,236,.15);border:1.5px solid rgba(0,212,236,.3);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--ice);transition:all .2s;flex-shrink:0}
.mat-form-toggle.open{background:rgba(0,212,236,.25);transform:rotate(45deg)}
.mat-form-body{padding:0 16px 16px;display:none}
.mat-form-body.open{display:block}
.mat-urgencia-row{display:flex;gap:8px;margin-bottom:12px}
.urg-btn{flex:1;padding:8px 6px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;font-size:11px;font-weight:700;text-align:center;transition:all .18s;background:rgba(255,255,255,.04);color:var(--cream-d)}
.urg-btn.sel-alta{background:rgba(239,68,68,.14);border-color:#ef4444;color:#ef4444}
.urg-btn.sel-media{background:rgba(245,158,11,.14);border-color:#f59e0b;color:#f59e0b}
.urg-btn.sel-baja{background:rgba(52,211,153,.14);border-color:#34d399;color:#34d399}
.mat-filter-bar{display:flex;background:rgba(255,255,255,.04);border-radius:11px;padding:3px;gap:2px;margin-bottom:14px}
.mat-filter-btn{flex:1;padding:6px 8px;border-radius:8px;border:none;background:transparent;color:rgba(228,242,247,.4);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.mat-filter-btn.active{background:rgba(255,255,255,.1);color:#e4f2f7;box-shadow:0 1px 5px rgba(0,0,0,.25)}
.mat-card{border-radius:14px;padding:14px 16px;margin-bottom:10px;position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:all .2s;cursor:default}
.mat-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.mat-card.alta{border-left:3px solid #ef4444}
.mat-card.media{border-left:3px solid #f59e0b}
.mat-card.baja{border-left:3px solid #34d399}
.mat-card-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.mat-card-title{font-size:14px;font-weight:700;color:var(--cream);flex:1;line-height:1.2}
.mat-urg-badge{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:100px;flex-shrink:0}
.mat-urg-badge.alta{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.25)}
.mat-urg-badge.media{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.25)}
.mat-urg-badge.baja{background:rgba(52,211,153,.15);color:#34d399;border:1px solid rgba(52,211,153,.25)}
.mat-status-chip{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px;margin-left:6px}
.mat-status-chip.pendiente{background:rgba(255,255,255,.08);color:var(--cream-d)}
.mat-status-chip.en_proceso{background:rgba(0,212,236,.12);color:var(--ice);border:1px solid rgba(0,212,236,.2)}
.mat-status-chip.completado{background:rgba(52,211,153,.12);color:#34d399;border:1px solid rgba(52,211,153,.2)}
.mat-status-chip.rechazado{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.2)}
.mat-meta{font-size:11px;color:var(--cream-f);margin-bottom:8px;display:flex;gap:10px;flex-wrap:wrap}
.mat-desc{font-size:12px;color:var(--cream-d);line-height:1.5;margin-bottom:8px}
.mat-timeline{display:flex;align-items:center;gap:0;margin-bottom:10px}
.mat-step{display:flex;flex-direction:column;align-items:center;flex:1}
.mat-step-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.15);transition:all .3s;z-index:1}
.mat-step-dot.active{background:#f59e0b;border-color:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.5)}
.mat-step-dot.done{background:#34d399;border-color:#34d399;box-shadow:0 0 6px rgba(52,211,153,.4)}
.mat-step-dot.rejected{background:#ef4444;border-color:#ef4444}
.mat-step-label{font-size:9px;color:var(--cream-f);margin-top:3px;white-space:nowrap}
.mat-step-line{flex:1;height:2px;background:rgba(255,255,255,.08);margin-top:-13px}
.mat-step-line.done{background:rgba(52,211,153,.4)}
.mat-admin-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.mat-action-btn{font-size:11px;padding:5px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:600;transition:all .18s;font-family:'Inter',sans-serif}
.mat-action-btn.proceso{background:rgba(0,212,236,.12);color:var(--ice);border:1px solid rgba(0,212,236,.2)}
.mat-action-btn.proceso:hover{background:rgba(0,212,236,.22)}
.mat-action-btn.listo{background:rgba(52,211,153,.12);color:#34d399;border:1px solid rgba(52,211,153,.2)}
.mat-action-btn.listo:hover{background:rgba(52,211,153,.22)}
.mat-action-btn.rechazar{background:rgba(239,68,68,.08);color:#ef4444;border:1px solid rgba(239,68,68,.15)}
.mat-action-btn.rechazar:hover{background:rgba(239,68,68,.18)}
.mat-nota-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 10px;color:var(--cream);font-size:11px;outline:none;margin-top:6px;font-family:'Inter',sans-serif;resize:none}
.mat-nota-input:focus{border-color:rgba(0,212,236,.3)}
.mat-nota-display{font-size:11px;color:var(--ice);background:rgba(0,212,236,.07);border-radius:8px;padding:6px 10px;margin-top:6px;border-left:2px solid rgba(0,212,236,.3)}
.mat-empty{padding:32px 16px;text-align:center;color:var(--cream-f);font-size:13px}

/* ─── HELP BUBBLE ────────────────────────────────────────── */
.help-bubble-btn{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#00d4ec,#818cf8);border:none;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,212,236,.35);z-index:900;transition:all .3s}
.help-bubble-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,212,236,.45)}
.help-panel{position:fixed;bottom:84px;right:24px;width:320px;max-height:70vh;background:rgba(12,20,40,.97);border:1px solid rgba(0,212,236,.2);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:899;overflow:hidden;display:none;flex-direction:column;backdrop-filter:blur(16px)}
.help-panel.open{display:flex}
.help-panel-header{padding:16px 20px 12px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}
.help-panel-title{font-size:14px;font-weight:700;color:var(--cream);flex:1}
.help-panel-close{background:none;border:none;color:var(--cream-f);cursor:pointer;font-size:18px;padding:0}
.help-panel-body{padding:16px;overflow-y:auto;flex:1}
.help-step{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start}
.help-step-num{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#00d4ec,#818cf8);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#020810;flex-shrink:0;margin-top:1px}
.help-step-text{font-size:12px;color:var(--cream-d);line-height:1.5}
.help-step-text strong{color:var(--cream)}
.help-section-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-f);margin:12px 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06)}

/* LIGHTBOX */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  z-index:3000;cursor:pointer;
}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:8px}

/* EMPTY STATE */
.empty-state{
  padding:48px 20px;text-align:center;
  color:var(--cream-f);font-size:13px;
}
.empty-state-icon{font-size:36px;margin-bottom:12px}
.empty-state-text{font-size:14px;color:var(--cream-d);margin-bottom:4px;font-weight:500}

/* SETTINGS MODAL for username */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.settings-row:last-child{border-bottom:none}
.settings-label{font-size:13px;color:var(--cream-d)}

/* MOBILE BOTTOM NAV */
/* Aqui vivian dos patrones de navegacion movil, encimados. Este bloque
   convertia #sidebar en barra inferior (width:100%, height:56px, bottom:0,
   flex-direction:row) mientras el bloque de 900px lo convierte en cajon
   lateral (width:min(280px,82vw)!important, translateX(-100%)). El
   !important ganaba el ancho y lo demas lo ganaba la barra, asi que salia
   un hibrido: un recuadro de 280x56 en la esquina, escondido hasta pulsar
   la hamburguesa, con 3 de los 7 destinos fuera de vista. Ademas
   #main reservaba 56px al pie y el boton flotante subia 72 para dejar sitio
   a una barra que nunca se veia.

   Se resuelve a favor del cajon: es el que tiene fondo con desenfoque,
   transicion, cierre al elegir destino y al pulsar Escape, y es lo que ya
   funcionaba entre 769 y 900. Siete destinos tampoco caben en una barra
   inferior, que aguanta cinco. Lo que queda aqui es solo lo que no es
   navegacion. */
@media(max-width:768px){
  .unit-cards-grid{grid-template-columns:1fr}
  .dashboard-cols{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .quick-stats{flex-wrap:wrap}
  .qs-card{min-width:calc(50% - 6px)}
}

/* PULSE ANIMATION for status change */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.pulse-once{animation:pulse .4s ease}

/* TASK COMPLETE ANIMATION */
@keyframes completeTask{
  0%{opacity:1;transform:scale(1)}
  40%{transform:scale(1.02)}
  100%{opacity:0;transform:scale(.96);max-height:0;padding:0;margin:0}
}
.task-completing{animation:completeTask .5s forwards}

/* SCROLLBAR STYLED */
.modal::-webkit-scrollbar,.notif-list::-webkit-scrollbar{width:3px}
.modal::-webkit-scrollbar-thumb,.notif-list::-webkit-scrollbar-thumb{background:var(--line-s)}

/* GLOW hover on unit cards */
.unit-stat-card[data-unit="gacama"]:hover{box-shadow:0 0 0 1px var(--gacama) inset,0 8px 24px rgba(129,140,248,.08)}
.unit-stat-card[data-unit="canastas"]:hover{box-shadow:0 0 0 1px var(--canastas) inset,0 8px 24px rgba(251,146,60,.08)}
.unit-stat-card[data-unit="hielos"]:hover{box-shadow:0 0 0 1px var(--hielos) inset,0 8px 24px rgba(0,212,236,.08)}
.unit-stat-card[data-unit="tequilera"]:hover{box-shadow:0 0 0 1px var(--tequilera) inset,0 8px 24px rgba(212,168,77,.08)}

/* TOOLTIP */
[title]{position:relative}

/* MADERA HUB (GACAMA) */
.madera-hub-intro{display:flex;gap:14px;align-items:center;padding:16px 18px;background:linear-gradient(135deg,rgba(129,140,248,.08),rgba(129,140,248,.02));border:1px solid rgba(129,140,248,.18);border-radius:14px;margin-bottom:16px}
.madera-hub-intro .mhi-icon{font-size:32px;line-height:1}
.madera-hub-intro .mhi-title{font-size:16px;font-weight:600;color:var(--cream);margin-bottom:2px}
.madera-hub-intro .mhi-desc{font-size:12px;color:var(--cream-d);opacity:.85;line-height:1.5}
.madera-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.madera-hub-card{position:relative;display:block;padding:20px 18px 22px;background:var(--panel);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;transition:all .18s ease;overflow:hidden}
.madera-hub-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gacama);opacity:0;transition:opacity .18s ease}
.madera-hub-card:hover{border-color:rgba(129,140,248,.55);transform:translateY(-2px);box-shadow:0 10px 28px rgba(129,140,248,.14)}
.madera-hub-card:hover::before{opacity:1}
.madera-hub-card .mhc-ico{font-size:28px;margin-bottom:10px;line-height:1}
.madera-hub-card .mhc-title{font-size:15px;font-weight:600;color:var(--cream);margin-bottom:4px}
.madera-hub-card .mhc-desc{font-size:12px;color:var(--cream-d);opacity:.78;line-height:1.5}
.madera-hub-card .mhc-arrow{position:absolute;right:16px;top:20px;color:var(--gacama);font-size:16px;opacity:0;transform:translateX(-4px);transition:all .18s ease}
.madera-hub-card:hover .mhc-arrow{opacity:1;transform:translateX(0)}
@media(max-width:900px){
  .madera-hub-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .madera-hub-card{padding:16px 14px 18px}
}
@media(max-width:480px){
  .madera-hub-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   LINEAR/VERCEL 2026 OVERRIDES — modernización visual
   Se aplica al final para ganar en cascade sin tocar clases originales
════════════════════════════════════════════════════════════════ */
/* Focus visible universal — Apple soft glow ring */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,212,236,.28);border-radius:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none;box-shadow:0 0 0 4px rgba(0,212,236,.28)
}

/* Sidebar — Linear-style: menos glow, más limpio */
#sidebar{background:var(--surf);border-right:1px solid var(--line)}
.sb-logo{padding:14px 16px;border-bottom:1px solid var(--line)}
.sb-logo-text{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:-0.01em}
.sb-logo-text span{color:var(--cream-x);letter-spacing:1px;font-weight:500}
.sb-section-label{color:var(--cream-x);font-weight:600;letter-spacing:0.08em;padding:14px 16px 6px;font-size:10px}
/* NOTA: .sb-link consolidado en el bloque base (arriba). Los estilos premium se aplican allí. */

/* Cmd+K hint button en topbar */
.cmd-hint-btn{background:transparent;border:none;padding:4px 8px;margin-left:6px;cursor:pointer;display:none;align-items:center;transition:opacity .15s}
.cmd-hint-btn:hover{opacity:.7}
.cmd-hint-btn kbd{display:inline-block;padding:3px 7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;font-size:11px;color:var(--cream-d);font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.02em;box-shadow:0 1px 0 rgba(0,0,0,.4)}
@media(min-width:768px){.cmd-hint-btn{display:inline-flex}}

/* Command Palette Cmd+K (Linear/Notion/VSCode 2026) */
#cmdOverlay{position:fixed;inset:0;background:rgba(5,8,15,.55);backdrop-filter:blur(8px) saturate(180%);z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;animation:cmdFade .18s ease-out}
@keyframes cmdFade{from{opacity:0}to{opacity:1}}
.cmd-panel{width:min(560px,calc(100vw - 32px));background:rgba(20,22,28,.98);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(0,212,236,.08);overflow:hidden;font-family:'Inter',sans-serif;animation:cmdRise .22s cubic-bezier(.22,1,.36,1)}
@keyframes cmdRise{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.cmd-inp-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05)}
.cmd-ico{font-size:14px;color:#00d4ec;font-weight:700;flex-shrink:0}
#cmdInp{flex:1;background:transparent;border:none;outline:none;color:var(--cream);font-size:15px;font-weight:500;font-family:inherit;letter-spacing:-.005em}
#cmdInp::placeholder{color:var(--cream-f)}
.cmd-kbd{display:inline-block;padding:2px 7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:6px;font-size:10px;color:var(--cream-d);font-family:'Inter',monospace;font-weight:600;letter-spacing:.03em}
.cmd-list{max-height:min(400px,calc(70vh - 100px));overflow-y:auto;padding:6px}
.cmd-list::-webkit-scrollbar{width:6px}
.cmd-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.cmd-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .12s ease}
.cmd-item-ico{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.cmd-item-lbl{font-size:13px;font-weight:600;color:var(--cream);flex:1}
.cmd-item-hint{font-size:11px;color:var(--cream-x);font-weight:500}
.cmd-active{background:linear-gradient(90deg,rgba(0,212,236,.14),rgba(0,212,236,.06))}
.cmd-active .cmd-item-lbl{color:var(--ice)}
.cmd-empty{padding:32px 16px;text-align:center;color:var(--cream-x);font-size:12px;font-weight:500}
.cmd-foot{display:flex;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.2);font-size:11px;color:var(--cream-f);font-weight:500}
.cmd-foot kbd{display:inline-block;padding:1px 5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:3px;font-size:10px;color:var(--cream-d);font-family:inherit;font-weight:600;margin-right:4px}
@media(max-width:640px){.cmd-panel{max-width:calc(100vw - 24px);border-radius:14px} #cmdOverlay{padding-top:8vh}}

/* Dashboard KPI cards premium (2026 Linear/Stripe pattern) */
.dash-kpi:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.15)!important;box-shadow:0 12px 30px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06)!important}
.dash-kpi:hover .dash-kpi-glow{opacity:1}
@keyframes kpiPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.dash-kpi{transition:none!important}.dash-kpi:hover{transform:none!important}}

/* Topbar — minimal, Linear-style con frosted material */
#topbar{background:var(--glass-bg);border-bottom:1px solid var(--line);padding:0 24px;backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);height:52px}
.topbar-title{font-weight:600;font-size:15px;letter-spacing:-0.01em}
.search-input{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 12px 12px 34px;font-size:14px;min-height:44px;transition:border-color var(--ease),background var(--ease)}
.search-input:hover{border-color:var(--line-s);background:var(--panel-2)}
.search-input:focus{border-color:var(--ice);background:var(--panel-2);box-shadow:var(--shadow-focus)}
.topbar-btn{border-radius:8px;transition:background var(--ease)}
.topbar-btn:hover{background:var(--line)}

/* User chip topbar */
.topbar-user-chip{background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:3px 12px 3px 4px;transition:border-color var(--ease),background var(--ease)}
.topbar-user-chip:hover{background:var(--panel-2);border-color:var(--line-s)}
.topbar-user-name{font-weight:500;font-size:13px}

/* Content spacing */
#content{padding:24px 32px}

/* QuickStats cards — flat, subtle */
.qs-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none;transition:border-color var(--ease),transform var(--ease)}
.qs-card:hover{border-color:var(--line-s);transform:translateY(-1px)}
.qs-value{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-0.02em}

/* Unit cards flatter */
.unit-stat-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);transition:border-color var(--ease),transform var(--ease)}
.usc-name{font-weight:600;letter-spacing:-0.01em}
.usc-stat-val{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-0.02em}

/* Cards / accordions — remove liquid glass */
.accordion{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);backdrop-filter:none;box-shadow:none;transition:border-color var(--ease)}
.accordion:hover{border-color:var(--line-s);box-shadow:var(--shadow-sm)}
.accordion-title{font-weight:600;letter-spacing:-0.01em}
.accordion-badge{background:var(--panel);border:1px solid var(--line);font-weight:500;font-size:11px}

/* Modals — frosted material Apple */
.modal{background:var(--glass-bg);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--line-s);box-shadow:var(--sh-3);border-radius:var(--r-lg)}
.modal-title{font-weight:600;letter-spacing:-0.02em}
.modal-overlay{backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
/* Bottom-sheet handle bar mobile */
@media(max-width:768px){
  .modal-card::before,.cn-modal-card::before{content:"";display:block;width:40px;height:4px;background:rgba(255,255,255,.24);border-radius:2px;margin:-6px auto 12px}
}

/* ─── LOGIN SCREEN REDISEÑO Linear-style ────────────────── */
#loginScreen{background:var(--void)}
.login-aurora{opacity:0.55}
.login-card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  backdrop-filter:blur(28px) saturate(140%);
  border:1px solid var(--line-s);
  border-radius:24px;
  padding:44px 40px;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.06);
}
.login-logo-name{font-weight:700;letter-spacing:-0.03em;font-size:24px}
.login-tagline{color:var(--cream-x);letter-spacing:0.16em;font-size:11px;font-weight:500}
.login-section-label{color:var(--cream-x);font-size:10px;font-weight:600;letter-spacing:0.10em;margin-bottom:12px}
.login-avatar-btn{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 10px;
  transition:border-color var(--ease),background var(--ease),transform var(--ease);
}
.login-avatar-btn:hover{
  background:var(--panel-2);
  border-color:var(--line-s);
  transform:translateY(-2px);
}
.login-avatar-name{font-weight:600;letter-spacing:-0.01em;font-size:13px}
.login-avatar-role{color:var(--cream-x);letter-spacing:0.06em;font-weight:500;font-size:10px;margin-top:2px}

/* Badge de acceso — más claro para el usuario */
.login-avatar-btn.is-admin{position:relative}
.login-avatar-btn.is-admin::before{
  content:'ADMIN';
  position:absolute;top:8px;right:8px;
  font-size:8px;font-weight:700;letter-spacing:0.08em;
  color:var(--gold);
  background:rgba(234,179,8,.10);
  border:1px solid rgba(234,179,8,.25);
  padding:2px 6px;border-radius:100px;
}

/* Admin password modal — Linear style */
.apm-card{
  background:var(--surf);
  border:1px solid var(--line-s);
  border-radius:var(--radius-xl);
  padding:32px 28px;
  box-shadow:var(--shadow-lg);
}
.apm-title{font-weight:600;letter-spacing:-0.01em;font-size:16px}
.apm-sub{color:var(--cream-x);font-size:12px}
.apm-input{
  background:var(--panel);
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:12px 44px 12px 14px;
  font-size:14px;
  transition:border-color var(--ease),background var(--ease);
}
.apm-input:focus{border-color:var(--ice);background:var(--panel-2);box-shadow:var(--shadow-focus)}
.apm-btn{
  background:var(--ice);color:var(--void);
  border:1px solid var(--ice);border-radius:8px;
  font-weight:600;font-size:13px;padding:11px;
  transition:background var(--ease),transform var(--ease);
}
.apm-btn:hover:not(:disabled){background:var(--ice-b)}
.apm-btn:active:not(:disabled){transform:scale(.98)}
.apm-cancel{color:var(--cream-x);font-weight:500;font-size:12px}
.apm-cancel:hover{color:var(--cream-d)}

/* Notif badge */
.notif-badge{background:var(--ice);color:var(--void);font-weight:700;box-shadow:0 0 0 2px var(--surf)}

/* Botones generales — Linear style */
button.btn-primary,.btn-primary{
  background:var(--ice);color:var(--void);border:1px solid var(--ice);
  border-radius:8px;padding:8px 16px;font-weight:600;font-size:13px;
  transition:background var(--ease),transform var(--ease);
}
button.btn-primary:hover,.btn-primary:hover{background:var(--ice-b)}
button.btn-primary:active,.btn-primary:active{transform:scale(.98)}

/* Sync status indicator — más obvio cuando está mal */
.sync-status[data-status="offline"] .sync-label{color:var(--cream-x)}
.sync-status[data-status="offline"] .sync-dot{background:var(--cream-x)!important}

/* Chart backgrounds neutrales */
.chart-container{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px}

/* Task row hover más sutil */
.tcr-row:hover{background:var(--line)!important}

/* Selección de texto — consistente con brand */
::selection{background:rgba(0,212,236,.20);color:var(--cream)}

/* Scrollbar más discreto */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--line-s);border-radius:99px;border:1px solid transparent}
::-webkit-scrollbar-thumb:hover{background:var(--line-hi)}

/* Mobile refinements */
@media(max-width:640px){
  #content{padding:16px}
  .login-card{padding:32px 24px;border-radius:20px}
  .login-avatar-btn{padding:14px 8px}
  .apm-card{padding:24px 20px;border-radius:20px}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ─── SIDEBAR unit counters (Fase 2) ─────────────────────── */
.sb-unit-count{
  min-width:20px;height:18px;padding:0 6px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:100px;
  font-size:10px;font-weight:700;color:var(--cream-d);
  display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;line-height:1;
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.sb-unit-count:empty{display:none}
.sb-unit-count.has-overdue{
  background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35);color:#ef4444;
}
.sb-link:hover .sb-unit-count{background:var(--panel-2);border-color:var(--line-s)}
.sb-link.active .sb-unit-count{background:var(--panel-2);border-color:var(--line-s);color:var(--cream)}

/* ─── DASHBOARD task-row (Fase 2) ────────────────────────── */
.task-row{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  cursor:pointer;transition:background var(--ease);
  border-bottom:1px solid var(--line);
}
.task-row:last-child{border-bottom:none}
.task-row:hover{background:var(--panel)}
.task-row:focus-visible{background:var(--panel);outline:2px solid var(--ice);outline-offset:-2px}
.task-row-priority{width:3px;height:32px;border-radius:2px;flex-shrink:0}
.task-row-priority.high{background:#ef4444}
.task-row-priority.medium{background:#eab308}
.task-row-priority.low{background:var(--cream-x)}
.task-row-content{flex:1;min-width:0}
.task-row-title{font-size:14px;font-weight:500;color:var(--cream);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-row-meta{display:flex;align-items:center;gap:10px;margin-top:2px;font-size:11px;color:var(--cream-x)}
.task-row-arrow{color:var(--cream-x);font-size:18px;flex-shrink:0;font-weight:400}

/* ══════════════════════════════════════════════════════════════
   FASE 3 · Per-unit views · Linear polish
════════════════════════════════════════════════════════════════ */
/* Unit topbar — sticky, con blur, cleaner */
.unit-topbar{
  padding:22px 32px 18px;background:var(--void);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
}
.unit-topbar::after{left:32px;right:32px;background:var(--line)}
.unit-topbar-icon{width:40px;height:40px;border-radius:11px;font-size:22px}
.unit-topbar-name{font-weight:700;font-size:20px;letter-spacing:-.02em}
.unit-topbar-desc{color:var(--cream-x);font-size:12px;font-weight:500}

/* Pills — flat Linear */
.usp{
  padding:4px 10px;border-radius:100px;font-weight:600;font-size:11px;
  background:var(--panel);border:1px solid var(--line);color:var(--cream-d);
  transition:border-color var(--ease);
}
.usp.pending{background:rgba(234,179,8,.08);color:#eab308;border-color:rgba(234,179,8,.22)}
.usp.progress{background:rgba(0,212,236,.08);color:var(--ice);border-color:rgba(0,212,236,.22)}
.usp.done{background:rgba(34,197,94,.08);color:#22c55e;border-color:rgba(34,197,94,.22)}
.usp.overdue{background:rgba(239,68,68,.08);color:#ef4444;border-color:rgba(239,68,68,.22)}

/* Segmented nav — Linear pill style */
.unit-seg-wrap{padding:14px 32px 0}
.unit-seg-nav{
  background:var(--surf);border:1px solid var(--line);
  border-radius:14px;padding:4px;gap:2px;
}
.unit-seg-btn{
  border-radius:8px;font-size:13px;font-weight:500;padding:8px 12px;
  color:var(--cream-x);transition:color var(--ease),background var(--ease);
}
.unit-seg-btn:hover:not(.active){color:var(--cream-d);background:var(--line)}
.unit-seg-btn.active{
  background:var(--panel-2);color:var(--cream);
  box-shadow:0 1px 3px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.04);
  font-weight:600;
}

/* Content padding */
.unit-tab-content{padding:20px 32px 40px}

/* Task filter sub-nav */
.task-filter-seg{
  background:var(--surf);border:1px solid var(--line);
  border-radius:8px;padding:3px;margin-bottom:16px;
}
.tfs-btn{
  padding:6px 10px;border-radius:8px;font-size:12px;font-weight:500;
  color:var(--cream-x);transition:color var(--ease),background var(--ease);
}
.tfs-btn:hover:not(.active){color:var(--cream-d);background:var(--line)}
.tfs-btn.active{
  background:var(--panel-2);color:var(--cream);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* Quick-add inline */
.quick-add-inline{
  background:var(--surf);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px 8px 14px;margin-bottom:16px;
  transition:border-color var(--ease),background var(--ease);
}
.quick-add-inline:focus-within{border-color:var(--ice);background:var(--panel);box-shadow:var(--shadow-focus)}
.qa-input{font-size:14px}
.qa-input::placeholder{color:var(--cream-x)}
.qa-send{
  background:var(--ice);color:var(--void);border-radius:8px;
  padding:6px 12px;font-size:12px;font-weight:600;
  transition:background var(--ease),transform var(--ease);
}
.qa-send:hover{background:var(--ice-b)}
.qa-send:active{transform:scale(.97)}

/* Task detail slide panel — smoother 60fps */
#taskPanel{
  will-change:transform;
  transition:transform .32s var(--spring)!important;
}
#taskPanelBg{
  transition:opacity .28s ease!important;
}

/* Empty state (reusable) */
.inuit-empty{
  padding:48px 24px;text-align:center;
  background:var(--surf);border:1px dashed var(--line);
  border-radius:var(--radius-lg);color:var(--cream-x);
}
.inuit-empty-icon{font-size:36px;margin-bottom:12px;opacity:.6}
.inuit-empty-title{font-size:15px;font-weight:600;color:var(--cream-d);margin-bottom:4px}
.inuit-empty-body{font-size:13px;line-height:1.5;max-width:420px;margin:0 auto;color:var(--cream-x)}
.inuit-empty-actions{margin-top:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.inuit-empty-btn{
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
  background:var(--panel);border:1px solid var(--line-s);color:var(--cream-d);
  cursor:pointer;transition:border-color var(--ease),background var(--ease);
}
.inuit-empty-btn:hover{background:var(--panel-2);border-color:var(--line-hi);color:var(--cream)}
.inuit-empty-btn.primary{background:var(--ice);color:var(--void);border-color:var(--ice)}
.inuit-empty-btn.primary:hover{background:var(--ice-b)}

/* Mobile per-unit — más compacto */
@media(max-width:640px){
  .unit-topbar{padding:16px 16px 14px}
  .unit-topbar::after{left:16px;right:16px}
  .unit-seg-wrap{padding:12px 16px 0}
  .unit-seg-nav{border-radius:8px}
  .unit-tab-content{padding:14px 16px 32px}
}

/* ══════════════════════════════════════════════════════════════
   HIELOS MAPA · Leaflet dark theme + markers + popup + ruta
════════════════════════════════════════════════════════════════ */
.hmapa-wrap{display:flex;flex-direction:column;gap:14px}
.hmapa-summary{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:12px 14px;background:var(--surf);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.hmapa-summary-item{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--cream-d);
  padding:4px 10px;background:var(--panel);border:1px solid var(--line);border-radius:100px;
}
.hmapa-summary-item b{color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums}
.hmapa-summary-item span{color:var(--cream-x);font-size:11px}
.hmapa-summary-total{margin-left:auto;background:var(--panel-2);border-color:var(--line-s)}
.hmapa-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.05)}

.hmapa-grid{
  display:grid;grid-template-columns:1fr 340px;gap:14px;
  height:min(72vh,600px);min-height:440px;
}
.hmapa-map{
  height:100%;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);background:#0a0a0b;z-index:1;
}
.hmapa-map .leaflet-container{background:#0a0a0b;font-family:inherit}
.hmapa-map .leaflet-control-attribution{
  background:rgba(0,0,0,.6)!important;color:var(--cream-x)!important;
  font-size:10px!important;padding:2px 6px!important;
}
.hmapa-map .leaflet-control-attribution a{color:var(--cream-d)!important}
.hmapa-map .leaflet-control-zoom a{
  background:var(--panel)!important;color:var(--cream-d)!important;
  border-color:var(--line)!important;font-family:inherit!important;
}
.hmapa-map .leaflet-control-zoom a:hover{background:var(--panel-2)!important;color:var(--cream)!important}
.hmapa-map .leaflet-popup-content-wrapper{
  background:var(--surf)!important;color:var(--cream)!important;
  border:1px solid var(--line-s)!important;border-radius:14px!important;
  box-shadow:var(--shadow-lg)!important;padding:0!important;
}
.hmapa-map .leaflet-popup-content{margin:0!important;padding:0!important;width:auto!important}
.hmapa-map .leaflet-popup-tip{background:var(--surf)!important}
.hmapa-map .leaflet-popup-close-button{color:var(--cream-x)!important;font-size:22px!important;padding:6px 8px 0 0!important}

/* Custom marker */
.hmapa-marker-wrap{background:transparent!important;border:none!important;position:absolute!important}
.hmapa-marker{
  width:54px;height:54px;border-radius:50%;
  border:3px solid;color:#0a0a0b;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 2px rgba(0,0,0,.4);
  font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;
  transition:transform var(--ease);cursor:pointer;
  line-height:1;
}
.hmapa-marker:hover{transform:scale(1.10);z-index:1000}
.hmpm-nodata{font-size:20px;font-weight:800;color:rgba(0,0,0,.55)}
/* Route Builder — panel derecho flotante + números de paradas */
.rb-panel{
  position:fixed;top:80px;right:20px;width:340px;max-height:calc(100vh - 120px);
  overflow-y:auto;z-index:900;
  background:rgba(15,15,20,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,212,236,.25);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(0,212,236,.10);color:var(--cream);
  animation:hcoordSlideIn .25s cubic-bezier(.4,0,.2,1);
}
.rb-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.rb-title{font-size:15px;font-weight:700;color:var(--ice-b);letter-spacing:-.01em}
.rb-sub{font-size:11px;color:var(--cream-d);margin-top:2px}
.rb-close{background:transparent;border:none;color:var(--cream-d);font-size:22px;line-height:1;cursor:pointer;padding:0;width:28px;height:28px;border-radius:8px;transition:all .15s}
.rb-close:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.rb-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05)}
.rb-metric{text-align:center;padding:8px 4px;background:rgba(0,212,236,.05);border-radius:8px}
.rb-metric b{display:block;font-size:15px;font-weight:800;color:var(--ice-b);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.rb-metric span{display:block;font-size:10px;color:var(--cream-d);margin-top:2px;letter-spacing:.02em}
.rb-stops{padding:10px 12px;display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto}
.rb-stop{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:8px 10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:8px}
.rb-stop.rb-fabrica{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.20)}
.rb-stop-num{width:26px;height:26px;border-radius:50%;background:var(--ice-b);color:var(--void);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.rb-stop.rb-fabrica .rb-stop-num{background:rgba(251,191,36,.25);color:#fbbf24;font-size:14px}
.rb-stop-main{min-width:0}
.rb-stop-name{font-size:13px;font-weight:600;color:var(--cream);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-stop-hint{font-size:11px;color:var(--cream-d);margin-top:2px;opacity:.75}
.rb-stop-inputs{display:flex;gap:8px;margin-top:4px}
.rb-stop-inputs label{font-size:10px;color:var(--cream-d);display:inline-flex;align-items:center;gap:3px;font-weight:600}
.rb-stop-inputs input{width:38px;padding:2px 4px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:var(--cream);font:inherit;font-size:12px;font-variant-numeric:tabular-nums;text-align:center}
.rb-stop-inputs input:focus{outline:none;border-color:var(--ice-b)}
.rb-stop-rm{width:22px;height:22px;border-radius:6px;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.25);color:#fca5a5;font-size:14px;cursor:pointer;line-height:1;transition:all .12s}
.rb-stop-rm:hover{background:rgba(239,68,68,.25);transform:scale(1.05)}
.rb-actions{padding:12px 14px;display:flex;gap:8px;border-top:1px solid rgba(255,255,255,.06)}
.rb-btn{flex:1;padding:9px 12px;border-radius:8px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid transparent}
.rb-btn.primary{background:var(--ice-b);color:var(--void);border-color:var(--ice-b)}
.rb-btn.primary:hover{background:var(--ice)}
.rb-btn.ghost{background:rgba(255,255,255,.05);color:var(--cream);border-color:rgba(255,255,255,.10);flex:0 0 auto;padding:9px 14px}
.rb-btn.ghost:hover{background:rgba(255,255,255,.10)}
.rb-btn.whatsapp{background:#25d366;color:#000;border-color:#25d366;font-weight:700}
.rb-btn.whatsapp:hover{background:#1ebe5a}
.rb-btn.optimize{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;border-color:#7c3aed;font-weight:700}
.rb-btn.optimize:hover{background:linear-gradient(135deg,#b271f9,#8b5cf6);transform:translateY(-1px)}
.rb-btn.save{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-color:#16a34a;font-weight:700;width:100%}
.rb-btn.save:hover{background:linear-gradient(135deg,#34d766,#22c55e);transform:translateY(-1px)}
/* Asignación chofer + vehículo */
.rb-assign{padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px}
.rb-assign-row{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px}
.rb-assign-lab{font-size:11px;color:var(--cream-d);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.rb-assign-sel{padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);color:var(--cream);font:inherit;font-size:13px;cursor:pointer}
.rb-assign-sel:focus{outline:none;border-color:var(--ice-b)}
/* Números de paradas superpuestos en el mapa */
.hmapa-rb-number{background:transparent!important;border:none!important;pointer-events:none}
.rb-num{width:24px;height:24px;border-radius:50%;background:var(--ice-b);color:var(--void);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;border:2px solid var(--void);box-shadow:0 2px 8px rgba(0,0,0,.6);font-variant-numeric:tabular-nums;line-height:1}
/* Toolbar toggle route-builder cuando activo */
.hmapa-rb-toggle.active{background:linear-gradient(135deg,var(--ice-b),var(--ice))!important;color:var(--void)!important;border-color:transparent!important;box-shadow:0 4px 14px rgba(0,212,236,.35)}
.hmapa-traffic-toggle.active{background:linear-gradient(135deg,#f59e0b,#ef4444)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 4px 14px rgba(239,68,68,.35)}
.hmapa-traffic-tiles{filter:saturate(1.15) contrast(1.05)}
.hmapa-fleet-toggle.active{background:linear-gradient(135deg,#3b82f6,#1e40af)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 4px 14px rgba(59,130,246,.35)}
/* Marker de camioneta live */
.ft-marker-wrap{background:transparent!important;border:none!important}
.ft-marker{
  width:50px;height:50px;border-radius:50%;border:3px solid #000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;line-height:1;box-shadow:0 4px 16px rgba(0,0,0,.7),0 0 0 2px rgba(255,255,255,.15);
  transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;
}
.ft-marker span:first-child{font-size:22px}
.ft-marker-spd{font-size:9px;font-weight:700;margin-top:1px;letter-spacing:-.02em;opacity:.85;font-variant-numeric:tabular-nums}
.ft-marker::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid currentColor;opacity:.6;
  animation:ftPulse 2s ease-in-out infinite;pointer-events:none;
}
@keyframes ftPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}
.ft-marker.ft-stale{opacity:.5;filter:grayscale(.7)}
.ft-marker.ft-stale::before{animation:none;border-color:#ef4444;opacity:.4}
@media (max-width:768px){
  .rb-panel{top:auto;bottom:0;right:0;left:0;width:100%;max-height:70vh;border-radius:14px 14px 0 0}
}
/* Marker desplazado 60x-40y al SO (evita traslape con fábrica): dot + línea al latLng real
 *  Icon está al SO del latLng, entonces el dot (que marca latLng) está al NE del icon */
.hmapa-marker-offset{overflow:visible !important}
.hmapa-marker-offset::before{
  /* Dot en la posición real del latLng: 60px derecha + 40px arriba del centro icon */
  content:'';position:absolute;
  top:calc(50% - 40px);left:calc(50% + 60px);
  width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.92);border:2px solid rgba(0,0,0,.65);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  transform:translate(-50%, -50%);
  pointer-events:none;z-index:2;
}
.hmapa-marker-offset::after{
  /* Línea conector: desde el centro del icon hacia el dot NE (largo ~72px, ángulo ~-34°) */
  content:'';position:absolute;
  top:50%;left:50%;
  width:72px;height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.85) 100%);
  transform-origin:0 50%;transform:rotate(-34deg);
  pointer-events:none;z-index:1;opacity:.75;
  border-radius:1px;
}
/* Marker: % fill como número dominante siempre; existencias por SKU solo en zoom alto */
.hmapa-marker-stock{flex-direction:column;gap:0;padding:2px 0}
.hmpm-pct{
  font-size:18px;font-weight:800;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:rgba(0,0,0,.90);
  display:flex;align-items:baseline;justify-content:center;
}
.hmpm-pct i{font-size:9px;font-weight:700;font-style:normal;margin-left:1px;opacity:.6;letter-spacing:0}
.hmpm-existencias{
  display:none; /* oculto por default; container.hmapa-existencias-visible lo muestra */
  font-size:9px;font-weight:700;line-height:1;
  color:rgba(0,0,0,.75);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  margin-top:2px;padding-top:2px;border-top:1px solid rgba(0,0,0,.16);
  align-items:baseline;justify-content:center;gap:2px;
  min-width:36px;
}
.hmpm-existencias b{font-size:10px;font-weight:800;color:rgba(0,0,0,.90)}
.hmpm-existencias em{font-style:normal;opacity:.35;font-weight:400;padding:0 1px}
/* Cuando el container está en zoom alto o modo "always", mostrar existencias */
.leaflet-container.hmapa-existencias-visible .hmpm-existencias{display:flex}
/* Y ajustar el % a menor tamaño para que quepa todo bien */
.leaflet-container.hmapa-existencias-visible .hmpm-pct{font-size:14px}
.leaflet-container.hmapa-existencias-visible .hmpm-pct i{font-size:8px}
.hmapa-marker-fabrica{
  width:60px;height:60px;border:3px solid #fbbf24;background:#0a0a0b!important;
  color:#fbbf24;font-size:28px;
  box-shadow:0 4px 20px rgba(251,191,36,.4),0 0 0 2px rgba(0,0,0,.6);
  cursor:default;
}
.hmapa-marker-fabrica:hover{transform:scale(1.08)}
.leaflet-marker-draggable{cursor:move}
.leaflet-marker-draggable .hmapa-marker::after{
  content:'✥';position:absolute;top:-8px;right:-8px;
  width:16px;height:16px;border-radius:50%;
  background:var(--ice);color:var(--void);
  font-size:10px;font-weight:700;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--void);
}
.hmapa-marker[data-level="urgente"]{animation:hmapa-pulse 1.6s infinite}
.hmapa-marker[data-level="sin"]{color:var(--cream-d)}
@keyframes hmapa-pulse{
  0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 2px rgba(0,0,0,.4),0 0 0 0 rgba(239,68,68,.6)}
  50%{box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 2px rgba(0,0,0,.4),0 0 0 10px rgba(239,68,68,0)}
}

/* Popup content */
/* Popup responsive: escala con viewport + zoom del mapa */
.hmapa-popup{padding:0;width:clamp(220px, 28vw, 340px)}
/* Zoom bajo (≤12): popup compacto para no invadir el mapa panorámico */
.leaflet-container:not(.hmapa-zoom-high) .hmapa-popup{width:clamp(200px, 22vw, 280px);font-size:12px}
.leaflet-container:not(.hmapa-zoom-high) .hmapa-popup-title{font-size:13px}
.leaflet-container:not(.hmapa-zoom-high) .hmapa-popup-city{font-size:11px;line-height:1.35}
.leaflet-container:not(.hmapa-zoom-high) .hmp-body{padding:8px 12px 6px;gap:6px}
.leaflet-container:not(.hmapa-zoom-high) .hmp-sku{grid-template-columns:36px 1fr auto;gap:8px}
.leaflet-container:not(.hmapa-zoom-high) .hmp-sku-lab{font-size:11px}
.leaflet-container:not(.hmapa-zoom-high) .hmp-cell-input{width:38px;font-size:13px}
.leaflet-container:not(.hmapa-zoom-high) .hmp-step-btn{width:22px;height:22px;font-size:13px}
.leaflet-container:not(.hmapa-zoom-high) .hmp-sku-cap-txt{font-size:10px}
.leaflet-container:not(.hmapa-zoom-high) .hmapa-popup-actions{padding:8px 12px 10px;gap:4px}
.leaflet-container:not(.hmapa-zoom-high) .hmapa-btn-ghost,
.leaflet-container:not(.hmapa-zoom-high) .hmapa-btn-primary{padding:6px 10px;font-size:11px}
/* Móvil siempre compacto */
@media (max-width:640px){
  .hmapa-popup{width:clamp(200px, 80vw, 300px)}
}
/* Popup inline capture — Apple-style */
.hmp-body{padding:12px 14px 10px;background:var(--surf);display:flex;flex-direction:column;gap:8px}
.hmp-sku{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px}
.hmp-sku-lab{font-size:12px;font-weight:700;color:var(--cream);letter-spacing:-.01em}
.hmp-sku-val{font-size:14px;font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums;text-align:right}
.hmp-sku-cap{color:var(--cream-x);font-weight:400;font-size:12px}
.hmp-sku-pct{font-size:11px;color:var(--cream-x);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.hmp-sku-cap-txt{font-size:11px;color:var(--cream-x);font-variant-numeric:tabular-nums;min-width:38px;text-align:right;letter-spacing:-.005em}
.hmp-stepper{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid transparent;transition:border-color .18s, box-shadow .18s}
.hmp-stepper:focus-within{border-color:var(--ice-b);box-shadow:0 0 0 2px rgba(0,212,236,.22)}
.hmp-step-btn{width:26px;height:26px;border:none;border-radius:8px;background:transparent;color:var(--cream-d);font:inherit;font-size:15px;font-weight:600;line-height:1;cursor:pointer;transition:all .12s cubic-bezier(.4,0,.2,1)}
.hmp-step-btn:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.hmp-step-btn:active{transform:scale(.94)}
.hmp-cell-input{width:44px;padding:4px 2px;border:none;background:transparent;color:var(--cream);text-align:center;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;font-weight:700;-moz-appearance:textfield}
.hmp-cell-input::-webkit-outer-spin-button,.hmp-cell-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hmp-cell-input:focus{outline:none;color:var(--ice-b)}
.hmp-fillrow{display:flex;align-items:center;gap:8px;margin-top:4px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.hmp-fill-track{flex:1;height:6px;border-radius:100px;background:rgba(255,255,255,.06);overflow:hidden}
.hmp-fill{height:100%;border-radius:100px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.hmp-fill[data-lvl="lo"]{background:linear-gradient(90deg,#ef4444,#f87171)}
.hmp-fill[data-lvl="md"]{background:linear-gradient(90deg,#eab308,#facc15)}
.hmp-fill[data-lvl="ok"]{background:linear-gradient(90deg,#22c55e,#4ade80)}
.hmp-fill[data-lvl="hi"]{background:linear-gradient(90deg,#00d4ec,#67e8f9)}
.hmp-pct-lab{font-size:12px;font-weight:700;color:var(--cream);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.hmapa-popup-head{padding:14px 14px 12px;background:var(--panel);border-top-left-radius:11px;border-top-right-radius:11px}
.hmapa-popup-title{font-weight:700;font-size:14px;color:var(--cream);letter-spacing:-.01em;margin-bottom:2px}
.hmapa-popup-city{font-size:11px;color:var(--cream-x);line-height:1.4}
.hmapa-popup-table{width:100%;border-collapse:collapse;font-size:12px;margin:0}
.hmapa-popup-table th,.hmapa-popup-table td{padding:7px 12px;text-align:right;font-variant-numeric:tabular-nums}
.hmapa-popup-table th{color:var(--cream-x);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.06em;text-align:right;background:var(--panel)}
.hmapa-popup-table th:first-child,.hmapa-popup-table td:first-child{text-align:left;color:var(--cream-d)}
.hmapa-popup-table tr{border-top:1px solid var(--line)}
.hmapa-popup-total td{color:var(--cream);background:var(--panel);font-weight:700}
.hmapa-popup-updated{padding:8px 14px;font-size:11px;color:var(--cream-x);background:var(--surf);border-top:1px solid var(--line)}
.hmapa-popup-actions{padding:10px 14px 12px;display:flex;gap:6px;background:var(--surf);border-bottom-left-radius:11px;border-bottom-right-radius:11px}

/* Route panel */
.hmapa-route{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;
}
.hmapa-route-head{
  padding:14px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.hmapa-route-title{font-weight:700;font-size:14px;letter-spacing:-.01em}
.hmapa-route-sub{font-size:11px;color:var(--cream-x);margin-top:2px;line-height:1.4}
.hmapa-route-refresh{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  width:28px;height:28px;color:var(--cream-d);font-size:14px;cursor:pointer;
  transition:background var(--ease),transform var(--ease);
}
.hmapa-route-refresh:hover{background:var(--panel-2)}
.hmapa-route-refresh:active{transform:rotate(180deg)}
.hmapa-route-list{flex:1;overflow-y:auto;padding:6px}
.hmapa-route-stats{padding:8px 10px;font-size:11px;color:var(--cream-x);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.hmapa-route-item{
  display:flex;align-items:center;gap:10px;padding:10px;
  border-radius:8px;cursor:pointer;transition:background var(--ease);
}
.hmapa-route-item:hover,.hmapa-route-item:focus-visible{background:var(--panel);outline:none}
.hmapa-route-num{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;
  border:1.5px solid;flex-shrink:0;font-variant-numeric:tabular-nums;
}
.hmapa-route-info{flex:1;min-width:0}
.hmapa-route-name{font-size:13px;font-weight:600;color:var(--cream);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmapa-route-meta{font-size:11px;color:var(--cream-x);margin-top:1px}
.hmapa-route-arrow{color:var(--cream-x);font-size:16px;flex-shrink:0}
.hmapa-route-empty{padding:32px 20px;text-align:center;color:var(--cream-x)}

.hmapa-legend{
  display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);
  font-size:11px;color:var(--cream-x);
}
.hmapa-legend b{color:var(--cream-d);margin-right:4px}

/* Botones reusables */
.hmapa-btn-primary{
  background:var(--ice);color:var(--void);border:1px solid var(--ice);
  border-radius:8px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer;
  transition:background var(--ease),transform var(--ease);flex:1;
}
.hmapa-btn-primary:hover:not(:disabled){background:var(--ice-b)}
.hmapa-btn-primary:disabled{opacity:.4;cursor:not-allowed}
.hmapa-btn-primary:active:not(:disabled){transform:scale(.98)}
.hmapa-route .hmapa-btn-primary{margin:8px;border-radius:8px;flex:none}
.hmapa-btn-ghost{
  background:var(--panel);color:var(--cream-d);border:1px solid var(--line);
  border-radius:8px;padding:8px 14px;font-weight:500;font-size:13px;cursor:pointer;
  transition:background var(--ease),border-color var(--ease);flex:1;
}
.hmapa-btn-ghost:hover{background:var(--panel-2);border-color:var(--line-s);color:var(--cream)}

/* Modal edición stock */
.hmapa-modal-bg{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.hmapa-modal-bg.open{display:flex}
.hmapa-modal-card{
  background:var(--surf);border:1px solid var(--line-s);
  border-radius:var(--radius-xl);width:min(440px,100%);
  box-shadow:var(--shadow-lg);animation:hmapa-modal-in .22s var(--spring);
}
@keyframes hmapa-modal-in{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.hmapa-modal-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:20px 22px 14px;border-bottom:1px solid var(--line);gap:12px;
}
.hmapa-modal-title{font-weight:700;font-size:16px;letter-spacing:-.01em}
.hmapa-modal-sub{font-size:12px;color:var(--cream-x);margin-top:3px;line-height:1.4}
.hmapa-modal-close{
  background:transparent;border:none;color:var(--cream-x);
  font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;flex-shrink:0;
  transition:background var(--ease),color var(--ease);
}
.hmapa-modal-close:hover{background:var(--line);color:var(--cream)}
/* Historial modal */
.hmapa-hist-body{max-height:60vh;overflow-y:auto;padding:8px 0}
.hmapa-hist-loading{padding:24px;text-align:center;color:var(--cream-x);font-size:13px}
.hmapa-hist-empty{padding:24px;text-align:center;color:var(--cream-d);font-size:13px;line-height:1.6}
.hmapa-hist-empty code{background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11px}
.hmapa-hist-list{list-style:none;margin:0;padding:0}
.hmapa-hist-item{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);transition:background .12s}
.hmapa-hist-item:hover{background:rgba(255,255,255,.03)}
.hmapa-hist-item:last-child{border-bottom:none}
.hmapa-hist-time{font-size:11px;color:var(--cream-x);white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:2px}
.hmapa-hist-main{min-width:0}
.hmapa-hist-author{font-size:13px;font-weight:600;color:var(--cream);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hmapa-hist-source{font-size:11px;font-weight:500;color:var(--cream-x);padding:2px 8px;border-radius:100px;background:rgba(255,255,255,.05);letter-spacing:.02em}
.hmapa-hist-values{font-size:12px;color:var(--cream-d);display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-variant-numeric:tabular-nums}
.hmapa-hist-delta{padding:2px 8px;border-radius:6px;font-weight:600;font-size:12px}
.hmapa-hist-delta.up{background:rgba(34,197,94,.15);color:#86efac}
.hmapa-hist-delta.down{background:rgba(239,68,68,.15);color:#fca5a5}
.hmapa-hist-delta.neutral{background:rgba(255,255,255,.06);color:var(--cream-x);font-weight:500}
.hmapa-hist-after{color:var(--cream-x);font-size:11px;margin-left:4px}
.hmapa-hist-footer{padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:var(--cream-x);text-align:right;font-variant-numeric:tabular-nums}
.hmapa-modal-body{padding:18px 22px}
.hmapa-modal-grid{display:flex;flex-direction:column;gap:14px}
.hmapa-sku-row{
  display:grid;grid-template-columns:60px 1fr 1fr;gap:10px;align-items:end;
}
.hmapa-sku-label{
  font-weight:700;font-size:16px;color:var(--cream);
  padding-bottom:10px;letter-spacing:-.01em;
}
.hmapa-sku-field{display:flex;flex-direction:column;gap:4px}
.hmapa-sku-field span{font-size:11px;color:var(--cream-x);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.hmapa-sku-field input{
  background:var(--panel);border:1.5px solid var(--line);border-radius:8px;
  padding:9px 12px;font-size:14px;color:var(--cream);font-family:inherit;
  font-variant-numeric:tabular-nums;outline:none;
  transition:border-color var(--ease),background var(--ease);
}
.hmapa-sku-field input:focus{border-color:var(--ice);background:var(--panel-2)}
.hmapa-modal-hint{font-size:11px;color:var(--cream-x);margin-top:14px;text-align:center}
.hmapa-modal-actions{
  display:flex;gap:10px;padding:14px 22px 20px;border-top:1px solid var(--line);
}

/* Mobile mapa */
@media(max-width:900px){
  .hmapa-grid{grid-template-columns:1fr;height:auto}
  .hmapa-map{height:60vh;min-height:360px}
  .hmapa-route{max-height:400px}
}
@media(max-width:640px){
  .hmapa-sku-row{grid-template-columns:48px 1fr 1fr}
}

/* ══════════════════════════════════════════════════════════════
   HIELOS MAPA · MEJORAS UX POST-AUDIT
════════════════════════════════════════════════════════════════ */
/* Toolbar unificado (reemplaza summary + legend redundantes) */
.hmapa-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 12px;
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--radius-lg);
  flex-wrap:wrap;
}
.hmapa-filters{
  display:flex;gap:4px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:3px;
}
.hmapa-filter-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:8px;border:none;background:transparent;
  color:var(--cream-d);font-family:inherit;font-size:12px;font-weight:500;
  cursor:pointer;transition:background var(--ease),color var(--ease);
  letter-spacing:-.005em;
}
.hmapa-filter-btn:hover:not(.active):not(:disabled){background:var(--line);color:var(--cream)}
.hmapa-filter-btn.active{
  background:var(--panel-2);color:var(--cream);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.30);
}
.hmapa-filter-btn:disabled{opacity:.35;cursor:not-allowed}
.hmapa-filter-btn:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.hmapa-filter-count{
  font-size:11px;font-weight:700;padding:1px 6px;border-radius:100px;
  background:var(--void);color:var(--cream-x);font-variant-numeric:tabular-nums;line-height:1.4;
}
.hmapa-filter-btn.active .hmapa-filter-count{background:var(--ice);color:var(--void)}
.hmapa-meta{font-size:12px;color:var(--cream-x);font-weight:500;padding-right:6px;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
/* P2-1 (2026-08-19): timestamp Intelisis en toolbar. Sutil, no llama atención. */
.hmapa-last-sync{font-size:11px;color:var(--cream-x);opacity:.72;font-weight:500;letter-spacing:-.005em;font-variant-numeric:tabular-nums;padding:0 6px 0 4px;white-space:nowrap;align-self:center}
.hmapa-last-sync:empty{display:none}
.hmapa-edit-toggle{margin-left:8px;padding:7px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--cream-d);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.hmapa-edit-toggle:hover{background:rgba(255,255,255,.06);color:var(--cream)}
.hmapa-edit-toggle.active{background:linear-gradient(135deg,#f59e0b,#f97316);color:var(--void);border-color:transparent;box-shadow:0 4px 14px rgba(245,158,11,.35)}
.hmapa-edit-toggle.active:hover{background:linear-gradient(135deg,#fbbf24,#fb923c)}
.hmapa-edit-banner{padding:10px 14px;background:linear-gradient(90deg,rgba(245,158,11,.14),rgba(249,115,22,.10));border-left:3px solid #f59e0b;color:#fef3c7;font-size:13px;font-weight:600;letter-spacing:.005em;animation:invSavePulse 2.4s ease-in-out infinite}
/* Alerts banner */
.hmapa-alerts-banner{display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(90deg,rgba(234,179,8,.14),rgba(245,158,11,.08));border-left:3px solid #eab308;color:#fef3c7;font-size:13px;letter-spacing:.005em}
.hmapa-alerts-banner[data-critical="1"]{background:linear-gradient(90deg,rgba(239,68,68,.18),rgba(220,38,38,.10));border-left-color:#ef4444;color:#fecaca;animation:invSavePulse 2s ease-in-out infinite}
.hmapa-alerts-icon{font-size:16px;line-height:1}
.hmapa-alerts-text{flex:1;line-height:1.35}
.hmapa-alerts-crit{color:#fecaca;font-weight:700}
.hmapa-alerts-cta{padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--cream);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.hmapa-alerts-cta:hover:not(:disabled){background:rgba(255,255,255,.12)}
.hmapa-alerts-cta:disabled{opacity:.6;cursor:default}
/* Filter button alerts */
.hmapa-filter-btn.alert{background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(220,38,38,.10));border-color:rgba(239,68,68,.35);color:#fecaca}
.hmapa-filter-btn.alert:hover:not(:disabled):not(.active){background:linear-gradient(135deg,rgba(239,68,68,.25),rgba(220,38,38,.15))}
.hmapa-filter-btn.alert.active{background:#ef4444;color:var(--void);border-color:#ef4444}
.hmapa-filter-btn.alert.active .hmapa-filter-count{background:var(--void);color:#fecaca}
.hmapa-alert-icon{font-size:13px;margin-right:2px}
/* Panel "Corregir ubicación" — floating right side */
.hcoord-panel{
  position:fixed;top:80px;right:20px;width:360px;max-height:calc(100vh - 120px);
  overflow-y:auto;z-index:900;
  background:rgba(15,15,20,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.10);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);color:var(--cream);
  display:none;
  animation:hcoordSlideIn .25s cubic-bezier(.4,0,.2,1);
}
@keyframes hcoordSlideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
.hcoord-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);
}
.hcoord-title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.hcoord-sub{font-size:11px;color:var(--cream-d);margin-top:2px}
.hcoord-close{
  background:transparent;border:none;color:var(--cream-d);
  font-size:22px;line-height:1;cursor:pointer;padding:0;width:28px;height:28px;
  border-radius:8px;transition:all .15s;
}
.hcoord-close:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.hcoord-body{padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.hcoord-field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--cream-d);font-weight:600}
.hcoord-field select,.hcoord-input{
  padding:9px 12px;border-radius:8px;background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.09);color:var(--cream);
  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;
  transition:border-color .18s,box-shadow .18s;
}
.hcoord-field select:focus,.hcoord-input:focus{
  outline:none;border-color:var(--ice-b);box-shadow:0 0 0 2px rgba(0,212,236,.22);
}
.hcoord-current{
  padding:10px 12px;background:rgba(0,212,236,.06);border:1px solid rgba(0,212,236,.15);
  border-radius:8px;display:flex;flex-direction:column;gap:4px;
}
.hcoord-current-lab{font-size:11px;color:var(--cream-d);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.hcoord-current-val code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--ice-b);letter-spacing:-.01em}
.hcoord-current-link{font-size:12px;color:var(--cream);text-decoration:underline;text-underline-offset:2px}
.hcoord-current-link:hover{color:var(--ice-b)}
.hcoord-method{
  padding:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  border-radius:8px;display:flex;flex-direction:column;gap:8px;
}
.hcoord-method-title{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--cream)}
.hcoord-method-hint{font-size:11px;color:var(--cream-d);line-height:1.4}
.hcoord-btn{
  padding:9px 12px;border-radius:8px;font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .18s;border:1px solid transparent;
}
.hcoord-btn.primary{background:var(--ice-b);color:var(--void);border-color:var(--ice-b)}
.hcoord-btn.primary:hover{background:var(--ice);border-color:var(--ice)}
.hcoord-btn.ghost{background:rgba(255,255,255,.05);color:var(--cream);border-color:rgba(255,255,255,.10)}
.hcoord-btn.ghost:hover{background:rgba(255,255,255,.10)}
.hcoord-google-slot:empty{display:none}
.hcoord-google-match{
  padding:10px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.20);border-radius:8px;
  display:flex;flex-direction:column;gap:4px;
}
.hcoord-google-name{font-weight:700;font-size:13px;color:#86efac}
.hcoord-google-addr{font-size:11px;color:var(--cream-d);line-height:1.4}
.hcoord-google-drift{font-size:12px;color:var(--cream);font-variant-numeric:tabular-nums;margin-top:4px}
.hcoord-hist{
  padding:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  border-radius:8px;display:flex;flex-direction:column;gap:6px;
}
.hcoord-hist-title{font-size:12px;font-weight:700;color:var(--cream);letter-spacing:.02em;margin-bottom:2px}
.hcoord-hist-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  padding:6px 8px;background:rgba(255,255,255,.02);border-radius:6px;font-size:11px;
}
.hcoord-hist-when{color:var(--cream-d);white-space:nowrap;font-variant-numeric:tabular-nums}
.hcoord-hist-delta{color:var(--cream);font-variant-numeric:tabular-nums}
.hcoord-hist-revert{
  padding:3px 8px;border-radius:6px;background:rgba(239,68,68,.15);color:#fca5a5;
  border:1px solid rgba(239,68,68,.25);font:inherit;font-size:11px;font-weight:600;cursor:pointer;
}
.hcoord-hist-revert:hover{background:rgba(239,68,68,.25)}
@media (max-width:768px){
  .hcoord-panel{top:auto;bottom:0;right:0;left:0;width:100%;max-height:70vh;border-radius:14px 14px 0 0}
}
/* Widget "Top 5 sucursales críticas" en dashboard */
.criticas-list{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.critica-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:9px 12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  border-radius:8px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);
}
.critica-row:hover{background:rgba(255,255,255,.05);border-color:rgba(239,68,68,.20);transform:translateX(2px)}
.critica-sev{
  display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:100px;
  font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
}
.critica-sev-lbl{font-size:10px}
.critica-info{min-width:0;overflow:hidden}
.critica-name{font-size:13px;font-weight:600;color:var(--cream);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.critica-meta{font-size:11px;color:var(--cream-d);margin-top:2px;line-height:1.35;font-variant-numeric:tabular-nums}
.critica-meta b{color:var(--cream);font-weight:700}
.critica-when{color:var(--cream-x);opacity:.85}
.critica-cta{
  width:32px;height:32px;border-radius:8px;background:rgba(0,212,236,.10);
  border:1px solid rgba(0,212,236,.25);color:var(--ice-b);
  font-size:14px;cursor:pointer;transition:all .15s;flex-shrink:0;
}
.critica-cta:hover{background:rgba(0,212,236,.20);transform:scale(1.05)}
.critica-more{
  padding:10px 12px;text-align:center;font-size:12px;font-weight:600;color:var(--cream-x);
  background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.10);border-radius:8px;
  cursor:pointer;transition:all .15s;
}
.critica-more:hover{background:rgba(255,255,255,.05);color:var(--cream);border-color:rgba(0,212,236,.30)}
/* Reporte de viajes por chofer */
.rv-filters{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:8px}
.rv-filter-sel{flex:1;min-width:110px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.09);color:var(--cream);font:inherit;font-size:12px;cursor:pointer}
.rv-filter-sel:focus{outline:none;border-color:#a78bfa}
.rv-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.rv-metric{padding:8px 4px;background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.15);border-radius:8px;text-align:center}
.rv-metric b{display:block;font-size:15px;font-weight:800;color:#c4b5fd;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rv-metric span{display:block;font-size:10px;color:var(--cream-d);margin-top:2px;letter-spacing:.02em}
.rv-list{display:flex;flex-direction:column;gap:5px}
.rv-row{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:8px;cursor:pointer;transition:all .15s}
.rv-row:hover{background:rgba(255,255,255,.05);border-color:rgba(139,92,246,.25)}
.rv-row-main{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;padding:9px 12px}
.rv-row-fecha{font-size:11px;font-weight:700;color:var(--cream-x);text-align:center;line-height:1.2;text-transform:capitalize}
.rv-row-info{min-width:0}
.rv-row-title{font-size:13px;font-weight:600;color:var(--cream);letter-spacing:-.005em}
.rv-row-title b{font-weight:700}
.rv-row-meta{font-size:11px;color:var(--cream-d);margin-top:2px;font-variant-numeric:tabular-nums;line-height:1.35}
.rv-row-arrow{color:var(--cream-x);font-size:11px}
.rv-row-detail{padding:10px 14px 12px;background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.05);border-radius:0 0 7px 7px}
.rv-detail-stop{font-size:12px;color:var(--cream-d);padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.04);line-height:1.4}
.rv-detail-stop:last-child{border-bottom:none}
.rv-detail-stop b{color:#a78bfa;font-weight:700;font-variant-numeric:tabular-nums;margin-right:4px}
.rv-detail-bolsas{color:var(--cream);font-weight:600;font-variant-numeric:tabular-nums;margin-left:4px}
.rv-detail-notas{padding:8px 10px;margin-top:8px;background:rgba(234,179,8,.08);border-radius:6px;font-size:12px;color:#fde047;line-height:1.4}
/* Label lateral permanente con existencias por SKU (visible sin popup) */
.hmapa-stock-label{
  background:rgba(15,15,20,.92) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:var(--cream) !important;
  padding:4px 8px !important;
  border-radius:8px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.35) !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:-.005em !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex !important;
  flex-direction:column;
  gap:2px !important;
  line-height:1.3 !important;
  white-space:nowrap;
}
.hmapa-stock-label::before{border-right-color:rgba(15,15,20,.92) !important}
.hmapa-lbl-sku{font-variant-numeric:tabular-nums;color:var(--cream-d)}
.hmapa-lbl-sku b{color:var(--cream);font-weight:700;font-size:12px;margin-right:2px}
.hmapa-lbl-empty{color:#ef4444;font-weight:700;font-size:13px}
/* Auto-hide de labels en zoom bajo (evita apilamiento en vista panorámica) */
.leaflet-container.hmapa-labels-hidden .hmapa-stock-label,
.leaflet-container.hmapa-labels-hidden .leaflet-tooltip{display:none !important}
/* Marker alert pulse */
.hmapa-marker-alert{position:relative}
.hmapa-marker-alert::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;animation:markerPulse 1.6s ease-in-out infinite;pointer-events:none}
.hmapa-marker-alert.alert-critical::before{border-color:#ef4444}
.hmapa-marker-alert.alert-high::before{border-color:#f59e0b;animation-duration:2s}
.hmapa-marker-alert.alert-medium::before{border-color:#eab308;animation-duration:2.4s}
@keyframes markerPulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}

/* Toast */
.hmapa-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  z-index:11000;display:flex;align-items:center;gap:10px;
  padding:12px 18px;
  background:var(--panel-2);border:1px solid var(--line-s);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  color:var(--cream);font-size:13px;font-weight:500;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .28s var(--spring);
  min-width:220px;max-width:90vw;
}
.hmapa-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.hmapa-toast[data-kind="success"] .hmapa-toast-icon{color:#22c55e}
.hmapa-toast[data-kind="error"]   .hmapa-toast-icon{color:#ef4444}
.hmapa-toast[data-kind="info"]    .hmapa-toast-icon{color:var(--ice)}
.hmapa-toast-icon{font-size:16px;font-weight:700;flex-shrink:0}

/* Focus visible en Leaflet marker (a11y fix) */
.leaflet-marker-icon:focus,
.leaflet-marker-icon:focus-visible{
  outline:3px solid var(--ice);outline-offset:3px;border-radius:50%;
  filter:drop-shadow(0 0 0 var(--ice));
}
.leaflet-container:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}

/* Toolbar responsive */
@media(max-width:900px){
  .hmapa-toolbar{padding:10px}
  .hmapa-filters{width:100%;justify-content:flex-start}
  .hmapa-meta{width:100%;order:-1;text-align:right;padding-right:0;font-size:11px}
}
@media(max-width:640px){
  .hmapa-filter-btn{padding:6px 8px;font-size:12px;gap:5px}
  .hmapa-filter-btn:not(.active) span:first-child{display:none} /* hide dot on mobile */
  .hmapa-toolbar{gap:8px}
}

/* Reduce motion: quitar pulse animation */
@media(prefers-reduced-motion:reduce){
  .hmapa-marker[data-level="urgente"]{animation:none!important}
  .hmapa-toast{transition:opacity .01s!important}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE UX 2026 · Drawer + safe areas iOS + no overflow
════════════════════════════════════════════════════════════════ */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
/* 100% y no 100vw: 100vw incluye el ancho de la barra de desplazamiento, asi
   que con barra visible autoriza a body a medir ~6px mas que el area util.
   Hoy no desborda porque el contenido no llega a ese limite -- medido, el
   cuerpo da 762px con ambos valores. Es un seguro contra un fallo latente,
   no la correccion de uno observado. */
html, body{overflow-x:hidden;max-width:100%}
body{min-height:100dvh}
#app{min-height:100dvh}

/* Burger button en topbar — solo visible en móvil */
.burger-btn{
  display:none;
  background:transparent;border:1px solid var(--line);border-radius:8px;
  width:36px;height:36px;
  align-items:center;justify-content:center;
  color:var(--cream-d);cursor:pointer;
  transition:background var(--ease),border-color var(--ease);
  flex-shrink:0;padding:0;
}
.burger-btn:hover{background:var(--line);color:var(--cream)}
.burger-btn svg{width:18px;height:18px}

/* Backdrop cuando sidebar abierto en móvil */
.sidebar-backdrop{
  display:none;position:fixed;inset:0;z-index:99;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .22s ease;
}
.sidebar-backdrop.open{display:block;opacity:1}

@media(max-width:900px){
  .burger-btn{display:inline-flex}
  /* Sidebar off-screen por default */
  #sidebar{
    width:min(280px, 82vw)!important;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.5);
    padding-top:var(--safe-top);
    padding-bottom:var(--safe-bottom);
  }
  #sidebar.open{transform:translateX(0)}
  /* Main sin margin en móvil */
  #main{margin-left:0!important;width:100%}
  /* Topbar más compacto */
  #topbar{padding:0 12px 0 12px;gap:8px}
  /* FAB respeta safe area bottom (iPhone home indicator) */
  /* 72px era el hueco de la barra inferior que ya no existe. */
  #fab{bottom:calc(22px + var(--safe-bottom))!important;right:calc(20px + var(--safe-right))!important}
  /* Content padding respeta safe area */
  #content{padding-left:calc(16px + var(--safe-left))!important;padding-right:calc(16px + var(--safe-right))!important}
  /* Search bar más chico */
  .search-wrap{max-width:none;flex:1;min-width:0}
  .search-input{font-size:14px}
  /* Topbar user chip solo iniciales en móvil */
  .topbar-user-name{display:none}
  /* Notif y ayuda siempre visibles */
  .topbar-btn{width:32px;height:32px;flex-shrink:0}
}

/* Móvil pequeño: aún más compacto */
@media(max-width:480px){
  .topbar-title{font-size:14px;letter-spacing:-.005em}
  .search-input{padding:6px 10px 6px 30px;font-size:13px}
  #topbar{padding:0 10px}
}

/* Fix hmapa-grid en mobile — vino con width 421 fijo por bug */
@media(max-width:900px){
  .hmapa-wrap{width:100%;max-width:100%;overflow-x:hidden}
  .hmapa-grid{grid-template-columns:1fr!important;width:100%;max-width:100%}
  .hmapa-map{width:100%!important;height:min(55vh, 420px)!important;min-height:280px}
  .hmapa-toolbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hmapa-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hmapa-filters::-webkit-scrollbar{display:none}
  .hmapa-filter-btn{flex-shrink:0}
  .hmapa-route{max-height:340px}
  /* Modal edit stock full-width en móvil */
  .hmapa-modal-card{width:100%;max-width:100%;border-radius:14px 16px 0 0;position:fixed;bottom:0;left:0;right:0;padding-bottom:calc(20px + var(--safe-bottom))}
  .hmapa-modal-bg{align-items:flex-end;padding:0}
  @keyframes hmapa-modal-in{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
}

/* Dashboard cards en móvil — grid 2 columnas */
@media(max-width:640px){
  #content{padding:16px!important}
  /* Task rows más compactas */
  .task-row{padding:10px 12px}
  .task-row-title{font-size:13px}
  /* Gestión tables en móvil scroll horizontal */
  .ges-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ges-inp{min-width:100px}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST 2026 · Touch targets, sticky nav, safe-area, iOS zoom-fix
   Basado en Apple HIG (44×44 min) + WCAG 2.5.5 (24×24 min) +
   iOS 16pt zoom prevention (input font-size≥16px)
════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Inputs ≥16px para prevenir zoom automático iOS Safari al enfocar */
  input, select, textarea{font-size:16px!important}
  /* Excepciones: campos numéricos compactos que ya tenían >=14px son ok visualmente,
     pero se los subimos igual para consistencia */

  /* Stock spinner canastas — botones grandes, valores tabulares */
  .cn-stk-btn{min-width:40px;min-height:40px;font-size:14px;border-radius:8px}
  .cn-stk-val{min-width:58px;min-height:40px;font-size:17px}
  .cn-stock-inline{gap:4px;padding:4px;background:rgba(0,0,0,.28)}

  /* Tabs de unidad — touch friendly (specificity: .unit-seg-nav .unit-seg-btn wins otherwise) */
  .unit-seg-btn, .unit-seg-nav .unit-seg-btn{min-height:44px!important;font-size:13px;padding:10px 12px;letter-spacing:.01em}
  /* Cmap pill (canastas map filter) also to 44 */
  .cmap-pill{min-height:44px!important;padding:10px 14px}

  /* Botones generales — evitar targets diminutos */
  .cn-btn, .btn, button.icon-btn, .hmapa-filter-btn{min-height:40px}
  .cn-btn{padding:10px 12px;font-size:12px}

  /* Chip delete X ampliar tap area */
  .cn-chip-del{padding:6px 10px;font-size:20px;min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center}

  /* Card metadata legible */
  .cn-card-meta, .cn-chip-meta{font-size:11px}

  /* Safe-area iOS notch/home indicator */
  body{padding-bottom:env(safe-area-inset-bottom)}
  #topbar{padding-top:env(safe-area-inset-top)}

  /* Command palette — desactivar hint Cmd+K en mobile (no keyboard) */
  #cmdKHint, .cmd-hint-btn{display:none!important}

  /* Padding-bottom en contenido scrollable para no ser tapado por FAB (52px + 28 bottom + safe area) */
  #content{padding-bottom:calc(120px + var(--safe-bottom, 0px))!important}
  .unit-tab-content{padding-bottom:calc(120px + var(--safe-bottom, 0px))!important}

  /* Topbar mobile: layout compacto que SÍ cabe en 375-390px */
  #topbar{padding:0 8px!important;gap:6px}
  .topbar-title{display:none!important}  /* título ya está en h1 del content */
  .topbar-actions{gap:6px!important;flex-shrink:0}
  .topbar-btn{width:38px!important;height:38px!important;flex-shrink:0}
  .topbar-user-chip{padding:2px!important;flex-shrink:0;background:transparent!important;border:none!important}
  .topbar-user-avatar{width:34px!important;height:34px!important;font-size:13px}
  .search-wrap{min-width:0;flex:1;max-width:none}
  .search-input{width:100%}

  /* Sticky unit tabs — nav rápida en scroll largo */
  .unit-seg-wrap{position:sticky;top:0;z-index:20;background:rgba(6,10,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:8px 12px!important;margin:0 0 12px;border-bottom:1px solid rgba(255,255,255,.06)}
  .unit-seg-nav{padding:0}

  /* Notificaciones panel — full width mobile (position:fixed relative to viewport) */
  #notifPanel{position:fixed!important;top:64px!important;right:10px!important;left:10px!important;width:auto!important;max-width:calc(100vw - 20px)!important;max-height:calc(100vh - 80px);overflow-y:auto}

  /* Modals bottom-sheet mobile (patrón iOS/Instagram) */
  .cn-modal-card, .modal-card{border-radius:20px 20px 0 0;position:fixed!important;bottom:0;left:0;right:0;width:100%;max-width:100%;max-height:85vh;overflow-y:auto;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .cn-modal-bg, .modal-bg{align-items:flex-end;padding:0}

  /* Popup Leaflet — ancho legible + zoom controls tap-safe */
  .leaflet-popup-content-wrapper{max-width:calc(100vw - 32px)!important}
  .leaflet-popup-content{margin:12px 14px;font-size:13px}
  .leaflet-touch .leaflet-bar a{width:44px!important;height:44px!important;line-height:44px!important;font-size:20px!important}
  .leaflet-control-attribution{font-size:10px!important;padding:2px 6px!important}
  .leaflet-control-zoom{margin:12px!important}

  /* Dashboard KPIs — label 10.5→12, trend 10→11, sublabel 10→11 (legibles) */
  .dash-kpi{padding:16px 14px!important}
  .dash-kpi > div:first-child > div:first-child{font-size:11px!important;letter-spacing:.06em!important}
  .dash-kpi span[style*="font-size:10px"], .dash-kpi div[style*="font-size:10px"]{font-size:12px!important}
}

/* Round 3: fix específicos identificados en audit granular */
@media(max-width:768px){
  /* Dashboard asistencia (sbtn) — height 24→36 */
  .sbtn{min-width:36px!important;min-height:36px!important;padding:6px 10px!important}
  .horario-edit-btn{min-width:36px!important;min-height:36px!important}
  .accordion-add-btn{min-height:36px!important;padding:8px 12px!important}
  /* Loop pule #6: compactar topbar y add-btn mobile */
  #topbar{padding:0 12px!important;height:48px!important;gap:8px!important}
  .search-input{padding:8px 10px 8px 30px!important;min-height:40px!important;font-size:14px!important}
  .search-icon{left:8px!important;font-size:13px!important}
  .search-wrap{max-width:none!important}
  /* Loop pule #7: compactar modales y task-panel mobile */
  .modal-header{padding:14px 16px 12px!important}
  .modal-body{padding:14px 16px!important}
  .modal-footer{padding:12px 16px!important}
  .modal-title{font-size:15px!important}
  .panel-header{padding:14px 16px 12px!important}
  .panel-body{padding:16px 14px!important}
  .panel-task-title{font-size:17px!important;margin-bottom:10px!important}
  .inuit-empty{padding:32px 16px!important}
  .inuit-empty-icon{font-size:32px!important;margin-bottom:8px!important}
  .asist-nav-btn, .day-nav-btn{min-width:36px!important;min-height:36px!important}
  .vst-btn{min-height:36px!important;padding:8px 12px!important}
  .ventas-export{min-height:36px!important}
  .help-bubble-btn{position:fixed!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;right:16px!important;min-width:44px!important;min-height:44px!important;z-index:900}
  .cnc-add-btn{min-height:36px!important}

  /* Gestion — inputs y botones */
  .ges-inp{min-height:40px!important;padding:8px 10px!important;font-size:15px!important}
  .ges-btn-save{min-height:36px!important;padding:8px 14px!important}
  .ges-btn-del{min-width:40px!important;min-height:40px!important;font-size:16px!important}

  /* Tareas quick-add */
  .qa-send, .qa-input{min-height:40px!important;padding:9px 12px!important}
  .inuit-empty-btn.primary{min-height:40px!important}
}

/* iPhone SE / pantallas <400px — apretar más si es necesario */
@media(max-width:400px){
  #topbar{padding:0 8px}
  .topbar-title{font-size:13px}
  .unit-seg-btn{font-size:12px;padding:10px 8px}
  .cn-card{padding:10px}
}

/* ══════════════════════════════════════════════════════════════
   TRACK E2 · WCAG 2.2 AA + Apple HIG · Touch target 44×44 mínimo
   Override final: cualquier control interactivo debe cumplir 44px en mobile.
════════════════════════════════════════════════════════════════ */
@media(pointer:coarse), (max-width:768px){
  .topbar-btn, .burger-btn, .critica-cta,
  .sbtn, .horario-edit-btn, .accordion-add-btn,
  .asist-nav-btn, .day-nav-btn, .vst-btn,
  .ventas-export, .cnc-add-btn, .ges-btn-save, .ges-btn-del,
  .btn-sm, .qa-send, .rutas-btn-del, .viaje-add-btn{
    min-width:44px!important;
    min-height:44px!important;
  }
  /* Skip-link accesible pero visible-only-on-focus mantiene 44 */
  .skip-link{min-height:44px;display:inline-flex;align-items:center}
  /* Modales bottom-sheet: bump handle bar tap target */
  .modal-handle, .sheet-handle{padding:12px 0;min-height:20px}
}

/* Focus-visible global soft-glow (Apple HIG · WCAG 2.4.11) */
*:focus{outline:none}
*:focus-visible{
  outline:2px solid var(--ice, #67e8f9);
  outline-offset:2px;
  border-radius:inherit;
  box-shadow:0 0 0 4px rgba(103,232,249,.18);
  transition:box-shadow var(--dur-fast,150ms) var(--ease-out-quart,cubic-bezier(.25,1,.5,1));
}
/* Botones opacos: focus ring cyan-soft inset+outset */
.btn:focus-visible, .btn-primary:focus-visible, .btn-danger:focus-visible,
.topbar-btn:focus-visible, .burger-btn:focus-visible,
.tile:focus-visible, .sb-link:focus-visible{
  outline:2px solid var(--ice, #67e8f9);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(103,232,249,.22), 0 4px 12px rgba(0,0,0,.25);
}
/* Inputs & selects: ring integrado sin salto de layout */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none;
  border-color:var(--ice, #67e8f9);
  box-shadow:0 0 0 3px rgba(103,232,249,.18);
}
/* prefers-reduced-motion respeta usuarios que solicitan menos animación */
@media(prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ── Skeleton loader utility (shared) · aria-hidden en JS ── */
.skeleton{
  background:linear-gradient(90deg, var(--surf,#0f0f13) 0%, rgba(255,255,255,.06) 50%, var(--surf,#0f0f13) 100%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--r-sm,8px);
  color:transparent!important;
  user-select:none;
  pointer-events:none;
}
.skeleton-text{height:14px;margin:6px 0;border-radius:6px}
.skeleton-title{height:22px;margin:8px 0;width:60%;border-radius:8px}
.skeleton-card{height:80px;margin:8px 0;border-radius:var(--r-md,14px)}
.skeleton-avatar{width:44px;height:44px;border-radius:50%}
@keyframes skeleton-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media(prefers-reduced-motion:reduce){
  .skeleton{animation:none;opacity:.6}
}

/* ══════════════════════════════════════════════════════════════
   FASE 4 · Accesibilidad WCAG 2.2
════════════════════════════════════════════════════════════════ */
/* Skip link — visible al recibir focus con Tab */
.skip-link{
  position:absolute;top:-56px;left:8px;z-index:10000;
  padding:12px 20px;min-height:44px;display:inline-flex;align-items:center;
  background:var(--ice);color:var(--void);
  font-weight:600;border-radius:8px;text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{top:8px;outline:2px solid var(--ice-b);outline-offset:2px}

/* Contraste WCAG AA — cream-x subido de .32 a .55 (era 3.4:1, ahora 5.8:1) */
:root{ --cream-x:rgba(237,237,238,.55) }

/* Focus visible universal reforzado (Apple soft glow) */
:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,212,236,.28)}
button:focus-visible,a:focus-visible{box-shadow:0 0 0 4px rgba(0,212,236,.28)}

/* Screen-reader-only helper (para labels ocultos visualmente) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════════
   ADMIN CRUD · Gestión tables (Airtable-style inline edit)
════════════════════════════════════════════════════════════════ */
.ges-toolbar{display:flex;justify-content:flex-end;margin-bottom:14px}
.ges-section-label{font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--cream-x);margin:0 0 10px 4px}
.ges-table{width:100%;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;border-collapse:separate;border-spacing:0;font-size:13px}
.ges-table thead{background:var(--panel)}
.ges-table th{padding:10px 12px;text-align:left;font-weight:600;font-size:11px;color:var(--cream-x);letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.ges-table td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.ges-table tbody tr:last-child td{border-bottom:none}
.ges-table tbody tr:hover{background:var(--panel)}
.ges-inp{
  background:transparent;border:1px solid transparent;border-radius:6px;
  padding:6px 8px;color:var(--cream);font-family:inherit;font-size:13px;
  outline:none;width:100%;transition:border-color var(--ease),background var(--ease);
}
.ges-inp:hover{border-color:var(--line)}
.ges-inp:focus{border-color:var(--ice);background:var(--panel-2);box-shadow:var(--shadow-focus)}
.ges-inp:disabled{opacity:.5;cursor:not-allowed}
.ges-unit-chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:100px;
  font-size:11px;color:var(--cream-x);background:var(--panel);border:1px solid var(--line);
  cursor:pointer;user-select:none;transition:all var(--ease);
}
.ges-unit-chip.on{color:var(--ice);background:rgba(0,212,236,.10);border-color:rgba(0,212,236,.30)}
.ges-unit-chip input{display:none}
.ges-btn-save{
  background:var(--ice);color:var(--void);border:1px solid var(--ice);border-radius:6px;
  padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;
  transition:background var(--ease);margin-right:6px;
}
.ges-btn-save:hover{background:var(--ice-b)}
.ges-btn-del{
  background:transparent;border:1px solid var(--line);border-radius:6px;
  padding:5px 8px;font-size:13px;cursor:pointer;color:var(--cream-x);
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.ges-btn-del:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.40);color:#ef4444}
@media(max-width:640px){
  .ges-table{font-size:12px}
  .ges-table th,.ges-table td{padding:6px 8px}
  .ges-inp{padding:4px 6px;font-size:12px}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE AUDIT 2026-08-11 · Touch targets + safe-area + scroll
   Reglas late-cascade (win overrides), Apple/iOS best-practice
════════════════════════════════════════════════════════════════ */

/* Reusable horizontal-scroll wrapper para tablas anchas */
.table-scroll-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
  border-radius:var(--radius-lg);
}
.table-scroll-wrap table{ min-width:max-content }
.table-scroll-wrap::-webkit-scrollbar{ height:6px }
.table-scroll-wrap::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px }

@media(max-width:640px){
  /* ── Touch targets: mínimo 44px vertical en todo control interactivo ── */
  .inv-chip,
  .filter-tab,
  .tfs-btn,
  .qa-send,
  .cn-btn,
  .cnc-add-btn,
  .rutas-actions button,
  .hmapa-alerts-cta,
  .hmapa-edit-toggle,
  .inv-save-btn{
    min-height:44px;
  }
  /* Chips/pills siguen siendo cortas horizontalmente pero altas para tap */
  .inv-zonas .inv-chip{ min-height:38px }

  /* ── Modales: fits mobile viewport con dvh (dynamic vh, safari 100vh bug fix) ── */
  .cn-modal-card, .modal-card, .cn-modal, .sheet, .modal-panel{
    max-height:92dvh;
    max-width:100vw;
    border-radius:20px 20px 0 0;
  }

  /* ── Safe-area-inset para los elementos fijos de la esquina inferior.
     Ya no se descuenta ninguna barra inferior: la navegacion movil es un
     cajon lateral y no ocupa espacio permanente al pie. ── */
  #fab, .btn-fab, [class*="-fab"]{
    /* los 56px eran el hueco de la barra inferior retirada */
    bottom:calc(20px + env(safe-area-inset-bottom))!important;
    right:16px!important;
    z-index:950!important;  /* por encima de help-bubble y pwa-chip (z:900) */
  }
  /* Loop pule #9: repartir elementos fixed en esquina bottom-mobile
     Antes: help-bubble + fab + pwa-install-chip todos en right:22 → solapaban
     Ahora: help-bubble a la izquierda, pwa-chip arriba del FAB */
  .help-bubble-btn{
    left:16px!important;
    right:auto!important;
    /* los 56px eran el hueco de la barra inferior retirada */
    bottom:calc(20px + env(safe-area-inset-bottom))!important;
  }
  #pwa-install-chip{
    /* 84px = alto del boton flotante mas el hueco; los 56 de la barra fuera. */
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
    right:16px!important;
  }
  /* Toast global también sube por encima del home indicator */
  #toast, .toast{
    bottom:calc(24px + env(safe-area-inset-bottom))!important;
  }

  /* ── Grid tarjetas admin (4-col → 2-col mobile) ── */
  .usc-stats, .rb-metrics, .rv-metrics, .cmrb-metrics, .cmrb-toolbar{
    grid-template-columns:repeat(2,1fr)!important;
  }
}

@media(max-width:480px){
  /* Bajar a 1-col en pantallas muy chicas para KPIs largos */
  .rv-metrics, .cmrb-metrics{
    grid-template-columns:repeat(2,1fr)!important;
  }
  /* usc-stats admite col-2 aún a 480 (números cortos) */
}

/* ══════════════════════════════════════════════════════════════
   RUTAS DEL DÍA · Dispatcher board (Onfleet/Bringg pattern 2026)
════════════════════════════════════════════════════════════════ */
.rutas-wrap{display:flex;flex-direction:column;gap:14px}
.rutas-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.rutas-actions{display:flex;gap:8px;flex-wrap:wrap}
.rutas-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;
}
.rutas-summary-item{
  display:flex;flex-direction:column;
  padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;
}
.rutas-summary-item b{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--cream)}
.rutas-summary-item span{font-size:11px;color:var(--cream-x);font-weight:500}

/* Analytics dashboard (iter 11) */
.rutas-reportes{padding:16px 0}
.rr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.rr-title{font-size:18px;font-weight:700;margin:0;letter-spacing:-.01em}
.rr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px}
.rr-kpi{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.rr-kpi b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.rr-kpi span{font-size:11px;color:var(--cream-x);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.rr-section{margin-bottom:20px}
.rr-h4{font-size:13px;font-weight:700;color:var(--cream-x);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px 0}
.rr-chart-daily,.rr-chart-reasons{display:flex;flex-direction:column;gap:8px;padding:12px;background:rgba(0,0,0,.15);border-radius:14px}
.rr-bar-row{display:flex;align-items:center;gap:10px;font-size:12px}
.rr-bar-label{min-width:80px;color:var(--cream-x);font-weight:600}
.rr-bar-wrap{flex:1;height:14px;position:relative;background:rgba(255,255,255,.06);border-radius:8px;overflow:hidden}
.rr-bar-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#22d3ee,#16a34a);transition:width .5s cubic-bezier(.4,0,.2,1)}
.rr-bar-fill.rr-bar-skip{background:#eab308;left:auto;right:0}
.rr-bar-count{min-width:36px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.rr-empty-mini{text-align:center;color:var(--cream-x);padding:20px;font-size:12px}
.rr-table-wrap{overflow-x:auto}
.rr-table{width:100%;border-collapse:collapse;font-size:13px;background:rgba(0,0,0,.15);border-radius:14px;overflow:hidden}
.rr-table th,.rr-table td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.05)}
.rr-table th{background:rgba(255,255,255,.03);font-weight:700;color:var(--cream-x);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.rr-table td{font-weight:600}
.rr-table td:nth-child(4){color:#86efac}
.rr-loading{display:flex;flex-direction:column;gap:10px}
.rr-skel{height:80px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 100%);background-size:200% 100%;animation:rrShimmer 1.6s ease-in-out infinite}
@keyframes rrShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.rr-skel{animation:none}}
.rr-empty{text-align:center;padding:32px 16px;color:var(--cream-x)}
.rr-empty-icon{font-size:36px;opacity:.5;margin-bottom:10px}
.rr-empty-title{font-weight:600;font-size:14px;margin-bottom:6px}

.rutas-board{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.rutas-col{display:flex;flex-direction:column;gap:12px}
.rutas-col-head{
  background:var(--surf);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;border-left:4px solid transparent;
}
.rutas-vehiculo-dot{width:12px;height:12px;border-radius:50%}

.rutas-card{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px;display:flex;flex-direction:column;gap:12px;
  transition:border-color var(--ease),background var(--ease);
}
.rutas-card:hover{border-color:var(--line-s)}
.rutas-card[data-status="en_curso"]{background:linear-gradient(180deg,rgba(0,212,236,.05),rgba(0,212,236,0));border-color:rgba(0,212,236,.3)}
.rutas-card[data-status="completada"]{background:linear-gradient(180deg,rgba(34,197,94,.05),rgba(34,197,94,0));border-color:rgba(34,197,94,.3);opacity:.8}
.rutas-card-empty{border-style:dashed;background:transparent}
.rutas-card-empty-body{padding:20px;text-align:center;color:var(--cream-x);font-size:13px}
.rutas-card-empty-body small{font-size:11px;color:var(--cream-x);opacity:.7}

.rutas-card-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.ceta-strip{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 10px;background:rgba(0,212,236,.06);border:1px solid rgba(0,212,236,.18);
  border-radius:8px;font-size:11px;color:var(--cream-d);line-height:1.4;
}
/* Canastas Map Route Builder (paridad Hielos) */
.cmrb-panel{
  position:fixed;top:220px;right:16px;width:300px;max-height:calc(100vh - 240px);
  background:rgba(15,15,17,.98);border:1px solid rgba(251,146,60,.35);
  border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  z-index:9998;display:flex;flex-direction:column;overflow:hidden;
  backdrop-filter:blur(12px);font-family:'Inter',sans-serif;
  transition:width .22s cubic-bezier(.34,1.2,.64,1), max-height .22s ease;
}
.cmrb-panel.cmrb-collapsed{width:52px;max-height:52px}
.cmrb-panel.cmrb-collapsed > *:not(.cmrb-head){display:none}
.cmrb-panel.cmrb-collapsed .cmrb-head{padding:10px;border-bottom:none;background:transparent}
.cmrb-panel.cmrb-collapsed .cmrb-title,.cmrb-panel.cmrb-collapsed .cmrb-sub,.cmrb-panel.cmrb-collapsed .cmrb-close{display:none}
.cmrb-panel.cmrb-collapsed .cmrb-fold{display:flex}
.cmrb-fold{display:none;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;color:var(--cream);cursor:pointer;font-size:16px;border-radius:6px}
.cmrb-fold:hover{background:rgba(255,255,255,.06)}
.cmrb-fold-btn{background:transparent;border:none;color:var(--cream-x);cursor:pointer;padding:4px 8px;font-size:14px;border-radius:6px;margin-right:4px}
.cmrb-fold-btn:hover{background:rgba(255,255,255,.08);color:var(--cream)}
/* HEAD Apple-style — títulos densos, iconos alineados a la derecha */
.cmrb-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;background:linear-gradient(135deg,rgba(251,146,60,.12),transparent);border-bottom:1px solid rgba(255,255,255,.05);gap:8px}
.cmrb-head-txt{flex:1;min-width:0}
.cmrb-title{font-size:14px;font-weight:700;color:var(--cream);letter-spacing:-.015em;line-height:1.15}
.cmrb-sub{font-size:11px;color:var(--cream-x);margin-top:2px;font-weight:500;font-variant-numeric:tabular-nums}
.cmrb-icn{background:transparent;border:none;color:var(--cream-x);width:26px;height:26px;padding:0;border-radius:6px;font-size:14px;cursor:pointer;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.cmrb-icn:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.cmrb-panel.cmrb-collapsed .cmrb-icn{display:none}
/* SELECTORS row — más limpio, altura consistente */
.cmrb-selectors{display:flex;gap:6px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.03);align-items:center}
.cmrb-sel{flex:1;font-size:12px;padding:6px 8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--cream);font-family:inherit;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s}
.cmrb-sel:hover{border-color:rgba(251,146,60,.35);background:rgba(255,255,255,.08)}
.cmrb-sel:focus{outline:none;border-color:#fb923c;box-shadow:0 0 0 3px rgba(251,146,60,.15)}
.cmrb-sel-narrow{flex:none;width:96px}
.cmrb-warn{flex:1;font-size:11px;color:#f59e0b;padding:6px 10px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;font-weight:600}
/* METRICS — grid ajustado con destacado del total */
.cmrb-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.cmrb-metric{background:rgba(255,255,255,.03);border:1px solid transparent;padding:6px 4px;border-radius:8px;text-align:center;transition:background .12s}
.cmrb-metric b{display:block;font-size:15px;font-weight:800;color:var(--cream);font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em}
.cmrb-metric span{display:block;font-size:9px;color:var(--cream-f);font-weight:600;margin-top:2px;letter-spacing:.02em}
.cmrb-metric-total{background:linear-gradient(135deg,rgba(251,146,60,.18),rgba(251,146,60,.05));border-color:rgba(251,146,60,.3)}
.cmrb-metric-total b{color:#fdba74}
/* STATUS strip compacto — una sola línea con breakdown */
.cmrb-status{padding:6px 14px;font-size:11px;line-height:1.4;font-weight:500;border-bottom:1px solid rgba(255,255,255,.04)}
.cmrb-status b{color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums}
.cmrb-status-ok{background:rgba(34,197,94,.06);color:#86efac}
.cmrb-status-calc{background:rgba(59,130,246,.06);color:#93c5fd}
.cmrb-status-calc::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#3b82f6;margin-right:6px;animation:cmrbPulseCalc 1.2s infinite;vertical-align:middle}
@keyframes cmrbPulseCalc { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }
.cmrb-status-err{background:rgba(245,158,11,.08);color:#fbbf24;border-left:3px solid #f59e0b}
/* EMPTY state en stops list */
.cmrb-empty{padding:24px 16px;text-align:center;color:var(--cream-x)}
.cmrb-empty-icon{font-size:28px;margin-bottom:6px;opacity:.5}
.cmrb-empty-txt{font-size:11px;line-height:1.5}
.cmrb-empty-txt b{color:var(--cream);font-weight:700}
/* SERVICE TIME row en cada stop */
.cmrb-stop-service{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:10px;color:var(--cream-x)}
.cmrb-stop-service input{width:38px;padding:2px 4px;background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.25);border-radius:6px;color:#c4b5fd;font-size:10px;font-family:inherit;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cmrb-stop-service input::-webkit-outer-spin-button,.cmrb-stop-service input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cmrb-stop-service input:focus{outline:none;border-color:#a78bfa;background:rgba(167,139,250,.14)}
.cmrb-svc-unit{font-size:9px;color:var(--cream-f);font-weight:600}
.cmrb-item-chip{background:rgba(251,146,60,.15);padding:1px 6px;border-radius:100px;font-size:10px;color:#fb923c;font-weight:700;margin-right:3px;display:inline-block}
/* TOOLBAR con icon+label */
.cmrb-toolbar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.05)}
.cmrb-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--cream-d);font-size:10px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s,transform .12s,color .12s}
.cmrb-tool:hover:not(:disabled){background:rgba(251,146,60,.12);border-color:rgba(251,146,60,.35);color:var(--cream);transform:translateY(-1px)}
.cmrb-tool:disabled{opacity:.35;cursor:not-allowed}
.cmrb-tool-ico{font-size:15px}
.cmrb-tool-danger:hover:not(:disabled){background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#ef4444}
/* CTA primary + secondary */
.cmrb-cta{display:flex;gap:6px;padding:8px 14px 12px;border-top:1px solid rgba(255,255,255,.05)}
.cmrb-cta-secondary{flex:1;padding:9px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--cream-d);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .12s,color .12s}
.cmrb-cta-secondary:hover{background:rgba(255,255,255,.1);color:var(--cream)}
.cmrb-cta-primary{flex:1.4;padding:9px 12px;background:linear-gradient(135deg,#fb923c,#ea580c);border:none;border-radius:8px;color:#0a0a0b;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;transition:filter .12s,transform .12s;letter-spacing:.01em;box-shadow:0 2px 8px rgba(251,146,60,.25)}
.cmrb-cta-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.cmrb-cta-primary:disabled{opacity:.4;cursor:not-allowed;background:rgba(255,255,255,.08);color:var(--cream-f);box-shadow:none}
/* Floating controls sobre el mapa (bottom-left, Apple-like glass) */
.cmap-floating-controls{
  position:absolute;bottom:16px;left:16px;z-index:500;
  display:flex;flex-direction:column;gap:8px;pointer-events:auto;
}
.cmap-pill{
  padding:10px 16px;border-radius:100px;
  background:rgba(15,15,17,.92);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);
  color:var(--cream);font-size:12px;font-weight:700;font-family:'Inter',sans-serif;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4);
  display:inline-flex;align-items:center;gap:6px;
  transition:transform .15s cubic-bezier(.34,1.4,.64,1),background .15s;
}
.cmap-pill:hover{transform:translateY(-2px);background:rgba(25,25,27,.95)}
.cmap-pill.active{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:transparent;color:#0a0a0b}
/* Spinner overlay durante ORS fetch (posición absoluta sobre el mapa) */
.cmap-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:600;pointer-events:none;background:rgba(15,15,17,.94);backdrop-filter:blur(10px);border:1px solid rgba(251,146,60,.3);border-radius:14px;padding:14px 20px;box-shadow:0 12px 40px rgba(0,0,0,.6);animation:cmrbStopIn .2s ease-out}
.cmap-spinner-inner{display:flex;align-items:center;gap:12px;color:var(--cream);font-size:13px;font-weight:600;font-family:'Inter',sans-serif}
.cmap-spinner-ring{width:22px;height:22px;border:3px solid rgba(251,146,60,.25);border-top-color:#fb923c;border-radius:50%;animation:cmapSpin .8s linear infinite}
@keyframes cmapSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cmap-spinner-ring{animation:none;border-top-color:#fb923c;border-right-color:#fb923c}}
/* Actionable toast: agrega link config si HERE key missing */
.cmap-cfg-toast-btn{margin-left:10px;padding:4px 10px;background:#fb923c;color:#0a0a0b;border:none;border-radius:6px;font-weight:800;font-size:11px;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block}
.cmap-cfg-toast-btn:hover{background:#f97316}
.cmrb-metric{background:rgba(255,255,255,.04);border-radius:8px;padding:6px 4px;text-align:center}
.cmrb-metric b{display:block;font-size:14px;font-weight:800;color:#fb923c;font-variant-numeric:tabular-nums}
.cmrb-metric span{font-size:9px;color:var(--cream-f);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.cmrb-stops{flex:1;overflow-y:auto;padding:8px 10px;max-height:340px}
.cmrb-stop{display:flex;align-items:center;gap:8px;padding:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;margin-bottom:6px}
.cmrb-stop-num{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#0a0a0b;flex-shrink:0}
.cmrb-stop-body{flex:1;min-width:0}
.cmrb-stop-name{font-size:12px;font-weight:700;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmrb-stop-items{font-size:10px;color:#fb923c;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmrb-stop-btns{display:flex;gap:2px;flex-shrink:0}
.cmrb-btn-mini{background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:6px;width:22px;height:22px;padding:0;font-size:11px;color:var(--cream-d);cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,color .12s}
.cmrb-btn-mini:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--cream)}
.cmrb-btn-mini:disabled{opacity:.3;cursor:not-allowed}
.cmrb-btn-mini.cmrb-btn-danger:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);color:#ef4444}
.cmrb-actions{display:flex;gap:6px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.06)}
.cmrb-num-wrap{background:transparent;border:none}
.cmrb-num{width:26px;height:26px;border-radius:50%;background:#fb923c;color:#0a0a0b;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(251,146,60,.5);border:2px solid #fff;font-family:'Inter',sans-serif}
@media(max-width:900px){.cmrb-panel{width:calc(100vw - 32px);right:16px;left:16px;max-height:60vh;top:auto;bottom:16px}}
/* Popup contextual del marker (modo RB) */
.cmrb-pop{min-width:300px;width:340px;max-width:100%;background:transparent;color:var(--cream);font-family:'Inter',sans-serif;display:flex;flex-direction:column;max-height:min(70vh,540px)}
.cmrb-pop-head{padding:10px 12px 8px;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(135deg,rgba(251,146,60,.14),transparent);flex-shrink:0}
.cmrb-pop-title{font-size:13px;font-weight:800;color:var(--cream);line-height:1.2}
.cmrb-pop-sub{font-size:10px;color:var(--cream-x);margin-top:2px}
.cmrb-pop-body{padding:6px 4px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(251,146,60,.4) transparent}
.cmrb-pop-body::-webkit-scrollbar{width:8px}
.cmrb-pop-body::-webkit-scrollbar-thumb{background:rgba(251,146,60,.35);border-radius:6px}
.cmrb-pop-body::-webkit-scrollbar-track{background:transparent}
.cmrb-pop-actions{display:flex;gap:6px;padding:8px 10px;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.15)}
.cmrb-pop-btn{flex:1;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:var(--cream);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,color .12s}
.cmrb-pop-btn:hover{background:rgba(255,255,255,.1)}
.cmrb-pop-btn.cmrb-pop-btn-primary{background:#fb923c;color:#0a0a0b;border-color:#fb923c}
.cmrb-pop-btn.cmrb-pop-btn-primary:hover{background:#f97316}
.cmrb-pop-btn.cmrb-pop-btn-danger{background:transparent;color:#ef4444;border-color:rgba(239,68,68,.4)}
.cmrb-pop-btn.cmrb-pop-btn-danger:hover{background:rgba(239,68,68,.14)}
.cmrb-qbtn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:6px;width:24px;height:24px;padding:0;color:var(--cream);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;line-height:1;flex-shrink:0}
.cmrb-qbtn:hover{background:rgba(251,146,60,.18);border-color:#fb923c;color:#fb923c}
/* Estilo del popup Leaflet propio cuando abre desde RB */
.leaflet-popup-content-wrapper:has(.cmrb-pop){background:rgba(15,15,17,.98);color:var(--cream);border:1px solid rgba(251,146,60,.35);box-shadow:0 20px 60px rgba(0,0,0,.6);border-radius:14px;padding:0;max-width:none!important;width:auto!important}
.leaflet-popup-content:has(.cmrb-pop){margin:0;width:auto!important;max-height:none!important}
.leaflet-popup:has(.cmrb-pop){max-width:none!important}
.leaflet-popup-tip:has(+ .leaflet-popup-content-wrapper .cmrb-pop),.leaflet-popup:has(.cmrb-pop) .leaflet-popup-tip{background:rgba(15,15,17,.98)!important}
.leaflet-popup:has(.cmrb-pop) .leaflet-popup-close-button{color:var(--cream-x);font-size:20px;padding:4px 8px}
/* Mobile: popup ocupa 90vw para que se vean todos los inputs sin scroll horizontal */
@media(max-width:640px){.cmrb-pop{width:90vw;min-width:0;max-height:min(80vh,600px)}}
/* Polish Apple-like: ring naranja en marker cuando está en el viaje activo */
.hmapa-marker-inroute .hmapa-marker{
  border-color:#fb923c!important;
  box-shadow:0 0 0 3px rgba(251,146,60,.35), 0 0 12px rgba(251,146,60,.4);
  transform:scale(1.08);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
/* Slide-in animation en nueva parada agregada al panel */
@keyframes cmrbStopIn { from{opacity:0;transform:translateY(-6px) scale(.97)} to{opacity:1;transform:none} }
@keyframes cmrbStopOut { to{opacity:0;transform:translateX(20px) scale(.95)} }
.cmrb-stop{animation:cmrbStopIn .22s cubic-bezier(.34,1.2,.64,1)}
.cmrb-stop.cmrb-removing{animation:cmrbStopOut .18s ease-in forwards;pointer-events:none}
/* Undo toast: fixed a nivel body para persistir a través de rerenders del panel */
.cmrb-undo{
  position:fixed;bottom:24px;right:24px;width:320px;
  background:rgba(15,15,17,.98);border:1px solid rgba(251,146,60,.55);
  border-radius:8px;padding:10px 12px;font-size:12px;color:var(--cream);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:cmrbStopIn .18s ease-out;z-index:10001;
}
@media(max-width:900px){.cmrb-undo{left:16px;right:16px;width:auto;bottom:88px}}
.cmrb-undo-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmrb-undo-btn{background:#fb923c;color:#0a0a0b;border:none;border-radius:6px;padding:5px 12px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;flex-shrink:0}
.cmrb-undo-btn:hover{background:#f97316}
.cmrb-undo-bar{position:absolute;bottom:0;left:0;height:2px;background:#fb923c;border-radius:0 0 10px 10px;animation:cmrbUndoBar 6s linear forwards}
@keyframes cmrbUndoBar { from{width:100%} to{width:0} }
/* Reducir movimiento si el usuario lo prefiere (Apple HIG a11y) */
@media (prefers-reduced-motion:reduce){
  .cmrb-stop, .cmrb-undo, .hmapa-marker-inroute .hmapa-marker { animation:none!important; transition:none!important; transform:none!important }
  .cmrb-undo-bar{ animation:none; width:0 }
}
/* Optimistic polyline (dashed antes de que ORS responda) */
.leaflet-interactive.cmrb-poly-pending{ stroke-dasharray:8 6; opacity:.55 }
/* Focus ring uniforme en botones del panel (a11y) */
#cmrbPanel button:focus-visible, #cmrbPanel select:focus-visible{
  outline:2px solid #fb923c; outline-offset:2px; box-shadow:0 0 0 4px rgba(251,146,60,.2);
}
/* Keyboard shortcuts hint en el header del panel */
.cmrb-kbd{display:inline-block;padding:1px 5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:6px;font-family:'Inter',sans-serif;font-size:9px;color:var(--cream-d);margin-left:3px}
.ceta-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ceta-dot.ceta-live{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);animation:cetaPulse 1.6s ease-in-out infinite}
.ceta-dot.ceta-stale{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.ceta-dot.ceta-off{background:#6b7280;box-shadow:0 0 0 3px rgba(107,114,128,.15)}
@keyframes cetaPulse{0%,100%{opacity:1}50%{opacity:.55}}
.ceta-txt{font-weight:600;color:var(--cream)}
.ceta-sep{color:var(--cream-f);opacity:.5}
.ceta-eta{color:var(--cream-d)}
.ceta-eta b{color:#00d4ec;font-weight:700}
.rutas-util{display:flex;flex-direction:column;gap:6px}
.rutas-util-row{
  display:grid;grid-template-columns:44px 1fr 74px;align-items:center;gap:8px;font-size:11px;
}
.rutas-util-row span{color:var(--cream-x)}
.rutas-util-row b{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;color:var(--cream-d)}
.rutas-util-bar{height:6px;background:var(--panel);border-radius:3px;overflow:hidden}
.rutas-util-fill{height:100%;transition:width .3s ease}

.rutas-paradas{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;
  max-height:280px;overflow-y:auto;
}
.rutas-paradas li{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
}
.rutas-parada-num{
  min-width:22px;height:22px;padding:0 6px;border-radius:6px;
  background:var(--panel-2);color:var(--cream);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.rutas-parada-info{flex:1;min-width:0}
.rutas-parada-nombre{font-size:13px;font-weight:600;color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rutas-parada-sku{display:flex;gap:6px;margin-top:2px;font-size:11px;color:var(--cream-x)}
.rutas-parada-sku span{background:var(--void);padding:1px 6px;border-radius:100px;color:var(--cream-d);font-weight:600}

.rutas-card-actions{
  display:flex;gap:6px;padding-top:8px;border-top:1px solid var(--line);
}
.rutas-card-actions button{flex:1;font-size:12px;padding:7px 8px}

@media(max-width:900px){
  .rutas-board{grid-template-columns:1fr;gap:16px}
  .rutas-col{gap:10px}
  .rutas-summary{grid-template-columns:repeat(2,1fr)}
  .rutas-paradas{max-height:none}
}

/* Botón agregar viaje inline al final de columna */
.rutas-add-viaje{
  width:100%;padding:12px;
  background:transparent;border:1.5px dashed var(--line-s);border-radius:var(--radius-lg);
  color:var(--cream-x);font-size:13px;font-weight:500;font-family:inherit;
  cursor:pointer;
  transition:border-color var(--ease),color var(--ease),background var(--ease);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.rutas-add-viaje:hover:not(:disabled){
  border-color:var(--ice);color:var(--ice);background:rgba(0,212,236,.04);border-style:solid;
}
.rutas-add-viaje:disabled{opacity:.4;cursor:not-allowed;border-style:solid;border-color:var(--line)}
.rutas-add-viaje span{font-size:16px;font-weight:700}

/* Botón eliminar en card head */
.rutas-btn-del{
  background:transparent;border:1px solid var(--line);border-radius:6px;
  width:26px;height:26px;padding:0;
  color:var(--cream-x);font-size:12px;cursor:pointer;flex-shrink:0;
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.rutas-btn-del:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);color:#ef4444}

/* Edición manual de paradas */
.rutas-parada{position:relative}
.rutas-parada-btns{
  display:flex;gap:2px;opacity:.7;transition:opacity var(--ease);
}
.rutas-parada:hover .rutas-parada-btns{opacity:1}
/* Drag & drop */
.rutas-parada[draggable="true"]{cursor:grab}
.rutas-parada[draggable="true"]:active{cursor:grabbing}
.rutas-parada[draggable="true"] .rutas-parada-num{cursor:grab}
.rutas-parada-dragging{opacity:.4;transform:scale(.98)}
.rutas-parada-dragover{
  box-shadow:inset 0 3px 0 0 #00d4ec;
  background:rgba(0,212,236,.08)!important;
}
.rutas-list-dragover{
  outline:2px dashed rgba(0,212,236,.4);outline-offset:-2px;border-radius:8px;
  background:rgba(0,212,236,.03);
}
.rutas-p-btn{
  background:transparent;border:1px solid var(--line);border-radius:6px;
  width:22px;height:22px;padding:0;font-size:11px;
  color:var(--cream-d);cursor:pointer;
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.rutas-p-btn:hover:not(:disabled){background:var(--panel-2);color:var(--cream);border-color:var(--line-s)}
.rutas-p-btn:disabled{opacity:.3;cursor:not-allowed}
.rutas-p-btn.danger:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);color:#ef4444}

/* iter9 · dispatcher ve progreso delivery */
.rutas-parada-delivered{
  opacity:.65;
  background:linear-gradient(90deg,rgba(22,163,74,.1),transparent)!important;
  border-left:3px solid #16a34a!important;
}
.rutas-parada-done{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(22,163,74,.2);color:#86efac;
  padding:2px 8px;border-radius:20px;
  font-size:10px;font-weight:700;
  margin-left:auto;white-space:nowrap;
}
.rutas-progress{
  padding:8px 12px;background:rgba(255,255,255,.02);border-radius:8px;
  margin:8px 0;font-size:12px;
}
.rutas-progress-label{
  color:var(--cream-x);font-size:11px;margin-bottom:6px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.rutas-progress-bar{
  position:relative;
  height:6px;background:rgba(255,255,255,.08);
  border-radius:999px;overflow:hidden;
}
.rutas-progress-fill{
  position:absolute;top:0;left:0;
  height:100%;
  background:linear-gradient(90deg,#00d4ec,#16a34a);
  transition:width .4s cubic-bezier(.4,0,.2,1),left .4s cubic-bezier(.4,0,.2,1);
}
.rutas-progress-fill.rutas-progress-skip{background:#eab308}
/* iter10 · dispatcher ve skip/incident */
.rutas-parada-skipped{
  opacity:.7;
  background:linear-gradient(90deg,rgba(234,179,8,.1),transparent)!important;
  border-left:3px solid #eab308!important;
}
.rutas-parada-skip{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(234,179,8,.2);color:#fde047;
  padding:2px 8px;border-radius:20px;
  font-size:10px;font-weight:700;
  margin-left:auto;white-space:nowrap;cursor:help;
}

.rutas-add-parada{
  width:100%;padding:8px;
  background:transparent;border:1.5px dashed var(--line);border-radius:8px;
  color:var(--cream-x);font-size:12px;font-weight:500;font-family:inherit;
  cursor:pointer;
  transition:border-color var(--ease),color var(--ease),background var(--ease);
  margin-top:6px;
}
.rutas-add-parada:hover:not(:disabled){
  border-color:var(--ice);color:var(--ice);background:rgba(0,212,236,.04);border-style:solid;
}
.rutas-add-parada:disabled{opacity:.35;cursor:not-allowed}

/* Modal edición manual */
.rmod-body{padding:18px 22px;max-height:60vh;overflow-y:auto}
.rmod-hint{font-size:12px;color:var(--cream-x);margin:0 0 12px}
.rmod-hint b{color:var(--cream);font-weight:600}
.rmod-search{margin-bottom:10px}
.rmod-search input{
  width:100%;padding:9px 12px;background:var(--panel);border:1.5px solid var(--line);
  border-radius:8px;color:var(--cream);font-size:13px;font-family:inherit;outline:none;
}
.rmod-search input:focus{border-color:var(--ice);box-shadow:var(--shadow-focus)}
.rmod-options{display:flex;flex-direction:column;gap:6px}
.rmod-option{
  display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;cursor:pointer;
  transition:border-color var(--ease),background var(--ease);
}
.rmod-option:hover{background:var(--panel-2);border-color:var(--ice)}
.rmod-opt-name{font-size:13px;font-weight:600;color:var(--cream)}
.rmod-opt-city{font-size:11px;color:var(--cream-x);margin-top:1px}
.rmod-opt-need{font-size:11px;color:var(--ice);font-weight:600;padding:3px 8px;background:rgba(0,212,236,.08);border-radius:100px;white-space:nowrap}

/* Print — hide chrome, show data */
@media print{
  body{background:#fff!important;color:#000!important}
  #sidebar,#topbar,#fab,.hmapa-toolbar,.hmapa-route,#adminPassModal,#hmapaStockModal,#modals,#taskPanelBg,#taskPanel,#loginScreen,button.topbar-btn,.help-bubble-btn,#pwa-install-chip{display:none!important}
  #main{margin-left:0!important}
  #content{padding:0!important}
  .qs-card,.accordion,.unit-stat-card{box-shadow:none!important;border:1px solid #ccc!important;background:#fff!important;color:#000!important;page-break-inside:avoid}
  a{color:#000!important;text-decoration:underline!important}
  /* Loop pule #13: print-friendly Reportes
     Todos los accordions abiertos, filtros/botones ocultos, tablas legibles */
  .rep-acc,.inv-filters-collapse,.dash-activity-collapse{border:none!important;background:transparent!important}
  .rep-acc[open],.rep-acc{page-break-inside:avoid}
  .rep-acc>summary,.dash-activity-collapse>summary,.inv-filters-collapse>summary{display:none!important}
  .rep-acc>.rep-acc-body,.dash-activity-collapse>.activity-feed,.inv-filters-collapse>.inv-filters-collapse-inner{display:block!important;padding:0!important}
  details[open]{display:block!important}
  details:not([open])>*:not(summary){display:block!important}
  .rep-filters,.rep-filter-actions,.rep-btn-generate,.rep-btn-ghost,.inv-toolbar,.rep-predict-wa-btn,.rep-predict-reorder{display:none!important}
  .rep-card,.rep-kpi{box-shadow:none!important;border:1px solid #ccc!important;background:#fff!important;color:#000!important;page-break-inside:avoid;margin-bottom:14px!important}
  .rep-kpi-num,.rep-kpi-lbl,.rep-card-title,.rep-td-name,.rep-td-num{color:#000!important}
  .rep-table{border-collapse:collapse!important}
  .rep-table th,.rep-table td{border:1px solid #ccc!important;padding:6px 8px!important;font-size:11px!important;color:#000!important}
  .rep-table thead{background:#eee!important}
  .rep-chart-wrap svg{max-width:100%;height:auto}
  /* Ocultar loading/error/empty states al imprimir */
  .skel,.sr-only,.rep-empty-hero,.rep-error{display:none!important}
  @page{margin:1.5cm}
  @page:first{margin-top:2cm}
}

/* ══════════════════════════════════════════════════════════════
   INVENTARIOS · Apple-style dense table
════════════════════════════════════════════════════════════════ */
.inv-shell{padding:8px 4px 24px;color:var(--cream)}
.inv-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:12px 14px;margin:0 0 14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
/* Progressive disclosure para filtros secundarios en mobile
   Desktop: siempre abierto, summary oculto (nada cambia visualmente)
   Mobile: cerrado por default, tap para expandir */
.inv-filters-collapse{width:100%;flex:1 1 100%;margin:0}
.inv-filters-collapse>summary{list-style:none;cursor:pointer;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:none;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cream-d);min-height:44px;user-select:none;transition:background .18s}
.inv-filters-collapse>summary::-webkit-details-marker{display:none}
.inv-filters-collapse>summary::marker{display:none;content:''}
.inv-filters-collapse>summary:hover{background:rgba(255,255,255,.06);color:var(--cream)}
.inv-filters-collapse>summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(103,232,249,.4)}
.inv-filters-collapse-chev{width:14px;height:14px;transition:transform .28s cubic-bezier(.22,1,.36,1);flex-shrink:0}
.inv-filters-collapse[open] .inv-filters-collapse-chev{transform:rotate(90deg)}
.inv-filters-collapse-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:10px}
@media (max-width:640px){
  .inv-filters-collapse>summary{display:flex}
  .inv-filters-collapse:not([open]) .inv-filters-collapse-inner{display:none}
  .inv-filters-collapse-inner{padding-top:8px}
}
@media (min-width:641px){
  .inv-filters-collapse-inner{padding-top:0}
}
.inv-search{position:relative;flex:1 1 240px;max-width:360px}
.inv-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5;font-size:13px;pointer-events:none}
.inv-search-input{
  width:100%;padding:9px 12px 9px 32px;border-radius:8px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);
  color:var(--cream);font:inherit;font-size:14px;letter-spacing:-.01em;
  transition:border-color .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
.inv-search-input:focus{outline:none;border-color:var(--ice-b);box-shadow:0 0 0 2px rgba(0,212,236,.25)}
.inv-zonas{display:flex;gap:6px;flex-wrap:wrap}
.inv-chip{
  padding:6px 12px;border-radius:100px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);color:var(--cream-d);
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);
}
.inv-chip:hover{background:rgba(255,255,255,.06);color:var(--cream)}
.inv-chip.active{background:var(--ice-b);color:var(--void);border-color:var(--ice-b)}
.inv-legend{display:flex;align-items:center;gap:8px;margin-left:12px;font-size:11px;color:var(--cream-d);opacity:.85}
.inv-save-btn{margin-left:auto;padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--cream-d);font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-save-btn:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--cream)}
.inv-save-btn:active:not(:disabled){transform:scale(.97)}
.inv-save-btn:disabled{opacity:.5;cursor:default}
.inv-save-btn[data-dirty="1"]{background:linear-gradient(135deg,#f59e0b,#f97316);color:var(--void);border-color:transparent;box-shadow:0 4px 14px rgba(245,158,11,.35);animation:invSavePulse 2s ease-in-out infinite}
.inv-save-btn[data-dirty="1"]:hover{background:linear-gradient(135deg,#fbbf24,#fb923c);color:var(--void)}
@keyframes invSavePulse{0%,100%{box-shadow:0 4px 14px rgba(245,158,11,.35)}50%{box-shadow:0 4px 20px rgba(245,158,11,.55)}}
.inv-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:2px;vertical-align:middle}
.inv-dot-lo{background:#ef4444}.inv-dot-md{background:#eab308}.inv-dot-ok{background:#22c55e}.inv-dot-hi{background:#00d4ec}

.inv-tablewrap{
  overflow:auto;border-radius:14px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.inv-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.inv-th{
  position:sticky;top:0;z-index:2;text-align:left;
  padding:11px 14px;background:rgba(15,15,20,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--cream-d);user-select:none;
}
.inv-th.sortable{cursor:pointer;transition:color .15s}
.inv-th.sortable:hover{color:var(--cream)}
.inv-th.num{text-align:right}
.inv-row{transition:background .12s cubic-bezier(.4,0,.2,1)}
.inv-row:hover{background:rgba(255,255,255,.035)}
.inv-td{padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle}
.inv-td.num{text-align:right;font-variant-numeric:tabular-nums}
.inv-zbadge{
  display:inline-block;padding:2px 8px;border-radius:100px;
  background:rgba(0,212,236,.12);color:var(--ice-b);
  font-size:11px;font-weight:700;letter-spacing:.05em;
}
.inv-name-t{font-weight:600;letter-spacing:-.01em;color:var(--cream)}
.inv-name-s{font-size:11px;color:var(--cream-d);opacity:.72;margin-top:1px}
.inv-cell-ro{color:var(--cream-d);font-variant-numeric:tabular-nums}

.inv-stepper{
  display:inline-flex;align-items:center;gap:2px;
  padding:2px;border-radius:8px;background:rgba(0,0,0,.28);
  border:1px solid transparent;transition:border-color .18s, box-shadow .18s;
}
.inv-stepper:focus-within{border-color:var(--ice-b);box-shadow:0 0 0 2px rgba(0,212,236,.22)}
.inv-step-btn{
  width:26px;height:26px;border:none;border-radius:8px;
  background:transparent;color:var(--cream-d);
  font:inherit;font-size:15px;font-weight:600;line-height:1;
  cursor:pointer;transition:all .12s cubic-bezier(.4,0,.2,1);
}
.inv-step-btn:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.inv-step-btn:active{transform:scale(.94)}
.inv-cell-input{
  width:48px;padding:5px 4px;border:none;background:transparent;
  color:var(--cream);text-align:center;font:inherit;font-size:14px;
  font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em;
  -moz-appearance:textfield;
}
.inv-cell-input::-webkit-outer-spin-button,
.inv-cell-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inv-cell-input:focus{outline:none;color:var(--ice-b)}

/* ══════════════════════════════════════════════════════════════
   INVENTARIOS v3 — Apple HIG premium (frosted glass, spring, iOS pills)
   Bolsas readonly (Intelisis = single source of truth). Solo cap editable.
════════════════════════════════════════════════════════════════ */
:root{
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.22, 1, .36, 1);
}

/* KPI Row — frosted glass tiles con spring hover */
.inv-kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:4px 0 18px;
}
.inv-kpi-tile{
  position:relative;padding:18px 20px;border:0.5px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg,20px);text-align:left;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.20),
    0 8px 24px -12px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:6px;
  transition:transform 300ms var(--spring), border-color 250ms var(--spring-soft), box-shadow 300ms var(--spring-soft);
  will-change:transform;
}
@supports not (backdrop-filter: blur(30px)){
  .inv-kpi-tile{background:rgba(22,29,33,.92)}
}
button.inv-kpi-tile{cursor:pointer;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}
.inv-kpi-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 2px 4px rgba(0,0,0,.25),
    0 20px 40px -16px rgba(0,0,0,.45);
}
button.inv-kpi-tile:active{transform:translateY(0) scale(.98);transition-duration:120ms}
.inv-kpi-tile:focus-visible{outline:2px solid var(--ice,#4fb8c9);outline-offset:3px}
.inv-kpi-num{
  font:600 30px/1 -apple-system, "SF Pro Display", system-ui, sans-serif;
  letter-spacing:-.03em;color:var(--cream,#f5f5f4);
  font-variant-numeric:tabular-nums;
}
.inv-kpi-frac{font-size:16px;color:var(--cream-d,#a8a29e);font-weight:500;margin-left:2px;letter-spacing:-.01em}
.inv-kpi-lbl{
  font-size:12px;color:var(--cream-d,#a8a29e);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
.inv-kpi-crit.is-alert{
  border-color:rgba(239,68,68,.40);
  background:linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.03));
  box-shadow:
    inset 0 1px 0 rgba(255,150,150,.10),
    0 1px 2px rgba(0,0,0,.20),
    0 8px 24px -12px rgba(239,68,68,.35);
}
.inv-kpi-crit.is-alert .inv-kpi-num{color:#f87171}
.inv-kpi-crit.is-alert:hover{border-color:rgba(239,68,68,.60)}
.inv-kpi-sync .inv-kpi-num{color:#4ade80}
@media (prefers-reduced-motion:reduce){
  .inv-kpi-tile,.inv-kpi-tile:hover,button.inv-kpi-tile:active{transform:none;transition:none}
}
@media (max-width:640px){
  .inv-kpi-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
  .inv-kpi-tile{padding:14px 16px;border-radius:var(--r-md,14px)}
  .inv-kpi-num{font-size:24px}
}

/* Badge Fuente — "En vivo" con pulse orgánico */
.inv-src-cell{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.src-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:999px;font:600 11px/1.4 -apple-system, "SF Pro Text", system-ui, sans-serif;
  letter-spacing:.01em;transition:all 250ms var(--spring-soft);
}
.src-erp{
  background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,197,94,.08));
  color:#4ade80;border:0.5px solid rgba(34,197,94,.30);
  box-shadow:inset 0 1px 0 rgba(134,239,172,.15);
}
.src-none{background:rgba(234,179,8,.12);color:#facc15;border:0.5px solid rgba(234,179,8,.24)}
.src-pulse{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:src-pulse 2s ease-out infinite;
}
@keyframes src-pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}
  70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
@media (prefers-reduced-motion:reduce){ .src-pulse{animation:none} }
.src-time{font-size:11px;color:var(--cream-d,#a8a29e);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Cell live (bolsas readonly desde Intelisis) — subtle premium look */
.inv-cell-ro{
  display:inline-block;padding:5px 10px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;color:var(--cream,#f5f5f4);
}
.inv-cell-live{
  position:relative;color:var(--cream,#f5f5f4);
  background:rgba(255,255,255,.02);border-radius:var(--r-sm,8px);
  transition:background 200ms var(--spring-soft);
}
.inv-cell-live:hover{background:rgba(255,255,255,.05)}
.inv-cell-live::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:60%;background:#4ade80;border-radius:2px;opacity:.6;
}

/* Chip counter — iOS pill style */
.inv-chip-count{
  display:inline-block;margin-left:6px;padding:1px 7px;
  border-radius:999px;background:rgba(255,255,255,.10);
  font-size:10px;font-weight:700;color:var(--cream-d,#a8a29e);
  font-variant-numeric:tabular-nums;
}
.inv-chip.active .inv-chip-count{background:rgba(0,0,0,.28);color:var(--cream,#f5f5f4)}

/* Row hover — subtle lift, no full highlight */
.inv-row{transition:background 200ms var(--spring-soft)}
.inv-row:hover{background:rgba(255,255,255,.025)}
.inv-row[data-lvl="lo"]{background:linear-gradient(90deg, rgba(239,68,68,.10), transparent 50%)}
.inv-row[data-lvl="lo"]:hover{background:linear-gradient(90deg, rgba(239,68,68,.14), rgba(255,255,255,.02) 50%)}
.inv-row[data-lvl="md"]{background:linear-gradient(90deg, rgba(234,179,8,.07), transparent 50%)}
.inv-row[data-lvl="md"]:hover{background:linear-gradient(90deg, rgba(234,179,8,.11), rgba(255,255,255,.02) 50%)}

/* Bar fill — subtle shine sweep (Apple pill vibe) */
.inv-bar-fill{position:relative;overflow:hidden}
.inv-bar-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform:translateX(-100%);
}
.inv-row:hover .inv-bar-fill::after{
  animation:bar-shine 1.2s var(--spring-soft) forwards;
}
@keyframes bar-shine{ to { transform:translateX(100%) } }
@media (prefers-reduced-motion:reduce){ .inv-bar-fill::after{display:none} }

@media (max-width:640px){
  .src-time{display:none}
  .inv-src-cell{gap:6px}
}

/* ══════════════════════════════════════════════════════════════
   TEQUILA INVENTARIO — Apple HIG premium
   Matriz sticky col con producto grande + código chico
   Header almacenes con nombre + código, Top 5 hero cards, chips familia
════════════════════════════════════════════════════════════════ */
.tq-shell{color:var(--cream)}

/* Top 5 hero cards — Apple large-title inspired */
.tq-top-section{margin:0 0 16px}
.tq-top-title{
  font:600 12px/1.4 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d,#a8a29e);text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 10px;
}
.tq-top-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:10px}
.tq-top-card{
  padding:14px 14px 12px;border:0.5px solid rgba(255,255,255,.10);
  border-radius:var(--r-md,14px);cursor:pointer;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px -8px rgba(0,0,0,.35);
  transition:transform 300ms var(--spring, cubic-bezier(.34,1.56,.64,1)), border-color 250ms, box-shadow 300ms;
  display:flex;flex-direction:column;gap:6px;
}
.tq-top-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px -12px rgba(0,0,0,.45)}
.tq-top-card:active{transform:translateY(0) scale(.98);transition-duration:120ms}
.tq-top-rank{font-size:18px;line-height:1}
.tq-top-name{font:600 13.5px/1.25 -apple-system, "SF Pro Text", system-ui;letter-spacing:-.01em}
.tq-top-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--cream-d,#a8a29e);font-variant-numeric:tabular-nums}
.tq-top-code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:999px;font-weight:600}
.tq-top-val{font-weight:700;color:var(--cream);letter-spacing:-.01em}
.tq-top-pct{margin-left:auto;opacity:.7}
@media (max-width:900px){ .tq-top-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .tq-top-grid{grid-template-columns:1fr} }

/* Matriz — scroll horizontal + sticky col + sticky header */
.tq-matriz-wrap{max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;border-radius:var(--r-md,14px);border:0.5px solid rgba(255,255,255,.06)}
.tq-matriz{min-width:900px;font-size:13px;border-collapse:separate;border-spacing:0}
.tq-matriz thead th{
  position:sticky;top:0;z-index:3;
  background:linear-gradient(180deg, rgba(22,29,33,.98), rgba(22,29,33,.92));
  backdrop-filter:blur(16px);border-bottom:0.5px solid rgba(255,255,255,.10);
  padding:10px 8px;
}
.tq-matriz th, .tq-matriz td{padding:9px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tq-matriz .tq-sticky-col{
  position:sticky;left:0;z-index:2;
  background:linear-gradient(90deg, rgba(22,29,33,.99) 94%, transparent);
  min-width:240px;max-width:280px;text-align:left;padding-left:14px;
}
.tq-matriz thead .tq-sticky-col{z-index:4;background:linear-gradient(180deg, rgba(22,29,33,.99), rgba(22,29,33,.94))}

/* Product cell (sticky col en matriz + primera col en lista): descripción grande + código chico */
.tq-sku-cell,.tq-prod-cell{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.tq-sku-desc-lg{
  font:600 14px/1.3 -apple-system, "SF Pro Display", system-ui;
  letter-spacing:-.015em;white-space:normal;word-break:break-word;
}
.tq-sku-code-sm{
  font:500 10.5px/1.4 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d,#a8a29e);letter-spacing:.02em;
}

/* Header de almacén (matriz): nombre arriba + código chico abajo */
.tq-alm-th{text-align:center;min-width:88px;vertical-align:bottom}
.tq-alm-name{
  font:600 11.5px/1.25 -apple-system, "SF Pro Text", system-ui;
  letter-spacing:-.005em;white-space:normal;max-width:88px;margin:0 auto 3px;
}
.tq-alm-code{
  display:inline-block;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.08);font-size:10px;font-weight:700;
  color:var(--cream-d,#a8a29e);letter-spacing:.05em;
}

.tq-cell-zero{color:var(--cream-d,#a8a29e);opacity:.30}
.tq-cell-low{color:#facc15;font-weight:600}
.tq-matriz tbody tr:hover .tq-sticky-col{background:linear-gradient(90deg, rgba(255,255,255,.04) 94%, transparent)}

.tq-fam-chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
  border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;
  border:0.5px solid rgba(255,255,255,.10);
}

/* Lista: producto cell más ancho para descripción grande */
.tq-prod-cell{min-width:280px;padding:10px 8px 10px 14px}

/* ══════════════════════════════════════════════════════════════
   TEQUILA MAPA — split view: Leaflet 60% + grid productos 40%
════════════════════════════════════════════════════════════════ */
.tq-map-shell{
  display:flex;flex-direction:column;gap:12px;
  height:calc(100vh - 200px);min-height:520px;color:var(--cream);
}
.tq-map-toolbar{
  display:flex;align-items:center;gap:10px;padding:6px 0;flex-wrap:wrap;
}
.tq-map-search{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);border:0.5px solid rgba(255,255,255,.14);
  border-radius:999px;padding:10px 16px;min-width:240px;min-height:44px;
  transition:border-color 200ms, background 200ms;
}
.tq-map-search:focus-within{
  border-color:rgba(103,232,249,.55);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(103,232,249,.14);
}
.tq-map-search input{
  background:transparent;border:0;color:var(--cream);font:inherit;font-size:14px;outline:none;flex:1;min-height:24px;
}
.tq-map-search input::placeholder{color:var(--cream-f,rgba(237,237,238,.48))}
.tq-map-status{
  display:inline-flex;align-items:center;gap:6px;
  font:600 12.5px/1.4 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d,#a8a29e);letter-spacing:.01em;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.04);
  border:0.5px solid rgba(255,255,255,.06);
}
.tq-map-status[data-mode="filtered"]{
  color:var(--tequilera,#d4a84d);
  background:rgba(212,168,77,.10);
  border-color:rgba(212,168,77,.24);
}
#tqMapReset{min-height:44px;padding:10px 18px}

.tq-map-body{
  display:grid;grid-template-columns:1fr 340px;gap:16px;min-height:0;flex:1;
}
.tq-map-canvas-wrap{
  border-radius:var(--r-lg,20px);overflow:hidden;
  border:0.5px solid rgba(255,255,255,.10);
  min-height:400px;background:#0f1416;
}
.tq-leaflet-map{width:100%;height:100%;min-height:400px}

.tq-map-sidebar{
  display:flex;flex-direction:column;gap:8px;min-height:0;
  background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:0.5px solid rgba(255,255,255,.08);border-radius:var(--r-lg,20px);
  padding:14px;overflow:hidden;
}
.tq-map-sidebar-title{
  font:600 14px/1.3 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream);letter-spacing:-.01em;
}
.tq-map-sidebar-sub{
  font-size:11px;color:var(--cream-d,#a8a29e);margin:-4px 0 6px;
}
.tq-product-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  overflow-y:auto;overflow-x:hidden;flex:1;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
.tq-product-grid::-webkit-scrollbar{width:6px}
.tq-product-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
.tq-product-card{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 6px 10px;border:0.5px solid rgba(255,255,255,.08);
  border-radius:var(--r-md,14px);cursor:pointer;text-align:center;
  background:rgba(255,255,255,.02);color:inherit;font:inherit;
  transition:transform 200ms var(--spring, cubic-bezier(.34,1.56,.64,1)), border-color 200ms, background 200ms;
}
.tq-product-card:hover{
  transform:translateY(-2px);border-color:rgba(255,255,255,.20);
  background:rgba(255,255,255,.05);
}
.tq-product-card:active{transform:translateY(0) scale(.97);transition-duration:100ms}
.tq-product-card.is-selected{
  border-color:#0ea5e9;background:rgba(14,165,233,.10);
  box-shadow:0 0 0 3px rgba(14,165,233,.20);
}
.tq-product-img{
  width:64px;height:64px;object-fit:contain;
  background:rgba(255,255,255,.04);border-radius:8px;
  padding:4px;
}
.tq-product-name{
  font:500 10.5px/1.25 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream);letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  max-height:26px;
}
.tq-product-total{
  font:700 10px/1 -apple-system, "SF Pro Text", system-ui;
  color:#4ade80;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  margin-top:1px;
}

/* Mobile: mapa arriba + sidebar productos abajo (respirable) */
@media (max-width:900px){
  .tq-map-shell{height:auto;min-height:0;gap:10px}
  .tq-map-body{grid-template-columns:1fr;gap:12px}
  .tq-map-sidebar{
    max-height:none;
    padding:14px 12px;
    /* Sidebar completa visible sin scroll interno agresivo */
  }
  .tq-product-grid{
    /* 2 columnas — cards más grandes, más fáciles de tocar */
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    max-height:360px; /* grid scrollable dentro del sidebar */
  }
  .tq-product-card{padding:10px 8px 12px}
  .tq-product-img{width:56px;height:56px}
  .tq-product-name{font-size:12px;max-height:30px;-webkit-line-clamp:2}
  .tq-leaflet-map{min-height:340px}
  .tq-map-canvas-wrap{order:-1}
  .tq-map-toolbar{gap:8px}
  .tq-map-search{min-width:0;flex:1 1 100%}
  #tqMapReset{flex:1 1 auto}
  .tq-map-status{flex:1 1 100%;justify-content:center;text-align:center}
  .tq-unlocated{max-height:220px}
  .tq-map-sidebar-title{font-size:13px}
  .tq-map-sidebar-sub{font-size:11px;margin:-2px 0 8px;color:var(--cream-d,#a8a29e)}
}

/* Pin Leaflet — asegurar tap area 44px sin cambiar visual */
.tq-pin{
  min-width:44px !important;min-height:44px !important;
  display:flex !important;align-items:center;justify-content:center;
  margin-left:-22px !important;margin-top:-22px !important;
}

/* Leaflet controls dark theme override */
.leaflet-container{background:#0f1416}
.leaflet-control-attribution{
  background:rgba(15,20,22,.85) !important;color:#a8a29e !important;
  font-size:9px !important;padding:2px 6px !important;border-radius:6px !important;
}
.leaflet-control-attribution a{color:#67e8f9 !important}
.leaflet-popup-content-wrapper{
  background:#fff !important;border-radius:14px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.5) !important;
}
.leaflet-popup-tip{background:#fff !important}
.leaflet-control-zoom a{
  background:rgba(22,29,33,.90) !important;color:#fff !important;
  border-color:rgba(255,255,255,.15) !important;
}
.leaflet-control-zoom a:hover{background:rgba(30,40,45,.95) !important}

/* ══════════════════════════════════════════════════════════════
   TEQUILA — panel "Sin ubicar" + Modal ubicación (Apple luxury)
════════════════════════════════════════════════════════════════ */
.tq-unlocated{
  margin-top:10px;padding-top:12px;
  border-top:0.5px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:6px;
  max-height:400px;overflow:hidden;
}
.tq-unlocated-empty{
  font-size:12px;color:var(--aur-g, #4ade80);
  padding:8px 4px;text-align:center;
}
.tq-unlocated-header{
  display:flex;justify-content:space-between;align-items:center;
  font:600 12px/1.3 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream, #f5f5f4);letter-spacing:.02em;
}
.tq-unlocated-count{
  background:rgba(234,179,8,.16);color:#facc15;
  padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.tq-unlocated-sub{
  font-size:11px;color:var(--cream-d, #a8a29e);
  margin:-4px 0 4px;line-height:1.4;
}
.tq-unlocated-list{
  display:flex;flex-direction:column;gap:4px;
  overflow-y:auto;flex:1;padding-right:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent;
}
.tq-unlocated-list::-webkit-scrollbar{width:5px}
.tq-unlocated-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.tq-unlocated-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border-radius:var(--r-sm, 8px);
  border:0.5px dashed rgba(234,179,8,.24);
  background:rgba(234,179,8,.05);cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  min-height:52px;
  transition:border-color 200ms, background 200ms, transform 150ms var(--spring, ease);
}
.tq-unlocated-item:hover{
  border-color:rgba(234,179,8,.50);
  background:rgba(234,179,8,.10);
  transform:translateY(-1px);
}
.tq-unlocated-item:active{transform:translateY(0) scale(.98)}
.tq-unlocated-code{
  background:rgba(255,255,255,.10);padding:1px 6px;border-radius:999px;
  font:700 10px/1.4 -apple-system, "SF Pro Text", system-ui;
  color:#facc15;letter-spacing:.02em;
}
.tq-unlocated-name{
  font:600 12px/1.3 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream, #f5f5f4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:block;
}
.tq-unlocated-body{
  display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden;
}
.tq-unlocated-stats{
  font:500 10.5px/1.3 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d, #a8a29e);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  display:block;
}
.tq-unlocated-stats b{color:var(--cream, #f5f5f4);font-weight:700}
.tq-unlocated-valor{color:#facc15;font-weight:700}
.tq-unlocated-icon{
  color:#facc15;font-size:16px;font-weight:400;line-height:1;
  padding:0 2px;
}

/* Modal ubicación — Apple luxury full-screen sheet */
.tq-loc-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.tq-loc-modal.is-open{display:flex;animation:tqModalIn .3s var(--spring-soft, ease)}
@keyframes tqModalIn{
  from{opacity:0}
  to{opacity:1}
}
.tq-loc-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
}
.tq-loc-card{
  position:relative;z-index:1;
  width:100%;max-width:640px;max-height:92vh;
  background:linear-gradient(180deg, rgba(30,35,42,.98), rgba(22,29,33,.98));
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:0.5px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl, 28px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;flex-direction:column;overflow:hidden;
  animation:tqCardIn .35s var(--spring, cubic-bezier(.34,1.56,.64,1));
}
@keyframes tqCardIn{
  from{transform:scale(.94) translateY(20px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.tq-loc-header{
  padding:18px 22px 16px;border-bottom:0.5px solid rgba(255,255,255,.06);
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.tq-loc-title{
  font:700 20px/1.2 -apple-system, "SF Pro Display", system-ui;
  color:var(--cream, #f5f5f4);letter-spacing:-.02em;
}
.tq-loc-subtitle{
  font:500 12.5px/1.4 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d, #a8a29e);margin-top:3px;
}
.tq-loc-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.08);border:0;color:var(--cream, #f5f5f4);
  cursor:pointer;font-size:14px;line-height:1;
  transition:background 180ms, transform 150ms var(--spring, ease);
}
.tq-loc-close:hover{background:rgba(255,255,255,.14);transform:scale(1.08)}
.tq-loc-close:active{transform:scale(.94)}
.tq-loc-body{padding:18px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;flex:1;min-height:0}
.tq-loc-step{display:flex;flex-direction:column;gap:8px}
.tq-loc-label{
  font:600 11.5px/1.3 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d, #a8a29e);text-transform:uppercase;letter-spacing:.06em;
}
.tq-loc-search{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);border:0.5px solid rgba(255,255,255,.10);
  border-radius:var(--r-md, 14px);padding:10px 14px;
  transition:border-color 200ms;
}
.tq-loc-search:focus-within{border-color:var(--ice, #4fb8c9);box-shadow:0 0 0 3px rgba(103,232,249,.15)}
.tq-loc-search input{
  background:transparent;border:0;color:var(--cream);font:inherit;font-size:14px;outline:none;flex:1;
}
.tq-loc-suggestions{
  display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto;
}
.tq-loc-sugg{
  display:flex;align-items:flex-start;gap:8px;padding:8px 10px;
  background:transparent;border:0;color:var(--cream);text-align:left;
  border-radius:var(--r-sm, 8px);cursor:pointer;font:inherit;font-size:13px;line-height:1.35;
  transition:background 180ms;
}
.tq-loc-sugg:hover{background:rgba(255,255,255,.06)}
.tq-loc-sugg-icon{opacity:.7;flex-shrink:0}
.tq-loc-sugg-text{overflow:hidden;text-overflow:ellipsis}
.tq-loc-empty,.tq-loc-loading{
  font-size:12px;color:var(--cream-d, #a8a29e);padding:8px 10px;
}
.tq-loc-mini-map{
  height:260px;width:100%;
  border-radius:var(--r-md, 14px);overflow:hidden;
  border:0.5px solid rgba(255,255,255,.08);background:#0f1416;
}
.tq-loc-selected{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:linear-gradient(135deg, rgba(14,165,233,.10), rgba(14,165,233,.03));
  border:0.5px solid rgba(14,165,233,.30);border-radius:var(--r-md, 14px);
}
.tq-loc-selected-icon{font-size:20px;flex-shrink:0}
.tq-loc-selected-info{min-width:0;flex:1}
.tq-loc-selected-label{
  font:600 10.5px/1.3 -apple-system, "SF Pro Text", system-ui;
  color:var(--ice, #4fb8c9);text-transform:uppercase;letter-spacing:.06em;
}
.tq-loc-selected-addr{
  font:500 12.5px/1.35 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream, #f5f5f4);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.tq-loc-footer{
  padding:14px 22px 18px;border-top:0.5px solid rgba(255,255,255,.06);
  display:flex;justify-content:flex-end;gap:8px;
}
.tq-loc-btn-ghost,.tq-loc-btn-primary{
  min-height:40px;padding:0 20px;border-radius:999px;font:600 13px/1.3 -apple-system, "SF Pro Text";
  cursor:pointer;transition:all 200ms var(--spring, ease);
}
.tq-loc-btn-ghost{
  background:transparent;color:var(--cream);border:0.5px solid rgba(255,255,255,.14);
}
.tq-loc-btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.tq-loc-btn-primary{
  background:linear-gradient(180deg, #0ea5e9, #0284c7);color:#fff;border:0;
  box-shadow:0 4px 12px -2px rgba(14,165,233,.5);
}
.tq-loc-btn-primary:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 6px 18px -2px rgba(14,165,233,.65)}
.tq-loc-btn-primary:active:not([disabled]){transform:translateY(0) scale(.97)}
.tq-loc-btn-primary[disabled]{opacity:.5;cursor:not-allowed}
@keyframes tqPinBounce{
  0%{transform:translateY(-16px);opacity:0}
  60%{transform:translateY(2px);opacity:1}
  100%{transform:translateY(0)}
}
@media (max-width:640px){
  .tq-loc-modal{padding:12px}
  .tq-loc-card{max-height:96vh}
  .tq-loc-mini-map{height:200px}
}
@media (prefers-reduced-motion:reduce){
  .tq-loc-modal.is-open,.tq-loc-card{animation:none}
}

/* Scroll fade sides — indicador visual de más contenido a los lados */
.tq-matriz-wrap{position:relative}
.tq-matriz-wrap::before,.tq-matriz-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;z-index:5;
  transition:opacity 250ms var(--spring-soft,ease);
}
.tq-matriz-wrap::before{left:0;background:linear-gradient(90deg, rgba(15,20,22,.6), transparent);opacity:0}
.tq-matriz-wrap::after{right:0;background:linear-gradient(-90deg, rgba(15,20,22,.6), transparent)}
.tq-matriz-wrap.scrolled::before{opacity:1}

/* ══════════════════════════════════════════════════════════════
   VISTA CUADRÍCULA — carrusel horizontal Apple-style
   Desktop: 3 filas × N cols con scroll-snap (evita scroll vertical largo)
   Mobile:  grid vertical tradicional auto-fill
════════════════════════════════════════════════════════════════ */
.tq-cuadricula-wrap{
  position:relative;margin:0 0 12px;
  max-width:100%;min-width:0;width:100%;
  contain:layout;
}
/* Fix crítico: flex children (main, content) tienen min-width:auto por default → expanden.
   Forzar min-width:0 en toda la cadena permite que overflow-x:auto interno funcione. */
#main,#content,.unit-tab-content,#tequilaInventario,#tqContent,.tq-shell{min-width:0;max-width:100%}
.tq-cuadricula-wrap::before,.tq-cuadricula-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:32px;pointer-events:none;z-index:5;
  transition:opacity 250ms var(--spring-soft, ease);
}
.tq-cuadricula-wrap::before{
  left:0;background:linear-gradient(90deg, rgba(15,20,22,.7), transparent);opacity:0;
}
.tq-cuadricula-wrap::after{
  right:0;background:linear-gradient(-90deg, rgba(15,20,22,.7), transparent);
}
.tq-cuadricula-wrap[data-scrolled="1"]::before{opacity:1}
.tq-cuadricula-wrap[data-scrolled="end"]::after{opacity:0}

.tq-cuadricula-grid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:290px;
  grid-template-rows:repeat(3, auto);
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-padding:0 14px;
  padding:2px 14px 16px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.20) transparent;
  -webkit-overflow-scrolling:touch;
  /* Fix crítico: forzar max-width viewport para activar overflow interno */
  max-width:100%;width:100%;min-width:0;
  box-sizing:border-box;
}
.tq-cuadricula-grid::-webkit-scrollbar{height:8px;background:transparent}
.tq-cuadricula-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
.tq-cuadricula-grid::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

/* Cards en carrusel: scroll snap por card */
.tq-cuadricula-grid > .tq-alm-card{scroll-snap-align:start}

/* Nav buttons (◀ ▶) — desktop only */
.tq-cuadricula-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:40px;height:40px;border-radius:999px;
  border:0.5px solid rgba(255,255,255,.14);
  background:rgba(22,29,33,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:var(--cream);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
  transition:opacity 200ms, transform 200ms var(--spring, ease), background 200ms;
  opacity:0;
}
.tq-cuadricula-wrap:hover .tq-cuadricula-nav{opacity:1}
.tq-cuadricula-nav:hover{background:rgba(30,40,45,.95);transform:translateY(-50%) scale(1.08)}
.tq-cuadricula-nav:active{transform:translateY(-50%) scale(.95)}
.tq-cuadricula-nav.prev{left:6px}
.tq-cuadricula-nav.next{right:6px}
.tq-cuadricula-nav[disabled]{opacity:0 !important;pointer-events:none}
@media (hover:none){.tq-cuadricula-nav{display:none}}

/* Mobile: vuelve a grid vertical tradicional (más compacto) */
@media (max-width:900px){
  .tq-cuadricula-grid{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-flow:row;
    grid-template-rows:none;
    grid-auto-columns:auto;
    overflow:visible;
    scroll-snap-type:none;
    padding:0;
    gap:10px;
  }
  .tq-cuadricula-wrap::before,.tq-cuadricula-wrap::after,.tq-cuadricula-nav{display:none}
  /* Cards más compactas en mobile: menos padding, stats en 3 cols apretadas */
  .tq-alm-card{padding:12px 14px 10px;gap:8px}
  .tq-alm-card-name{font-size:14px}
  .tq-alm-card-stats{gap:6px;padding:6px 0}
  .tq-stat-num{font-size:16px}
  .tq-alm-card-top{padding-top:6px}
  .tq-alm-top-desc{max-width:180px}
}

/* WCAG 2.2 AA: touch-targets mobile 44x44 minimum en chips filtro */
@media (pointer:coarse), (max-width:900px){
  .inv-toolbar .inv-chip{
    min-height:44px;padding:0 14px;
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
  }
  .inv-toolbar .inv-chip-count{padding:2px 7px;font-size:11px}
  /* Toolbar zonas/vista con scroll horizontal para no wrap múltiples líneas */
  .inv-toolbar .inv-zonas{
    display:flex;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:2px 0;margin:0 -4px;
    scroll-snap-type:x proximity;
  }
  .inv-toolbar .inv-zonas::-webkit-scrollbar{display:none}
  .inv-toolbar .inv-zonas .inv-chip{scroll-snap-align:start;flex-shrink:0}
  .inv-toolbar{gap:10px;padding:10px 0}
  #tqPdfBtn,#tqBranchPdfBtn,#tqPrintBtn,#tqRefreshBtn,#invSaveBtn{
    min-height:44px;padding:0 14px;display:inline-flex;align-items:center;gap:5px;
  }
}

/* ══════════════════════════════════════════════════════════════
   TEQUILA INVENTARIO — Apple luxury polish (scoped .tq-shell)
   Touch targets 44px desktop+mobile · Sticky filter bar mobile
════════════════════════════════════════════════════════════════ */
.tq-shell .inv-search-input{
  min-height:44px;padding:12px 14px 12px 36px;font-size:14px;
}
.tq-shell .inv-search-icon{font-size:15px}
.tq-shell .inv-chip{
  min-height:44px;padding:10px 16px;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.tq-shell .inv-save-btn{
  min-height:44px;padding:12px 18px;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
/* Sticky toolbar en mobile — filtros visibles durante scroll de cuadrícula larga */
@media (max-width:900px){
  .tq-shell .inv-toolbar{
    position:sticky;top:calc(var(--topbar,52px) + 4px);z-index:15;
    background:rgba(15,15,19,.88);backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:0.5px solid rgba(255,255,255,.10);
    padding:10px;
  }
  .tq-shell .inv-kpi-row{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
  .tq-shell .inv-kpi-tile{padding:12px 14px}
  .tq-shell .inv-kpi-num{font-size:22px}
  .tq-shell .inv-kpi-lbl{font-size:11px}
  /* Cuadrícula: hint sutil de scroll cuando hay muchos almacenes */
  .tq-shell .tq-cuadricula-grid{scroll-behavior:smooth}
  .tq-shell .tq-cuadricula-wrap{position:relative}
  .tq-shell .tq-cuadricula-wrap::after{
    content:'';position:sticky;bottom:0;left:0;right:0;height:40px;
    display:block;pointer-events:none;
    background:linear-gradient(to bottom, transparent, rgba(15,15,19,.6));
    margin-top:-40px;
  }
}
/* Empty state cuadricula — microcopy amigable */
.tq-shell .tq-alm-card-empty{
  color:var(--cream-d,#a8a29e);opacity:.8;font-size:12px;
  padding:8px 4px;text-align:center;font-style:normal;
  border-top:0.5px dashed rgba(255,255,255,.10);
}

/* ══════════════════════════════════════════════════════════════
   BARRA VISUAL PRODUCTOS — Inventario tequila (estilo Mapa)
   Grid horizontal-scroll de cards con imagen + nombre + total.
   Click filtra las 3 vistas (matriz/cuadrícula/lista) por SKU.
════════════════════════════════════════════════════════════════ */
.tq-product-bar{
  margin:0 0 14px;padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(212,168,77,.06), rgba(212,168,77,.02));
  border:0.5px solid rgba(212,168,77,.18);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.tq-inv-pbar-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;
}
.tq-inv-pbar-title{
  font:600 13px/1.3 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream);letter-spacing:-.01em;
}
.tq-inv-pbar-meta{
  font-size:11px;color:var(--cream-d,#a8a29e);flex:1;
}
.tq-inv-pbar-clear{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;min-height:36px;
  border:0.5px solid rgba(212,168,77,.40);
  background:rgba(212,168,77,.12);color:var(--tequilera,#d4a84d);
  border-radius:999px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.01em;
  transition:background 200ms, border-color 200ms, transform 150ms;
}
.tq-inv-pbar-clear:hover{background:rgba(212,168,77,.20);border-color:rgba(212,168,77,.60)}
.tq-inv-pbar-clear:active{transform:scale(.96)}
.tq-inv-pbar-track{
  display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 6px;margin:0 -2px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(212,168,77,.24) transparent;
}
.tq-inv-pbar-track::-webkit-scrollbar{height:6px}
.tq-inv-pbar-track::-webkit-scrollbar-thumb{background:rgba(212,168,77,.24);border-radius:999px}
.tq-inv-pcard{
  flex:0 0 130px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 8px 12px;
  border:0.5px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  cursor:pointer;text-align:center;color:inherit;font:inherit;
  transition:transform 250ms var(--spring, cubic-bezier(.34,1.56,.64,1)),
             border-color 200ms, background 200ms, box-shadow 250ms;
  min-height:150px;
}
.tq-inv-pcard:hover{
  transform:translateY(-2px);
  border-color:rgba(212,168,77,.35);
  background:linear-gradient(135deg, rgba(212,168,77,.08), rgba(255,255,255,.02));
  box-shadow:0 8px 20px -10px rgba(212,168,77,.30);
}
.tq-inv-pcard:active{transform:translateY(0) scale(.97);transition-duration:100ms}
.tq-inv-pcard.is-selected{
  border-color:var(--tequilera,#d4a84d);
  background:linear-gradient(135deg, rgba(212,168,77,.16), rgba(212,168,77,.04));
  box-shadow:0 0 0 3px rgba(212,168,77,.24),
             0 10px 24px -10px rgba(212,168,77,.40);
}
.tq-inv-pcard-imgwrap{
  position:relative;width:72px;height:72px;flex-shrink:0;
  background:rgba(0,0,0,.28);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:0.5px solid rgba(255,255,255,.08);overflow:hidden;
}
.tq-inv-pcard-img{
  max-width:100%;max-height:100%;object-fit:contain;padding:4px;
  transition:opacity 200ms;
}
.tq-inv-pcard-badge{
  position:absolute;top:-6px;right:-6px;font-size:14px;
  background:var(--void,#0a0a10);border-radius:50%;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border:0.5px solid rgba(255,255,255,.10);
}
.tq-inv-pcard-name{
  font:600 11px/1.25 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream);letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  max-height:28px;min-height:28px;
}
.tq-inv-pcard-total{
  font:700 11px/1 -apple-system, "SF Pro Text", system-ui;
  color:#4ade80;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  margin-top:2px;
}
.tq-inv-pcard-total.is-empty{color:var(--cream-f,rgba(237,237,238,.48))}

/* Mobile — cards más compactas para caber más en scroll */
@media (max-width:640px){
  .tq-product-bar{margin-bottom:10px;padding:10px 10px}
  .tq-inv-pbar-title{font-size:12px}
  .tq-inv-pbar-meta{font-size:11px}
  .tq-inv-pbar-clear{min-height:44px;padding:10px 14px}
  .tq-inv-pcard{flex:0 0 110px;min-height:140px;padding:8px 6px 10px}
  .tq-inv-pcard-imgwrap{width:60px;height:60px}
  .tq-inv-pcard-name{font-size:11px;-webkit-line-clamp:2;max-height:26px;min-height:26px}
}

/* ══════════════════════════════════════════════════════════════
   TOP 5 ACCORDION — Apple-style disclosure widget
════════════════════════════════════════════════════════════════ */
.tq-top-accordion{
  margin:0 0 14px;
  border:0.5px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  overflow:hidden;
  transition:border-color 200ms;
}
.tq-top-accordion[open]{border-color:rgba(255,255,255,.14)}
.tq-top-accordion-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;cursor:pointer;
  list-style:none;user-select:none;
  min-height:52px;
  font:inherit;color:var(--cream);
  transition:background 200ms;
}
.tq-top-accordion-head::-webkit-details-marker{display:none}
.tq-top-accordion-head::marker{display:none}
.tq-top-accordion-head:hover{background:rgba(255,255,255,.03)}
.tq-top-accordion-title{
  font:600 13px/1.3 -apple-system, "SF Pro Text", system-ui;
  letter-spacing:-.005em;
  flex-shrink:0;
}
.tq-top-accordion-preview{
  flex:1;min-width:0;
  font-size:12px;color:var(--cream-d,#a8a29e);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.tq-top-accordion-chevron{
  flex-shrink:0;font-size:10px;color:var(--cream-f,rgba(237,237,238,.48));
  transition:transform 250ms var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.tq-top-accordion[open] .tq-top-accordion-chevron{transform:rotate(-180deg);color:var(--cream-d)}
.tq-top-accordion .tq-top-grid{
  padding:0 12px 14px;
  animation:tqTopSlideIn 300ms var(--spring-soft, cubic-bezier(.22,1,.36,1));
}
@keyframes tqTopSlideIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@media (max-width:640px){
  .tq-top-accordion-head{padding:12px 14px;min-height:56px}
  .tq-top-accordion-title{font-size:13px}
  .tq-top-accordion-preview{font-size:11px}
}

/* ══════════════════════════════════════════════════════════════
   VISTA VERTICAL — cuando hay filtro SKU, muestra sucursales
   apiladas con barras (más simple que matriz enorme)
════════════════════════════════════════════════════════════════ */
.tq-vertical-view{
  display:flex;flex-direction:column;gap:12px;
}
.tq-vertical-hero{
  display:flex;gap:16px;align-items:center;
  padding:16px 18px;
  border:0.5px solid rgba(212,168,77,.24);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(212,168,77,.10), rgba(212,168,77,.02));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.tq-vertical-hero-img{
  flex-shrink:0;width:80px;height:80px;
  background:rgba(0,0,0,.32);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:0.5px solid rgba(255,255,255,.08);overflow:hidden;
}
.tq-vertical-hero-img img{max-width:100%;max-height:100%;object-fit:contain;padding:4px}
.tq-vertical-hero-body{flex:1;min-width:0}
.tq-vertical-hero-fam{
  font:600 10.5px/1 -apple-system, "SF Pro Text", system-ui;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.tq-vertical-hero-name{
  font:700 15px/1.3 -apple-system, "SF Pro Display", system-ui;
  color:var(--cream);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.tq-vertical-hero-stats{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;
  font-size:12px;color:var(--cream-d,#a8a29e);font-variant-numeric:tabular-nums;
}
.tq-vertical-hero-stats b{color:var(--cream);font-weight:700}
.tq-vertical-hero-nostock b{color:#f87171}

.tq-vertical-list{
  display:flex;flex-direction:column;gap:6px;
}
.tq-vertical-row{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) auto;
  gap:14px;align-items:center;
  padding:12px 14px;
  border:0.5px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  cursor:pointer;text-align:left;
  font:inherit;color:inherit;
  min-height:56px;
  transition:transform 200ms var(--spring, cubic-bezier(.34,1.56,.64,1)),
             border-color 200ms, background 200ms;
}
.tq-vertical-row:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.tq-vertical-row:active{transform:translateY(0) scale(.99);transition-duration:100ms}
.tq-vertical-row[data-lvl="zero"]{opacity:.6}
.tq-vertical-row[data-lvl="low"]{border-color:rgba(249,115,22,.22);background:linear-gradient(90deg, rgba(249,115,22,.06), rgba(255,255,255,.01))}
.tq-vertical-row[data-lvl="high"]{border-color:rgba(34,197,94,.22);background:linear-gradient(90deg, rgba(34,197,94,.06), rgba(255,255,255,.01))}
.tq-vertical-row-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.tq-vertical-row-name{
  font:600 13px/1.3 -apple-system, "SF Pro Text", system-ui;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tq-vertical-row-code{
  font:500 10.5px/1 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-f,rgba(237,237,238,.48));letter-spacing:.02em;
}
.tq-vertical-row-bar-wrap{
  height:8px;background:rgba(255,255,255,.06);
  border-radius:999px;overflow:hidden;min-width:0;
}
.tq-vertical-row-bar{
  height:100%;background:linear-gradient(90deg, var(--ice,#0ea5e9), var(--ice-b,#22d3ee));
  border-radius:999px;
  transition:width 500ms var(--spring, cubic-bezier(.34,1.56,.64,1));
}
.tq-vertical-row-bar[data-lvl="zero"]{background:rgba(255,255,255,.10)}
.tq-vertical-row-bar[data-lvl="low"]{background:linear-gradient(90deg, #f97316, #fb923c)}
.tq-vertical-row-bar[data-lvl="high"]{background:linear-gradient(90deg, #22c55e, #4ade80)}
.tq-vertical-row-uds{
  font:700 15px/1 -apple-system, "SF Pro Display", system-ui;
  color:var(--cream);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  min-width:52px;text-align:right;
}
.tq-vertical-row-uds[data-lvl="zero"]{color:var(--cream-f,rgba(237,237,238,.48));font-weight:500}
.tq-vertical-row-uds[data-lvl="low"]{color:#fb923c}
.tq-vertical-row-uds[data-lvl="high"]{color:#4ade80}

@media (max-width:640px){
  .tq-vertical-hero{padding:12px 14px;gap:12px}
  .tq-vertical-hero-img{width:64px;height:64px}
  .tq-vertical-hero-name{font-size:14px}
  .tq-vertical-hero-fam{font-size:10px}
  .tq-vertical-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:6px 12px;padding:10px 12px;
  }
  .tq-vertical-row-info{grid-column:1;grid-row:1}
  .tq-vertical-row-uds{grid-column:2;grid-row:1;font-size:14px;min-width:48px}
  .tq-vertical-row-bar-wrap{grid-column:1/-1;grid-row:2;height:6px}
}
@media (prefers-reduced-motion:reduce){
  .tq-cuadricula-grid{scroll-behavior:auto}
  .tq-cuadricula-nav{transition:none}
}
.tq-alm-card{
  padding:16px 16px 14px;border:0.5px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg,20px);cursor:pointer;text-align:left;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px -8px rgba(0,0,0,.35);
  transition:transform 300ms var(--spring, cubic-bezier(.34,1.56,.64,1)), border-color 250ms, box-shadow 300ms;
  display:flex;flex-direction:column;gap:12px;
  font:inherit;color:inherit;
}
.tq-alm-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px -14px rgba(0,0,0,.5)}
.tq-alm-card:active{transform:translateY(0) scale(.98);transition-duration:120ms}
.tq-alm-card[data-lvl="empty"]{opacity:.55}
.tq-alm-card[data-lvl="empty"]:hover{opacity:.85}
.tq-alm-card[data-lvl="low"]{border-color:rgba(234,179,8,.30);background:linear-gradient(135deg, rgba(234,179,8,.10), rgba(255,255,255,.02))}
.tq-alm-card[data-lvl="high"]{border-color:rgba(34,197,94,.24);background:linear-gradient(135deg, rgba(34,197,94,.08), rgba(255,255,255,.02))}
.tq-alm-card[data-lvl="nosync"]{
  cursor:default;opacity:.85;
  border:0.5px dashed rgba(255,255,255,.15);
  background:linear-gradient(135deg, rgba(148,163,184,.06), rgba(255,255,255,.01));
}
.tq-alm-card[data-lvl="nosync"]:hover{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px -8px rgba(0,0,0,.35)}
.tq-alm-card-nosync{
  display:flex;align-items:center;gap:10px;padding:14px 0 4px;
  border-top:0.5px dashed rgba(255,255,255,.10);
}
.tq-nosync-icon{font-size:22px;line-height:1;flex-shrink:0}
.tq-nosync-title{font:600 12px/1.3 -apple-system, "SF Pro Text", system-ui;color:var(--cream)}
.tq-nosync-sub{font-size:11px;color:var(--cream-d,#a8a29e);line-height:1.35;margin-top:2px}

.tq-alm-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tq-alm-card-name{
  font:600 15px/1.3 -apple-system, "SF Pro Display", system-ui;
  letter-spacing:-.015em;flex:1;min-width:0;word-break:break-word;
}
.tq-alm-card-code{
  background:rgba(255,255,255,.10);padding:2px 8px;border-radius:999px;
  font:700 10.5px/1.4 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d,#a8a29e);letter-spacing:.05em;flex-shrink:0;
}
.tq-alm-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 0;border-top:0.5px solid rgba(255,255,255,.06)}
.tq-stat{display:flex;flex-direction:column;gap:2px}
.tq-stat-num{
  font:600 18px/1 -apple-system, "SF Pro Display", system-ui;
  letter-spacing:-.02em;color:var(--cream,#f5f5f4);font-variant-numeric:tabular-nums;
}
.tq-stat-frac{font-size:12px;color:var(--cream-d,#a8a29e);font-weight:500}
.tq-stat-lbl{font-size:10px;color:var(--cream-d,#a8a29e);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.tq-alm-card-top{
  display:flex;align-items:center;gap:6px;padding-top:8px;border-top:0.5px solid rgba(255,255,255,.06);
  font-size:11px;color:var(--cream-d,#a8a29e);min-width:0;
}
.tq-alm-top-lbl{font-weight:600;color:var(--cream-d,#a8a29e);flex-shrink:0}
.tq-alm-top-desc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cream)}
.tq-alm-top-disp{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:999px;font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums;flex-shrink:0}
.tq-alm-card-empty{padding:8px 0 0;font-size:12px;color:var(--cream-d,#a8a29e);font-style:italic;text-align:center;border-top:0.5px solid rgba(255,255,255,.06)}

@media (prefers-reduced-motion:reduce){
  .tq-alm-card,.tq-alm-card:hover,.tq-alm-card:active{transform:none;transition:none}
}

/* ══════════════════════════════════════════════════════════════
   HIELOS — Hero section (paridad tequilera)
════════════════════════════════════════════════════════════════ */
.inv-hero-section{margin:0 0 18px}
.inv-hero-title{
  font:600 12px/1.4 -apple-system, "SF Pro Text", system-ui;
  color:var(--cream-d,#a8a29e);text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 10px;
}
.inv-hero-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:10px}
.inv-hero-card{
  padding:14px 14px 12px;border:0.5px solid rgba(255,255,255,.10);
  border-radius:var(--r-md,14px);cursor:pointer;text-align:left;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px -8px rgba(0,0,0,.35);
  transition:transform 300ms var(--spring, cubic-bezier(.34,1.56,.64,1)), border-color 250ms, box-shadow 300ms;
  display:flex;flex-direction:column;gap:8px;font:inherit;color:inherit;
}
.inv-hero-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.20);box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px -12px rgba(0,0,0,.45)}
.inv-hero-card:active{transform:translateY(0) scale(.98);transition-duration:120ms}
.inv-hero-card[data-lvl="lo"]{border-color:rgba(239,68,68,.32)}
.inv-hero-card[data-lvl="md"]{border-color:rgba(234,179,8,.28)}
.inv-hero-name{font:600 13.5px/1.25 -apple-system, "SF Pro Display", system-ui;letter-spacing:-.01em}
.inv-hero-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--cream-d,#a8a29e);font-variant-numeric:tabular-nums}
.inv-hero-zona{opacity:.85}
.inv-hero-total{font-weight:600;color:var(--cream)}
.inv-hero-pct{margin-left:auto;padding:1px 7px;border-radius:999px;font-weight:700;letter-spacing:-.01em}
.inv-hero-pct[data-lvl="lo"]{background:rgba(239,68,68,.20);color:#f87171}
.inv-hero-pct[data-lvl="md"]{background:rgba(234,179,8,.18);color:#facc15}
.inv-hero-pct[data-lvl="ok"]{background:rgba(34,197,94,.18);color:#4ade80}
.inv-hero-pct[data-lvl="hi"]{background:rgba(34,197,94,.24);color:#4ade80}
.inv-hero-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.inv-hero-fill{height:100%;border-radius:999px;transition:width 400ms var(--spring-soft, ease-out)}
.inv-hero-fill[data-lvl="lo"]{background:linear-gradient(90deg,#ef4444,#f87171)}
.inv-hero-fill[data-lvl="md"]{background:linear-gradient(90deg,#eab308,#facc15)}
.inv-hero-fill[data-lvl="ok"]{background:linear-gradient(90deg,#22c55e,#4ade80)}
.inv-hero-fill[data-lvl="hi"]{background:linear-gradient(90deg,#22c55e,#4ade80)}
@media (max-width:900px){ .inv-hero-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .inv-hero-grid{grid-template-columns:1fr} }

/* Nombre sucursal grande (inversión — como producto tequilera) */
.inv-name-lg{font:600 14px/1.3 -apple-system, "SF Pro Display", system-ui;letter-spacing:-.015em;color:var(--cream);word-break:break-word}
.inv-name-sub{font:500 11px/1.4 -apple-system, "SF Pro Text", system-ui;color:var(--cream-d,#a8a29e);letter-spacing:.01em;margin-top:2px}

/* Selector Almacén ERP (columna Inventarios + Almacenes ERP) */
.inv-erpalm-sel{
  min-width:130px;padding:5px 8px;border:1px solid var(--borde,rgba(255,255,255,.14));
  background:var(--bg-panel-2,rgba(255,255,255,.04));color:var(--cream);
  border-radius:var(--r-sm,8px);font:inherit;font-size:13px;
  cursor:pointer;transition:border-color var(--dur,250ms) var(--ease-out-quart, ease);
}
.inv-erpalm-sel:hover{border-color:var(--ice,#4fb8c9)}
.inv-erpalm-sel:focus-visible{outline:2px solid var(--ice,#4fb8c9);outline-offset:2px}
.inv-erpalm-sel option{background:#161d21;color:var(--cream)}
.inv-erpalm-sel option:disabled{color:var(--cream-d,#8fa3ab);font-style:italic}

.inv-pctwrap{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.inv-bar{width:70px;height:6px;border-radius:100px;background:rgba(255,255,255,.06);overflow:hidden}
.inv-bar-fill{height:100%;border-radius:100px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.inv-bar-fill[data-lvl="lo"]{background:linear-gradient(90deg,#ef4444,#f87171)}
.inv-bar-fill[data-lvl="md"]{background:linear-gradient(90deg,#eab308,#facc15)}
.inv-bar-fill[data-lvl="ok"]{background:linear-gradient(90deg,#22c55e,#4ade80)}
.inv-bar-fill[data-lvl="hi"]{background:linear-gradient(90deg,#00d4ec,#67e8f9)}
.inv-pctlab{font-size:12px;color:var(--cream-d);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.inv-upd{font-size:12px;color:var(--cream-d);white-space:nowrap}
.inv-empty{padding:32px 16px;text-align:center;color:var(--cream-d);opacity:.7;font-size:13px}
.inv-footer{padding:10px 4px 0;font-size:11px;color:var(--cream-d);opacity:.72}

@media (max-width:768px){
  .inv-toolbar{padding:10px}
  .inv-legend{display:none}
  .inv-th, .inv-td{padding:6px 6px}
  /* Touch-friendly: subimos stepper aunque comprima la tabla — Apple HIG 44 */
  .inv-cell-input{width:52px;min-height:40px;font-size:16px;padding:8px 4px}
  .inv-step-btn{min-width:40px;min-height:40px;font-size:18px}
  .inv-stepper{padding:3px}
  .inv-bar{width:44px}
  .inv-name-s{display:none}
  .inv-erpalm-sel{min-height:40px;font-size:14px}
  /* Tabla scroll horizontal — no forzamos que todo entre en 375px */
  .inv-wrap, .inv-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .inv-table{min-width:640px}
}

/* ══════════════════════════════════════════════════════════════
   TOAST SYSTEM (Linear/Vercel 2026 pattern)
   Global usage: toast(msg, type, ms) — type ∈ info|success|warning|error
════════════════════════════════════════════════════════════════ */
#toast-stack{
  position:fixed;top:20px;right:20px;z-index:10000;
  display:flex;flex-direction:column;gap:8px;
  pointer-events:none;max-width:calc(100vw - 40px);
}
.toast{
  min-width:260px;max-width:380px;padding:12px 16px;
  background:rgba(15,15,19,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-s);border-left:3px solid var(--cream-x);border-radius:8px;
  color:var(--cream);font-size:13px;line-height:1.4;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer;pointer-events:auto;
  transform:translateX(120%);opacity:0;
  transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s;
  word-wrap:break-word;
}
.toast.show{transform:translateX(0);opacity:1}
.toast.success{border-left-color:#22c55e}
.toast.error  {border-left-color:var(--red)}
.toast.warning{border-left-color:var(--gold)}
.toast.info   {border-left-color:var(--ice)}
@media(max-width:640px){
  #toast-stack{top:12px;right:12px;left:12px;max-width:none}
  .toast{min-width:0;max-width:none;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .toast{transition:opacity .2s}
  .toast:not(.show){transform:none}
}

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADERS (shimmer)
════════════════════════════════════════════════════════════════ */
.skel{
  background:linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.03) 100%);
  background-size:200% 100%;
  animation:skel-shimmer 1.5s ease-in-out infinite;
  border-radius:8px;
}
.skel-bar{height:44px;margin-bottom:8px}
.skel-card{height:64px;margin-bottom:8px}
.skel-kpi{height:100px;border-radius:14px;margin-bottom:8px}
@keyframes skel-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media(prefers-reduced-motion:reduce){
  .skel{animation:none;background:rgba(255,255,255,.05)}
}

/* ══════════════════════════════════════════════════════════════
   VIEW TRANSITIONS — fade suave entre vistas (Chrome 111+, Safari 18+)
════════════════════════════════════════════════════════════════ */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration:200ms;
    animation-timing-function:cubic-bezier(.4,0,.2,1);
  }
  ::view-transition-old(root){ animation-name:vt-fade-out }
  ::view-transition-new(root){ animation-name:vt-fade-in }
  @keyframes vt-fade-out{ to{ opacity:0 } }
  @keyframes vt-fade-in { from{ opacity:0 } }
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none !important }
}

/* sr-only helper (a11y) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════════════════
   GACAMA · META SEMANAL + BITÁCORA  (js/gacama-meta.js)
   Usa los tokens existentes. Sin rojo permanente: un tablero en rojo toda
   la semana deja de leerse y la gente empieza a maquillar la captura.
════════════════════════════════════════════════════════════════════════ */
.gm-body{padding:10px 2px 18px;display:flex;flex-direction:column;gap:18px}

/* ── navegación de semana ── */
.gm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 2px 10px}
.gm-weeknav{display:flex;align-items:center;gap:10px}
.gm-nav-btn{
  width:34px;height:34px;flex-shrink:0;border-radius:var(--r-md);
  border:1px solid var(--line-s);background:rgba(255,255,255,.04);
  color:var(--cream-d);font-size:12px;line-height:1;cursor:pointer;
}
.gm-nav-btn:hover:not(:disabled){background:rgba(255,255,255,.09);color:var(--cream)}
.gm-nav-btn:disabled{opacity:.3;cursor:not-allowed}
.gm-weeklabel{min-width:150px}
.gm-weeknum{font-size:14px;font-weight:700;color:var(--cream);letter-spacing:-.01em}
.gm-now{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gacama);background:rgba(129,140,248,.14);
  border:1px solid rgba(129,140,248,.28);border-radius:100px;padding:1px 6px;margin-left:4px;
}
.gm-weekrange{font-size:11px;color:var(--cream-f);margin-top:2px}

/* ── tarjetas de meta ── */
.gm-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.gm-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden;
}
.gm-card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gacama);opacity:.55;
}
.gm-card[data-estado="ok"]::before{background:var(--aur-g);opacity:.8}
.gm-card[data-estado="alerta"]::before{background:var(--gold);opacity:.85}
.gm-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.gm-card-title{margin:0;font-size:14px;font-weight:700;color:var(--cream);letter-spacing:-.01em;line-height:1.25}
.gm-edit-btn{
  flex-shrink:0;border:1px solid var(--line-s);background:transparent;color:var(--cream-f);
  font-size:10px;font-weight:600;padding:4px 8px;border-radius:var(--r-sm);cursor:pointer;
}
.gm-edit-btn:hover{color:var(--cream);background:rgba(255,255,255,.06)}

.gm-figure{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.gm-big{font-size:34px;font-weight:800;color:var(--cream);letter-spacing:-.03em;line-height:1}
.gm-of{font-size:13px;color:var(--cream-f)}
.gm-pct{margin-left:auto;font-size:13px;font-weight:700;color:var(--cream-d)}

.gm-bar{height:7px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.gm-bar-fill{height:100%;border-radius:100px;background:var(--gacama);transition:width .35s ease}
.gm-card[data-estado="ok"] .gm-bar-fill{background:var(--aur-g)}
.gm-card[data-estado="alerta"] .gm-bar-fill{background:var(--gold)}

.gm-line{margin:0;font-size:13px;color:var(--cream-d);line-height:1.5}
.gm-line strong{color:var(--cream);font-weight:700}
.gm-proj{margin:0;font-size:12px;color:var(--cream-f);line-height:1.5}
.gm-proj strong{color:var(--cream-d)}
.gm-proj-note{display:block;font-size:10px;color:var(--cream-x);margin-top:1px}
.gm-proj-none{font-style:italic}

.gm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.gm-chip{
  font-size:10px;font-weight:600;padding:3px 8px;border-radius:100px;
  color:var(--cream-d);background:rgba(255,255,255,.05);border:1px solid var(--line-s);
}
.gm-chip-mute{color:var(--cream-x)}

/* ── definir meta ── */
.gm-addmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px}
.gm-addmeta-lbl{font-size:11px;color:var(--cream-f);font-weight:600}
.gm-addmeta-list{display:flex;flex-wrap:wrap;gap:6px}
.gm-addmeta-btn{
  font-size:11px;font-weight:600;padding:6px 11px;border-radius:100px;cursor:pointer;
  color:var(--cream-d);background:transparent;border:1px dashed var(--line-hi);
}
.gm-addmeta-btn:hover{color:var(--cream);background:rgba(255,255,255,.05);border-style:solid}

/* ── aporte por operario (sin ranking) ── */
.gm-aporte{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.gm-sec-title{margin:0 0 2px;font-size:13px;font-weight:700;color:var(--cream)}
.gm-sec-note{margin:0 0 10px;font-size:11px;color:var(--cream-f);line-height:1.45}
.gm-aporte-list{display:flex;flex-direction:column}
.gm-aporte-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--line)}
.gm-aporte-row:first-child{border-top:0}
.gm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.gm-aporte-name{font-size:13px;font-weight:600;color:var(--cream)}
.gm-aporte-num{margin-left:auto;font-size:15px;font-weight:700;color:var(--cream)}
.gm-aporte-sub{font-size:10px;color:var(--cream-f);min-width:92px;text-align:right}

/* ── bitácora: navegación de día ── */
.gm-daynav{display:flex;align-items:center;gap:8px}
.gm-daypills{display:flex;gap:4px;flex:1;justify-content:center;flex-wrap:wrap}
.gm-daypill{
  min-width:42px;padding:6px 8px;border-radius:var(--r-md);cursor:pointer;
  font-size:11px;font-weight:600;color:var(--cream-f);
  background:transparent;border:1px solid var(--line);position:relative;
}
.gm-daypill:hover:not(.active){color:var(--cream);background:rgba(255,255,255,.05)}
.gm-daypill.active{background:rgba(255,255,255,.12);color:var(--cream);border-color:var(--line-hi)}
.gm-daypill.has::after{
  content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--gacama);
}
.gm-daylabel{text-align:center;font-size:12px;font-weight:600;color:var(--cream-d);margin-top:-6px}
.gm-future{color:var(--cream-x);font-weight:400}

/* ── bitácora: tabla ── */
.gm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.gm-table{width:100%;border-collapse:collapse}
/* La fecha ya se ve en .gm-daylabel justo arriba; el caption se conserva
   solo para lectores de pantalla, que necesitan el contexto de la tabla. */
.gm-caption{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.gm-table thead th{
  text-align:left;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream-f);padding:8px 10px;border-bottom:1px solid var(--line-s);
}
.gm-op-cell{
  vertical-align:top;padding:12px 10px;width:130px;text-align:left;font-weight:600;
  border-bottom:1px solid var(--line);
}
.gm-op-name{font-size:13px;font-weight:600;color:var(--cream);margin-left:7px}
.gm-regs-cell{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}

.gm-reg{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);padding:9px 34px 9px 11px;margin-bottom:6px;
}
.gm-reg.saving{opacity:.5}
.gm-reg-main{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gm-reg-prod{font-size:13px;font-weight:600;color:var(--cream)}
.gm-etapa{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gold);background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.26);
  border-radius:100px;padding:1px 6px;
}
.gm-reg-nums{display:flex;flex-wrap:wrap;gap:9px;margin-top:5px}
.gm-num{font-size:11px;color:var(--cream-f)}
.gm-num b{font-size:13px;color:var(--cream);font-weight:700}
.gm-num-ok b{color:var(--aur-g)}
.gm-num-merma{color:var(--gold)}
.gm-reg-nota{font-size:11px;color:var(--cream-f);margin-top:5px;font-style:italic;line-height:1.4}
.gm-del-btn{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:var(--r-sm);
  border:0;background:transparent;color:var(--cream-x);font-size:12px;cursor:pointer;line-height:1;
}
.gm-del-btn:hover{color:var(--red);background:rgba(239,68,68,.10)}
.gm-noreg{font-size:12px;color:var(--cream-x);padding:3px 0 6px}
.gm-add-btn{
  font-size:11px;font-weight:600;padding:7px 12px;border-radius:100px;cursor:pointer;
  color:var(--cream-d);background:transparent;border:1px dashed var(--line-hi);
}
.gm-add-btn:hover{color:var(--cream);background:rgba(255,255,255,.05);border-style:solid}

/* ── formulario de captura ── */
.gm-form{
  margin-top:8px;background:var(--panel-2);border:1px solid var(--line-s);
  border-radius:var(--r-md);padding:12px;display:flex;flex-direction:column;gap:10px;
}
.gm-form-row{display:flex;gap:10px;flex-wrap:wrap}
.gm-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:130px}
/* display:flex de la clase le gana al [hidden] del navegador (que es
   display:none sin !important), asi que el motivo de merma se quedaba
   visible con merma en 0. Hay que reponer la regla explicitamente. */
.gm-field[hidden]{display:none}
.gm-field-sm{flex:0 1 116px;min-width:100px}
.gm-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cream-f)}
.gm-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--cream-x)}
.gm-input{font-size:13px;padding:8px 10px}
.gm-num-input{text-align:center}
.gm-stepper{display:flex;align-items:center;gap:4px}
.gm-stepper .gm-num-input{flex:1;min-width:0}
.gm-step{
  width:34px;height:34px;flex-shrink:0;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--line-s);background:rgba(255,255,255,.05);
  color:var(--cream);font-size:16px;font-weight:700;line-height:1;
}
.gm-step:hover{background:rgba(255,255,255,.11)}
.gm-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.gm-form-err{font-size:11px;color:var(--red);min-height:1em}

/* ── estados vacíos ── */
.gm-empty{padding:26px 18px;text-align:center;font-size:13px;color:var(--cream-f);line-height:1.6}
.gm-error{
  padding:16px;border-radius:var(--r-md);background:rgba(239,68,68,.07);
  border:1px solid rgba(239,68,68,.22);color:var(--cream-d);font-size:13px;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.gm-error strong{color:var(--cream)}

/* ══ MÓVIL ═════════════════════════════════════════════════════════════
   El proyecto no tenía patrón de tabla→tarjeta. Aquí la fila de operario
   se convierte en bloque: el nombre pasa a ser encabezado de su tarjeta.
════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .gm-cards{grid-template-columns:1fr}
  .gm-big{font-size:30px}
  .gm-aporte-sub{min-width:auto}
  .gm-daypill{min-width:0;flex:1;padding:7px 4px}

  .gm-table, .gm-table tbody, .gm-op-row{display:block;width:100%}
  .gm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .gm-op-row{
    background:var(--surf);border:1px solid var(--line);
    border-radius:var(--r-lg);margin-bottom:10px;padding:11px 12px;
  }
  .gm-op-cell{
    display:flex;align-items:center;width:auto;padding:0 0 9px;
    border-bottom:1px solid var(--line);
  }
  .gm-regs-cell{display:block;padding:10px 0 0;border-bottom:0}
  .gm-reg{padding-right:32px}
  .gm-field-sm{flex:1 1 100%}
}

/* ── GACAMA · equipo y productos ─────────────────────────────────────── */
.gm-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.gm-g-card{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px 18px;
}
.gm-g-list{list-style:none;margin:0 0 4px;padding:0}
.gm-g-row{
  display:flex;align-items:center;gap:9px;
  padding:9px 0;border-top:1px solid var(--line);min-height:40px;
}
.gm-g-row:first-child{border-top:0}
.gm-g-row.is-baja .gm-g-name{color:var(--cream-x);text-decoration:line-through}
.gm-g-name{font-size:13px;font-weight:600;color:var(--cream)}
.gm-g-cat{
  font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--cream-f);background:rgba(255,255,255,.05);
  border:1px solid var(--line-s);border-radius:100px;padding:2px 7px;
}
.gm-g-tag{
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gold);background:rgba(234,179,8,.12);
  border:1px solid rgba(234,179,8,.24);border-radius:100px;padding:2px 7px;
}
.gm-g-actions{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.gm-g-btn{
  font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--r-sm);
  cursor:pointer;color:var(--cream-d);background:transparent;
  border:1px solid var(--line-s);white-space:nowrap;
}
.gm-g-btn:hover{color:var(--cream);background:rgba(255,255,255,.06)}
.gm-g-btn-warn:hover{
  color:var(--red);background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.28);
}
.gm-g-edit{display:flex;gap:8px;align-items:center;width:100%;flex-wrap:wrap}
.gm-g-edit .gm-input{flex:1;min-width:150px}
.gm-g-add{
  display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  margin-top:12px;padding-top:14px;border-top:1px dashed var(--line-hi);
}
.gm-g-submit{flex-shrink:0;height:36px}

@media (max-width:640px){
  .gm-g-row{flex-wrap:wrap}
  .gm-g-actions{margin-left:0;width:100%;padding-top:6px}
  .gm-g-btn{flex:1;text-align:center}
  .gm-g-add .gm-field, .gm-g-add .gm-field-sm{flex:1 1 100%}
  .gm-g-submit{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════
   GACAMA · capa de acabado
   Va despues de las reglas base del modulo a proposito: misma
   especificidad, gana la ultima. Solo toca .gm-*, no el resto del portal.
════════════════════════════════════════════════════════════════════════ */
.gm-body{
  /* Tokens locales. Nada por encima de 300ms: arriba de eso una interfaz
     de trabajo se siente lenta, no elegante. */
  --gm-fast:140ms;
  --gm-base:200ms;
  --gm-ease:cubic-bezier(.23,1,.32,1);   /* ease-out; ease-in nunca en UI */
}

/* ── 1. Numeros tabulares ────────────────────────────────────────────
   Sin esto el "1" es mas angosto que el "8" y cada recarga mueve el ancho
   de la columna: la fila "salta" y se ve barato. */
.gm-big, .gm-of, .gm-pct, .gm-aporte-num, .gm-num, .gm-num b,
.gm-num-input, .gm-table, .gm-weekrange, .gm-chip{
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── 2. Tracking por tamano ──────────────────────────────────────────
   Cuanto mas grande el texto, mas negativo el tracking. */
.gm-big{letter-spacing:-.03em}
.gm-card-title, .gm-sec-title{letter-spacing:-.011em; text-wrap:balance}
.gm-label, .gm-g-cat, .gm-g-tag, .gm-now{letter-spacing:.05em}

/* ── 3. Elevacion por luz, no por sombra ─────────────────────────────
   En fondo oscuro una sombra negra sobre negro no se ve. Lo que da
   volumen es el hairline y un reflejo interior de 1px arriba. */
.gm-card, .gm-g-card, .gm-aporte{
  box-shadow:
    0 1px 2px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: background var(--gm-fast) var(--gm-ease),
              transform var(--gm-fast) var(--gm-ease);
}
.gm-card:hover{background:var(--panel-2)}

/* ── 4. Solo transform y opacity ─────────────────────────────────────
   Animar height/padding fuerza relayout y se ve entrecortado. */
.gm-nav-btn, .gm-daypill, .gm-g-btn, .gm-edit-btn,
.gm-add-btn, .gm-addmeta-btn, .gm-step, .gm-del-btn{
  transition: background var(--gm-fast) var(--gm-ease),
              color      var(--gm-fast) var(--gm-ease),
              border-color var(--gm-fast) var(--gm-ease),
              transform  var(--gm-fast) var(--gm-ease);
}
.gm-step:active, .gm-nav-btn:not(:disabled):active{transform:scale(.94)}
.gm-g-btn:active, .gm-add-btn:active, .gm-addmeta-btn:active{transform:scale(.98)}
.gm-bar-fill{transition:width var(--gm-base) var(--gm-ease)}

/* ── 5. Entrada sin JS ───────────────────────────────────────────────
   @starting-style define el estado inicial del primer render. */
/* Solo bajo .gm-anim, que gmPaint pone unicamente al cargar datos o cambiar
   de vista. Sin esta condicion la animacion se re-disparaba en CADA repintado
   (el render es innerHTML completo) y la seccion parpadeaba en cada clic. */
.gm-anim .gm-card, .gm-anim .gm-g-card, .gm-anim .gm-reg,
.gm-anim .gm-form, .gm-anim .gm-meta-form{
  animation: gm-in var(--gm-base) var(--gm-ease) both;
}
@keyframes gm-in{
  from{opacity:0; transform:translateY(4px)}
  to  {opacity:1; transform:none}
}

/* ── 6. Foco visible ─────────────────────────────────────────────────
   outline + offset no deforman la caja. NO tocar border-radius aqui:
   redefinirlo en :focus-visible deforma el control al enfocarlo. */
.gm-body :focus-visible{
  /* box-shadow:none anula el halo cian del :focus-visible global (css:4013):
     sin esto conviven dos indicadores de foco de colores distintos sobre el
     mismo boton. Aqui manda el acento de GACAMA. No se toca border-radius a
     proposito — redefinirlo en :focus-visible deforma el control. */
  box-shadow:none;
  outline:2px solid color-mix(in oklab, var(--gacama) 60%, transparent);
  outline-offset:2px;
}

/* ── 7. Piezas nuevas ────────────────────────────────────────────────*/
.gm-meta-form{
  margin-top:2px;padding:12px;border-radius:var(--r-md);
  background:var(--panel-2);border:1px solid var(--line-s);
  display:flex;flex-direction:column;gap:9px;
}
.gm-hint{
  margin:0;font-size:11px;line-height:1.5;color:var(--cream-x);
  text-wrap:pretty;
}

/* ── 8. Accesibilidad del movimiento ─────────────────────────────────
   Reduced motion no es "cero animacion": se conservan los fundidos, que
   ayudan a entender que cambio, y se quitan los desplazamientos. */
@media (prefers-reduced-motion:reduce){
  .gm-anim .gm-card, .gm-anim .gm-g-card, .gm-anim .gm-reg,
  .gm-anim .gm-form, .gm-anim .gm-meta-form{
    animation: gm-in-suave 120ms ease both;
  }
  @keyframes gm-in-suave{ from{opacity:0} to{opacity:1} }
  .gm-step:active, .gm-nav-btn:not(:disabled):active,
  .gm-g-btn:active, .gm-add-btn:active, .gm-addmeta-btn:active{transform:none}
  .gm-bar-fill{transition:none}
}


/* ══════════════════════════════════════════════════════════════════════
   TABLAS ANCHAS EN MÓVIL · columna de identidad fija
   ----------------------------------------------------------------------
   Medido a 375px contra producción: la tabla de Inventarios de Hielos mide
   884px y deja 5 de sus 9 columnas fuera; Almacenes ERP deja 5 de 6; el
   reporte de Canastas 2 de 6. Todas scrollean, pero al desplazarte pierdes
   la columna que dice de qué sucursal es la fila: quedas mirando números
   sin saber a quién pertenecen.

   El portal ya resolvía esto en dos sitios (.rep-heatmap th.rep-hm-suc y
   .tq-matriz .tq-sticky-col). Esto extiende ese mismo patrón al resto.

   Los anchos van fijos a propósito: sticky en la segunda columna necesita
   un desplazamiento izquierdo determinista, y sin fijar el ancho de la
   primera ese número no existe.
════════════════════════════════════════════════════════════════════════ */
/* La columna de identidad se fija en cuanto la tabla se desplaza, no solo en
   movil: medido a 820px de viewport la tabla de inventarios mide 960px dentro
   de un contenedor de 662, asi que en tableta y portatil pequeno se pierde el
   nombre de la sucursal igual que en el telefono. Los anchos fijos si se
   quedan solo en movil, donde el espacio obliga. */
@media (max-width:1400px){
  .inv-tablewrap{position:relative}
  .inv-tablewrap .inv-table th:nth-child(1),
  .inv-tablewrap .inv-table td:nth-child(1),
  .inv-tablewrap .inv-table th:nth-child(2),
  .inv-tablewrap .inv-table td:nth-child(2){
    position:sticky;z-index:3;background:rgba(15,15,19,.96);
  }
  .inv-tablewrap .inv-table th:nth-child(1),
  .inv-tablewrap .inv-table td:nth-child(1){left:0}
  .inv-tablewrap .inv-table th:nth-child(2),
  .inv-tablewrap .inv-table td:nth-child(2){
    box-shadow:6px 0 6px -5px rgba(0,0,0,.75);
  }
  .inv-tablewrap .inv-table th:nth-child(1),
  .inv-tablewrap .inv-table th:nth-child(2){z-index:4}

  .asist-table th:first-child,
  .asist-table td:first-child{
    position:sticky;left:0;z-index:3;
    background:rgba(15,15,19,.96);
    box-shadow:6px 0 6px -5px rgba(0,0,0,.75);
  }
  .asist-table th:first-child{z-index:4}

  .cn-table th:first-child,
  .cn-table td:first-child{
    position:sticky;left:0;z-index:3;
    background:rgba(15,15,19,.96);
    box-shadow:6px 0 6px -5px rgba(0,0,0,.75);
  }
  .cn-table th:first-child{z-index:4}
}

@media (max-width:640px){

  /* ── Hielos · Inventarios y Almacenes ERP (.inv-table) ──
     Se fijan Zona y Sucursal: 48 + 92 = 140px de ~300, dejando el resto
     para los datos. Zona sola no serviría — identifica el grupo, no la fila. */
  .inv-tablewrap{position:relative}

  .inv-tablewrap .inv-table th:nth-child(1),
  .inv-tablewrap .inv-table td:nth-child(1){
    position:sticky;left:0;z-index:3;
    width:48px;min-width:48px;max-width:48px;
    background:rgba(15,15,19,.96);
  }
  .inv-tablewrap .inv-table th:nth-child(2),
  .inv-tablewrap .inv-table td:nth-child(2){
    position:sticky;left:48px;z-index:3;
    width:92px;min-width:92px;max-width:92px;
    background:rgba(15,15,19,.96);
    /* La sombra marca la costura: avisa de que hay contenido debajo. */
    box-shadow:6px 0 6px -5px rgba(0,0,0,.75);
  }
  /* El encabezado ya es sticky arriba; al cruzarse con la columna fija
     necesita ganar, si no el texto de la fila se dibuja encima. */
  .inv-tablewrap .inv-table th:nth-child(1),
  .inv-tablewrap .inv-table th:nth-child(2){z-index:4}

  /* Que el nombre largo no rompa el ancho fijo */
  .inv-tablewrap .inv-table td:nth-child(2){
    white-space:normal;overflow-wrap:anywhere;line-height:1.25;
  }

  /* ── Canastas · Reporte (.cn-table) ── */
  .cn-table th:first-child,
  .cn-table td:first-child{
    position:sticky;left:0;z-index:3;
    background:rgba(15,15,19,.96);
    box-shadow:6px 0 6px -5px rgba(0,0,0,.75);
    max-width:120px;overflow-wrap:anywhere;
  }
  .cn-table th:first-child{z-index:4}
}

/* ══════════════════════════════════════════════════════════════════════
   ARREGLOS COMPARTIDOS · benefician a las 4 unidades a la vez
   Medido a 375px contra el portal real, no deducido.
════════════════════════════════════════════════════════════════════════ */

/* ── 1. Asistencia semanal: 10 columnas a 30px ───────────────────────
   .asist-table lleva table-layout:fixed + width:100% (css:2438). Eso
   impide desbordar, asi que el contenedor con overflow-x nunca llega a
   scrollear: las 10 columnas se reparten 303px a 30px cada una y el
   nombre "Paulina" se dibuja partido letra por letra, 98px de alto.
   Afecta a Hielos y a GACAMA, que comparten esta tabla. */
@media (max-width:640px){
  .asist-table{
    table-layout:auto;
    min-width:580px;        /* fuerza el desborde -> el wrapper ya scrollea */
    word-break:normal;
  }
  .asist-table th, .asist-table td{white-space:nowrap}

  /* La columna del trabajador se queda fija: al desplazarte a los dias no
     puedes perder de vista de quien es la fila. */
  .asist-table th:first-child,
  .asist-table td:first-child{
    position:sticky;left:0;z-index:3;
    min-width:106px;
    background:rgba(15,15,19,.96);
    box-shadow:6px 0 6px -5px rgba(0,0,0,.75);
    white-space:normal;
  }
  .asist-table th:first-child{z-index:4}
}

/* ── 2. Tablas de reporte: el min-width anulado ──────────────────────
   .rep-table nace con min-width:520px (css:513) para poder scrollear,
   pero la regla movil (css:612) lo pone a 0 y con ello desactiva el
   scroll que el contenedor si permitia: las columnas se comprimen. */
@media (max-width:640px){
  .rep-table{min-width:520px}
  /* .cn-table (reporte de Canastas) nunca tuvo min-width: se comprimia
     igual, con 6 columnas en 311px. */
  .cn-table{min-width:480px}
  .cn-table th:first-child,
  .cn-table td:first-child{
    position:sticky;left:0;z-index:3;
    background:rgba(15,15,19,.96);
    box-shadow:6px 0 6px -5px rgba(0,0,0,.75);
  }
  .cn-table th:first-child{z-index:4}
}

/* ── 3. Areas tactiles que se escapaban de la lista ──────────────────
   La regla de 44x44 (css:3926) no es global: es una lista blanca de 17
   clases. Estas se quedaban entre 28 y 33px, por debajo del minimo. */
@media (pointer:coarse), (max-width:768px){
  .asist-view-tab,
  .chart-tab,
  .mat-filter-btn,
  .urg-btn,
  .cn-btn,
  .cmap-pill,
  .inv-step-btn{
    min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
  }
}

/* ── 4. Escritorio: el contenido no tenia ancho maximo ───────────────
   #main es flex:1 sin tope, asi que en un monitor de 2560px el contenido
   mide ~2280px: una tabla de 5 columnas reparte 450px por celda para
   valores de dos caracteres. */
@media (min-width:1700px){
  #content{max-width:1600px;margin-inline:auto}
}

/* ── 5. Rejillas con columnas fantasma ───────────────────────────────
   auto-fill crea las columnas aunque esten vacias: con 5 indicadores en
   pantalla ancha quedan 11 celdas en blanco estirando la fila. auto-fit
   las colapsa y reparte el espacio entre las que si tienen contenido. */
.rep-stat-grid, .resumen-grid, .cn-grid, .ai-users{
  grid-template-columns:repeat(auto-fit, minmax(var(--grid-min, 130px), 1fr));
}
.cn-grid{--grid-min:260px}
.ai-users{--grid-min:200px}

/* ══════════════════════════════════════════════════════════════════════
   PORTADA · estado de la operación
   La rejilla de indicadores estaba en estilos en línea dentro del JS; aquí
   pasa a CSS para poder adaptarla por tamaño sin tocar la plantilla.
════════════════════════════════════════════════════════════════════════ */
/* Flex y no grid. Las tarjetas son 3 o 4 segun a que unidades tenga acceso
   la persona, y con un numero de columnas fijo ese recuento variable deja un
   hueco: medido a 1100px de ventana salian tres arriba y "Tareas" sola abajo
   con 450px de vacio al lado. Ninguna combinacion de minmax lo evita en todos
   los anchos, porque el problema no es el ancho sino que el total no divide.
   Con flex-wrap, la ultima fila reparte el sobrante entre lo que haya: la
   tarjeta suelta se estira en lugar de dejar el hueco. */
.dash-kpis{
  display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 28px;
}
/* 165 y no 190: a 700px de contenido —una ventana de 1100 con el sidebar—
   190 solo deja sitio para tres y la cuarta se iba sola a una fila entera,
   dando a "Tareas" el ancho de la pantalla. Con 165 las cuatro entran en una
   fila de 166 cada una, y donde no quepan siguen repartiendose sin hueco. */
.dash-kpis > *{flex:1 1 165px;min-width:0}

/* ── Requiere atención ──
   Solo se pinta cuando hay algo. Un bloque que dice "0 incidencias" ocupa el
   mismo espacio que uno con problemas y entrena a la gente a ignorarlo. */
.dash-atencion{
  margin:20px 0 4px;padding:14px 16px 8px;
  background:var(--surf);border:1px solid rgba(234,179,8,.22);
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.dash-atencion-tit{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px;
}
.dash-atencion-row{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 2px;min-height:44px;
  background:transparent;border:0;border-top:1px solid var(--line);
  color:var(--cream-d);font:inherit;font-size:13px;text-align:left;cursor:pointer;
  transition:color .14s ease;
}
.dash-atencion-row:first-of-type{border-top:0}
.dash-atencion-row:hover{color:var(--cream)}
.dash-atencion-punto{
  width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;
}
.dash-atencion-txt{flex:1;text-wrap:pretty}
.dash-atencion-chev{color:var(--cream-x);font-size:16px;line-height:1}
.dash-atencion-row:hover .dash-atencion-chev{color:var(--cream-d)}

/* Los números de los indicadores tienen que ser tabulares: "24/27" y "100%"
   cambian de ancho al refrescar y la rejilla da un salto. */
.dash-kpi, .dash-kpis{font-variant-numeric:tabular-nums lining-nums}

@media (max-width:480px){
  .dash-kpis{gap:10px}
  /* A 375px caben dos por fila: 190 de base bajan a 160 para que no salte a una. */
  .dash-kpis > *{flex-basis:140px}
  .dash-kpi{padding:14px 15px!important}
}

/* ══════════════════════════════════════════════════════════════════════
   AVISO DE ANTIGÜEDAD DEL INVENTARIO
   El color sube de tono con las horas. A la primera hora es casi invisible
   — un aviso que grita siempre deja de leerse — y solo se vuelve rojo
   cuando el número ya no sirve para decidir un surtido.
════════════════════════════════════════════════════════════════════════ */
.stock-edad{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 14px;
  border-radius:var(--r-md);
  font-size:13px;line-height:1.45;
  border:1px solid var(--line);
  background:var(--surf);
  color:var(--cream-f);
}
.stock-edad strong{font-weight:700}
.stock-edad-txt{flex:1;min-width:200px;text-wrap:pretty}
.stock-edad-punto{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:currentColor;
}

/* Recién actualizado: presencia mínima, solo confirma. */
.stock-edad[data-nivel="fresco"]{color:var(--cream-f)}
.stock-edad[data-nivel="fresco"] .stock-edad-punto{background:var(--aur-g)}

/* Unas horas: ya conviene saberlo. */
.stock-edad[data-nivel="tibio"]{
  color:var(--cream-d);
  border-color:rgba(255,255,255,.12);
}
.stock-edad[data-nivel="tibio"] .stock-edad-punto{background:var(--cream-x)}

/* Medio día o más: el número ya no representa la realidad. */
.stock-edad[data-nivel="viejo"]{
  color:var(--gold);
  background:rgba(234,179,8,.06);
  border-color:rgba(234,179,8,.24);
}

/* Días: no se decide surtido con esto. */
.stock-edad[data-nivel="critico"]{
  color:#fca5a5;
  background:rgba(239,68,68,.07);
  border-color:rgba(239,68,68,.26);
}

/* Sin dato no es lo mismo que cero: el mensaje lo dice y el tono lo apoya. */
.stock-edad[data-nivel="sin"]{
  color:var(--cream-d);
  background:rgba(255,255,255,.03);
  border-style:dashed;
  border-color:var(--line-hi);
}
.stock-edad[data-nivel="sin"] .stock-edad-punto{background:var(--cream-x)}

.stock-edad-btn{
  flex-shrink:0;min-height:34px;padding:6px 12px;
  border-radius:100px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;
  color:inherit;background:rgba(255,255,255,.06);
  border:1px solid currentColor;
  opacity:.85;
  transition:opacity .14s ease, background .14s ease;
}
.stock-edad-btn:hover:not(:disabled){opacity:1;background:rgba(255,255,255,.12)}
.stock-edad-btn:disabled{opacity:.5;cursor:progress}

/* Dentro del mapa va sobre la cartografía: necesita fondo opaco. */
.hmapa-shell .stock-edad,
#hielosMapa .stock-edad{
  background:var(--glass-bg, rgba(15,15,19,.88));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

@media (max-width:640px){
  .stock-edad{font-size:12px;padding:10px 12px}
  .stock-edad-btn{width:100%;min-height:44px}
}

/* Halo para el texto claro del mapa de calor: sostiene la franja de opacidad
   intermedia (.45-.6), donde ningun color llega holgado a 4.5:1 por si solo. */
.rep-heatmap td.rep-hm-cell{ text-shadow:none }
.rep-heatmap td.rep-hm-cell[style*="--tinta:var(--cream)"]{
  text-shadow:0 1px 2px rgba(0,0,0,.65);
}

/* ══════════════════════════════════════════════════════════════════════
   AGENDA DE DIRECCIÓN  (js/agenda.js)
   Dos niveles de prioridad y nada más. Con cinco, todo acaba siendo "alta"
   y el nivel deja de significar algo.
════════════════════════════════════════════════════════════════════════ */
.ag-wrap{
  margin:0 0 28px;padding:18px 20px;
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04);
  font-variant-numeric:tabular-nums lining-nums;
}
.ag-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
.ag-titulo{
  margin:0;font-size:15px;font-weight:700;color:var(--cream);
  letter-spacing:-.012em;text-wrap:balance;
}
.ag-sub{margin:3px 0 0;font-size:12px;color:var(--cream-f);line-height:1.45;text-wrap:pretty}
.ag-acciones{display:flex;gap:8px;flex-wrap:wrap}
.ag-nuevo{
  min-height:36px;padding:7px 13px;border-radius:100px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;
  color:var(--cream-d);background:transparent;border:1px dashed var(--line-hi);
  transition:color .14s ease, background .14s ease, border-color .14s ease;
}
.ag-nuevo:hover{color:var(--cream);background:rgba(255,255,255,.05);border-style:solid}

.ag-bloque + .ag-bloque{margin-top:18px}
.ag-bloque-tit{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cream-x);margin-bottom:8px;
}
.ag-cuenta{
  display:inline-block;margin-left:4px;padding:1px 7px;border-radius:100px;
  background:rgba(255,255,255,.07);color:var(--cream-d);
  font-size:10px;letter-spacing:0;
}

/* ── elemento ── */
.ag-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 2px;border-top:1px solid var(--line);
}
.ag-item:first-of-type{border-top:0}
.ag-item-cuerpo{flex:1;min-width:0}
.ag-item-tit{font-size:14px;font-weight:600;color:var(--cream);line-height:1.4;text-wrap:pretty}
.ag-item-det{font-size:12px;color:var(--cream-d);line-height:1.5;margin-top:3px;text-wrap:pretty}
.ag-item-meta{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:5px;
  font-size:11px;color:var(--cream-f);
}
/* El plazo lleva el color, no la fila entera: un muro rojo deja de leerse. */
.ag-item-meta [data-estado="vencido"]{color:#fca5a5;font-weight:600}
.ag-item-meta [data-estado="hoy"]{color:var(--gold);font-weight:600}
.ag-item-meta [data-estado="pronto"]{color:var(--cream-d)}

.ag-item-btns{display:flex;gap:6px;flex-shrink:0;opacity:0;transition:opacity .14s ease}
.ag-item:hover .ag-item-btns,
.ag-item:focus-within .ag-item-btns{opacity:1}
.ag-btn{
  min-height:30px;padding:4px 9px;border-radius:var(--r-sm);cursor:pointer;
  font:inherit;font-size:11px;font-weight:600;
  color:var(--cream-f);background:transparent;border:1px solid var(--line-s);
}
.ag-btn:hover{color:var(--cream);background:rgba(255,255,255,.06)}
.ag-btn-quitar:hover{color:var(--red);border-color:rgba(239,68,68,.30);background:rgba(239,68,68,.08)}

/* Prioridad alta: una barra a la izquierda, no un fondo que grite. */
.ag-item.is-alta{
  border-left:2px solid var(--gold);padding-left:10px;margin-left:-12px;
}

/* ── pendientes ── */
.ag-check{
  flex-shrink:0;width:20px;height:20px;margin-top:1px;
  border-radius:6px;cursor:pointer;
  border:1.5px solid var(--line-hi);background:transparent;
  color:var(--void);font-size:12px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .14s ease, border-color .14s ease, transform .12s ease;
}
.ag-check:hover{border-color:var(--cream-f)}
.ag-check:active{transform:scale(.9)}
.ag-item.is-hecho .ag-check{background:var(--aur-g);border-color:var(--aur-g)}
.ag-item.is-hecho .ag-item-tit{color:var(--cream-x);text-decoration:line-through}
.ag-item.is-hecho{opacity:.75}

.ag-toggle-hechos{
  margin-top:10px;padding:6px 0;min-height:34px;
  background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--cream-f);
}
.ag-toggle-hechos:hover{color:var(--cream-d)}

/* ── avisos ── */
.ag-pin{margin-right:5px;font-size:11px}
.ag-item.is-fijado .ag-item-tit{color:var(--cream)}

/* ── formulario ── */
.ag-form{
  margin:0 0 16px;padding:14px;border-radius:var(--r-md);
  background:var(--panel-2);border:1px solid var(--line-s);
  display:flex;flex-direction:column;gap:10px;
}
.ag-form-tit{font-size:12px;font-weight:700;color:var(--cream);letter-spacing:-.005em}
.ag-campo{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px}
.ag-campo-sm{flex:0 1 170px}
.ag-campo-check{justify-content:flex-end}
.ag-label{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cream-f)}
.ag-label-check{
  display:flex;align-items:center;gap:7px;min-height:38px;cursor:pointer;
  font-size:12px;color:var(--cream-d);
}
.ag-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--cream-x)}
.ag-input{font-size:13px;padding:8px 10px}
textarea.ag-input{resize:vertical;min-height:52px;font-family:inherit}
.ag-form-fila{display:flex;gap:10px;flex-wrap:wrap}
.ag-form-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.ag-form-err{font-size:11px;color:var(--red);min-height:1em}

/* ── estados ── */
.ag-vacio{padding:22px 6px;text-align:center;font-size:13px;color:var(--cream-f)}
.ag-vacio-suave{padding:12px 2px;font-size:13px;color:var(--cream-x);line-height:1.5}
.ag-error{
  padding:14px;border-radius:var(--r-md);
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.22);
  color:var(--cream-d);font-size:13px;
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;
}
.ag-error strong{color:var(--cream)}
.ag-error-hint{font-size:12px;color:var(--cream-f)}
.ag-error code{
  font-family:ui-monospace,monospace;font-size:11px;
  background:rgba(255,255,255,.07);padding:1px 5px;border-radius:6px;
}

.ag-wrap :focus-visible{
  box-shadow:none;
  outline:2px solid color-mix(in oklab, var(--ice) 55%, transparent);
  outline-offset:2px;
}

@media (max-width:640px){
  .ag-wrap{padding:16px 14px}
  .ag-acciones{width:100%}
  .ag-nuevo{flex:1;min-height:44px}
  /* En táctil no hay hover: los botones de cada fila se ven siempre. */
  .ag-item-btns{opacity:1}
  .ag-btn{min-height:38px;padding:6px 11px}
  .ag-campo, .ag-campo-sm{flex:1 1 100%}
}
@media (pointer:coarse){
  .ag-item-btns{opacity:1}
}

/* ── grupos por plazo ──
   El color va en el contador, no en los renglones. Doce filas rojas dejan de
   leerse en dos días y entonces el rojo ya no avisa de nada. */
.ag-grupo + .ag-grupo{margin-top:12px}
.ag-grupo-tit{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;color:var(--cream-f);
  padding:4px 0 2px;
}
.ag-grupo-cuenta{
  min-width:18px;padding:1px 6px;border-radius:100px;text-align:center;
  font-size:10px;font-weight:700;
  background:rgba(255,255,255,.07);color:var(--cream-d);
}
.ag-grupo-tit[data-grupo="vencido"]{color:#fca5a5}
.ag-grupo-cuenta[data-grupo="vencido"]{background:rgba(239,68,68,.16);color:#fca5a5}
.ag-grupo-tit[data-grupo="hoy"]{color:var(--gold)}
.ag-grupo-cuenta[data-grupo="hoy"]{background:rgba(234,179,8,.16);color:var(--gold)}

/* ══════════════════════════════════════════════════════════════════════
   AGENDA · vista de calendario
   El mes sirve para ubicarse; el trabajo ocurre en la lista del día que va
   debajo. Por eso las celdas llevan puntos y no texto: un mes con títulos
   recortados no se lee, y con seis administradores tampoco hace falta.
════════════════════════════════════════════════════════════════════════ */
.ag-cal{margin:4px 0 16px}
.ag-cal-barra{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.ag-cal-mes{
  flex:1;font-size:14px;font-weight:700;color:var(--cream);
  letter-spacing:-.01em;text-transform:capitalize;
}
.ag-cal-nav{
  width:32px;height:32px;flex-shrink:0;border-radius:var(--r-md);cursor:pointer;
  border:1px solid var(--line-s);background:rgba(255,255,255,.04);
  color:var(--cream-d);font-size:11px;line-height:1;
  transition:background .14s ease,color .14s ease;
}
.ag-cal-nav:hover{background:rgba(255,255,255,.09);color:var(--cream)}
.ag-cal-hoy{
  flex-shrink:0;min-height:32px;padding:5px 12px;border-radius:100px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;
  color:var(--cream-d);background:transparent;border:1px solid var(--line-s);
}
.ag-cal-hoy:hover{color:var(--cream);background:rgba(255,255,255,.06)}

.ag-cal-dias,
.ag-cal-rejilla{
  display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;
}
.ag-cal-dias{
  margin-bottom:4px;
  font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--cream-x);text-align:center;
}

.ag-cal-celda{
  position:relative;min-height:52px;padding:5px 4px 4px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border-radius:var(--r-md);cursor:pointer;
  background:transparent;border:1px solid transparent;
  font:inherit;color:var(--cream-f);
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.ag-cal-celda.is-vacia{cursor:default;pointer-events:none}
.ag-cal-celda:hover:not(.is-vacia){background:rgba(255,255,255,.05);color:var(--cream-d)}
.ag-cal-celda.tiene{color:var(--cream-d)}
/* Hoy se marca con un anillo, no con relleno: el relleno compite con el día
   seleccionado y entonces no se distingue cuál es cuál. */
.ag-cal-celda.is-hoy{border-color:var(--line-hi);color:var(--cream)}
.ag-cal-celda.is-sel{
  background:rgba(255,255,255,.10);border-color:var(--line-hi);color:var(--cream);
}
.ag-cal-num{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ag-cal-celda.is-hoy .ag-cal-num{font-weight:800}

.ag-cal-puntos{display:flex;align-items:center;gap:3px;min-height:6px}
.ag-punto{
  width:5px;height:5px;border-radius:50%;display:inline-block;flex-shrink:0;
  background:var(--cream-x);
}
.ag-punto[data-t="pendiente"]{background:var(--ice)}
.ag-punto[data-t="aviso"]{background:var(--gold)}
.ag-punto[data-t="vencido"]{background:#f87171}
.ag-cal-mas{font-size:9px;font-weight:700;color:var(--cream-x);margin-left:1px}

.ag-cal-leyenda{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;
  font-size:11px;color:var(--cream-x);
}
.ag-cal-leyenda span{display:inline-flex;align-items:center;gap:5px}

/* ── franja de vencidos ──
   Los vencidos viven en meses pasados, así que el calendario solo no los
   enseña. Esta franja es el único sitio donde el rojo grita, y por eso
   funciona: aparece solo cuando hay algo. */
.ag-vencidos{
  display:flex;align-items:center;gap:9px;width:100%;
  margin:0 0 14px;padding:10px 13px;min-height:44px;
  border-radius:var(--r-md);cursor:pointer;text-align:left;
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.24);
  color:#fca5a5;font:inherit;font-size:13px;
  transition:background .14s ease;
}
.ag-vencidos:hover{background:rgba(239,68,68,.12)}
.ag-vencidos-n{
  flex-shrink:0;min-width:22px;padding:1px 7px;border-radius:100px;text-align:center;
  background:rgba(239,68,68,.20);font-weight:800;font-size:12px;
}

/* ── día abierto ── */
.ag-dia{
  margin-top:2px;padding-top:12px;border-top:1px solid var(--line);
}
.ag-dia-tit{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:13px;font-weight:700;color:var(--cream);
}
.ag-dia-hoy{
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ice);background:rgba(0,212,236,.12);
  border:1px solid rgba(0,212,236,.26);border-radius:100px;padding:1px 7px;
}
.ag-link{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--cream-d);text-decoration:underline;text-underline-offset:2px;
}
.ag-link:hover{color:var(--cream)}

@media (max-width:640px){
  .ag-cal-celda{min-height:46px;padding:4px 2px 3px}
  .ag-cal-num{font-size:12px}
  .ag-cal-rejilla,.ag-cal-dias{gap:3px}
  .ag-cal-leyenda{gap:10px}
  .ag-cal-mes{font-size:13px}
}

/* Los fijados viven fuera del calendario, con un borde que los separa del
   resto sin gritar. Máximo 3 por el tope del endpoint, así que la banda no
   puede crecer hasta tapar el mes. */
.ag-fijados{
  margin-bottom:14px;padding:10px 12px;
  border:1px solid var(--line-s);border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
}
.ag-fijados .ag-bloque-tit{margin-bottom:4px}

/* ══════════════════════════════════════════════════════════════════════
   AGENDA · responsables
   Cuatro personas fijas, así que botones con la inicial en su color: se ve
   quién está puesto sin abrir nada. Un desplegable de búsqueda tendría
   sentido con cientos de personas, no con cuatro.
════════════════════════════════════════════════════════════════════════ */
.ag-av{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  font-size:9px;font-weight:800;letter-spacing:.01em;
  color:var(--void);background:var(--c, var(--cream-x));
  border:1.5px solid var(--surf);
}
.ag-av-mas{background:rgba(255,255,255,.14);color:var(--cream-d)}

.ag-pila{
  display:inline-flex;align-items:center;margin-top:6px;padding:2px;
  background:none;border:0;cursor:pointer;border-radius:100px;
  transition:background .14s ease;
}
/* Se solapan: cuatro avatares sueltos ocupan más de lo que informan. */
.ag-pila .ag-av + .ag-av{margin-left:-7px}
.ag-pila:hover{background:rgba(255,255,255,.06)}
.ag-pila-vacia{
  font:inherit;font-size:11px;font-weight:600;color:var(--cream-x);
  padding:3px 9px;border:1px dashed var(--line-hi);min-height:26px;
}
.ag-pila-vacia:hover{color:var(--cream-d)}

.ag-resp{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ag-resp-btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:4px 10px 4px 4px;border-radius:100px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;
  color:var(--cream-f);background:transparent;
  border:1px solid var(--line-s);
  transition:color .14s ease, background .14s ease, border-color .14s ease;
}
.ag-resp-btn .ag-av{opacity:.40;transition:opacity .14s ease}
.ag-resp-btn:hover{color:var(--cream-d)}
/* Quien responde va sólido y con etiqueta; quien acompaña, solo contorno.
   La diferencia tiene que verse sin leer: es toda la información. */
.ag-resp-btn.resp{
  color:var(--cream);
  border-color:color-mix(in oklab, var(--c) 70%, transparent);
  background:color-mix(in oklab, var(--c) 18%, transparent);
}
.ag-resp-btn.acomp{
  color:var(--cream-d);
  border-color:color-mix(in oklab, var(--c) 40%, transparent);
}
.ag-resp-btn.resp .ag-av, .ag-resp-btn.acomp .ag-av{opacity:1}
.ag-resp-btn.acomp .ag-av{opacity:.75}
.ag-resp-tag{
  font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--c);opacity:.95;
}
.ag-resp-nota{
  flex:1 1 100%;margin:4px 0 0;
  font-size:11px;color:var(--cream-x);line-height:1.45;text-wrap:pretty;
}

/* Acompañante: más chico y con menos peso que quien responde. */
.ag-av-ac{width:19px;height:19px;font-size:8px;opacity:.85}
.ag-av-nadie{background:transparent;border:1.5px dashed var(--line-hi);color:var(--cream-x)}
.ag-pila-txt{
  margin-left:7px;font-size:11px;font-weight:600;color:var(--cream-f);
  white-space:nowrap;
}
.ag-pila:hover .ag-pila-txt{color:var(--cream-d)}
.ag-resp-nom{white-space:nowrap}

.ag-resp-todos{
  min-height:34px;padding:5px 12px;border-radius:100px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;
  color:var(--cream-f);background:transparent;border:1px dashed var(--line-hi);
}
.ag-resp-todos:hover{color:var(--cream-d)}
.ag-resp-todos.on{color:var(--cream);border-style:solid;background:rgba(255,255,255,.07)}

.ag-filtro{
  min-height:36px;padding:7px 13px;border-radius:100px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;
  color:var(--cream-f);background:transparent;border:1px solid var(--line-s);
  transition:color .14s ease, background .14s ease;
}
.ag-filtro:hover{color:var(--cream-d)}
.ag-filtro.on{color:var(--cream);background:rgba(255,255,255,.10);border-color:var(--line-hi)}

@media (max-width:640px){
  .ag-resp-btn{flex:1 1 calc(50% - 3px);justify-content:flex-start;min-height:44px}
  .ag-resp-todos{flex:1 1 100%;min-height:44px}
  .ag-filtro{flex:1 1 100%;min-height:44px}
}

/* ══════════════════════════════════════════════════════════════════════
   HIELOS · ALMACENES ERP
   La pantalla responde una pregunta: de lo que el ERP dice tener, cuanto
   ve el resto del portal. Por eso el resumen va arriba y las filas se
   agrupan por accion pendiente en vez de por codigo de almacen.
════════════════════════════════════════════════════════════════════════ */
.aerm-resumen{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin:0 0 14px;
}
.aerm-tile{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
}
.aerm-tile-k{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream-x);
}
.aerm-tile-v{
  font-size:22px;font-weight:800;line-height:1.1;color:var(--cream);
  font-variant-numeric:tabular-nums;
}
.aerm-tile-s{font-size:11px;line-height:1.32;color:var(--cream-d)}
/* Solo la cifra que pide accion se pinta. Si se pintaran las cuatro, ninguna
   destacaria y la pantalla volveria a no decir nada. */
.aerm-tile.is-alerta{background:rgba(234,179,8,.08);border-color:rgba(234,179,8,.30)}
.aerm-tile.is-alerta .aerm-tile-v{color:#facc15}
.aerm-tile.is-alerta .aerm-tile-s{color:#fcd34d}

/* ── encabezados de grupo ── */
.aerm-grupo-td{
  padding:17px 14px 7px;background:transparent;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.aerm-row + .aerm-grupo .aerm-grupo-td{padding-top:22px}
.aerm-grupo-tit{
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cream-d);
}
.aerm-grupo-n{
  margin-left:9px;font-size:11px;color:var(--cream-x);
  font-variant-numeric:tabular-nums;
}
.aerm-grupo-sub{
  display:block;margin-top:4px;max-width:56ch;
  font-size:12px;font-weight:400;line-height:1.35;letter-spacing:0;
  text-transform:none;color:var(--cream-x);
}
.aerm-grupo.is-alerta .aerm-grupo-tit{color:#facc15}
.aerm-grupo.is-alerta .aerm-grupo-sub{color:#fcd34d}

/* ── insignias de estado ── */
.aerm-b-ok{background:rgba(34,197,94,.16);color:#4ade80}
.aerm-b-alerta{background:rgba(234,179,8,.18);color:#facc15}
.aerm-b-vacio{background:rgba(255,255,255,.06);color:var(--cream-x)}
.aerm-b-err{background:rgba(239,68,68,.18);color:#f87171}

/* Las columnas fijas se escribieron para Inventarios, donde la 1 es Zona y la
   2 Sucursal. Aqui la 2 es el selector de sucursal, y a 92px de ancho maximo
   quedaba ilegible justo el control con el que se trabaja. El encabezado sigue
   fijo arriba; lo que se suelta es el anclaje lateral. */
.inv-tablewrap #aermTable > tbody > tr > td{
  position:static;left:auto;width:auto;min-width:0;max-width:none;box-shadow:none;
  /* El fondo opaco tambien venia de la columna fija. Al soltar el anclaje y no
     soltarlo, quedaba un rectangulo negro flotando junto al codigo. */
  background:transparent;
}
.inv-tablewrap #aermTable > thead > tr > th{
  position:sticky;top:0;left:auto;width:auto;min-width:0;max-width:none;box-shadow:none;
}

/* ── movil: tarjetas, no tabla ──
   Se elige tarjeta y no scroll horizontal porque aqui no se comparan almacenes
   entre si: se abre uno, se mira su existencia y se le asigna sucursal. Son 31
   registros, dentro del rango donde la tarjeta sigue leyendose bien.
   Los role= mantienen la semantica de tabla que display:block borra. */
@media (max-width:768px){
  #aermTable{display:block;min-width:0;width:100%}
  #aermTable > thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  #aermTable > tbody{display:block}
  #aermTable > tbody > tr{display:block}

  #aermTable > tbody > tr.aerm-grupo > td{
    display:block;padding:18px 2px 6px;border-bottom:0;
  }
  #aermTable > tbody > tr.aerm-grupo:first-child > td{padding-top:4px}

  /* Las tres cifras comparten renglon: apiladas, cada almacen ocupaba media
     pantalla y habia que desplazarse para ver cuatro numeros. */
  #aermTable > tbody > tr.aerm-row{
    display:grid;gap:9px 10px;margin:0 0 8px;padding:12px 13px;
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-areas:
      "cod cod cod est est est"
      "suc suc suc suc suc suc"
      "k5  k5  k3  k3  tot tot";
    align-items:center;
    border:1px solid rgba(255,255,255,.07);border-radius:14px;
    background:rgba(255,255,255,.025);
  }
  #aermTable > tbody > tr.aerm-row > td{
    display:block;padding:0;border:0;text-align:left;
  }
  #aermTable .aerm-cod{grid-area:cod;font-size:19px;font-weight:800;letter-spacing:-.01em}
  #aermTable .aerm-estado{grid-area:est;justify-self:end;text-align:right}
  #aermTable .aerm-suc{grid-area:suc}
  #aermTable .aerm-suc .inv-erpalm-sel{width:100%;min-height:44px;font-size:15px}
  #aermTable .aerm-suc .inv-cell-ro{font-size:14px;color:var(--cream-d)}

  #aermTable > tbody > tr.aerm-row > td:nth-child(3){grid-area:k5}
  #aermTable > tbody > tr.aerm-row > td:nth-child(4){grid-area:k3}
  #aermTable > tbody > tr.aerm-row > td:nth-child(5){grid-area:tot}
  /* Sin la etiqueta quedan tres numeros sueltos sin decir de que son: el
     encabezado que se los daba esta oculto en esta vista. */
  #aermTable > tbody > tr.aerm-row > td:nth-child(3)::before,
  #aermTable > tbody > tr.aerm-row > td:nth-child(4)::before,
  #aermTable > tbody > tr.aerm-row > td:nth-child(5)::before{
    content:attr(data-k);display:block;margin-bottom:1px;
    font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--cream-x);
  }
  #aermTable > tbody > tr.aerm-row > td:nth-child(3),
  #aermTable > tbody > tr.aerm-row > td:nth-child(4),
  #aermTable > tbody > tr.aerm-row > td:nth-child(5){
    font-size:15px;font-variant-numeric:tabular-nums;
  }
}

/* Cuatro fichas en 375px dan 80px cada una: ilegibles. */
@media (max-width:900px){
  .aerm-resumen{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .aerm-tile{padding:10px 12px}
  .aerm-tile-v{font-size:19px}
}

/* El separador empujaba Refrescar a un segundo renglon dejando un hueco muerto
   a la izquierda. En movil no hay espacio que repartir: la busqueda ocupa el
   ancho y el boton va debajo, completo y pulsable. */
.aerm-toolbar-sp{flex:1}
@media (max-width:768px){
  .aerm-toolbar{gap:9px}
  .aerm-toolbar .aerm-toolbar-sp{display:none}
  .aerm-toolbar .inv-search{flex:1 1 100%;max-width:none}
  .aerm-toolbar .inv-save-btn{flex:1 1 100%;min-height:44px;justify-content:center}
}

/* El boton flotante (52px, a 76 del borde) y la burbuja de ayuda viven fijos
   sobre la esquina inferior. Sin colchon al final de #main, lo ultimo de
   CUALQUIER seccion queda debajo de ellos y no hay forma de sacarlo: no es
   contenido que pasa por abajo al desplazarse, es contenido que se acaba ahi.
   Va en #main y no en cada seccion porque el estorbo es el mismo en todas. */
@media (max-width:768px){
  #main{padding-bottom:140px}
}

/* ══════════════════════════════════════════════════════════════════════
   OBJETIVOS TACTILES · movil
   Medidos con el portal abierto a 375px en las 18 vistas. Estos cinco
   controles quedaban por debajo de 34px de alto. El de 22px ni siquiera
   alcanzaba el minimo de 24x24 CSS px que pide WCAG 2.2 (2.5.8, nivel AA);
   ninguno llegaba a los 44pt de la guia de Apple. El tamano visible no
   cambia donde apretaria el renglon: crece la zona que responde al dedo.
════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .gm-edit-btn{position:relative;min-height:32px}
  /* La zona sensible se estira con un pseudo para no separar el renglon
     de la meta, que ya va justo de alto. */
  .gm-edit-btn::after{content:'';position:absolute;inset:-7px -8px}
  .gm-addmeta-btn{min-height:44px}
  .hmapa-route-refresh{width:44px;height:44px;font-size:16px}
  .hmapa-btn-primary,.hmapa-btn-ghost{min-height:44px}
  .tq-map-search input{min-height:44px;font-size:16px}
  .tq-map-search{min-height:44px}
}

/* El conteo junto a cada filtro: sin el hay que pulsar los cinco para
   descubrir que tres estan vacios. El cero se apaga en vez de esconderse —
   "0 vencidas" es informacion util, y ocultarlo haria saltar el ancho del
   boton al aparecer y desaparecer. */
.tfs-n{
  margin-left:6px;padding:1px 6px;border-radius:999px;
  font-size:10.5px;font-weight:700;line-height:1.5;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.10);color:var(--cream-d);
}
.tfs-btn.active .tfs-n{background:rgba(255,255,255,.18);color:var(--cream)}
.tfs-n.is-cero{background:transparent;color:var(--cream-x)}

/* La barra no cabe en 375px con cinco botones y sus cifras: se desplaza
   en su propio carril en vez de romper el ancho de la pagina. */
@media (max-width:640px){
  .task-filter-seg{
    display:flex;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .task-filter-seg::-webkit-scrollbar{display:none}
  .task-filter-seg .tfs-btn{flex:0 0 auto;padding:10px 12px}
}

/* El cajon quedaba por debajo del boton flotante (z:950) y de la burbuja de
   ayuda (z:900), asi que con el menu abierto ambos flotaban encima — la
   burbuja tapaba justo el nombre del usuario en el pie. Un menu modal manda
   sobre el contenido que oscurece, incluidos sus botones flotantes. */
@media (max-width:900px){
  .sidebar-backdrop{z-index:960}
  #sidebar{z-index:970}
}