/* ==========================================================================
   LOGÍSTICA 24 HRS — MULTI-THEME LUXURY MINIMALIST STYLESHEET
   Compact, Ultra-Light Typography, Hardware Acceleration & Theme Engine
   Default: Theme White (Marfil & Oro Alabastro)
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEME 1 (DEFAULT): BLANCO MARFIL & ORO (Crisp Alabaster Luxury)
   -------------------------------------------------------------------------- */
:root, body.theme-white {
  --bg-core: #F6F8FB;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F1F4F9;
  --bg-elevated-hover: #E7ECF4;
  --bg-table-header: #F1F4F9;
  --bg-stage: #E6EBF2;
  --bg-glass: rgba(255, 255, 255, 0.88);
  --bg-glass-card: rgba(255, 255, 255, 0.92);
  --app-gradient: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #F1F4F8 85%);
  
  --border-hairline: rgba(15, 23, 42, 0.08);
  --border-light: rgba(15, 23, 42, 0.16);
  --border-gold: rgba(180, 130, 20, 0.38);
  
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --text-faint: #94A3B8;
  
  --gold-primary: #A17416;
  --gold-glow: rgba(161, 116, 22, 0.2);
  --gold-deep: #78540B;
  --gold-surface: #FBF8EE;
  
  --emerald-primary: #059669;
  --emerald-bg: rgba(5, 150, 105, 0.08);
  --emerald-border: rgba(5, 150, 105, 0.28);
  
  --cyan-primary: #0284C7;
  --cyan-bg: rgba(2, 132, 199, 0.08);
  --cyan-border: rgba(2, 132, 199, 0.28);
  
  --amber-primary: #D97706;
  --rose-primary: #DC2626;
  --rose-bg: rgba(220, 38, 38, 0.08);
  --rose-border: rgba(220, 38, 38, 0.28);
  
  --box-shadow-card: 0 4px 20px rgba(15, 23, 42, 0.05);
  --box-shadow-nav: 0 2px 14px rgba(15, 23, 42, 0.06);
  --invoice-bg: #FFFFFF;
  --invoice-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  
  --code-bg: #0F172A;
  --code-text: #E2E8F0;
  
  --bbox-tag-bg: rgba(255, 255, 255, 0.95);
  --bbox-tag-color: #0F172A;
  --bbox-tag-border: rgba(15, 23, 42, 0.15);
  
  --btn-luxury-bg: linear-gradient(135deg, #FBF8EE 0%, #F5EED9 100%);
  --btn-luxury-hover: linear-gradient(135deg, #F5EED9 0%, #EFE4C4 100%);
  
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Cinzel', serif;
  
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
  --cell-padding-y: 6.5px;
  --cell-padding-x: 10px;
}

/* --------------------------------------------------------------------------
   THEME 2: OBSIDIANA & ORO (Deep Dark Onyx Luxury)
   -------------------------------------------------------------------------- */
body.theme-obsidian {
  --bg-core: #07080A;
  --bg-surface: #0E1015;
  --bg-elevated: #141720;
  --bg-elevated-hover: #1A1E29;
  --bg-table-header: #111319;
  --bg-stage: #050608;
  --bg-glass: rgba(14, 16, 21, 0.85);
  --bg-glass-card: rgba(20, 23, 32, 0.65);
  --app-gradient: radial-gradient(circle at 50% 0%, #151821 0%, #07080A 75%);
  
  --border-hairline: rgba(255, 255, 255, 0.065);
  --border-light: rgba(255, 255, 255, 0.14);
  --border-gold: rgba(229, 195, 120, 0.35);
  
  --text-primary: #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  --text-faint: #4B5563;
  
  --gold-primary: #E5C378;
  --gold-glow: rgba(229, 195, 120, 0.2);
  --gold-deep: #B89242;
  --gold-surface: #1E1B15;
  
  --emerald-primary: #34D399;
  --emerald-bg: rgba(52, 211, 153, 0.08);
  --emerald-border: rgba(52, 211, 153, 0.25);
  
  --cyan-primary: #38BDF8;
  --cyan-bg: rgba(56, 189, 248, 0.08);
  --cyan-border: rgba(56, 189, 248, 0.25);
  
  --amber-primary: #FBBF24;
  --rose-primary: #F87171;
  --rose-bg: rgba(248, 113, 113, 0.08);
  --rose-border: rgba(248, 113, 113, 0.25);
  
  --box-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4);
  --box-shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.4);
  --invoice-bg: #0E1015;
  --invoice-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  
  --code-bg: #060709;
  --code-text: #E2E8F0;
  
  --bbox-tag-bg: rgba(7, 8, 10, 0.9);
  --bbox-tag-color: #F3F4F6;
  --bbox-tag-border: var(--border-hairline);
  
  --btn-luxury-bg: linear-gradient(135deg, #24221A 0%, #151410 100%);
  --btn-luxury-hover: linear-gradient(135deg, #322F22 0%, #1C1A14 100%);
}

/* --------------------------------------------------------------------------
   THEME 3: TITANIO & PLATINO (Cool Metallic Slate & Ice Cyan)
   -------------------------------------------------------------------------- */
body.theme-titanium {
  --bg-core: #0A0E17;
  --bg-surface: #0F172A;
  --bg-elevated: #1E293B;
  --bg-elevated-hover: #293548;
  --bg-table-header: #141E33;
  --bg-stage: #070B12;
  --bg-glass: rgba(15, 23, 42, 0.88);
  --bg-glass-card: rgba(30, 41, 59, 0.65);
  --app-gradient: radial-gradient(circle at 50% 0%, #1E2B45 0%, #0A0E17 80%);
  
  --border-hairline: rgba(148, 163, 184, 0.12);
  --border-light: rgba(148, 163, 184, 0.22);
  --border-gold: rgba(56, 189, 248, 0.45);
  
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-faint: #475569;
  
  --gold-primary: #38BDF8; /* Cool cyan as high-tech primary */
  --gold-glow: rgba(56, 189, 248, 0.25);
  --gold-deep: #0284C7;
  --gold-surface: #112035;
  
  --emerald-primary: #10B981;
  --emerald-bg: rgba(16, 185, 129, 0.1);
  --emerald-border: rgba(16, 185, 129, 0.3);
  
  --cyan-primary: #38BDF8;
  --cyan-bg: rgba(56, 189, 248, 0.1);
  --cyan-border: rgba(56, 189, 248, 0.3);
  
  --amber-primary: #F59E0B;
  --rose-primary: #FB7185;
  --rose-bg: rgba(251, 113, 133, 0.1);
  --rose-border: rgba(251, 113, 133, 0.3);
  
  --box-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
  --box-shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.4);
  --invoice-bg: #0F172A;
  --invoice-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  
  --code-bg: #080C14;
  --code-text: #E2E8F0;
  
  --bbox-tag-bg: rgba(10, 14, 23, 0.95);
  --bbox-tag-color: #F8FAFC;
  --bbox-tag-border: var(--border-hairline);
  
  --btn-luxury-bg: linear-gradient(135deg, #162942 0%, #0F1A2C 100%);
  --btn-luxury-hover: linear-gradient(135deg, #1F3657 0%, #14233A 100%);
}

/* --------------------------------------------------------------------------
   THEME 4: ESMERALDA REAL (Imperial Velvet Jade & Fine Gold)
   -------------------------------------------------------------------------- */
body.theme-emerald {
  --bg-core: #040E0B;
  --bg-surface: #081C16;
  --bg-elevated: #0F2C24;
  --bg-elevated-hover: #163C31;
  --bg-table-header: #0B221B;
  --bg-stage: #020A08;
  --bg-glass: rgba(8, 28, 22, 0.88);
  --bg-glass-card: rgba(15, 44, 36, 0.7);
  --app-gradient: radial-gradient(circle at 50% 0%, #153A30 0%, #040E0B 80%);
  
  --border-hairline: rgba(52, 211, 153, 0.14);
  --border-light: rgba(52, 211, 153, 0.25);
  --border-gold: rgba(229, 195, 120, 0.45);
  
  --text-primary: #F0FDF4;
  --text-secondary: #A7F3D0;
  --text-muted: #6EE7B7;
  --text-faint: #34D399;
  
  --gold-primary: #FDE047;
  --gold-glow: rgba(253, 224, 71, 0.22);
  --gold-deep: #CA8A04;
  --gold-surface: #17332A;
  
  --emerald-primary: #34D399;
  --emerald-bg: rgba(52, 211, 153, 0.12);
  --emerald-border: rgba(52, 211, 153, 0.35);
  
  --cyan-primary: #2DD4BF;
  --cyan-bg: rgba(45, 212, 191, 0.1);
  --cyan-border: rgba(45, 212, 191, 0.3);
  
  --amber-primary: #FBBF24;
  --rose-primary: #F87171;
  --rose-bg: rgba(248, 113, 113, 0.1);
  --rose-border: rgba(248, 113, 113, 0.3);
  
  --box-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
  --box-shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.45);
  --invoice-bg: #081C16;
  --invoice-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  
  --code-bg: #030A08;
  --code-text: #ECFDF5;
  
  --bbox-tag-bg: rgba(4, 14, 11, 0.95);
  --bbox-tag-color: #F0FDF4;
  --bbox-tag-border: var(--border-hairline);
  
  --btn-luxury-bg: linear-gradient(135deg, #1C382D 0%, #10241D 100%);
  --btn-luxury-hover: linear-gradient(135deg, #264A3D 0%, #163228 100%);
}

/* ==========================================================================
   BASE RESET & GLOBAL TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: var(--bg-core);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.25s var(--ease-luxury), color 0.25s var(--ease-luxury);
}

/* App Shell */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--app-gradient);
  transition: background 0.3s var(--ease-luxury);
}

/* ==========================================================================
   TOP NAVIGATION BAR
   ========================================================================== */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 520px) minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding: 8px 20px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-hairline);
  box-shadow: var(--box-shadow-nav);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.brand-monogram {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4);
  padding: 0;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.brand-monogram:hover,
.brand-monogram[aria-expanded="true"] {
  background: var(--bg-surface);
  border-color: var(--gold-primary);
  box-shadow: 0 0 14px var(--gold-glow);
}

.brand-icon {
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--gold-primary);
  letter-spacing: 0.05em;
}

.brand-info {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-badge {
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding: 1.5px 5px;
  border-radius: 4px;
  background: rgba(180, 130, 20, 0.1);
  color: var(--gold-primary);
  border: 1px solid var(--border-gold);
}

.brand-sub {
  font-size: 9.5px;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.nav-search-center {
  width: 100%;
  min-width: 0;
  justify-self: center;
}

/* Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

/* THEME SELECTOR DROPDOWN */
.theme-selector-wrap {
  position: relative;
}

.brand-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 164px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 3px;
  z-index: 100;
  animation: fadeIn 0.15s ease-out;
}

.brand-menu.active {
  display: flex;
}

.brand-menu-submenu-wrap {
  position: relative;
}

.brand-menu-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}

.brand-menu-button:hover,
.brand-menu-button.active,
.brand-menu-button[aria-expanded="true"] {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border-hairline);
}

.brand-menu-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.brand-menu-button span {
  flex: 1;
}

.brand-menu-chevron {
  width: 10px !important;
  height: 10px !important;
}

.theme-menu {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 3px;
  z-index: 101;
  animation: fadeIn 0.15s ease-out;
}

.theme-menu.active {
  display: flex;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.theme-option:hover {
  background: var(--bg-elevated);
}

.theme-option.active {
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
}

.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.theme-swatch.white {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #E2C992;
}

.theme-swatch.obsidian {
  background: #0E1015;
  box-shadow: inset 0 0 0 2px #E5C378;
}

.theme-swatch.titanium {
  background: #101622;
  box-shadow: inset 0 0 0 2px #38BDF8;
}

.theme-swatch.emerald {
  background: #081C16;
  box-shadow: inset 0 0 0 2px #34D399;
}

.to-info {
  display: flex;
  flex-direction: column;
}

.to-title {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-primary);
}

.to-sub {
  font-size: 8.5px;
  color: var(--text-muted);
}

/* BUTTONS */
.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.25s var(--ease-luxury);
  border: 1px solid transparent;
  outline: none;
}

