/* ============================================================
   TOKENS DE DISEÑO
   ============================================================ */
:root {
  --bg: #EEF0EE;
  --panel: #FFFFFF;
  --ink: #1B2A22;
  --muted: #6B776E;
  --border: #D8DED9;
  --primary: #2F6B4F;
  --primary-dark: #204A37;
  --primary-soft: #E4EEE8;
  --amber: #C97A2B;
  --amber-soft: #FBF0E2;
  --danger: #B3261E;
  --danger-soft: #FBEAE9;
  --blue: #2A78D6;
  --blue-soft: #E6EFFB;
  --violet: #4A3AA7;
  --violet-soft: #ECEAF8;
  --radius: 10px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.hidden { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
button { font-family: var(--font-body); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); }

/* ============================================================
   LOADING
   ============================================================ */
.loading-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  z-index: 100;
}
.tag-spinner {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   MOTIVO "ETIQUETA" (signature element)
   ============================================================ */
.tag-punch {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  margin: 0 auto 14px;
}
.tag-punch-sm { width: 14px; height: 14px; margin: 0; flex-shrink: 0; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--panel); color: var(--ink); }
.btn-ghost.danger { color: var(--danger); border-color: var(--danger-soft); }
.btn-ghost.danger:hover { background: var(--danger-soft); }
.btn-ghost.destacado { background: #FFD400; color: #1a1a1a; border-color: #E6BF00; }
.btn-ghost.destacado:hover { background: #FFDD33; color: #1a1a1a; }
.btn-icon {
  background: transparent; border: none; color: var(--muted);
  padding: 4px 8px; border-radius: 6px; font-size: 13px;
}
.btn-icon:hover { background: var(--bg); color: var(--ink); }
.btn-icon.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   LOGIN / REGISTRO
   ============================================================ */
.auth-view {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(27,42,34,0.04), 0 12px 32px rgba(27,42,34,0.06);
}
.auth-title { font-size: 22px; font-weight: 700; }
.auth-subtitle { color: var(--muted); font-size: 14px; margin: 6px 0 24px; }

.tabs-toggle {
  display: flex;
  background: var(--bg);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 22px;
}
.tabs-toggle-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.tabs-toggle-btn.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(27,42,34,0.08); }

.auth-form { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.btn-link {
  background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--primary-dark);
  text-decoration: underline; text-align: center; cursor: pointer;
}
.btn-link:hover { color: var(--primary); }
.auth-form label, .modal-card label, .toolbar label {
  font-size: 13px; font-weight: 600; color: var(--muted);
  display: flex; flex-direction: column; gap: 6px;
}
.form-label-suelto {
  display: block;
  font-size: 13px; font-weight: 600; color: var(--muted);
  margin-bottom: 6px;
}

.web-visible-toggle .toggle-activar.active { background: var(--primary); color: #fff; box-shadow: none; }
.web-visible-toggle .toggle-desactivar.active { background: var(--danger); color: #fff; box-shadow: none; }
.auth-form input, .modal-card input, .modal-card select, .modal-card textarea {
  font-size: 14px; font-weight: 500; color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; background: var(--panel);
}
.auth-form input:focus, .modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus,
.search-input:focus, .select-input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-hint { font-size: 12px; color: var(--muted); margin: -4px 0 0; line-height: 1.4; }
.form-error { font-size: 13px; color: var(--danger); margin: 0; min-height: 0; }
.form-error:empty { display: none; }

.combo-componentes-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 4px 0 -4px; }
#combo-componentes-lista, #cupon-productos-lista { display: flex; flex-direction: column; gap: 8px; }
.combo-componente-row { display: flex; gap: 8px; align-items: center; }
.combo-componente-row .combo-componente-input { flex: 1; min-width: 0; }
.combo-componente-row .combo-componente-cantidad { width: 70px; flex: none; }
.combo-add-btn { align-self: flex-start; }

.roles-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rol-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 1px 2px rgba(27,42,34,0.04);
}
.rol-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rol-card-nombre { font-size: 16px; font-weight: 700; color: var(--ink); }
.rol-card-sistema-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--primary-dark); background: var(--primary-soft); padding: 2px 8px; border-radius: 100px;
}
.rol-card-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; }
.rol-card-actions { display: flex; gap: 8px; flex: none; }

.rol-permisos-lista { display: flex; flex-direction: column; gap: 16px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.rol-permisos-modulo-titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.rol-permiso-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; color: var(--ink); }
.rol-permiso-item input { flex: none; }

.mfa-qr { display: flex; justify-content: center; margin: 12px 0; }
.mfa-qr svg { width: 180px; height: 180px; }
.mfa-secret { text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--muted); word-break: break-all; margin: 0 0 14px; }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.app-view { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}
.sidebar-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  padding: 0 8px 20px;
}
.sidebar-logo { width: 108px; height: auto; display: block; }

.logo-config-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo-config-preview {
  width: 88px; height: 88px; object-fit: contain; flex: none;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--panel);
}
.logo-config-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.logo-config-upload-btn { cursor: pointer; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; text-align: left;
  padding: 10px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--muted);
}
.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.nav-icon { width: 17px; height: 17px; flex: none; opacity: 0.75; }
.nav-badge {
  margin-left: auto; background: var(--danger); color: white; font-size: 11px; font-weight: 700;
  border-radius: 100px; padding: 1px 7px; line-height: 1.5;
}

.nav-group { display: flex; flex-direction: column; }
.nav-group-toggle { width: 100%; }
.nav-group-chevron { width: 14px; height: 14px; margin-left: auto; flex: none; transition: transform 150ms ease; }
.nav-group-toggle.expanded .nav-group-chevron { transform: rotate(90deg); }
.nav-group-toggle.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
.nav-submenu { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0 14px; }
.nav-subitem { padding-left: 22px; font-size: 13.5px; }
.nav-subitem .nav-icon { width: 15px; height: 15px; }

.sidebar-footer { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 10px; }
.lang-toggle {
  display: flex; background: var(--bg); border-radius: 8px; padding: 3px; margin: 0 8px 12px;
}
.lang-toggle-btn {
  flex: 1; border: none; background: transparent; padding: 6px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.03em;
}
.lang-toggle-btn.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(27,42,34,0.08); }
.user-chip { padding: 4px 8px 12px; }
.user-chip-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-role {
  display: inline-block; margin-top: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--primary-dark); background: var(--primary-soft);
  padding: 2px 8px; border-radius: 100px;
}

