/* ╔══════════════════════════════════════════════════════════╗
   ║   INVENTO  –  Design System v3                          ║
   ║   Inter + Lucide Icons + CSS animations + Glass UI      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand */
  --brand:       #0d6f65;
  --brand-2:     #0ea082;
  --brand-dark:  #0a5550;
  --brand-50:    #f0faf9;
  --brand-100:   #ccf0eb;
  --brand-grd:   linear-gradient(135deg, #0d6f65 0%, #0ea082 100%);
  /* Accent */
  --accent:      #f59e0b;
  --accent-2:    #ef9f39;
  --accent-grd:  linear-gradient(135deg, #f59e0b 0%, #ef9f39 100%);
  /* Semantic */
  --ok:          #10b981;
  --ok-bg:       #d1fae5;
  --ok-ink:      #065f46;
  --warn:        #f59e0b;
  --warn-bg:     #fef3c7;
  --warn-ink:    #92400e;
  --err:         #ef4444;
  --err-bg:      #fee2e2;
  --err-ink:     #991b1b;
  --info:        #3b82f6;
  --info-bg:     #dbeafe;
  --info-ink:    #1e40af;
  /* Surfaces */
  --bg:          #f1f5f9;
  --surface:     rgba(255,255,255,0.95);
  --line:        #e2e8f0;
  --line-2:      #cbd5e1;
  /* Sidebar (modo claro) */
  --sb-bg:       rgba(255,255,255,0.95);
  --sb-ink:      #0f172a;
  --sb-muted:    #64748b;
  /* Typography */
  --ink:         #0f172a;
  --ink-2:       #1e293b;
  --muted:       #64748b;
  --muted-2:     #94a3b8;
  /* Legacy aliases */
  --card:        rgba(255,255,255,0.95);
  --shadow:      0 8px 24px rgba(10,23,46,0.10);
  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.06);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --sh:    0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --sh-md: 0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --sh-lg: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.07);
  --sh-xl: 0 32px 64px rgba(0,0,0,0.18), 0 12px 24px rgba(0,0,0,0.10);
  /* Radius */
  --r-xs:  4px;
  --r-sm:  8px;
  --r:     12px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 9999px;
  /* Motion */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-xs:  80ms;
  --t-sm:  150ms;
  --t:     250ms;
  --t-md:  350ms;
  --t-lg:  500ms;
}
/* ─── Global Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: auto;
}

/* ─── Animated Background Blobs ─────────────────────────────── */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
body::before {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(13,111,101,0.06) 0%, transparent 65%);
  top: -250px; right: -250px;
  animation: blobFloat 22s ease-in-out infinite;
}
body::after {
  width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(245,158,11,0.05) 0%, transparent 65%);
  bottom: -200px; left: -200px;
  animation: blobFloat 28s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  25%     { transform: translate(50px,-50px) scale(1.08); }
  50%     { transform: translate(-30px,35px) scale(0.94); }
  75%     { transform: translate(35px,15px) scale(1.04); }
}

/* ─── Top Progress Bar ───────────────────────────────────────── */
#topProgressBar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-grd); z-index: 9999;
  transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 8px rgba(13,111,101,0.6); display: none;
}
#topProgressBar.loading {
  display: block;
  animation: topBarAnim 1.8s var(--ease) infinite;
}
@keyframes topBarAnim {
  0%   { transform: scaleX(0) translateX(0); }
  50%  { transform: scaleX(0.6) translateX(40%); }
  100% { transform: scaleX(1) translateX(100%); opacity: 0; }
}

/* ─── Main Container ─────────────────────────────────────────── */
main { max-width: 1420px; margin: 0 auto; padding: 20px 18px; padding-top: calc(56px + 12px); }

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--sh-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── Login Card ─────────────────────────────────────────────── */
.login-card {
  margin: 7vh auto 0; max-width: 460px; padding: 36px 40px;
  animation: loginEnter var(--t-lg) var(--ease-spring) both;
  border: 1px solid rgba(13,111,101,0.12);
}
@keyframes loginEnter {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-card h2 {
  text-align: center; font-size: 22px; font-weight: 700;
  letter-spacing: -0.4px; margin-bottom: 24px;
  background: var(--brand-grd);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Brand / Logo ───────────────────────────────────────────── */
.brand { display: flex; justify-content: center; }
.brand-logo-frame {
  overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--line); background: transparent;
}
.brand-logo { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 44%; }
.brand-login { margin-bottom: 18px; }
.brand-logo-frame-login {
  width: min(100%, 240px); height: 150px;
  border: none; background: transparent; overflow: visible;
}
.brand-logo-frame-login .brand-logo { object-fit: contain; object-position: center; }
.brand-sidebar { margin: 14px 6px 10px; }
.brand-logo-frame-sidebar {
  max-width: 180px; aspect-ratio: 16 / 9;
  background: transparent;
  border-color: transparent;
  border-radius: var(--r-sm);
}

/* ─── App Shell ──────────────────────────────────────────────── */
.app-shell {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 20px; align-items: start;
  transition: grid-template-columns 0.9s ease;
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  position: sticky; top: 20px;
  background: var(--sb-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  padding: 16px 14px !important;
  box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden;
  transition: all var(--t) var(--ease);
}
.sidebar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 180px;
  background: radial-gradient(ellipse at 50% 0%, rgba(13,111,101,0.2) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.sidebar > * { position: relative; z-index: 1; }

/* ─── Menu Toggle ────────────────────────────────────────────── */
.menu-toggle {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--sb-muted) !important;
  font-weight: 600; font-size: 13px;
  margin-bottom: 6px;
  border-radius: var(--r) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 7px !important; padding: 8px 12px !important;
  transition: background var(--t-sm) var(--ease), color var(--t-sm) var(--ease) !important;
  box-shadow: none !important;
}
.menu-toggle:hover {
  background: rgba(255,255,255,0.12) !important;
  color: var(--sb-ink) !important;
  transform: none !important; box-shadow: none !important;
}
.menu-toggle svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ─── User Bar ───────────────────────────────────────────────── */
.sidebar .small { font-size: 12px; margin-bottom: 10px; }
#userBar {
  color: var(--sb-muted); font-size: 12px;
  margin: 0 2px 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; gap: 7px;
  line-height: 1.4; word-break: break-all;
}
#userBar::before {
  content: '';
  display: inline-flex; flex-shrink: 0;
  width: 7px; height: 7px;
  background: var(--ok); border-radius: 50%;
  box-shadow: 0 0 0 3px #10b98140;
  animation: onlinePulse 2.5s ease infinite;
}
@keyframes onlinePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
  50%     { box-shadow: 0 0 0 6px rgba(16,185,129,0.0); }
}
.sidebar-divider {
  height: 1px; background: rgba(255,255,255,0.07);
  margin: 6px 4px 10px;
}

/* ─── Sidebar Nav ────────────────────────────────────────────── */
.tabs { display: grid; gap: 3px; }
.tabs button {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--sb-muted) !important;
  padding: 9px 11px !important;
  border-radius: var(--r) !important;
  cursor: pointer; text-align: left;
  font-weight: 500; font-size: 13.5px;
  display: flex !important; align-items: center !important; gap: 10px !important;
  transition: background var(--t-sm) var(--ease), color var(--t-sm) var(--ease), transform var(--t-xs) var(--ease) !important;
  white-space: nowrap; overflow: hidden;
  box-shadow: none !important; width: 100%;
}
.tabs button:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--sb-ink) !important;
  transform: translateX(2px) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.tabs button:active { transform: scale(0.97) !important; }
.tabs button.active {
  background: var(--brand-grd) !important;
  color: #fff !important; font-weight: 600 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(13,111,101,0.4) !important;
  transform: none !important;
}
.tabs button svg {
  width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7;
  transition: opacity var(--t-sm), transform var(--t-sm) var(--ease-spring);
  stroke-width: 2;
}
.tabs button:hover svg  { opacity: 1; transform: scale(1.1); }
.tabs button.active svg { opacity: 1; }
.tabs button span       { flex: 1; }

/* ─── Collapsed Sidebar ──────────────────────────────────────── */
.app-shell.menu-collapsed { grid-template-columns: 68px 1fr; }
.app-shell.menu-collapsed .sidebar { padding: 10px 8px !important; }
.app-shell.menu-collapsed .sidebar .brand,
.app-shell.menu-collapsed .sidebar #userBar,
.app-shell.menu-collapsed .sidebar .sidebar-divider,
.app-shell.menu-collapsed .sidebar .tabs span { display: none; }
.app-shell.menu-collapsed .tabs button {
  justify-content: center !important; padding: 10px !important;
}
.app-shell.menu-collapsed .menu-toggle {
  margin-bottom: 8px !important; padding: 10px 8px !important;
}

/* ─── Content Area ───────────────────────────────────────────── */
.content-area { display: grid; gap: 18px; min-width: 0; }

/* ─── Tab Sections ───────────────────────────────────────────── */
.hidden, .tab { display: none !important; }
.tab.active   { display: block !important; animation: tabIn var(--t-md) var(--ease-out) both; }
@keyframes tabIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ingreso/Egreso ocupan alto completo disponible del viewport */
#tab-ingreso.tab.active,
#tab-egreso.tab.active {
  display: flex !important;
  flex-direction: column;
  min-height: calc(100dvh - 110px);
}

#tab-ingreso .excel-wrap,
#tab-egreso .excel-wrap {
  flex: 1;
  min-height: calc(100dvh - 300px);
  max-height: none;
}

/* ─── Title Row ──────────────────────────────────────────────── */
.title-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}