.btn-action.luxury {
  background: var(--btn-luxury-bg);
  color: var(--gold-primary);
  border: 1px solid var(--border-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn-action.luxury:hover {
  background: var(--btn-luxury-hover);
  border-color: var(--gold-primary);
  box-shadow: 0 0 14px var(--gold-glow);
  transform: translateY(-1px);
}

.btn-action.secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
}

.btn-action.secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-light);
  transform: translateY(-1px);
}

.btn-action.outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
}

.btn-action.outline:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: var(--bg-surface);
}

.btn-svg {
  width: 13px;
  height: 13px;
}

.btn-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon svg {
  width: 13px;
  height: 13px;
}

.btn-icon:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: var(--bg-elevated);
}

.btn-icon-luxury {
  color: var(--gold-primary);
  border-color: var(--border-gold);
  background: var(--btn-luxury-bg);
}

.btn-icon-luxury:hover {
  color: var(--gold-primary);
  border-color: var(--gold-primary);
  background: var(--btn-luxury-hover);
  box-shadow: 0 0 14px var(--gold-glow);
}

/* ==========================================================================
   MAIN CONTENT LAYOUT
   ========================================================================== */
.main-content {
  flex: 1;
  padding: 14px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* TOOLBAR & TABS */
.content-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.tabs-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s var(--ease-luxury);
  position: relative;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.tab-btn.active {
  color: var(--text-primary);
  background: var(--bg-surface);
  font-weight: 400;
  border: 1px solid var(--border-hairline);
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}

.tab-indicator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
}

