/* shared/base.css — ZipFactura design system */

:root {
  /* Marca — navy conservado */
  --navy:        #0F2A5C;
  --navy-2:      #1a3a7c;
  --navy-3:      #0a1f45;

  /* Primarios refrescados */
  --blue:        #2563EB;
  --blue-hover:  #1D4ED8;
  --blue-soft:   #EFF6FF;
  --green:       #059669;
  --green-soft:  #ECFDF5;
  --amber:       #D97706;
  --amber-soft:  #FFFBEB;
  --red:         #DC2626;
  --red-soft:    #FEF2F2;
  --violet:      #7C3AED;
  --violet-soft: #F5F3FF;
  /* Acento de la vertical (por defecto azul). Se sobreescribe por [data-vertical]. */
  --accent:       #2563EB;
  --accent-hover: #1D4ED8;
  --accent-soft:  #EFF6FF;
  /* Fondo del sidebar (por defecto navy). También varía por vertical. */
  --sidebar-bg:   #0F2A5C;
  --sidebar-bg-2: #0a1f45;

  /* Neutros */
  --bg:          #F8FAFC;
  --card:        #FFFFFF;
  --border:      #E2E8F0;
  --border-2:    #CBD5E1;
  --ink:         #0F172A;
  --ink-2:       #334155;
  --muted:       #64748B;
  --muted-2:     #94A3B8;
  --ice:         #E0E7FF;

  /* Radios y sombras */
  /* Radios chicos.
   *
   * Eran 14 / 10 / 6. Esa redondez es la firma de las plantillas: en un
   * software fiscal, donde lo que importa son numeros en columna, las esquinas
   * blandas hacen que todo parezca una app de consumo. */
  --radius:      6px;
  --radius-sm:   5px;
  --radius-xs:   4px;
  /* Sombras minimas.
   *
   * Eran de 12 y 48px de difuminado: las tarjetas flotaban sobre el fondo.
   * En una herramienta de trabajo la separacion la da el borde, no la sombra;
   * las sombras grandes son de tarjetas de marketing. La 3 se conserva solo
   * para modales, donde si hay que despegar del fondo. */
  --shadow-1:    none;
  --shadow-2:    0 1px 2px rgba(8,43,40,.05);
  --shadow-3:    0 8px 28px rgba(8,43,40,.16);

  /* Tipografía */
  --font-ui:     -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  /* Fuente para cifras, codigos y numeros de comprobante.
   *
   * En un sistema de facturacion los numeros se leen en columna: si el 1 ocupa
   * menos que el 8, los montos no alinean y la tabla se lee peor. Las cifras
   * tabulares son de las cosas que mas separan una herramienta contable seria
   * de una interfaz generica. */
  --font-num:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --font-mono:   "SF Mono", Menlo, Consolas, monospace;
}

/* ── Identidad de color por vertical ──────────────────────────
   Cada vertical usa la misma paleta base, pero un acento distinto
   para que el usuario reconozca de un vistazo dónde está. */
[data-vertical="gastronomia"] {
  /* Borgoña.
   *
   * El anterior era #EA580C, un naranja fuerte. Cálido, que es lo que quiere
   * un restaurante, pero demasiado cerca del rojo de alerta: en una pantalla
   * llena de estados —mesa bloqueada, comprobante rechazado— el color de la
   * marca competía con el color que avisa que algo anda mal.
   *
   * El borgoña conserva el calor y la referencia a la mesa servida, sin gritar.
   * Y no se cruza con ninguna otra vertical: servicios es verde azulado,
   * mayorista verde pino, comercio violeta. */
  --accent:       #8C2F39;
  --accent-hover: #74232C;
  --accent-soft:  #FBF0F1;
  --sidebar-bg:   #4A1620;   /* vino oscuro */
  --sidebar-bg-2: #351017;
}
[data-vertical="mayorista"] {
  --accent:       #1F5741;   /* verde pino profundo — oficio, establecido */
  --accent-hover: #16483A;
  --accent-soft:  #EEF4F1;
  --sidebar-bg:   #1B4335;   /* pino oscuro */
  --sidebar-bg-2: #14352A;
}
[data-vertical="comercio"] {
  --accent:       #7C3AED;   /* violeta retail */
  --accent-hover: #6D28D9;
  --accent-soft:  #F5F3FF;
  --sidebar-bg:   #4C1D95;
  --sidebar-bg-2: #3b1676;
}
[data-vertical="servicios"] {
  /* Verde azulado profundo.
   *
   * El anterior era #2563EB, que es el azul por defecto de Tailwind: aparece
   * en practicamente toda interfaz hecha con esa libreria y no dice nada del
   * producto. Este es mas sobrio, no pertenece a ninguna paleta por defecto, y
   * se distingue del verde pino del mayorista sin competir con el. */
  --accent:       #115E59;
  --accent-hover: #0F4C47;
  --accent-soft:  #ECF5F4;
  --sidebar-bg:   #0C3B37;
  --sidebar-bg-2: #082B28;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* ── Modales ────────────────────────────────────────────────────
   Los modulos dist-* y comprobantes.js usan este patron:

     <div class="overlay hidden">
       <div class="modal">
         <div class="modal-hdr"><h3>...</h3><button class="modal-close">x</button></div>
         <div class="modal-body">...</div>
       </div>
     </div>

   Estas clases nunca estuvieron definidas: solo existia una regla
   cosmetica de [data-vertical="mayorista"] .modal con el radio y la
   sombra. Sin layout, al sacar .hidden el overlay se dibujaba como un
   bloque mas dentro del flujo, sin fondo oscuro ni centrado, y los 18
   modales de la vertical se veian rotos. */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  background: rgba(15, 23, 42, .45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: overlay-in .12s ease-out;
}
/* .hidden gana por !important, asi que un overlay cerrado sigue oculto. */

.overlay > .modal {
  width: 100%;
  max-width: 560px;          /* los modulos lo pisan con style inline */
  margin: auto 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(15, 23, 42, .18);
  animation: modal-in .14s ease-out;
}

.modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-hdr h3 { margin: 0; }

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--muted);
  transition: background .12s ease, color .12s ease;
}
.modal-close:hover { background: var(--bg); color: var(--ink); }