/* ─── Headings ───────────────────────────────────────────────── */
h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--ink); margin-bottom: 16px;
}
.title-row h2 {
  margin-bottom: 0;
  background: linear-gradient(135deg, var(--ink) 30%, var(--brand) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
h3 { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 10px; }

/* ─── KPI Grid ───────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.kpi {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 20px; background: #fff; box-shadow: var(--sh-sm);
  position: relative; overflow: hidden; cursor: default;
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease);
}
.kpi:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #10cc8d90,#10cc8d90);
}
.kpi:nth-child(2)::before { background: linear-gradient(90deg, #10cc8d90,#10cc8d90); }
.kpi:nth-child(3)::before { background: linear-gradient(90deg, #10cc8d90,#10cc8d90); }
.kpi:nth-child(4)::before { background: linear-gradient(90deg, #10cc8d90,#10cc8d90); }
.kpi:nth-child(5)::before { background: linear-gradient(90deg, #10cc8d90,#10cc8d90); }
.kpi::after {
  content: ''; position: absolute; bottom: -20px; right: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  background: #0d6f650a;
  transition: transform var(--t-md) var(--ease);
}
.kpi:nth-child(2)::after { background: #11978a0a; }
.kpi:nth-child(3)::after { background: #11978a0a; }
.kpi:nth-child(4)::after { background: #11978a0a; }
.kpi:nth-child(5)::after { background: #11978a0a; }
.kpi:hover::after { transform: scale(1.4); }
.kpi span {
  display: block; color: var(--muted); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px;
}
.kpi strong {
  font-size: 28px; font-weight: 800; line-height: 1;
  letter-spacing: -0.8px; color: var(--ink); display: block;
  animation: numIn 0.5s var(--ease-out) both;
}
@keyframes numIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Reportes Dashboard ─────────────────────────────────────── */
.reportes-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.reportes-filters label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.reportes-filters button {
  align-self: end;
  margin-top: auto;
}
.reportes-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.reportes-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.report-breakdown-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-sm);
  padding: 12px;
}
.report-breakdown-card .table-wrap {
  margin-top: 8px;
}
.report-kpi {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  animation: tabIn 0.45s var(--ease-out) both;
}
.report-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--kpi-color, var(--brand-grad));
}
.report-kpi:hover {
  border-color: var(--kpi-color, var(--brand));
  transform: translateY(-2px);
  transition: transform 0.2s, border-color 0.2s
}
.report-kpi span {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .45px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.report-kpi strong {
  font-size: 23px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.5px;
  display: block;
}
.report-kpi small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.reportes-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.report-chart-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: var(--sh-sm);
  padding: 12px;
  min-height: 340px;
  animation: tabIn 0.45s var(--ease-out) both;
}
.report-chart-card h3 {
  margin-bottom: 8px;
}
.report-chart-card canvas {
  width: 100% !important;
  height: 280px !important;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table-wrap {
  overflow: auto; margin-top: 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead tr { background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); }
th {
  padding: 11px 13px; text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--line);
  position: sticky; top: 0; background: #f8fafc; z-index: 1;
}
td { padding: 10px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; transition: background var(--t-xs); }
tbody tr { animation: rowIn 0.35s var(--ease-out) both; }
tbody tr:nth-child(1)  { animation-delay: 0ms; }
tbody tr:nth-child(2)  { animation-delay: 30ms; }
tbody tr:nth-child(3)  { animation-delay: 60ms; }
tbody tr:nth-child(4)  { animation-delay: 90ms; }
tbody tr:nth-child(5)  { animation-delay: 120ms; }
tbody tr:nth-child(6)  { animation-delay: 150ms; }
tbody tr:nth-child(7)  { animation-delay: 175ms; }
tbody tr:nth-child(8)  { animation-delay: 200ms; }
tbody tr:nth-child(n+9) { animation-delay: 220ms; }
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.table-wrap table tr:hover td { background: #f0faf9; }
tbody tr:last-child td { border-bottom: none; }

/* ─── Excel Wrap ─────────────────────────────────────────────── */
.excel-wrap {
  max-height: 56vh; border: 1px solid var(--line);
  border-radius: var(--r); overflow: auto; background: #fff;
}
.grid-input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 9px; font-size: 13px; font-family: inherit;
  background: #fff; color: var(--ink);
  transition: border-color var(--t-sm) var(--ease), box-shadow var(--t-sm) var(--ease);
}
.grid-input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13,111,101,0.12);
}
.readonly-cell { background: #f8fafc; color: var(--muted); font-size: 12px; }

/* ─── Toolbars ───────────────────────────────────────────────── */
.ingreso-toolbar {
  display: grid;
  grid-template-columns: minmax(210px,1.2fr) minmax(210px,1.2fr) repeat(3, minmax(160px, auto));
  gap: 8px; margin-bottom: 12px;
}
.egreso-toolbar {
  display: grid;
  grid-template-columns: minmax(180px,1.1fr) minmax(180px,1.1fr) minmax(170px,1fr) repeat(3, minmax(160px, auto));
  gap: 8px; margin-bottom: 12px;
}
.ingreso-toolbar > *, .egreso-toolbar > * { min-width: 0; }

/* ─── Sub-navegacion modulo Ingreso / Egreso ────────────────── */
.ingreso-subnav, .egreso-subnav {
  display: flex; gap: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ingreso-subtab, .egreso-subtab {
  background: transparent; border: none; color: var(--muted);
  padding: 10px 16px; font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: 6px;
}
.ingreso-subtab:hover, .egreso-subtab:hover { color: var(--ink); }
.ingreso-subtab.active, .egreso-subtab.active {
  color: var(--brand, #0d6f65); border-bottom-color: var(--brand, #0d6f65);
}
.ingreso-sub-panel.hidden, .egreso-sub-panel.hidden { display: none; }

/* Historico de ingresos / egresos */
.ingreso-historico-toolbar, .egreso-historico-toolbar {
  display: grid; gap: 8px; margin-bottom: 10px;
  grid-template-columns: minmax(180px,1fr) minmax(160px,auto) minmax(180px,1fr) auto;
}
.hist-ing-detail.hidden, .hist-egr-detail.hidden { display: none; }
.hist-ing-detail-wrap, .hist-egr-detail-wrap { padding: 8px 4px; }
.hist-ing-rows, .hist-egr-rows { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist-ing-rows th, .hist-ing-rows td,
.hist-egr-rows th, .hist-egr-rows td { padding: 6px 6px; border-bottom: 1px dashed #e5e7eb; }
.hist-ing-actions, .hist-egr-actions { margin-top: 8px; text-align: right; }

/* ─── Modulo Configuracion ───────────────────────────────────── */
.config-section { margin-bottom: 32px; }
.config-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 4px; padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-100);
}
.config-section-title svg { width: 18px; height: 18px; color: var(--brand); }
.config-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.config-label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.config-label input { font-weight: 400; }
.config-field-row { margin-bottom: 16px; }
.config-toggle-label {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--r); padding: 12px 16px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.toggle-wrap { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--line-2);
  border-radius: 99px; transition: background var(--t-sm);
}
.toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: transform var(--t-sm); box-shadow: var(--sh-xs);
}
.toggle-wrap input:checked + .toggle-slider { background: var(--brand); }
.toggle-wrap input:checked + .toggle-slider::before { transform: translateX(20px); }
.config-actions { display: flex; gap: 10px; margin-top: 8px; }
.config-test-mail {
  margin-top: 24px; padding: 16px; background: var(--brand-50);
  border: 1px solid var(--brand-100); border-radius: var(--r);
}
.config-test-mail h4 { margin: 0 0 4px; font-size: 14px; }
@media (max-width: 640px) {
  .config-grid-2 { grid-template-columns: 1fr; }
}
html.dark .config-toggle-label { background: rgba(13,111,101,0.1) !important; border-color: rgba(13,111,101,0.3) !important; }
html.dark .config-test-mail { background: rgba(13,111,101,0.07) !important; border-color: rgba(13,111,101,0.2) !important; }
.btn-hist-toggle, .btn-hist-save, .btn-hist-del, .btn-hist-add-row, .btn-hist-barcodes {
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line);
  background: #f8fafc; cursor: pointer; font-size: 12px; margin-right: 4px;
}
.btn-hist-save { background: #0d6f65; color: #fff; border-color: #0d6f65; }
.btn-hist-del { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.btn-hist-add-row { background: #0d6f65; color: #fff; border-color: #0d6f65; }
.btn-hist-barcodes { background: #1f2937; color: #fff; border-color: #1f2937; }

/* Boton Asignar Serie en filas sin serie */
.sin-serie-cell { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.btn-assign-series {
  padding: 6px 10px; border-radius: 6px; border: 1px solid #0d6f65;
  background: #0d6f65; color: #fff; cursor: pointer; font-size: 12px; font-weight: 600;
}
.btn-assign-series:hover { filter: brightness(1.05); }

/* ─── Reportes Pro ───────────────────────────────────────────── */
.rpro-toolbar {
  display: grid; gap: 8px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}
.rpro-toolbar label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rpro-toolbar button { align-self: end; }
.rpro-resumen {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.rpro-kpi {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; background: #f8fafc;
}
.rpro-kpi span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.rpro-kpi strong { display: block; font-size: 18px; font-weight: 800; margin-top: 4px; color: var(--ink); }
#rproResultado table { width: 100%; border-collapse: collapse; font-size: 13px; }
#rproResultado th, #rproResultado td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
#rproResultado th { background: #f1f5f9; font-weight: 700; font-size: 11.5px; text-transform: uppercase; color: var(--muted); }
#rproResultado tr:hover td { background: #f8fafc; }
#rproResultado h4 { font-size: 13px; margin: 12px 0 6px; color: var(--ink-2); font-weight: 700; }

/* ─── Forms ──────────────────────────────────────────────────── */
form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ─── Inputs & Selects ───────────────────────────────────────── */
input, select, textarea {
  padding: 10px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  font: inherit; font-size: 14px; color: var(--ink);
  background: #fff;
  transition: border-color var(--t-sm) var(--ease), box-shadow var(--t-sm) var(--ease);
  outline: none; -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); font-size: 13.5px; }
input:hover, select:hover { border-color: var(--line-2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13,111,101,0.12);
  background: #fff;
}
/* ─── File inputs (global, contenido + boton bonito) ─── */
input[type='file'] {
  padding: 6px 8px; cursor: pointer; font-size: 12.5px;
  display: block; width: 100%; max-width: 100%;
  box-sizing: border-box; overflow: hidden;
  background: #fff; color: var(--muted);
  border: 1px solid var(--line); border-radius: 10px;
  text-overflow: ellipsis; white-space: nowrap;
}
input[type='file']::file-selector-button {
  margin-right: 10px; padding: 6px 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border: 0; border-radius: 8px;
  font-weight: 600; font-size: 12px; cursor: pointer;
  transition: filter var(--t-xs) var(--ease), transform var(--t-xs) var(--ease);
}
input[type='file']::file-selector-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
input[type='file']::-webkit-file-upload-button {
  margin-right: 10px; padding: 6px 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border: 0; border-radius: 8px;
  font-weight: 600; font-size: 12px; cursor: pointer;
}
input[type='date']  { color: var(--ink); }
textarea            { resize: vertical; min-height: 70px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px;
}

/* ─── Buttons ────────────────────────────────────────────────── */
button {
  cursor: pointer; font: inherit;
  padding: 9px 16px; border-radius: var(--r);
  border: 1.5px solid var(--line);
  background: #fff; color: var(--ink);
  font-weight: 600; font-size: 13.5px;
  transition: background var(--t-sm) var(--ease), border-color var(--t-sm) var(--ease),
              box-shadow var(--t-sm) var(--ease), transform var(--t-xs) var(--ease);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; white-space: nowrap; user-select: none;
}
button:hover {
  background: #f8fafc; border-color: var(--line-2);
  transform: translateY(-1px); box-shadow: var(--sh);
}
button:active { transform: scale(0.96); box-shadow: none; }
button svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 2.5; pointer-events: none; }

button[type='submit'], .btn-primary {
  background: var(--brand-grd); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(13,111,101,0.28);
}
button[type='submit']:hover, .btn-primary:hover {
  background: linear-gradient(135deg, #0a5550 0%, #0d8870 100%);
  box-shadow: 0 6px 20px rgba(13,111,101,0.38);
  border-color: transparent; transform: translateY(-2px);
}

.btn-remove-row {
  border: 1.5px solid #fecaca; background: #fff5f5; color: #dc2626;
  border-radius: var(--r-sm); padding: 7px 9px; font-size: 12px;
}
.btn-remove-row:hover { background: #fee2e2; border-color: #f87171; box-shadow: none; transform: none; }

.btn-danger {
  border: 1.5px solid #fecaca; background: #fff5f5; color: #dc2626;
  border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.btn-danger:hover { background: #fee2e2; border-color: #f87171; }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

.catalogo-card-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed #e5e7eb;
}

.scan-btn {
  width: 42px; padding: 7px; font-size: 11px;
  background: var(--accent-grd); color: #fff; border: none;
  border-radius: var(--r-sm); box-shadow: 0 3px 8px rgba(245,158,11,0.28); flex-shrink: 0;
}
.scan-btn:hover { box-shadow: 0 5px 14px rgba(245,158,11,0.4); transform: translateY(-1px); }

.btn-docs-preview {
  border: 1.5px solid #bdd4e8; background: #f0f7ff; color: #1e4f7a;
  border-radius: var(--r-sm); padding: 5px 9px; font-size: 11px; font-weight: 600;
}
.btn-docs-preview:hover { background: #deeeff; box-shadow: none; transform: none; }

/* ─── Row utility ────────────────────────────────────────────── */
.row { display: flex; gap: 8px; align-items: center; }
.serie-scan-inline { display: flex; gap: 6px; align-items: center; min-width: 210px; }
.serie-scan-inline .grid-input { min-width: 0; }

/* ─── Docs Cell ──────────────────────────────────────────────── */
.docs-cell-wrap { display: grid; gap: 4px; min-width: 165px; max-width: 200px; }
.docs-cell-wrap input[type='file'] {
  font-size: 11px; padding: 4px 6px;
  border: 1px dashed var(--line); border-radius: 8px;
  background: #fafcfb;
}
.docs-cell-wrap input[type='file']::file-selector-button,
.docs-cell-wrap input[type='file']::-webkit-file-upload-button {
  padding: 4px 9px; font-size: 10.5px; margin-right: 6px;
}
.docs-meta-row  { display: flex; align-items: center; gap: 6px; }
.docs-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-full); background: rgba(13,111,101,0.12);
  color: var(--brand); font-size: 10px; font-weight: 800;
}

/* ─── Status Chips ───────────────────────────────────────────── */
.status-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap;
}
.status-ok    { background: var(--ok-bg);   color: var(--ok-ink); }
.status-error { background: var(--err-bg);  color: var(--err-ink); }
.status-idle  { background: #f1f5f9;        color: #475569; }

/* ─── Modals ─────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.65);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: 16px;
  animation: modalBgIn var(--t) var(--ease) both;
}
.modal.hidden { display: none; }
@keyframes modalBgIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
  background: #fff; width: min(520px, 100%);
  border-radius: var(--r-xl); padding: 26px 28px;
  box-shadow: var(--sh-xl); border: 1px solid rgba(255,255,255,0.8);
  animation: modalIn var(--t-md) var(--ease-spring) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.90) translateY(-16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-content h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; }
.modal-content .title-row {
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.modal-content .title-row > button {
  width: 32px; height: 32px; padding: 0;
  border-radius: var(--r-full); border: 1.5px solid var(--line); background: #f8fafc;
}
.modal-content .title-row > button:hover {
  background: var(--err-bg); border-color: var(--err);
  color: var(--err); transform: rotate(90deg); box-shadow: none;
}
.user-edit-modal-content           { width: min(680px, 100%); }
#userEditForm                      { margin-top: 12px; }
#userEditForm button[type='submit'] { width: 100%; }

/* ─── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed; right: 20px; bottom: 20px;
  background: var(--ink); color: #fff;
  border-radius: var(--r-md); padding: 13px 18px;
  z-index: 9000; box-shadow: var(--sh-xl);
  font-size: 14px; font-weight: 500; max-width: 380px; line-height: 1.5;
  animation: toastIn var(--t-md) var(--ease-spring) both;
  border-left: 4px solid var(--brand);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(28px) scale(0.94); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ─── Tracking ───────────────────────────────────────────────── */
.tracking-manage-panel {
  margin: 0 0 18px; padding: 18px;
  border: 1.5px dashed var(--line); border-radius: var(--r-md); background: #f8fafc;
  animation: tabIn var(--t-md) var(--ease-out) both;
}
.tracking-manage-panel h3      { margin-bottom: 14px; }

#trackingUpdateForm textarea { resize: vertical; min-height: 70px; }

.tracking-form-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
.tracking-form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notif-email-field {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  position: sticky;
  top: 10px;
}
.user-picker-chips { flex-direction: row; }
.user-chip button {
  background: none; border: none;
  cursor: pointer; color: var(--muted);
  padding: 0; font-size: 16px; line-height: 1;
}
@media (max-width: 700px) {
  .tracking-form-layout { grid-template-columns: 1fr; }
}
.tracking-cards                { display: grid; gap: 14px; margin-top: 14px; }
.tracking-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff; padding: 18px; box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease);
  animation: tabIn 0.4s var(--ease-out) both;
}
.tracking-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.tracking-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 10px;
}
.tracking-title    { font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tracking-ruta-id  { font-size: 11px; font-weight: 700; background: #0ea5e9; color: #fff; border-radius: 4px; padding: 2px 7px; letter-spacing: .4px; text-transform: uppercase; }
.tracking-subtitle { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.tracking-badge {
  display: inline-flex; align-items: center;
  border-radius: var(--r-full); padding: 5px 12px;
  font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: 0.3px;
}
.tracking-badge[data-state='ENTREGADO']   { background: var(--ok-bg);   color: var(--ok-ink); }
.tracking-badge[data-state='INCIDENCIA']  { background: var(--err-bg);  color: var(--err-ink); }
.tracking-badge[data-state='ADUANAS'],
.tracking-badge[data-state='VUELO']       { background: var(--warn-bg); color: var(--warn-ink); }
.tracking-badge[data-state='EN_GUATEMALA'],
.tracking-badge[data-state='EN_RUTA']     { background: var(--info-bg); color: var(--info-ink); }
.tracking-badge[data-state='CREADA'],
.tracking-badge[data-state='EN_TRANSITO'] { background: #f1f5f9;        color: #475569; }
.tracking-progress-wrap { margin: 10px 0 12px; }
.tracking-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-bottom: 5px; font-weight: 600;
}
.tracking-progress {
  width: 100%; height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden;
}
.tracking-progress > i {
  display: block; height: 100%; background: var(--brand-grd);
  border-radius: var(--r-full);
  animation: progressFill 1.1s var(--ease-out) both; transform-origin: left;
}
@keyframes progressFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.tracking-resumen   { margin: 8px 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.tracking-action-row { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; }
.tracking-edit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  background: var(--brand); color: #fff; border: none; cursor: pointer;
  transition: background var(--t-sm);
}
.tracking-edit-btn:hover { background: var(--brand-dark); }
.tracking-del-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  background: var(--err); color: #fff; border: none; cursor: pointer;
  transition: background var(--t-sm);
}
.tracking-del-btn:hover { background: #991b1b; }
.tracking-timeline  { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); margin-left: 8px; }
.tracking-timeline li { position: relative; padding: 2px 0 14px 20px; }
.tracking-timeline li::before {
  content: ''; position: absolute; left: -7px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted-2); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.tracking-timeline li.is-last::before {
  background: var(--brand); box-shadow: 0 0 0 3px rgba(13,111,101,0.2);
}
.tracking-event-title { font-weight: 600; font-size: 13px; }
.tracking-event-meta  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.tracking-empty {
  border: 1.5px dashed var(--line); border-radius: var(--r);
  padding: 22px; text-align: center; color: var(--muted);
}

/* ─── Search inputs with icon ────────────────────────────────── */
#searchRastreos, #searchHistorico, #searchStock {
  width: 100%; margin-bottom: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 13px center; padding-left: 40px;
}

/* ─── Catalogo File Field (dropzone elegante) ────────────── */
.catalogo-file-field {
  display: grid; gap: 6px; padding: 14px 14px 12px;
  border: 1.5px dashed var(--line); border-radius: var(--r);
  background: linear-gradient(180deg, #fbfdfc, #f4f8f7);
  cursor: pointer; min-width: 0; overflow: hidden;
  transition: border-color var(--t-sm) var(--ease), background var(--t-sm) var(--ease), transform var(--t-xs) var(--ease);
}
.catalogo-file-field:hover { border-color: var(--brand); background: var(--brand-50); transform: translateY(-1px); }
.catalogo-file-field span {
  font-size: 10.5px; color: var(--muted); font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.catalogo-file-field input[type='file'] {
  border: 0; background: transparent; padding: 0;
  font-size: 12px; width: 100%;
}
.catalogo-file-field input[type='file']::file-selector-button,
.catalogo-file-field input[type='file']::-webkit-file-upload-button {
  padding: 7px 14px; font-size: 11.5px;
}

/* Form del catalogo: distribucion limpia en 4 columnas + botones full-width */
#catalogoForm {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#catalogoForm input:not([type='file']) { grid-column: span 2; }
#catalogoForm .catalogo-file-field { grid-column: span 2; }
#catalogoForm button[type='submit'] {
  grid-column: 1 / -1; justify-self: end; min-width: 200px;
}
@media (max-width: 760px) {
  #catalogoForm { grid-template-columns: 1fr 1fr; }
  #catalogoForm input:not([type='file']),
  #catalogoForm .catalogo-file-field { grid-column: span 2; }
}

/* ─── Catalogo Cards ─────────────────────────────────────────── */
.catalogo-cards {
  margin-top: 18px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.catalogo-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: #fff; box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease);
  animation: tabIn 0.4s var(--ease-out) both;
}
.catalogo-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--sh-lg); }
.catalogo-card-head {
  padding: 13px 15px; border-bottom: 1px solid var(--line);
  background: linear-gradient(160deg, #fff 0%, #f8fafc 100%);
}
html.dark .catalogo-card-head {
  background: linear-gradient(160deg, #1a2744 0%, #1e2d45 100%);
}
.catalogo-card-title    { font-size: 16px; font-weight: 700; color: var(--ink); }
.catalogo-card-subtitle { margin-top: 3px; color: var(--muted); font-size: 12px; }
.catalogo-media-preview {
  width: 100%;
  height: 260px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}
.catalogo-media-preview img, .catalogo-media-preview video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  transition: transform var(--t-lg) var(--ease);
}
.catalogo-card:hover .catalogo-media-preview img,
.catalogo-card:hover .catalogo-media-preview video { transform: none; }
.catalogo-media-empty { color: var(--muted-2); font-size: 13px; font-weight: 600; }
.catalogo-card-body   { padding: 13px 15px; display: grid; gap: 8px; }
.catalogo-chip-row    { display: flex; gap: 5px; flex-wrap: wrap; }
.catalogo-chip {
  padding: 4px 10px; border-radius: var(--r-full);
  background: rgba(13,111,101,0.10); color: var(--brand-dark);
  font-size: 11px; font-weight: 700;
}
.catalogo-link {
  font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 600;
  transition: color var(--t-sm);
}
.catalogo-link:hover { color: var(--brand-dark); text-decoration: underline; }

/* ─── Docs Preview Modal ─────────────────────────────────────── */
.docs-preview-modal-content { width: min(980px, 100%); max-height: 84vh; overflow: auto; }
.docs-preview-grid {
  margin-top: 12px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.docs-preview-card {
  border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  box-shadow: var(--sh-sm); overflow: hidden;
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease);
  animation: tabIn 0.35s var(--ease-out) both;
}
.docs-preview-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.docs-preview-media {
  width: 100%; height: 150px; object-fit: cover; display: block; background: #f0f5fb;
}
.docs-preview-file {
  display: grid; place-items: center; width: 100%; height: 150px;
  background: linear-gradient(145deg, #f0f5fb, #e8f0fa);
  color: var(--muted); font-weight: 700; font-size: 13px;
}
.docs-preview-info   { padding: 10px; display: grid; gap: 4px; }
.docs-preview-name   { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.docs-preview-link   { font-size: 12px; color: var(--brand); text-decoration: none; font-weight: 600; }
.docs-preview-link:hover { text-decoration: underline; }
.docs-preview-empty  { border: 1.5px dashed var(--line); border-radius: var(--r); padding: 22px; text-align: center; color: var(--muted); }

/* ─── Role / Price visibility ────────────────────────────────── */
body.hide-precio-compra .ing-precio-col { display: none; }

/* ─── Utilities ──────────────────────────────────────────────── */
.muted { color: var(--muted); font-size: 14px; }
.small { font-size: 12px; margin-bottom: 8px; }

/* ─── Skeleton ───────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%; border-radius: var(--r-sm);
  animation: shimmer 1.5s infinite; height: 14px;
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* ─── Focus ring ─────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Detección automática por dispositivo
   ───────────────────────────────────────────────────────────────
   Móvil  : ≤ 640px  → Bottom nav fija + tablas scroll horizontal
   Tablet : 641-1024 → Sidebar compacto (icono+texto pequeño)
   Desktop: ≥ 1025   → Layout completo (default arriba)
   ═══════════════════════════════════════════════════════════════ */

/* ─── TABLET (641-1024px) ─────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  main { max-width: 100%; padding: 14px 12px; }
  .app-shell { grid-template-columns: 210px 1fr; gap: 14px; }
  .sidebar { top: 14px; padding: 14px 10px !important; }
  .brand-logo-frame-sidebar { max-width: 150px; }
  .tabs button {
    font-size: 12.5px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .tabs button svg { width: 15px; height: 15px; }
  .card { padding: 18px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .kpi { padding: 14px 16px; }
  .kpi strong { font-size: 24px; }
  .ingreso-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .egreso-toolbar  { grid-template-columns: 1fr 1fr 1fr; }
  .ingreso-toolbar button,
  .egreso-toolbar button { width: 100%; }
  form { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  /* Tabla con scroll horizontal interno */
  .table-wrap, .excel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  #tab-ingreso.tab.active,
  #tab-egreso.tab.active { min-height: calc(100dvh - 94px); }
  #tab-ingreso .excel-wrap,
  #tab-egreso .excel-wrap {
    min-height: calc(100dvh - 380px);
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto;
    padding: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL (≤ 640px) — Rediseño completo estilo app nativa
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Body ─────────────────────────────────────────────────── */
  body {
    background: #eef2f7;
    overflow-x: hidden;
  }
  body::before, body::after { display: none; }

  /* ── Main container ───────────────────────────────────────── */
  main {
    padding: 0 0 82px;
    max-width: 100%;
  }

  /* ── Login ────────────────────────────────────────────────── */
  .login-card {
    max-width: 100%;
    margin: 5vh 16px 0;
    padding: 32px 24px 28px;
    border-radius: 28px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.07) !important;
    border: 1px solid rgba(255,255,255,0.9) !important;
  }
  .brand-logo-frame-login {
    width: min(100%, 180px);
    height: 110px;
  }
  .login-card h2 { font-size: 20px; margin-bottom: 20px; }
  #loginForm { gap: 12px; grid-template-columns: 1fr; }
  #loginForm input {
    border-radius: 14px !important;
    padding: 13px 16px !important;
    font-size: 16px !important;
    min-height: 50px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
  }
  #loginForm button[type='submit'] {
    border-radius: 14px !important;
    min-height: 50px !important;
    font-size: 15px !important;
    letter-spacing: 0.2px;
    margin-top: 4px;
  }

  /* ── App shell: 1 columna ─────────────────────────────────── */
  .app-shell,
  .app-shell.menu-collapsed {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* ── Bottom nav ───────────────────────────────────────────── */
  .sidebar {
    position: fixed !important;
    bottom: 0; left: 0; right: 0; top: auto !important;
    height: auto;
    border-radius: 0 !important;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    z-index: 50;
    background: rgba(255,255,255,0.97) !important;
    border-top: 1px solid #e8edf3 !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.09) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    overflow: visible;
  }
  .sidebar::before { display: none; }
  .sidebar .brand,
  .sidebar #userBar,
  .sidebar .sidebar-divider,
  .sidebar .menu-toggle,
  .sidebar #btnLogout,
  .sidebar #btnLogoutSidebar { display: none !important; }

  .sidebar .tabs {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 2px;
    padding: 0 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    align-items: center;
  }
  .sidebar .tabs::-webkit-scrollbar { display: none; }

  .tabs button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 60px;
    max-width: 82px;
    scroll-snap-align: center;
    flex-direction: column !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 4px !important;
    gap: 3px !important;
    font-size: 9px !important;
    border-radius: 14px !important;
    white-space: nowrap;
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: color 0.15s, background 0.15s !important;
  }
  .tabs button svg {
    width: 22px; height: 22px;
    opacity: 1;
    stroke-width: 1.8;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  }
  .tabs button span {
    flex: 0 0 auto !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72px;
    letter-spacing: 0;
    color: inherit;
  }
  .tabs button.active {
    color: var(--brand) !important;
    background: rgba(13,111,101,0.09) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .tabs button.active svg {
    color: var(--brand);
    transform: scale(1.12);
  }
  .tabs button:hover:not(.active) {
    color: #475569 !important;
    background: #f1f5f9 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* ── Sección de contenido ─────────────────────────────────── */
  .content-area { gap: 10px; }

  /* ── Cards ────────────────────────────────────────────────── */
  .card {
    padding: 20px 16px;
    border-radius: 20px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05) !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    margin: 0 10px;
    overflow: hidden;
  }

  /* ── Títulos ──────────────────────────────────────────────── */
  h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.4px; }
  h3 { font-size: 14px; font-weight: 700; }

  /* Title row: h2 arriba, botón abajo full-width */
  .title-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px;
  }
  .title-row h2 { margin-bottom: 0; }
  .title-row > button {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 12px !important;
    min-height: 42px !important;
    font-size: 13.5px !important;
  }

  /* ── Botones táctiles ─────────────────────────────────────── */
  button {
    padding: 12px 16px;
    font-size: 14px;
    min-height: 46px;
    border-radius: 12px;
  }
  button[type='submit'], .btn-primary {
    min-height: 50px;
    border-radius: 14px !important;
    font-size: 15px !important;
  }

  /* ── Inputs ───────────────────────────────────────────────── */
  input, select, textarea, .grid-input {
    font-size: 16px !important;
    padding: 12px 14px;
    min-height: 48px;
    border-radius: 12px;
  }
  input[type='file'] { min-height: 42px; padding: 8px 10px; }
  textarea { min-height: 80px; border-radius: 12px; }

  /* ── Formularios: 1 columna ───────────────────────────────── */
  .ingreso-toolbar, .egreso-toolbar {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  /* Inputs de orden ocupan las 2 columnas */
  .ingreso-toolbar input,
  .egreso-toolbar input {
    grid-column: 1 / -1 !important;
  }
  /* Botón guardar ocupa las 2 columnas */
  .ingreso-toolbar .btn-save,
  .egreso-toolbar .btn-save {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }
  /* Botones secundarios en 2 columnas */
  .ingreso-toolbar .btn-soft,
  .egreso-toolbar .btn-soft {
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
  form { grid-template-columns: 1fr; gap: 10px; }

  /* ── KPI: grid 2 columnas, todo visible ───────────────────── */
  .kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .kpi {
    padding: 22px 18px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important;
    min-width: unset !important;
    min-height: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  /* Última KPI (5ta) ocupa todo el ancho */
  .kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    min-height: 90px !important;
  }
  .kpi span {
    font-size: 10px !important;
    letter-spacing: 0.6px;
    margin-bottom: 12px !important;
    display: block;
  }
  .kpi strong {
    font-size: 36px !important;
    letter-spacing: -1.5px;
    line-height: 1 !important;
  }

  /* ── Tablas ───────────────────────────────────────────────── */
  .table-wrap, .excel-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid var(--line);
  }
  .table-wrap {
    background:
      linear-gradient(to right, #fff 20%, rgba(255,255,255,0)) left center / 30px 100% no-repeat,
      linear-gradient(to right, rgba(255,255,255,0), #fff 80%) right center / 30px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.07), transparent) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.07), transparent) right center / 12px 100% no-repeat,
      #fff;
    background-attachment: local, local, scroll, scroll;
  }
  #tblIngresoGrid, #tblEgresoGrid { min-width: 1100px; }
  th { padding: 10px 12px; font-size: 10px; }
  td { padding: 9px 12px; font-size: 12.5px; }
  .docs-cell-wrap   { min-width: 140px; }
  .serie-scan-inline { min-width: 180px; }

  /* ── Ingreso / Egreso ─────────────────────────────────────── */
  #tab-ingreso.tab.active,
  #tab-egreso.tab.active { min-height: unset; display: block; }

  /* Wrapper de la grilla en modo card */
  .grid-card-wrap {
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    max-height: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Tabla sin scroll horizontal */
  #tblIngresoGrid,
  #tblEgresoGrid {
    display: block !important;
    min-width: unset !important;
    width: 100% !important;
  }
  #tblIngresoGrid thead,
  #tblEgresoGrid thead { display: none !important; }
  #tblIngresoGrid tbody,
  #tblEgresoGrid tbody { display: block !important; }

  /* Historico: tarjeta simple de 2 columnas label/valor */
  #ingresoHistoricoBody tr.hist-ing-row,
  #egresoHistoricoBody tr.hist-egr-row {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 6px 10px !important;
    margin-bottom: 12px !important;
    padding: 14px 14px 10px !important;
    border: 1px solid #e8edf3 !important;
    border-radius: 16px !important;
    background: var(--surface) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    min-width: unset !important;
    white-space: normal !important;
  }
  #ingresoHistoricoBody tr.hist-ing-row td,
  #egresoHistoricoBody tr.hist-egr-row td {
    display: contents !important;
    border: none !important;
    padding: 0 !important;
  }
  #ingresoHistoricoBody tr.hist-ing-row td::before,
  #egresoHistoricoBody tr.hist-egr-row td::before {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 800;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: center;
  }
  /* Fila de detalle expandida: ancho completo */
  #ingresoHistoricoBody tr.hist-ing-detail:not(.hidden),
  #egresoHistoricoBody tr.hist-egr-detail:not(.hidden) {
    display: block !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    border: 2px solid var(--brand) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 14px rgba(13,111,101,0.13) !important;
    background: rgba(13,111,101,0.04) !important;
  }
  #ingresoHistoricoBody tr.hist-ing-detail.hidden,
  #egresoHistoricoBody tr.hist-egr-detail.hidden { display: none !important; }
  #ingresoHistoricoBody tr.hist-ing-detail td,
  #egresoHistoricoBody tr.hist-egr-detail td {
    display: block !important;
    padding: 12px !important;
    border: none !important;
  }
  #ingresoHistoricoBody tr.hist-ing-detail td::before,
  #egresoHistoricoBody tr.hist-egr-detail td::before { display: none !important; }
  /* Tabla interna del detalle */
  .hist-ing-detail-wrap,
  .hist-egr-detail-wrap { overflow-x: hidden; padding: 8px; }

  /* Oculta thead — los labels vienen de data-label */
  .hist-ing-rows thead,
  .hist-egr-rows thead { display: none !important; }

  .hist-ing-rows,
  .hist-egr-rows { width: 100%; min-width: unset; border-collapse: collapse; }

  /* Cada fila = tarjeta: lista de label:valor */
  .hist-ing-rows tbody tr,
  .hist-egr-rows tbody tr {
    display: block !important;
    padding: 8px 10px !important;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }

  /* Cada celda: bloque simple con label encima del input */
  .hist-ing-rows tbody td,
  .hist-egr-rows tbody td {
    display: block !important;
    padding: 4px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    width: 100% !important;
  }
  .hist-ing-rows tbody td:last-child,
  .hist-egr-rows tbody td:last-child { border-bottom: none !important; }

  /* Label encima */
  .hist-ing-rows tbody td::before,
  .hist-egr-rows tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
  }

  /* Input ocupa todo el ancho, compacto */
  .hist-ing-rows .grid-input,
  .hist-egr-rows .grid-input {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    padding: 5px 8px !important;
    height: auto !important;
    min-height: unset !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* Celda serie (texto plano, sin input) */
  .hist-ing-rows tbody td:first-child,
  .hist-egr-rows tbody td:first-child {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    text-align: left !important;
  }

  /* Fila acciones: botones al centro */
  .hist-ing-rows tbody td:last-child::before,
  .hist-egr-rows tbody td:last-child::before { display: none !important; }
  .hist-ing-rows tbody td:last-child,
  .hist-egr-rows tbody td:last-child {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding-top: 8px !important;
  }

  /* Cada fila = tarjeta con campos en 2 columnas */
  #tblIngresoGrid tr,
  #tblEgresoGrid tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 10px !important;
    margin-bottom: 14px !important;
    padding: 16px 14px 12px !important;
    border: 1px solid #e8edf3 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.07) !important;
    min-width: unset !important;
    white-space: normal !important;
  }

  /* Cada celda = etiqueta + campo apilados */
  #tblIngresoGrid td,
  #tblEgresoGrid td {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 0 !important;
    border: none !important;
    white-space: normal !important;
    min-width: unset !important;
    width: auto !important;
    background: transparent !important;
  }

  /* Etiqueta de cada campo */
  #tblIngresoGrid td::before,
  #tblEgresoGrid td::before {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Inputs y selects dentro de celdas */
  #tblIngresoGrid td input,
  #tblIngresoGrid td select,
  #tblEgresoGrid td input,
  #tblEgresoGrid td select {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
  }

  /* Celda de serie/scan: apila input y botón */
  .serie-scan-inline {
    flex-direction: column !important;
    min-width: unset !important;
    width: 100% !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .serie-scan-inline .grid-input { width: 100% !important; min-width: unset !important; }
  .serie-scan-inline .scan-btn {
    width: 100% !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  /* Celda sin serie */
  .sin-serie-cell {
    flex-direction: column !important;
    min-width: unset !important;
    width: 100% !important;
  }
  .sin-serie-cell input { width: 100% !important; }

  /* Celda de documentos (egreso) */
  .docs-cell-wrap {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Última celda (botón Eliminar fila): ocupa las 2 columnas */
  #tblIngresoGrid td:last-child,
  #tblEgresoGrid td:last-child {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-top: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 2px !important;
  }
  #tblIngresoGrid td:last-child::before,
  #tblEgresoGrid td:last-child::before { display: none !important; }

  /* Columna precio oculta para roles sin permiso */
  #tblIngresoGrid td.ing-precio-col[style*="display: none"],
  #tblEgresoGrid td.ing-precio-col[style*="display: none"] { display: none !important; }

  /* ── Botones de acción al fondo del grid ─────────────────── */
  .mobile-grid-actions {
    display: flex;
    gap: 10px;
    padding: 14px 0 4px;
    margin-top: 10px;
    border-top: 1px solid var(--line);
  }
  .mobile-grid-actions button {
    flex: 1 !important;
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  .mobile-fab-scan {
    background: var(--brand-grd) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(13,111,101,0.35) !important;
  }
  .mobile-fab-scan:hover { box-shadow: 0 6px 20px rgba(13,111,101,0.45) !important; }
  .mobile-fab-serie {
    background: rgba(13,111,101,0.08) !important;
    color: var(--brand) !important;
    border: 1.5px solid rgba(13,111,101,0.25) !important;
  }

  /* Subnav ingreso/egreso */
  .ingreso-subnav, .egreso-subnav {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .ingreso-subtab, .egreso-subtab {
    flex-shrink: 0;
    font-size: 13px;
    padding: 10px 12px;
  }

  /* ── Modales: bottom sheet ────────────────────────────────── */
  .modal {
    padding: 0 !important;
    align-items: flex-end !important;
    background: rgba(10,18,36,0.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .modal-content {
    width: 100% !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    padding: 10px 16px 32px !important;
    border-radius: 24px 24px 0 0 !important;
    animation: sheetUp 0.32s cubic-bezier(0.32,0.72,0,1) both !important;
    border: none !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18) !important;
  }
  /* Tirador visual arriba del modal */
  .modal-content::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: #d1d5db;
    border-radius: 4px;
    margin: 0 auto 14px;
  }
  .modal-content h3 { font-size: 17px; }
  .docs-preview-modal-content { max-height: 90vh !important; }
  .docs-preview-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .docs-preview-media, .docs-preview-file { height: 110px; }

  /* ── Toast ────────────────────────────────────────────────── */
  .toast {
    left: 12px; right: 12px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    max-width: none;
    border-radius: 16px;
    font-size: 13.5px;
    padding: 14px 16px;
  }

  /* ── Catálogo ─────────────────────────────────────────────── */
  .catalogo-cards { grid-template-columns: 1fr; gap: 12px; }
  .catalogo-media-preview { height: 200px; }

  /* ── Reportes ─────────────────────────────────────────────── */
  .reportes-filters { grid-template-columns: 1fr; gap: 8px; }
  .reportes-charts-grid { grid-template-columns: 1fr; }
  .reportes-breakdown-grid { grid-template-columns: 1fr; }
  .report-chart-card { min-height: 290px; }
  .report-chart-card canvas { height: 230px !important; }

  /* ── Tracking ─────────────────────────────────────────────── */
  .tracking-card { padding: 14px; border-radius: 16px; }
  .tracking-head { flex-direction: column; align-items: flex-start; }

  /* ── Búsqueda ─────────────────────────────────────────────── */
  #searchRastreos, #searchHistorico, #searchStock {
    background-position: 12px center;
    padding-left: 40px;
  }

  /* ── Tablas → Tarjetas (resp-table) ───────────────────────── */
  .resp-table {
    overflow: visible !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .resp-table table {
    display: block !important;
    width: 100% !important;
    border-collapse: unset !important;
  }
  /* Ocultar fila de encabezados */
  .resp-table thead,
  .resp-table table > tr:first-child { display: none !important; }

  .resp-table tbody { display: block !important; }

  /* Cada fila se convierte en una tarjeta */
  .resp-table tr,
  .resp-table tbody tr {
    display: block !important;
    margin-bottom: 10px !important;
    border: 1px solid #e8edf3 !important;
    border-radius: 16px !important;
    padding: 6px 14px 8px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    animation: tabIn 0.3s var(--ease-out) both;
  }
  .resp-table tr:last-child { margin-bottom: 0 !important; }

  /* Cada celda: etiqueta a la izquierda, valor a la derecha */
  .resp-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 0 !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 13px !important;
    white-space: normal !important;
    word-break: break-word !important;
    min-height: unset !important;
    background: transparent !important;
  }
  .resp-table td:last-child {
    border-bottom: none !important;
    padding-bottom: 2px !important;
  }
  /* Etiqueta de columna antes de cada valor */
  .resp-table td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 9.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    min-width: 85px;
    max-width: 110px;
    line-height: 1.3;
  }
  /* Valor alineado a la derecha */
  .resp-table td > * { text-align: right; }

  /* Chips y badges dentro de cards */
  .resp-table .status-chip { font-size: 10px; padding: 3px 8px; }

  /* Fila "Sin datos" no necesita card */
  .resp-table tr:only-child { box-shadow: none !important; border: 1px dashed var(--line) !important; }
}

/* ─── MÓVIL pequeño (≤ 360px) ────────────────────────────────── */
@media (max-width: 360px) {
  .kpi { flex: 0 0 130px !important; min-width: 130px !important; }
  .tabs button { min-width: 52px; }
  h2 { font-size: 17px; }
}

/* ─── LANDSCAPE móvil ────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .sidebar { padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important; }
  .tabs button { padding: 5px 4px !important; }
  .tabs button svg { width: 18px; height: 18px; }
  main { padding-bottom: 68px; }
}

/* ─── DESKTOP grande (≥ 1600px) usa más ancho ───────────────── */
@media (min-width: 1600px) {
  main { max-width: 1640px; }
  .app-shell { grid-template-columns: 280px 1fr; gap: 24px; }
}

/* ─── Print ──────────────────────────────────────────────────── */
@media print {
  @page { size: letter landscape; margin: 10mm; }
  body::before, body::after, #topProgressBar { display: none; }
}

/* ─── Scanner Active (Capacitor) ─────────────────────────────── */
body.scanner-active { background: transparent !important; }
body.scanner-active > *:not(#scannerModal) { visibility: hidden; }

.ingreso-series-modal-content { width: min(960px, 96vw); }
.ingreso-series-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}
.ingreso-series-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

.ingreso-series-grid {
  max-height: 58vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  display: block;
  background: var(--card);
  width: 100%;
  box-sizing: border-box;
}
.ingreso-series-group {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--card);
  width: 100%;
  box-sizing: border-box;
}
.ingreso-series-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
}
.ingreso-series-group .ingreso-series-grid {
  max-height: none;
  overflow: visible;
  border: 0;
  padding: 8px 0 0;
  background: transparent;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}