.tab-btn.active .tab-indicator {
  background: var(--gold-primary);
  box-shadow: 0 0 6px var(--gold-primary);
}

.tab-tag {
  font-size: 8.5px;
  font-weight: 400;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--gold-surface);
  border: 1px solid var(--border-gold);
  color: var(--gold-primary);
}

/* Toolbar Right */
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-search-center .search-wrap {
  width: 100%;
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: all 0.2s;
}

.search-wrap:focus-within {
  border-color: var(--gold-primary);
  box-shadow: 0 0 10px var(--gold-glow);
}

.search-icon {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

.search-wrap input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  width: 190px;
}

.nav-search-center .search-wrap input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.search-wrap input::placeholder {
  color: var(--text-faint);
}

.search-kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border-hairline);
}

/* Filter Dropdown */
.filter-dropdown {
  position: relative;
}

.filter-menu-btn {
  min-width: 94px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: all 0.2s;
}

.filter-menu-btn:hover,
.filter-menu-btn[aria-expanded="true"] {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: var(--bg-elevated);
}

.filter-menu-btn svg {
  width: 14px;
  height: 14px;
}

.filter-menu-btn span {
  flex: 1;
}

.filter-menu-chevron {
  width: 10px !important;
  height: 10px !important;
  transition: transform 0.2s;
}