.modal-body {
  padding: 18px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

@keyframes overlay-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-8px) }
  to   { opacity: 1; transform: none }
}

@media (max-width: 640px) {
  .overlay { padding: 12px; }
  .modal-body { max-height: calc(100vh - 120px); }
}
.mt8  { margin-top: 8px;  }
.mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }

/* ── Tipografía ─────────────────────────────────────────────── */
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; }
h1 { font-size: 24px; letter-spacing: -0.02em; }
h2 { font-size: 18px; letter-spacing: -0.01em; }
h3 { font-size: 15px; }
.muted { color: var(--muted); }
.mono  { font-family: var(--font-mono); }

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 44px de alto: mínimo cómodo para tocar con el dedo. */
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-ghost   { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--bg); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--border-2); }
.btn-outline:hover:not(:disabled) { background: var(--bg); }
.btn-danger  { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #B91C1C; }
.btn-sm { padding: 9px 15px; font-size: 14px; }
.btn-lg { padding: 16px 28px; font-size: 17px; }

/* ── Forms ──────────────────────────────────────────────────── */
/*
 * Los campos medían 38px de alto. Es el mínimo con el que un formulario
 * "entra", pero en una tablet de mostrador no se acierta cómodo, y en
 * pantalla se lee apretado. 44px es el objetivo táctil que se usa para
 * cualquier control que haya que tocar con el dedo.
 *
 * La etiqueta también cambia: era del mismo peso que el valor y competía con
 * él. Ahora es más chica y en mayúsculas, así se lee como rótulo y el ojo va
 * directo al dato.
 */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.field input,
.field select,
.field textarea {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.field .hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ── EL CONTENEDOR DE CAMPOS ─────────────────────────────────────────────
 *
 * `.wizard-form` estaba definido en app.html y en legacy.html, pero NO acá.
 * Las verticales cargan esta hoja, así que dentro de la aplicación la clase
 * no existía: los campos no se separaban entre sí y la ayuda de un campo
 * terminaba encima del siguiente.
 *
 * Se veía en Mi empresa: "El RUT no se puede cambiar" pisando el campo de
 * abajo. No era un problema de esa pantalla sino de todas las que usan esta
 * clase, que son casi todos los formularios del sistema.
 */
.wizard-form { display: flex; flex-direction: column; gap: 18px; }
.wizard-form .field { gap: 7px; }

/* Las rejillas de dos columnas dentro de un formulario necesitan el mismo
   aire vertical que el resto: sin esto, dos filas de campos quedan pegadas. */
.grid-2col { gap: 18px !important; }

/* ── Cards ──────────────────────────────────────────────────── */
/* ── LAS TARJETAS ────────────────────────────────────────────────────────
 *
 * 20px de padding alcanzan para una tarjeta chica de dato suelto, pero se
 * quedan cortos cuando adentro hay un formulario o una lista: el contenido
 * queda contra el borde y todo se lee apretado.
 *
 * Y el título necesitaba separarse de su bajada: estaban a 4px, tan juntos que
 * se leían como un solo bloque de texto en dos tamaños.
 */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-1);
}
/* ── SEPARACIÓN ENTRE TARJETAS ───────────────────────────────────────────
 *
 * Dos tarjetas apiladas necesitan aire entre sí. Pero `.card + .card` alcanza
 * a CUALQUIER tarjeta que siga a otra, incluida la segunda columna de una
 * grilla: ahí no van una debajo de la otra, van al lado, y el margen superior
 * la baja 16px respecto de su hermana.
 *
 * Se veía en Emitir de servicios: "Medio de pago" arrancaba más abajo que
 * "Forma de pago" y las dos tarjetas quedaban desparejas.
 *
 * `:not(:first-child)` dentro de un contenedor con display grid o flex no
 * resuelve el caso, porque el margen sigue aplicando. La salida es excluir a
 * las que están dentro de un contenedor que ya separa con `gap`.
 */
.card + .card { margin-top: 16px; }

/* Dentro de una grilla o un flex, el espacio lo pone `gap`: el margen de más
   desalinea las columnas. */
[style*="grid"] > .card + .card,
[style*="flex"] > .card + .card,
.grid-2col > .card + .card,
.grid-3col > .card + .card,
.grid-4col > .card + .card { margin-top: 0; }
.card-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.card-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; line-height: 1.55; }

/* ── Info-box ───────────────────────────────────────────────── */
.info-box {
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ink-2);
  margin: 12px 0;
}
.info-box strong { display: block; color: var(--navy); margin-bottom: 4px; }
.info-box.warn   { background: var(--amber-soft); border-left-color: var(--amber); }
.info-box.warn strong { color: var(--amber); }
.info-box.error  { background: var(--red-soft); border-left-color: var(--red); }
.info-box.error strong { color: var(--red); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
}
.badge-ok    { background: var(--green-soft); color: var(--green); }
.badge-warn  { background: var(--amber-soft); color: var(--amber); }
.badge-err   { background: var(--red-soft); color: var(--red); }
.badge-info  { background: var(--blue-soft); color: var(--blue); }
.badge-mute  { background: var(--bg); color: var(--muted); }

/* ── Tablas ─────────────────────────────────────────────────── */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl thead th {
  background: var(--bg);
  /* 10px de alto hacían filas apretadas: en una tabla de veinte comprobantes
     el ojo se pierde de renglón. 13 y 18 dan la respiración justa sin que
     entre menos información de la que se necesita ver junta. */
  padding: 13px 18px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
table.tbl tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--bg); }