/* min-width: 0 es la parte importante acá, no solo "flex: 1": sin
   esto, un ítem flex nunca se encoge más allá del ancho mínimo de su
   contenido (default min-width: auto). Con una tabla ancha adentro,
   .main-content terminaba empujando todo el layout más allá del
   ancho de la ventana — y como el body tiene overflow-x: hidden, ese
   excedente quedaba cortado sin ninguna barra de scroll alcanzable
   (bug real detectado el 5/9/2026: la columna Acciones de Órdenes
   desaparecía sin forma de llegar a ella). Con min-width: 0, .main-
   content se achica correctamente al espacio disponible y son las
   tablas (.table-wrap, con su propio overflow-x: auto) las que
   scrollean, con una barra de scroll real y alcanzable. */
.main-content { flex: 1; min-width: 0; padding: 32px 40px; max-width: 1600px; }
.view-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 22px; gap: 12px; flex-wrap: wrap;
}
.view-header h2 { font-size: 24px; }
.view-subtitle { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

/* Tarjetas resumen clickeables (Inventario, Publicaciones ML, etc.):
   número grande arriba, etiqueta chica abajo, todo centrado. */
.stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; margin-bottom: 8px; }
.stat-card {
  /* El ancho lo pone el contenido, con 160px de piso.
     Historia de este arreglo, porque ya fallo dos veces: cualquier
     "min-width" en pixeles ANULA el minimo automatico (min-width:auto)
     que impide que una caja flex se encoja por debajo de su contenido.
     Con "flex: 0 1 auto" la tarjeta segui­a pudiendo encogerse hasta ese
     piso, asi que un monto mas ancho que el piso se desbordaba igual
     (paso con "$1.358.270", que en la mono de 28px mide ~168px contra
     los 160px de piso). La correccion real es no dejar que encoja:
     flex-shrink 0. Como la fila tiene flex-wrap, si no entran pasan a
     la linea siguiente en vez de apretarse. */
  flex: 0 0 auto; min-width: 160px; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 14px; cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.stat-card:hover { box-shadow: 0 3px 10px rgba(27,42,34,0.10); transform: translateY(-1px); }
.stat-card.active { box-shadow: 0 0 0 2px var(--ink) inset; }
.stat-card-value { font-family: var(--font-mono); font-weight: 700; font-size: 28px; line-height: 1.2; white-space: nowrap; }
.stat-card-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stat-card-value.azul { color: var(--blue); }
.stat-card-value.verde { color: var(--primary-dark); }
.stat-card-value.ambar { color: var(--amber); }
.stat-card-value.rojo { color: var(--danger); }
.stat-card-value.violeta { color: var(--violet); }

/* ============================================================
   TOOLBAR / FILTROS
   ============================================================ */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.search-input, .select-input {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; background: var(--panel); color: var(--ink);
}
.search-input { flex: 1; min-width: 200px; }
.search-input-wrap { position: relative; flex: 1; min-width: 200px; }
.search-input-wrap .search-input { width: 100%; min-width: 0; padding-right: 30px; }
.search-input-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; display: none; align-items: center; justify-content: center;
}
.search-input-clear:hover { background: var(--border); color: var(--ink); }
.search-input:not(:placeholder-shown) ~ .search-input-clear { display: flex; }
.checkbox-toggle {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); font-weight: 500;
  white-space: nowrap;
}

/* ============================================================
   TABLA
   ============================================================ */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/* En mouse, el propio scrollbar del navegador ya avisa que la tabla
   sigue hacia la derecha (columnas como "Acciones" con los botones de
   Editar). En pantallas táctiles ese scrollbar no se ve, así que se
   deja un degradado en el borde derecho como pista de que hay más
   para deslizar.

   CORREGIDO 06/10/2026 (reportado por Jhosinger: en Administración
   Web > Órdenes se veía una franja opaca tapando el nombre del
   producto). El degradado quedaba fijo al borde del contenedor SIEMPRE
   visible, sin importar si de verdad faltaba algo por scrollear — y
   terminaba en un color sólido, no una transparencia parcial, así que
   donde cayera tapaba contenido real en vez de solo insinuar que hay
   más. Ahora arranca invisible (opacity 0) y una clase que pone JS
   según la posición real de scroll de cada tabla (ver
   actualizarPistasScrollTablas en app.js) la muestra solo mientras
   falte contenido por deslizar. */
@media (hover: none) {
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--panel));
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .table-wrap.table-wrap-mas-scroll::after {
    opacity: 1;
  }
}
/* Grilla de campos de solo lectura (ej: modal "Ver orden"): cada dato
   en su propia caja con etiqueta arriba, para que no se lea como un
   párrafo corrido. */
.detalle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.detalle-campo { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.detalle-campo-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.detalle-campo-valor { font-size: 14.5px; color: var(--ink); word-break: break-word; line-height: 1.4; }
.detalle-campo-valor a { color: inherit; }
.detalle-campo.destacado { background: var(--primary-soft); border-color: var(--primary); }
.detalle-campo.ancho { grid-column: 1 / -1; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.data-table td {
  padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #FAFBFA; }
.data-table tbody tr.low-stock { box-shadow: inset 3px 0 0 var(--amber); }
.data-table tbody tr.low-stock td:first-child { position: relative; }
.data-table tbody tr.no-stock { box-shadow: inset 3px 0 0 var(--danger); }
.data-table tbody tr.no-stock td:first-child { position: relative; }
.data-table tbody tr.sin-publicar { box-shadow: inset 3px 0 0 var(--violet); background: var(--violet-soft); }

.meli-categoria-opciones {
  border: 1px solid var(--border); border-radius: 8px; margin: -8px 0 0;
  max-height: 170px; overflow-y: auto; background: var(--panel);
}
.meli-categoria-opcion {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  border: none; border-bottom: 1px solid var(--border); background: transparent;
  font-size: 13px; color: var(--ink); cursor: pointer;
}
.meli-categoria-opcion:last-child { border-bottom: none; }
.meli-categoria-opcion:hover { background: var(--bg); }

.meli-categoria-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg); font-size: 12px; }
.meli-categoria-breadcrumb span { color: var(--muted); }
.meli-categoria-miga { border: none; background: none; cursor: pointer; color: var(--violet); font-size: 12px; padding: 2px 4px; text-decoration: underline; }
.meli-categoria-miga:last-child { color: var(--ink); text-decoration: none; font-weight: 600; cursor: default; }

.meli-pub-bulk-toolbar { align-items: center; gap: 10px; background: var(--violet-soft); border-radius: 8px; padding: 8px 12px; }
.meli-pub-precio-edit { display: flex; align-items: center; gap: 6px; }
.meli-pub-precio-edit input[type="number"] { padding: 4px 6px; }

.sort-btn {
  border: none; background: none; cursor: pointer;
  font-size: 12px; color: var(--muted); padding: 2px 4px;
  border-radius: 4px; vertical-align: middle;
}
.sort-btn:hover { background: var(--border); }
.sort-btn.active { color: var(--ink); font-weight: 700; }

.sku-pill {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 6px; letter-spacing: 0.02em;
}
.location-tag { font-size: 12px; color: var(--muted); }
.venta-categoria {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted); margin-bottom: 2px;
}
/* La columna Producto tiende a quedar apretada (nombres largos
   envuelven en 2-3 líneas) mientras el resto de la tabla no ocupa
   todo el ancho disponible del panel: se le da un mínimo generoso
   para que respire. */