.filter-menu-btn[aria-expanded="true"] .filter-menu-chevron {
  transform: rotate(180deg);
}

.filter-pills {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  width: 238px;
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.15s ease-out;
}

.filter-pills.active {
  display: flex;
}

.filter-option-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.filter-option-group[hidden] {
  display: none;
}

.filter-pill {
  width: 100%;
  padding: 7px 9px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 300;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-pill:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: var(--bg-surface);
}

.filter-pill.active {
  background: var(--bg-elevated);
  border-color: var(--border-gold);
  color: var(--text-primary);
  font-weight: 400;
}

.warehouse-filter-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.filter-pill-count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-primary);
}

.filter-pill-count.emerald { color: var(--emerald-primary); }
.filter-pill-count.gold { color: var(--gold-primary); }
.filter-pill-count.rose { color: var(--rose-primary); }

/* TAB PANES */
.source-documents { flex-shrink:0; }
#record-source-list { display:flex; flex-wrap:wrap; gap:6px; }
.source-file-button { max-width:100%; border:1px solid var(--border-light); border-radius:6px; padding:8px; color:var(--text-secondary); background:var(--bg-surface); font:inherit; font-size:11px; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.source-file-button { text-decoration:none; }
.source-file-button:hover { border-color:var(--gold-primary); color:var(--gold-primary); background:var(--gold-surface); }
.source-file-message { font-size:11px; color:var(--text-muted); padding:8px 0; }
#invoice-selector, #import-target {
  border: 1px solid var(--border-light); border-radius: 6px; padding: 7px 10px;
  background: var(--bg-surface); color: var(--text-primary); font: inherit; max-width: 310px;
}
.invoice-select-label { color:var(--text-muted); font-size:11px; }
#import-dialog {
  margin: auto; width: min(960px, 94vw); max-height: 90vh; padding: 22px; border: 1px solid var(--border-light);
  border-radius:12px; background:var(--bg-surface); color:var(--text-primary); overflow:auto;
}
#import-dialog::backdrop { background:rgba(15,23,42,.45); }
.import-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.import-heading h2 { font-size:19px; font-weight:500; }
#import-form { display:grid; gap:12px; margin:18px 0; }
#import-form[hidden] { display:none; }
#import-form p, .import-help { color:var(--text-secondary); font-size:13px; line-height:1.5; }
#import-files { border:1px dashed var(--border-light); padding:20px; border-radius:8px; width:100%; }
#import-message { margin:16px 0; font-size:13px; }
.import-warning { color:var(--amber-primary); font-size:12px; margin:8px 0; }
.import-error { color:var(--rose-primary); font-size:12px; margin:8px 0; }
.import-actions { display:flex; justify-content:flex-end; padding-top:16px; }
.import-actions button:disabled { opacity:.45; cursor:default; }
.import-table-wrap { max-height:min(330px, 30vh); overflow:auto; margin-top:14px; }
.import-table { border-collapse:collapse; width:100%; font-size:12px; }
.import-table th { position:sticky; top:0; background:var(--bg-table-header); }
.import-table th, .import-table td { padding:9px; text-align:left; border-bottom:1px solid var(--border-hairline); white-space:nowrap; }
#import-preview h3 { font-size:15px; margin-bottom:10px; }
#import-preview ul { padding-left:18px; font-size:12px; }
#import-preview details { margin-top:12px; font-size:12px; }
@media(max-width:760px) { #invoice-selector { max-width:150px; } .invoice-select-label{display:none;} }
.tab-pane {
  display: none;
  animation: fadeIn 0.25s var(--ease-luxury) forwards;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   TAB 1: MATRIX CARD & TABLE
   ========================================================================== */
.matrix-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--box-shadow-card);
}

.table-container {
  height: calc(100vh - 215px);
  min-height: 360px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.table-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-container::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 3px;
}

.luxury-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 11.5px;
  font-weight: 300;
}

.luxury-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-table-header);
  padding: 8px var(--cell-padding-x);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-hairline);
  white-space: nowrap;
}

.luxury-table thead th.num {
  text-align: right;
}