/* ── App layout (post-login, dentro de cada vertical) ───────── */
.app-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  /* height fijo (no min-height): así el layout ocupa exactamente la pantalla
     y cada columna scrollea por dentro. Antes con min-height:100vh el layout
     crecía con el contenido y scrolleaba TODA la página junta (sidebar + salón
     se movían a la vez). overflow:hidden acá contiene el scroll a los hijos. */
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background: var(--sidebar-bg);
  color: #fff;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  /* La sidebar ocupa toda la altura; su lista (.sidebar-nav) scrollea sola. */
  height: 100vh;
  overflow: hidden;
}
.sidebar-logo {
  padding: 0 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
}
.sidebar-logo .logo {
  font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
}
.sidebar-logo .logo-sub {
  /* Separado del logo, no pegado. Estaba en 2px y el nombre de la vertical
     quedaba colgando de la marca como si fuera parte del logotipo. Con un
     poco de aire se lee como lo que es: una etiqueta de en qué vertical
     estás parado.
     La regla es una sola y vale para las cuatro verticales. */
  font-size: 11px; color: var(--ice); opacity: .7; margin-top: 7px;
  text-transform: uppercase; letter-spacing: .05em;
}
.sidebar-nav { flex: 1; padding: 0 10px; overflow-y: auto; }
.nav-item {
  width: 100%;
  display: flex; align-items: center; gap: 13px;
  /* 44px de alto mínimo: es el objetivo táctil que hace cómodo tocar con
     el dedo en una tablet. Con 9px de padding quedaba en 36. */
  padding: 13px 14px;
  background: transparent; border: none;
  color: rgba(255,255,255,.78);
  font-family: inherit; font-size: 15.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  border-radius: var(--radius-xs);
  margin-bottom: 2px;
  transition: all .12s;
}
/* ── CÓMO SE SIENTE EL MENÚ ──────────────────────────────────────────────
 *
 * Antes era un cambio de fondo y nada más: aparecía y desaparecía de golpe, y
 * el botón activo se distinguía apenas del que estaba bajo el puntero.
 *
 * Ahora hay tres estados que se leen distinto:
 *   · el puntero encima  → el fondo entra desde abajo
 *   · apretado           → se hunde un pixel, que es el gesto físico
 *   · el activo          → fondo firme y una barra lima al costado
 *
 * El fondo se anima con un pseudo-elemento y `transform`, no con `background`:
 * el navegador puede mover y escalar sin recalcular el diseño, y por eso el
 * gesto se siente instantáneo aun con el salón dibujado detrás.
 */