#ventas-tab-ventas .data-table th:nth-child(3),
#ventas-tab-ventas .data-table td:nth-child(3) {
  min-width: 260px;
}

/* Órdenes (Administración Web): la columna Producto no tenía ningún
   límite de ancho, así que un nombre largo la hacía envolver en 5-7
   líneas (auto-layout achicaba la columna al mínimo para dejarle
   lugar a las demás) — cada fila quedaba altísima y el resto de las
   columnas (Total, Estado, Fecha, Acciones) terminaba fuera de la
   pantalla, alcanzable solo bajando hasta el final de la tabla para
   llegar a la barra de scroll horizontal. Se limita el nombre a 2
   líneas con "…" (el título completo queda en el atributo title, y
   de todas formas el botón "Detalle" abre el pedido entero).
   Acciones sigue siendo sticky para no perderla de vista. */
.orden-numero { font-size: 12.5px; letter-spacing: -0.01em; }
#sub-ordenes .data-table td:nth-child(2) { white-space: nowrap; } /* Fecha */
#sub-ordenes .data-table td:nth-child(3) { max-width: 260px; } /* Producto */
.orden-producto-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.qty-value { font-weight: 700; font-family: var(--font-mono); }

.table-inventario th:nth-child(4), .table-inventario td:nth-child(4),
.table-inventario th:nth-child(5), .table-inventario td:nth-child(5),
.table-inventario th:nth-child(6), .table-inventario td:nth-child(6) {
  padding-left: 10px; padding-right: 10px;
}
.table-inventario th:nth-child(7), .table-inventario td:nth-child(7) {
  text-align: center; padding-left: 10px; padding-right: 10px;
}
.table-inventario th:last-child, .table-inventario td:last-child { width: 1%; white-space: nowrap; }
.btn-icon-only { padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon-only svg { width: 15px; height: 15px; }
.col-actions { width: 1%; white-space: nowrap; }
/* En tablas anchas que necesitan scroll horizontal, la columna de
   acciones queda "pegada" al borde derecho para no tener que
   deslizar hasta el final para encontrarla, sin importar cuántas
   columnas haya antes (o se agreguen después). */
.col-actions-sticky {
  position: sticky;
  right: 0;
  background: var(--panel);
  box-shadow: -8px 0 8px -8px rgba(27, 42, 34, 0.18);
}
.data-table thead th.col-actions-sticky { background: var(--bg); }
.data-table tbody tr:hover td.col-actions-sticky { background: #FAFBFA; }
/* En pantallas angostas la columna de acciones NO va pegada: con tres
   botones ("Detalle · En camino · Entregado") ocupa casi todo el ancho
   del celular y tapaba el resto de la fila; lo de la izquierda quedaba
   ilegible (30/09/2026, lo reportó Jhosinger desde el iPhone en
   Órdenes). Se desplaza junto con la tabla, como cualquier columna. */
@media (max-width: 800px) {
  .col-actions-sticky { position: static; box-shadow: none; }
}
.multi-ubicacion-badge {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  color: var(--primary-dark); background: var(--primary-soft); padding: 1px 6px; border-radius: 100px;
}
.combo-badge {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  color: var(--violet); background: var(--violet-soft); padding: 1px 6px; border-radius: 100px;
}
.transferir-desglose {
  display: flex; flex-direction: column; gap: 6px; background: var(--bg);
  border-radius: 8px; padding: 10px 12px; margin: -6px 0 14px; font-size: 13px;
}
.transferir-desglose-row { display: flex; justify-content: space-between; gap: 10px; color: var(--ink); }
.transferir-desglose-row span:last-child { font-family: var(--font-mono); font-weight: 600; }
.transferir-desglose-row.clickable { cursor: pointer; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; }
.transferir-desglose-row.clickable:hover { background: var(--primary-soft); }

.venta-devuelta { opacity: 0.6; }
.venta-devuelta td { text-decoration: line-through; text-decoration-color: var(--muted); }
.venta-devuelta td.col-actions { text-decoration: none; }
.devuelta-badge {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--danger); background: var(--danger-soft);
  padding: 2px 6px; border-radius: 100px; letter-spacing: 0.03em;
  text-decoration: none;
}
.anulada-badge {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); background: var(--bg);
  padding: 2px 6px; border-radius: 100px; letter-spacing: 0.03em;
  text-decoration: none;
}
.pendiente-cobro-badge {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--amber); background: var(--amber-soft);
  padding: 2px 6px; border-radius: 100px; letter-spacing: 0.03em;
  text-decoration: none;
}
.canal-venta-badge {
  display: inline-block; white-space: nowrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 100px; letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.originalmente-point-badge {
  display: block; white-space: nowrap; margin-top: 4px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 1px 7px; border-radius: 100px; letter-spacing: 0.03em;
  color: #0ea5a4; background: #0ea5a422; border: 1px solid #0ea5a455;
  width: fit-content;
}
.anular-venta-toggle .toggle-anulada.active { background: var(--muted); color: #fff; box-shadow: none; }
.anular-venta-toggle .toggle-devuelta.active { background: var(--danger); color: #fff; box-shadow: none; }
.estado-pill.devolucion-procesada { color: var(--primary-dark); background: var(--primary-soft); }
.estado-pill.devolucion-sin_coincidencia { color: var(--danger); background: var(--danger-soft); }
.estado-pill.devolucion-pendiente { color: var(--amber); background: var(--amber-soft); }
.estado-pill.devolucion-pendiente_validacion { color: var(--amber); background: var(--amber-soft); }
.estado-pill.devolucion-rechazada { color: var(--danger); background: var(--danger-soft); }
.estado-pill.devolucion-no_aplica { color: var(--muted); background: var(--bg); }

.notificaciones-lista { display: flex; flex-direction: column; gap: 10px; }
.notificacion-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start;
  box-shadow: 0 1px 2px rgba(27,42,34,0.04);
}
.notificacion-card.no-leida { border-left: 3px solid var(--amber); }
.notificacion-icon {
  width: 34px; height: 34px; flex: none; border-radius: 100px;
  background: var(--amber-soft); color: var(--amber);
  display: flex; align-items: center; justify-content: center;
}
.notificacion-icon svg { width: 17px; height: 17px; }
.notificacion-body { flex: 1; min-width: 0; }
.notificacion-title { font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.notificacion-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.notificacion-mensaje { font-size: 13px; color: var(--muted); margin: 4px 0 8px; line-height: 1.5; }
.notificacion-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.notificacion-acciones { display: flex; flex-direction: column; gap: 6px; flex: none; }
.qty-value.low { color: var(--amber); }
.qty-value.no-stock { color: var(--danger); }
.low-badge {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--amber); background: var(--amber-soft);
  padding: 2px 6px; border-radius: 100px; letter-spacing: 0.03em;
}
.no-stock-badge {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--danger); background: var(--danger-soft);
  padding: 2px 6px; border-radius: 100px; letter-spacing: 0.03em;
}
.en-camino-badge {
  display: block; margin-top: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--blue); background: var(--blue-soft);
  padding: 2px 7px; border-radius: 100px; letter-spacing: 0.01em;
  width: fit-content; cursor: default;
}
.en-camino-badge.atrasado { color: var(--danger); background: var(--danger-soft); }
.row-actions { display: flex; gap: 2px; }
.empty-state { text-align: center; color: var(--muted); font-size: 14px; padding: 32px; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(27,42,34,0.35);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-card {
  position: relative;
  background: var(--panel); border-radius: 14px; padding: 26px;
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; overflow-x: hidden;
}
.modal-card h3 { font-size: 18px; margin-bottom: 18px; padding-right: 30px; }
.modal-close-x {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 17px; line-height: 1;
}
.modal-close-x:hover { background: var(--bg); color: var(--ink); }
.modal-card form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; gap: 12px; }
.form-row > label { flex: 1; min-width: 0; }
.modal-card select { max-width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* ============================================================
   BUSCADOR DE PRODUCTO (categoría + texto, con lista propia)
   Reemplaza el <datalist> nativo: se arma con JS, filtra en vivo y
   se puede acotar primero por categoría — ver crearBuscadorProducto()
   en app.js.
   ============================================================ */
.buscador-producto-fila { display: flex; gap: 8px; }
.buscador-producto-fila select { flex: 0 0 40%; min-width: 0; }
.buscador-producto-fila input { flex: 1; min-width: 0; }
.buscador-producto-dropdown {
  position: fixed; z-index: 500;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(27,42,34,0.18);
  max-height: 280px; overflow-y: auto;
}
.buscador-producto-opcion {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; font-size: 13.5px;
}
.buscador-producto-opcion:hover, .buscador-producto-opcion.activo { background: var(--primary-soft); }
.buscador-producto-opcion .buscador-producto-sku {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 6px; white-space: nowrap; flex: none;
}
.buscador-producto-opcion .buscador-producto-nombre { color: var(--ink); }
.buscador-producto-vacio { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }
@media (max-width: 640px) {
  .buscador-producto-fila { flex-direction: column; }
  .buscador-producto-fila select { flex: none; }
}

.venta-linea {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; margin-bottom: 10px; background: var(--bg);
}
.venta-linea-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.venta-linea-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.venta-linea-quitar { flex: none; }

/* ============================================================
   SELECT DE ROL (usuarios)
   ============================================================ */
.role-select {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--panel);
}