.luxury-table tbody tr {
  border-bottom: 1px solid var(--border-hairline);
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.luxury-table tbody tr:hover {
  background-color: var(--bg-elevated);
}

.luxury-table tbody tr.row-sample {
  background: var(--gold-surface);
}

.luxury-table tbody tr.row-sample:hover {
  background: var(--bg-elevated);
}

.luxury-table td {
  padding: var(--cell-padding-y) var(--cell-padding-x);
  white-space: nowrap;
  vertical-align: middle;
}

.luxury-table td.num {
  text-align: right;
  font-family: var(--font-mono);
}

.luxury-table td.mono {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Badges */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.badge-status.matched {
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-primary);
}

.badge-status.pending {
  background: rgba(217, 119, 6, 0.09);
  border: 1px solid rgba(217, 119, 6, 0.28);
  color: var(--amber-primary);
}

.badge-status.missing {
  background: var(--rose-bg);
  border: 1px solid var(--rose-border);
  color: var(--rose-primary);
}

.badge-ocr-conf {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 5px;
  border-radius: 3px;
  background: var(--cyan-bg);
  border: 1px solid var(--cyan-border);
  color: var(--cyan-primary);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.guia-link {
  color: var(--gold-primary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

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

.guia-missing {
  color: var(--rose-primary);
  font-style: italic;
  font-size: 10px;
  opacity: 0.85;
}

.td-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.btn-table-action {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-table-action:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: var(--bg-elevated);
}

.btn-table-action.view {
  color: var(--gold-primary);
  border-color: var(--border-gold);
}

/* Table Footer */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-hairline);
  font-size: 11px;
  color: var(--text-muted);
}

.matrix-summary-footer {
  justify-content: flex-end;
}

.tf-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tf-divider {
  opacity: 0.3;
}

.text-champagne {
  color: var(--gold-primary);
  font-weight: 400;
}

.tf-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tf-summary-label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.tf-summary-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}

.tf-summary-value.gold {
  color: var(--gold-primary);
}

/* ==========================================================================
   TAB 2: AI OCR EXTRACTOR STUDIO
   ========================================================================== */
.ocr-studio-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
  min-height: calc(100vh - 190px);
}

/* Left: Scanned Viewer */
.ocr-viewer-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--box-shadow-card);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-hairline);
}

.ph-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-title {
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.ph-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-primary);
  background: var(--gold-surface);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-gold);
}

.ph-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-micro {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-micro:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.btn-micro.cyan {
  background: var(--cyan-bg);
  border-color: var(--cyan-border);
  color: var(--cyan-primary);
}

.btn-micro.cyan:hover {
  background: rgba(2, 132, 199, 0.16);
}

.dot-amber {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber-primary);
}

/* Waybill Stage & Laser Scanner */
.scan-stage {
  position: relative;
  background: var(--bg-stage);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  transition: background 0.25s;
}

.waybill-img {
  max-width: 100%;
  max-height: calc(100vh - 300px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: block;
}

/* Laser Scanning Beam */
.laser-scanner {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--cyan-primary) 50%, transparent 100%);
  box-shadow: 0 0 14px 2px var(--cyan-primary);
  opacity: 0;
  pointer-events: none;
  z-index: 25;
}

.laser-scanner.active {
  opacity: 1;
  animation: laserSweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes laserSweep {
  0% { top: 5%; opacity: 0.85; }
  50% { top: 92%; opacity: 1; }
  100% { top: 5%; opacity: 0.85; }
}

/* Bounding Boxes Overlay */
.capture-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 11px;
}
.capture-editor-toolbar input {
  flex: 1;
  min-width: 120px;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  color: var(--text-primary);
  background: var(--bg-surface);
}
.capture-editor-toolbar button:disabled { opacity: .45; cursor: default; }
#capture-save-status { color: var(--text-muted); font-size: 10px; }
.capture-editor-help { padding: 6px 16px; color: var(--text-muted); font-size: 10px; }
.bbox.capture-zone { cursor: move; touch-action: none; transition: none; }
.bbox.capture-zone.capture-selected { z-index: 22; outline: 2px solid var(--cyan-primary); outline-offset: 2px; }
.capture-zone .bbox-tag { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.capture-handle { position:absolute; width:10px; height:10px; background:var(--bg-surface); border:1px solid var(--cyan-primary); border-radius:2px; opacity:0; }
.capture-selected .capture-handle, .capture-zone:hover .capture-handle { opacity:1; }
.capture-nw { left:-5px; top:-5px; cursor:nwse-resize; }
.capture-n { left:calc(50% - 5px); top:-5px; cursor:ns-resize; }
.capture-ne { right:-5px; top:-5px; cursor:nesw-resize; }
.capture-e { right:-5px; top:calc(50% - 5px); cursor:ew-resize; }
.capture-se { right:-5px; bottom:-5px; cursor:nwse-resize; }
.capture-s { left:calc(50% - 5px); bottom:-5px; cursor:ns-resize; }
.capture-sw { left:-5px; bottom:-5px; cursor:nesw-resize; }
.capture-w { left:-5px; top:calc(50% - 5px); cursor:ew-resize; }
.bbox-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  pointer-events: none;
}