.nav-item { position: relative; overflow: hidden; isolation: isolate; }
.nav-item::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.09);
  border-radius: inherit;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .18s cubic-bezier(.32,.72,0,1);
}
.nav-item:hover::before { transform: scaleY(1); }
.nav-item:hover { color: #fff; }
.nav-item:active { transform: translateY(1px); }

.nav-item.active { background: rgba(255,255,255,.13); color: #fff; }
.nav-item.active::before { transform: scaleY(1); }

/* La marca del activo: una barra lima que crece desde el centro. Es lo que
   permite distinguir de un vistazo dónde estás parado del botón que
   simplemente tiene el puntero encima. */
.nav-item::after {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 3px; height: 60%; transform: translateY(-50%) scaleY(0);
  background: var(--lima, #D8F34E); border-radius: 0 3px 3px 0;
  transition: transform .22s cubic-bezier(.32,.72,0,1);
}
.nav-item.active::after { transform: translateY(-50%) scaleY(1); }

/* ── MIENTRAS CARGA ──────────────────────────────────────────────────────
 * Un barrido de luz que recorre el botón apretado. Dura lo que dura la
 * espera: si los datos llegan rápido casi no se ve, y si tardan queda claro
 * que el clic se registró y algo está pasando. */
@keyframes zf-nav-cargando {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.nav-item.cargando::before {
  transform: scaleY(1);
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 0%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.05) 100%);
  animation: zf-nav-cargando .9s ease-in-out infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .nav-item::before, .nav-item::after { transition: none; }
  .nav-item.cargando::before { animation: none; }
}
.nav-item svg { width: 21px; height: 21px; flex-shrink: 0; }
.nav-section {
  padding: 16px 14px 7px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px; color: var(--ice); opacity: .7;
}

.main {
  padding: 24px 32px;
  /* Altura fija de pantalla + su propio scroll: el contenido del salón se
     mantiene quieto cuando scrolleás la sidebar, y viceversa. */
  height: 100vh;
  overflow-y: auto;
}
/* ── EL ENCABEZADO DE CADA PANTALLA ──────────────────────────────────────
 *
 * El título estaba pegado al primer contenido y con el mismo peso visual que
 * cualquier otro texto. En una pantalla llena de tarjetas y tablas, eso hace
 * que uno tenga que buscar dónde está parado.
 *
 * Con más tamaño y una separación real, la pantalla empieza en algún lado.
 */
.main-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.main-header h1 { font-size: 27px; letter-spacing: -.025em; }
/* Bajada del título: la línea que explica de qué va la pantalla. */
.main-header .sub { font-size: 13.5px; color: var(--muted); margin-top: 5px; font-weight: 400; }

.page { display: none; }
.page.on { display: block; }

/* ── Grid utilitario ────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
}
.stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--accent); margin-top: 6px; letter-spacing: -0.025em; }
.stat-sub   { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-3);
  z-index: 9999;
  opacity: 0; transform: translateY(8px);
  transition: all .2s ease;
  max-width: 380px;
}
.toast.on { opacity: 1; transform: translateY(0); }
.toast.ok  { background: var(--green); }
.toast.err { background: var(--red); }

/* ── Líneas de facturación ──────────────────────────────────── */
/*
 * Cada campo de una línea va envuelto en un `label.ln` que lleva escrito su
 * nombre en `data-lbl`. Acá ese envoltorio no existe: `display: contents` lo
 * saca del árbol de cajas y los campos quedan como hijos directos de la
 * rejilla, exactamente igual que antes de que el envoltorio existiera.
 *
 * En el teléfono, donde la fila se apila, el label se hace visible y muestra
 * el nombre encima de cada campo. Ver el bloque de 700px más abajo.
 */
.ln { display: contents; }


/* ═══════════════════════════════════════════════════════════════════════════
   GASTRONOMÍA · EL MENÚ ACOSTADO
   ═══════════════════════════════════════════════════════════════════════════

   En las otras verticales el menú va al costado y funciona: son pantallas de
   listas y formularios, que crecen hacia abajo y no necesitan ancho.

   Gastronomía es distinta. La pantalla principal es el plano del salón, y un
   plano quiere las dos dimensiones: los 260px del menú lateral son casi un
   quinto del ancho útil, y en isométrico eso se paga doble porque la escena se
   achica en alto y en ancho a la vez.

   Con el menú arriba, el salón recupera el ancho completo.

   No se toca el marcado: es el mismo `<nav class="sidebar">` que arma
   sidebar.js, con las mismas entradas y los mismos permisos. Solo cambia cómo
   se acomoda. Eso importa porque el día que se agregue una entrada al menú de
   gastronomía, aparece acá sola.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {
  [data-vertical="gastronomia"] .app-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  [data-vertical="gastronomia"] .sidebar {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    /* 78px: la barra anterior medía lo que midiera su contenido y quedaba
       apretada contra el borde superior de la pantalla. Con una altura fija y
       algo más generosa, los botones respiran y la barra se lee como una
       cabecera y no como una fila de pestañas. */
    height: 78px;
    padding: 0 22px;
    overflow: visible;
  }

  /* El logo a la izquierda, con el nombre de la vertical al lado en vez de
     abajo: acostado, apilarlos haría la barra el doble de alta. */
  /* El logo, centrado en el alto de la barra y algo más chico: acostado no
     necesita el tamaño que tenía en la columna, donde era el único elemento
     de su fila. */
  [data-vertical="gastronomia"] .sidebar-logo {
    display: flex; align-items: center; justify-content: center;
    height: 100%; padding: 0 24px 0 0;
    margin: 0 10px 0 0;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,.12);
    flex: none;
  }
  [data-vertical="gastronomia"] .sidebar-logo .logo img { height: 36px !important; }
  [data-vertical="gastronomia"] .sidebar-logo .logo-sub { display: none; }

  /* Las entradas en fila. `overflow-x:auto` es la red de seguridad: si un día
     el menú tiene más entradas que ancho, se desliza en vez de romperse. */
  /* ── OJO CON EL OVERFLOW ────────────────────────────────────────────────
   *
   * Acá había `overflow-x:auto; overflow-y:visible` pensando en que el menú
   * pudiera deslizarse si crecía. No funciona: cuando un eje es `auto`, el
   * navegador convierte el otro a `auto` también aunque diga `visible`. Está
   * en la especificación y no hay forma de esquivarlo.
   *
   * El resultado era que los desplegables se abrían —el chevron giraba— pero
   * el panel quedaba recortado por ese overflow y no se veía. Parecía que el
   * menú no funcionaba cuando en realidad funcionaba y estaba escondido.
   *
   * Con `visible` en los dos ejes los paneles se ven. Si algún día el menú no
   * entra, la salida es `flex-wrap`, no scroll.
   */
  [data-vertical="gastronomia"] .sidebar-nav {
    display: flex; align-items: center; gap: 2px;
    flex: 1; padding: 0; overflow: visible;
  }

  [data-vertical="gastronomia"] .nav-item {
    width: auto; flex: none; white-space: nowrap;
    padding: 11px 14px; margin: 0; font-size: 14.5px; gap: 9px;
  }
  [data-vertical="gastronomia"] .nav-item svg { width: 18px; height: 18px; }

  /* ── EL ACTIVO, SOLO CON LA LÍNEA ──────────────────────────────────────
   *
   * En la columna el activo lleva fondo: es una lista larga y sin fondo
   * cuesta encontrar dónde estás parado.
   *
   * Acostado no hace falta. Son siete botones a la vista y la línea de abajo
   * ya lo dice sola; con fondo además queda un rectángulo pesado en el medio
   * de la barra, que fue justamente lo que se veía mal.
   */
  [data-vertical="gastronomia"] .sidebar-nav > .nav-item.active,
  [data-vertical="gastronomia"] .nav-grupo[open] > summary { background: transparent; }
  [data-vertical="gastronomia"] .sidebar-nav > .nav-item.active::before,
  [data-vertical="gastronomia"] .nav-grupo[open] > summary::before { transform: scaleY(0); }
  [data-vertical="gastronomia"] .sidebar-nav > .nav-item.active:hover::before,
  [data-vertical="gastronomia"] .nav-grupo[open] > summary:hover::before { transform: scaleY(1); }

  /* Acostado, la barra del activo va abajo: al costado quedaría entre dos
     botones y no se sabría de cuál es. */
  [data-vertical="gastronomia"] .sidebar-nav > .nav-item::after,
  [data-vertical="gastronomia"] .nav-grupo > summary::after {
    left: 12px; right: 12px; top: auto; bottom: 0;
    width: auto; height: 3px;
    border-radius: 3px 3px 0 0;
    transform: translateY(0) scaleX(0);
  }
  [data-vertical="gastronomia"] .sidebar-nav > .nav-item.active::after,
  [data-vertical="gastronomia"] .nav-grupo[open] > summary::after {
    transform: translateY(0) scaleX(1);
  }

  /* Los títulos de sección no funcionan acostados: "GENERAL" y "CONFIGURACIÓN"
     entre botones se leen como una entrada más. Se convierten en un separador
     vertical, que dice lo mismo —acá empieza otro grupo— sin ocupar ancho. */
  [data-vertical="gastronomia"] .nav-section {
    width: 1px; padding: 0; margin: 0 8px; overflow: hidden;
    align-self: stretch; color: transparent;
    background: rgba(255,255,255,.12);
    flex: none;
  }

  /* El pie va al final de la barra: quién está y el botón de salir. */
  [data-vertical="gastronomia"] .sidebar-footer {
    display: flex; align-items: center; gap: 14px;
    padding: 0 0 0 18px; margin-left: auto;
    border-top: none;
    border-left: 1px solid rgba(255,255,255,.12);
    align-self: stretch; flex: none; white-space: nowrap;
  }
  [data-vertical="gastronomia"] .sidebar-footer .btn {
    width: auto !important; margin: 0 !important;
  }


  /* El nombre de la vertical no va: la barra acostada ya tiene el menú del
     rubro a la vista —Salón, Menú, Cierre de caja— y repetir "Gastronomía"
     al lado del logo no agrega nada y roba ancho. */
  [data-vertical="gastronomia"] .sidebar-logo .logo-sub { display: none; }

  /* ── LOS GRUPOS DESPLEGABLES ──────────────────────────────────────────── */
  [data-vertical="gastronomia"] .nav-grupo { position: relative; flex: none; }
  [data-vertical="gastronomia"] .nav-grupo > summary {
    list-style: none; cursor: pointer; user-select: none;
  }
  [data-vertical="gastronomia"] .nav-grupo > summary::-webkit-details-marker { display: none; }
  [data-vertical="gastronomia"] .nav-chev {
    width: 15px; height: 15px; opacity: .6; transition: transform .15s;
  }
  [data-vertical="gastronomia"] .nav-grupo[open] > summary { background: rgba(255,255,255,.12); color: #fff; }
  [data-vertical="gastronomia"] .nav-grupo[open] .nav-chev { transform: rotate(180deg); }

  /* El panel cae desde el botón. Fondo propio y sombra: tiene que leerse
     encima del salón, que es claro. */
  [data-vertical="gastronomia"] .nav-grupo-items {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 90;
    min-width: 230px; padding: 6px;
    background: var(--sidebar-bg-2, var(--sidebar-bg));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15,23,42,.28);
  }
  [data-vertical="gastronomia"] .nav-grupo-items .nav-item {
    width: 100%; white-space: nowrap;
  }

  /* El último grupo se abre hacia la izquierda para no salirse por el borde. */
  [data-vertical="gastronomia"] .nav-grupo:last-child .nav-grupo-items { left: auto; right: 0; }


  /* ── SIN ICONOS ─────────────────────────────────────────────────────────
   *
   * En la columna el icono ayudaba: la lista es larga y el ojo se guía por la
   * forma antes que por la palabra. Acostado no: hay siete entradas, todas a
   * la vista, y el icono solo agrega ancho a cada botón —ancho que le sacaba
   * al plano, que es lo que esta pantalla vino a agrandar—.
   *
   * El chevron de los grupos se queda: no decora, dice que hay algo adentro.
   */
  [data-vertical="gastronomia"] .sidebar-nav > .nav-item > svg,
  [data-vertical="gastronomia"] .nav-grupo > summary > svg:not(.nav-chev),
  [data-vertical="gastronomia"] .nav-grupo-items .nav-item svg { display: none; }

  /* ── LA ALTURA DEL CONTENIDO ────────────────────────────────────────────
   *
   * `.main` mide `100vh` porque en el layout de columna ocupa toda la
   * pantalla al lado del menú. Acá el menú está ARRIBA, así que el contenido
   * dispone de la pantalla menos la barra: con 100vh mide de más y se desborda
   * hacia arriba, metiéndose por debajo del menú.
   *
   * Eso era lo que se veía en Plan, Usuarios y Registro de actividad: el
   * título tapado por la barra y el logo cortado. `height:auto` deja que la
   * fila del grid mande, que es lo correcto.
   */
  [data-vertical="gastronomia"] .main { height: auto; min-height: 0; }

  /* ── EL PLANO, DE BORDE A BORDE ─────────────────────────────────────────
   *
   * Solo la pantalla del salón va sin márgenes: un plano no se lee, se mira, y
   * esos 64px son mesas que no entran.
   *
   * El primer intento se lo sacó a TODA la vertical, y por eso en Plan,
   * Usuarios y Registro los textos arrancaban pegados al borde izquierdo. Una
   * pantalla de lectura necesita ese aire.
   */
  [data-vertical="gastronomia"] .main:has(.salon-pantalla) { padding: 10px; }
  [data-vertical="gastronomia"] #salon-canvas-wrap { padding: 2px; }

  /* El salón ocupa lo que queda. `min-height:0` es lo que hace que funcione:
     sin eso, un hijo de grid no se encoge por debajo de su contenido y el
     plano empuja la barra fuera de la pantalla. */
  [data-vertical="gastronomia"] .main { min-height: 0; display: flex; flex-direction: column; }

  /* ── EL PLANO, CENTRADO Y COMPLETO ────────────────────────────────────────
   *
   * La caja del salón medía `100vh - 150px`, un número calculado para el
   * layout con menú al costado. Con el menú arriba esa cuenta sobra: la caja
   * queda más alta que el espacio real, el dibujo se escala para un alto que
   * no existe y termina desbordado y corrido.
   *
   * Con `height:100%` dentro de un `.main` en columna, la caja mide
   * exactamente lo que le dejan la barra y las pestañas de salón, y el
   * `preserveAspectRatio` del SVG vuelve a centrar como corresponde.
   */
  [data-vertical="gastronomia"] .salon-caja { height: 100%; min-height: 0; }

  /* El plano ocupa todo el alto y la barra de salones flota sobre él. */
  [data-vertical="gastronomia"] .salon-pantalla {
    position: relative; flex: 1; min-height: 0; display: flex;
  }
  [data-vertical="gastronomia"] .salon-pantalla > #salon-canvas-wrap {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  [data-vertical="gastronomia"] .salon-barra {
    position: absolute; top: 16px; left: 18px; right: 18px; z-index: 20;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; pointer-events: none;
  }
  /* El contenedor no recibe clics —así no bloquea el arrastre de mesas en la
     franja de arriba— pero los botones sí. */
  [data-vertical="gastronomia"] .salon-barra > div { pointer-events: auto; }
}