.ingreso-series-grid .ingreso-series-cell {
  min-width: 0;
}
.ingreso-series-grid .serie-scan-inline {
  min-width: 0 !important;
  width: 100% !important;
  flex-direction: row !important;
}
.ingreso-series-grid .serie-scan-inline .grid-input {
  flex: 1 1 0;
  min-width: 0 !important;
}
.ingreso-series-grid .scan-btn {
  width: auto !important;
  flex-shrink: 0;
}
.ingreso-series-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ingreso-series-cell > span {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .03em;
}
.ingreso-series-cell input {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
}

.scan-tap-ring {
  position: fixed;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(34, 197, 94, 0.95);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 350;
  animation: scanTapPulse 0.5s ease-out forwards;
}

@keyframes scanTapPulse {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
/* ============================================================
   FASE ERP AVANZADO — Estilos para sin-serie, reservas, modales
   ============================================================ */

.logout-btn {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .55rem .7rem; margin-top: .4rem;
  background: linear-gradient(135deg, #c1361f, #a02612);
  color: #fff; border: none; border-radius: 10px;
  font-weight: 600; cursor: pointer;
}
.logout-btn:hover { filter: brightness(1.05); }

.btn-save {
  background: #f6eeee; color: rgb(240, 13, 13); border: 1px solid #e2cfcf;
}
.btn-save:hover { box-shadow: 0 6px 20px rgba(13,111,101,0.45); filter: brightness(1.05); }


.btn-soft {
  background: #eef6f4; color: #0d6f65; border: 1px solid #cfe2dd;
}
.btn-soft:hover { background: #e0eeea; }

.badge-sin-serie {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #fff3cd; color: #8a6d3b; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.sin-serie-cell {
  display: flex; align-items: center; gap: .35rem; min-width: 160px;
}
.sin-serie-cell input { width: 80px; }

.catalogo-typeahead {
  position: absolute; z-index: 50; min-width: 240px; max-width: 360px;
  background: #fff; border: 1px solid #d6dee2; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: 4px;
  max-height: 240px; overflow-y: auto; margin-top: 2px;
}
.cat-th-item {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; padding: 6px 8px; background: transparent; border: 0;
  text-align: left; cursor: pointer; border-radius: 6px;
}
.cat-th-item:hover { background: #f0f6f5; }

.proveedor-typeahead { position: fixed; z-index: 9999; min-width: 220px; }
.prov-th-create { border-top: 1px solid #e5eaed; margin-top: 2px; }
.cliente-typeahead { position: absolute; z-index: 60; min-width: 220px; max-width: 340px; left: 0; }
.cli-th-create { border-top: 1px solid #e5eaed; margin-top: 2px; }

.row-reserva-bloqueada {
  background: #fff0f0 !important; opacity: .75;
}
.row-reserva-bloqueada input,
.row-reserva-bloqueada select { background: #ffe1e1 !important; }

.reserva-modal-content,
.stock-modal-content,
.search-modal-content {
  max-width: 460px; padding: 18px 22px;
}
.search-modal-content { max-width: 620px; }
.reserva-user { font-size: 1.15rem; margin: .4rem 0; }
.stock-modal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0;
}
.stock-modal-grid div {
  background: #fef2f2; border-left: 4px solid #c1361f;
  padding: 8px 12px; border-radius: 8px;
}
.stock-modal-grid span { display: block; font-size: .8rem; color: #666; }
.stock-modal-grid strong { font-size: 1.4rem; color: #c1361f; }

.search-modal-filters {
  display: grid; grid-template-columns: 2fr 1fr auto; gap: 8px; margin: 8px 0 12px;
}
.search-modal-results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; max-height: 360px; overflow-y: auto;
}
.search-result-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 12px; border: 1px solid #d6dee2; background: #fff;
  border-radius: 10px; cursor: pointer; text-align: left;
}
.search-result-item:hover { border-color: #0d6f65; background: #f4faf9; }
.search-result-stock { font-size: .85rem; color: #0d6f65; }

.bitacora-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0;
}
.bitacora-toolbar input { flex: 1; min-width: 200px; }

#tblBitacora td, #tblBitacora th { font-size: .85rem; padding: 6px 8px; }

@media (max-width: 900px) {
  .stock-modal-grid { grid-template-columns: 1fr; }
  .search-modal-filters { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   APK MODE  —  clase .apk en <html>, activa cuando ?apk=1
   ═══════════════════════════════════════════════════════════════ */

/* ─── Top bar nativa ─────────────────────────────────────────── */
.apk-top-bar {
  display: flex;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #e8edf3;
  align-items: center; padding: 0 16px 0 14px; gap: 11px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.apk-top-logo {
  width: 34px; height: 34px; border-radius: 9px;
  object-fit: cover; object-position: center 44%;
  background: transparent; flex-shrink: 0;
  border: none;
}
.apk-top-title {
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.5px; flex: 1;
  background: var(--brand-grd);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.apk-top-user {
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 5px;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.apk-top-user:not(:empty)::before {
  content: '';
  width: 7px; height: 7px; flex-shrink: 0;
  border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.2);
  animation: onlinePulse 2.5s ease infinite;
}

/* ─── Body fondo ─────────────────────────────────────────────── */
.apk body { background: #eef2f7 !important; }
.apk body::before, .apk body::after { display: none !important; }

/* ─── main: espacio para top bar ────────────────────────────── */
.apk main { padding-top: calc(56px + 12px) !important; }

/* ─── APK en móvil ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .apk main {
    padding-top: calc(56px + 10px) !important;
    padding-bottom: 88px !important;
  }
  .apk .toast {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .apk * { scrollbar-width: none !important; }
  .apk *::-webkit-scrollbar { display: none !important; }
  .apk input, .apk select, .apk textarea { font-size: 16px !important; }
  .apk button { min-height: 46px; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE  —  clase .dark en <html>
   Toggle con botón luna/sol, guardado en localStorage
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tokens oscuros ─────────────────────────────────────────── */
html.dark {
  color-scheme: dark;
  --bg:        #0f172a;
  --surface:   rgba(22, 32, 54, 0.97);
  --card:      rgba(22, 32, 54, 0.97);
  --line:      #1e2d45;
  --line-2:    #2d3f5c;
  --ink:       #f1f5f9;
  --ink-2:     #e2e8f0;
  --muted:     #94a3b8;
  --muted-2:   #64748b;
  --brand-50:  rgba(13,111,101,0.15);
  --brand-100: rgba(13,111,101,0.25);
  --sb-bg:     #060d1c;
  --sb-ink:    #e2e8f0;
  --sb-muted:  #94a3b8;
}

/* ─── Body ───────────────────────────────────────────────────── */
html.dark body {
  background: #0b1120 !important;
  color: var(--ink) !important;
}
html.dark body::before { background: radial-gradient(circle, rgba(13,111,101,0.08) 0%, transparent 65%); }
html.dark body::after  { background: radial-gradient(circle, rgba(245,158,11,0.05) 0%, transparent 65%); }

/* ─── Cards ──────────────────────────────────────────────────── */
html.dark .card {
  background: rgba(22,32,54,0.97) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}

/* ─── KPIs ───────────────────────────────────────────────────── */
html.dark .kpi {
  background: rgba(22,32,54,0.97) !important;
  border-color: var(--line) !important;
}
html.dark .kpi span  { color: var(--muted) !important; }
html.dark .kpi strong { color: var(--ink) !important; }

/* ─── Inputs / Selects / Textarea ────────────────────────────── */
html.dark input,
html.dark textarea,
html.dark .grid-input {
  background-color: #111827 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark select {
  /* Solo cambia color de fondo, preserva el background-image de la flecha */
  background-color: #111827 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  /* Flecha en color claro para fondo oscuro */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--muted-2) !important; }
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(13,111,101,0.18) !important;
  background-color: #111827 !important;
}
html.dark input[type='date'] { color-scheme: dark; }

/* ─── Botones ────────────────────────────────────────────────── */
html.dark button {
  background: #1a2744 !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html.dark button:hover {
  background: #1e2f52 !important;
  border-color: var(--line-2) !important;
}
html.dark button[type='submit'],
html.dark .btn-primary {
  background: var(--brand-grd) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html.dark .btn-soft {
  background: rgba(13,111,101,0.15) !important;
  color: var(--brand-2) !important;
  border-color: rgba(13,111,101,0.3) !important;
}
html.dark .btn-save {
  background: rgba(111, 13, 13, 0.15) !important;
  color: #e74c3c !important;
  border-color: rgba(48, 1, 1, 0.3) !important;
}
html.dark .btn-remove-row,
html.dark .btn-danger {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #f87171 !important;
}

html.dark .btn-hist-del { background: #b91c1c !important; color: #fff !important; border-color: #b91c1c !important; }
html.dark .btn-hist-save { background: #0d6f65 !important; color: #fff !important; border-color: #0d6f65 !important; }
html.dark .btn-hist-add-row { background: #0d6f65 !important; color: #fff !important; border-color: #0d6f65 !important; }
html.dark .btn-hist-barcodes { background: #1f2937 !important; color: #fff !important; border-color: #334155 !important; }
html.dark .btn-hist-toggle { background: #1a2744 !important; color: var(--ink) !important; border-color: var(--line) !important; }

/* ─── Tablas ─────────────────────────────────────────────────── */
html.dark .table-wrap,
html.dark .excel-wrap {
  background: #111827 !important;
  border-color: var(--line) !important;
}
html.dark thead tr { background: #0f172a !important; }
html.dark th {
  background: #0f172a !important;
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}
html.dark td {
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
}
html.dark tbody tr:hover td { background: #1a2744 !important; }

/* ─── Resp-table cards ───────────────────────────────────────── */
html.dark .resp-table tr,
html.dark .resp-table tbody tr {
  background: rgba(22,32,54,0.97) !important;
  border-color: var(--line) !important;
}
html.dark .resp-table td { border-bottom-color: #1a2540 !important; color: var(--ink) !important; }
html.dark .resp-table td::before { color: var(--muted-2) !important; }

/* ─── Grid ingreso/egreso cards ──────────────────────────────── */
html.dark #tblIngresoGrid tr,
html.dark #tblEgresoGrid tr {
  background: rgba(22,32,54,0.97) !important;
  border-color: var(--line) !important;
}
html.dark #tblIngresoGrid td,
html.dark #tblEgresoGrid td { color: var(--ink) !important; }
html.dark #tblIngresoGrid td:last-child,
html.dark #tblEgresoGrid td:last-child { border-top-color: #1a2540 !important; }

/* ─── Top bar APK ────────────────────────────────────────────── */
html.dark .apk-top-bar {
  background: #080f1f !important;
  border-bottom-color: var(--line) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
html.dark .apk-top-user { color: var(--muted-2) !important; }

/* ─── Bottom nav móvil ───────────────────────────────────────── */
@media (max-width: 640px) {
  html.dark .sidebar {
    background: rgba(8,15,31,0.97) !important;
    border-top-color: var(--line) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5) !important;
  }
  html.dark .tabs button { color: var(--muted-2) !important; }
  html.dark .tabs button.active {
    color: var(--brand-2) !important;
    background: rgba(13,111,101,0.15) !important;
  }
  html.dark body { background: #080f1f !important; }
}

/* ─── Sidebar escritorio dark ────────────────────────────────── */
html.dark .sidebar { border-color: rgba(255,255,255,0.06) !important; }

/* ─── Modales ────────────────────────────────────────────────── */
html.dark .modal { background: rgba(0,0,0,0.75) !important; }
html.dark .modal-content {
  background: #111827 !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark .modal-content h3 { color: var(--ink) !important; }
html.dark .modal-content::before { background: var(--line) !important; }
html.dark .modal-content .title-row { border-bottom-color: var(--line) !important; }

/* ─── Toast ──────────────────────────────────────────────────── */
html.dark .toast {
  background: #1e293b !important;
  color: var(--ink) !important;
  border-left-color: var(--brand) !important;
}

/* ─── Cards de tracking ──────────────────────────────────────── */
html.dark .tracking-card {
  background: rgba(22,32,54,0.97) !important;
  border-color: var(--line) !important;
}
html.dark .tracking-title { color: var(--ink) !important; }

/* ─── Catálogo cards ─────────────────────────────────────────── */
html.dark .catalogo-card {
  background: rgba(22,32,54,0.97) !important;
  border-color: var(--line) !important;
}
html.dark .catalogo-card-head { background: #111827 !important; border-bottom-color: var(--line) !important; }
html.dark .catalogo-card-title { color: var(--ink) !important; }

/* ─── Formularios y paneles con fondo fijo ───────────────────── */
html.dark .tracking-manage-panel {
  background: #111827 !important;
  border-color: var(--line) !important;
}
html.dark .report-breakdown-card,
html.dark .report-chart-card,
html.dark .rpro-kpi,
html.dark .catalogo-card-body,
html.dark .tracking-cards .tracking-card {
  background: rgba(22,32,54,0.97) !important;
  border-color: var(--line) !important;
}
html.dark .report-chart-card {
  background: #111827 !important;
}
html.dark h3 { color: var(--ink-2) !important; }
html.dark .muted { color: var(--muted) !important; }

/* Subnavs */
html.dark .ingreso-subnav,
html.dark .egreso-subnav { border-bottom-color: var(--line) !important; }
html.dark .ingreso-subtab,
html.dark .egreso-subtab { color: var(--muted) !important; background: transparent !important; }
html.dark .ingreso-subtab.active,
html.dark .egreso-subtab.active { color: var(--brand-2) !important; border-bottom-color: var(--brand-2) !important; }

/* Reportes filtros y toolbar */
html.dark .reportes-filters label,
html.dark .rpro-toolbar label { color: var(--muted) !important; }
html.dark .rpro-kpi { background: #111827 !important; border-color: var(--line) !important; }
html.dark .rpro-kpi span { color: var(--muted) !important; }
html.dark .rpro-kpi strong { color: var(--ink) !important; }

/* Bitácora toolbar */
html.dark .bitacora-toolbar input { background: #111827 !important; }

/* Search modals */
html.dark .search-result-item {
  background: #111827 !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html.dark .search-result-item:hover { background: #1a2744 !important; border-color: var(--brand) !important; }

/* Catalogo file field */
html.dark .catalogo-file-field {
  background: #111827 !important;
  border-color: var(--line) !important;
}
html.dark .catalogo-file-field:hover { background: rgba(13,111,101,0.1) !important; }

/* Hist rows (ingreso/egreso histórico expandido) */

/* Tarjeta resumen (fila de grupo) en dark mode */
html.dark #ingresoHistoricoBody tr.hist-ing-row,
html.dark #egresoHistoricoBody tr.hist-egr-row {
  background: #1a2336 !important;
  border-color: #1e3a5f !important;
}

/* Panel detalle expandido en dark mode — tinte teal distintivo */
html.dark .hist-ing-detail,
html.dark .hist-egr-detail {
  background: rgba(13,111,101,0.07) !important;
  border-color: var(--brand) !important;
}
html.dark .hist-ing-detail-wrap,
html.dark .hist-egr-detail-wrap { background: transparent !important; }

/* Encabezados y celdas de la tabla interior */
html.dark .hist-ing-rows td,
html.dark .hist-egr-rows td,
html.dark .hist-ing-rows th,
html.dark .hist-egr-rows th {
  border-bottom-color: rgba(255,255,255,0.08) !important;
  color: var(--ink) !important;
}
html.dark .hist-ing-rows th,
html.dark .hist-egr-rows th {
  background: rgba(13,111,101,0.15) !important;
  color: var(--brand-2) !important;
}

/* Inputs dentro del detalle en dark mode (desktop y mobile) */
html.dark .hist-ing-detail .grid-input,
html.dark .hist-egr-detail .grid-input {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

/* Tarjetas internas en dark mode (mobile) */
@media (max-width: 640px) {
  html.dark .hist-ing-rows tbody tr,
  html.dark .hist-egr-rows tbody tr {
    background: #0f172a !important;
    border-color: #1e3a5f !important;
  }
  html.dark .hist-ing-rows tbody td,
  html.dark .hist-egr-rows tbody td {
    border-bottom-color: #1e2d45 !important;
    color: #f1f5f9 !important;
  }
  html.dark .hist-ing-rows tbody td::before,
  html.dark .hist-egr-rows tbody td::before {
    color: #94a3b8 !important;
  }
  html.dark .hist-ing-rows .grid-input,
  html.dark .hist-egr-rows .grid-input {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
    text-align: left !important;
  }
}

/* Stock / reserva modals */
html.dark .stock-modal-grid div { background: rgba(239,68,68,0.1) !important; border-color: rgba(239,68,68,0.3) !important; }
html.dark .reserva-modal-content,
html.dark .stock-modal-content,
html.dark .search-modal-content { background: #111827 !important; }

/* Docs preview — PDF iframe override */
.docs-preview-card iframe.docs-preview-media { height: 340px !important; object-fit: unset; }
@media (max-width: 640px) { .docs-preview-card iframe.docs-preview-media { height: 220px !important; } }

/* Docs preview */
html.dark .docs-preview-card { background: #111827 !important; border-color: var(--line) !important; }
html.dark .docs-preview-info { background: transparent !important; }
html.dark .docs-preview-file { background: #1a2744 !important; }
html.dark .docs-preview-name { color: var(--ink-2) !important; }

/* Typeahead */
html.dark .catalogo-typeahead { background: #111827 !important; border-color: var(--line) !important; }
html.dark .cat-th-item:hover { background: #1a2744 !important; }
html.dark .cat-th-item { color: var(--ink) !important; }
html.dark .prov-th-create { border-top-color: var(--line) !important; }
html.dark .cli-th-create  { border-top-color: var(--line) !important; }

/* Tabla interna de tracking */
html.dark .tracking-timeline { border-left-color: var(--line) !important; }
html.dark .tracking-event-title { color: var(--ink) !important; }
html.dark .tracking-subtitle { color: var(--muted) !important; }
html.dark .tracking-resumen { color: var(--ink-2) !important; }
html.dark .tracking-empty { border-color: var(--line) !important; color: var(--muted) !important; }
html.dark .tracking-edit-btn { background: var(--brand) !important; color: #fff !important; }
html.dark .tracking-del-btn  { background: #b91c1c !important; color: #fff !important; }
html.dark .tracking-progress { background: var(--line) !important; }

/* Readonly cells en grids */
html.dark .readonly-cell { background: #0f172a !important; color: var(--muted) !important; }

/* Sin datos row */
html.dark .resp-table tr:only-child { background: transparent !important; border-color: var(--line) !important; }

/* Grid card wrap */
html.dark .grid-card-wrap { background: transparent !important; }

/* Skeleton */
html.dark .skeleton { background: linear-gradient(90deg, #1e293b 25%, #293548 50%, #1e293b 75%) !important; background-size: 200% 100% !important; }

/* Docs preview modal */
html.dark .docs-preview-modal-content { background: #111827 !important; }

/* ─── mobile-grid-actions: solo visible en móvil ────────────── */
@media (min-width: 641px) {
  .mobile-grid-actions { display: none; }
}

/* ─── Dark mode: botones de grid ────────────────────────────── */
html.dark .mobile-fab-serie {
  background: rgba(13,111,101,0.15) !important;
  color: var(--brand-2) !important;
  border-color: rgba(13,111,101,0.3) !important;
}
html.dark .mobile-grid-actions {
  border-top-color: var(--line) !important;
}

/* ─── Botón toggle de tema ───────────────────────────────────── */
.theme-toggle-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: unset !important;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s !important;
}
.theme-toggle-btn:hover {
  background: rgba(0,0,0,0.08) !important;
  transform: none !important;
  box-shadow: none !important;
}
html.dark .theme-toggle-btn { color: #facc15 !important; }
html.dark .theme-toggle-btn:hover { background: rgba(255,255,255,0.08) !important; }
.theme-toggle-btn svg { width: 18px; height: 18px; }

/* Botón toggle en sidebar */
.theme-toggle-sidebar-btn {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--sb-muted) !important;
  font-weight: 600; font-size: 13px;
  border-radius: var(--r) !important;
  display: flex !important; align-items: center !important;
  gap: 8px !important; padding: 8px 12px !important;
  margin-bottom: 6px;
  box-shadow: none !important;
  min-height: unset !important;
}
.theme-toggle-sidebar-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--sb-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* ─── Sidebar hover expand (desktop) ──────────────────────── */
@media (min-width: 641px) {

  /* Colapsado por defecto */
  .app-shell { grid-template-columns: 68px 1fr !important; }
  .app-shell .menu-toggle { display: none !important; }

  .sidebar {
    padding: 10px 8px !important;
    overflow: hidden;
    transition: padding 0.3s ease, width 0.3s ease;
  }

  /* Ocultar texto de tabs y logout SIN quitar espacio de alto */
  .app-shell .sidebar .tabs span,
  .app-shell .sidebar .logout-btn span {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.2s ease, max-width 0.2s ease;
  }

  /* Ocultar elementos que agregan altura — con max-height para no saltar */
  .app-shell .sidebar .brand,
  .app-shell .sidebar #userBar,
  .app-shell .sidebar .sidebar-divider {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0 !important;
    transition: max-height 0.3s ease, opacity 0.2s ease;
  }

  /* Centrar botones al colapsar */
  .app-shell .tabs button {
    justify-content: center !important;
    padding: 10px !important;
  }
  .app-shell .sidebar .logout-btn {
    justify-content: center !important;
    padding: 10px !important;
  }

  /* ── Hover: expandir ── */
  .app-shell:has(.sidebar:hover) { grid-template-columns: 260px 1fr !important; }

  .app-shell .sidebar:hover {
    padding: 16px 14px !important;
  }

  /* Mostrar texto de tabs y logout */
  .app-shell .sidebar:hover .tabs span,
  .app-shell .sidebar:hover .logout-btn span {
    opacity: 1;
    max-width: 200px;
  }

  /* Restaurar elementos de altura */
  .app-shell .sidebar:hover .brand,
  .app-shell .sidebar:hover #userBar,
  .app-shell .sidebar:hover .sidebar-divider {
    max-height: 120px;
    opacity: 1;
  }

  /* Restaurar alineación de botones */
  .app-shell .sidebar:hover .tabs button {
    justify-content: flex-start !important;
    padding: 10px 12px !important;
  }
  .app-shell .sidebar:hover .logout-btn {
    justify-content: flex-start;
    padding: .55rem .7rem !important;
  }
}

/* ─── Scanner Modal — Full Screen Redesign ──────────────────── */
#scannerModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: #000 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  animation: scanFadeIn 0.22s ease both !important;
}
#scannerModal.hidden { display: none !important; }
@keyframes scanFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Camera layer — html5-qrcode injects video here */
#scanner {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
/* Force only the scan_region container to fill the scanner */
[id$="__scan_region"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
#scanner video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.18s ease !important;
  transform-origin: center center !important;
  filter: contrast(1.6) brightness(1.1) saturate(0.6) !important;
}
/* Hide html5-qrcode overlay/dashboard — CSS is a first line of defense,
   JS MutationObserver provides the reliable enforcement */
#qr-shaded-region,
[id$="__dashboard"],
[id$="__dashboard_section_csr"],
[id$="__dashboard_section_swaplink"],
[id$="__header_message"] {
  display: none !important;
}
/* Keep canvas in DOM (detection uses it) but invisible */
#scanner canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Overlay: darkened areas with rectangular cutout ─────────── */
#scanOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  z-index: 10;
}
.sov-top  { flex: 1;   background: rgba(0,0,0,0.58); }
.sov-mid  { height: var(--sf-h, 107px); display: flex; flex-shrink: 0; }
.sov-side { flex: 1;   background: rgba(0,0,0,0.58); }
.sov-bottom { flex: 1.5; background: rgba(0,0,0,0.58); }

/* Scan frame — the transparent rectangle */
#scanFrame {
  flex: 0 0 var(--sf-w, 280px);
  position: relative;
}

/* Corner brackets */
.sc-corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: #fff;
  border-style: solid;
  pointer-events: none;
}
.sc-corner.sc-tl { top: 0;    left: 0;    border-width: 3px 0 0 3px; border-radius: 3px 0 0 0; }
.sc-corner.sc-tr { top: 0;    right: 0;   border-width: 3px 3px 0 0; border-radius: 0 3px 0 0; }
.sc-corner.sc-bl { bottom: 0; left: 0;    border-width: 0 0 3px 3px; border-radius: 0 0 0 3px; }
.sc-corner.sc-br { bottom: 0; right: 0;   border-width: 0 3px 3px 0; border-radius: 0 0 3px 0; }

/* Animated scan line */
#scanLine {
  position: absolute;
  left: 6px; right: 6px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,204,0.4) 20%,
    #00e5cc 50%,
    rgba(0,229,204,0.4) 80%,
    transparent 100%
  );
  box-shadow: 0 0 10px 2px rgba(0,229,204,0.5);
  border-radius: 2px;
  animation: scanLineMove 2s ease-in-out infinite;
}
@keyframes scanLineMove {
  0%, 100% { top: 8%; }
  50%       { top: 82%; }
}

/* ── Top bar ─────────────────────────────────────────────────── */
#scanTopBar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top, 16px)) 16px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, transparent 100%);
  color: #fff;
  gap: 12px;
}
.scan-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  flex: 1;
  text-align: center;
}
.scan-icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.scan-icon-btn:active { background: rgba(255,255,255,0.28); transform: scale(0.93); }
.scan-icon-btn svg { width: 20px; height: 20px; stroke-width: 2; }
.scan-icon-btn.scan-torch-on { background: rgba(255,220,0,0.35); color: #ffe066; }

/* ── Bottom panel ────────────────────────────────────────────── */
#scanBottomPanel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  padding: 24px 20px max(24px, env(safe-area-inset-bottom, 24px));
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scan-ctrl-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scan-ctrl-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7);
  min-width: 56px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.scan-ctrl-label svg { width: 12px; height: 12px; stroke-width: 2.5; }
.scan-ctrl-row input[type="range"] {
  flex: 1;
  accent-color: #00e5cc;
  height: 3px;
  cursor: pointer;
  background: rgba(255,255,255,0.25);
  border-radius: 99px;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: unset !important;
  appearance: none;
  -webkit-appearance: none;
}
.scan-ctrl-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #00e5cc;
  box-shadow: 0 0 6px rgba(0,229,204,0.6);
  cursor: pointer;
}
.scan-ctrl-val {
  font-size: 11px;
  font-weight: 700;
  color: #00e5cc;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.scan-continuous-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
}
#scanContinuoStatus { color: #00e5cc; }

/* ── Success flash ───────────────────────────────────────────── */
#scanSuccessFlash {
  position: absolute;
  inset: 0;
  background: rgba(0, 229, 204, 0.22);
  z-index: 30;
  pointer-events: none;
  animation: scanSuccessAnim 0.55s ease both;
}
#scanSuccessFlash.hidden { display: none; }
@keyframes scanSuccessAnim {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.launche-header {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
}
.launcher-logo {
  height: 48px;
  object-fit: contain;
}
#tab-inicio.tab.active {
  display: flex !important;
  flex-direction: column;
  min-height: calc(100dvh - 60px);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.modulos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
  padding: 40px 36px;
  flex: 1;
  align-content: center;
}
.modulo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px 30px;
  border: none;
  border-radius: 26px;
  background: var(--surface, #f5f5f5);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.modulo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.modulo-card:active {
  transform: scale(0.96);
}
.modulo-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 18px;
}
/* el cambio de imagen _blanco/_negro lo maneja el JS */

/* ══════════════════════════════════════
   LAUNCHER HEADER — SVG animado
══════════════════════════════════════ */
.launcher-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 36px 36px 0;
}

/* Contenedor SVG */
.launcher-svg-wrap {
  width: 100%;
  max-width: 480px;
  animation: launcherFadeUp 0.4s ease both;
}
.invento-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── Animaciones SVG ────────────────── */

/* ── Animaciones SVG INVENTO ─────────────────────────────────────

   Secuencia:
   0.2s → caja se dibuja        (0.8s)
   1.0s → barra barre + texto   (0.8s)  ← sincronizados
   1.8s → subtexto aparece      (0.6s)
──────────────────────────────────────────────────────────────── */

/* 1. Caja: borde se dibuja con stroke */
.inv-box {
  stroke-dasharray: 940;
  stroke-dashoffset: 940;
  animation: invBoxDraw 0.4s ease 0.1s forwards;
}
@keyframes invBoxDraw {
  to { stroke-dashoffset: 0; opacity: 1; }
}

/* 2. ClipPath se expande de izquierda a derecha — revela el texto */
#inv-clip-rect {
  animation: invClipExpand 0.4s ease 0.4s both;
}
@keyframes invClipExpand {
  from { width: 0; }
  to   { width: 356px; }
}

/* 3. Barra de scan vertical se mueve de izquierda a derecha */
.inv-scan-line {
  animation: invScanAppear 0.05s ease 0.4s both,
             invScan       0.4s ease 0.4s both;
}
@keyframes invScanAppear {
  to { opacity: 1; }
}
@keyframes invScan {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(352px); opacity: 0; }
}

/* 4. Subtexto fade up */
.inv-subtext {
  animation: invSubtext 0.4s ease 0.4s both;
}
@keyframes invSubtext {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

/* Info row debajo del SVG */
.launcher-info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  animation: launcherFadeUp 0.5s ease 1.8s both;
}
.launcher-welcome {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.launcher-welcome__label {
  font-size: 15px;
  color: var(--text-muted, #888);
}
.launcher-welcome__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent, #0d6f65);
}

/* Reloj + fecha */
.launcher-header__time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.launcher-clock {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text);
}
.launcher-date {
  font-size: 12px;
  color: var(--text-muted, #888);
  text-transform: capitalize;
}

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

/* ══════════════════════════════════════
   MÓDULO USUARIOS
══════════════════════════════════════ */

/* Layout principal: form izq + tabla der */
.usuarios-layout,
.clientes-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .usuarios-layout { grid-template-columns: 1fr; }
}

/* Panel del formulario */
.usuarios-form-panel,
.clientes-form-panel {
  position: sticky;
  top: 16px;
  padding: 20px;
}
.usuarios-form-panel h3,
.clientes-form-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 15px;
}
.usuarios-form-panel form,
.clientes-form-panel form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usuarios-form-panel label,
.clientes-form-panel label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.usuarios-form-panel label input,
.usuarios-form-panel label select,
.clientes-form-panel label input,
.clientes-form-panel label select {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  width: 100%;
}
.req { color: var(--danger, #ef4444); }

/* Panel tabla */
.usuarios-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.usuarios-table-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0;
}
.input-search {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  min-width: 200px;
}

/* Avatares en tabla */
.user-avatar-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent, #0d6f65);
}
.user-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px dashed var(--line);
}
.user-avatar-placeholder i { width: 16px; height: 16px; opacity: 0.5; }

/* Fila inactiva */
.row-inactive { opacity: 0.5; }

/* Badges rol */
.badge-role {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--surface);
}
.badge-role--sudoadmin { background: #7c3aed22; color: #7c3aed; }
.badge-role--operador  { background: #0d6f6522; color: #0d6f65; }
.badge-role--contabilidad { background: #f59e0b22; color: #d97706; }
.badge-role--logistica { background: #3b82f622; color: #3b82f6; }

/* Badge estado */
.badge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.badge-status--on  { background: #10b98122; color: #059669; }
.badge-status--off { background: #ef444422; color: #dc2626; }

/* Botones icono en tabla */
.td-actions { white-space: nowrap; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: none;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-icon i { width: 14px; height: 14px; }
.btn-icon:hover { background: var(--accent, #0d6f65); color: #fff; }
.btn-icon--danger:hover  { background: #ef4444; color: #fff; }
.btn-icon--success:hover { background: #10b981; color: #fff; }
.btn-icon:disabled { opacity: 0.35; cursor: not-allowed; }

/* Botón primario ancho completo */
.btn-primary-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: var(--accent, #0d6f65);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 0.15s;
}
.btn-primary-full:hover { opacity: 0.88; }

/* Modal editar usuario */
.user-edit-modal-content { max-width: 560px; }
.user-foto-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.user-foto-preview {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent, #0d6f65);
}
.user-foto-placeholder {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--line);
}
.user-foto-placeholder i { width: 36px; height: 36px; opacity: 0.4; }

/* Sección label dentro del modal */
.modal-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #888);
  margin: 14px 0 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.modal-section-label .muted { text-transform: none; letter-spacing: 0; }

/* Formularios: fila de 2 columnas */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-row label input,
.form-row label select {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Sin sidebar: content-area ocupa todo el ancho ── */
.app-shell:not(.hidden) {
  display: block !important;
}
.app-shell:not(.hidden) .content-area {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* ── Botón volver al launcher ── */
.btn-volver-inicio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 10px;
  background: var(--surface, #f0f0f0);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-volver-inicio:hover {
  background: var(--primary, #0d6f65);
  color: #fff;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.topbar-empresa-logo {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0;
  border: 1.5px solid var(--line);
  background: var(--surface2);
}
.topbar-empresa-img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.topbar-empresa-initial {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff; border-radius: 6px;
}
.topbar-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent, #0d6f65);
  border: 2px solid var(--accent, #0d6f65);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topbar-foto,
.topbar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: none;
}
.topbar-initials {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

/* ══════════════════════════════════════
   MI CUENTA
══════════════════════════════════════ */
.cuenta-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 16px;
}
@media (max-width: 700px) {
  .cuenta-layout { grid-template-columns: 1fr; }
}

/* Panel foto */
.cuenta-foto-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 16px;
}
.cuenta-avatar-wrap {
  position: relative;
  width: 130px;
  height: 130px;
}
.cuenta-foto-img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent, #0d6f65);
}
.cuenta-foto-placeholder {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cuenta-foto-placeholder i { width: 52px; height: 52px; opacity: 0.4; }
.cuenta-nombre-display {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 0;
  text-align: center;
}
.cuenta-rol-display {
  font-size: 12px;
  color: var(--accent, #0d6f65);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

/* Panel forms */
.cuenta-forms-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cuenta-card {
  padding: 20px;
}
.cuenta-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 16px;
}
.cuenta-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.cuenta-card label input {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

/* Botón cerrar sesión */
.btn-logout-full {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 10px;
  background: #ef444420;
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-logout-full:hover { background: #ef444435; }

/* ─── Caja Chica ─────────────────────────────────────────────── */
.cc-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.cc-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .4px;
  text-transform: uppercase;
  min-width: 120px;
}
.cc-form label input,
.cc-form label select {
  margin: 0;
  font-size: 13px;
}
.cc-grow { flex: 2 1 180px !important; }
.cc-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 1px;
}
.cc-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.cc-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.cc-section-sub {
  font-size: 12px;
  color: var(--muted-2);
  margin: 0 0 12px;
}
.cc-btn-outline {
  background: transparent !important;
  color: var(--brand) !important;
  border: 1.5px solid var(--brand) !important;
  box-shadow: none !important;
  align-content: center;
}
.cc-btn-outline:hover {
  background: rgba(13,111,101,0.08) !important;
  transform: translateY(-1px) !important;
}
#btnRegistrarGasto, #btnGenerarLista, #btnGuardarFondos, #btnToggleAjuste {
  background: #00b894 !important;
  color: #ffffff !important;
  border: 1.5px solid #00b894 !important;
  box-shadow: none !important;
}
#btnRegistrarGasto:hover, #btnGenerarLista:hover, #btnGuardarFondos:hover, #btnToggleAjuste:hover {
  background: #00cec9 !important;
  border-color: #00cec9 !important;
}
#btnToggleAjuste {
  width: 35%;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cc-btn-lista {
  background: #81ecec !important;
  color: var(--brand) !important;
  border: 1.5px solid var(--brand) !important;
  box-shadow: none !important;
  align-content: center;
}
.cc-btn-lista:hover {
  background: rgba(13,111,101,0.08) !important;
  transform: translateY(-1px) !important;
}


.cc-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cc-divider::before,
.cc-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.cc-dropzone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-sm);
  transition: border-color var(--t-sm), background var(--t-sm);
}
.cc-dropzone--over {
  border-color: var(--brand);
  background: rgba(13,111,101,0.05);
}
.cc-dropzone-hint { font-size: 12px; color: var(--muted-2); }
.cc-file-list {
  list-style: none; padding: 0; margin: 0; width: 100%;
  display: flex; flex-direction: column; gap: 4px;
}
.cc-file-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: var(--r-xs);
  background: rgba(13,111,101,0.06); font-size: 12.5px;
}
.cc-file-item-name { flex: 1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-file-item-size { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.cc-file-item-remove {
  background: none !important; border: none !important; box-shadow: none !important;
  color: var(--muted) !important; font-size: 16px; line-height: 1;
  padding: 0 2px !important; cursor: pointer; flex-shrink: 0;
}
.cc-file-item-remove:hover { color: #ef4444 !important; transform: none !important; }
.cc-comp-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-xs);
  background: rgba(13,111,101,0.10);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(13,111,101,0.25) !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
}
.cc-comp-btn:hover { background: rgba(13,111,101,0.18) !important; transform: none !important; }
html.dark .cc-comp-btn { background: rgba(13,111,101,0.15); border-color: rgba(13,111,101,0.3) !important; }
.cc-comp-btn i { width: 13px; height: 13px; }
.cc-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-comp-btn--subir { background: rgba(59,130,246,0.10); color: #3b82f6; border-color: rgba(59,130,246,0.25) !important; }
.cc-comp-btn--subir:hover { background: rgba(59,130,246,0.18) !important; }
html.dark .cc-comp-btn--subir { background: rgba(59,130,246,0.15); border-color: rgba(59,130,246,0.3) !important; }
.cc-comp-btn--edit { background: rgba(245,158,11,0.10); color: #b45309; border-color: rgba(245,158,11,0.25) !important; }
.cc-comp-btn--edit:hover { background: rgba(245,158,11,0.18) !important; }
html.dark .cc-comp-btn--edit { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.3) !important; color: #fbbf24; }
.cc-file-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-xs);
  background: rgba(13,111,101,0.08); color: var(--brand);
  font-size: 11.5px; font-weight: 500; text-decoration: none;
  margin: 2px 3px 2px 0; border: 1px solid rgba(13,111,101,0.2);
  transition: background var(--t-sm);
}
.cc-file-link:hover { background: rgba(13,111,101,0.16); text-decoration: none; }
html.dark .cc-file-link { background: rgba(13,111,101,0.15); border-color: rgba(13,111,101,0.3); }

.cc-gasto-row{
  border:1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
  animation: tabIn 0.25s var(--ease-out) both;
  scroll-margin-top: 12px;
}
.cc-gasto-row-badge{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: var(--r-full);
}
.cc-gasto-row-badge.comprobante{
  background: rgba(13,111,101,0.12);
  color: var(--brand);
  border:1px solid rgba(13,111,101,0.25);
}
.cc-gasto-row-badge.factura{
  background: rgba(99,102,241,0.12);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,0.25);
}
.cc-gasto-row-remove{
  margin-left: auto;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  padding: 2px 6px !important;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cc-gasto-row-remove:hover{
  color: #ef4444 !important;
  transform: none !important;
}
/* ===========================
   RADIO PREMIUM LIGHT / DARK
   =========================== */

:root {
  --radio-bg: #ffffff;
  --radio-border: #94a3b8;
  --radio-hover: #74b9ff;
  --radio-primary: #74b9ff;
  --radio-primary-dark: #4a69bd;
}

.dark {
  --radio-bg: rgba(255, 255, 255, 0.04);
  --radio-border: rgba(255, 255, 255, 0.18);
  --radio-hover: #74b9ff;
  --radio-primary: #74b9ff;
  --radio-primary-dark: #4a69bd;
}

.cc-gasto-sel {
  appearance: none;
  -webkit-appearance: none;

  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;

  background: var(--radio-bg);
  border: 2px solid var(--radio-border);

  transition: all 0.25s ease;
}

/* Hover */
.cc-gasto-sel:hover {
  border-color: var(--radio-hover);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(116, 185, 255, 0.15);
}

/* Punto interior */
.cc-gasto-sel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: #60a3bc;

  transform: translate(-50%, -50%) scale(0);
  opacity: 0;

  transition: all 0.25s ease;
}

/* Seleccionado */
.cc-gasto-sel:checked {
  border-color: var(--radio-primary);

  box-shadow:
    0 0 0 4px rgba(116, 185, 255, 0.15),
    0 0 18px rgba(116, 185, 255, 0.25);
}

.cc-gasto-sel:checked::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Animación al hacer clic */
.cc-gasto-sel:active {
  transform: scale(0.95);
}
/* ── Modal detalle ingreso con imágenes ── */
.ing-det-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 4px;
}
.ing-det-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-bg, var(--bg-2));
  display: flex;
  flex-direction: column;
}
.ing-det-card-img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: var(--suface);
  padding:8px;
}
html.dark .ing-det-card-img {
  background: #1a1a2e;
}

.ing-det-card-img-empresa {
  padding: 20px;
  opacity: 0.7;
  background: var(--bg-2, #12122a);
}
.ing-det-card-img-empty {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: var(--bg-3, #1a1a2e);
  color: var(--muted-2);
}
.ing-det-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ing-det-card-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}
.ing-det-card-serie {
  font-size: 11px;
  color: var(--muted-2);
  font-family: monospace;
}
.ing-det-card-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.ing-det-card-fields label {
  font-size: 10px;
  color: var(--muted-2);
  margin-bottom: 1px;
  display: block;
}
.ing-det-card-fields input,
.ing-det-card-fields select {
  width: 100%;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-1, var(--bg));
  color: inherit;
}
.ing-det-card-btns {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.ing-det-card-btns button {
  flex: 1;
  font-size: 11px;
  padding: 5px 0;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.btn-ing-det-save { background: var(--brand); color: #fff;}
.btn-ing-det-del  { background: var(--err, #ee5253); color: #fff; }

/* ── Resumen por modelo en modal de ingreso ── */
.ing-det-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 2px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ing-det-summary-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
html.dark .ing-det-summary-chip{
  background: #1a1a2e;
}

.ing-det-summary-chip strong {
  font-size: 15px;
  color: var(--brand, #74b9ff);
}

/* ── Proveedor typeahead con avatar ── */
.prov-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.prov-th-item,
.prov-th-create {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
  width: 100%;
}
.prov-th-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.prov-th-info strong { white-space: nowrap; }
.prov-th-info .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Foto proveedor ── */
.prov-foto-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
}
.prov-table-foto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.user-picker-dropdown{
  position:absolute;
  top:100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.user-picker-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .15s;
}
.user-picker-option:hover{background: var(--hover);}
.user-picker-option img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.user-picker-option .upo-avatar-placeholder{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.user-picker-option .upo-info {display: flex; flex-direction: column;}
.user-picker-option .upo-name { font-size: 13px; font-weight: 600;}
.user-picker-option .upo-email { font-size: 11px; color: var(--muted);}

.user-picker-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-chip{
  display: flex;
  align-items: center;
  gap:6px;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius:20px;
  padding: 3px 10px 3px 4px;
  font-size: 12px
}
.user-chip img{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.user-chip .uc-placeholder {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.user-chip button{
  background: none;
  border: none;
  cursor:pointer;
  color: var(--muted);
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

/* ── Empresa picker (custom dropdown with logo) ── */
.empresa-picker {
  position: relative;
  min-width: 160px;
}
.empresa-picker-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: var(--input-bg, var(--card));
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}
.empresa-picker-btn:hover { border-color: var(--accent); }
.empresa-picker-placeholder { color: var(--muted); }
.empresa-picker-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  z-index: 200;
  overflow: hidden;
}
.empresa-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background .12s;
}
.empresa-picker-item:hover,
.empresa-picker-item.selected { background: var(--accent-light, rgba(9,132,227,.1)); }
.empresa-picker-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.empresa-picker-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ── Registro Compras e Importaciones ── */
.rci-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.rci-header-actions { display: flex; gap: 8px; align-items: center; }

.rci-form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.rci-form-grid {
  display: grid;
  gap: 12px;
}
.rci-grid-4 { grid-template-columns: repeat(4, 1fr); }
.rci-grid-3 { grid-template-columns: repeat(3, 1fr); }

.rci-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rci-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.rci-label i { width: 12px; height: 12px; }
.rci-field input,
.rci-field textarea,
.rci-field .empresa-picker-btn {
  width: 100%;
  box-sizing: border-box;
}
.rci-field textarea { resize: vertical; min-height: 36px; }

/* Tipo toggle */
.rci-tipo-toggle {
  display: flex;
  border: 1px solid #0d6f65;
  border-radius: 8px;
  overflow: hidden;
  height: 36px;
  background: rgba(13,111,101,0.08);
}
.rci-tipo-btn {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #0d6f65;
  cursor: pointer;
  transition: background .15s, color .15s;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rci-tipo-btn.active {
  background: #0d6f65;
  color: #fff !important;
  font-weight: 700;
}
.rci-tipo-btn:not(.active):hover { background: rgba(13,111,101,0.15); }
html.dark .rci-tipo-toggle {
  border-color: #0ea082;
  background: rgba(14,160,130,0.12);
}
html.dark .rci-tipo-btn { color: #0ea082; }
html.dark .rci-tipo-btn.active { background: #0ea082; color: #fff !important; }
html.dark .rci-tipo-btn:not(.active):hover { background: rgba(14,160,130,0.2); }

/* imágenes del toggle tipo */
.rci-tipo-img { width: 22px; height: 22px; object-fit: contain; display: none; }
/* light mode, inactivo → blanco */
.rci-tipo-img--blanco { display: block; }
.rci-tipo-img--negro { display: none; }
/* activo en light mode → negro */
.rci-tipo-btn.active .rci-tipo-img--blanco { display: none; }
.rci-tipo-btn.active .rci-tipo-img--negro { display: block; }
/* dark mode, inactivo → negro */
html.dark .rci-tipo-img--blanco { display: none; }
html.dark .rci-tipo-img--negro { display: block; }
/* activo en dark mode → negro también */
html.dark .rci-tipo-btn.active .rci-tipo-img--negro { display: block; }
html.dark .rci-tipo-btn.active .rci-tipo-img--blanco { display: none; }

/* Campos importación */
.rci-import-section {
  background: rgba(9,132,227,.06);
  border: 1px dashed #059669;
  border-radius: 10px;
  padding: 14px;
  position: relative;
}
.rci-import-fields {
  background: rgba(9,132,227,.06);
  border: 1px dashed #059669;
  border-radius: 10px;
  padding: 14px;
  display: grid;
  gap: 12px;
  position: relative;
}
.rci-import-badge {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.rci-import-badge i { width: 13px; height: 13px; }
.rci-route-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid rgba(5,150,105,.2);
}
.rci-route-row:last-child { border-bottom: none; }
.rci-route-label {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  padding-bottom: 10px;
  white-space: nowrap;
}
.rci-remove-route {
  margin-bottom: 2px;
  padding: 4px 8px;
  font-size: 12px;
  align-self: end;
}

/* Section headers */
.rci-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  gap: 10px;
}
.rci-section-header span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rci-section-header i { width: 16px; height: 16px; }

.btn-soft--sm {
  padding: 5px 12px !important;
  font-size: 12px !important;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.btn-soft--sm i { width: 13px; height: 13px; }

@media (max-width: 1024px) {
  .rci-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .rci-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rci-grid-4, .rci-grid-3 { grid-template-columns: 1fr; }
  .rci-page-header { flex-direction: column; align-items: flex-start; }
}

/* ── RCI selector de tipo ── */
#rciTipoSelector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  text-align: center;
}
.rci-selector-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.rci-selector-subtitle {
  margin: 0 0 40px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.rci-tipo-cards {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.rci-tipo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 60px 80px;
  cursor: pointer;
  transition: border-color .2s, transform .18s, box-shadow .2s;
  flex: 1;
  max-width: 380px;
  min-width: 240px;
}
.rci-tipo-card:hover {
  border-color: #0d6f65;
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,111,101,.25);
}
.rci-tipo-card-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.rci-tipo-card-img--blanco { display: block; }
.rci-tipo-card-img--negro  { display: none; }
html.dark .rci-tipo-card-img--blanco { display: none; }
html.dark .rci-tipo-card-img--negro  { display: block; }
.rci-tipo-card-label {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}
.rci-tipo-card-desc {
  font-size: 15px;
  color: var(--muted);
}

/* stat badge en tablas */
.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(13,111,101,.1);
  color: #0d6f65;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
html.dark .stat-badge {
  background: rgba(14,160,130,.15);
  color: #0ea082;
}

/* ── Fichas grid (clientes / proveedores / empresas) ── */
.fichas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 4px 0;
}
.ficha-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.ficha-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
  border-color: #0d6f65;
}
.ficha-card--inactive { opacity: .55; }

.ficha-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ficha-avatar-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.ficha-avatar-initials {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.ficha-estado { font-size: 11px; }

.ficha-nombre {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.ficha-meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ficha-stats {
  display: flex;
  gap: 12px;
  margin: 10px 0 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.ficha-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.ficha-stat-num {
  font-size: 20px;
  font-weight: 800;
  color: #0d6f65;
  line-height: 1;
}
html.dark .ficha-stat-num { color: #0ea082; }
.ficha-stat-lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 2px;
}

.ficha-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.ficha-btn-edit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(13,111,101,.1);
  color: #0d6f65;
  border: 1px solid rgba(13,111,101,.25);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.ficha-btn-edit:hover { background: rgba(13,111,101,.2); }
.ficha-btn-edit i { width: 14px; height: 14px; }
html.dark .ficha-btn-edit { background: rgba(14,160,130,.12); color: #0ea082; border-color: rgba(14,160,130,.25); }
html.dark .ficha-btn-edit:hover { background: rgba(14,160,130,.22); }

.ficha-btn-toggle {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.ficha-btn-toggle i { width: 15px; height: 15px; }
.ficha-btn-danger { color: #e17055; border-color: rgba(225,112,85,.3); }
.ficha-btn-danger:hover { background: rgba(225,112,85,.1); }
.ficha-btn-success { color: #0d6f65; border-color: rgba(13,111,101,.3); }

/* ── Stock agrupado por modelo ── */
.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 4px;
}
.stock-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
}
.stock-card-img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: var(--bg);
  padding: 8px;
}
.stock-card-img-empty {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: var(--bg);
  color: var(--muted-2);
}
.stock-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stock-card-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.stock-card-sub {
  font-size: 12px;
  color: var(--muted);
}
.stock-card-qty {
  font-size: 13px;
  color: var(--ink-2);
}
.stock-card-qty strong {
  font-size: 18px;
  color: var(--brand);
}
.stock-card-qty strong.stock-card-qty--egresado {
  font-size: 15px;
  color: var(--muted);
}
.stock-card-btn-ordenes {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
.inv-orden-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.inv-orden-num {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.inv-orden-cant {
  font-size: 12px;
  color: var(--muted);
}
.stock-card-empresas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.stock-empresa-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--brand-50);
  color: var(--brand-dark);
  border: 1px solid var(--brand-100);
}
.stock-empresa-chip--vacio {
  background: transparent;
  color: var(--muted-2);
  border-style: dashed;
}
.ficha-btn-success:hover { background: rgba(13,111,101,.1); }