.bbox {
  position: absolute;
  border: 1.5px solid var(--cyan-primary);
  background: var(--cyan-bg);
  border-radius: 3px;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s var(--ease-luxury);
}

.bbox:hover, .bbox.highlighted {
  border-color: #000;
  background: rgba(2, 132, 199, 0.25);
  box-shadow: 0 0 12px var(--cyan-primary);
  z-index: 20;
}

.bbox.gold {
  border-color: var(--gold-primary);
  background: var(--gold-surface);
}

.bbox.gold:hover, .bbox.gold.highlighted {
  border-color: var(--gold-deep);
  background: rgba(180, 130, 20, 0.25);
  box-shadow: 0 0 12px var(--gold-glow);
}

.bbox.emerald {
  border-color: var(--emerald-primary);
  background: var(--emerald-bg);
}

.bbox.emerald:hover, .bbox.emerald.highlighted {
  border-color: var(--emerald-primary);
  background: rgba(5, 150, 105, 0.25);
  box-shadow: 0 0 12px rgba(5, 150, 105, 0.4);
}

.bbox-tag {
  position: absolute;
  bottom: 100%;
  left: 0;
  font-family: var(--font-mono);
  font-size: 8.5px;
  white-space: nowrap;
  background: var(--bbox-tag-bg);
  color: var(--bbox-tag-color);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--bbox-tag-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  opacity: 0.95;
  transform: translateY(-2px);
  pointer-events: none;
}

.bbox:hover .bbox-tag, .bbox.highlighted .bbox-tag {
  opacity: 1;
  font-weight: 500;
}

.scan-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-hairline);
  font-size: 10.5px;
}

.sm-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sm-label {
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.sm-val {
  color: var(--text-primary);
}

.sm-val.gold {
  color: var(--gold-primary);
  font-family: var(--font-mono);
}

/* Right: Telemetry & Inspector */
.ocr-telemetry-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.telemetry-top {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--box-shadow-card);
}

.tt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.tt-title {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.tt-badge-precision {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-primary);
}

.tt-desc {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Extracted Fields List */
.extracted-fields-list {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 290px;
  overflow-y: auto;
  box-shadow: var(--box-shadow-card);
}

.ocr-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  transition: all 0.15s;
  cursor: pointer;
}

.ocr-field-row:hover, .ocr-field-row.active {
  border-color: var(--cyan-primary);
  background: var(--cyan-bg);
}

.ofr-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ofr-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ofr-value {
  font-size: 11.5px;
  color: var(--text-primary);
  font-weight: 400;
}

.ofr-raw {
  font-size: 9.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.ofr-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ofr-conf {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--cyan-primary);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--cyan-bg);
  border: 1px solid var(--cyan-border);
}

/* Triangulation Card */
.triangulation-card {
  background: var(--gold-surface);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--box-shadow-card);
}

.tc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.tc-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.tc-title {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--gold-primary);
}

.tc-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5px 0;
  font-size: 10.5px;
}

.tc-key {
  color: var(--text-muted);
}

.tc-val {
  color: var(--text-primary);
}

.tc-val.mono {
  font-family: var(--font-mono);
}

.tc-row.highlight {
  border-top: 1px solid var(--border-hairline);
  margin-top: 4px;
  padding-top: 6px;
}

.tc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.btn-sm {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 10.5px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.btn-sm.luxury {
  background: var(--btn-luxury-bg);
  border-color: var(--border-gold);
  color: var(--gold-primary);
}

.btn-sm.luxury:hover {
  background: var(--btn-luxury-hover);
}

.btn-sm.secondary {
  background: var(--bg-surface);
  border-color: var(--border-hairline);
  color: var(--text-secondary);
}

.btn-sm.secondary:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

/* Ingest Drop Card */
.drop-ocr-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-light);
  border-radius: 10px;
  box-shadow: var(--box-shadow-card);
  transition: all 0.2s;
}

.drop-ocr-card:hover {
  border-color: var(--gold-primary);
  background: var(--bg-elevated);
}

.doc-icon {
  color: var(--gold-primary);
  margin-right: 8px;
}

.doc-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.doc-title {
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 400;
}