/* La barra de salones fuera de gastronomía sigue arriba del plano, como
   siempre. El margen lo tenía escrito en el atributo `style`; al mover el
   marcado a una clase hay que devolvérselo acá. */
.salon-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   COLOR
   ═══════════════════════════════════════════════════════════════════════════

   El sistema se veía apagado: blanco, gris y una línea de color cada tanto.
   Es un problema real y no de gusto — cuando todo tiene el mismo peso, nada
   guía la mirada y cada pantalla hay que leerla entera para encontrar el dato.

   Acá el color no se agrega para decorar. Se agrega donde ayuda a encontrar:
   el número que importa, la fila donde estás parado, el estado de algo.

   Todo sale de `--accent`, así que cada vertical se pinta sola con el suyo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La cabecera de tabla, con algo más de presencia: era casi del mismo color
   que las filas y la tabla arrancaba sin arrancar. */
table.tbl thead th {
  background: var(--accent-soft);
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}

/* La fila bajo el puntero se tiñe del acento en vez de gris. Ayuda a no
   perder el renglón en una tabla larga. */
table.tbl tbody tr:hover { background: var(--accent-soft); }

/* Los títulos de tarjeta llevan una marca de color al costado. Es un detalle
   chico, pero convierte una pila de tarjetas blancas en una lista con ritmo. */
