/* ==========================================================================
   SGM Web — hoja de estilos base
   Tokens tomados del Sistema de Diseño Bodypal (marca #1F3F8C / acento #2A78D0).
   Sin framework: CSS plano con variables. Escalable y sin paso de build.
   ========================================================================== */

:root {
  /* Marca */
  --brand-50:#EEF3FB; --brand-100:#D5E1F5; --brand-200:#ABC2EA; --brand-300:#7B9BD8;
  --brand-400:#4D74C2; --brand-500:#2A57AE; --brand-600:#1F3F8C; --brand-700:#1A347A;
  --brand-800:#142862; --brand-900:#0F1F4A; --brand-950:#0A1430;
  /* Acento */
  --accent-400:#3F8FDD; --accent-500:#2A78D0; --accent-600:#1F60B5;
  /* Neutros (ink) */
  --ink-0:#FFFFFF; --ink-50:#F7F8FA; --ink-100:#EEF0F4; --ink-200:#DDE1E8;
  --ink-300:#C2C8D2; --ink-400:#98A0AD; --ink-500:#6B7280; --ink-600:#4B5564;
  --ink-700:#353C49; --ink-800:#232934; --ink-900:#161B23; --ink-950:#0B0E14;
  /* Estados */
  --success-50:#ECFDF3; --success-500:#12B76A; --success-600:#039855; --success-700:#027A48;
  --warning-50:#FFF8EB; --warning-500:#F79009; --warning-600:#DC6803; --warning-700:#B54708;
  --danger-50:#FEF3F2;  --danger-500:#F04438;  --danger-600:#D92D20;  --danger-700:#B42318;

  /* Superficies semánticas (modo claro) */
  --surface:var(--ink-0); --surface-sunk:var(--ink-50); --surface-raised:var(--ink-0);
  --border:var(--ink-200); --border-strong:var(--ink-300);
  --text:var(--ink-900); --text-muted:var(--ink-600); --text-soft:var(--ink-500);
  --text-on-brand:#FFFFFF;
  --sidebar-bg:var(--brand-900); --sidebar-text:#C7D3EC; --sidebar-active:var(--brand-600);

  --shadow-sm:0 1px 2px rgba(15,31,74,.06),0 1px 3px rgba(15,31,74,.08);
  --shadow-md:0 2px 4px rgba(15,31,74,.06),0 4px 12px rgba(15,31,74,.08);
  --shadow-lg:0 4px 8px rgba(15,31,74,.06),0 12px 24px rgba(15,31,74,.10);

  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:999px;
  --font-sans:'Geist','Helvetica Neue',system-ui,-apple-system,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

[data-theme="dark"] {
  --surface:var(--ink-900); --surface-sunk:var(--ink-950); --surface-raised:var(--ink-800);
  --border:#2A313D; --border-strong:#3A4250;
  --text:var(--ink-50); --text-muted:var(--ink-300); --text-soft:var(--ink-400);
  --sidebar-bg:var(--ink-950); --sidebar-text:#9AA6BD; --sidebar-active:var(--brand-600);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; }
body {
  font-family:var(--font-sans);
  background:var(--surface-sunk);
  color:var(--text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent-600); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- Layout shell ---------- */
.shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.shell.collapsed { grid-template-columns:64px 1fr; }

/* ---------- Sidebar ---------- */
.sidebar {
  background:var(--sidebar-bg); color:var(--sidebar-text);
  display:flex; flex-direction:column; padding:14px 10px; gap:4px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-logo {
  display:flex; align-items:center; gap:10px; padding:6px 8px 16px;
  color:#fff; font-weight:600; font-size:15px; letter-spacing:.2px;
}
.sidebar-logo .mark {
  width:30px; height:30px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-500),var(--accent-500));
  display:grid; place-items:center; color:#fff;
}
.nav-item {
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--radius-md);
  color:var(--sidebar-text); font-weight:500; font-size:13.5px;
  cursor:pointer; white-space:nowrap; transition:background .12s,color .12s;
}
.nav-item .ico { width:18px; text-align:center; flex:0 0 auto; font-size:15px; }
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.nav-item.active { background:var(--sidebar-active); color:#fff; }
.nav-item.soon { opacity:.55; }
.nav-item.soon .tag {
  margin-left:auto; font-size:9.5px; text-transform:uppercase; letter-spacing:.5px;
  background:rgba(255,255,255,.12); padding:2px 6px; border-radius:var(--radius-full);
}
.sidebar.collapsed-rail .nav-item span.label,
.sidebar.collapsed-rail .sidebar-logo span,
.sidebar.collapsed-rail .nav-item .tag { display:none; }
.sidebar-spacer { flex:1; }

/* ---------- Topbar ---------- */
.main-col { display:flex; flex-direction:column; min-width:0; }
.topbar {
  height:58px; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 20px; position:sticky; top:0; z-index:5;
}
.topbar .burger {
  background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer;
  width:34px; height:34px; border-radius:var(--radius-md);
}
.topbar .burger:hover { background:var(--surface-sunk); }
.topbar .title { font-weight:600; font-size:15px; }
.topbar .spacer { flex:1; }
.topbar .user {
  display:flex; align-items:center; gap:9px; padding:5px 10px;
  border:1px solid var(--border); border-radius:var(--radius-full); cursor:pointer;
}
.topbar .user .avatar {
  width:26px; height:26px; border-radius:var(--radius-full);
  background:var(--brand-600); color:#fff; display:grid; place-items:center;
  font-size:12px; font-weight:600;
}

/* ---------- Contenido ---------- */
.content { padding:24px; max-width:1280px; width:100%; }

/* Título del topbar: "SGM · Sección" */
.topbar .title .brand { font-weight:700; }
.topbar .title .sep { color:var(--text-soft); margin:0 7px; }

/* page-head compacto: el título/subtítulo ya los muestra el topbar, así que los
   ocultamos y recuperamos ese espacio. Solo dejamos la fila si hay botones. */
.page-head h1, .page-head p { display:none; }
/* Sin contenido visible (título oculto) y sin botones → no reserva espacio.
   Con botones, deja una fila compacta. */
.page-head { margin:0; }
.page-head:has(.btn) { margin:0 0 14px; }
.page-head h1 { font-size:20px; margin:0 0 4px; font-weight:600; }
.page-head p { margin:0; color:var(--text-muted); font-size:13px; }

/* ---------- Cards / KPIs ---------- */
.grid { display:grid; gap:16px; }
.grid.kpis { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.card {
  background:var(--surface-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm);
}
.kpi .kpi-label { color:var(--text-soft); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.4px; }
.kpi .kpi-value { font-size:30px; font-weight:700; margin-top:6px; font-family:var(--font-mono); }
.kpi .kpi-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ---------- Badges ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:3px 9px; border-radius:var(--radius-full); border:1px solid transparent;
}
.badge.ok    { background:var(--success-50); color:var(--success-700); border-color:#A6F4C5; }
.badge.warn  { background:var(--warning-50); color:var(--warning-700); border-color:#FEDF89; }
.badge.err   { background:var(--danger-50);  color:var(--danger-700);  border-color:#FECDCA; }
.badge.muted { background:var(--surface-sunk); color:var(--text-muted); border-color:var(--border); }

/* ---------- Botones ---------- */
.btn {
  display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13.5px;
  font-weight:600; padding:9px 15px; border-radius:var(--radius-md); border:1px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer; transition:filter .12s,background .12s;
}
.btn:hover { background:var(--surface-sunk); text-decoration:none; }
.btn.primary { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.btn.primary:hover { filter:brightness(1.08); background:var(--brand-600); }
.btn.danger { background:var(--danger-600); border-color:var(--danger-600); color:#fff; }
.btn.danger:hover { filter:brightness(1.08); background:var(--danger-600); }
.btn.icon { padding:5px 9px; font-size:13px; }

/* ---------- Modales ---------- */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:50;
  display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; overflow-y:auto;
}
.modal {
  width:100%; max-width:460px; background:var(--surface-raised); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:22px;
}
.modal.wide { max-width:560px; }
#histModal .modal { max-width:680px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head h3 { margin:0; font-size:16px; }
.modal-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-muted); line-height:1; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.kv { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:13px; }
.kv dt { color:var(--text-muted); font-weight:600; }
.kv dd { margin:0; }

/* ---------- Tablas ordenables ---------- */
th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover { color:var(--brand-600); }
th.sortable .si { font-size:10px; opacity:.5; margin-left:3px; }

/* ---------- Tablas de datos ---------- */
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data thead th {
  text-align:right; font-weight:600; color:var(--text-soft); font-size:11px;
  text-transform:uppercase; letter-spacing:.4px; padding:6px 10px;
  border-bottom:1px solid var(--border-strong);
}
table.data thead th:first-child { text-align:left; }
table.data tbody td { padding:7px 10px; text-align:right; border-bottom:1px solid var(--border); }
table.data tbody td.zona { text-align:left; font-weight:600; }
table.data tbody td.total { font-weight:700; color:var(--brand-600); }
table.data tbody tr:hover { background:var(--surface-sunk); }

.empty-state {
  text-align:center; padding:60px 20px; color:var(--text-muted);
}
.empty-state .big { font-size:42px; margin-bottom:10px; }
.mono { font-family:var(--font-mono); }

[x-cloak] { display:none !important; }

/* ---------- Formularios ---------- */
.form-grid { display:flex; flex-direction:column; gap:14px; }
label { display:flex; flex-direction:column; gap:5px; font-weight:600; font-size:13px; color:var(--text); }
label.check { flex-direction:row; align-items:center; gap:8px; font-weight:500; }
input[type=text], input[type=password], input[type=email], select {
  font-family:inherit; font-size:14px; padding:9px 11px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text); width:100%;
}
input:focus, select:focus { outline:none; border-color:var(--accent-500); box-shadow:0 0 0 3px var(--brand-100); }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus { box-shadow:0 0 0 3px rgba(42,120,208,.25); }
small { font-weight:400; }

/* ---------- Alertas ---------- */
.alert { padding:10px 13px; border-radius:var(--radius-md); font-size:13px; font-weight:500; border:1px solid transparent; }
.alert.ok  { background:var(--success-50); color:var(--success-700); border-color:#A6F4C5; }
.alert.err { background:var(--danger-50);  color:var(--danger-700);  border-color:#FECDCA; }

/* ---------- Menú de usuario ---------- */
.user-menu {
  position:absolute; right:0; top:46px; min-width:190px; background:var(--surface-raised);
  border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:6px; z-index:20; display:flex; flex-direction:column;
}
.user-menu a { padding:9px 11px; border-radius:var(--radius-sm); color:var(--text); font-size:13.5px; font-weight:500; }
.user-menu a:hover { background:var(--surface-sunk); text-decoration:none; }
.user-menu a.danger { color:var(--danger-600); }

/* ---------- Login ---------- */
.auth-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--surface-sunk); padding:20px; }
.auth-card { width:100%; max-width:380px; background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:28px; }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth-brand .mark { width:42px; height:42px; border-radius:10px; flex:0 0 auto; background:linear-gradient(135deg,var(--brand-600),var(--accent-500)); display:grid; place-items:center; color:#fff; }
.auth-title { font-weight:700; font-size:17px; }
.auth-sub { font-size:12px; color:var(--text-muted); }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-foot { font-size:12px; color:var(--text-soft); }

table.data.wide thead th, table.data.wide tbody td { padding:9px 12px; }

/* ---------- Pestañas ---------- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); }
.tab {
  padding:9px 16px; font-size:13.5px; font-weight:600; color:var(--text-muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab:hover { color:var(--text); text-decoration:none; }
.tab.active { color:var(--brand-600); border-bottom-color:var(--brand-600); }
.tab-count {
  display:inline-block; min-width:20px; text-align:center; font-size:11px;
  background:var(--surface-sunk); border:1px solid var(--border); border-radius:var(--radius-full);
  padding:1px 6px; margin-left:4px; font-family:var(--font-mono);
}
.tab.active .tab-count { background:var(--brand-100); border-color:var(--brand-200); color:var(--brand-700); }

/* ---------- Grillas de formulario ---------- */
.cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cols-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:680px) { .cols-2, .cols-3 { grid-template-columns:1fr; } }
textarea {
  font-family:inherit; font-size:14px; padding:9px 11px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text); width:100%; resize:vertical;
}
textarea:focus { outline:none; border-color:var(--accent-500); box-shadow:0 0 0 3px var(--brand-100); }
input[type=search] {
  font-family:inherit; font-size:14px; padding:9px 13px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text); width:100%;
}
input:disabled, input[readonly] { background:var(--surface-sunk); color:var(--text-muted); }
input[type=datetime-local] {
  font-family:inherit; font-size:14px; padding:8px 11px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text); width:100%;
}

/* ---------- Stock ---------- */
.stock-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:900px) { .stock-grid { grid-template-columns:1fr; } }
/* Conteo angosto + faltantes + sobrantes (3 columnas) */
.stock-grid3 { display:grid; grid-template-columns:minmax(160px,205px) 1fr 1fr; gap:16px; align-items:start; }
@media (max-width:1000px) { .stock-grid3 { grid-template-columns:1fr; } }
.disc-list { display:flex; flex-direction:column; gap:4px; max-height:260px; overflow-y:auto; }
.disc-item {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 11px; border-radius:var(--radius-sm); border:1px solid transparent; font-size:13px;
}
.disc-item.err { background:var(--danger-50); border-color:#FECDCA; }
.disc-item.ok  { background:var(--success-50); border-color:#A6F4C5; }
.disc-meta { font-size:11px; color:var(--text-muted); }

td.empty-cell { text-align:center !important; color:var(--text-muted); padding:30px !important; }

/* ---------- Gráficos ---------- */
.charts-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
@media (max-width:820px) { .charts-grid { grid-template-columns:1fr; } }

/* ---------- Viajes (tabla protagonista + panel inferior para carga) ---------- */
/* La página ocupa el alto disponible; la tabla scrollea internamente y el
   formulario aparece en un panel que se desliza desde abajo (se cierra al guardar). */
.viajes-layout {
  display:flex; flex-direction:column;
  height:calc(100vh - 58px - 48px);   /* topbar (58) + padding de .content (24+24) */
  min-height:460px;
}
.btn.sm { padding:5px 11px; font-size:12.5px; }

/* Barra superior compacta: pestañas + conteos + nuevo + búsqueda en una línea */
.viajes-bar { display:flex; align-items:center; gap:12px; flex:0 0 auto; flex-wrap:wrap; margin-bottom:10px; }
.viajes-bar .vf-spacer { flex:1; }

/* Pestañas tipo segmento (bien distinguibles) */
.vtabs { display:inline-flex; background:var(--surface-sunk); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:3px; gap:3px; }
.vtab { padding:6px 15px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:var(--text-muted); }
.vtab:hover { color:var(--text); text-decoration:none; }
.vtab.active { background:var(--brand-600); color:#fff; box-shadow:var(--shadow-sm); }
.vtab .tab-count { margin-left:5px; }
.vtab.active .tab-count { background:rgba(255,255,255,.22); border-color:transparent; color:#fff; }

/* Conteo BL / BX */
.vcounts { display:inline-flex; gap:8px; }
.chip { font-size:12px; padding:3px 10px; border-radius:var(--radius-full); border:1px solid var(--border);
  color:var(--text-muted); font-weight:500; }
.chip b { color:var(--text); font-family:var(--font-mono); margin-left:3px; }
.chip.bl { background:var(--brand-50); border-color:var(--brand-200); }
.chip.bx { background:var(--warning-50); border-color:#FEDF89; }

/* ---------- Controles segmentados (botones en lugar de menús) ---------- */
.seg-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-soft); margin-bottom:5px; }
.seg { display:inline-flex; background:var(--surface-sunk); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:3px; gap:3px; flex-wrap:wrap; }
.seg-btn {
  padding:7px 16px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  color:var(--text-muted); background:transparent; border:none; cursor:pointer; line-height:1.2;
}
.seg-btn:hover { color:var(--text); }
.seg-btn.active { background:var(--brand-600); color:#fff; box-shadow:var(--shadow-sm); }
.seg-btn.active.prio-Alta  { background:var(--danger-600); }
.seg-btn.active.prio-Media { background:var(--warning-600, #DC9A06); }
.seg-btn.active.prio-Baja  { background:var(--text-muted); }
.seg-btn.active.clase-ACCION { background:var(--danger-600); }

/* ---------- Mini-dashboard inline (Reportes) ---------- */
.kpi-inline { display:inline-flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.kpi-inline .ki {
  display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.05;
  padding:9px 16px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface-raised); box-shadow:var(--shadow-sm);
}
.kpi-inline .ki b { font-size:26px; font-family:var(--font-mono); }
.kpi-inline .ki span { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-soft); font-weight:600; margin-top:2px; }

/* ---------- Árbol de tipos de reporte (con buscador) ---------- */
.tree { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-raised);
  max-height:300px; overflow-y:auto; }
.tree-cat { width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13.5px; font-weight:600;
  color:var(--text); border-bottom:1px solid var(--border); }
.tree-cat:hover { background:var(--surface-sunk); }
.tree-cat .caret { color:var(--text-soft); font-size:11px; transition:transform .12s; }
.tree-cat.open .caret { transform:rotate(90deg); }
.tree-tipo { width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
  display:block; padding:7px 12px 7px 34px; font-size:13px; color:var(--text-muted);
  border-bottom:1px solid var(--border); }
.tree-tipo:hover { background:var(--brand-50); color:var(--text); }
.tree-tipo.sel { background:var(--brand-600); color:#fff; font-weight:600; }
.tree-empty { padding:14px 12px; color:var(--text-muted); font-size:13px; }

/* Popover (Más filtros) */
.popover {
  position:absolute; right:0; top:calc(100% + 6px); z-index:45; width:260px;
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:14px;
}

/* Bloque colapsable "Más detalles" */
.collapse-toggle { background:transparent; border:1px dashed var(--border-strong, var(--border));
  border-radius:var(--radius-md); padding:10px 14px; width:100%; text-align:left; cursor:pointer;
  font-weight:600; color:var(--text-muted); font-size:13.5px; }
.collapse-toggle:hover { color:var(--text); background:var(--surface-sunk); }

/* Área de tabla: protagonista, scrollea en ambos ejes con encabezado fijo */
#tabla-viajes { flex:1 1 auto; min-height:0; overflow:auto; }
.viajes-tabla { white-space:nowrap; }
/* Todo a la izquierda: encabezado y datos quedan alineados en la misma columna */
.viajes-tabla thead th, .viajes-tabla tbody td { text-align:left !important; }
.viajes-tabla thead th {
  position:sticky; top:0; z-index:1; background:var(--surface-raised);
  cursor:pointer; user-select:none;
}
.viajes-tabla thead th:hover { color:var(--text); }
.viajes-tabla thead th .si { color:var(--brand-600); font-size:10px; font-weight:700; }
.viajes-tabla tr.row-sel { cursor:context-menu; }
.viajes-tabla tr.row-sel:hover { background:var(--surface-sunk); }

/* Tirador para redimensionar columnas (punto 5) */
.col-resizer { position:absolute; top:0; right:0; width:7px; height:100%; cursor:col-resize; }
.col-resizer:hover { background:var(--brand-300); }

/* Menú de configuración de columnas */
.colcfg { position:relative; }
.col-menu {
  position:absolute; right:0; top:38px; z-index:45; width:280px; max-height:60vh; overflow-y:auto;
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:8px;
}
.col-menu .cm-tip { font-size:11px; color:var(--text-muted); margin:2px 4px 8px; }
.col-menu .cm-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 4px; border-radius:var(--radius-sm); }
.col-menu .cm-row:hover { background:var(--surface-sunk); }
.col-menu .cm-row .check { font-size:13px; font-weight:500; }
.col-menu .cm-move button {
  background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; color:var(--text-muted); font-size:10px; padding:2px 6px; line-height:1;
}
.col-menu .cm-move button:disabled { opacity:.35; cursor:default; }
.col-menu hr { border:none; border-top:1px solid var(--border); margin:8px 4px; }

/* Panel inferior deslizante — destacado para que se note que está ahí */
.viajes-panel {
  position:fixed; bottom:0; left:230px; right:0; z-index:40;
  background:var(--surface-raised); border-top:3px solid var(--brand-600);
  box-shadow:0 -14px 48px rgba(15,31,74,.32);
  padding:16px 26px 20px; max-height:74vh; overflow-y:auto;
  transform:translateY(110%); transition:transform .22s ease;
}
.viajes-panel.open { transform:translateY(0); }
.shell.collapsed .viajes-panel { left:64px; }
@media (max-width:900px) { .viajes-panel { left:0; } }

.viajes-panel .vp-head {
  display:flex; align-items:center; gap:10px; margin:-16px -26px 14px; padding:12px 26px;
  background:var(--brand-50); border-bottom:1px solid var(--brand-100);
}
.viajes-panel .vp-head h2 { font-size:16px; margin:0; font-weight:700; color:var(--brand-700); }
.viajes-panel .vp-head .vf-spacer { flex:1; }
.viajes-panel .vf-amsg { font-size:12px; color:var(--text-muted); }
.viajes-panel input { padding:6px 9px; font-size:13px; }

/* Mensajes de validación, en una franja (no rompen la grilla de campos) */
.vf-msgs { display:flex; flex-wrap:wrap; gap:5px 18px; margin-bottom:9px; }
.vf-msgs:empty { display:none; }

/* Grilla de campos con anchos a medida (Viaje chico; Origen/Destino/Despachante grandes) */
.vf-grid { display:flex; flex-wrap:wrap; gap:9px 12px; align-items:flex-end; }
.vf-grid label { gap:3px; font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; }
.f-precinto { width:120px; } .f-dua { width:92px; } .f-mov { width:58px; } .f-viaje { width:80px; }
.f-mat { width:150px; } .f-linga { width:132px; } .f-prec { width:140px; }
.f-lugar { flex:1 1 210px; min-width:160px; } .f-desp { flex:1 1 250px; min-width:190px; } .f-notas { flex:1 1 200px; min-width:150px; }

/* Bordes de validación en campos (precinto/linga/despachante).
   Misma lógica para precinto y linga: rojo = no está en stock / no existe;
   ámbar = está en stock pero la zona no coincide con el origen; verde = OK. */
input.inp-error { border-color:var(--danger-600) !important; background:var(--danger-50) !important; color:var(--danger-700) !important; font-weight:600; }
input.inp-warn  { border-color:var(--warning-600, #DC9A06) !important; background:var(--warning-50) !important; color:#B54708 !important; font-weight:600; }
input.inp-ok    { border-color:var(--success-600, #12B76A) !important; background:var(--success-50) !important; color:var(--success-700) !important; }
[data-theme="dark"] input.inp-error { background:rgba(217,45,32,.20) !important; color:#FFB4AB !important; }
[data-theme="dark"] input.inp-warn  { background:rgba(220,154,6,.20) !important; color:#FEDF89 !important; }
[data-theme="dark"] input.inp-ok    { background:rgba(18,183,106,.18) !important; color:#A6F4C5 !important; }
.vmsg { font-weight:500; }
.vmsg.error { color:var(--danger-700); }
.vmsg.warn  { color:#B54708; }
.vmsg.ok    { color:var(--success-700); }

/* Menú contextual (clic derecho sobre una fila) */
.context-menu {
  position:fixed; z-index:50; min-width:210px; background:var(--surface-raised);
  border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:6px; display:flex; flex-direction:column;
}
.context-menu button, .context-menu a {
  text-align:left; background:none; border:none; cursor:pointer; font:inherit;
  padding:8px 11px; border-radius:var(--radius-sm); color:var(--text); font-size:13.5px;
  font-weight:500; text-decoration:none;
}
.context-menu button:hover, .context-menu a:hover { background:var(--surface-sunk); }
.context-menu button.danger { color:var(--danger-600); }
.context-menu hr { border:none; border-top:1px solid var(--border); margin:5px 4px; }