.doc-sub {
  font-size: 9.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   TAB 3: ELECTRONIC INVOICE (FACTURA DGI)
   ========================================================================== */
.invoice-wrapper {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.invoice-paper {
  width: 100%;
  max-width: 900px;
  background: var(--invoice-bg);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 24px;
  box-shadow: var(--invoice-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.25s, box-shadow 0.25s;
}

.inv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-hairline);
}

.inv-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.inv-symbol {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--btn-luxury-bg);
  border: 1px solid var(--border-gold);
  color: var(--gold-primary);
  font-family: var(--font-serif);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.inv-tagline {
  font-size: 10px;
  color: var(--gold-primary);
  letter-spacing: 0.05em;
}

.inv-emisor-info {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.dgi-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 10px 14px;
  text-align: right;
}

.dgi-title {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--gold-primary);
  font-weight: 500;
}

.dgi-sub {
  font-size: 9px;
  color: var(--text-muted);
}

.dgi-number {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  margin-top: 4px;
  font-weight: 400;
}

.dgi-meta {
  font-size: 9.5px;
  color: var(--text-muted);
}

.cufe-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
  font-size: 10px;
}

.cs-label {
  color: var(--gold-primary);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.cs-value {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  flex: 1;
  word-break: break-all;
}

.cs-auth {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.inv-client-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
}

.ic-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ic-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 400;
  margin-bottom: 4px;
}

.ic-detail {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.inv-table-wrap {
  overflow-x: auto;
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.inv-table th {
  background: var(--bg-table-header);
  padding: 6px 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-hairline);
}

.inv-table td {
  padding: 5.5px 8px;
  border-bottom: 1px solid var(--border-hairline);
}

.inv-table td.num {
  text-align: right;
  font-family: var(--font-mono);
}

.inv-totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--border-hairline);
}

.it-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.it-subtable {
  width: 100%;
  font-size: 10.5px;
  color: var(--text-secondary);
}

.it-subtable td {
  padding: 2px 0;
}

.it-final {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.it-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
}

.it-row.total {
  font-size: 13px;
  color: var(--text-primary);
  border-top: 1px solid var(--border-hairline);
  padding-top: 6px;
  margin-top: 4px;
}

.it-row.total .v {
  font-family: var(--font-mono);
  font-weight: 500;
}

.it-row.sub {
  font-size: 10px;
  color: var(--text-muted);
}

.inv-notice {
  font-size: 9px;
  color: var(--text-faint);
  line-height: 1.4;
  text-align: center;
  border-top: 1px solid var(--border-hairline);
  padding-top: 10px;
}

/* ==========================================================================
   TAB 4: ANALYTICS & AUDIT
   ========================================================================== */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--box-shadow-card);
}

.mc-label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.mc-value-big {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 6px 0 2px 0;
}

.mc-value-big.gold { color: var(--gold-primary); }
.mc-value-big.emerald { color: var(--emerald-primary); }
.mc-value-big.cyan { color: var(--cyan-primary); }

.mc-subtitle {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.mc-graph-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-elevated);
  margin-bottom: 8px;
}

.bar-fill.regular {
  background: var(--cyan-primary);
}

.bar-fill.special {
  background: var(--gold-primary);
}

.bar-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

.dot-legend {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}

.dot-legend.regular { background: var(--cyan-primary); }
.dot-legend.special { background: var(--gold-primary); }

.audit-status-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.as-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: var(--bg-elevated);
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
  font-size: 10.5px;
}

.as-badge {
  font-size: 9px;
  padding: 1.5px 5px;
  border-radius: 3px;
}

.as-badge.verified {
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-primary);
}

.as-badge.pending {
  background: rgba(217, 119, 6, 0.09);
  border: 1px solid rgba(217, 119, 6, 0.28);
  color: var(--amber-primary);
}

.as-badge.missing {
  background: var(--rose-bg);
  border: 1px solid var(--rose-border);
  color: var(--rose-primary);
}

.as-desc {
  flex: 1;
  margin: 0 8px;
  color: var(--text-secondary);
  font-size: 10px;
}

.as-val {
  font-family: var(--font-mono);
}

.adjustment-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.6;
}

.adj-divider {
  height: 1px;
  background: var(--border-hairline);
  margin: 6px 0;
}

.adj-total {
  font-size: 11.5px;
  color: var(--text-primary);
}

/* ==========================================================================
   MODALS & SLIDE-OVER DRAWER
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-luxury);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay.sidebar-overlay,
.modal-overlay.sidebar-overlay.active {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.modal-overlay.sidebar-overlay .slide-panel {
  pointer-events: auto;
}

/* Slide Panel */
.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-hairline);
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-luxury);
}

.modal-overlay.active .slide-panel {
  transform: translateX(0);
}

.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-hairline);
}

.sp-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-title {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 400;
}

.sp-badge {
  font-size: 8.5px;
  padding: 1.5px 5px;
  border-radius: 3px;
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-primary);
}

.btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}

.btn-close:hover {
  color: var(--text-primary);
}

.sp-body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-sec-title {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.sp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sp-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sp-field.full {
  grid-column: span 2;
}

.sp-field label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.sp-field input, .sp-body textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 5px;
  padding: 6px 9px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
}

