/* ============================================================
   MDJ Ops — Estilos principales
   ============================================================ */

:root {
  --bg-dark:    #0f0f1a;
  /* Alias del fondo de la página: media docena de lugares escriben var(--bg)
     y sin esta línea resolvían a NADA, o sea transparente — por eso la barra
     pegajosa del detalle de recepción dejaba pasar las filas por debajo. */
  --bg:         #0f0f1a;
  --bg-card:    #1a1a2e;
  --bg-sidebar: #12122a;
  --bg-input:   #252545;
  --bg2:        #1e1e35;
  --accent:     #6c63ff;
  --accent2:    #4cc9f0;
  /* El acento TEÑIDO sobre el fondo, para los chips que llevan texto del
     acento: un fondo y un texto del mismo color no se leen. Va translúcido y
     no como un color fijo para que funcione igual sobre una tarjeta o sobre
     el fondo de la página, que son dos grises distintos. */
  --accent-tinte: rgba(108,99,255,.16);
  --text:       #e0e0f0;
  --text-muted: #8888aa;
  --border:     #2e2e50;
  --success:    #2ecc71;
  --warning:    #f39c12;
  --danger:     #e74c3c;
  --info:       #3498db;
  --radius:     8px;
  --shadow:     0 4px 20px rgba(0,0,0,.4);
  /* Los enlaces no tenían estilo: quedaban con el azul por defecto del
     navegador (#0000EE) sobre fondo oscuro, ilegible. Más claro que --accent
     porque casi siempre son textos de 11-12 px. */
  --link:       #9d96ff;
}

/* ── Enlaces ─────────────────────────────────────────────── */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { color: #c3beff; }
a:visited { color: var(--link); }
/* Los que son un envoltorio de algo (una foto, una tarjeta) no se subrayan. */
a:has(> img), a.sin-deco { text-decoration: none; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 100;
  transition: width .22s ease, min-width .22s ease;
  overflow: hidden;
}
.sidebar.collapsed {
  width: 56px !important;
  min-width: 56px !important;
}

/* Toggle button */
.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 17px;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-toggle:hover { color: var(--text); background: rgba(255,255,255,.07); }

.sidebar-brand {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Campana de avisos en la cabecera ────────────────────── */
.brand-notif {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
}
.brand-notif:hover { color: var(--text); background: rgba(255,255,255,.07); }
.brand-notif .nav-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  margin-left: 0;
  pointer-events: none;
}
.sidebar-brand-text { flex: 1; min-width: 0; }
.brand-logo { flex-shrink: 0; display: block; }
/* Colapsado la cabecera ya apila el toggle y la campana; una tercera fila la
   estiraria de mas, y sin el texto al lado el logo no esta identificando nada
   que no identifique ya el favicon de la pestana. */
.sidebar.collapsed .brand-logo { display: none; }
.sidebar-brand h1 {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: .3px;
  white-space: nowrap;
}
.sidebar-brand p {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Collapsed state ─────────────────────────────────────── */
/* Colapsado la cabecera apila: el ☟ arriba y la campana abajo. De costado
   no entran los dos en un riel de 56px sin quedar pegados. */
.sidebar.collapsed .sidebar-brand { padding: 12px 8px; justify-content: center; flex-direction: column; gap: 6px; }
.sidebar.collapsed .sidebar-brand-text { display: none; }
.sidebar.collapsed .sidebar-section { display: none; }
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .nav-badge { display: none !important; }
/* Excepto el de avisos: colapsado el número no entra, pero esconderlo del todo
   era justamente el problema —nadie se enteraba de que había algo sin leer—,
   así que queda como punto. */
.sidebar.collapsed .brand-notif .nav-badge {
  display: block !important;
  font-size: 0;
  width: 8px; height: 8px; min-width: 0;
  padding: 0;
  border-radius: 50%;
  top: 0; right: 0;
}
.sidebar.collapsed .brand-notif .nav-badge.oculto { display: none !important; }
.sidebar.collapsed .user-info { display: none; }
.sidebar.collapsed .sidebar-footer { padding: 8px 4px; }
.sidebar.collapsed #btn-logout { padding: 8px; justify-content: center; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px 6px; position: relative; }

/* Tooltip on hover when collapsed */
.sidebar.collapsed .nav-item[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  white-space: nowrap;
  z-index: 300;
  box-shadow: var(--shadow);
  pointer-events: none;
}

.sidebar-section {
  padding: 10px 10px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  transition: background .15s;
}
.sidebar-section:hover {
  background: var(--bg2);
  color: var(--text-muted);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 1px 6px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  transition: all .15s;
  user-select: none;
}
.nav-item:hover { background: rgba(108,99,255,.15); color: var(--text); }
.nav-item.active { background: rgba(108,99,255,.25); color: var(--accent2); font-weight: 600; }
.nav-item .icon { font-size: 16px; width: 20px; text-align: center; }
/* El badge de avisos se oculta por CLASE y no por `style` inline: la regla que
   lo convierte en punto con el menú colapsado usa !important, y a eso un
   display inline no le gana. */
.nav-badge.oculto { display: none !important; }

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* ── Sidebar scrollable nav zone ─────────────────────────── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 4px;
  /* scrollbar muy fino */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ── Sidebar footer (fixed at bottom) ───────────────────── */
.sidebar-footer {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--border);
}

/* ── User badge inside sidebar footer ────────────────────── */
.user-badge-sidebar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  margin-bottom: 8px;
  cursor: default;
  overflow: hidden;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
}

.user-badge-info {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.user-badge-info > div:first-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-badge-info > div:last-child {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Collapsed state: sólo el avatar centrado, sin texto */
.sidebar.collapsed .user-badge-sidebar {
  justify-content: center;
  padding: 7px 6px;
  background: none;
  margin-bottom: 8px;
}

/* ── Legacy user-info (kept for compat but hidden via collapsed rule) ── */
.user-info {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-info strong { color: var(--text); }

/* ── Main area ───────────────────────────────────────────── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  height: 50px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
}
.topbar-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}
.topbar-actions { display: flex; gap: 8px; }

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 2px 7px; font-size: 11px; }
.btn-primary  { background: var(--accent);  color: #fff; }
.btn-primary:hover  { background: #5a52d5; }
.btn-secondary { background: var(--bg-input); color: var(--text); }
.btn-secondary:hover { background: #303055; }
.btn-success  { background: var(--success); color: #fff; }
.btn-success:hover  { background: #27ae60; }
.btn-danger   { background: var(--danger);  color: #fff; }
.btn-danger:hover   { background: #c0392b; }
.btn-warning  { background: var(--warning); color: #fff; }
.btn-info     { background: var(--info);    color: #fff; }
.btn-info:hover { background: #2980b9; }
.btn-ghost    { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-header h3 { font-size: 14px; font-weight: 600; flex: 1; }
.card-body { padding: 16px; }

/* ── Stats row ───────────────────────────────────────────── */
.stats-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 100px;
  flex: 1;
}
.stat-card .val { font-size: 26px; font-weight: 700; line-height: 1; }
.stat-card .lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.stat-vencido .val { color: var(--danger); }
.stat-hoy     .val { color: #f39c12; }
.stat-manana  .val { color: #f1c40f; }
.stat-ok      .val { color: var(--success); }

/* Sub-totales por courier dentro de cada tarjeta */
.stat-sub {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 6px;
}
.stat-sub:empty { display: none; }
/* ── El paginador, como barra de pie de la grilla (24/10) ──
 *
 * Tres cosas que lo hacían chocar con la tabla, reportadas en Posventa,
 * Retornos y Retiros en sucursal:
 *
 *  · `flex-shrink: 0`. El paginador vive dentro de una `.card` que es flex en
 *    columna con `overflow:hidden`, al lado de una tabla que pide todo el
 *    alto. Sin esto, el flex le come el alto al paginador y sus botones —que
 *    miden 32 px— se dibujan fuera de su caja, encima de la última fila.
 *
 *  · El borde de arriba y el fondo propio. El área de la tabla scrollea, así
 *    que la última fila visible queda SIEMPRE cortada por la mitad. Sin una
 *    línea que separe, esa fila cortada y los botones se leen como si
 *    estuvieran encimados aunque la geometría esté bien.
 *
 *  · El padding lateral que reserva el lugar del selector de "por página",
 *    que va `position:absolute` a la derecha. Trece pantallas lo pisaban con
 *    un `style` inline y ahí el selector se monta sobre los botones en cuanto
 *    hay varias páginas o la ventana es angosta. Los estilos inline se
 *    sacaron: el paginador se ve igual en todas las pantallas o no se ve
 *    igual en ninguna.
 */
.pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px; position: relative; min-height: 34px;
  padding: 8px 120px; flex-shrink: 0;
  background: var(--bg-card);
  /* El mismo borde y las mismas esquinas que la tarjeta que la contiene: la
     barra es el PIE de la grilla, no una caja aparte apoyada encima. Con las
     esquinas rectas contra el redondeo de la tarjeta se veía como un parche
     pegado abajo. */
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}
/* Al pie de una pantalla y no de una tarjeta —Transferencias, Diferencias,
   Pedidos a reclamar—: la línea y el fondo siguen haciendo falta para
   separarse de la fila cortada, pero no hay tarjeta cuyo redondeo acompañar.
   La clase la pone `_renderPagination` cuando no encuentra una `.card`. */
.pagination.pag-suelta { border-radius: 0; }
.pag-spacer { display: none; }
.pag-size-wrap { display: inline-flex; align-items: center; gap: 6px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.pag-size {
  background: var(--bg-input); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.pag-size-lbl { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Tarjetas de resumen clickeables (aplican filtros al hacer clic) */
.stat-clickable { cursor: pointer; }
.stat-clickable:hover { text-decoration: underline; opacity: .85; }
.stat-sub-item.stat-clickable:hover { text-decoration: none; opacity: 1; background: var(--bg-input); border-radius: 4px; }

.stat-sub-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}
.stat-sub-item .sub-lbl {
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-sub-item .sub-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* ── Filtros (legacy) ────────────────────────────────────── */
.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.filters input, .filters select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}
.filters input:focus, .filters select:focus { border-color: var(--accent); }
.filters input { min-width: 200px; }
.search-input { flex: 1; min-width: 180px; max-width: 320px; }

/* ── Filter Panel (collapsible) ──────────────────────────── */
.filter-panel { margin-bottom: 8px; }
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 6px;
}
.filter-bar .search-input {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}
.filter-bar .search-input:focus { border-color: var(--accent); }
.btn-filtros {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn-filtros:hover { background: var(--bg-dark); }
.btn-filtros.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.filter-badge {
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
  display: none;
}
.btn-filtros.active .filter-badge { background: rgba(255,255,255,0.35); }
.filter-panel-body {
  display: none;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 0 6px 6px 6px;
  padding: 10px 14px 12px;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.filter-panel-body.open { display: flex; }
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 110px;
}
.filter-group > label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.filter-group input[type="date"],
.filter-group select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}
.filter-group input[type="date"]:focus,
.filter-group select:focus { border-color: var(--accent); }
.filter-group-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 20px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text);
}
.filter-group-check input { cursor: pointer; }
.filter-panel-actions {
  display: flex;
  align-items: flex-end;
  margin-left: auto;
  padding-top: 18px;
}

/* ── Tabla ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  padding: 9px 10px;
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--border);
  background: var(--bg-dark);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
}
tbody tr {
  border-bottom: 1px solid rgba(46,46,80,.5);
  transition: background .1s;
  cursor: pointer;
}
tbody tr:hover { background: rgba(108,99,255,.08); }
tbody td { padding: 8px 10px; vertical-align: middle; }

/* Urgencia row colors */
tr.row-vencido td:first-child { border-left: 3px solid var(--danger); }
tr.row-hoy     td:first-child { border-left: 3px solid #f39c12; }
tr.row-manana  td:first-child { border-left: 3px solid #f1c40f; }
tr.row-ok      td:first-child { border-left: 3px solid var(--success); }

/* Fila bloqueada por problema activo */
tr.row-bloqueado { opacity: .88; }
tr.row-bloqueado td:first-child { border-left: 3px solid #e67e22; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-SHIPNOW    { background: rgba(52,152,219,.2); color: #4cc9f0; }
.badge-VTEX_TURBO { background: rgba(155,89,182,.2); color: #c39bd3; }
.badge-FLEX       { background: rgba(243,156,18,.2); color: #f39c12; }
.badge-COLECTA    { background: rgba(46,204,113,.2); color: #2ecc71; }
.badge-FULL       { background: rgba(0,188,212,.2);  color: #00bcd4; }
.badge-VTEX       { background: rgba(108,99,255,.2); color: #6c63ff; }
.badge-ML1        { background: rgba(252,185,0,.2);  color: #fbc500; }
.badge-GIFT_CARD  { background: rgba(255,193,7,.2);  color: #ffc107; }
.badge-RETIRO     { background: rgba(26,188,156,.2); color: #1abc9c; }
.badge-HOP        { background: rgba(255,87,34,.2);  color: #ff5722; }
.badge-ML2        { background: rgba(255,105,0,.2);  color: #ff6900; }
.badge-MANUAL     { background: rgba(52,152,219,.2); color: #3498db; }
.badge-TIENDA_BNA { background: rgba(107,114,128,.2); color: #9ca3af; }
/* Antigüedad del precio: discreto cuando el dato es fresco, visible cuando no.
   Presea exporta cada tanto y MDJ Ops baja cada tanto, así que una etiqueta
   puede salir con un precio de hace horas sin que nada lo delate. */
.etiq-fresh { font-size: 11px; color: var(--text-muted); padding: 4px 2px; }
.etiq-fresh.vieja { color: var(--warning); font-weight: 600; }
.etiq-fresh:empty { display: none; }
.etiq-fresh-inline { padding: 0 0 0 8px; }

.badge-secondary { background: rgba(136,136,170,.18); color: var(--text-muted); }
.badge-primary   { background: rgba(108,99,255,.2);  color: var(--accent); }
.badge-success   { background: rgba(46,204,113,.2);  color: var(--success); }
.badge-danger    { background: rgba(231,76,60,.2);   color: var(--danger); }
.badge-warning   { background: rgba(243,156,18,.2);  color: var(--warning); }
/* Variante sólida: el badge normal es ámbar sobre ámbar teñido, así que pisarle
   el fondo a ámbar PLENO desde un style inline —como hacían tres badges de
   "separa el local"— dejaba texto ámbar sobre fondo ámbar: invisible. Esta
   clase cambia las dos cosas juntas, que es la única forma de que no pase. */
.badge.solido    { background: var(--warning); color: #15120a; font-weight: 800; }
.badge-bloqueado { background: rgba(230,126,34,.25); color: #e67e22; font-size: 12px; }
.badge-sucursal  { background: rgba(52,152,219,.15); color: #3498db; font-weight: 600; }
.badge-info    { background: rgba(52,152,219,.2); color: var(--info); }
.badge-muted   { background: rgba(136,136,170,.15); color: var(--text-muted); }
.badge-posv    { background: rgba(155,89,182,.25);  color: #9b59b6; font-weight: 700; }

/* Estados de transferencias a sucursal: un color por estado, sin repetir.
   Van aparte de los badges genéricos a propósito — hay cinco de esos para
   diez estados, y el circuito se sigue de un vistazo por el color. */
.badge-tr-sinenviar  { background: rgba(148,163,184,.18); color: #94a3b8; }
.badge-tr-middleware { background: rgba(34,211,238,.18);  color: #22d3ee; }
.badge-tr-wms        { background: rgba(59,130,246,.20);  color: #60a5fa; }
.badge-tr-preparada  { background: rgba(34,197,94,.18);   color: #22c55e; }
.badge-tr-sindetalle { background: rgba(234,179,8,.20);   color: #eab308; }
.badge-tr-parcial    { background: rgba(249,115,22,.20);  color: #f97316; }
.badge-tr-transito   { background: rgba(168,85,247,.22);  color: #c084fc; font-weight: 700; }
.badge-tr-recibida   { background: rgba(20,184,166,.20);  color: #14b8a6; }
.badge-tr-error      { background: rgba(239,68,68,.20);   color: #ef4444; }
.badge-tr-cerrada    { background: rgba(120,113,108,.25); color: #a8a29e; }

/* Filtro por estado con varios a la vez. Un chip apagado se ve apagado — no
   gris— para que el color del estado siga siendo reconocible aun sin elegir. */
.chips-filtro { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip-filtro {
  cursor: pointer; user-select: none; border: 1px solid transparent;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 18px;
  opacity: .45; filter: saturate(.5); transition: opacity .12s, filter .12s, border-color .12s;
}
.chip-filtro:hover { opacity: .8; filter: saturate(.9); }
.chip-filtro.on    { opacity: 1; filter: none; border-color: currentColor; font-weight: 600; }
.chips-filtro .chip-limpiar {
  cursor: pointer; font-size: 11px; color: var(--text-muted);
  text-decoration: underline; padding: 0 4px;
}

/* ── Instructivos ── Índice a la izquierda, lector a la derecha. En una
   pantalla angosta el índice pasa arriba y el lector abajo. */
.instr-layout { display: flex; gap: 16px; padding: 12px 20px 20px; align-items: flex-start; }
.instr-indice {
  flex: 0 0 300px; max-height: calc(100vh - 210px); overflow: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 8px;
}
.instr-lector {
  flex: 1; min-width: 0; max-height: calc(100vh - 210px); overflow: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 18px 22px;
}
@media (max-width: 900px) {
  .instr-layout { flex-direction: column; }
  .instr-indice { flex: none; width: 100%; max-height: 280px; }
  .instr-lector { width: 100%; }
}
/* Los dos encabezados quedan PEGADOS arriba mientras se baja: con el índice
   todo desplegado, lo único peor que no encontrar algo es no saber dónde está
   parado uno. La subsección se pega debajo de la sección, por eso el `top` de
   una es la altura de la otra. */
.instr-sec, .instr-sub {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  position: sticky; z-index: 2; user-select: none;
}
.instr-sec {
  top: 0; padding: 9px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.instr-sub {
  top: 33px; padding: 7px 8px 7px 20px; font-size: 12px; font-weight: 600;
  color: var(--text-muted); background: var(--bg-card);
}
.instr-sec:hover, .instr-sub:hover { color: var(--text); }
.instr-sec.abierta { color: var(--text); }
.instr-sub.abierta { color: var(--accent); }
.instr-sec .flecha, .instr-sub .flecha { flex: 0 0 10px; font-size: 9px; opacity: .7; }
.instr-sec .txt, .instr-sub .txt { flex: 1; min-width: 0; }
.instr-sec .cont, .instr-sub .cont {
  flex: 0 0 auto; font-size: 10px; font-weight: 600; opacity: .65;
  background: var(--bg2); border-radius: 999px; padding: 1px 7px;
}
.instr-item  { padding: 6px 10px 6px 30px; border-radius: 6px; cursor: pointer;
               font-size: 13px; line-height: 1.35; }
.instr-item:hover   { background: var(--bg2); }
.instr-item.activo  { background: rgba(108,99,255,.18); color: var(--accent); font-weight: 600; }
.instr-item .mini    { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }
.instr-item.borrador { opacity: .55; font-style: italic; }
.instr-vacio { padding: 26px 10px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* El texto del instructivo. Ancho de lectura acotado a propósito: una línea de
   200 caracteres se lee mal, por más lugar que haya en la pantalla. */
.instr-cuerpo { max-width: 72ch; font-size: 13.5px; line-height: 1.62; }
.instr-cuerpo h2 { font-size: 16px; margin: 22px 0 8px; }
.instr-cuerpo h3 { font-size: 14px; margin: 18px 0 6px; color: var(--text-muted); }
.instr-cuerpo p  { margin: 0 0 11px; }
.instr-cuerpo ul, .instr-cuerpo ol { margin: 0 0 12px; padding-left: 22px; }
.instr-cuerpo li { margin: 0 0 5px; }
.instr-cuerpo code {
  background: var(--bg2); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
}
.instr-cuerpo blockquote {
  margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--accent);
  background: var(--bg2); border-radius: 0 6px 6px 0;
}
.instr-cuerpo blockquote p:last-child { margin: 0; }
.instr-cuerpo hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.instr-medio { margin: 14px 0; }
.instr-medio video, .instr-medio img {
  max-width: 100%; border-radius: 8px; border: 1px solid var(--border); display: block;
}
.instr-medio .epigrafe { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.instr-meta { font-size: 11px; color: var(--text-muted); margin-top: 20px;
              padding-top: 10px; border-top: 1px solid var(--border); }

/* ── Figuras de interfaz dentro de un instructivo ──
   No son capturas: son los elementos reales de la app dibujados en chico. Por
   eso reusan .btn, .badge y .data-table — si mañana cambia un color, cambia
   también acá sin que nadie edite el instructivo. */
.instr-ui {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  margin: 16px 0; background: var(--bg2);
}
.instr-ui-barra {
  padding: 7px 12px; font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.instr-ui-cuerpo { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.instr-ui-tabla { font-size: 12px; margin: 0; width: 100%; }
.instr-ui-tabla td { padding: 6px 8px; white-space: nowrap; }
.instr-ui-botones { display: flex; gap: 6px; flex-wrap: wrap; }
/* Los botones de una figura no se tocan: son un dibujo, no un control. */
.instr-ui-botones .btn { cursor: default; pointer-events: none; }
.instr-ui-campo label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.instr-ui-campo .form-control { color: var(--text-muted); font-size: 12.5px; }
.instr-ui-pasos { display: flex; gap: 8px; flex-wrap: wrap; }
.instr-ui-paso {
  flex: 1 1 150px; display: flex; gap: 8px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4;
}
.instr-ui-paso span {
  flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}
.instr-ui-nota { font-size: 11.5px; color: var(--text-muted); font-style: italic; }

/* Urgencia badge */
.urg-vencido { color: var(--danger);  font-weight: 700; }
.urg-hoy     { color: #f39c12; font-weight: 700; }
.urg-manana  { color: #f1c40f; }
.urg-ok      { color: var(--success); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* Modal ancho. Es un MODIFICADOR, no un cambio del ancho general: la mayoría
   de los modales del sistema son formularios cortos y a 980px quedarían
   vacíos. Lo piden los que muestran una grilla que no entra —el detalle de un
   pedido con la columna de artículo, la lectura del remito con la imagen al
   lado—. La clase la pone y la saca abrirModal() en cada apertura. */
.modal.modal-ancho { max-width: 980px; }
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-header h3 { flex: 1; font-size: 15px; font-weight: 600; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 8px;
}

/* Modal detail grid */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.detail-item label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.detail-item span {
  font-size: 13px;
  color: var(--text);
}
.detail-full { grid-column: 1 / -1; }

/* ── Form ────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.form-control {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.form-control:focus { border-color: var(--accent); }

/* ── Campo numérico con las flechas AFUERA ───────────────────
   El spinner nativo del <input type=number> se dibuja ENCIMA del valor: en un
   campo angosto (una cantidad de 2 o 3 dígitos) tapa el número. Lo apagamos y
   ponemos dos chevrones al costado, de trazo grueso y con contraste. */
.num-stepper { display: inline-flex; align-items: center; gap: 4px; }
.num-stepper > input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.num-stepper > input[type=number]::-webkit-outer-spin-button,
.num-stepper > input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}
.num-stepper-btns { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.num-stepper-btns button {
  width: 20px; height: 12px; padding: 0; line-height: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
}
.num-stepper-btns button svg { width: 9px; height: 9px; display: block; }
.num-stepper-btns button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.num-stepper-btns button:active:not(:disabled) { background: var(--border); }
.num-stepper-btns button:disabled { opacity: .3; cursor: default; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* ── Login screen ────────────────────────────────────────── */
.login-screen {
  position: fixed; inset: 0;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.login-screen.hidden { display: none; }
.login-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  width: 380px;
  box-shadow: var(--shadow);
}
/* El logo arriba y no al costado: al costado le quedaban 244px al texto y
   "El Mundo del Juguete — Sistema Operativo" se partia en dos lineas. */
/* La cabecera del login va CENTRADA (06/10): alineada a la izquierda, el logo
   quedaba colgado en una esquina y el bloque no se leía como un encabezado. */
.login-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 24px; }
.login-head p { margin-bottom: 0 !important; }
.login-logo { flex-shrink: 0; display: block; }
.login-box h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 4px;
}
.login-box p { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.login-error {
  background: rgba(231,76,60,.15);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}
.login-error.hidden { display: none; }

/* ── Bulk actions bar ───────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.bulk-bar.hidden { display: none; }
.bulk-bar .bulk-count { font-weight: 700; color: var(--accent); }
th.col-bulk, td.col-bulk {
  width: 36px; min-width: 36px; padding: 6px 8px; text-align: center;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 9999;
  /* Sin flex-column: los toasts se superponen en el mismo lugar */
  pointer-events: none;
}
.toast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  min-width: 220px;
  max-width: 340px;
  box-shadow: var(--shadow);
  animation: slideIn .2s ease;
  border-left: 3px solid var(--accent);
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }

/* Toast con acción — persistente, con botón de confirmación */
.toast-accion {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius);
  padding: 10px 14px 10px 14px;
  font-size: 13px;
  min-width: 240px;
  max-width: 360px;
  box-shadow: var(--shadow);
  animation: slideIn .2s ease;
  pointer-events: auto;
}
.toast-accion-msg  { margin-bottom: 8px; color: var(--text); }
.toast-accion-btns { display: flex; gap: 6px; justify-content: flex-end; }
.toast-accion-btns .btn { font-size: 12px; padding: 4px 10px; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Avisos dentro de un modal o una pantalla ──────────────
   El 19/10 el modal de "Autorizar sobrante" salió ilegible: el bloque usaba
   `background: var(--warning-bg, #fff8e1)`, y como `--warning-bg` no existe
   quedaba un fondo CREMA con el texto claro del tema encima. Nadie lo vio
   hasta que apareció el primer sobrante real.
   Estas clases existen para que un aviso no tenga que inventar colores: el
   fondo es el color de estado teñido sobre el tema oscuro, y el texto es el
   del tema, que siempre contrasta. */
.aviso {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg2);
}
.aviso + .aviso { margin-top: 8px; }
.aviso strong { color: inherit; }
.aviso-warning { background: rgba(243,156,18,.12); border-color: rgba(243,156,18,.45); }
.aviso-warning .aviso-titulo { color: var(--warning); }
.aviso-danger  { background: rgba(231,76,60,.12);  border-color: rgba(231,76,60,.45); }
.aviso-danger  .aviso-titulo { color: var(--danger); }
.aviso-info    { background: rgba(52,152,219,.12); border-color: rgba(52,152,219,.45); }
.aviso-info    .aviso-titulo { color: var(--info); }
.aviso-exito   { background: rgba(46,204,113,.12); border-color: rgba(46,204,113,.45); }
.aviso-exito   .aviso-titulo { color: var(--success); }
.aviso-titulo  { font-weight: 700; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* ── Pagination ──────────────────────────────────────────── */
/* La definición de `.pagination` está más arriba, con el resto del selector
   de "por página". Había una segunda acá con `margin-top: 14px` que, desde
   que la barra tiene borde y fondo propios, dejaba un hueco del color de la
   tarjeta entre la tabla y la barra. */
.pag-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.pag-btn:hover:not(:disabled):not(.pag-active) {
  background: var(--bg2);
  border-color: var(--accent);
  color: var(--accent);
}
.pag-btn.pag-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  cursor: default;
}
.pag-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pag-btn.pag-nav {
  font-size: 15px;
  color: var(--text-muted);
}
.pag-ellipsis {
  min-width: 24px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
  user-select: none;
}

/* ── Panel de métricas ───────────────────────────────────── */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.metric-card .metric-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
.metric-card .metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.metric-card .metric-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.metric-gauge svg { overflow: visible; }
.metrics-chart-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.metrics-chart-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.metrics-sched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.metrics-sched-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
}
.metrics-sched-item .sched-name { font-weight: 600; margin-bottom: 2px; }
.metrics-sched-item .sched-ts   { color: var(--text-muted); font-size: 11px; }
.lag-ok   { color: #22c55e; }
.lag-warn { color: #f59e0b; }
.lag-crit { color: #ef4444; }

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-bottom: none;
  transition: all .15s;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--accent2);
  background: var(--bg-card);
  border-color: var(--border);
  border-bottom-color: var(--bg-card);
  margin-bottom: -1px;
}

/* ── Page sections ───────────────────────────────────────── */
.page { display: none; height: 100%; }
.page.active { display: flex; flex-direction: column; overflow: hidden; }

/* ── Fixed-header scrollable list layout ─────────────────── */
/* Used on pages with order tables (despachos, envios, sucursales, etc.)  */
.content-list {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Fixed (non-scrolling) top elements */
.content-list > .stats-row,
.content-list > .tab-bar,
.content-list > .filters,
.content-list > .bulk-bar { flex-shrink: 0; }

/* Inner tab panes grow and stack their content */
.content-list > [id^="pane-"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.content-list > [id^="pane-"] > .filters,
.content-list > [id^="pane-"] > .bulk-bar { flex-shrink: 0; }

/* The card containing the table fills remaining space */
.content-list > .card,
.content-list > [id^="pane-"] > .card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Table wrap scrolls */
.content-list .table-wrap {
  flex: 1;
  overflow: auto;
}

/* ── Recepciones y Música: alto acotado y scroll propio ──── */
/*
 * Las dos páginas colgaban su contenido directo de `.page`, que es flex con
 * overflow:hidden. Sin alto asignado el contenido crecía y la página lo
 * recortaba: la grilla de recepciones se cortaba abajo con la paginación fuera
 * de la vista, y la lista de pistas de Música quedaba tapada a la mitad.
 */
#rec-vista-lista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#rec-aviso-mapeo,
#rec-filtros,
#ped-tablero { flex-shrink: 0; }

#rec-vista-lista > .table-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Solo las tablas scrollean; las paginaciones quedan fijas abajo. */
#rec-scroll { flex: 1; min-height: 0; overflow: auto; }
#ped-pagination,
#rec-pagination { flex-shrink: 0; }

#mus-cont {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ── Auditoría de stock: el marco estándar en las tres pestañas (21/10) ──── */
/*
 * Mismo caso que Recepciones. La página ya usaba `content-list` + `table-wrap`,
 * pero las pestañas cuelgan de un div intermedio que no era flex, y eso cortaba
 * la cadena: la regla `.content-list .table-wrap { flex:1; overflow:auto }` no
 * tenía de quién tomar el alto, la tabla crecía y la página la recortaba abajo
 * —con la paginación fuera de la vista—. Con el panel en columna flex scrollea
 * solo la grilla, el encabezado queda pegado arriba (ya es sticky) y la
 * paginación fija al pie.
 */
#aud-pane-stock,
#aud-pane-erp {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-auditoria-stock .tab-bar,
#aud-pane-stock > .filters,
#aud-pane-erp   > .filters,
#aud-stock-pagination,
#auderp-pagination { flex-shrink: 0; }

/* ── Config grid ─────────────────────────────────────────── */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ── Loader ──────────────────────────────────────────────── */
.loader {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-row td { text-align: center; padding: 30px; color: var(--text-muted); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* ── Sidebar overlay backdrop ─────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 490;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.active { display: block; }

/* ── Mobile hamburger button ──────────────────────────── */
.btn-mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  z-index: 501;
  background: var(--bg-card);
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Tablet (641–1024px) ──────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .sidebar { width: 190px; min-width: 190px; }
  .modal { max-width: 560px; }
  /* En tablet 980px no entran: el ancho pasa a ser el de la pantalla menos
     el respiro de los costados, para que la grilla scrollee y no se corte. */
  .modal.modal-ancho { max-width: 94vw; }
  .etiq-layout { grid-template-columns: 1fr 280px; }
  .stats-row { gap: 8px; }
  .stat-card { min-width: 90px; }
  .detail-grid { grid-template-columns: 1fr; }
  .topbar-actions .btn { font-size: 12px; padding: 5px 10px; }
}

/* ── Mobile (≤ 640px) ─────────────────────────────────── */
@media (max-width: 640px) {

  /* Hamburger: visible */
  .btn-mobile-menu { display: flex; }

  /* Sidebar: drawer off-canvas */
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 500;
    width: 260px !important;
    min-width: 260px !important;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .sidebar.collapsed {
    width: 260px !important;
    min-width: 260px !important;
    transform: translateX(-100%);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.6);
  }
  /* Cuando está abierto, mostrar siempre versión expandida */
  .sidebar.mobile-open .sidebar-brand-text { display: block; }
  .sidebar.mobile-open .sidebar-section    { display: flex; }
  .sidebar.mobile-open .nav-label         { display: inline; }
  .sidebar.mobile-open .user-info         { display: block; }
  .sidebar.mobile-open .nav-badge         { display: inline-flex !important; }
  .sidebar.mobile-open .sidebar-brand     { padding: 14px 12px; justify-content: flex-start; }
  .sidebar.mobile-open .nav-item          { justify-content: flex-start; padding: 13px 16px; font-size: 14px; }
  .sidebar.mobile-open .sidebar-footer    { padding: 12px; }
  .sidebar.mobile-open #btn-logout        { padding: 11px 14px; justify-content: flex-start; }

  /* Ocultar toggle original del sidebar en mobile */
  #btn-sidebar-toggle { display: none; }

  /* Main: ocupa todo el ancho */
  .main { width: 100%; min-width: 0; }

  /* Topbar: espacio para el hamburger */
  .topbar {
    padding: 0 10px 0 60px;
    height: 52px;
    gap: 6px;
  }
  .topbar-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions { gap: 4px; flex-shrink: 0; }
  .topbar-actions .btn { padding: 5px 8px; font-size: 11px; gap: 3px; }
  /* Ocultar labels de texto en botones del topbar, dejar solo íconos/texto corto */
  .topbar-actions .btn-label-hide { display: none; }

  /* Content padding reducido */
  .content { padding: 10px 12px; }

  /* Cards */
  .card-body { padding: 10px 12px; }

  /* Stats row: 2 por fila */
  .stats-row { gap: 6px; }
  .stat-card {
    min-width: calc(50% - 3px);
    flex: 1 1 calc(50% - 3px);
    padding: 8px 10px;
  }
  .stat-card .val { font-size: 21px; }
  .stat-card .lbl { font-size: 10px; }

  /* Tables: compactas */
  table { font-size: 12px; }
  tbody td { padding: 6px 7px; vertical-align: middle; }
  thead th { padding: 6px 7px; font-size: 10px; }
  .loading-row td { padding: 20px; }

  /* Filter bar */
  .filter-bar { gap: 6px; }
  .filter-bar .search-input {
    min-width: 0;
    flex: 1;
    max-width: none;
    font-size: 16px;
  }
  .filter-panel-body.open {
    flex-direction: column;
    gap: 8px;
  }
  .filter-group {
    min-width: 0;
    width: 100%;
  }
  .filter-panel-actions {
    margin-left: 0;
    padding-top: 2px;
    width: 100%;
  }
  .filter-panel-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Filtros legacy */
  .filters { gap: 6px; }
  .filters input, .filters select { min-width: 0; flex: 1; font-size: 16px !important; }
  .search-input { max-width: none; font-size: 16px !important; }

  /* Modals: bottom sheet */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
    justify-content: stretch;
  }
  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    animation: slideUp .22s ease;
  }
  @keyframes slideUp {
    from { transform: translateY(40px); opacity: .6; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .modal-body  { padding: 14px 16px; }
  .modal-header { padding: 14px 16px; }
  .modal-footer { padding: 10px 14px; gap: 6px; }
  .modal-footer .btn { flex: 1; justify-content: center; min-height: 40px; }

  /* Detail grid: una columna */
  .detail-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Forms */
  .form-row { flex-direction: column; gap: 0; }
  .form-group { margin-bottom: 12px; }
  .form-grid-3 { grid-template-columns: 1fr !important; }

  /* Inputs: mínimo 16px para evitar zoom en iOS */
  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="number"],
  input[type="email"],
  select,
  textarea,
  .form-control,
  .filter-bar .search-input,
  .dr-trigger,
  .multisel-trigger { font-size: 16px !important; }

  /* Botones: área táctil mínima */
  .btn { min-height: 36px; }
  .btn-sm { min-height: 32px; padding: 5px 10px; }

  /* Login: ancho completo */
  .login-box {
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 28px 20px;
    border-radius: 12px;
  }

  /* Config grid */
  .config-grid { grid-template-columns: 1fr; }

  /* Bulk bar */
  .bulk-bar { gap: 6px; }
  .bulk-bar .btn { flex: 1; justify-content: center; }

  /* Pagination */
  .pagination { justify-content: center; flex-wrap: wrap; gap: 4px; }
  .pag-btn { min-width: 30px; height: 30px; font-size: 12px; }

  /* Toast: abajo en mobile */
  .toast-container {
    top: auto;
    bottom: 12px;
    right: 8px;
    left: 8px;
  }
  .toast { max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; }

  /* Etiquetas: layout apilado */
  .etiq-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .etiq-catalogue {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px;
    max-height: 42vh;
  }
  .etiq-queue-panel { padding: 10px; }
  .etiq-search-row { flex-wrap: wrap; }
  .etiq-layout { min-height: 0; }

  /* Tabs: más compactos */
  .tab-btn, .etiq-tab { padding: 7px 10px; font-size: 12px; }

  /* cfg-summary: área táctil */
  .cfg-summary { padding: 13px 14px; font-size: 14px; }

  /* Ocultar columnas no críticas en tablas (ancho muy reducido) */
  .col-mobile-hide { display: none !important; }

  /* Multisel dropdown */
  .multisel-opts { max-height: 180px; }

  /* Empaquetado: ya mobile-first, ajustes menores */
  #emp-pane-pickear { padding: 12px; }
  #emp-pane-stats   { padding: 12px; }

  /* Cambios form: padding reducido */
  .content[style*="padding:20px 24px"],
  .content[style*="padding: 20px 24px"] { padding: 12px !important; }
}

/* ══════════════════════════════════════════════════════════
   ETIQUETAS — Módulo completo
   ══════════════════════════════════════════════════════════ */

.etiq-content { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; height: 100%; }

/* Tabs nav */
.etiq-tabs {
  display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--border);
  background: var(--bg-card); flex-shrink: 0;
}
.etiq-tab {
  padding: 8px 16px; border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 13px; font-weight: 500; transition: all .15s;
}
.etiq-tab:hover { color: var(--text); background: rgba(108,99,255,.1); }
.etiq-tab.active { background: var(--bg-dark); color: var(--accent2); border-color: var(--border); font-weight: 600; }

/* Panels */
.etiq-panel { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.etiq-panel.hidden { display: none; }

/* Generic page tabs (used in Sucursales, etc.) */
.tab-btn {
  padding: 8px 18px; border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 13px; font-weight: 500; transition: all .15s;
}
.tab-btn:hover  { color: var(--text); background: rgba(108,99,255,.1); }
.tab-btn.active { background: var(--bg-dark); color: var(--accent2); border-color: var(--border); font-weight: 600; }

/* Sortable table headers */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: rgba(108,99,255,.08); }
th.sortable::after { content: ' ↕'; color: var(--text-muted); font-size: 10px; opacity: .45; }
th.sort-asc::after  { content: ' ↑'; color: var(--accent2); opacity: 1; }
th.sort-desc::after { content: ' ↓'; color: var(--accent2); opacity: 1; }

/* 2-column layout */
.etiq-layout {
  display: grid; grid-template-columns: 1fr 340px; gap: 0;
  flex: 1; overflow: hidden; min-height: 0;
}
.etiq-catalogue {
  display: flex; flex-direction: column; gap: 0; overflow: hidden;
  border-right: 1px solid var(--border); padding: 14px;
}
.etiq-queue-panel {
  display: flex; flex-direction: column; overflow: hidden;
  padding: 12px; gap: 8px; background: var(--bg-card);
}

/* Search row */
.etiq-search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.etiq-lista-sel { margin-bottom: 10px; }
.etiq-lista-info,
.etiq-cons-lista-info {
  padding: 7px 10px; margin-bottom: 10px; font-size: 13px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
}

/* Product list */
.etiq-product-list {
  flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-dark);
}
.etiq-pi {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s;
}
.etiq-pi:last-child { border-bottom: none; }
.etiq-pi:hover { background: rgba(108,99,255,.1); }
.etiq-pi.selected { background: rgba(108,99,255,.18); }
.etiq-pi input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); width: 15px; height: 15px; }
.etiq-pi-info { flex: 1; min-width: 0; }
.etiq-pi-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etiq-pi-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.etiq-pi-price { font-size: 12px; font-weight: 700; color: var(--accent2); white-space: nowrap; flex-shrink: 0; }

/* Pagination */
.etiq-pagination { display: flex; gap: 6px; align-items: center; padding: 8px 0 0; flex-shrink: 0; }
.etiq-pag-info { font-size: 12px; color: var(--text-muted); margin-right: auto; }

/* Placeholder */
.etiq-placeholder { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Queue panel */
.etiq-queue-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.etiq-preview {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #2a2a3e; overflow: hidden; flex-shrink: 0;
}
.etiq-preview-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 5px 10px; border-bottom: 1px solid var(--border); }
.etiq-preview-frame {
  padding: 10px; display: flex; justify-content: center; min-height: 60px; max-height: 140px; overflow: hidden;
  background: #d0d0d0; /* fondo gris para que la etiqueta blanca resalte en modo oscuro */
}
.etiq-preview-empty { color: var(--text-muted); font-size: 12px; text-align: center; padding: 16px; }
.etiq-preview-caption { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* Queue list */
.etiq-queue-list { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-dark); min-height: 60px; }
.etiq-queue-empty { padding: 16px; color: var(--text-muted); font-size: 12px; text-align: center; }
.etiq-qi { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.etiq-qi:last-child { border-bottom: none; }
.etiq-qi-top { display: flex; gap: 6px; align-items: flex-start; }
.etiq-qi-name { font-size: 12px; font-weight: 500; flex: 1; }
.etiq-qi-meta { font-size: 11px; color: var(--text-muted); margin: 2px 0; }
.etiq-qi-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.etiq-qty-lbl { font-size: 11px; color: var(--text-muted); }
.etiq-qty-bc, .etiq-qty-pp {
  width: 56px; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 12px;
}

/* Queue footer */
.etiq-queue-footer { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.etiq-summary { font-size: 12px; color: var(--text-muted); flex: 1; }

/* Settings row */
.etiq-settings-row {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 8px 0 0; border-top: 1px solid var(--border); flex-shrink: 0; font-size: 11px; color: var(--text-muted);
}
.etiq-s-sel {
  padding: 3px 5px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text); font-size: 11px;
}
.etiq-s-num {
  width: 48px; padding: 3px 4px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-input); color: var(--text); font-size: 11px;
}

/* Label type selector */
.etiq-lts { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.etiq-lts-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--bg-input); border: none; cursor: pointer; color: var(--text);
  font-size: 12px; text-align: left;
}
.etiq-lts-toggle:hover { background: rgba(108,99,255,.15); }
.etiq-lts-title { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.etiq-lts-sel-name { flex: 1; color: var(--accent2); font-weight: 600; }
.etiq-lts-chevron { font-size: 10px; color: var(--text-muted); }
.etiq-lts-opts { border-top: 1px solid var(--border); }
.etiq-lts-opts.hidden { display: none; }
.etiq-lts-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px;
  cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s;
}
.etiq-lts-opt:last-child { border-bottom: none; }
.etiq-lts-opt:hover { background: rgba(108,99,255,.1); }
.etiq-lts-opt.selected { background: rgba(108,99,255,.2); }
.etiq-lts-opt input[type="radio"] { margin-top: 3px; accent-color: var(--accent); }
.etiq-lts-opt-lbl { font-size: 13px; font-weight: 600; }
.etiq-lts-opt-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── Bloque Admin Cambio de Precios — colapsable ────────────── */
.etiq-admin-header {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background .15s;
  padding: 2px 4px;
  margin-left: -4px;
}
.etiq-admin-header:hover { background: rgba(255,255,255,.05); }
.etiq-admin-chevron {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.etiq-admin-collapsed .etiq-admin-chevron { transform: rotate(-90deg); }
.etiq-admin-body {
  overflow: hidden;
  transition: opacity .15s;
}
.etiq-admin-collapsed .etiq-admin-body {
  display: none;
}
.etiq-admin-collapsed { margin-bottom: 0 !important; }

/* Consulta panel */
.etiq-consulta-wrap { padding: 20px; overflow-y: auto; flex: 1; }
.etiq-consulta-card { padding: 20px; max-width: 620px; margin: 0 auto; }
.etiq-cons-results { max-width: 720px; margin: 16px auto 0; }
.etiq-price-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--bg-card); border-radius: var(--radius);
  border: 1px solid var(--border); transition: border-color .15s;
}
.etiq-price-card.promo { border-color: var(--warning); }
.etiq-price-card-info { flex: 1; }
.etiq-price-card-name { font-size: 15px; font-weight: 600; }
.etiq-price-card-name--img { cursor: pointer; }
.etiq-price-card-name--img:hover { color: var(--accent2); }
.etiq-price-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.etiq-promo-badge { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--warning); background: rgba(243,156,18,.15); padding: 2px 8px; border-radius: 10px; }
.etiq-price-card-price { font-size: 26px; font-weight: 900; color: var(--accent2); white-space: nowrap; }

/* ── Cambios — formulario full-page ────────────────────────── */
.form-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.form-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
}
@media (max-width: 900px) {
  .form-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .form-grid-3 { grid-template-columns: 1fr; }
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.radio-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}
.radio-opt input[type="radio"] { accent-color: var(--accent); }
span.req { color: var(--danger); font-weight: 700; }

.cambio-prod-header {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.cambio-prod-row {
  display: flex;
  gap: 8px;
  margin-bottom: 5px;
  align-items: center;
}
.cambio-nombre-input {
  font-size: 12px !important;
}

/* ── Print ─────────────────────────────────────────────────── */
#etiq-print-area { display: none; }
@media print {
  body > *:not(#etiq-print-area) { display: none !important; }
  #etiq-print-area { display: block !important; }
}

/* ── Email notification pills ─────────────────────────────── */
.email-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg2, var(--bg-input));
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.email-toggle-pill:hover { background: var(--bg-input); border-color: var(--accent); }
.email-toggle-pill input[type=checkbox] { cursor: pointer; accent-color: var(--accent); }

/* ── FTP sync cards colapsables ───────────────────────────── */
.ftp-sync-card > summary::-webkit-details-marker { display: none; }
.ftp-sync-card > summary::marker { display: none; }
.ftp-sync-card > summary:hover { background: rgba(255,255,255,.04); border-radius: 8px; }
.ftp-sync-card[open] > summary { border-radius: 8px 8px 0 0; }
.ftp-sync-card[open] { border-color: var(--accent) !important; }
.ftp-sync-card[open] .ftp-chevron { transform: rotate(90deg); color: var(--accent); }

/* ── Config collapsible sections ──────────────────────────── */
.cfg-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.cfg-section[open] { border-color: var(--accent); }

.cfg-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none;
  border-bottom: 1px solid transparent;
  transition: background .15s;
}
.cfg-summary::-webkit-details-marker { display: none; }
.cfg-summary::marker { display: none; }
.cfg-summary:hover { background: var(--bg2); }
.cfg-section[open] > .cfg-summary {
  border-bottom-color: var(--border);
  color: var(--accent);
}

/* Chevron indicator */
.cfg-summary::before {
  content: '▶';
  font-size: 10px;
  color: var(--text-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.cfg-section[open] > .cfg-summary::before {
  transform: rotate(90deg);
  color: var(--accent);
}

/* Título siempre alineado a la izquierda (ocupa el espacio libre) */
.cfg-summary .cfg-title {
  flex: 1;
  text-align: left;
}

/* Botones de acción: ocultos cuando la sección está cerrada */
.cfg-summary .cfg-actions {
  display: none;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cfg-section[open] > .cfg-summary .cfg-actions {
  display: flex;
}

/* ── Multi-select dropdown ─────────────────────────────────── */
.multisel {
  position: relative;
  display: inline-block;
  width: 100%;
}
.multisel-trigger {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.multisel-trigger:hover {
  border-color: var(--accent);
}
.multisel.open .multisel-trigger {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.multisel-opts {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #1e1e38;
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 4px 0;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
}
.multisel.open .multisel-opts {
  display: block;
}
.multisel-opts label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #e0e0f0;
  white-space: nowrap;
  user-select: none;
}
.multisel-opts label:hover {
  background: rgba(108,99,255,.18);
}
.multisel-opts input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
/* Facets — opciones dinámicas */
.multisel-opts label.facet-hidden {
  display: none;
}
.multisel-opts label.facet-unavailable {
  opacity: 0.38;
  font-style: italic;
}


/* ── DateRange Picker ─────────────────────────────────────── */
.daterange-picker {
  position: relative;
  display: inline-block;
  width: 100%;
}
.dr-trigger {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dr-trigger::after { content: '📅'; font-size: 12px; margin-left: auto; opacity: 0.5; }
.dr-trigger:hover { border-color: var(--accent); }
.dr-trigger.dr-has-value { color: var(--text); }
.dr-calendar {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9999;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  min-width: 244px;
}
.dr-calendar.dr-cal-open { display: block; }
.dr-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dr-cal-title { font-size: 13px; font-weight: 700; color: var(--text); }
.dr-nav {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1;
}
.dr-nav:hover { background: var(--bg-input); color: var(--text); }
.dr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.dr-day-hdr {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  padding: 3px 0 4px;
}
.dr-day {
  text-align: center;
  font-size: 12px;
  padding: 5px 2px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  transition: background .1s;
  min-width: 28px;
}
.dr-day:not(.dr-empty):hover { background: var(--bg-input); }
.dr-day.dr-range-start,
.dr-day.dr-range-end,
.dr-day.dr-selected {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}
.dr-day.dr-in-range {
  background: rgba(108,99,255,0.18);
  border-radius: 0;
}
.dr-day.dr-range-start { border-radius: 4px 0 0 4px; }
.dr-day.dr-range-end   { border-radius: 0 4px 4px 0; }
.dr-day.dr-range-start.dr-range-end,
.dr-day.dr-selected { border-radius: 4px; }
/* Hover sobre estados seleccionados: color más claro (el hover genérico los pisaría) */
.dr-day.dr-range-start:hover,
.dr-day.dr-range-end:hover,
.dr-day.dr-selected:hover {
  background: var(--accent);
  filter: brightness(1.2);
  color: #fff;
}
.dr-day.dr-in-range:hover {
  background: rgba(108,99,255,0.28);
}
.dr-empty { cursor: default; }
.dr-cal-footer { margin-top: 8px; text-align: right; }
.dr-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}
.dr-clear:hover { color: var(--danger); border-color: var(--danger); }
.dr-hint {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 5px;
  font-style: italic;
}


/* ── Búsqueda con selector de campo (08/09) ─────────────────── */
.search-wrap { position: relative; display: flex; flex: 1; min-width: 220px; max-width: 360px; }
.search-wrap .search-input { flex: 1; min-width: 0; max-width: none; padding-right: 98px; }
.search-scope {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 92px; font-size: 11px; padding: 3px 2px;
  background: transparent; color: var(--text-muted);
  border: none; border-left: 1px solid var(--border); border-radius: 0;
  cursor: pointer; outline: none;
}
.search-scope:hover, .search-scope:focus { color: var(--text); }
.search-scope option { background: var(--bg2, #1e1e35); color: var(--text, #e0e0f0); }

/* Disco de la sección Música: gira solo mientras suena. */
@keyframes musGira { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [style*="musGira"] { animation: none !important; } }

/* ── Opciones de los <select> (01/10) ──────────────────────────────────────
   El <select> recibe fondo oscuro por .form-control, pero sus <option> no, y
   Chrome en Windows pinta de BLANCO lo que sobra del popup. Con un filtro de
   60 proveedores el resultado es un bloque blanco al costado de la lista, de
   tamaño distinto en cada apertura (el popup se dimensiona según el espacio
   que tenga en pantalla).
   Va global y no por pantalla: lo mismo pasaba en la búsqueda con selector de
   campo y se había parcheado solo ahí (.search-scope option, arriba). */
select option,
select optgroup {
  background: var(--bg2, #1e1e35);
  color: var(--text, #e0e0f0);
}


/* ── Ícono "marcar demorado" (08/09): antes opacity 0.25 inline, era invisible ── */
.dem-toggle {
  cursor: pointer; opacity: 0.5; font-size: 12px;
  transition: opacity .15s, transform .15s;
}
.dem-toggle:hover { opacity: 1; transform: scale(1.25); }

/* Cancelación solicitada en VTEX (09/09): badge rojo bien visible */
.badge-cancel-sol {
  background: #dc2626; color: #fff; font-weight: 700; font-size: 10px;
  letter-spacing: .3px; white-space: nowrap;
}


/* ── Búsqueda general de Sucursales — dropdown autocomplete (08/09) ── */
.suc-global-dd {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 900;
  background: var(--bg-card, #1a1a2e); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  max-height: 480px; overflow-y: auto; padding: 4px 0;
}
.suc-global-dd .sgd-grupo {
  padding: 7px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.suc-global-dd .sgd-grupo:first-child { border-top: none; }
.suc-global-dd .sgd-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  cursor: pointer; font-size: 13px;
}
.suc-global-dd .sgd-item:hover { background: var(--bg2, #1e1e35); }
.suc-global-dd .sgd-item .sgd-cod { font-family: monospace; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.suc-global-dd .sgd-item .sgd-cli { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suc-global-dd .sgd-item .sgd-suc { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.suc-global-dd .sgd-vacio { padding: 14px; font-size: 13px; color: var(--text-muted); text-align: center; }


/* Red de seguridad: el scanner bar SIEMPRE es flex aunque el JS borre el
   display inline (si cae a block, el span de búsqueda pasa a inline e
   ignora su width fijo). El JS lo oculta con display:none inline. */
#suc-scanner-bar { display: flex; position: relative; }

/* Barra de búsqueda general de Sucursales (08/09): ancho fijo, centrada
   respecto al ANCHO TOTAL de la barra (absoluta, ignora los botones) */
#suc-scanner-bar .suc-global-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 44vw;     /* en pantallas chicas no desborda */
}
.suc-global-q {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 13px;
  outline: none;
}
.suc-global-q::placeholder { color: var(--text-muted); }
.suc-global-q:focus { border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   MOBILE-FIRST — Tanda 3 (13/09, pedido de Andi)
   Pasada sobre las 10 secciones de uso diario. Referencia
   Galaxy A23 (~412px) pero todo fluido — sin anchos atados.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Tablas: el scroll horizontal vive DENTRO de la tarjeta, con inercia táctil */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .content-list { min-width: 0; }

  /* Topbar: si las acciones no entran, scrollean — nunca rompen el layout */
  .topbar-actions { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 62vw; }
  .topbar-actions .btn { white-space: nowrap; flex-shrink: 0; }

  /* Tabs (Despachos, Sucursales, Auditoría, Etiquetas): fila scrolleable */
  .tab-bar, .etiq-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; display: flex; }
  .tab-btn, .etiq-tab { white-space: nowrap; flex-shrink: 0; }

  /* Sucursales: el buscador global estaba centrado con position:absolute
     y se superponía con los botones — pasa a fila propia a ancho completo */
  #suc-scanner-bar { position: relative; }
  #suc-scanner-bar .suc-global-wrap {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100%;
    order: 10;
  }

  /* Dashboard de logísticas: la alerta de sin-logística usa todo el ancho */
  .sinlog-alert { max-width: 100% !important; }
  #log-resumen .card { flex: 1 1 calc(50% - 6px); }

  /* Filtros legacy (.filters): daterange y multisel con ancho fijo → fluidos */
  .filters { flex-wrap: wrap; }
  .filters > * { flex: 1 1 46%; min-width: 130px; }
  .filters .search-wrap { flex: 1 1 100%; }
  .filters .daterange-picker, .filter-bar .daterange-picker,
  .filters .multisel { width: 100% !important; min-width: 0 !important; }

  /* Búsqueda con selector de campo: nunca desborda */
  .search-wrap { width: 100%; display: flex; }
  .search-wrap .search-input { flex: 1; min-width: 0; }

  /* Reembolsos: panel de filtros inline apilado */
  #page-reembolsos .filter-panel-body { flex-direction: column !important; align-items: stretch !important; }
  #page-reembolsos .filter-group { width: 100%; }
  #page-reembolsos .filter-group .form-control,
  #page-reembolsos .daterange-picker { width: 100% !important; }

  /* Configuración: summaries con acciones que bajan de línea sin romperse */
  .cfg-summary { flex-wrap: wrap; gap: 6px; }
  .cfg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .cfg-actions .btn { flex: 1 1 auto; justify-content: center; }
  .ftp-sync-card summary { flex-wrap: wrap; }

  /* Usuarios: header del bloque Permisos (Copiar de:) apilado */
  #u-copiar-de, #eu-copiar-de { width: 100% !important; }

  /* Área táctil en botones de fila */
  tbody .btn-xs, tbody .btn-sm { min-height: 30px; }

  /* Modales largos (pedido, cambio, usuario): casi pantalla completa */
  .modal { max-height: 96vh; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE V2 — Correcciones de la revisión de Andi desde el A23
   (13/09, 11 puntos). Todo dentro de ≤640px: PC intacta.
   ══════════════════════════════════════════════════════════ */

/* Base (todos los tamaños): el detalle por courier de las tarjetas de
   tránsito solo existe en mobile — en PC no cambia nada */
.sc-solo-mobile { display: none; }

@media (max-width: 640px) {

  /* ── 1. Header (topbar): dos líneas en vez de apretujar ── */
  .topbar {
    height: auto;
    min-height: 48px;
    flex-wrap: wrap;
    padding: 6px 10px 6px 58px;
    row-gap: 4px;
  }
  .topbar-title { flex: 1 1 auto; }
  .topbar-actions {
    flex: 1 1 100%;
    max-width: none;
    justify-content: flex-start;
  }

  /* ── 2. Tarjetas de resumen: colapsadas, acordeón al tocar ── */
  .stat-card .stat-sub { display: none; }
  .stat-card.sc-open .stat-sub,
  .stat-card.sc-open .sc-solo-mobile { display: block; }
  .stat-card.sc-open { flex-basis: 100%; outline: 1px solid var(--border); }
  .stat-card { padding: 6px 10px; }
  .stat-card .val { font-size: 18px; }

  /* ── 3. Paginación: reformulada ── */
  .pagination, [id$="-pagination"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 10px 4px !important;
    row-gap: 8px !important;
  }
  .pagination button, [id$="-pagination"] button,
  .pag-btn {
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
  }
  [id$="-pagination"] select {
    min-height: 34px;
    font-size: 12px !important;
  }
  [id$="-pagination"] span { font-size: 11px; }

  /* ── 4. Panel de filtros (⚙): hoja inferior fija con scroll ── */
  .filter-panel-body.open {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 650;
    background: var(--bg2, #1e1e35);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,.55);
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
    margin: 0;
  }
  .fp-cerrar {
    width: 100%;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 2;
    margin-bottom: 10px;
  }

  /* Filtros legacy (.filters sin botón ⚙): misma hoja inferior */
  .filters > .fp-legacy-body { display: none; }
  .filters > .fp-legacy-body.open,
  .fp-legacy-body.open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 650;
    background: var(--bg2, #1e1e35);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,.55);
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  }
  #page-reembolsos .filter-panel-body:not(.open) { display: none !important; }
  .fp-legacy-body.open > * { width: 100% !important; min-width: 0 !important; }
  .fp-legacy-body.open select, .fp-legacy-body.open input { width: 100% !important; }

  /* ── 5. Posventa: textos largos truncados (el modal muestra el completo) ── */
  #posventa-tbody td { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── 6. Cambios: botones de acciones en línea, sin estirar la fila ── */
  #cambios-tbody td:last-child, #suc-cambios-tbody td:last-child { white-space: nowrap; }
  #cambios-tbody td:last-child .btn, #suc-cambios-tbody td:last-child .btn {
    display: inline-flex;
    min-height: 28px;
    padding: 3px 8px;
    font-size: 11px;
    margin: 1px;
  }

  /* ── 7. Retornos: chips de totales compactos en fila ── */
  #retornos-resumen { gap: 6px !important; margin-bottom: 8px !important; }
  #retornos-resumen > * { font-size: 11px !important; padding: 4px 8px !important; flex: 1 1 auto; text-align: center; }

  /* ── 9. Sucursales: barra de scanner compacta ── */
  #suc-scanner-bar { padding: 6px 10px !important; gap: 5px !important; }
  #suc-scanner-bar .btn { flex: 1 1 auto; font-size: 11px; padding: 5px 7px; min-height: 34px; }
  #suc-scanner-bar > span:first-child { display: none; } /* el emoji 📷 decorativo */

  /* ── 11. Última tarjeta cortada: colchón para la barra de navegación ── */
  .content, .page-content, #log-body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE V3 — Ajustes finos de la 3ª revisión de Andi (13/09)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Tarjetas: 3 por fila, compactas, sin espacio muerto ── */
  .stats-row { gap: 4px; margin-bottom: 8px !important; }
  .stat-card {
    min-width: calc(33.33% - 3px);
    flex: 1 1 calc(33.33% - 3px);
    padding: 4px 6px;
    border-radius: 8px;
  }
  .stat-card .val { font-size: 16px; line-height: 1.15; }
  .stat-card .lbl { font-size: 9px; line-height: 1.2; }
  .stat-card.sc-open { flex-basis: 100%; min-width: 100%; padding: 8px 10px; }
  .stat-card.sc-open .val { font-size: 20px; }
  .stat-card.sc-open .lbl { font-size: 11px; }

  /* ── Paginación: tira compacta de una sola línea, scrolleable ── */
  .pagination, [id$="-pagination"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding: 6px 4px !important;
  }
  .pagination > *, [id$="-pagination"] > * { flex-shrink: 0 !important; }
  .pagination button, [id$="-pagination"] button, .pag-btn {
    min-width: 27px !important;
    width: auto !important;
    min-height: 27px !important;
    height: 27px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
  }
  [id$="-pagination"] select, .pagination select {
    min-height: 27px !important;
    height: 27px !important;
    font-size: 11px !important;
    padding: 0 4px !important;
    margin-left: 6px;
  }
  [id$="-pagination"] span, .pagination span { font-size: 10px !important; white-space: nowrap; }

  /* ── Hoja de filtros: más baja y más densa ── */
  .filter-panel-body.open,
  .fp-legacy-body.open {
    max-height: 58vh;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .filter-panel-body.open .filter-group { margin: 0; }
  .filter-panel-body.open .filter-group label,
  .fp-legacy-body.open label { font-size: 10px; margin-bottom: 2px; }
  .filter-panel-body.open select,
  .filter-panel-body.open .multisel-trigger,
  .filter-panel-body.open .dr-trigger,
  .fp-legacy-body.open select,
  .fp-legacy-body.open .multisel-trigger,
  .fp-legacy-body.open .dr-trigger {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 36px;
  }
  .fp-cerrar { min-height: 38px; margin-bottom: 6px; }

  /* ── Posventa: truncado también en los elementos ANIDADOS de la celda
       (la observación vive en divs internos — el td solo no alcanzaba) ── */
  #posventa-tbody td {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }
  #posventa-tbody td > * {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    display: inline-block;
    vertical-align: middle;
  }

  /* ── Reembolsos: la grilla deja de tener scroll interno — scrollea la
       página como en las demás secciones y la paginación queda a la vista ── */
  #page-reembolsos { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rem-grid-wrap {
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
  }
  .rem-grid-wrap table { min-width: 100%; }
  #rem-pagination { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
}

/* ── MOBILE V3.1 (13/09): reembolsos — la grilla recupera el scroll LATERAL
   (la v3 lo había anulado con overflow:visible); el vertical lo maneja la
   página y la paginación quedó fuera del contenedor, siempre visible ── */
@media (max-width: 640px) {
  .rem-grid-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── MOBILE V3.2 (13/09): paginación de Reembolsos SIEMPRE visible —
   sticky al borde inferior del viewport mientras se scrollea la grilla ── */
@media (max-width: 640px) {
  #rem-pagination {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--bg, #0f0f1a);
    border-top: 1px solid var(--border);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    margin: 0 -0px;
  }
}

/* ── MOBILE V3.3 (13/09): reembolsos reconstruido con el marco estándar
   (content-list > card > table-wrap) — se neutralizan los parches previos ── */
@media (max-width: 640px) {
  #page-reembolsos { overflow-y: visible; }
  #rem-pagination {
    position: static;
    border-top: none;
    background: transparent;
    padding: 8px 10px !important;
  }
}

/* ── MOBILE V3.4 (13/09): selector "por página" en flujo (estaba absolute y
   flotaba sobre la grilla) + recuperar la altura del colchón en secciones
   con marco fijo — la grilla gana todo ese espacio ── */
@media (max-width: 640px) {
  /* Selector de cantidad: al final de la barra de paginación, margen derecho */
  .pag-size-wrap {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
    flex-shrink: 0;
  }
  .pag-spacer { display: none !important; }

  /* El colchón inferior de 64px es para páginas que scrollean enteras
     (dashboard, config) — en las secciones con marco fijo (content-list,
     donde scrollea la grilla por dentro) solo roba altura */
  .content.content-list { padding-bottom: 8px !important; }

  /* Reembolsos: densidad superior — la grilla gana el espacio */
  #page-reembolsos .filter-panel { padding: 4px 10px !important; }
  #page-reembolsos .btn-filtros { margin: 4px 10px !important; }
  #rem-total { padding: 2px 12px 4px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GESTIÓN DIARIA › WORKFLOW — el tablero (22/10)
   ══════════════════════════════════════════════════════════════════════════
   El relleno de la tarjeta es el mismo de todo el sistema (--bg-card): lo que
   identifica al tipo es el BORDE, fino y visible. Pintar la tarjeta entera
   convertiría el tablero en un semáforo y el color dejaría de decir algo.     */

#page-workflow .content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 16px;
  gap: 12px;
}
/* La fila de filtros no crece ni scrollea: el que scrollea es el tablero. El
   margen de abajo lo pone el `gap` del contenedor. */
#page-workflow .filters { flex-shrink: 0; margin-bottom: 0; }

/* ── La bandeja: lo que entró y todavía no tiene columna ─────────────────── */
.wf-bandeja {
  flex-shrink: 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  padding: 8px 10px;
}
.wf-bandeja-cab {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 7px;
}
.wf-bandeja-tarjetas {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  min-height: 44px; align-items: flex-start;
}
.wf-bandeja-tarjetas .wf-card { flex: 0 0 240px; }
.wf-bandeja.wf-vacia .wf-bandeja-tarjetas::after {
  content: 'Arrastrá acá una tarjeta para sacarla de su columna';
  font-size: 12px; color: var(--text-muted); padding: 10px 4px;
}

/* ── El tablero ──────────────────────────────────────────────────────────── */
.wf-board {
  flex: 1; min-height: 0;
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  align-items: flex-start;
}
.wf-col {
  flex: 0 0 276px;
  max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.wf-col-cab {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  /* La franja de color de la columna: 3 px arriba, sin teñir el fondo. */
  box-shadow: inset 0 3px 0 0 var(--wf-col-color, var(--border));
  cursor: grab;
}
.wf-col-cab:active { cursor: grabbing; }
.wf-col-nombre { font-size: 13px; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-col-cuenta { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wf-col-menu { opacity: .55; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.wf-col-menu:hover { opacity: 1; }
.wf-col-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
}
.wf-col-pie { flex-shrink: 0; padding: 0 8px 8px; }
.wf-col-final .wf-col-nombre::after {
  content: '✓'; font-size: 10px; color: var(--success); margin-left: 5px;
}

/* ── La tarjeta ──────────────────────────────────────────────────────────── */
.wf-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  /* El borde del tipo. 3 px a la izquierda y 1 px alrededor: se ve de reojo
     sin competir con el texto. */
  border-left: 3px solid var(--wf-card-color, var(--border));
  border-radius: 6px;
  padding: 9px 10px;
  cursor: grab;
  display: flex; flex-direction: column; gap: 6px;
  /* Tamaño estándar: todas las tarjetas miden lo mismo. Un título largo se
     corta en dos líneas en vez de estirar la tarjeta y romper la grilla. */
  min-height: 74px;
}
.wf-card:hover { border-color: var(--wf-card-color, var(--accent)); }
.wf-card:active { cursor: grabbing; }
.wf-card.wf-arrastrando { opacity: .4; }
/* ── La tarjeta en modo traslado, con el dedo (24/10) ──
 * Arrastrando con el mouse la tarjeta se transparenta y listo: el puntero ya
 * dice dónde está. Con el dedo, el dedo TAPA la tarjeta, así que tiene que
 * verse que está levantada y de cuál se trata: se opaca menos, se agranda un
 * poco y se despega con una sombra.
 * `touch-action: none` es lo que impide que el navegador se lleve el gesto
 * como scroll a mitad del traslado. */
.wf-card.wf-tocando {
  opacity: .9;
  transform-origin: center;
  scale: 1.04;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  position: relative;
  z-index: 50;
  touch-action: none;
  cursor: grabbing;
}
.wf-card-titulo {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-card-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: auto; }
.wf-chip {
  font-size: 10px; line-height: 1.6; padding: 0 6px; border-radius: 10px;
  background: var(--bg2); color: var(--text-muted); border: 1px solid var(--border);
  white-space: nowrap;
}
.wf-chip-tipo { border-color: var(--wf-card-color); color: var(--wf-card-color); }
.wf-chip-urgente { background: rgba(231,76,60,.15); color: var(--danger); border-color: var(--danger); }
.wf-chip-alta    { background: rgba(243,156,18,.15); color: var(--warning); border-color: var(--warning); }
.wf-chip-vencida { background: rgba(231,76,60,.15); color: var(--danger); border-color: var(--danger); font-weight: 600; }

/* La zona donde se va a soltar: tiene que verse ANTES de soltar, o el arrastre
   es a ciegas y la tarjeta termina en la columna de al lado. */
.wf-col.wf-drop .wf-col-cuerpo,
.wf-bandeja.wf-drop .wf-bandeja-tarjetas {
  outline: 2px dashed var(--accent); outline-offset: -3px; border-radius: 6px;
}

/* ── El teléfono: una columna abajo de la otra ───────────────────────────── */
@media (max-width: 860px) {
  .wf-board { flex-direction: column; overflow-x: hidden; overflow-y: auto; align-items: stretch; }
  .wf-col { flex: 0 0 auto; width: 100%; max-height: none; }
  .wf-col-cuerpo { max-height: 60vh; }
  .wf-bandeja-tarjetas .wf-card { flex: 0 0 200px; }
}

/* Una tarjeta resuelta no desaparece del tablero: queda atenuada y con su ✓.
   El tablero muestra lo que pasó, no solo lo que falta — y una recurrente
   resuelta tiene que poder verse esperando su próximo turno. */
.wf-card-resuelta { opacity: .55; }
.wf-card-resuelta .wf-card-titulo { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ── La ficha de la tarjeta: datos a la izquierda, lo que pasó a la derecha ── */
.wf-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .wf-ficha { grid-template-columns: 1fr; } }
.wf-ficha-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.wf-bloque { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; background: var(--bg2); }
.wf-bloque > h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.wf-nota { border-left: 2px solid var(--border); padding: 4px 0 4px 9px; margin-bottom: 9px; }
.wf-nota:last-child { margin-bottom: 0; }
.wf-nota-cab { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.wf-nota-txt { font-size: 13px; white-space: pre-line; line-height: 1.45; }
.wf-hilo { max-height: 260px; overflow-y: auto; }
.wf-integrante {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 2px 4px 2px 9px;
}
.wf-integrante button { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; }
.wf-integrante button:hover { color: var(--danger); }

/* ── "Hay una versión nueva" ── (clase propia, no `.aviso-*`: ésas son los
   bloques de alerta teñidos del tema, y esto es una tarjeta flotante) ───────────────────────────────────────────────
   Abajo a la derecha, por encima de todo menos del modal. No tapa el trabajo y
   no se va sola: lo viejo sigue siendo viejo hasta que se recarga. */
.version-nueva {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  max-width: 400px; padding: 11px 13px;
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
@media (max-width: 700px) {
  .version-nueva { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}