.card-title {
  position: relative;
  padding-left: 13px;
}
.card-title::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: var(--accent);
}

/* Los encabezados de sección, con la misma marca: así se ve de un vistazo
   dónde empieza cada bloque de la pantalla. */
.main h2 {
  position: relative; padding-left: 13px;
}
.main h2::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px; background: var(--accent);
}

/* Las etiquetas de estado, con más cuerpo: eran tan chicas que se perdían al
   lado del texto que acompañaban. */
.badge {
  padding: 4px 10px;
  font-size: 11.5px; font-weight: 700;
}
.badge-info { background: var(--accent-soft); color: var(--accent); }

/* El título de la pantalla, con la línea de abajo del color de la vertical en
   vez de gris. Cierra el encabezado y ata la pantalla a su rubro. */
.main-header { border-bottom-color: var(--border); }
.main-header::after { content: none; }


/* ── LOS DESPLEGABLES ────────────────────────────────────────────────────
 *
 * Un <select> sin estilar lo dibuja el sistema operativo: en Mac sale un
 * rectángulo de esquinas vivas con su propia flecha, que no se parece a
 * ningún otro control de la pantalla. Al lado de campos redondeados de 44px
 * canta.
 *
 * `appearance:none` desactiva ese dibujo y deja el control como cualquier
 * otro campo. La flecha se repone como imagen de fondo — un SVG embebido, sin
 * archivo aparte ni petición extra.
 *
 * `padding-right` deja el lugar de la flecha: sin eso, una opción larga le
 * pasa por encima.
 */
select,
select.inp,
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: #fff;
  font-family: inherit;
  cursor: pointer;
}
select:focus, select.inp:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Responsive ─────────────────────────────────────────────── */

/* La barra de arriba solo existe en pantallas chicas. En escritorio el menú
   lateral está siempre a la vista y no hace falta nada más. */
.barra-movil { display: none; }
.menu-fondo  { display: none; }

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .main { padding: 16px; padding-top: 84px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* ── La barra: logo a la izquierda, tres líneas a la derecha ──────────── */
  /*
     El fondo sale de --sidebar-bg, la misma variable que pinta el menú
     lateral. Al principio usaba --navy: azul marino en una vertical que es
     verde, así que la barra de arriba y el menú que se abría abajo eran de
     colores distintos. Con la variable, cada vertical trae la suya sin que
     haya que escribir un color por rubro.
  */
  .barra-movil {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; height: 68px;
    padding: 0 18px; background: var(--sidebar-bg);
    z-index: 120;
  }
  .barra-movil img { height: 34px; width: auto; display: block; }
  .menu-boton {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 5px;
    width: 44px; height: 44px; margin-right: -8px;
    background: none; border: none; cursor: pointer; padding: 0;
  }
  .menu-boton span {
    display: block; width: 22px; height: 2px; background: #fff;
    border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
  }
  /* Abierto: las de los extremos se cruzan y la del medio desaparece. */
  body.menu-abierto .menu-boton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-abierto .menu-boton span:nth-child(2) { opacity: 0; }
  body.menu-abierto .menu-boton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── El menú de siempre, entrando desde la izquierda ──────────────────── */
  /*
     Antes acá había `display: none`. Se cambia por una posición fuera de
     pantalla: escondido con display, el menú no se puede animar ni volver sin
     rehacerlo, y además desaparece del orden de lectura.
  */
  .sidebar {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0;
    width: 82%; max-width: 320px; z-index: 130;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }
  body.menu-abierto .sidebar { transform: translateX(0); }

  .menu-fondo {
    display: block; position: fixed; inset: 0; z-index: 125;
    background: rgba(0,0,0,.42);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body.menu-abierto .menu-fondo { opacity: 1; pointer-events: auto; }

  /* ── Las puntas redondeadas ───────────────────────────────────────────── */
  /*
     En el teléfono los botones ocupan casi todo el ancho, y un rectángulo de
     esquinas vivas a lo ancho de la pantalla se ve duro. Solo acá: en
     escritorio el radio de siempre acompaña al de las tarjetas.
  */
  .btn, .btn-sm, .inp, input.inp, select.inp, textarea.inp { border-radius: 14px; }
  .btn-lg { border-radius: 16px; }
  .card, .table-wrap, .stat, .info-box { border-radius: 16px; }
  .overlay > .modal { border-radius: 18px; }

  /* ── La cabecera de cada pantalla ─────────────────────────────────────── */
  /*
     Era una fila con el título a la izquierda y los botones a la derecha. En
     380px de ancho eso deja el título partido en tres renglones y el botón
     apretado contra el borde. Apilado se lee, y el botón queda del ancho
     completo, que es lo más fácil de tocar.
  */
  .main-header {
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .main-header h1 { font-size: 21px; }
  .main-header .btn { width: 100%; }

  /* ── Las tablas ───────────────────────────────────────────────────────── */
  /*
     `table-wrap` tenía `overflow: hidden`, así que una tabla más ancha que la
     pantalla quedaba cortada sin manera de ver el resto: las columnas de la
     derecha —el monto, el estado— simplemente no existían en el teléfono.
     Con scroll horizontal se llega a todo deslizando.
  */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tbl { font-size: 13px; }
  table.tbl thead th, table.tbl tbody td { padding-left: 10px; padding-right: 10px; }

  /* ── Las ventanas ─────────────────────────────────────────────────────── */
  /* Pegadas abajo y a todo el ancho, que es donde llega el pulgar. */
  .overlay { padding: 0; align-items: flex-end; }
  .overlay > .modal {
    max-width: 100%; margin: 0; border-radius: 18px 18px 0 0;
    max-height: 92vh; display: flex; flex-direction: column;
  }
  .modal-body { overflow-y: auto; }
  .modal-hdr { padding: 16px 18px; }

  /* Los botones de una ventana, uno abajo del otro y del ancho completo. */
  .modal-ftr { flex-direction: column-reverse; gap: 10px; }
  .modal-ftr .btn { width: 100%; }

  /* ── Las tarjetas ─────────────────────────────────────────────────────── */
  .card { padding: 16px; }

  /* El botón de WhatsApp no puede taparle la última fila a nadie: se le deja
     aire abajo a la pantalla. */
  .main { padding-bottom: 90px; }
}
@media (max-width: 700px) {
  /* ── QUE NADA SE SALGA DE LA PANTALLA ─────────────────────────────────────
   *
   * Las pantallas están armadas con rejillas de dos y tres columnas y con
   * tablas de ancho fijo, que en un monitor entran de sobra. En 380px no: la
   * fila más ancha estira la página entera y todo queda corrido hacia la
   * derecha, con la mitad de los campos fuera de la vista y sin forma de
   * llegar a ellos.
   *
   * Se arregla acá y no en cada módulo a propósito. El ancho de las columnas
   * está escrito con `style` dentro de veinte archivos distintos; corregirlos
   * uno por uno sería veinte oportunidades de olvidarse de alguno, y el
   * próximo módulo nacería con el mismo problema.
   */

  /* Una sola columna. El !important es porque muchas rejillas traen el ancho
     escrito en el atributo `style`, y eso le gana a cualquier hoja. */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* ── LAS LÍNEAS DE LO QUE SE FACTURA ────────────────────────────────────
   *
   * Se apilan, pero cada campo lleva su nombre encima: el envoltorio
   * `label.ln` trae escrito a qué corresponde y acá se hace visible.
   *
   * La otra opción era dejar la fila entera y deslizarla con el dedo. Se probó
   * y no va: cargar una factura es el trabajo principal de esta pantalla, y
   * obligar a arrastrar de izquierda a derecha para completar cada línea —y de
   * vuelta para ver el total— hace incómodo justo lo que más se usa.
   *
   * Cada línea queda como una tarjetita, con su borde y su botón de quitar.
   */
  #se-lineas { min-width: 0; }
  .ln-cab { display: none !important; }

  .ln-fila {
    display: block !important;
    border: 1px solid var(--border); border-radius: 14px;
    padding: 14px !important; margin-bottom: 12px;
    background: var(--bg, #FAFAF9);
  }
  .ln { display: block; margin-bottom: 10px; }
  .ln::before {
    content: attr(data-lbl);
    display: block; margin-bottom: 5px;
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    font-weight: 600; color: var(--muted);
  }
  /* Los importes vuelven a la izquierda: alineados a la derecha, apilados,
     quedaban tres números flotando contra el borde sin relación entre sí. */
  .ln input, .ln select { text-align: left !important; }

  /* El total de la línea y el botón de quitar, en la misma fila abajo. */
  .ln-total {
    display: inline-block; text-align: left !important;
    font-size: 16px !important; padding-top: 4px;
  }
  .ln-total::before {
    content: 'Total'; display: block; margin-bottom: 2px;
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    font-weight: 600; color: var(--muted);
  }
  .ln-quitar { float: right; margin-top: 4px; }

  /* Una celda de rejilla no se encoge por debajo de su contenido salvo que se
     le diga. Sin esto, un campo con texto largo sigue estirando la fila
     aunque la columna sea una sola. */
  .main [style*="grid-template-columns"] > * { min-width: 0; }
  .card, .card > *, .table-wrap { min-width: 0; max-width: 100%; }

  /* Los campos, hasta el borde de su caja y nunca más allá. */
  .inp, input.inp, select.inp, textarea.inp,
  .main input, .main select, .main textarea { max-width: 100%; }

  /* Nota: acá había una regla que le ponía `flex-wrap: wrap` a todo lo que
     tuviera `display:flex` en el atributo `style`. Descolocó el gráfico de
     ventas: las seis barras se acomodaron en dos filas y los importes
     quedaron encima de los nombres de los meses.
     Una regla que alcanza a cualquier elemento con flex es demasiado ancha
     para acertarle solo a lo que se corta. Las filas que de verdad no entran
     se arreglan una por una, como #se-tipos acá abajo. */

  /* ── LO QUE SÍ TIENE QUE PODER DESLIZARSE ───────────────────────────────
   *
   * Una tabla de comprobantes con seis columnas no se puede apilar sin dejar
   * de ser una tabla. Esas se deslizan con el dedo, que es la forma en que un
   * teléfono muestra algo más ancho que él.
   *
   * `overflow-x` en la tarjeta cubre las tablas que no están envueltas en
   * `table-wrap`, como la de las líneas al emitir.
   */
  .card { overflow-x: auto; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── LAS TABLAS, LEGIBLES ───────────────────────────────────────────────
   *
   * Al angostarse, el navegador parte las palabras donde puede: "PANADERIA LA
   * ESPIGA SRL" quedaba en cuatro renglones y cada fila medía cuatro veces lo
   * que debía. Cinco comprobantes ocupaban la pantalla entera.
   *
   * Con `nowrap` cada fila vuelve a ser una línea y la tabla se desliza. Se
   * lee de un vistazo y se llega a las columnas de la derecha arrastrando.
   */
  table.tbl th, table.tbl td { white-space: nowrap; }

  /* El nombre del cliente es lo único que puede ser largo de verdad. Se le
     pone un techo y se corta con puntos suspensivos: el resto de las columnas
     queda a la vista sin tener que deslizar media pantalla. */
  table.tbl td:nth-child(3) {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis;
  }

  /* Las fichas para elegir el tipo de comprobante al emitir. En el teléfono
     van una abajo de la otra: en fila, la segunda queda cortada por el borde
     y ni siquiera se ve que hay otra opción. */
  #se-tipos { flex-wrap: wrap; }
  #se-tipos > button { flex: 1 1 100% !important; }

  /* Red de seguridad: aunque quede algo suelto, la página no se corre. El
     contenido que necesita deslizarse lo hace dentro de su propia caja. */
  html, body { overflow-x: hidden; }

  /* Los botones de guardar y demás, del ancho completo: en el teléfono un
     botón chico contra el borde derecho es incómodo de acertar. */
  .card > .btn, .card > div > .btn:only-child { width: 100%; }
}

@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Refinamiento estético — Mayoristas
   Dirección: fino, preciso, profesional. Hairlines en vez de sombras,
   radios contenidos, peso de fuente controlado, más aire.
   Scopeado a [data-vertical="mayorista"] para no afectar otras verticales.
   ═══════════════════════════════════════════════════════════════ */

/* — Radios más contenidos (menos "inflado de IA") — */
[data-vertical="mayorista"] {
  --radius:    9px;
  --radius-sm: 7px;
  --radius-xs: 5px;
}

/* — Tarjetas: hairline, sombra casi imperceptible — */
[data-vertical="mayorista"] .card,
[data-vertical="mayorista"] .stat {
  border: 1px solid #edf1f5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  border-radius: 10px;
}
[data-vertical="mayorista"] .card { padding: 22px 24px; }

/* — Tipografía más precisa — */
[data-vertical="mayorista"] .main-header h1 {
  font-weight: 650;
  letter-spacing: -0.021em;
  font-size: 21px;
}
[data-vertical="mayorista"] .stat-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
}
[data-vertical="mayorista"] .stat-value {
  color: var(--ink);
  font-weight: 640;
  letter-spacing: -0.02em;
}

/* — Botones: más finos, menos bold, transición suave — */
[data-vertical="mayorista"] .btn {
  border-radius: 8px;
  font-weight: 530;
  letter-spacing: -0.005em;
  padding: 9px 16px;
  font-size: 13.5px;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: none;
}
[data-vertical="mayorista"] .btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
}
[data-vertical="mayorista"] .btn-primary {
  box-shadow: 0 1px 2px rgba(31, 87, 65, .18);
}
[data-vertical="mayorista"] .btn-primary:hover {
  box-shadow: 0 2px 6px rgba(31, 87, 65, .22);
}
[data-vertical="mayorista"] .btn-outline {
  border: 1px solid #dbe2ea;
  background: #fff;
  color: var(--ink-2);
}
[data-vertical="mayorista"] .btn-outline:hover {
  border-color: #c3ccd8;
  background: #fafbfc;
}

/* — Inputs y selects: hairline, foco sutil — */
[data-vertical="mayorista"] input,
[data-vertical="mayorista"] select,
[data-vertical="mayorista"] textarea {
  border: 1px solid #dde3ea;
  border-radius: 8px;
  font-size: 13.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-vertical="mayorista"] input:focus,
[data-vertical="mayorista"] select:focus,
[data-vertical="mayorista"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
[data-vertical="mayorista"] .field label {
  font-size: 12.5px;
  font-weight: 520;
  color: var(--ink-2);
}

/* — Tablas: hairlines, encabezados discretos — */
[data-vertical="mayorista"] .table-wrap {
  border: 1px solid #edf1f5;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  border-radius: 10px;
}
[data-vertical="mayorista"] table th {
  font-weight: 560;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: var(--muted);
  text-transform: none;
  border-bottom: 1px solid #edf1f5;
  padding: 10px 14px;
  white-space: nowrap;
}
[data-vertical="mayorista"] table td {
  border-bottom: 1px solid #f2f5f8;
  font-size: 13.5px;
  padding: 11px 14px;
  vertical-align: middle;
}
[data-vertical="mayorista"] table tbody tr:hover {
  background: #fafbfc;
}

/* — Badges más discretos — */
[data-vertical="mayorista"] .badge {
  font-weight: 540;
  font-size: 11px;
  letter-spacing: .01em;
  border-radius: 6px;
  padding: 2px 8px;
}

/* — Sidebar: ítems más finos, separación mayor — */
[data-vertical="mayorista"] .nav-item {
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.003em;
  border-radius: 8px;
}
[data-vertical="mayorista"] .nav-section {
  font-size: 10.5px;
  letter-spacing: .08em;
  font-weight: 600;
  opacity: .55;
}

/* — Modales: sombra más elegante, radio contenido — */
[data-vertical="mayorista"] .modal {
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .14);
}

/* — Toques finales: micro-interacciones delicadas — */
[data-vertical="mayorista"] .nav-item {
  transition: background .14s ease, color .14s ease;
}
[data-vertical="mayorista"] .nav-item.active {
  background: rgba(255,255,255,.10);
  font-weight: 560;
}
[data-vertical="mayorista"] table tbody tr {
  transition: background .12s ease;
}
[data-vertical="mayorista"] table tbody tr:hover {
  background: #fafbfc;
}
/* Acento un punto más sobrio en enlaces y detalles */
[data-vertical="mayorista"] .main-header h1 {
  color: var(--ink);
}
/* Divisores hairline consistentes */
[data-vertical="mayorista"] hr {
  border: none;
  border-top: 1px solid #edf1f5;
}


/* ── Cifras alineadas ──────────────────────────────────────────────────────
 *
 * Todo lo que es un numero que se compara en columna —montos, RUT, numeros de
 * comprobante, CAE— con ancho fijo por digito. Sin esto un 111 ocupa menos que
 * un 888 y los importes no alinean por la derecha aunque la celda diga
 * text-align:right.
 */
.num,
table.tbl td.num,
.monto {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* El codigo del comprobante y el RUT: monoespaciada y algo mas chica, para
 * que se lean como identificadores y no compitan con el nombre del cliente. */
.codigo {
  font-family: var(--font-num);
  font-size: .92em;
  letter-spacing: -.01em;
}

/* Toda celda numerica de las tablas alinea a la derecha y no se parte. */
table.tbl td[data-num], table.tbl th[data-num] {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Tablas que no se pisan ────────────────────────────────────────────────
 *
 * En el registro de actividad el correo del usuario se salia de su columna y
 * se superponia con la de al lado: la tabla no tenia layout fijo y una celda
 * larga empujaba al resto.
 */
table.tbl { table-layout: auto; }
table.tbl td {
  overflow-wrap: anywhere;   /* un correo largo corta en vez de desbordar */
  vertical-align: top;
}