.sp-field input.readonly {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.sp-field input:focus, .sp-body textarea:focus {
  border-color: var(--gold-primary);
}

.sp-notes-section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sp-notes-section textarea {
  flex: 0 0 auto;
  width: 100%;
  height: 88px;
  min-height: 72px;
  resize: vertical;
}

.sp-footer {
  padding: 12px 18px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-hairline);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Dialog Panel */
.dialog-panel {
  width: 580px;
  max-width: 90vw;
  max-height: 85vh;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dialog-panel.large {
  width: 760px;
}

.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-hairline);
}

.dp-title {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.dp-sub {
  font-size: 9.5px;
  color: var(--text-muted);
}

.dp-body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.api-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ab-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1.5px 6px;
  border-radius: 4px;
}

.ab-tag.post {
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-primary);
}

.ab-tag.get {
  background: var(--cyan-bg);
  border: 1px solid var(--cyan-border);
  color: var(--cyan-primary);
}

.ab-tag.curl {
  background: var(--gold-surface);
  border: 1px solid var(--border-gold);
  color: var(--gold-primary);
}

.ab-desc {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.ab-code, .json-code {
  background: var(--code-bg);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--code-text);
  overflow-x: auto;
  line-height: 1.5;
}

.dp-footer {
  padding: 12px 18px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-hairline);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Toast Hub */
.toast-hub {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 9px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 11px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  animation: toastIn 0.25s var(--ease-luxury) forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.badge-status.reconciled_3_way {
  background: var(--emerald-bg);
  border: 1px solid var(--emerald-border);
  color: var(--emerald-primary);
}

.badge-status.unbilled_in_warehouse {
  background: var(--gold-surface);
  border: 1px solid var(--border-gold);
  color: var(--gold-primary);
}

.badge-status.billed_not_in_warehouse {
  background: var(--rose-bg);
  border: 1px solid var(--rose-border);
  color: var(--rose-primary);
}

/* Warehouse receipt detail and evidence */
.warehouse-row {
  cursor: pointer;
}

.warehouse-row:hover td {
  background: var(--gold-surface);
}

.warehouse-slide-panel {
  width: 520px;
  max-width: 92vw;
}

.warehouse-detail-body {
  overflow-y: auto;
}

.wh-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.wh-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 7px;
}

.wh-detail-key {
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wh-detail-value {
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wh-evidence-section {
  margin-top: 15px;
}

.wh-evidence-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.wh-media-count {
  min-width: 24px;
  padding: 2px 7px;
  color: var(--gold-primary);
  background: var(--gold-surface);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  font-family: var(--font-mono);
  text-align: center;
}

.wh-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.wh-media-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: zoom-in;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.wh-media-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
}

.wh-media-card img {
  width: 100%;
  height: 145px;
  object-fit: cover;
  background: var(--bg-surface);
}

.wh-media-card span {
  padding: 7px 9px;
  font-size: 9.5px;
}

.wh-detail-empty,
.wh-detail-loading {
  grid-column: 1 / -1;
  padding: 18px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px dashed var(--border-hairline);
  border-radius: 7px;
  font-size: 10.5px;
  text-align: center;
}

.warehouse-lightbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(5, 10, 20, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.warehouse-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.warehouse-carousel {
  position: relative;
  width: min(1100px, 92vw);
  height: min(820px, 90vh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 74px 28px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

.warehouse-carousel-stage {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.warehouse-carousel-stage img {
  width: 100%;
  height: calc(100% - 34px);
  object-fit: contain;
  background: #0b0e14;
  border-radius: 8px;
}

.warehouse-carousel-stage figcaption {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-secondary);
  font-size: 11px;
}

#warehouse-carousel-counter {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--gold-primary);
}

.warehouse-carousel-close,
.warehouse-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-hairline);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.warehouse-carousel-close:hover,
.warehouse-carousel-nav:hover {
  color: var(--text-primary);
  border-color: var(--border-gold);
  background: var(--gold-surface);
}

.warehouse-carousel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  font-size: 22px;
  line-height: 1;
}

.warehouse-carousel-nav {
  position: absolute;
  top: 50%;
  width: 42px;
  height: 58px;
  border-radius: 8px;
  transform: translateY(-50%);
}

.warehouse-carousel-nav.prev { left: 16px; }
.warehouse-carousel-nav.next { right: 16px; }

.warehouse-carousel-nav svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 760px) {
  .top-nav {
    grid-template-columns: auto 1fr;
    row-gap: 8px;
  }

  .nav-search-center {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .wh-detail-summary {
    grid-template-columns: 1fr;
  }

  .wh-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-lightbox {
    padding: 10px;
  }

  .warehouse-carousel {
    width: 96vw;
    height: 88vh;
    padding: 48px 50px 20px;
  }

  .warehouse-carousel-nav.prev { left: 6px; }
  .warehouse-carousel-nav.next { right: 6px; }
}