/* ============================================================
   IMPORTAR DESDE EXCEL
   ============================================================ */
.header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-card-wide { max-width: 480px; }
.modal-card-xl { max-width: 640px; }
.modal-card-2xl { max-width: 1040px; }

.ventas-pendientes-table-wrap .data-table th,
.ventas-pendientes-table-wrap .data-table td { padding: 8px 12px; font-size: 12.5px; }

/* ============================================================
   PRODUCTOS Y PROVEEDORES
   ============================================================ */
.pp-proveedor-row {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; position: relative;
}
.pp-proveedor-row .form-row { gap: 10px; }
.pp-row-remove { position: absolute; top: 10px; right: 10px; }
.pp-row-remove:disabled { opacity: 0.3; cursor: not-allowed; }
.pp-proveedores-count { font-weight: 600; }
.pp-row-principal-toggle {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.pp-row-principal-toggle input { accent-color: var(--primary); width: 15px; height: 15px; }
.pp-row-principal-toggle.checked { color: var(--primary-dark); }
.pp-principal-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--primary-dark); background: var(--primary-soft);
  padding: 2px 8px; border-radius: 100px;
}
.import-summary {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: var(--bg); border-radius: 10px; padding: 14px;
  margin-bottom: 14px; font-size: 13px;
}
.import-summary strong { display: block; font-size: 20px; font-family: var(--font-mono); }
.import-summary-item { flex: 1; min-width: 90px; }
.import-summary-item.warn strong { color: var(--amber); }
.import-errors-list {
  max-height: 140px; overflow-y: auto; font-size: 12px; color: var(--muted);
  background: var(--danger-soft); border-radius: 8px; padding: 10px 14px;
  margin-bottom: 14px; line-height: 1.6;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: white; font-size: 13px; font-weight: 500;
  padding: 12px 20px; border-radius: 100px; z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.toast.error { background: var(--danger); }

/* ============================================================
   CAJA (dashboard de resumen de recaudación)
   ============================================================ */
.caja-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(27,42,34,0.04);
}
.caja-header-left { display: flex; align-items: flex-start; gap: 14px; }
.caja-header-icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.caja-header-icon svg { width: 20px; height: 20px; }
.caja-header h2 { font-size: 26px; }
.caja-header-right { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.caja-clear-btn { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.caja-clear-btn svg { width: 14px; height: 14px; }

.caja-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px;
}
.caja-kpi {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 1px 2px rgba(27,42,34,0.04);
}
.caja-kpi-accent { border-left: 3px solid var(--primary); }
.caja-kpi-icon {
  width: 34px; height: 34px; border-radius: 100px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
}
.caja-kpi-icon svg { width: 18px; height: 18px; }
.caja-kpi-icon-green { background: var(--primary-soft); color: var(--primary); }
.caja-kpi-icon-blue { background: var(--blue-soft); color: var(--blue); }
.caja-kpi-icon-violet { background: var(--violet-soft); color: var(--violet); }
.caja-kpi-icon-red { background: var(--danger-soft); color: var(--danger); }
.caja-kpi-icon-amber { background: var(--amber-soft); color: var(--amber); }
.caja-kpis-2 { grid-template-columns: repeat(2, 1fr); }
/* "Ventas de hoy por origen" (dashboard): un renglón por canal con su
   chip, el monto y el porcentaje del día, y una barra proporcional. */
.dash-origen-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.dash-origen-fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.dash-origen-fila .canal-chip { font-size: 11.5px; }
.dash-origen-barra { height: 6px; border-radius: 999px; background: var(--primary-soft); overflow: hidden; }
.dash-origen-barra span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.dash-origen-monto { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.dash-origen-pct { color: var(--muted); font-size: 12px; margin-left: 6px; }
.dash-origen-vacio { color: var(--muted); font-size: 13px; }
.caja-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.caja-kpi-clickable { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.caja-kpi-clickable:hover { box-shadow: 0 2px 8px rgba(27,42,34,0.08); border-color: var(--amber); }
.caja-kpi-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.caja-kpi-value {
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(20px, 4.5cqw, 32px); color: var(--ink);
  margin: 6px 0 4px;
}
.caja-kpi { container-type: inline-size; }
.caja-kpi-sub { font-size: 13px; color: var(--muted); }
/* Referencia rápida del día anterior, debajo del dato del día en
   curso: fuente más chica que .caja-kpi-sub para que no compita con
   el número de hoy, solo un punto de comparación al pasar. */
.caja-kpi-comparativo { font-size: 11px; color: var(--muted); margin-top: 4px; opacity: .8; }

.caja-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(27,42,34,0.04);
}
.caja-card-title { font-size: 20px; font-weight: 700; }
.caja-card-subtitle { font-size: 13px; color: var(--muted); margin: 4px 0 20px; }
.caja-card-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.caja-card-header-row .select-input { flex: none; min-width: 200px; }

.dash-meta-card { margin-bottom: 20px; }
.dash-meta-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dash-meta-header .caja-card-subtitle { margin-bottom: 0; }
.dash-meta-sin-definir { text-align: center; padding: 20px 0; color: var(--muted); }
.dash-meta-sin-definir p { margin: 0 0 12px; }
.dash-meta-bar-wrap { margin: 16px 0; }
.dash-meta-bar { position: relative; height: 10px; border-radius: 100px; background: var(--bg); overflow: hidden; }
/* Marca hasta donde deberia llegar la barra segun los dias que van del mes. */
.dash-meta-bar-marca { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0.45; }
.dash-meta-bar-fill { height: 100%; border-radius: 100px; background: var(--primary); transition: width 250ms ease; }
.dash-meta-bar-fill.ambar { background: var(--amber); }
.dash-meta-bar-fill.rojo { background: var(--danger); }
.dash-meta-bar-labels { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.dash-meta-bar-labels #dash-meta-acumulado { color: var(--ink); font-weight: 700; font-size: 15px; }
.dash-meta-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); column-gap: 32px; row-gap: 18px; }
.dash-meta-stat-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.dash-meta-stat-value { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 19px; line-height: 1.25; margin-top: 4px; color: var(--ink); }
.dash-meta-stat-value.verde { color: var(--primary-dark); }
.dash-meta-stat-value.ambar { color: var(--amber); }
.dash-meta-stat-value.rojo { color: var(--danger); }
.dash-meta-stat-sub { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.dash-meta-alerta { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13px; font-weight: 600; }

.caja-metodos-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; }
.caja-metodos-list { display: flex; flex-direction: column; gap: 16px; }
.caja-metodo-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.caja-metodo-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.caja-metodo-nombre { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.caja-metodo-monto { margin-left: auto; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.caja-metodo-pct { font-size: 13px; color: var(--muted); min-width: 52px; text-align: right; }
.caja-bar-track { height: 8px; border-radius: 100px; background: var(--bg); overflow: hidden; }
.caja-bar-fill { height: 100%; border-radius: 100px; transition: width 200ms ease; }
.caja-metodo-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 14px; }
.caja-metodo-total .caja-metodo-nombre { font-weight: 700; }

.caja-donut-panel { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.caja-donut-wrap { position: relative; width: 160px; height: 160px; }
.caja-donut-wrap svg { width: 100%; height: 100%; }
.caja-donut-wrap svg circle { transition: stroke-dasharray 250ms ease; }
.caja-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.caja-donut-center-label { font-size: 12px; color: var(--muted); }
.caja-donut-center-value { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--ink); }
.caja-donut-legend { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.caja-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }

.caja-conciliacion {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--primary-soft); border-radius: 12px; padding: 18px 20px; margin-top: 24px;
}
.caja-conciliacion.caja-conciliacion-error { background: var(--danger-soft); }
.caja-conciliacion-icon {
  width: 26px; height: 26px; flex: none; border-radius: 50%; color: white;
  background: var(--primary); display: flex; align-items: center; justify-content: center;
}
.caja-conciliacion-icon svg { width: 15px; height: 15px; }
.caja-conciliacion-error .caja-conciliacion-icon { background: var(--danger); }
.caja-conciliacion-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.caja-conciliacion-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 8px; }
.caja-conciliacion-formula { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }

.caja-canales-header, .caja-canal-row {
  display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1.6fr; gap: 16px; align-items: center;
}
.caja-canales-header {
  font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: var(--muted);
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.caja-canal-row { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.caja-canal-row:last-of-type { border-bottom: none; }
.caja-canal-row span:nth-child(2), .caja-canal-row span:nth-child(3) { font-family: var(--font-mono); }
.caja-canal-total { border-top: 1px solid var(--border); border-bottom: none; font-weight: 700; margin-top: 4px; }
.caja-saldo-valor { font-weight: 700; }
.caja-saldo-valor-total { font-size: 15px; }

.caja-footnote {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 4px;
}
.caja-footnote svg { width: 14px; height: 14px; flex: none; }
.caja-empty-hint { font-size: 13px; color: var(--muted); text-align: center; padding: 20px 0; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.dash-kpis-2 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.dash-kpi-clickable { cursor: pointer; transition: box-shadow 150ms ease, transform 150ms ease; }
.dash-kpi-clickable:hover { box-shadow: 0 3px 10px rgba(27,42,34,0.10); transform: translateY(-1px); }
.dash-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; }
.dash-chart-wrap { position: relative; height: 260px; }
.dash-chart-wrap-sm { height: 220px; max-width: 320px; margin: 0 auto; }

/* ============================================================
   REPORTES
   ============================================================ */
.reportes-tabs {
  display: flex; flex-wrap: wrap; gap: 20px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 20px; margin-bottom: 16px;
}
.reportes-tabs-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reportes-tabs-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin-right: 4px;
}
.reportes-tab {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 100px;
}
.reportes-tab:hover { background: var(--bg); color: var(--ink); }
.reportes-tab.active { background: var(--primary-soft); color: var(--primary-dark); }

.reporte-fecha { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.reportes-export { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.reportes-export-label { font-size: 13px; color: var(--muted); font-weight: 500; }

.reporte-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.reporte-kpi {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 1px 2px rgba(27,42,34,0.04);
}
.reporte-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.reporte-kpi-value { font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--ink); margin-top: 6px; }
/* Referencia del mes en curso debajo del total histórico/filtrado:
   mismo criterio que .caja-kpi-comparativo del Dashboard (fuente
   chica, apagada), para no competir con el número grande de arriba. */
.reporte-kpi-comparativo { font-size: 11px; color: var(--muted); margin-top: 4px; opacity: .8; }

/* ============================================================
   ASISTENTE
   ============================================================ */
.asistente-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.asistente-chip {
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 100px; text-align: left;
}
.asistente-chip:hover { background: var(--bg); color: var(--ink); }

.asistente-form { display: flex; gap: 10px; margin-bottom: 20px; }
.asistente-form .search-input { flex: 1; }

.asistente-historial { display: flex; flex-direction: column; gap: 16px; }
.asistente-entry {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 1px 2px rgba(27,42,34,0.04);
}
.asistente-pregunta { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.asistente-respuesta { font-size: 14px; color: var(--ink); line-height: 1.6; white-space: pre-line; }
.asistente-mini-table-wrap { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; overflow-x: auto; }
.asistente-mini-table-wrap .data-table th, .asistente-mini-table-wrap .data-table td { padding: 9px 14px; font-size: 13px; }

/* ============================================================
   INTEGRACIONES
   ============================================================ */
.integraciones-intro { margin-bottom: 18px; max-width: 720px; }
.integraciones-subheader { margin: 32px 0 16px; }
.integraciones-subheader h3 { font-size: 18px; }
.checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-top: -6px; }

.estado-pill {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 3px 9px; border-radius: 100px;
}
.estado-pill.activa { color: var(--primary-dark); background: var(--primary-soft); }
.estado-pill.configurando { color: var(--amber); background: var(--amber-soft); }
.estado-pill.inactiva { color: var(--muted); background: var(--bg); }
.estado-pill.error { color: var(--danger); background: var(--danger-soft); }
.estado-pill.esperando { color: var(--amber); background: var(--amber-soft); }
.estado-pill.avisado { color: var(--blue); background: var(--blue-soft); }
.estado-pill.completado { color: var(--primary-dark); background: var(--primary-soft); }

.apikey-display {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin: 14px 0;
}
.apikey-display code {
  flex: 1; font-family: var(--font-mono); font-size: 13px; word-break: break-all;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 800px) {
  .app-view { flex-direction: column; }
  .sidebar {
    width: 100%; flex-direction: row; align-items: center;
    padding: 12px 16px; gap: 16px; overflow-x: auto;
  }
  .nav-group { position: relative; }
  .nav-submenu {
    position: fixed; z-index: 60; flex-direction: column;
    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 6px; margin: 0; box-shadow: 0 4px 12px rgba(27,42,34,0.12);
    min-width: 170px; white-space: nowrap;
  }
  .sidebar-brand { padding: 0; flex-direction: row; align-items: center; gap: 8px; }
  .sidebar-logo { width: 28px; }
  .sidebar-nav { flex-direction: row; flex: none; }
  .sidebar-footer { border-top: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
  .user-chip { padding: 0; }
  .main-content { padding: 20px; }
  .data-table { font-size: 13px; }

  .caja-header { flex-direction: column; }
  .caja-header-right { width: 100%; align-items: stretch; }
  .caja-header-right label { flex: 1; }
  .dash-rango-chips-wrap { width: 100%; }
  .caja-kpis { grid-template-columns: 1fr; }
  .caja-metodos-grid { grid-template-columns: 1fr; }
  .caja-canales-header { display: none; }
  .caja-canal-row {
    grid-template-columns: 1fr; gap: 4px; padding: 14px 0;
  }
  .caja-canal-row .caja-bar-track { margin-top: 4px; }

  .reportes-tabs { padding: 14px; }
  .reportes-export { margin-left: 0; width: 100%; }

  .asistente-form { flex-direction: column; }
}

/* ============================================================
   ADMINISTRACIÓN WEB
   ============================================================ */
.admin-web-panel.hidden { display: none; }

/* Inputs que se editan directo en la celda de la tabla: se ven como
   texto hasta que el cursor entra, para que la tabla siga leyéndose
   como tabla y no como un formulario gigante. */
.celda-input {
  width: 100%; min-width: 90px;
  border: 1px solid transparent; border-radius: 6px;
  padding: 5px 7px; font-size: 13px; font-family: inherit;
  background: transparent; color: var(--ink);
}
.celda-input.corta { width: 90px; min-width: 0; }
.celda-input:hover { border-color: var(--border); }
.celda-input:focus { border-color: var(--primary); background: var(--panel); outline: none; }

/* En pantallas táctiles no existe el estado ":hover", así que el
   campo quedaría siempre con borde transparente y nadie notaría que
   se puede tocar y escribir. Ahí se le deja un borde tenue fijo. */
@media (hover: none) {
  .celda-input { border-color: var(--border); }
}

.regiones-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .regiones-layout { grid-template-columns: 1fr; } }

.regiones-layout > aside {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.comunas-lista { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.comuna-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) 84px 26px;
  gap: 6px; align-items: center;
  padding: 4px 2px; border-bottom: 1px solid var(--border);
}
.comuna-fila .celda-input.corta { width: 100%; }
.comuna-fila .btn-icon { padding: 2px; justify-content: center; }
.comuna-fila:last-child { border-bottom: none; }
.comuna-fila.inactiva .comuna-nombre { color: var(--muted); text-decoration: line-through; }
.comuna-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.form-check-list { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
/* Gana en especificidad a `.modal-card label`, que apila en columna:
   acá la casilla tiene que quedar al lado del texto, no encima. */
.modal-card label.form-check {
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  margin-bottom: 0;
  font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.4;
}
.modal-card label.form-check input { margin-top: 2px; width: auto; flex: none; }

/* La tabla de regiones convive con el panel de comunas: sin apretar
   las celdas, la columna de acciones queda fuera del recuadro. */
#sub-regiones .data-table th, #sub-regiones .data-table td { padding-left: 10px; padding-right: 10px; }
#sub-regiones .celda-input { min-width: 0; }
#sub-regiones .celda-input.corta { width: 76px; }

/* ============================================================
   PLANTILLAS DE CORREO
   ============================================================ */
.plantilla-correo-textarea { font-family: var(--font-mono, monospace); font-size: 12.5px; resize: vertical; }
.plantilla-correo-preview {
  margin-top: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-alt, #fafafa); font-size: 13px; max-height: 260px; overflow: auto;
}

/* ============================================================
   EXPORTAR PLANILLA FLEX (Flex + pedidos web + envíos externos)
   Ventana que se abre desde Ventas > "Exportar Planilla Flex".
   09/09/2026.
   ============================================================ */
.pf-seccion-titulo { font-weight: 700; font-size: 14px; margin: 16px 0 6px; display: flex; align-items: center; gap: 8px; }
.pf-seccion-titulo small { font-weight: 500; color: var(--muted); }
.pf-fuentes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0; }
@media (max-width: 760px) { .pf-fuentes { grid-template-columns: 1fr; } }
.pf-fuente { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pf-fuente-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-fuente-nombre { font-weight: 600; font-size: 13.5px; }
.pf-fuente-num { font-family: var(--font-mono); font-weight: 700; font-size: 24px; line-height: 1; }
.pf-fuente-det { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pf-fuente .pf-sw { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; cursor: pointer; margin-top: 2px; }
.pf-fuente .pf-sw input { width: auto; margin: 0; }
.pf-pegar { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .pf-pegar { grid-template-columns: 1fr; } }
.pf-pegar textarea { width: 100%; min-height: 200px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.45; }
.pf-tabla { max-height: 260px; overflow: auto; }
.pf-tabla .data-table td, .pf-tabla .data-table th { font-size: 12.5px; white-space: nowrap; }
.pf-tabla .data-table td.wrap { white-space: normal; max-width: 260px; }
.pf-ok { color: var(--success, #1a7f4b); font-weight: 600; }
.pf-warn { color: var(--danger); font-weight: 600; }
.pf-vacio { color: var(--muted); text-align: center; }
/* Monto asegurado de un envio que va sin seguro: se escribe
   "sin asegurar" en vez de un monto (ver SEGURO_POR_CATEGORIA en
   meli-planilla-seguro), y se muestra apagado para que se
   distinga de un monto a simple vista. */
.pf-sin-seguro { color: var(--muted); font-style: italic; }
.pf-tabla .pf-check { width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; }
.pf-fila-off td:not(:first-child) { opacity: .45; text-decoration: line-through; }
.pf-origen { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); white-space: nowrap; }
.pf-origen.flex { background: #fff3cd; border-color: #f0d37a; color: #7a5b00; }
.pf-origen.web { background: #e3f2fd; border-color: #9ec9f0; color: #075fa8; }
.pf-origen.ext { background: #ede7f6; border-color: #c5b5e6; color: #4a2c8a; }
.pf-resumen-final { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pf-resumen-final .form-hint { margin: 0; }
.pf-correo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; min-width: 260px; }
.pf-correo input { font-weight: 400; }
/* Resultado del envío/descarga de la planilla, al lado de los botones
   (queda fijo hasta cerrar la ventana). */
.pf-resultado { margin-top: 12px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.pf-resultado.ok { background: #e5f6ec; border: 1px solid #9bd7b3; color: #1a7f4b; }
.pf-resultado.error { background: #fdecea; border: 1px solid #f5c2bd; color: #a5342a; }

/* ============================================================
   MERCANCÍA EN CAMINO: filtro por fecha, selección en grupo y
   reparto del stock que llega (11/09/2026, a pedido de Jhosinger).
   ============================================================ */

/* Filtro por fecha. Van las dos formas juntas: los botones con las
   fechas que existen de verdad (para el uso diario) y el rango
   desde/hasta plegado, que no estorba hasta que se necesita. */
.filtros-fecha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; }
.fecha-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fecha-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.fecha-chip:hover { border-color: var(--muted); }
.fecha-chip.activo { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.fecha-chip .chip-n { font-weight: 400; opacity: .75; font-size: 11.5px; }
.fecha-chip.es-atraso { border-color: var(--danger); color: var(--danger); }
.fecha-chip.es-atraso.activo { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Filtros rápidos de período del Dashboard (05/10/2026): la fila no
   se envuelve nunca — en vez de apilarse en varias líneas cuando no
   entran todos (sobre todo en mobile), este contenedor propio
   scrollea horizontal y los deja en una sola fila. Va DESPUÉS de
   ".fecha-chips { flex-wrap: wrap }" (arriba): misma especificidad,
   así que el orden en la hoja es lo que decide cuál gana, y la
   primera vez quedó antes por error — el "nowrap" nunca se aplicaba
   y los chips se apilaban igual que si esta regla no existiera. */
.dash-rango-chips-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.dash-rango-chips { flex-wrap: nowrap; }
.dash-rango-chips .fecha-chip { flex: none; white-space: nowrap; }

.fecha-rango-det > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted);
  list-style: none; padding: 6px 2px;
}
.fecha-rango-det > summary::-webkit-details-marker { display: none; }
.fecha-rango-det > summary::before { content: "▸ "; }
.fecha-rango-det[open] > summary::before { content: "▾ "; }
.fecha-rango { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 4px 2px 2px; }
.fecha-rango label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; }
.fecha-rango input { padding: 6px 9px; }

/* Barra de acciones en grupo: aparece sola al marcar pedidos. */
.barra-masiva {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--primary-soft); border: 1px solid #B8DCCB;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
}
.masiva-cuenta { font-weight: 700; font-size: 13.5px; color: var(--primary-dark); }
.masiva-espacio { flex: 1; }
.sel-col { width: 38px; text-align: center; }
.sel-col input { cursor: pointer; }
/* Texto secundario en linea dentro de una celda (la cantidad que
   ya hay en esa ubicacion, el "+2" de ubicaciones extra). */
.texto-suave { color: var(--muted); }

/* Aviso de la ubicación donde el producto ya tiene stock hoy. */
.ubic-actual {
  background: var(--primary-soft); border: 1px solid #B8DCCB;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin: 0 0 14px; line-height: 1.5;
}
.ubic-actual b { color: var(--primary-dark); }

/* Elegir entre dejar todo junto o repartirlo en dos ubicaciones. */
.reparto-opciones { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.reparto-op {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.reparto-op:hover { border-color: var(--muted); }
.reparto-op.activo { border-color: var(--primary-dark); background: var(--primary-soft); }
.reparto-op > input { margin-top: 3px; flex: 0 0 auto; }
.reparto-txt strong { display: block; font-size: 13.5px; }
.reparto-txt > span { font-size: 12px; color: var(--muted); }

.split-campos {
  margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--border);
}
.split-campos .split-cant { display: block; max-width: 280px; }
.split-total { font-size: 12.5px; font-weight: 600; margin: 10px 0 0; }
.split-total.ok { color: var(--primary-dark); }
.split-total.mal { color: var(--danger); }

/* Listas del modal de confirmación en grupo: pueden ser largas, así
   que scrollean adentro en vez de estirar el modal fuera de pantalla. */
.masivo-lista {
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; line-height: 1.7;
}
.masivo-lista .masivo-item { display: flex; justify-content: space-between; gap: 10px; }
.masivo-lista .masivo-item span:last-child { color: var(--muted); white-space: nowrap; }

/* Tablero de despachos (migración 098). Las filas se arman con flex
   y wrap en vez de una tabla: en el celular del mostrador cada fila
   se apila sola, sin scroll horizontal. */
.despacho-bloque {
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; margin-bottom: 12px; background: var(--panel);
}
.despacho-bloque-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.despacho-bloque-head strong { font-size: 13.5px; }
.despacho-conteo {
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px; background: var(--panel);
}
.canal-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.canal-chip {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
  background: #eceff1; color: #455a64;
}
.canal-chip.meli1 { background: #fbf0d2; color: #8a6a00; }
.canal-chip.meli2 { background: #ece7fb; color: #5a3fb0; }
.canal-chip.web { background: #d9f2f6; color: #00707f; }
.canal-chip.falabella { background: #dff0e2; color: #1f6b34; }
.canal-chip.tienda { background: #e2ebee; color: #40606c; }

.despacho-fila {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-top: 1px solid var(--border);
}
.despacho-bloque .despacho-fila:first-of-type { border-top: none; }
.despacho-id { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.despacho-prod { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.despacho-fecha {
  flex: 0 0 auto; display: flex; flex-direction: column; font-size: 12.5px;
  white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 92px;
}
.despacho-fecha-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.despacho-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* En pantalla ancha, ancho fijo para que la columna "Vendida" quede
   alineada aunque una fila no traiga plazo del canal (pedidos web). */
@media (min-width: 900px) { .despacho-meta { min-width: 200px; } }
.despacho-accion { flex: 0 0 auto; margin-left: auto; }
.despacho-edad {
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px;
  background: var(--bg); color: var(--muted); white-space: nowrap;
}
.despacho-edad.atrasado { background: var(--danger-soft); color: var(--danger); }
.despacho-auto { font-size: 13px; color: var(--primary-dark); cursor: help; }
.stat-card.despacho-alerta { border-left: 3px solid var(--amber); }
/* Tarjeta "Por origen" del tablero de despachos: la etiqueta arriba y
   los chips de canal (los mismos de los bloques) debajo, centrados. */
.stat-card-origen { justify-content: center; cursor: default; }
.stat-card-origen:hover { transform: none; box-shadow: none; }
.stat-card-origen .canal-chips { margin: 8px 0 0; justify-content: center; }
.stat-card-origen .canal-chip { font-size: 13px; padding: 4px 10px; }
.stat-card-canales { margin: 6px 0 0; justify-content: center; gap: 4px; }
.stat-card-canales .canal-chip { font-size: 11px; padding: 2px 7px; }

.despachos-hechas-summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 2px; }
.despacho-hecha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; border-top: 1px solid var(--border); font-size: 13px;
}

/* Escáner de QR de retiro (migración 097). El video se recorta con
   object-fit para que la vista previa no se deforme según la cámara
   que tenga el equipo, y las cuatro esquinas marcan dónde apuntar. */
.qr-marco {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 12px; overflow: hidden;
  background: #0c2733; border: 1px solid var(--border);
}
.qr-marco video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-marco-esquina {
  position: absolute; width: 26px; height: 26px;
  border-color: var(--primary); pointer-events: none;
}
.qr-marco-esquina.tl { top: 12px; left: 12px; border-top: 3px solid; border-left: 3px solid; border-radius: 5px 0 0 0; }
.qr-marco-esquina.tr { top: 12px; right: 12px; border-top: 3px solid; border-right: 3px solid; border-radius: 0 5px 0 0; }
.qr-marco-esquina.bl { bottom: 12px; left: 12px; border-bottom: 3px solid; border-left: 3px solid; border-radius: 0 0 0 5px; }
.qr-marco-esquina.br { bottom: 12px; right: 12px; border-bottom: 3px solid; border-right: 3px solid; border-radius: 0 0 5px 0; }

.reposicion-categorias { position: relative; align-self: flex-end; }
.reposicion-categorias > summary { list-style: none; cursor: pointer; }
.reposicion-categorias > summary::-webkit-details-marker { display: none; }
.reposicion-categorias-panel { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 6px; min-width: 260px; max-height: 340px; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--border, #e2e5e2); border-radius: 12px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.reposicion-categorias-acciones { display: flex; gap: 6px; margin-bottom: 8px; }
.reposicion-cat-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; cursor: pointer; }

/* Costos por categoría: ancho casi completo y tabla compacta para no scrollear de lado */
.costos-categoria-card { width: 96vw; max-width: 1180px; }
.costos-categoria-card .table-wrap { overflow-x: auto; }
.costos-categoria-card .data-table th,
.costos-categoria-card .data-table td { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
.costos-categoria-card .data-table th { white-space: normal; }
.costos-categoria-card .costo-cat-input { width: 110px !important; padding: 6px 8px; }
.costos-categoria-card .costo-cat-row td { background: var(--bg, #f6f7f6); }
.costos-categoria-card .costo-modelo-row td { font-size: 12.5px; }

.dash-valor-ubic { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border, #e2e5e2); display: flex; flex-direction: column; gap: 4px; }
.dash-valor-ubic-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }