/* ============================================
   App D'Origen — Componentes compartidos
   topbar, sidebar, cards, modal, botones, toast
   ============================================ */

/* El contenido de cada página ya está en el HTML antes de que auth-guard
   resuelva la sesión y mountLayout lo envuelva en el shell. Sin esta regla se
   veía un fogonazo del contenido suelto (la tabla sin cabecera y sin menú) en
   cada cambio de módulo, que es buena parte de la sensación de lentitud.
   auth-guard pinta mientras tanto el esqueleto del layout. */
html:not(.auth-ready) #app-root { visibility: hidden; }

/* ───── LAYOUT BASE ───── */
.app-shell {
  display: grid;
  /* 264 y no 240: con 240 se cortaban los nombres de media app —"Entradas de
     prod…", "Usuarios y permis…", "Inicio del espacio de t…"— y un menú donde
     no se leen las opciones es un menú a medias. */
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr); /* minmax(0,…): que nada ensanche la rejilla */
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  height: 100vh;
  height: 100dvh; /* iOS: 100vh incluye la zona tras la barra de Safari */
}
/* Sin barra lateral (el repartidor, que solo ve su ruta). Hay que esconder
   además el propio .sidebar: al quitar el área "sidebar" de la rejilla, el
   elemento se queda sin sitio asignado y el navegador lo recoloca solo en
   una fila implícita — aparecía abajo a la derecha, debajo del contenido. */
.app-shell.no-sidebar { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
.app-shell.no-sidebar .sidebar,
.app-shell.no-sidebar .sidebar-backdrop { display: none; }

/* ───── TOPBAR ─────
   Era una franja de verde corporativo maciza a lo ancho de la pantalla, con
   el logo en blanco encima. Es lo que más envejecía la app: una banda de
   color de marca cruzando la parte de arriba es un patrón de hace quince
   años, y además obligaba a que todo lo de dentro fuera blanco sobre verde
   —o sea, sin jerarquía posible: allí todo pesa lo mismo.

   Ahora es blanca, como la de cualquier herramienta profesional de hoy. El
   verde no se pierde: se CONCENTRA donde significa algo —el logo, el módulo
   activo del menú, el botón principal de cada pantalla— y por eso ahí se ve
   más, no menos. Una marca se nota más cuando no está en todas partes. */
.topbar {
  grid-area: topbar;
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--e-6);
  gap: var(--e-5);
  z-index: 20;
}
.topbar-logo {
  /* El fichero que había aquí (dorigen-logo.png) es SOLO LA HOJA, y ocupa la
     mitad de arriba de la imagen: la otra mitad es vacío. Así que a 42px de
     alto la hoja se dibujaba a 21 y salía una manchita verde que no dice de
     quién es la app. Con la franja verde detrás no cantaba porque el logo iba
     en blanco y se leía por contraste; sobre fondo claro sí.
     Ahora usa el logotipo completo —hoja + "D'Origen" + "a tu mesa"— que es
     la marca de verdad y ya venía en el repositorio sin usar. */
  height: 46px; width: auto; flex-shrink: 0; object-fit: contain;
  /* Sin el filtro que lo volvía blanco: sobre fondo claro va con su color */
}
.topbar-brand {
  font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em;
  flex-shrink: 0; color: var(--text);
}
.topbar-brand span {
  font-size: var(--t-xs); font-weight: 600; color: var(--text-muted);
  background: var(--surface-alt); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 3px 8px;
}
.topbar-breadcrumb {
  flex: 1; min-width: 0;
  font-size: var(--t-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--e-2);
}
.topbar-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.topbar-breadcrumb a:hover { color: var(--primary); }
.topbar-breadcrumb .sep { color: var(--text-soft); }
.topbar-user {
  font-size: var(--t-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--e-3);
}
/* Cerrar sesión pasa a enlace de texto: es la acción menos importante de la
   pantalla y estaba pintada como un botón. */
.btn-logout {
  background: none; border: none; color: var(--text-muted);
  padding: 6px 10px; font-size: var(--t-sm); font-weight: 600;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-logout:hover { background: var(--surface-alt); color: var(--text); }

/* ═══════════════════════════════════════════════════
   SIDEBAR — estilo Monday (limpio, vertical, SVG icons)
   ═══════════════════════════════════════════════════ */
.sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 0;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.sidebar-inner { padding: 6px 0 24px; }

/* ─── Header "Espacio de trabajo" ─── */
.sb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 4px;
}
.sb-top-label {
  font-size: 13px; color: var(--text-soft); font-weight: 500;
}
.sb-top-actions { display: flex; gap: 2px; }
.sb-top-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px; border-radius: 4px; color: var(--text-soft);
  display: flex; align-items: center; justify-content: center;
}
.sb-top-btn:hover { background: var(--surface-alt); color: var(--text); }

/* ─── Selector workspace (Étnico Import...) ─── */
.sb-workspace-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px 10px;
}
.sb-workspace {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; background: #fff;
  transition: background 0.12s;
}
.sb-workspace:hover { background: var(--surface-alt); }
.sb-workspace-icon {
  width: 26px; height: 26px;
  background: var(--primary, #127a3e); color: #fff;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}
.sb-workspace-text { flex: 1; min-width: 0; }
.sb-workspace-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-chev-down { font-size: 12px; color: var(--text-soft); flex-shrink: 0; }
.sb-chev-right { font-size: 13px; color: var(--text-soft); }
.sb-add {
  width: 32px; height: 32px;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; cursor: pointer;
  font-size: 18px; color: var(--text-soft); font-weight: 400;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}
.sb-add:hover { background: var(--surface-alt); color: var(--text); }

/* ─── Filas "Mis agentes" / "Contenido" ─── */
.sb-link-row {
  padding: 7px 14px;
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.sb-link-row:hover { background: var(--surface-alt); }
.sb-content-row { margin-top: 2px; }

/* ─── Fila genérica (Inicio, módulos) ─── */
/* ── Item de módulo ────────────────────────────────────────────
   Items del tamaño de un item de menú de verdad. Iban a 13,5px y 34px de
   alto; una barra lateral que se usa todo el día se toca y se lee, y con
   nombres largos como "Entradas de producto" o "Usuarios y permisos" hacen
   falta las dos cosas. El estado activo es una pastilla redondeada: con 4px
   de radio parecía una celda seleccionada, no un item de menú. */
.sb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius);
  margin: 2px 10px;
  transition: background .12s, color .12s;
}
.sb-row:hover { background: var(--surface-alt); }
.sb-row.active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.sb-row.active .sb-row-icon { color: var(--primary-dark); }

/* EL ICONO, DEL COLOR DEL TEXTO.
   Iba en #676879 mientras la etiqueta iba en casi negro. Un gris a medio
   camino al lado de un texto oscuro no se lee como "el icono de esto": se
   lee como una mancha, y encima obliga al ojo a saltar dos veces por cada
   línea del menú. Del mismo color, el icono y su nombre son una sola cosa.
   Y como la fila entera hereda el color, en el item activo el icono se pone
   verde solo. */
.sb-row-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.sb-row-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Departamento (grupo colapsable) ───────────────────────────
   Los departamentos dejan de gritar. Iban en mayúsculas al mismo tamaño que
   los módulos, así que competían con ellos: lo que se busca en un menú es el
   módulo, no la carpeta que lo contiene. Ahora son una etiqueta pequeña y
   gris, y los módulos mandan. */
.sb-dept { margin-top: 10px; }
.sb-dept-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 600; color: var(--text);
  border-radius: var(--radius-sm);
  margin: 0 8px;
  position: relative;
}
.sb-dept-head:hover { background: var(--surface-alt); }
.sb-dept-dots {
  margin-left: auto; color: var(--text-soft);
  opacity: 0; transition: opacity .12s;
  display: inline-flex; align-items: center;
}
.sb-dept-head:hover .sb-dept-dots { opacity: 1; }
.sb-dept-caret {
  font-size: 11px; color: var(--text-soft);
  transition: transform .15s;
  width: 14px; text-align: center; flex-shrink: 0; display: inline-block;
}
.sb-dept.open > .sb-dept-head .sb-dept-caret { transform: rotate(90deg); }
.sb-dept-name {
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 10.5px; font-weight: 700; color: var(--text-soft);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sb-dept-modulos { display: none; padding: 2px 0 4px; }
.sb-dept.open .sb-dept-modulos { display: block; }

.sb-row-sub { padding-left: 36px; }

/* ───── MAIN ───── */
.main {
  grid-area: main;
  overflow-y: auto;
  background: var(--bg);
  padding: var(--e-8) var(--e-10);
  /* Un item de grid no encoge por debajo de su contenido: cualquier tabla o
     toolbar más ancha que la pantalla ensanchaba la columna 1fr y la PÁGINA
     ENTERA hacía scroll lateral en el móvil (títulos cortados por la
     izquierda en Rutas y Reporte comercial). Con esto, lo ancho se queda
     dentro de su propio contenedor con scroll y el body no se mueve. */
  min-width: 0;
  overflow-x: hidden; /* fallback: clip es reciente y hay Safaris que lo ignoran */
  overflow-x: clip;
  overscroll-behavior-x: contain; /* el arrastre lateral muere aquí, no tira de la página */
}
.main-narrow { max-width: 1100px; margin: 0 auto; }

/* El título de pantalla sube de 22 a 28px. Parece un detalle y es la mitad
   del cambio: si el título de la pantalla pesa casi lo mismo que una
   etiqueta de tabla, el ojo no encuentra dónde empezar a leer. */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4); margin-bottom: var(--e-6); flex-wrap: wrap;
}
.page-title {
  font-size: var(--t-2xl); font-weight: 700; color: var(--text);
  margin: 0 0 var(--e-1); letter-spacing: -0.025em; line-height: 1.15;
}
.page-subtitle { font-size: var(--t-base); color: var(--text-muted); margin: 0; }

/* ───── PESTAÑAS DE PÁGINA (bajo el header) ───── */
.page-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: -8px 0 22px;
}
.page-tab {
  padding: 9px 14px;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted); text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.page-tab:hover { color: var(--text); }
.page-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ───── CARDS GENÉRICAS ───── */
/* La tarjeta pasa de definirse por su BORDE a definirse por su SOMBRA. Es el
   cambio que más separa una app de 2010 de una de hoy: con línea alrededor,
   una pantalla con seis tarjetas son seis rectángulos dibujados; con sombra,
   son seis cosas apoyadas sobre el fondo.

   Y el aire por dentro sube de 18 a 24px. Lo que se ve caro respira. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-head {
  padding: var(--e-5) var(--e-6);
  border-bottom: 1px solid var(--border-soft);
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
}
/* El título de tarjeta deja de ir en mayúsculas diminutas. Iba a 11px y
   gritando, así que era ilegible Y llamaba la atención a la vez: lo peor de
   los dos mundos. Ahora es un título de verdad. */
.card-title {
  font-size: var(--t-lg); font-weight: 700;
  letter-spacing: -0.015em; color: var(--text);
}
.card-body { padding: var(--e-6); }

/* ───── DASHBOARD DEPARTAMENTOS (tarjetas grandes) ───── */
.dep-grid {
  display: grid;
  /* auto-fill (no auto-fit): con pocos módulos en un departamento (p. ej.
     Herramientas, con 3), auto-fit colapsaba las columnas vacías y
     repartía su ancho entre las tarjetas reales, dejándolas mucho más
     anchas de lo normal. auto-fill deja esas columnas de más ahí, vacías,
     así las tarjetas se quedan en su tamaño natural tenga las que tenga el
     departamento. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.dep-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
}
.dep-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/* Cuadrado TINTADO con el icono en color, no macizo con el icono en blanco.
   Seis cuadrados de colores saturados en fila cantan más que los nombres de
   los departamentos, que es lo que se viene a leer. El color de cada uno se
   conserva como identidad, pero al 12%. */
.dep-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.dep-card-name {
  font-size: var(--t-lg); font-weight: 700; color: var(--text);
  margin: 0; letter-spacing: -0.015em;
}
.dep-card-desc { font-size: var(--t-base); color: var(--text-muted); line-height: 1.5; margin: 0; flex: 1; }
.dep-card-meta {
  font-size: var(--t-sm); color: var(--text-soft); font-weight: 600;
  text-transform: none; letter-spacing: 0;
  padding-top: var(--e-3); border-top: 1px solid var(--border-soft);
}

/* La frase que explica qué hacer en la portada. */
.inicio-intro {
  color: var(--text-muted); font-size: var(--t-md); line-height: 1.6;
  max-width: 62ch; margin: 0 0 var(--e-8);
}

/* ───── BOTONES ───── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: 10px 18px; font-size: var(--t-base); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
  font-family: inherit; white-space: nowrap; min-height: 40px;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--primary-light); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-fuerte); }
.btn-secondary:hover { background: var(--surface-alt); border-color: var(--text-soft); }

/* Terciario: la mayoría de las acciones de una pantalla deberían ser ESTO y
   no un botón con caja. En una fila del catálogo compiten hoy un botón
   sólido, cinco de tarifa y cinco iconos encajonados — todo al mismo peso,
   así que ninguno destaca. La regla es: UN botón sólido por zona, el resto
   texto. */
.btn-terciario {
  background: none; border: none; color: var(--primary);
  padding: 8px 10px; font-size: var(--t-base); font-weight: 600;
  border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: background .12s;
}
.btn-terciario:hover { background: var(--primary-soft); }

.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger-soft); }
.btn-danger:hover { background: var(--danger-soft); }

/* Icono suelto, sin caja. Encajonar cinco iconos seguidos —ojo, WhatsApp,
   lápiz, copiar, papelera— convierte una fila en una botonera y cansa la
   vista. Sueltos y en gris, aparecen al pasar por encima. */
.btn-icon {
  padding: 8px; background: none; border: none; color: var(--text-soft);
  border-radius: var(--radius-sm); cursor: pointer; line-height: 0;
  transition: background .12s, color .12s;
}
.btn-icon:hover { background: var(--surface-alt); color: var(--text); }
.btn-icon.peligro:hover { background: var(--danger-soft); color: var(--danger); }

/* ───── TOAST ───── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: #fff; padding: 10px 18px;
  border-radius: 22px; font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: all 0.25s;
  /* Por encima de todo lo demás: los avisos salen muchas veces desde dentro
     de un modal (los modales van de 2000 a 3000) y quedaban detrás, así que
     no se leía justo lo que había que leer. */
  z-index: 10000; box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); }

/* ───── MODAL ───── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(13, 31, 20, 0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff; border-radius: var(--radius-lg);
  width: 100%; max-width: 640px; max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  transform: scale(0.96); transition: transform 0.22s;
}
.modal-overlay.show .modal { transform: scale(1); }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: 16px; font-weight: 700; margin: 0; }
.modal-close { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px; }
.modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ───── FORM ───── */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: none; letter-spacing: 0.05em; color: var(--text-muted);
  margin-bottom: 5px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; height: 38px; padding: 0 12px;
  font-size: 13px; font-family: inherit; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  outline: none; transition: border-color 0.12s;
  box-sizing: border-box;
}
.form-textarea { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* ───── RESPONSIVE ───── */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 54px 1fr;
    grid-template-areas: "topbar" "main";
  }
  .sidebar {
    position: fixed; top: 54px; left: 0; bottom: 0; width: 240px;
    transform: translateX(-100%); transition: transform 0.2s;
    /* Por encima de TODO el contenido de página: cabeceras sticky de tablas
       (20), desplegables (60), barra de asignación (120), COCO (900-901) y
       tooltips (950) — con 15, el menú abierto dejaba ver la tabla a través
       y el mono flotaba encima. Por debajo de los modales (2000) y el toast
       (10000), que sí deben ganar. */
    z-index: 1200; box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed; inset: 54px 0 0 0; background: rgba(0,0,0,0.3);
    z-index: 1190; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .topbar { padding: 0 12px; gap: 10px; height: 54px; }
  .topbar-logo { height: 32px; }
  .topbar-brand span { display: none; }
  /* El breadcrumb no cabe en móvil: la navegación vive en el menú lateral */
  .topbar-breadcrumb { display: none; }
  .topbar-user { font-size: 11.5px; margin-left: auto; gap: 8px; }
  .topbar-user > span {
    max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .btn-logout { padding: 6px 10px; font-size: 11.5px; white-space: nowrap; }
  .main { padding: var(--e-5) var(--e-4); }
  .page-title { font-size: var(--t-xl); }
  .page-header { margin-bottom: 16px; }
  .page-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-tab { white-space: nowrap; }
  .btn-menu {
    background: var(--surface-alt); border: 1px solid var(--border);
    color: var(--text); width: 38px; height: 38px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }
}
@media (min-width: 901px) {
  .btn-menu { display: none; }
}
/* Móvil estrecho: solo logo + logout en la topbar */
@media (max-width: 480px) {
  .topbar-user > span { display: none; }
}


/* ── Móvil: modal y toast compartidos ───────────────────────────── */
@media (max-width: 900px) {
  /* 92vh en iOS deja el pie del modal bajo la barra de Safari */
  .modal { max-height: 92dvh; }
  /* Dos botones anchos en el pie ("Pausar mensajes" + "Marcar cobrado" en
     Cartera) se salían por la derecha: ahora saltan de línea y crecen. */
  .modal-foot {
    flex-wrap: wrap;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .modal-foot .btn { flex: 1 1 140px; min-height: 44px; }
}
/* El toast media lo que midiera su texto: un error largo se salía de un
   iPhone por los dos lados. */
.toast { max-width: calc(100vw - 32px); }


/* ══════════════════════════════════════════════════════════════════
   SISTEMA DE TABLAS — UNA SOLA DEFINICIÓN PARA TODA LA APP
   ──────────────────────────────────────────────────────────────────
   Doce módulos tenían cada uno su propia tabla escrita a mano. Nacieron
   iguales y fueron separándose sola una cada vez que se tocaba una
   pantalla: Envíos con cabecera en versalitas y rejilla entre columnas,
   Clientes sin ellas. Dos pantallas de la MISMA app que ya no se parecían
   — que es exactamente lo que no puede pasar.

   La causa no era ninguna de las dos pantallas: era que no había un sitio
   donde estuviera escrito cómo es una tabla. Ahora lo hay, y es este. Los
   ficheros de cada módulo conservan solo lo suyo de verdad — qué columna
   se ancla, cuál va a la derecha, qué anchos — nunca el aspecto.

   Si hay que cambiar el aspecto de las tablas, SE CAMBIA AQUÍ.
   ══════════════════════════════════════════════════════════════════ */

/* El marco: se separa del fondo por su sombra, no por un borde grueso. */
.cl-table-wrap, .prod-table-wrap, .env-table-wrap, .ped-table-wrap,
.adm-table-wrap, .pal-table-wrap, .an-tabla-wrap, .met-pedidos-wrap,
.prop-table-wrap, .rut-tabla-wrap, .ges-tabla-wrap {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cl-table, .prod-table, .env-table, .ped-table, .adm-table, .pal-table,
.an-tabla, .met-pedidos-table, .prop-table, .rut-tabla, .ges-tabla,
.cart-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-base);
}

/* La cabecera es un rótulo, no un titular. En versalitas y con letra
   ancha competía con el contenido de las filas, que es lo que se lee. */
.cl-table th, .prod-table th, .env-table th, .ped-table th, .adm-table th,
.pal-table th, .an-tabla th, .met-pedidos-table th, .prop-table th,
.rut-tabla th, .ges-tabla th, .cart-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--text-soft);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.cl-table td, .prod-table td, .env-table td, .ped-table td, .adm-table td,
.pal-table td, .an-tabla td, .met-pedidos-table td, .prop-table td,
.rut-tabla td, .ges-tabla td, .cart-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  vertical-align: middle;
}

/* La última fila no lleva línea: la cierra el borde del marco. */
.cl-table tbody tr:last-child td, .prod-table tbody tr:last-child td,
.env-table tbody tr:last-child td, .ped-table tbody tr:last-child td,
.adm-table tbody tr:last-child td, .pal-table tbody tr:last-child td,
.an-tabla tbody tr:last-child td, .met-pedidos-table tbody tr:last-child td,
.prop-table tbody tr:last-child td, .rut-tabla tbody tr:last-child td,
.ges-tabla tbody tr:last-child td, .cart-table tbody tr:last-child td {
  border-bottom: none;
}

/* La barra de desplazamiento, SIEMPRE visible. En macOS las barras se
   esconden hasta que empiezas a arrastrar, así que no hay nada que avise de
   que la tabla sigue a la derecha. Declarar ::-webkit-scrollbar hace que
   Safari y Chrome usen la barra clásica en vez de la flotante. */
.cl-table-wrap::-webkit-scrollbar, .prod-table-wrap::-webkit-scrollbar,
.env-table-wrap::-webkit-scrollbar, .ped-table-wrap::-webkit-scrollbar,
.adm-table-wrap::-webkit-scrollbar, .pal-table-wrap::-webkit-scrollbar,
.an-tabla-wrap::-webkit-scrollbar, .met-pedidos-wrap::-webkit-scrollbar,
.prop-table-wrap::-webkit-scrollbar, .ges-tabla-wrap::-webkit-scrollbar {
  width: 12px; height: 12px;
}
.cl-table-wrap::-webkit-scrollbar-track, .prod-table-wrap::-webkit-scrollbar-track,
.env-table-wrap::-webkit-scrollbar-track, .ped-table-wrap::-webkit-scrollbar-track,
.adm-table-wrap::-webkit-scrollbar-track, .pal-table-wrap::-webkit-scrollbar-track,
.an-tabla-wrap::-webkit-scrollbar-track, .met-pedidos-wrap::-webkit-scrollbar-track,
.prop-table-wrap::-webkit-scrollbar-track, .ges-tabla-wrap::-webkit-scrollbar-track {
  background: var(--surface-alt);
}
.cl-table-wrap::-webkit-scrollbar-thumb, .prod-table-wrap::-webkit-scrollbar-thumb,
.env-table-wrap::-webkit-scrollbar-thumb, .ped-table-wrap::-webkit-scrollbar-thumb,
.adm-table-wrap::-webkit-scrollbar-thumb, .pal-table-wrap::-webkit-scrollbar-thumb,
.an-tabla-wrap::-webkit-scrollbar-thumb, .met-pedidos-wrap::-webkit-scrollbar-thumb,
.prop-table-wrap::-webkit-scrollbar-thumb, .ges-tabla-wrap::-webkit-scrollbar-thumb {
  background: var(--border-fuerte); border-radius: 8px;
  border: 3px solid var(--surface-alt);
}

/* NO hay rejilla vertical entre columnas. Venía de imitar a Monday y con
   mil filas convierte cualquier lista en una hoja de cálculo. Lo que
   separa las columnas es el aire. */

/* Las cifras, en columna. */
.cl-table .num, .prod-table .num, .env-table .num, .ped-table .num,
.adm-table .num, .pal-table .num, .an-tabla .num, .met-pedidos-table .num,
.prop-table .num, .rut-tabla .num, .ges-tabla .num, .cart-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Densidad de modal ──────────────────────────────────────────
   ÚNICA excepción, y por una razón de sitio, no de estilo: las líneas de
   un pedido son ocho columnas dentro de un modal. Con el aire de una
   tabla de pantalla completa no caben y aparece scroll horizontal dentro
   de una ventana que ya scrollea. El ASPECTO es el mismo — misma
   cabecera, mismos colores, sin rejilla —, solo cambia el apretado. */
.ped-tabla, .ch-pedidos-tabla {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--t-sm);
}
.ped-tabla th, .ch-pedidos-tabla th {
  text-align: left; padding: 9px 12px;
  font-size: var(--t-xs); font-weight: 600;
  text-transform: none; letter-spacing: .01em;
  color: var(--text-soft); background: var(--surface);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ped-tabla td, .ch-pedidos-tabla td {
  padding: 9px 12px; border-bottom: 1px solid var(--border-soft);
  color: var(--text); vertical-align: middle;
}
.ped-tabla tbody tr:last-child td, .ch-pedidos-tabla tbody tr:last-child td {
  border-bottom: none;
}


/* ── Barra de desplazamiento lateral encima de la tabla ──────────
   La pone helpers.js en las tablas más anchas que su hueco. Existe porque
   la barra nativa va al final del marco, y con una tabla más alta que la
   pantalla eso significa "baja hasta abajo del todo antes de poder mover
   las columnas". Es un duplicado de un control que ya existe, así que va
   con aria-hidden: para quien navega con lector de pantalla no hay nada
   nuevo que anunciar. */
.tabla-barra-lados {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 6px;
  /* ALTURA EXPLÍCITA, y es justo lo que le faltaba ayer.
     El div solo llevaba dentro un hijo de 1px, así que su altura automática
     era 1px — y una barra de desplazamiento se dibuja DENTRO de la caja,
     no la agranda. O sea: la barra existía, medía 10px y estaba metida en
     una caja de 1px. Invisible en Rutas, en Envíos y en todas.
     Con alto propio hay sitio donde pintarla. */
  height: 14px;
  /* Declarar ::-webkit-scrollbar hace que Safari use barra clásica en vez
     de la flotante que solo aparece al arrastrar; scrollbar-width cubre a
     Firefox. Una barra que no se ve no avisa de que la tabla sigue. */
  scrollbar-width: thin;
}
.tabla-barra-lados > div { height: 1px; }
.tabla-barra-lados::-webkit-scrollbar { height: 10px; }
.tabla-barra-lados::-webkit-scrollbar-track {
  background: var(--surface-alt); border-radius: 5px;
}
.tabla-barra-lados::-webkit-scrollbar-thumb {
  background: var(--border-fuerte); border-radius: 5px;
  border: 2px solid var(--surface-alt);
}
.tabla-barra-lados::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }