/* style.css — MODOSMART
   Lenguaje visual inspirado en las interfaces de Apple (macOS/iOS): vidrio
   esmerilado en la navegación, superficies neutras con mucho aire, sombras
   difusas y suaves en vez de "elevación" marcada, esquinas generosas, y un
   único acento de color usado con moderación. Cada negocio puede tener su
   propio nombre y logo (ver base.html), pero esta base visual es la de
   MODOSMART.
*/

:root {
  /* Superficie oscura (marca, texto fuerte, header/nav) */
  --ink: #1D1D1F;
  --ink-2: #2C2E33;
  --ink-3: #3A3D44;

  /* Acento de marca (foco, enlaces, detalles) — usado con moderación */
  --brass: #167A55;
  --brass-dark: #0F6244;
  --brass-light: #DDF3E9;
  --brass-glow: rgba(22,122,85,.22);

  /* Acento cálido de firma — reservado para momentos puntuales (totales, hitos) */
  --oro: #E8A23D;
  --oro-oscuro: #B97D22;

  /* Fondo de la app y superficies — grises neutros muy suaves, no azulados */
  --paper: #F7F7F5;
  --surface: #FFFFFF;
  --surface-hundida: #F3F4F1;
  --border: rgba(30,36,32,.09);
  --borde: var(--border);
  --border-fuerte: rgba(30,36,32,.17);

  /* Semánticos */
  --verde: #16845B;
  --verde-oscuro: #0F6848;
  --rojo: #E0433D;
  --rojo-oscuro: #B32E28;
  --naranja: #DB8B21;
  --amarillo: #E8AA1F;
  --gris: #6E7580;

  /* Texto */
  --texto: #1D1D1F;
  --texto-muted: #6E7078;

  --radio: 18px;
  --radio-chico: 11px;
  --radio-pill: 999px;

  /* Sombras muy difusas y de baja opacidad: profundidad ambiental, no "cajas
     con elevación" — el sello de las superficies de Apple. */
  --sombra: 0 1px 2px rgba(20,28,23,.025), 0 7px 24px rgba(20,28,23,.045);
  --sombra-hover: 0 2px 5px rgba(20,28,23,.035), 0 14px 30px rgba(20,28,23,.075);
  --sombra-elevada: 0 8px 16px rgba(0,0,0,.06), 0 24px 56px rgba(0,0,0,.16);

  --easing: cubic-bezier(.22, 1, .36, 1);

  /* -apple-system / BlinkMacSystemFont hacen que en un Mac/iPhone real se
     use San Francisco de verdad; Inter es el respaldo en todo lo demás. */
  --fuente-cuerpo: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --fuente-display: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --fuente-numeros: "Space Grotesk", -apple-system, "Inter", sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--fuente-cuerpo);
  background: var(--paper);
  color: var(--texto);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--fuente-display); color: var(--ink); margin: 0 0 12px; letter-spacing: -0.02em; font-weight: 650; }
h2 { font-size: 28px; font-weight: 700; }
h3 { font-size: 17px; font-weight: 650; margin-bottom: 10px; }
h4 { font-size: 14px; font-weight: 650; margin-bottom: 6px; }

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

::selection { background: var(--brass-light); color: var(--ink); }

:focus-visible {
  outline: 3px solid rgba(22,122,85,.42);
  outline-offset: 1px;
  border-radius: 4px;
}

/* ---------- Monograma de marca (logo de respaldo si el negocio no cargó uno) ---------- */
.ficha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--brass-light) 0%, var(--brass) 55%, var(--brass-dark) 100%);
  color: #fff;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 12.5px;
  box-shadow: 0 2px 6px rgba(79,95,232,.35);
  flex-shrink: 0;
}
.ficha-grande {
  width: 60px; height: 60px; font-size: 25px; border-radius: 18px; margin: 0 auto 12px;
  box-shadow: 0 2px 6px rgba(79,95,232,.35), 0 0 0 6px rgba(79,95,232,.08);
}

/* ---------- Layout: barra superior con vidrio esmerilado, fija arriba ---------- */
.topbar, .navbar {
  position: sticky;
  z-index: 40;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.topbar {
  top: 0;
  color: var(--ink);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}
.marca { display: flex; align-items: center; gap: 10px; }
#btn-volver {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: var(--surface-hundida);
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s var(--easing);
}
#btn-volver:hover { background: var(--brass-light); color: var(--brass-dark); }
#btn-volver:active { transform: scale(.92); }
.wordmark {
  font-family: var(--fuente-display);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.wordmark em { font-style: normal; color: var(--brass-light); }
/* Logotipo de marca dentro de .marca (ej. panel Super Admin) -- reemplaza el
   style="width:...;height:...;border-radius:..." que se repetía inline. */
.logo-marca { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
/* Subtítulo chico debajo del wordmark, para paneles propios de MODOSMART
   (Super Admin, Staff) donde además de la marca corresponde identificar el
   panel (ver ui_guidelines.md #35). */
.topbar-etiqueta {
  display: block;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-dark);
  opacity: .85;
}

.usuario { font-size: 13px; display: flex; align-items: center; gap: 12px; color: var(--texto-muted); }
/* En desktop, este wrapper es invisible para el layout (sus hijos se
   comportan como si fueran hijos directos de .usuario) -- solo se activa
   como contenedor propio, encogible, en mobile (ver media query). */
.usuario-info { display: contents; }
.rol-admin { color: var(--ink-2); font-weight: 600; flex-shrink: 0; }
.usuario .salir { color: var(--texto-muted); padding-left: 12px; border-left: 1px solid var(--border-fuerte); flex-shrink: 0; }
.usuario .salir:hover { color: var(--brass-dark); }

.navbar {
  top: 53px;
  padding: 8px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(20,28,23,.025);
}

#btn-hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: none;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s var(--easing), color .15s var(--easing);
}
#btn-hamburguesa:hover { color: var(--brass-dark); }

/* En pantallas chicas, el menú de navegación arranca colapsado (no ocupa
   pantalla de entrada) y se despliega como un cajón lateral desde la
   IZQUIERDA al tocar el botón hamburguesa -- así no queda pegado arriba de
   todo, donde es fácil tocar "Salir" por error al querer abrir el menú. */
#btn-vender-fijo {
  display: none;
  background: var(--verde);
  color: #fff;
  padding: 5px 13px;
  border-radius: var(--radio-pill);
  font-size: 13px;
  font-weight: 590;
  margin-right: 4px;
  box-shadow: 0 2px 10px rgba(31,166,105,.35);
}
@media (max-width: 760px) {
  /* El hamburguesa y el "volver" van en el flujo normal de .marca (no
     position:absolute) -- así nunca terminan flotando encima de otra fila.
     Antes el hamburguesa se centraba verticalmente respecto de TODO el
     .topbar (que en mobile ocupa dos filas: marca + usuario), así que
     quedaba pegado en el borde entre ambas, superpuesto con "Vender". */
  .topbar { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  #btn-hamburguesa {
    display: inline-flex;
    background: var(--surface-hundida);
  }
  #btn-hamburguesa:active { background: var(--brass-light); transform: scale(.92); }
  .marca { justify-content: center; gap: 12px; }
  /* "Vender" siempre pegado a la izquierda y "Salir" siempre pegado a la
     derecha (flex-shrink:0 en ambos, más abajo) -- lo único que se encoge
     y, si hace falta, recorta con "..." es el nombre del vendedor, nunca
     el estado de la caja ni "Salir". */
  .usuario { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  #btn-vender-fijo { flex-shrink: 0; }
  .usuario-info {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 auto; min-width: 0; overflow: hidden; justify-content: center;
  }
  #perfil-vendedor-nombre {
    flex-shrink: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #fondo-navbar-movil {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 998;
  }
  #fondo-navbar-movil.navbar-abierto { display: block; }
  .navbar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78%;
    max-width: 300px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    background: rgba(255,255,255,.98);
    z-index: 999;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 60px 10px 10px;
    overflow-y: auto;
    box-shadow: 8px 0 32px rgba(20,28,23,.18);
  }
  .navbar.navbar-abierto { transform: translateX(0); }
  .navbar.navbar-abierto a, .navbar.navbar-abierto .nav-dropdown summary {
    width: 100%;
    padding: 16px 12px;
    margin-bottom: 4px;
    border-radius: var(--radio-chico);
    font-size: 16px;
    border-bottom: none;
    background: var(--surface-hundida);
    color: var(--ink-2);
  }
  .navbar a.nav-destacado { display: none; } /* ya está siempre visible en el topbar */
  .nav-dropdown { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-dropdown-menu { position: static; width: 100%; box-shadow: none; padding-left: 14px; }

  /* Botón "Vender" siempre a la vista en el topbar, sin tener que abrir el menú. */
  #btn-vender-fijo { display: inline-block; }
  /* Metadata secundaria del topbar (ej. versión/fecha de instalación en el
     panel Super Admin): en mobile no entra junto con usuario+salir sin
     forzar wrap o recorte, así que se omite -- sigue disponible en "Mi
     cuenta" para quien la necesite. */
  .topbar-meta { display: none; }
}
#btn-vender-fijo:hover { background: var(--verde-oscuro); color: #fff; text-decoration: none; }
.navbar a {
  color: #454B47;
  padding: 7px 13px;
  display: inline-block;
  font-size: 13px;
  font-weight: 590;
  letter-spacing: -0.005em;
  border-radius: var(--radio-pill);
  transition: background .18s var(--easing), color .18s var(--easing);
}
.navbar a:hover {
  background: var(--surface-hundida);
  color: var(--ink);
  text-decoration: none;
}
.navbar a.activo, .navbar a:active {
  background: var(--brass-light);
  color: var(--brass-dark);
}

/* Vender es la acción más usada del día a día: se destaca del resto */
.navbar a.nav-destacado {
  background: var(--verde);
  color: #fff;
  margin: 0 3px;
  box-shadow: 0 3px 12px rgba(22,132,91,.2);
}
.navbar a.nav-destacado:hover {
  background: var(--verde-oscuro);
  color: #fff;
}
.navbar a.nav-destacado.activo { background: var(--verde-oscuro); color: #fff; box-shadow: 0 0 0 3px rgba(22,132,91,.14); }

/* Menú desplegable "Administración": agrupa las funciones de admin */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown summary {
  color: #454B47;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 590;
  letter-spacing: -0.005em;
  border-radius: var(--radio-pill);
  cursor: pointer;
  list-style: none;
  transition: background .18s var(--easing), color .18s var(--easing);
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary:hover {
  background: var(--surface-hundida);
  color: var(--ink);
}
.nav-dropdown[open] summary, .nav-dropdown.activo summary {
  background: var(--brass-light);
  color: var(--brass-dark);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-elevada);
  min-width: 200px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 6px;
}
.nav-dropdown-menu a {
  color: var(--texto) !important;
  padding: 8px 12px !important;
  font-weight: 500 !important;
  border-radius: var(--radio-chico) !important;
}
.nav-dropdown-menu a:hover {
  background: rgba(0,0,0,.05) !important;
  color: var(--ink) !important;
}

/* Menú de acciones por fila (ej. Superadmin > Negocios): agrupa varias
   acciones detrás de un desplegable en vez de una fila larga de botones.
   Usa <details>/<summary> como el menú de navegación de arriba, pero con
   position:fixed en vez de absolute -- vive dentro de una tabla con
   overflow-x:auto, y eso fuerza overflow "auto" también en el otro eje
   (no solo el que se declaró), así que un menú absoluto que se pase del
   alto visible del contenedor quedaría recortado. La posición fixed se
   calcula por JS en cada apertura (ver script de la página que lo usa). */
.menu-acciones-fila { position: relative; display: inline-block; }
.menu-acciones-fila summary { list-style: none; }
.menu-acciones-fila summary::-webkit-details-marker { display: none; }
.menu-acciones-fila-lista {
  /* display:none explícito: un descendiente position:fixed de un <details>
     cerrado puede quedar visible igual según el navegador, así que no
     alcanza con dejar la ocultación implícita al <details> -- se controla
     a mano con el selector [open] de abajo. */
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-elevada);
  min-width: 210px;
  z-index: 300;
  flex-direction: column;
  padding: 6px;
}
.menu-acciones-fila[open] .menu-acciones-fila-lista { display: flex; }
.menu-acciones-fila-lista a,
.menu-acciones-fila-lista button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radio-chico);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--texto);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.menu-acciones-fila-lista a:hover,
.menu-acciones-fila-lista button:hover { background: rgba(0,0,0,.06); }
.menu-acciones-fila-lista form { margin: 0; }
.menu-acciones-fila-lista .texto-rojo { color: var(--rojo); }
.menu-acciones-fila-lista .texto-verde { color: var(--verde); }

/* Desplegable de multi-selección (ej. filtro de clientes en Cuentas
   corrientes): reemplaza un <select multiple> siempre abierto -- que ocupa
   una caja larga mostrando todas las opciones todo el tiempo -- por un
   control cerrado que solo muestra un resumen ("Todos los clientes", "3
   clientes seleccionados") hasta que se lo abre. Mismo mecanismo de
   <details>/<summary> + position:fixed que .menu-acciones-fila, pero acá
   NO se cierra solo al tildar un checkbox (a diferencia de un link que
   navega, tildar varias opciones seguidas es el uso normal).*/
.multiselect-desplegable { position: relative; }
.multiselect-desplegable summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  background: var(--surface-hundida);
  color: var(--texto);
  font-size: 15px;
  cursor: pointer;
}
.multiselect-desplegable summary::-webkit-details-marker { display: none; }
.multiselect-desplegable summary::after { content: "▾"; color: var(--texto-muted); font-size: 12px; flex-shrink: 0; }
.multiselect-desplegable[open] summary {
  outline: none;
  box-shadow: 0 0 0 1px var(--border-fuerte), 0 0 0 4px rgba(79,95,232,.16);
}
.multiselect-desplegable-lista {
  /* display:none explícito (no basta con dejarlo implícito al <details>
     cerrado): un descendiente position:fixed puede quedar visible igual
     aunque el <details> esté cerrado, según el navegador -- por eso se
     controla a mano con el selector [open] de abajo. */
  display: none;
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-elevada);
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 300;
  padding: 6px;
}
.multiselect-desplegable[open] .multiselect-desplegable-lista { display: block; }
.multiselect-desplegable-lista label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 10px;
  border-radius: var(--radio-chico);
  font-weight: normal;
  font-size: 13.5px;
  cursor: pointer;
}
.multiselect-desplegable-lista label:hover { background: rgba(0,0,0,.05); }
.multiselect-desplegable-lista input[type="checkbox"] { width: auto; }

.contenido {
  padding: 24px 20px 48px;
  max-width: 1320px;
  margin: 0 auto;
}
/* Para pantallas con tablas anchas y densas (ej. Caja) que en monitores
   grandes quedaban con mucho margen libre a los costados y encima
   necesitaban scroll horizontal -- no es "ancho de borde a borde", sigue
   habiendo un máximo razonable, solo más generoso. */
.contenido.contenido-ancho { max-width: 1680px; }

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px;
  margin-bottom: 18px;
  transition: box-shadow .25s var(--easing);
}

/* Subsección liviana dentro de una tarjeta (ej. "Es fraccionable"/"Es un
   combo" en Productos, un bloque que se expande al tildar un checkbox):
   NO es una tarjeta nueva -- sin sombra ni radio grande, para no apilar
   "cajas dentro de cajas". Alcanza con un borde sutil y fondo apenas
   distinto para marcar que es un grupo aparte. */
.subseccion {
  border: 1px solid var(--border);
  border-radius: var(--radio-chico);
  background: var(--surface-hundida);
  padding: 14px 16px;
  margin-top: 12px;
}

.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

/* Encabezado de pantalla: título (+ subtítulo opcional) a la izquierda,
   acción primaria a la derecha (ver ui_guidelines.md #58-59). Reutilizable
   en cualquier listado, no exclusivo de un panel. */
.encabezado-pantalla {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.encabezado-pantalla h2 { margin: 0; }
.encabezado-pantalla p { margin: 4px 0 0; color: var(--texto-muted); font-size: 13.5px; }

.metric { text-align: center; overflow: hidden; }
/* Modificador semántico para un valor de métrica que requiere atención
   (ej. "Suspendidos" > 0) -- evita repetir un color condicional inline en
   cada pantalla que necesite este mismo patrón. */
.metric .valor.valor-alerta { color: var(--rojo-oscuro); }
.metric .valor {
  font-family: var(--fuente-numeros);
  font-size: clamp(18px, 4.5vw, 28px);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1.15;
}
.metric .etiqueta {
  color: var(--texto-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 650;
  margin-top: 4px;
}

/* ---------- Formularios ---------- */
label { display: block; margin: 8px 0 4px; font-weight: 600; font-size: 12.5px; color: var(--ink-2); letter-spacing: 0.01em; }
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  font-size: 15px;
  font-family: var(--fuente-cuerpo);
  background: var(--surface-hundida);
  color: var(--texto);
  transition: background .15s var(--easing), box-shadow .15s var(--easing);
}
/* El min-height de blanco táctil no se le aplica a checkbox/radio/range/file
   -- son controles nativos chicos por diseño, y ya reciben width:auto por
   estilo inline en cada instancia (si no, heredarían el width:100% de
   arriba y se estirarían a todo el ancho). Agrandarlos con min-height los
   rompería visualmente. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select, textarea {
  min-height: 44px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-fuerte), 0 0 0 4px rgba(22,122,85,.14);
}
input::placeholder { color: #9A9AA0; }

.form-fila { display: flex; gap: 12px; flex-wrap: wrap; }
.form-fila > div { flex: 1; min-width: 150px; }
/* Celda de una .form-fila que no tiene label+input (ej. un botón de enviar,
   o un checkbox suelto) -- se hunde al fondo para quedar a la misma altura
   que el input de sus vecinos, que sí tienen label arriba. */
.form-fila-accion { align-self: flex-end; }

/* Un solo checkbox con su texto al lado (no un campo de formulario normal
   con label arriba) -- reemplaza el
   style="display:flex; align-items:center; gap:8px; font-weight:normal;"
   que se repetía igual en varias pantallas. */
.opcion-checkbox { display: flex; align-items: center; gap: 8px; font-weight: normal; }

/* Texto de ayuda/contexto chico, cerca de un control o sección puntual
   (distinto del subtítulo de pantalla, que usa .encabezado-pantalla p) --
   reemplaza el style="color:var(--texto-muted); font-size:12-13px;" que se
   repetía igual en varios formularios. */
.texto-ayuda { color: var(--texto-muted); font-size: 13px; }

/* Tarjeta que necesita destacarse como alerta o advertencia (ej. negocios
   en riesgo de suspensión, confirmación de una acción destructiva) --
   reemplaza el style="border-color:var(--rojo)" / var(--naranja) que se
   repetía igual en varias pantallas. Mismo fondo/sombra de .tarjeta, solo
   cambia el borde. */
.tarjeta-alerta { border-color: var(--rojo); }
.tarjeta-advertencia { border-color: var(--naranja); }

/* Fila de botones sueltos (ej. "Accesos rápidos", acciones arriba de un
   listado) -- sin esto, varios .btn seguidos solo tienen el espacio en
   blanco del HTML entre ellos, que colapsa a muy poco y se ven pegoteados. */
.fila-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Encabezado chico de subsección dentro de un formulario/tarjeta (ej.
   "Efectivo y transferencia" en Caja, "Precio y stock" en Productos), y una
   grilla de campos alineados en columnas parejas para usar debajo. */
.titulo-grupo {
  margin: 16px 0 6px;
  color: var(--texto-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.titulo-grupo:first-child { margin-top: 0; }
/* En "Cerrar caja" el label es solo el nombre del medio (título corto, no
   se envuelve); el monto esperado va en su propia línea aparte, siempre
   debajo -- así el input de cada campo arranca a la misma altura sin
   importar el largo del nombre del medio, sin depender de un min-height. */
.texto-esperado { color: var(--texto-muted); font-size: 12px; margin: 2px 0 6px; }
.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* ---------- Botones ---------- */
/* Los <button> nativos no heredan font-family/line-height del body por
   default del navegador (usan la fuente y el line-height del sistema) --
   sin esto, un <button class="btn"> mide distinto que un <a class="btn">
   con el mismo padding, y quedan desalineados entre sí en una fila. */
button { font-family: inherit; line-height: inherit; }
.btn {
  display: inline-block;
  vertical-align: middle;
  min-height: 42px;
  padding: 12px 20px;
  border-radius: var(--radio-chico);
  border: none;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  transition: background .15s var(--easing), transform .12s var(--easing), box-shadow .2s var(--easing);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn:hover { background: var(--ink-3); text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.btn:active { transform: scale(.96); }
.btn:disabled, .btn:disabled:hover {
  background: #D3D3D8;
  color: #97979D;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn-verde { background: var(--verde); }
.btn-verde:hover { background: var(--verde-oscuro); }
.btn-rojo { background: var(--rojo); }
.btn-rojo:hover { background: var(--rojo-oscuro); }
.btn-naranja { background: var(--naranja); }
.btn-gris { background: #6B7280; color: #fff; }
.btn-grande { font-size: 17px; padding: 14px; width: 100%; border-radius: var(--radio-chico); }
/* .btn-chico es la variante compacta para celdas de acciones en tablas
   densas -- NO debe heredar el min-height de .btn (pensado para botones
   grandes/táctiles), o queda tan alto como uno grande pero con texto
   chico, y varios uno al lado del otro se ven desalineados entre sí. */
.btn-chico { font-size: 12.5px; padding: 5px 12px; min-height: 0; vertical-align: middle; }
/* Las celdas de acciones combinan <a class="btn">, <button> sueltos y
   <form style="display:inline"> con un botón adentro -- sin esto, el form
   (que no tiene alto propio) puede alinearse distinto al resto y verse un
   escalón más arriba o abajo. Solo afecta forms DENTRO de una celda de
   tabla, no los formularios normales de página. */
td form { display: inline-block; vertical-align: middle; }
.btn-secundario { background: rgba(0,0,0,.05); color: var(--ink-2); box-shadow: none; }
.btn-secundario:hover { background: rgba(0,0,0,.08); color: var(--ink); box-shadow: none; }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13.5px;
}
th {
  background: var(--surface-hundida);
  color: var(--texto-muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 650;
}
tr { transition: background .12s var(--easing); }
tr:hover td { background: var(--surface-hundida); }
.tabla-scroll { overflow-x: auto; }
.tabla-compacta th, .tabla-compacta td { padding: 6px 10px; }

/* ---------- Mensajes ---------- */
.mensaje { padding: 12px 16px; border-radius: var(--radio-chico); margin-bottom: 14px; font-size: 14px; border-left: 3px solid transparent; box-shadow: var(--sombra); }
.mensaje.ok { background: #E7F8F1; color: var(--verde-oscuro); border-left-color: var(--verde); }
.mensaje.error { background: #FDECEB; color: var(--rojo-oscuro); border-left-color: var(--rojo); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: white;
  white-space: nowrap;
}
/* En la barra de usuario mobile hay poco lugar: se muestra la versión
   abreviada del estado de caja ("C. abierta") en vez de la completa. */
.badge-caja-corta { display: none; }
@media (max-width: 760px) {
  .badge-caja-larga { display: none; }
  .badge-caja-corta { display: inline-block; }
}
.badge-verde { background: var(--verde); }
.badge-rojo { background: var(--rojo); }
.badge-naranja { background: var(--naranja); }
.badge-amarillo { background: var(--amarillo); color: #4A3300; }
.badge-gris { background: var(--gris); }

/* ---------- Login ---------- */
.login-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 15%, rgba(79,95,232,.25), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(232,162,61,.12), transparent 40%),
    linear-gradient(160deg, var(--ink), #000);
  padding: 20px;
}
.login-caja {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  padding: 38px 34px 30px;
  border-radius: 24px;
  width: 380px;
  box-shadow: var(--sombra-elevada);
  border: 1px solid rgba(255,255,255,.5);
}
.login-marca { text-align: center; margin-bottom: 8px; }
.login-marca h1 {
  font-size: 26px;
  margin: 0;
  color: var(--ink);
  font-weight: 650;
}
.login-marca h1 em { font-style: normal; color: var(--brass); }
.login-subtitulo { color: var(--texto-muted); font-size: 12.5px; margin: 4px 0 0; letter-spacing: 0.02em; text-transform: uppercase; }

.login-caja .btn {
  background: var(--brass);
  box-shadow: 0 4px 16px var(--brass-glow);
}
.login-caja .btn:hover { background: var(--brass-dark); box-shadow: 0 6px 20px var(--brass-glow); }

/* Login interno compacto (Super Admin, Staff): una tarjeta chica centrada
   sobre el fondo neutro normal, dentro del .contenido de siempre -- a
   diferencia de .login-wrap/.login-caja (login de negocio, pantalla
   completa con fondo oscuro), estos paneles no tienen esa escenografía. */
.panel-login { max-width: 360px; margin: 60px auto; }
.panel-login h2 { text-align: center; }

.selector-vendedor {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.selector-vendedor label {
  border: 1px solid transparent;
  background: var(--surface-hundida);
  padding: 10px;
  border-radius: var(--radio-chico);
  text-align: center;
  cursor: pointer;
  margin: 0;
  font-weight: normal;
  transition: background .15s var(--easing);
}
.selector-vendedor input:checked + label,
.selector-vendedor label:has(input:checked) {
  background: var(--brass-light);
  color: var(--brass-dark);
  font-weight: 600;
}
.selector-vendedor input { display: none; }

/* ---------- POS ---------- */
/* Grid por áreas nombradas (en vez de solo columnas): permite que
   "especiales" se ubique en un lugar en desktop (bloque inferior de la
   columna izquierda, compacto) y en OTRO orden visual en mobile/tablet
   (después de carrito/cobrar) sin duplicar markup ni depender del orden en
   el DOM -- el HTML puede declarar los 3 bloques en cualquier orden, el CSS
   decide dónde cae cada uno en cada tamaño. */
.pos-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  grid-template-areas:
    "buscador   carrito"
    "especiales carrito";
  align-content: start;
  gap: 16px;
}
.pos-layout > .pos-buscador { grid-area: buscador; }
.pos-layout > .pos-area-carrito { grid-area: carrito; }
.pos-layout > .pos-especiales { grid-area: especiales; }
.grid-caja-retiro { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* Esta regla de mobile tiene que ir DESPUÉS de la base de arriba: con igual
   especificidad (misma clase), gana la que aparece más abajo en el
   archivo -- si quedaba antes, la base la pisaba y en mobile "Retirar
   dinero" seguía angosto al costado en vez de apilarse debajo. */
@media (max-width: 900px) {
  .pos-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "buscador" "carrito" "especiales";
  }
  .grid-caja-retiro { grid-template-columns: 1fr; }
}
.pos-buscador input { font-size: 19px; padding: 14px; }
.pos-sugerencias {
  border: 1px solid var(--border);
  border-radius: var(--radio-chico);
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  max-height: 260px;
  overflow-y: auto;
  box-shadow: var(--sombra-elevada);
  margin-top: 6px;
}
.pos-sugerencias div { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; }
.pos-sugerencias div:hover { background: var(--surface-hundida); }

/* "Operaciones especiales" (Vales/Devoluciones/Crédito): una única tarjeta
   compacta y colapsada por defecto, subordinada a la operación principal
   (buscar -> carrito -> cobrar) -- NO una tarjeta grande que contiene otras
   tres tarjetas grandes. Cada operación adentro es un .subseccion liviano,
   nunca otra .tarjeta (evita "cajas dentro de cajas"). */
.pos-especiales { padding: 14px 16px; }
.pos-especiales-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.pos-especiales-flecha { color: var(--texto-muted); transition: transform .15s var(--easing); }
.pos-especiales-toggle.abierta .pos-especiales-flecha { transform: rotate(180deg); }
/* display se controla por clase (.abierta), no por inline style, para que
   la regla de grid en desktop (más abajo) pueda ganarle -- un display
   puesto por JS como style.display="block" tendría prioridad inline sobre
   CUALQUIER regla de hoja de estilos, incluida la del media query. */
.pos-especiales-body { margin-top: 12px; display: none; gap: 12px; }
.pos-especiales-body.abierta { display: flex; flex-direction: column; }
.pos-especiales-body .subseccion { margin-top: 0; }

/* Resultado de consultar un crédito (código/estado/saldo) dentro de la
   subsección "Crédito a favor" -- separador liviano, no otra caja anidada. */
.pos-credito-resultado { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }

/* Fila de "Forma de resolución del saldo" de una devolución: cada opción es
   una fila clickable entera (no un radio suelto con texto al lado), con el
   importe de esa opción alineado a la derecha. El estado seleccionado se
   resuelve solo con CSS, mismo patrón que .selector-vendedor más arriba. */
.fila-opciones-reintegro { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fila-opcion-reintegro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radio-chico);
  background: var(--surface-hundida);
  cursor: pointer;
  font-weight: normal;
  margin: 0;
  transition: background .15s var(--easing), border-color .15s var(--easing);
}
.fila-opcion-reintegro input[type="radio"] { width: auto; min-height: 0; flex: 0 0 auto; }
.fila-opcion-reintegro:has(input:checked) {
  background: var(--surface);
  border-color: var(--border-fuerte);
}
.fila-opcion-texto { flex: 1; }
.fila-opcion-monto { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

#carrito {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
}

.carrito-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  font-size: 13.5px;
  gap: 8px;
  flex-wrap: wrap;
}
/* El nombre del producto puede ser largo -- que se achique/ajuste él solo,
   pero el precio y el botón de borrar (2do div de cada fila) NUNCA se
   aprietan ni se ocultan, quedan siempre fijos y legibles al lado. */
.carrito-item > div:first-child { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.carrito-item > div:last-child { flex: 0 0 auto; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.carrito-item input.cant { width: 56px; padding: 5px; }

@media (max-width: 480px) {
  .carrito-item {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 0;
  }
  .carrito-item > div:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .carrito-item input.cant { width: 70px; padding: 8px; font-size: 15px; }
  .carrito-item .btn-chico { padding: 8px 12px; font-size: 14px; }
}

.total-grande {
  font-family: var(--fuente-numeros);
  font-size: 36px;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  margin: 12px 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.total-grande #total { color: var(--oro-oscuro); }

/* ---------- Gráficos simples (barras) ---------- */
.barra-fila { display: flex; align-items: center; margin-bottom: 9px; font-size: 13px; }
.barra-nombre { width: 180px; flex-shrink: 0; color: var(--texto); }
.barra-fondo { flex: 1; background: var(--surface-hundida); border-radius: var(--radio-pill); overflow: hidden; height: 16px; margin: 0 10px; }
.barra-relleno { background: linear-gradient(90deg, var(--brass-dark), var(--brass)); height: 100%; border-radius: var(--radio-pill); }
.barra-valor { width: 110px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--texto-muted); }

.stock-critico { background: #FDECEB !important; }
.stock-bajo { background: #FEF6E4 !important; }
.stock-ok { background: #EAF8F1 !important; }
.leyenda-stock { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--texto-muted); margin-bottom:10px; }
.leyenda-stock span { display:inline-flex; align-items:center; gap:5px; }
.punto-leyenda { width:9px; height:9px; border-radius:50%; display:inline-block; }

.alerta-stock { color: var(--rojo-oscuro); font-weight: 700; }
.no-datos { color: var(--texto-muted); font-style: italic; padding: 10px 0; }

/* ===== Mejora POS/historial: visibilidad de inputs, islas, alineación ===== */
/* .subseccion y los inputs comparten por defecto el mismo fondo
   (var(--surface-hundida)) y se funden visualmente -- dentro de
   "Operaciones especiales" específicamente, los campos editables pasan a
   fondo blanco real para que se note de inmediato dónde se puede escribir.
   El estado focus ya lo resuelve la regla global de más arriba (fondo
   blanco + anillo de color); acá solo se agregan hover/disabled, que no
   existían para inputs en ningún lado del sistema. */
.pos-especiales input:not([type="checkbox"]):not([type="radio"]),
.pos-especiales select,
.pos-especiales textarea {
  background: var(--surface);
  border: 1px solid var(--border);
}
.pos-especiales input:not([type="checkbox"]):not([type="radio"]):hover,
.pos-especiales select:hover,
.pos-especiales textarea:hover {
  border-color: var(--border-fuerte);
}
.pos-especiales input:disabled,
.pos-especiales select:disabled,
.pos-especiales textarea:disabled {
  background: var(--surface-hundida);
  color: var(--texto-muted);
  cursor: not-allowed;
  opacity: .7;
}

/* Cada operación especial (vales / devoluciones / crédito) como una "isla"
   claramente separada: más gap entre subsecciones, un poco más de padding,
   y una sombra MUY sutil (mismo token que .tarjeta, --sombra) para
   levantarlas apenas del fondo sin convertirlas en tarjetas nuevas. En
   desktop/tablet se acomodan en columnas para aprovechar el ancho
   disponible; en mobile vuelven a apilarse (mismo corte de 900px que ya usa
   .pos-layout). */
.pos-especiales-body.abierta { gap: 20px; }
.pos-especiales-body .subseccion {
  padding: 16px 18px;
  box-shadow: var(--sombra);
}
@media (min-width: 901px) {
  .pos-especiales-body.abierta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
  }
}

/* Alineación numérica consistente en columnas de importe (historial de
   ventas, comprobantes pendientes de la ficha de cliente). */
.col-numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Listado de vales: antes toda la tabla forzaba white-space:nowrap, lo que
   también le impedía envolver a la celda de Acciones (hasta 4 controles
   distintos) -- por eso el extremo derecho de la fila terminaba fuera de
   pantalla. Ahora el nowrap se aplica solo a las celdas que realmente lo
   necesitan (código, monto, fecha+vendedor, estado); Acciones puede
   envolver sus botones libremente en cualquier tamaño de pantalla. El
   overflow horizontal de .tabla-scroll queda como red de seguridad
   explícita, no como única solución. */
.tabla-vales .nowrap { white-space: nowrap; }
.fila-acciones-tabla { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------- Panel principal premium ---------- */
.contenido-dashboard { max-width: 1460px; padding-top: 34px; }
.dashboard-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 26px;
}
.dashboard-cabecera h2 { font-size: clamp(30px, 3vw, 40px); margin: 2px 0 3px; letter-spacing: -.035em; }
.dashboard-cabecera p { margin: 0; color: var(--texto-muted); font-size: 15px; }
.dashboard-eyebrow {
  display: block; color: var(--brass-dark); font-size: 10.5px; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 2px;
}
.dashboard-aviso {
  display: flex; align-items: center; gap: 13px; padding: 15px 16px; margin-bottom: 12px;
  border: 1px solid; border-radius: 14px; font-size: 13.5px;
}
.dashboard-aviso > div { flex: 1; min-width: 0; }
.dashboard-aviso-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; color: #fff; font-size: 14px; font-weight: 800; flex: 0 0 auto;
}
.dashboard-aviso-error { background: #FFF7F6; border-color: #F2C0BC; color: #8F2823; }
.dashboard-aviso-error .dashboard-aviso-icono { background: var(--rojo); }
.dashboard-aviso-advertencia { background: #FFF9EF; border-color: #F0D09B; color: #885712; }
.dashboard-aviso-advertencia .dashboard-aviso-icono { background: var(--naranja); }
.dashboard-aviso .btn-aviso { background: transparent; color: currentColor; border: 1px solid currentColor; box-shadow: none; }
.dashboard-aviso .btn-aviso:hover { background: rgba(255,255,255,.7); color: currentColor; }

.dashboard-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 22px 0 16px;
}
.dashboard-kpi {
  display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sombra);
}
.dashboard-kpi-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 14px; background: #E7F5EF; color: var(--brass); font-family: var(--fuente-numeros);
  font-size: 22px; font-weight: 650; flex: 0 0 auto;
}
.dashboard-kpi > div { min-width: 0; }
.dashboard-kpi div > span { display: block; color: var(--texto-muted); font-size: 12.5px; font-weight: 550; margin-bottom: 5px; }
.dashboard-kpi strong {
  display: block; color: var(--ink); font-family: var(--fuente-numeros); font-size: clamp(23px, 2vw, 31px);
  line-height: 1.08; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dashboard-kpi small { display: block; margin-top: 7px; color: var(--texto-muted); font-size: 11.5px; line-height: 1.3; }
.dashboard-kpi small.tendencia-positiva { color: var(--verde-oscuro); font-weight: 650; }
.dashboard-kpi small.tendencia-negativa { color: var(--rojo-oscuro); font-weight: 650; }

.dashboard-resumen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden;
}
.dashboard-resumen a { display: grid; gap: 3px; padding: 18px 22px; color: var(--texto); text-decoration: none; }
.dashboard-resumen a + a { border-left: 1px solid var(--border); }
.dashboard-resumen a:hover { background: #FAFBF9; }
.dashboard-resumen span { color: var(--texto-muted); font-size: 12px; }
.dashboard-resumen strong { font-family: var(--fuente-numeros); font-size: 21px; font-variant-numeric: tabular-nums; }
.dashboard-resumen strong.valor-riesgo { color: var(--rojo-oscuro); }
.dashboard-resumen small { color: var(--brass-dark); font-size: 11.5px; font-weight: 600; }

.dashboard-grid-inferior { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 18px; align-items: start; }
.dashboard-grid-inferior > *, .dashboard-columna, .dashboard-panel { min-width: 0; }
.dashboard-grid-inferior > .dashboard-panel-stock { grid-column: 1; grid-row: 1; }
.dashboard-grid-inferior > .dashboard-columna { grid-column: 2; grid-row: 1; }
.dashboard-columna { display: grid; gap: 18px; }
.dashboard-panel { padding: 22px; margin: 0; }
.dashboard-columna .dashboard-panel { margin: 0; }
.dashboard-panel h3 { margin: 1px 0 0; font-size: 18px; }
.dashboard-panel-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.enlace-sutil { color: var(--brass-dark); font-size: 12px; font-weight: 650; white-space: nowrap; }
.enlace-sutil:hover { color: var(--brass); text-decoration: none; }
.dashboard-accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 15px; }
.dashboard-accesos a {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 11px;
  background: var(--surface-hundida); border: 1px solid transparent; border-radius: 11px;
  color: var(--ink-2); font-size: 12.5px; font-weight: 600;
}
.dashboard-accesos a:hover { background: var(--brass-light); border-color: rgba(22,122,85,.12); color: var(--brass-dark); text-decoration: none; }
.dashboard-accesos a span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--brass); font-size: 16px; }
.dashboard-tabla { border-radius: 12px; overflow: hidden; }
.dashboard-tabla td strong { font-size: 13px; }
.dashboard-tabla td small { display: block; color: var(--texto-muted); font-size: 11px; margin-top: 2px; }
.stock-pill { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #FDECEB; color: var(--rojo-oscuro); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dashboard-vacio { display: flex; align-items: center; gap: 12px; min-height: 130px; justify-content: center; color: var(--texto-muted); }
.dashboard-vacio > span, .dashboard-estado-ok > span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E7F8F1; color: var(--verde-oscuro); font-weight: 800; }
.dashboard-vacio strong { color: var(--ink-2); }
.dashboard-vacio p, .dashboard-auditoria p { margin: 2px 0 0; font-size: 12.5px; color: var(--texto-muted); }
.dashboard-estado-ok { display: flex; align-items: center; gap: 10px; margin: 15px 0 13px; }
.dashboard-estado-ok > span { width: 27px; height: 27px; flex: 0 0 auto; }

@media (max-width: 1050px) {
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid-inferior { grid-template-columns: 1fr; }
  .dashboard-grid-inferior > .dashboard-panel-stock,
  .dashboard-grid-inferior > .dashboard-columna { grid-column: 1; grid-row: auto; }
  .dashboard-grid-inferior > .dashboard-panel-stock { order: 1; }
  .dashboard-grid-inferior > .dashboard-columna { order: 2; }
}

@media (max-width: 650px) {
  .contenido-dashboard { padding: 22px 14px 38px; }
  .dashboard-cabecera { align-items: flex-start; margin-bottom: 20px; }
  .dashboard-cabecera h2 { font-size: 30px; }
  .dashboard-cabecera p { font-size: 13.5px; }
  .dashboard-cabecera .btn { min-height: 38px; padding: 9px 13px; font-size: 13px; white-space: nowrap; }
  .dashboard-aviso { align-items: flex-start; flex-wrap: wrap; padding: 13px; }
  .dashboard-aviso > div { flex-basis: calc(100% - 40px); }
  .dashboard-aviso .btn-aviso { margin-left: 37px; }
  .dashboard-kpis { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .dashboard-kpi { display: block; padding: 16px; }
  .dashboard-kpi-icono { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; margin-bottom: 12px; }
  .dashboard-kpi strong { font-size: clamp(19px, 6vw, 25px); white-space: normal; overflow-wrap: anywhere; }
  .dashboard-kpi div > span { min-height: 34px; }
  .dashboard-resumen { grid-template-columns: 1fr; }
  .dashboard-resumen a + a { border-left: 0; border-top: 1px solid var(--border); }
  .dashboard-panel { padding: 17px; }
  .dashboard-panel-cabecera { display: block; }
  .dashboard-panel-cabecera .enlace-sutil { display: inline-block; margin-top: 8px; }
  .dashboard-accesos { grid-template-columns: 1fr 1fr; }
}

.pagina-formulario { max-width: 1080px; }
.pagina-formulario .encabezado-pantalla { margin-bottom: 16px; }
.formulario-principal { padding: clamp(20px, 3vw, 30px); }
.introduccion-pagina { max-width: 780px; margin: -8px 0 18px; color: var(--texto-muted); font-size: 13.5px; }
.pagina-detalle .encabezado-pantalla { margin-bottom: 16px; }
.pagina-detalle > h3 { margin-top: 22px; }
.pagina-detalle > .tarjeta { padding: 20px; }

/* ---------- Sistema visual para pantallas operativas ---------- */
.contenido > h2:first-child { font-size: clamp(28px, 3vw, 36px); letter-spacing: -.035em; margin-bottom: 20px; }
.contenido > h2:first-child + p { color: var(--texto-muted); margin-top: -14px; }
.contenido > .btn + .btn { margin-left: 6px; }
.tarjeta > h3:first-child { margin-top: 0; }
.tarjeta form + form { margin-top: 8px; }
details > summary { color: var(--ink-2); }
.tarjeta > details > summary {
  list-style: none; padding: 2px 0; font-size: 14px; font-weight: 700; cursor: pointer;
}
.tarjeta > details > summary::-webkit-details-marker { display: none; }
.tarjeta > details > summary::after { content: "＋"; float: right; color: var(--brass); font-size: 17px; line-height: 1; }
.tarjeta > details[open] > summary::after { content: "−"; }
.tabla-scroll { border-radius: 12px; scrollbar-width: thin; scrollbar-color: #C8CEC9 transparent; }
.tabla-scroll table { min-width: max-content; }
.tabla-scroll th { position: sticky; top: 0; z-index: 1; }
tbody tr:nth-child(even) td { background: rgba(30,36,32,.012); }
td > .badge + .badge, td > .badge + span { margin-left: 5px; }
.form-fila { align-items: flex-end; }
.form-fila > div > label:first-child { margin-top: 0; }

/* POS: la venta es la tarea principal, con buscador y carrito bien separados. */
.contenido-pos { padding-top: 28px; }
.encabezado-pos { margin-bottom: 16px; }
.pos-layout { grid-template-columns: minmax(0, 1fr) minmax(400px, 480px); grid-template-rows: min-content min-content; gap: 18px; }
.pos-layout > * { min-width: 0; }
.pos-layout > .pos-buscador, .pos-layout > .pos-especiales { align-self: start; }
.pos-buscador {
  position: relative; padding: 18px; border-color: rgba(22,122,85,.15);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFB 100%);
}
.pos-buscador input#buscador {
  min-height: 58px; padding: 15px 17px 15px 46px; border: 1px solid rgba(22,122,85,.16);
  background: #fff; box-shadow: 0 7px 24px rgba(20,28,23,.05); font-size: 18px;
}
.pos-buscador::before {
  content: "⌕"; position: absolute; left: 31px; top: 28px; z-index: 1;
  color: var(--brass); font-size: 25px; line-height: 1;
}
.pos-sugerencias { position: relative; z-index: 25; background: rgba(255,255,255,.98); }
.pos-carrito-panel { padding: 20px; border-color: rgba(22,122,85,.12); }
.pos-carrito-panel > div:first-child { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.pos-carrito-panel h3 { font-size: 19px; }
#carrito { min-height: 120px; max-height: 43vh; margin: 4px 0 10px; }
.carrito-item { padding: 12px 3px; border-bottom-color: rgba(30,36,32,.08); }
.carrito-item:hover { background: #FAFBF9; }
.carrito-item input.cant { background: #fff; border-color: var(--border); }
.total-grande {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; margin: 10px 0 16px;
  padding: 16px 0 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  color: var(--brass-dark); font-size: clamp(30px, 4vw, 40px);
}
.total-grande > span:first-child { margin-right: auto; color: var(--texto-muted); font-family: var(--fuente-cuerpo); font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; }
#medio_pago_wrap { padding: 4px 0 2px; }
#medio_pago_wrap > label:first-child { color: var(--ink); font-size: 13px; }
#medio_pago { background-color: #fff; border-color: var(--border-fuerte); }
#btn_cobrar { min-height: 52px; box-shadow: 0 8px 22px rgba(22,132,91,.22); }
.pos-especiales { border-style: dashed; box-shadow: none; background: rgba(255,255,255,.55); }
.pos-especiales-toggle { color: var(--texto-muted); }

@media (min-width: 901px) {
  .pos-carrito-panel { position: sticky; top: 112px; }
}
@media (max-width: 900px) {
  .pos-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
  .encabezado-pos { margin-bottom: 14px; }
}
@media (max-width: 480px) {
  .contenido-pos { padding-left: 12px; padding-right: 12px; }
  .pos-buscador, .pos-carrito-panel { padding: 15px; }
  .pos-buscador::before { left: 27px; top: 25px; }
  .total-grande { font-size: 30px; }
}

/* Historial: toda la información permanece disponible, con lectura por capas. */
.pagina-historial .encabezado-pantalla { margin-bottom: 16px; }
.panel-filtros { padding: 18px 20px; }
.panel-filtros .form-fila { gap: 14px; }
.panel-tabla { padding: 18px; overflow: auto; }
.pagina-historial .panel-tabla { padding: 0; }
.panel-tabla-cabecera {
  position: sticky; left: 0; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; min-width: min(100%, 680px); padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
.panel-tabla-cabecera h3 { margin: 1px 0 0; font-size: 18px; }
.panel-tabla-cabecera > span { color: var(--texto-muted); font-size: 12px; white-space: nowrap; }
.tabla-historial th, .tabla-historial td { padding: 11px 13px; vertical-align: middle; }
.tabla-historial td:nth-child(2) { color: var(--texto-muted); font-variant-numeric: tabular-nums; }
.tabla-historial td:nth-child(6), .tabla-historial td:nth-child(7) { font-family: var(--fuente-numeros); font-weight: 600; }
.tabla-historial .importe-venta strong { display: block; font-family: var(--fuente-numeros); font-weight: 700; }
.tabla-historial .importe-venta small { display: block; margin-top: 3px; color: var(--texto-muted); font-family: var(--fuente-cuerpo); font-size: 10.5px; font-weight: 500; }
.tabla-historial td:nth-child(8) { white-space: normal; min-width: 250px; }
.tabla-historial td:nth-child(8) form, .tabla-historial td:nth-child(8) a { margin: 3px 2px 3px 0; }

/* Caja: la columna de retiro nunca fuerza anchos que recorten los selects. */
.grid-caja-retiro { grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr); gap: 18px; }
.grid-caja-retiro > .tarjeta { min-width: 0; overflow: visible; }
.caja-resumen-panel > .grid-tarjetas .tarjeta { box-shadow: none; background: var(--surface-hundida); }
.caja-retiro-panel { position: relative; z-index: 3; }
#form-retiro-caja .form-fila { display: grid; grid-template-columns: 1fr; gap: 10px; }
#form-retiro-caja .form-fila > div { min-width: 0; width: 100%; }
#form-retiro-caja select { width: 100%; min-width: 0; white-space: normal; text-overflow: ellipsis; }
#form-retiro-caja input { max-width: none !important; }
.caja-retiro-panel table { margin-top: 14px !important; }
@media (max-width: 1050px) { .grid-caja-retiro { grid-template-columns: 1fr; } }

/* Listados, filtros y formularios de todos los módulos del negocio. */
.pagina-listado .encabezado-pantalla { margin-bottom: 16px; }
.barra-acciones-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.encabezado-pantalla .barra-acciones-pagina { justify-content: flex-end; }
.panel-filtros { background: rgba(255,255,255,.84); box-shadow: none; border-color: rgba(30,36,32,.1); }
.panel-filtros input, .panel-filtros select, .panel-filtros .multiselect-desplegable > summary { background-color: #fff; border-color: var(--border); }
.metric-destacada {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  text-align: left; padding: 20px 22px; border-color: rgba(22,122,85,.14);
  background: linear-gradient(135deg, #FFFFFF, #F4FAF7);
}
.metric-destacada .valor { color: var(--brass-dark); font-size: clamp(28px, 4vw, 38px); }
.metric-destacada .etiqueta { max-width: 420px; margin-top: 0; text-align: right; }
.pagina-productos > details {
  padding: 14px 16px; margin: 12px 0 16px !important; background: rgba(255,255,255,.65);
  border: 1px solid var(--border); border-radius: 13px;
}
.pagina-productos > details > summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
.pagina-productos .leyenda-stock { margin: 0 0 12px; }
.pagina-productos .panel-tabla { margin-top: 14px; }

/* Formularios extensos: grupos claros y ancho legible, sin cajas pesadas. */
.contenido:not(.contenido-ancho) > .tarjeta:only-of-type { max-width: 980px; }
.tarjeta .titulo-grupo {
  padding-top: 14px; margin-top: 22px; border-top: 1px solid var(--border);
  color: var(--brass-dark); letter-spacing: .075em;
}
.tarjeta .titulo-grupo:first-child { padding-top: 0; border-top: 0; }
.grid-form { gap: 14px; }
.grid-form > div, .form-fila > div { min-width: 0; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--border-fuerte); }
select { cursor: pointer; }
.pos-sugerencias > div.activa { background: var(--verde-claro, #e7f4ee); color: var(--verde-oscuro, #17352b); outline: 2px solid var(--verde); outline-offset: -2px; }
.opcion-check { display:flex; align-items:flex-start; gap:9px; margin:10px 0; font-weight:normal; }
.opcion-check input { width:auto; margin-top:3px; }

@media (max-width: 650px) {
  .encabezado-pantalla { display: block; }
  .encabezado-pantalla .barra-acciones-pagina { justify-content: flex-start; margin-top: 14px; }
  .encabezado-pantalla .barra-acciones-pagina .btn { flex: 1 1 auto; }
  .metric-destacada { display: block; }
  .metric-destacada .etiqueta { margin-top: 7px; text-align: left; }
  .panel-tabla { padding: 12px; }
  .pagina-historial .panel-tabla { padding: 0; }
}
/* Superficies internas de operación MODOSMART */
.interfaz-interna { background: #f4f7f6; }
.contenido-interno { padding-top: 30px; padding-bottom: 56px; }
.interfaz-interna .topbar { border-bottom-color: #e4ebe8; }
.interfaz-interna .navbar { box-shadow: 0 8px 24px rgba(17, 48, 38, .035); }
.interfaz-interna .navbar-compacta { justify-content: flex-start; }
.interfaz-interna .encabezado-pantalla { margin-bottom: 22px; }
.interfaz-interna .encabezado-pantalla h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }
.interfaz-interna .eyebrow { display: block; margin-bottom: 7px; color: #167455; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.interfaz-interna .tarjeta { border-color: #e1e9e6; box-shadow: 0 8px 28px rgba(21, 53, 43, .045); }
.interfaz-interna .panel-tabla { padding: 0; overflow: hidden; }
.interfaz-interna .panel-tabla.tabla-scroll { overflow-x: auto; }
.interfaz-interna .panel-tabla table { margin: 0; }
.interfaz-interna .panel-tabla th { background: #f7faf9; color: #52625c; font-size: 11px; letter-spacing: .055em; text-transform: uppercase; }
.interfaz-interna .panel-tabla td { border-top-color: #edf1ef; }
.interfaz-interna .panel-tabla tr:hover td { background: #fbfdfc; }
.interfaz-interna .panel-filtros { padding: 16px 18px; border: 1px solid #e1e9e6; border-radius: 16px; background: #fff; }
.interfaz-interna .panel-login { max-width: 430px; margin: 72px auto; text-align: center; }
.interfaz-interna .panel-login .login-marca { display: inline-block; margin-bottom: 12px; color: var(--brass-dark); font-family: var(--fuente-display); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.interfaz-interna .panel-login > h2 { margin-bottom: 7px; font-size: 28px; }
.interfaz-interna .panel-login > p { margin: 0 0 22px; color: var(--texto-muted); font-size: 13.5px; }
.interfaz-interna .panel-login .tarjeta { padding: 26px; text-align: left; }
.interfaz-interna .panel-login .btn-grande { width: 100%; justify-content: center; }
@media (max-width: 700px) {
  .contenido-interno { padding-top: 22px; }
  .interfaz-interna .encabezado-pantalla { align-items: stretch; }
  .interfaz-interna .encabezado-pantalla > .btn { width: 100%; justify-content: center; }
}

/* Segunda pasada: detalles, analítica y formularios con acciones compactas. */
.campo-con-acciones { align-items: flex-end; flex-wrap: wrap; gap: 9px; }
.campo-con-acciones .campo-con-acciones-input { flex: 1 1 280px; }
.campo-con-acciones .campo-con-acciones-boton { flex: 0 0 auto; }
.campo-con-acciones .btn { min-height: 42px; white-space: nowrap; }
.barra-acciones-detalle { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.detalle-resumen > p { display: grid; grid-template-columns: minmax(150px, .38fr) 1fr; gap: 16px; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--border); }
.detalle-resumen > p:last-of-type { border-bottom: 0; }
.tabla-detalle-principal { margin-top: 16px; }
.detalle-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.detalle-kpis .tarjeta { margin: 0; padding: 18px; }
.detalle-kpis .valor { font-size: 28px; }
.detalle-secciones-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.detalle-secciones-grid .detalle-seccion { margin: 0; min-width: 0; }
.detalle-secciones-grid .detalle-seccion-ancha { grid-column: 1 / -1; }
.detalle-seccion > h3 { padding: 18px 20px 12px; margin: 0; }
.detalle-seccion > .no-datos { padding: 0 20px 18px; }
.pagina-analitica .encabezado-pantalla { margin-bottom: 18px; }
.pagina-analitica .panel-analitico { padding: 22px; }
.pagina-analitica .grid-graficos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.pagina-analitica .grid-graficos > div { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: #fff; }
.pagina-analitica .kpis-analitica { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pagina-analitica .kpis-analitica .metric { min-width: 0; }
.pagina-analitica .kpis-analitica .valor { font-size: clamp(21px,2.4vw,31px); overflow-wrap: anywhere; }
.pagina-finanzas .panel-registro-gasto .form-fila { align-items: end; }
.formulario-interno { max-width: 660px; padding: 26px; }
.acciones-cliente { max-width: none; display: grid; grid-template-columns: minmax(280px,1fr) auto auto; align-items: end; gap: 10px; }
.acciones-cliente h3 { grid-column: 1 / -1; margin: 0; }
.acciones-cliente form { min-width: 0; }
.acciones-cliente > a { margin: 0 !important; white-space: nowrap; }
.seccion-cuenta { padding: 0 !important; overflow: hidden; }
.seccion-cuenta > h3, .seccion-cuenta > p:not(.no-datos) { padding-left: 20px; padding-right: 20px; }
.seccion-cuenta > h3 { padding-top: 18px; margin-top: 0; }
.seccion-cuenta > .tabla-scroll { border-radius: 0; }
.panel-accion-staff { border-left: 3px solid var(--brass-light); }
.linea-tiempo-staff > div { position: relative; padding: 12px 0 12px 22px !important; }
.linea-tiempo-staff > div::before { content:""; position:absolute; left:4px; top:18px; width:8px; height:8px; border-radius:50%; background:var(--brass); }
.linea-tiempo-staff > div::after { content:""; position:absolute; left:7px; top:27px; bottom:-13px; width:2px; background:var(--brass-light); }
.linea-tiempo-staff > div:last-of-type::after { display:none; }

@media (max-width: 900px) {
  .detalle-kpis, .pagina-analitica .kpis-analitica { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detalle-secciones-grid, .pagina-analitica .grid-graficos { grid-template-columns: 1fr; }
  .acciones-cliente { grid-template-columns: 1fr 1fr; }
  .acciones-cliente form { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .campo-con-acciones .campo-con-acciones-input { flex-basis: 100%; }
  .campo-con-acciones .campo-con-acciones-boton { flex: 1 1 calc(50% - 5px); }
  .campo-con-acciones .campo-con-acciones-boton .btn { width: 100%; justify-content: center; }
  .detalle-resumen > p { display: block; }
  .detalle-resumen > p strong { display: block; margin-bottom: 3px; }
  .detalle-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detalle-kpis .tarjeta { padding: 14px; }
  .detalle-kpis .valor { font-size: 23px; }
  .pagina-analitica .kpis-analitica { grid-template-columns: 1fr 1fr; }
  .acciones-cliente { grid-template-columns: 1fr; }
  .acciones-cliente > a { width: 100%; justify-content: center; white-space: normal; }
}

.dashboard-toggle-solo { width:24px; min-height:24px; cursor:pointer; }
.dashboard-toggle-solo::marker { color:var(--verde); font-size:15px; }
.compra-proveedor-destacado { border-left:4px solid var(--verde); }
.compra-proveedor-destacado select { max-width:520px; }
.compra-pagos-panel #lista-pagos-compra { display:grid; gap:8px; }
.compra-pagos-panel #lista-pagos-compra .carrito-item {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,auto) 38px;
  align-items:center; gap:12px;
}
.compra-pagos-panel #lista-pagos-compra strong { text-align:right; font-variant-numeric:tabular-nums; }

/* 2026.08.27-01: controles móviles cómodos y acciones contenidas. */
.buscador-clientes { margin: 14px 0 18px; }
.buscador-clientes .form-fila > div:first-child { flex: 1 1 420px; }
.combo-agregar-fila {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 110px auto;
  align-items: end;
  gap: 10px;
}
.combo-buscador, .combo-cantidad, .combo-agregar { min-width: 0; }
.combo-buscador { position: relative; }
.combo-escanear { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; }
.combo-agregar .btn { min-height: 42px; white-space: nowrap; }
.sugerencias-rapidas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.sugerencias-rapidas > span { flex: 1 0 100%; color: var(--texto-muted); font-size: 12px; }
.sugerencias-rapidas .btn { min-height: 36px; padding: 7px 12px; border-radius: 999px; font-size: 12px; }

@media (max-width: 700px) {
  .contenido { padding-left: 12px; padding-right: 12px; }
  .panel-filtros { padding: 16px; }
  .panel-filtros .form-fila,
  .panel-registro-gasto .form-fila,
  .filtros-caja.form-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }
  .panel-filtros .form-fila > *,
  .panel-registro-gasto .form-fila > *,
  .filtros-caja.form-fila > * { width: 100%; min-width: 0; }
  .panel-filtros input,
  .panel-filtros select,
  .panel-registro-gasto input,
  .panel-registro-gasto select,
  .filtros-caja input,
  .filtros-caja select { min-height: 50px; font-size: 16px; }
  .panel-filtros .btn,
  .panel-registro-gasto .btn,
  .filtros-caja .btn { width: 100%; min-height: 48px; justify-content: center; }
  .filtros-estadisticas select[multiple] { min-height: 150px; }
  .filtros-estadisticas .multiselect { width: 100%; min-width: 0; }
  .combo-agregar-fila { grid-template-columns: minmax(0, 1fr) 110px; }
  .combo-buscador { grid-column: 1 / -1; }
  .combo-agregar .btn { width: 100%; justify-content: center; }
  .caja-historial-panel .tabla-scroll { margin-left: -16px; margin-right: -16px; border-radius: 0; }
}

@media (max-width: 560px) {
  .combo-agregar-fila { grid-template-columns: minmax(0, 1fr); }
  .combo-buscador, .combo-cantidad, .combo-agregar { grid-column: 1; }
  .combo-escanear { width: 100%; justify-content: center; }
}
/* Tienda pública: interfaz mobile-first, liviana y aislada del panel interno. */
.tienda-publica{margin:0;background:#f5f6f4;color:#17221e;font-family:Inter,system-ui,sans-serif}.tienda-header{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px max(18px,calc((100vw - 1180px)/2));background:rgba(255,255,255,.94);border-bottom:1px solid #e5e9e6;backdrop-filter:blur(12px)}.tienda-marca{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.tienda-marca img,.tienda-marca>span{width:40px;height:40px;border-radius:12px;object-fit:contain;background:var(--tienda-acento);color:#fff;display:grid;place-items:center;font-weight:800}.tienda-marca div{display:grid}.tienda-marca small,.tienda-header nav span{color:#6b756f;font-size:12px}.tienda-header nav{display:flex;align-items:center;gap:12px}.tienda-header nav a{color:var(--tienda-acento);font-weight:700;text-decoration:none}.tienda-contenido{width:min(1180px,calc(100% - 32px));margin:auto;padding:24px 0 96px}.tienda-hero{padding:34px;border-radius:24px;background:linear-gradient(125deg,var(--tienda-acento),#285f4e);color:#fff;box-shadow:0 16px 38px rgba(23,53,43,.13)}.tienda-hero span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.78}.tienda-hero h1{margin:8px 0 4px;font-size:clamp(28px,5vw,48px)}.tienda-hero p{margin:0;opacity:.85}.tienda-herramientas{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin:22px 0 12px}.tienda-herramientas label,.tienda-checkout label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#53605a}.tienda-herramientas input,.tienda-herramientas select,.tienda-checkout input,.tienda-checkout select,.tienda-checkout textarea{box-sizing:border-box;width:100%;min-height:46px;padding:10px 12px;border:1px solid #d7ddd9;border-radius:12px;background:#fff;font:inherit;color:#17221e}.tienda-categorias{display:flex;gap:8px;overflow:auto;padding:4px 0 16px}.tienda-categorias button{white-space:nowrap;border:1px solid #dbe1dd;border-radius:999px;background:#fff;padding:8px 14px;color:#53605a}.tienda-categorias button.activo{background:var(--tienda-acento);border-color:var(--tienda-acento);color:#fff}.tienda-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}.tienda-producto{overflow:hidden;border:1px solid #e1e5e2;border-radius:18px;background:#fff;box-shadow:0 6px 22px rgba(24,42,34,.05)}.tienda-producto[hidden]{display:none}.tienda-producto-imagen{position:relative;height:148px;background:#edf1ee;display:grid;place-items:center}.tienda-producto-imagen img{width:100%;height:100%;object-fit:cover}.tienda-producto-imagen>span{font-size:50px;font-weight:800;color:#b8c3bd}.tienda-producto-imagen em{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:999px;background:#e9f5ee;color:#21633e;font-size:11px;font-style:normal;font-weight:800}.tienda-producto-imagen em.stock-ultimas{background:#fff0c9;color:#805b00}.tienda-producto-imagen em.stock-sin_stock{background:#f1eeee;color:#7c6767}.tienda-producto-cuerpo{padding:15px}.tienda-producto-cuerpo small{color:#748079}.tienda-producto-cuerpo h2{font-size:16px;line-height:1.25;margin:5px 0}.tienda-producto-cuerpo p{font-size:13px;color:#69736e;margin:7px 0}.tienda-producto-pie{display:flex;align-items:center;justify-content:space-between;margin-top:13px}.tienda-producto-pie strong{font-size:18px}.btn-agregar{width:38px;height:38px;border:0;border-radius:12px;background:var(--tienda-acento);color:#fff;font-size:22px}.btn-agregar:disabled{background:#cbd1cd}.tienda-carrito-flotante{position:fixed;z-index:25;left:50%;bottom:18px;transform:translateX(-50%);width:min(560px,calc(100% - 28px));display:flex;justify-content:space-between;padding:15px 18px;border:0;border-radius:16px;background:var(--tienda-acento);color:#fff;box-shadow:0 14px 38px rgba(14,44,33,.28);font-weight:700}.tienda-carrito{width:min(620px,calc(100% - 24px));max-height:88vh;box-sizing:border-box;padding:24px;border:0;border-radius:22px}.tienda-carrito::backdrop{background:rgba(14,25,20,.52);backdrop-filter:blur(3px)}.tienda-carrito .cerrar{float:right;border:0;background:#eef1ef;width:34px;height:34px;border-radius:50%;font-size:22px}.tienda-carrito-linea{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #ebeeec}.tienda-carrito-linea>div:first-child{display:grid;min-width:0}.tienda-carrito-linea small{color:#6b756f}.tienda-cantidad{display:flex;gap:4px}.tienda-cantidad button{border:1px solid #dbe1dd;background:#fff;border-radius:8px;width:30px;height:30px}.tienda-checkout{display:grid;gap:13px;margin-top:18px}.tienda-total{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid #e2e6e3;font-size:18px}.tienda-total strong{font-size:23px}.tienda-estado-vacio{padding:50px 24px;text-align:center}.tienda-footer{text-align:center;padding:28px;color:#7a847f;font-size:12px}.texto-error{color:#a32d2d;margin:0}.tienda-carrito-vacio{text-align:center;color:#78827d;padding:24px}
.tienda-acceso,.tienda-seguimiento{width:min(620px,100%);margin:34px auto}.tienda-acceso>p,.tienda-seguimiento>p{color:#67726c}.tienda-acceso form{display:grid;gap:13px;padding:22px}.tienda-acceso label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#53605a}.tienda-acceso input{box-sizing:border-box;width:100%;min-height:46px;padding:10px 12px;border:1px solid #d7ddd9;border-radius:12px}.tienda-seguimiento>.tarjeta{padding:22px;margin:18px 0}.detalle-linea{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #e5e9e6}.detalle-linea span{display:grid}.detalle-linea small{color:#6b756f}.detalle-linea.total{font-size:19px;border-bottom:0;border-top:2px solid #dfe5e1;margin-top:8px}.tienda-seguimiento>.btn{margin-right:8px;margin-bottom:8px}
@media(max-width:640px){.tienda-header{padding:10px 14px}.tienda-header nav span{display:none}.tienda-contenido{width:min(100% - 24px,1180px);padding-top:14px}.tienda-hero{padding:24px 20px;border-radius:18px}.tienda-herramientas{grid-template-columns:1fr;gap:9px}.tienda-productos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tienda-producto-imagen{height:112px}.tienda-producto-cuerpo{padding:12px}.tienda-producto-cuerpo h2{font-size:14px}.tienda-producto-cuerpo p{display:none}.tienda-producto-pie strong{font-size:14px}.btn-agregar{width:34px;height:34px}.tienda-carrito{margin:auto 12px 12px;width:calc(100% - 24px);max-height:92vh}.tienda-carrito-linea{grid-template-columns:minmax(0,1fr) auto}.tienda-carrito-linea>b{grid-column:1/-1;text-align:right}.tienda-acceso{margin-top:12px}}
.tienda-config-estado{border-left:5px solid var(--verde,#18875d)}.tienda-switch{display:flex;align-items:flex-start;gap:12px;padding:14px;margin-bottom:18px;border-radius:14px;background:#eef8f3}.tienda-switch input{width:22px;height:22px;flex:0 0 auto}.tienda-switch span{display:grid;gap:3px}.tienda-switch strong{font-size:16px}.tienda-switch small{color:var(--texto-muted)}.tienda-horarios-config{display:grid;gap:8px}.tienda-horario-fila{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,.6fr) minmax(120px,.6fr);align-items:end;gap:12px;padding:8px 0;border-bottom:1px solid var(--borde,#e5e7eb)}.tienda-horario-fila:last-child{border-bottom:0}.tienda-filtros-publicacion{position:sticky;top:58px;z-index:10;display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(150px,1fr)) auto auto;gap:8px;align-items:center}.tienda-filtros-publicacion input,.tienda-filtros-publicacion select{margin:0}@media(max-width:760px){.tienda-horario-fila{grid-template-columns:1fr 1fr}.tienda-horario-fila>.check-linea{grid-column:1/-1}.tienda-filtros-publicacion{position:static;grid-template-columns:1fr 1fr}.tienda-filtros-publicacion input{grid-column:1/-1}}
.tienda-horarios-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.tienda-dia{margin:0}.tienda-dia-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--borde,#e5e7eb)}.tienda-turnos{display:grid;gap:8px;margin-top:10px}.tienda-turno{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:8px;padding:9px;border-radius:10px;background:#f7f9f8}.tienda-turno label{margin:0}.tienda-turno input{margin:3px 0 0}.tienda-dia-cerrado{margin:8px 0 0;color:var(--texto-muted);font-size:13px}.tienda-categorias-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px}.tienda-categoria-check{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 12px;border:1px solid var(--borde,#dfe4e1);border-radius:11px;background:#fafcfb;cursor:pointer}.tienda-categoria-check:has(input:checked){border-color:#8fc6ad;background:#eff8f3}.tienda-categoria-check input{width:19px;height:19px;flex:0 0 auto;margin:0}.tienda-categoria-check span{font-weight:650;line-height:1.2}@media(max-width:520px){.tienda-horarios-config{grid-template-columns:1fr}.tienda-turno{grid-template-columns:1fr 1fr}.tienda-turno .quitar-turno{grid-column:1/-1}.tienda-categorias-checks{grid-template-columns:1fr 1fr}}
.tienda-favorito{position:absolute;right:10px;top:10px;width:38px;height:38px;border:1px solid rgba(20,40,31,.12);border-radius:50%;background:rgba(255,255,255,.94);color:#53605a;font-size:23px;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.08)}.tienda-favorito.activo{color:#b4233f;background:#fff4f6}.tienda-cuenta-cabecera{padding:28px 30px;border-radius:22px;background:linear-gradient(125deg,var(--tienda-acento),#285f4e);color:#fff}.tienda-cuenta-cabecera>span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.8}.tienda-cuenta-cabecera h1{margin:7px 0 3px}.tienda-cuenta-cabecera p{margin:0;opacity:.85}.tienda-cuenta-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.8fr);gap:18px;margin-top:22px}.tienda-seccion-titulo h2{margin-bottom:3px}.tienda-seccion-titulo p{margin-top:0;color:#6b756f;font-size:13px}.tienda-pedidos-cliente,.tienda-favoritos-lista{display:grid;gap:10px}.tienda-pedido-cliente{display:flex;justify-content:space-between;gap:16px;padding:16px;border:1px solid #e1e5e2;border-radius:15px;background:#fff;color:inherit;text-decoration:none}.tienda-pedido-cliente>div{display:grid;gap:4px}.tienda-pedido-cliente>div:last-child{text-align:right;justify-items:end}.tienda-pedido-cliente small{color:#6b756f}.tienda-pedido-cliente.requiere-confirmacion{border:2px solid #d49a21;background:#fff9ea}.tienda-pedido-cliente.requiere-confirmacion>div:last-child small{color:#8a5b00;font-weight:800}.tienda-favoritos-lista>a{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid #e1e5e2;border-radius:13px;background:#fff;color:inherit;text-decoration:none}.tienda-favoritos-lista>a>span{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#edf1ee;font-weight:800}.tienda-favoritos-lista>a>div{display:grid}.tienda-favoritos-lista small{color:#6b756f}.tienda-favoritos-lista b{color:#b4233f}@media(max-width:760px){.tienda-cuenta-grid{grid-template-columns:1fr}.tienda-pedido-cliente{padding:13px}.tienda-cuenta-cabecera{padding:22px 20px}}
.tienda-pedido-cliente a{color:var(--tienda-acento);font-weight:700}.tienda-confirmar-cambio{flex:0 0 100%;display:flex;justify-content:flex-end;padding-top:12px;border-top:1px solid #ead49f}.tienda-pedido-cliente:has(.tienda-confirmar-cambio){flex-wrap:wrap}@media(max-width:520px){.tienda-pedido-cliente{flex-wrap:wrap}.tienda-pedido-cliente>div:last-child{margin-left:auto}.tienda-confirmar-cambio .btn{width:100%}}

/* Creador de historias promocionales: lienzo vertical 9:16 listo para captura. */
.historia-creador{display:grid;grid-template-columns:minmax(290px,380px) minmax(320px,1fr);gap:24px;align-items:start}.historia-controles{position:sticky;top:82px;display:grid;gap:14px}.historia-controles h3{margin:0 0 2px}.historia-controles label{display:grid;gap:6px;font-size:12px;font-weight:700;color:var(--texto-muted)}.historia-controles input,.historia-controles select{box-sizing:border-box;width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--borde);border-radius:10px;background:#fff;color:var(--ink);font:inherit}.historia-precios-form{grid-template-columns:1fr 1fr}.historia-instruccion{color:var(--texto-muted);line-height:1.45}.historia-preview-wrap{display:grid;place-items:center;padding:20px;border-radius:22px;background:repeating-linear-gradient(45deg,#e8ece9,#e8ece9 12px,#eef1ef 12px,#eef1ef 24px)}.historia-lienzo{position:relative;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden;width:min(430px,100%);aspect-ratio:9/16;border-radius:24px;background:#f5f3eb;color:#13251e;box-shadow:0 22px 55px rgba(18,40,31,.22)}.historia-lienzo:before{content:"";position:absolute;z-index:-1;inset:auto -28% 19% 35%;height:28%;border-radius:50%;background:color-mix(in srgb,var(--historia-color) 13%,transparent);filter:blur(25px)}.historia-marca{display:flex;align-items:center;gap:10px;padding:5.5% 6% 3%;font-size:clamp(12px,2.5vw,18px)}.historia-marca span{display:grid;place-items:center;width:2.35em;height:2.35em;border-radius:.7em;background:var(--historia-color);color:#fff;font-weight:900}.historia-marca strong{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05em}.historia-foto{position:relative;overflow:hidden;margin:0 6%;min-height:0;border-radius:5%;background:linear-gradient(145deg,#dce4df,#f4f6f4)}.historia-foto img{width:100%;height:100%;display:block;object-fit:cover}.historia-placeholder{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:8px;color:#829088}.historia-placeholder b{font-size:clamp(52px,14vw,94px);line-height:1}.historia-placeholder span{font-size:clamp(11px,2.4vw,15px);font-weight:700}.historia-oferta{padding:5% 6% 3%}.historia-etiqueta{display:inline-flex;padding:.45em .8em;border-radius:999px;background:var(--historia-color);color:#fff;font-size:clamp(8px,1.7vw,11px);font-weight:900;letter-spacing:.12em}.historia-oferta h1{margin:2.5% 0 0;font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(25px,6.2vw,43px);line-height:.98;letter-spacing:-.035em}.historia-oferta>p{min-height:1em;margin:2% 0 0;color:#65736c;font-size:clamp(10px,2.2vw,14px);font-weight:700}.historia-precios{display:grid;grid-template-columns:auto auto 1fr;align-items:end;gap:6%;margin-top:4%}.historia-precios>div{display:grid;gap:1px}.historia-precios small,.historia-datos small{color:#718078;font-size:clamp(7px,1.55vw,10px);font-weight:800;letter-spacing:.08em}.historia-precios del{color:#7c8580;font-size:clamp(16px,4vw,27px);font-weight:700}.historia-precios strong{color:#16824b;font-size:clamp(27px,7vw,48px);line-height:1;font-weight:900}.historia-precios>b{align-self:center;justify-self:end;padding:.45em .55em;border-radius:.5em;background:#dff5e8;color:#137242;font-size:clamp(15px,3.7vw,25px)}.historia-datos{display:grid;grid-template-columns:1fr 1fr;gap:5%;padding:3.5% 6% 5%;border-top:1px solid rgba(19,37,30,.12);background:rgba(255,255,255,.58)}.historia-datos p{margin:2px 0 0;font-size:clamp(7px,1.65vw,11px);line-height:1.35;font-weight:700}.historia-salir-captura{display:none}.modo-captura-historia{overflow:hidden;background:#0b0d0c}.modo-captura-historia .topbar,.modo-captura-historia .navbar,.modo-captura-historia #fondo-navbar-movil,.modo-captura-historia .historia-encabezado,.modo-captura-historia .historia-controles,.modo-captura-historia>footer{display:none!important}.modo-captura-historia .contenido{width:100%;max-width:none;margin:0;padding:0}.modo-captura-historia .historia-creador{display:block}.modo-captura-historia .historia-preview-wrap{position:fixed;z-index:500;inset:0;padding:0;border-radius:0;background:#0b0d0c}.modo-captura-historia .historia-lienzo{width:min(100vw,56.25vh);height:min(100vh,177.7778vw);aspect-ratio:9/16;border-radius:0;box-shadow:none}.modo-captura-historia .historia-salir-captura{position:fixed;z-index:510;top:12px;right:12px;display:block;padding:10px 14px;border:0;border-radius:999px;background:rgba(0,0,0,.68);color:#fff;opacity:0;pointer-events:none;transition:opacity .2s}.modo-captura-historia .historia-salir-captura.visible{opacity:1;pointer-events:auto}@media(max-width:850px){.historia-creador{grid-template-columns:1fr}.historia-controles{position:static}.historia-preview-wrap{padding:14px}}@media(max-width:480px){.contenido-historia{width:calc(100% - 20px)}.historia-precios-form{grid-template-columns:1fr 1fr}.historia-preview-wrap{margin-inline:-2px}.historia-lienzo{border-radius:18px}}

/* Selección de datos de la historia y estados claros de la tienda móvil. */
.historia-datos-selector{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;margin:0;padding:12px;border:1px solid var(--borde);border-radius:12px}.historia-datos-selector legend{padding:0 5px;font-size:12px;font-weight:800;color:var(--ink)}.historia-datos-selector .check-linea{display:flex;white-space:nowrap}.historia-datos-selector input[type=text]{min-height:38px}.historia-precios.solo-promocional{grid-template-columns:1fr}.historia-precios.solo-promocional>div{justify-self:start}.historia-contactos{display:flex;flex-wrap:wrap;gap:4px 12px;grid-column:1/-1}.historia-contactos p{display:grid;margin:0}.historia-contactos span{font-size:clamp(8px,1.75vw,12px);font-weight:800}.historia-datos:has(#historia-medios[hidden]):has(#historia-horarios[hidden]) .historia-contactos{padding-bottom:2%}.tienda-nav-cliente{display:flex;align-items:center;gap:8px!important}.tienda-nav-boton{display:inline-flex!important;align-items:center;justify-content:center;gap:5px;min-height:38px;padding:7px 11px;border:1px solid #dce3df;border-radius:10px;background:#fff;color:var(--tienda-acento)!important;font-size:12px;font-weight:800;text-decoration:none}.tienda-nav-boton:hover{background:#f0f6f3}.tienda-nav-salir{color:#6b756f!important}.tienda-nav-ingresar{background:var(--tienda-acento);border-color:var(--tienda-acento);color:#fff!important}.tienda-listado-titulo{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:6px 0 14px}.tienda-listado-titulo h2{margin:0;font-size:21px}.tienda-listado-titulo p{margin:3px 0 0;color:#6b756f;font-size:13px}.tienda-listado-titulo>span{white-space:nowrap;color:#6b756f;font-size:12px}.tienda-cuenta-atajos{display:flex;gap:8px;margin:12px 0 22px;overflow:auto}.tienda-cuenta-atajos a{padding:9px 13px;border:1px solid #dce3df;border-radius:10px;background:#fff;color:var(--tienda-acento);font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap}.tienda-cuenta-atajos .salir{margin-left:auto;color:#7b514b}.tienda-pedido-cliente{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(220px,1.3fr) auto;align-items:center}.tienda-pedido-cliente>div:last-child{text-align:initial;justify-items:initial}.tienda-pedido-identidad,.tienda-pedido-estado,.tienda-pedido-accion{display:grid!important;gap:3px}.tienda-pedido-identidad small,.tienda-pedido-estado small{font-size:9px;font-weight:850;letter-spacing:.09em;color:#7a847f}.tienda-pedido-identidad span,.tienda-pedido-estado span{color:#66726c;font-size:11px;line-height:1.35}.tienda-pedido-estado{padding:10px 12px;border-left:3px solid #6f8e80;border-radius:8px;background:#f4f7f5}.tienda-pedido-estado strong{color:#264c3d}.tienda-pedido-estado.estado-requiere_confirmacion{border-color:#d49a21;background:#fff6df}.tienda-pedido-estado.estado-listo{border-color:#16824b;background:#eaf8f0}.tienda-pedido-estado.estado-rechazado,.tienda-pedido-estado.estado-cancelado_cliente,.tienda-pedido-estado.estado-cancelado_negocio,.tienda-pedido-estado.estado-vencido{border-color:#9b7068;background:#f7f1ef}.tienda-pedido-estado em{color:#835b08;font-size:10px;font-style:normal;font-weight:750}.tienda-pedido-accion{justify-items:end!important}.tienda-pedido-accion>strong{font-size:18px}.tienda-boton-detalle{display:inline-flex;padding:7px 10px;border-radius:8px;background:#edf6f1;text-decoration:none}.tienda-volver-cuenta{display:inline-flex;margin-bottom:12px;color:var(--tienda-acento);font-weight:750;text-decoration:none}.tienda-estado-cabecera{padding:24px;border-radius:20px;background:linear-gradient(125deg,var(--tienda-acento),#285f4e);color:#fff}.tienda-estado-cabecera>small{font-size:10px;font-weight:850;letter-spacing:.12em;opacity:.72}.tienda-estado-cabecera h1{margin:6px 0 3px;font-size:30px}.tienda-estado-cabecera p{margin:0 0 12px;opacity:.9}.tienda-estado-cabecera>span{font-size:12px;opacity:.72}.tienda-estado-cabecera.estado-requiere_confirmacion{background:linear-gradient(125deg,#76530d,#b47a0c)}.tienda-estado-cabecera.estado-rechazado,.tienda-estado-cabecera.estado-cancelado_cliente,.tienda-estado-cabecera.estado-cancelado_negocio,.tienda-estado-cabecera.estado-vencido{background:linear-gradient(125deg,#654944,#8e675f)}.tienda-progreso-pedido{display:grid;grid-template-columns:repeat(5,1fr);margin:22px 0;padding:16px 8px;border:1px solid #e1e5e2;border-radius:16px;background:#fff}.tienda-progreso-pedido>div{position:relative;display:grid;justify-items:center;gap:5px;color:#8a938e;font-size:10px;text-align:center}.tienda-progreso-pedido>div:not(:last-child):after{content:"";position:absolute;top:14px;left:calc(50% + 17px);right:calc(-50% + 17px);height:2px;background:#dce2de}.tienda-progreso-pedido i{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e7ebe8;font-style:normal;font-weight:800}.tienda-progreso-pedido .completo{color:#176f45;font-weight:750}.tienda-progreso-pedido .completo i{background:#1c8755;color:#fff}.tienda-progreso-pedido .completo:not(:last-child):after{background:#54a87b}.tienda-alerta-accion{margin:14px 0;padding:16px;border:1px solid #e2bd61;border-radius:14px;background:#fff8e6;color:#6f4c00}.tienda-alerta-accion p{margin:4px 0 0}.tienda-detalle-pedido{margin-top:16px}.tienda-detalle-pedido .detalle-linea>span{display:grid}.tienda-detalle-pedido .detalle-linea small{color:#6b756f}.tienda-acciones-pedido{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}.tienda-acciones-pedido form{margin:0}.tienda-estado-vacio.compacto{padding:24px 16px}
.historia-lienzo [hidden]{display:none!important}
@media(min-width:641px){.tienda-producto{display:grid;grid-template-rows:148px minmax(0,1fr)}.tienda-producto-imagen{height:148px;min-height:0;overflow:hidden;isolation:isolate;contain:paint}.tienda-producto-imagen img{display:block;position:relative;width:100%;max-width:100%;height:148px;max-height:148px;object-fit:cover;object-position:center}.tienda-producto-cuerpo{position:relative;z-index:2;min-width:0;background:#fff}.tienda-producto-cuerpo h2{overflow-wrap:anywhere}}
.tienda-combo-contenido{margin:8px 0;padding:9px 10px;border-radius:10px;background:#f2f7f4;color:#526159;font-size:11px;line-height:1.35}.tienda-combo-contenido>strong{display:block;margin-bottom:4px;color:#29483a;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.tienda-combo-contenido ul{display:grid;gap:3px;margin:0;padding-left:16px}.tienda-combo-contenido li b{color:#1e7048}.tienda-navegacion-pedido{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.tienda-navegacion-pedido .tienda-volver-cuenta{margin:0}.tienda-datos-cuenta{max-width:680px}.tienda-zona-peligro{margin-top:18px;padding:15px;border:1px solid #e5c7c2;border-radius:13px;background:#fff9f8}.tienda-zona-peligro summary{cursor:pointer;color:#8a3e34;font-weight:750}.tienda-codigo-reset{max-width:560px;margin:18px auto;text-align:center}.tienda-codigo-reset>strong{display:block;margin:18px 0;padding:16px;border:1px dashed #76a58f;border-radius:13px;background:#eef8f3;color:#175d3e;font-family:var(--fuente-numeros);font-size:38px;letter-spacing:.18em}.tienda-acceso>.btn{margin-top:12px}@media(max-width:640px){.tienda-combo-contenido{font-size:10px}.tienda-navegacion-pedido{align-items:stretch;flex-direction:column}.tienda-navegacion-pedido .tienda-nav-boton{width:100%}.tienda-codigo-reset>strong{font-size:30px}}
@media(max-width:640px){.tienda-header{align-items:center;gap:8px}.tienda-header:has(.tienda-nav-salir){flex-wrap:wrap}.tienda-header:has(.tienda-nav-salir) .tienda-nav-cliente{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.tienda-marca{min-width:0}.tienda-marca img,.tienda-marca>span{width:34px;height:34px;border-radius:9px}.tienda-marca div{min-width:0}.tienda-marca strong{display:block;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.tienda-marca small{font-size:9px}.tienda-nav-cliente{gap:5px!important}.tienda-nav-boton{min-height:36px;padding:6px 8px;font-size:11px}.tienda-saludo{display:none!important}.tienda-hero{padding:20px 18px}.tienda-hero h1{font-size:25px}.tienda-hero p{font-size:13px}.tienda-herramientas{margin:14px 0 9px}.tienda-herramientas input,.tienda-herramientas select{min-height:50px;font-size:16px}.tienda-categorias{position:sticky;z-index:15;top:55px;margin-inline:-12px;padding:8px 12px 12px;background:rgba(245,246,244,.96);backdrop-filter:blur(8px)}body:has(.tienda-nav-salir) .tienda-categorias{top:98px}.tienda-categorias button{min-height:40px;padding:9px 15px}.tienda-listado-titulo{align-items:start}.tienda-listado-titulo h2{font-size:18px}.tienda-listado-titulo p{font-size:12px}.tienda-productos{grid-template-columns:1fr}.tienda-producto{display:grid;grid-template-columns:116px minmax(0,1fr);min-height:132px;border-radius:15px}.tienda-producto-imagen{height:100%;min-height:132px}.tienda-producto-cuerpo{display:flex;flex-direction:column;padding:12px}.tienda-producto-cuerpo h2{font-size:15px}.tienda-producto-cuerpo p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:5px 0;font-size:11px}.tienda-producto-pie{margin-top:auto}.tienda-producto-pie strong{font-size:17px}.btn-agregar{width:40px;height:40px}.tienda-carrito-flotante{bottom:max(12px,env(safe-area-inset-bottom));min-height:54px}.tienda-carrito{padding:20px 16px max(18px,env(safe-area-inset-bottom));border-radius:20px 20px 0 0}.tienda-checkout input,.tienda-checkout select,.tienda-checkout textarea{min-height:49px;font-size:16px}.tienda-cuenta-cabecera{border-radius:17px}.tienda-cuenta-atajos{margin-bottom:18px}.tienda-cuenta-atajos .salir{margin-left:0}.tienda-pedido-cliente{grid-template-columns:1fr auto;gap:12px}.tienda-pedido-estado{grid-column:1/-1;grid-row:1;padding:11px}.tienda-pedido-identidad{grid-column:1}.tienda-pedido-accion{grid-column:2}.tienda-confirmar-cambio{grid-column:1/-1}.tienda-estado-cabecera{padding:20px 18px;border-radius:17px}.tienda-estado-cabecera h1{font-size:25px}.tienda-progreso-pedido{padding:13px 3px}.tienda-progreso-pedido i{width:27px;height:27px}.tienda-progreso-pedido>div:not(:last-child):after{top:13px;left:calc(50% + 14px);right:calc(-50% + 14px)}.tienda-progreso-pedido span{font-size:8px}.tienda-acciones-pedido,.tienda-acciones-pedido form,.tienda-acciones-pedido .btn{width:100%}.tienda-detalle-pedido{padding:15px}.historia-datos-selector{grid-template-columns:1fr}.historia-datos-selector .check-linea{margin-top:4px}}
/* Buscador universal y centro de notificaciones */
.topbar-icono{position:relative;display:grid;place-items:center;align-content:center;gap:0;min-width:42px;height:40px;padding:2px 7px;border:1px solid var(--borde);border-radius:11px;background:var(--surface);color:var(--texto);cursor:pointer;text-decoration:none}.topbar-icono>span{font-size:21px;line-height:18px}.topbar-icono>small{font-size:8px;font-weight:750;color:var(--texto-muted)}.topbar-icono:hover,.topbar-icono:focus-visible{border-color:rgba(22,122,85,.35);background:#f4f8f6}.centro-notificaciones{position:relative}.centro-notificaciones>summary{list-style:none}.centro-notificaciones>summary::-webkit-details-marker{display:none}.centro-notificaciones>summary b{position:absolute;right:-4px;top:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:2px solid #fff;border-radius:999px;background:#b3261e;color:#fff;font-size:9px}.centro-notificaciones-panel{position:absolute;z-index:240;right:0;top:calc(100% + 9px);width:min(360px,calc(100vw - 24px));overflow:hidden;border:1px solid var(--borde);border-radius:17px;background:var(--surface);box-shadow:0 20px 55px rgba(18,31,25,.18)}.centro-notificaciones-panel>header{display:grid;gap:2px;padding:15px 16px;border-bottom:1px solid var(--borde)}.centro-notificaciones-panel>header small{color:var(--texto-muted);font-size:11px}.centro-notificaciones-panel>div{display:grid;max-height:min(65vh,520px);overflow:auto}.centro-notificaciones-panel a{display:flex;gap:10px;padding:13px 15px;border-bottom:1px solid var(--borde);color:inherit;text-decoration:none}.centro-notificaciones-panel a:hover{background:#f6f8f7}.centro-notificaciones-panel a i{flex:0 0 8px;width:8px;height:8px;margin-top:5px;border-radius:50%;background:#75817b}.centro-notificaciones-panel a.nivel-atencion i{background:#c98512}.centro-notificaciones-panel a.nivel-critico i{background:#b3261e}.centro-notificaciones-panel a.nivel-info i{background:#2876a8}.centro-notificaciones-panel a span{display:grid;gap:3px}.centro-notificaciones-panel a small,.centro-sin-avisos{color:var(--texto-muted);font-size:11px}.centro-sin-avisos{padding:22px 16px;text-align:center}
.busqueda-global-dialogo{width:min(650px,calc(100% - 24px));max-height:min(78vh,680px);padding:0;border:0;border-radius:20px;background:transparent}.busqueda-global-dialogo::backdrop{background:rgba(12,20,17,.42);backdrop-filter:blur(5px)}.busqueda-global-caja{overflow:hidden;border:1px solid rgba(255,255,255,.5);border-radius:20px;background:var(--surface);box-shadow:0 28px 90px rgba(10,20,16,.25)}.busqueda-global-caja>header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--borde)}.busqueda-global-caja>header>span{font-size:25px;color:var(--texto-muted)}.busqueda-global-caja input{height:44px;margin:0;padding:0;border:0;outline:0;background:transparent;font-size:17px;box-shadow:none}.busqueda-global-caja header button{width:34px;height:34px;border:0;border-radius:9px;background:#eef1ef;color:var(--texto-muted);font-size:20px;cursor:pointer}.busqueda-global-resultados{display:grid;max-height:min(58vh,500px);overflow:auto;padding:7px}.busqueda-global-resultados a{display:grid;grid-template-columns:112px 1fr;gap:2px 12px;padding:11px 12px;border-radius:11px;color:inherit;text-decoration:none}.busqueda-global-resultados a:hover,.busqueda-global-resultados a.activo{background:#edf6f1}.busqueda-global-resultados a>span{grid-row:1/3;color:#287353;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.busqueda-global-resultados a>small{color:var(--texto-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.busqueda-global-ayuda{padding:38px 20px;text-align:center;color:var(--texto-muted)}.busqueda-global-caja>footer{display:flex;justify-content:flex-end;gap:14px;padding:9px 14px;border-top:1px solid var(--borde);color:var(--texto-muted);font-size:10px}
@media(max-width:640px){.topbar-icono small{display:none}.topbar-icono{min-width:36px;width:36px;height:36px;padding:0}.centro-notificaciones-panel{position:fixed;top:58px;right:8px;width:calc(100vw - 16px)}.busqueda-global-dialogo{margin:9vh auto auto}.busqueda-global-resultados a{grid-template-columns:1fr}.busqueda-global-resultados a>span{grid-row:auto}.busqueda-global-caja>footer{display:none}.busqueda-global-caja input{font-size:15px}}

/* Listados operativos: en móvil cada fila conserva todas sus columnas como ficha legible. */
@media(max-width:700px){
  .tabla-scroll:has(>.tabla-movil){overflow:visible;margin-inline:0}
  .tabla-movil{display:block;width:100%;min-width:0!important;background:transparent;border:0;box-shadow:none}
  .tabla-movil thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabla-movil tbody{display:grid;gap:10px;width:100%}
  .tabla-movil tbody tr{display:grid;width:100%;padding:9px 13px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 3px 13px rgba(24,42,34,.035)}
  .tabla-movil tbody tr[hidden],.tabla-movil tbody tr[style*="display: none"]{display:none!important}
  .tabla-movil tbody td{display:grid;grid-template-columns:minmax(105px,36%) minmax(0,1fr);align-items:start;gap:10px;width:auto!important;min-height:30px;padding:7px 0!important;border:0!important;border-bottom:1px solid rgba(30,36,32,.07)!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere}
  .tabla-movil tbody td:last-child{border-bottom:0!important}
  .tabla-movil tbody td::before{content:attr(data-label);align-self:start;color:var(--texto-muted);font-size:10px;font-weight:800;letter-spacing:.04em;text-align:left;text-transform:uppercase}
  .tabla-movil tbody td[colspan]{grid-template-columns:1fr;text-align:center!important}
  .tabla-movil tbody td[colspan]::before,.tabla-movil tbody td.no-datos::before{display:none}
  .tabla-movil tbody td .grupo-botones,.tabla-movil tbody td:last-child:has(.btn){justify-content:flex-end}
  .tabla-movil tbody td .btn{min-height:38px;margin:1px;padding:8px 10px}
  .tabla-movil tbody tr:hover td{background:transparent}
  .contenido input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),.contenido select,.contenido textarea{max-width:100%;font-size:16px}
  .contenido .form-fila{align-items:stretch}
  .contenido .form-fila>div,.contenido .form-fila>label{min-width:0;width:100%}
}

/* Productos: en teléfonos se conserva una tabla operativa compacta. La
   conversión global a fichas hacía que un inventario largo exigiera demasiado
   desplazamiento vertical. Las columnas secundarias siguen disponibles en
   escritorio y en móvil quedan las necesarias para vender y administrar. */
@media(max-width:700px){
  .pagina-productos .panel-tabla{padding:10px;overflow-x:auto}
  .tabla-productos-listado{display:table;width:100%;min-width:540px!important;font-size:12px}
  .tabla-productos-listado .col-producto-qr,
  .tabla-productos-listado .col-producto-codigo,
  .tabla-productos-listado .col-producto-marca,
  .tabla-productos-listado .col-producto-categoria,
  .tabla-productos-listado .col-producto-costo,
  .tabla-productos-listado .col-producto-unidad{display:none}
  .tabla-productos-listado th,
  .tabla-productos-listado td{padding:7px 6px!important;vertical-align:middle}
  .tabla-productos-listado .col-producto-nombre{min-width:155px;white-space:normal;line-height:1.25}
  .tabla-productos-listado .col-producto-venta,
  .tabla-productos-listado .col-producto-stock{white-space:nowrap;text-align:right}
  .tabla-productos-listado .col-producto-vender{width:1%;white-space:nowrap}
  .tabla-productos-listado .col-producto-acciones{min-width:112px;white-space:normal!important}
  .tabla-productos-listado .col-producto-acciones .btn,
  .tabla-productos-listado .col-producto-vender .btn{min-height:34px;padding:6px 8px;font-size:11px}
}

.tienda-cargar-mas{display:grid;justify-items:center;gap:7px;padding:24px 0 8px}.tienda-cargar-mas[hidden]{display:none}.tienda-cargar-mas button{min-height:44px;padding:10px 22px;border:1px solid var(--tienda-acento);border-radius:12px;background:#fff;color:var(--tienda-acento);font:inherit;font-weight:800;cursor:pointer}.tienda-cargar-mas small{color:#748079}

/* Jerarquía operativa compartida: configuración, POS, inventario y análisis. */
.tienda-config-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 18px}.tienda-config-nav span{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--texto-muted);font-size:13px;font-weight:700}.tienda-config-nav b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#eaf6f0;color:var(--verde)}
.tienda-config-estado{padding:22px}.tienda-identidad-config{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:end}.tienda-color-control{display:grid;gap:6px}.tienda-color-selector{display:flex!important;align-items:center;gap:8px;width:max-content;padding:5px 10px 5px 5px;border:1px solid var(--border);border-radius:10px;background:#fff}.tienda-color-selector input{width:40px!important;height:34px;padding:0;border:0}.tienda-color-selector b{font-size:12px}.tienda-horarios-titulo,.encabezado-seccion{margin-top:24px}.tienda-sucursales-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}.tienda-sucursal-config{margin:0}.tienda-modalidades{display:flex;gap:18px;padding-top:12px;border-top:1px solid var(--border)}
.pos-buscador{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}.pos-buscador input#buscador{grid-column:1}.pos-btn-escanear{grid-column:2;margin:0!important;min-height:48px;display:inline-flex;align-items:center;gap:6px}.pos-buscador #sugerencias,.pos-buscador #bloque-recarga{grid-column:1/-1}.pos-carrito-cabecera{display:flex;justify-content:space-between;align-items:center;gap:12px}.pos-carrito-panel #carrito{min-height:100px;margin:10px 0}.pos-carrito-panel .total-grande{margin:14px -4px 16px;padding:16px;border-radius:14px;background:#eff8f3;border:1px solid #cce7d9}.pos-carrito-panel #medio_pago_wrap{padding-top:4px}.pos-carrito-panel label{margin-top:10px}
.productos-filtros-principales{padding:18px;position:sticky;top:64px;z-index:12}.buscador-productos-fila{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}.buscador-productos-campo{flex:1 1 320px}.buscador-productos-checkbox{display:flex;align-items:center;gap:7px;font-weight:normal;white-space:nowrap;align-self:center;margin-left:4px}.productos-gestionar-categorias{margin:12px 0;padding:16px}.productos-gestionar-categorias>summary{cursor:pointer;font-weight:750}.pagina-productos .panel-tabla{margin-top:14px}.pagina-productos .leyenda-stock{padding-bottom:10px;border-bottom:1px solid var(--border)}
.combo-grupos-editor{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}.combo-grupos-editor .encabezado-seccion{display:flex;align-items:center;justify-content:space-between;gap:12px}.combo-grupo-editor{margin-top:10px}.combo-grupo-campos{display:grid;grid-template-columns:minmax(180px,1fr) 160px 150px 150px;gap:10px}.combo-grupo-editor select[multiple]{width:100%;margin:5px 0 10px}.combo-grupo-editor>[data-eliminar-grupo]{margin-left:auto}
@media(max-width:700px){.combo-grupos-editor .encabezado-seccion{align-items:stretch;flex-direction:column}.combo-grupo-campos{grid-template-columns:1fr 1fr}.combo-grupo-editor select[multiple]{min-height:180px}}
.combo-selector-dialogo{width:min(620px,calc(100% - 24px));max-height:88vh;padding:24px;border:0;border-radius:18px;box-shadow:0 24px 70px rgba(10,30,22,.28)}.combo-selector-dialogo::backdrop{background:rgba(10,25,19,.5);backdrop-filter:blur(2px)}.combo-selector-dialogo .cerrar{float:right;width:34px;height:34px;border:0;border-radius:50%;font-size:22px}.combo-selector-dialogo h3{margin:0 42px 4px 0}.combo-selector-dialogo section{margin:14px 0;padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-hundida)}.combo-selector-dialogo section h4{margin:0 0 3px}.combo-selector-dialogo section>label{display:grid;grid-template-columns:minmax(0,1fr) 100px 55px;align-items:center;gap:8px;margin-top:9px}.combo-selector-dialogo section input{min-height:38px;padding:6px 9px;text-align:right}.combo-selector-suma{display:block;margin-top:9px;color:var(--rojo);text-align:right}.combo-selector-suma.completo{color:var(--verde)}.combo-selector-dialogo .fila-botones{justify-content:flex-end}
@media(max-width:520px){.combo-selector-dialogo{padding:16px}.combo-selector-dialogo section>label{grid-template-columns:minmax(0,1fr) 78px 42px;font-size:12px}}
.filtros-fecha-principales{position:sticky;top:64px;z-index:14;margin-bottom:18px;border-color:#cfe2d9;box-shadow:0 8px 24px rgba(17,55,40,.08)}.filtros-fecha-principales form{align-items:end}.filtros-fecha-principales label{font-size:12px;color:var(--texto-muted)}.filtros-fecha-principales input[type=date]{min-width:155px}.filtros-fecha-principales .filtro-accion{align-self:flex-end}.filtros-estadisticas-duplicados{display:none}.pagina-analitica>.tarjeta{margin-bottom:18px}.pagina-analitica .panel-analitico>h3{margin-top:0}.pagina-estadisticas .dashboard-panel{border-left:4px solid var(--verde)}
.detalle-grid{align-items:stretch}.detalle-grid>.tarjeta{margin:0;padding:18px;border-top:3px solid #dce9e2}.detalle-grid>.tarjeta h3{margin:0 0 12px;font-size:14px;color:var(--texto-muted);text-transform:uppercase;letter-spacing:.04em}.detalle-grid>.tarjeta p{margin:7px 0}.detalle-grid+.tarjeta.tabla-scroll{margin-top:18px}.detalle-grid+.tarjeta table tr:last-child{font-size:17px;background:#f0f8f4}
@media(max-width:760px){.tienda-config-nav{grid-template-columns:1fr 1fr}.tienda-identidad-config{grid-template-columns:1fr}.tienda-sucursales-grid{grid-template-columns:1fr}.tienda-modalidades{display:grid;gap:5px}.productos-filtros-principales{position:static}.productos-filtros-principales .buscador-productos-fila{display:grid;grid-template-columns:1fr 1fr}.productos-filtros-principales .buscador-productos-campo{grid-column:1/-1}.productos-filtros-principales .btn{width:100%}.pos-buscador{grid-template-columns:minmax(0,1fr) auto}.pos-btn-escanear{min-width:48px;padding-inline:10px}.pos-carrito-cabecera{align-items:flex-start}.filtros-fecha-principales{position:static}.filtros-fecha-principales form{display:grid;grid-template-columns:1fr 1fr}.filtros-fecha-principales form>div{min-width:0;width:auto}.filtros-fecha-principales form>div:nth-child(n+3){grid-column:1/-1}.filtros-fecha-principales input,.filtros-fecha-principales select,.filtros-fecha-principales .btn{width:100%}}

/* Ajustes de densidad y capas para aprovechar escritorio sin perder claridad. */
.centro-notificaciones{z-index:1000}.centro-notificaciones-panel{z-index:1200}.topbar{z-index:900}.navbar{z-index:200}.compra-unidad-ayuda{display:block;margin-top:4px;color:var(--texto-muted);font-size:10px;white-space:nowrap}
/* El ajuste global anterior baja la barra de escritorio a z-index:200. En
   móvil el cajón debe recuperar una capa superior a su fondo; de lo contrario
   el overlay oscuro queda encima, apaga el menú y captura todos los toques. */
@media(max-width:760px){
  #fondo-navbar-movil{z-index:1998}
  .navbar,.interfaz-interna .navbar{z-index:1999;pointer-events:auto}
  .navbar.navbar-abierto a,.navbar.navbar-abierto summary{pointer-events:auto}
}
@media(min-width:1050px){.contenido-pos{max-width:1500px}.pos-layout{grid-template-columns:minmax(0,1.35fr) minmax(430px,.8fr);gap:14px}.pagina-productos{max-width:1500px}.pagina-productos .panel-tabla{padding:14px}.pagina-productos .tabla-compacta th,.pagina-productos .tabla-compacta td{padding-block:8px}.tienda-horarios-config{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tienda-dia{padding:14px}.pagina-estadisticas .dashboard-resumen strong{font-size:clamp(20px,2vw,28px)}.pagina-estadisticas .dashboard-resumen span,.pagina-estadisticas .dashboard-resumen small{font-size:11px}.pagina-estadisticas .grid-graficos{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pagina-estadisticas .grid-graficos>div{padding:8px;max-height:235px}.pagina-estadisticas .grid-graficos canvas{max-height:210px!important}.pagina-analitica .tabla-scroll{max-height:520px;overflow:auto}.pagina-analitica .tabla-scroll thead,.pagina-analitica .tabla-scroll tr:first-child{position:sticky;top:0;z-index:2;background:#fff}}
.encabezado-seccion{padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:#fff}.encabezado-seccion h3{margin:0}.encabezado-seccion p{margin:4px 0 0}.tienda-guardar-sticky{z-index:80}.tienda-config-nav{position:relative;z-index:1}
.interfaz-interna .encabezado-pantalla{padding:18px 20px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(20,45,35,.035)}.interfaz-interna .encabezado-pantalla h2{margin-top:2px}.interfaz-interna .encabezado-pantalla p{margin-bottom:0}@media(max-width:640px){.interfaz-interna .encabezado-pantalla{padding:15px;border-radius:13px}}

/* POS continuo: herramientas arriba, carrito ancho y cierre siempre accesible. */
.pos-layout{grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);grid-template-areas:"buscador especiales" "carrito carrito";gap:12px}.pos-layout>.pos-buscador,.pos-layout>.pos-especiales{position:sticky;top:64px;z-index:40;margin:0;align-self:start}.pos-layout>.pos-area-carrito{width:100%}.pos-carrito-panel{position:relative!important;top:auto!important;padding:16px 18px}.pos-carrito-panel #carrito{max-height:none;min-height:110px;overflow:visible}.pos-cierre-sticky{position:sticky;top:64px;z-index:35;display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,230px);align-items:stretch;gap:10px;margin:10px -6px 12px;padding:8px;border:1px solid #cce4d8;border-radius:15px;background:rgba(248,252,250,.97);box-shadow:0 10px 25px rgba(20,65,47,.1);backdrop-filter:blur(10px)}.pos-cierre-sticky .total-grande{margin:0!important;padding:8px 12px!important;border:0!important;background:transparent!important}.pos-cierre-sticky #btn_cobrar{width:100%;margin:0}.carrito-item:has(.carrito-producto-info){display:grid;grid-template-columns:minmax(240px,1.7fr) minmax(100px,.55fr) minmax(150px,.65fr) minmax(160px,.65fr);align-items:center;gap:14px;padding:9px 8px}.carrito-producto-info{display:grid;gap:2px;min-width:0}.carrito-producto-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.carrito-producto-info small{overflow:hidden;color:var(--texto-muted);text-overflow:ellipsis;white-space:nowrap}.carrito-precio-unit,.carrito-cantidad,.carrito-importe{display:grid;gap:2px}.carrito-precio-unit>small,.carrito-cantidad>small,.carrito-importe>small{color:var(--texto-muted);font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.carrito-cantidad>span{display:flex;align-items:center;gap:5px}.carrito-item input.cant{width:82px;height:34px;min-height:34px;padding:4px 8px;font-size:14px}.carrito-importe{grid-template-columns:1fr auto;align-items:center}.carrito-importe>small{grid-column:1/-1}.carrito-importe .subtotal-fila{font-weight:800;white-space:nowrap}.carrito-importe .btn{padding:6px 9px}
@media(max-width:900px){.pos-layout{grid-template-columns:1fr;grid-template-areas:"buscador" "especiales" "carrito"}.pos-layout>.pos-buscador,.pos-layout>.pos-especiales{position:static}.pos-cierre-sticky{top:58px}.carrito-item:has(.carrito-producto-info){grid-template-columns:minmax(0,1fr) auto auto}.carrito-producto-info{grid-column:1/-1}.carrito-precio-unit,.carrito-cantidad,.carrito-importe{min-width:0}}@media(max-width:520px){.pos-cierre-sticky{grid-template-columns:1fr auto;margin-inline:-8px}.pos-cierre-sticky .total-grande{font-size:25px}.pos-cierre-sticky .total-grande>span:first-child{display:none}.pos-cierre-sticky #btn_cobrar{min-width:112px}.carrito-item:has(.carrito-producto-info){grid-template-columns:1fr 1fr}.carrito-producto-info{grid-column:1/-1}.carrito-importe{grid-column:1/-1;grid-template-columns:1fr auto}.carrito-item input.cant{width:74px}}

/* POS: cabecera tabular y cierre de venta flotante sin tapar la navegación. */
.pos-layout>.pos-buscador,.pos-layout>.pos-especiales{top:calc(var(--alto-navegacion,100px) + 8px)}
.pos-carrito-columnas,.carrito-item:has(.carrito-producto-info){display:grid;grid-template-columns:minmax(220px,1.55fr) minmax(110px,.65fr) minmax(130px,.75fr) minmax(92px,.5fr) minmax(120px,.6fr) minmax(110px,.55fr) 38px;align-items:center;gap:12px}
.pos-carrito-columnas{margin-top:12px;padding:8px;border-block:1px solid var(--border);color:var(--texto-muted);font-size:10px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.pos-carrito-columnas span:nth-child(n+4){text-align:right}
.carrito-item:has(.carrito-producto-info){padding:10px 8px}
.carrito-producto-info,.carrito-marca,.carrito-categoria{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carrito-marca,.carrito-categoria{color:var(--texto-muted);font-size:12.5px}
.carrito-precio-unit,.carrito-cantidad,.carrito-importe{text-align:right}
.carrito-cantidad>span{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.carrito-item input.cant{width:76px;height:34px;min-height:34px;padding:4px 8px;font-size:14px}
.carrito-importe .subtotal-fila{font-weight:800;white-space:nowrap}
.carrito-quitar{justify-self:end;padding:6px 9px}
.pos-cierre-sticky{z-index:85;display:grid;grid-template-columns:minmax(220px,1fr) minmax(250px,360px) minmax(150px,220px);align-items:end;gap:12px;padding:9px 12px;border:1px solid #cce4d8;border-radius:15px;background:rgba(248,252,250,.98);box-shadow:0 12px 34px rgba(20,65,47,.16);backdrop-filter:blur(12px)}
.pos-cierre-sticky .total-grande{margin:0!important;padding:7px 10px!important;border:0!important;background:transparent!important;text-align:left}
.pos-medio-pago-principal{display:grid;gap:3px}
.pos-medio-pago-principal label{margin:0!important;color:var(--texto-muted);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.pos-medio-pago-principal select{min-height:42px}
.pos-cierre-sticky #btn_cobrar{width:100%;min-height:42px;margin:0}
.contenido-pos{padding-bottom:105px}
@media(min-width:901px){.pos-cierre-sticky{position:fixed;right:max(18px,calc((100vw - 1500px)/2 + 18px));bottom:14px;left:max(18px,calc((100vw - 1500px)/2 + 18px))}}
@media(max-width:900px){.pos-carrito-columnas{display:none}.carrito-item:has(.carrito-producto-info){grid-template-columns:minmax(0,1fr) auto auto}.carrito-producto-info{grid-column:1/-1}.carrito-marca,.carrito-categoria{display:none}.carrito-precio-unit:before{content:"Precio"}.carrito-cantidad:before{content:"Cantidad"}.carrito-importe:before{content:"Subtotal"}.carrito-precio-unit:before,.carrito-cantidad:before,.carrito-importe:before{display:block;color:var(--texto-muted);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.pos-cierre-sticky{position:sticky;top:auto;bottom:8px;grid-template-columns:1fr 1fr;align-items:end;margin:10px -8px 12px}.pos-cierre-sticky .total-grande{font-size:27px}.pos-cierre-sticky #btn_cobrar{grid-column:2;grid-row:1}.pos-medio-pago-principal{grid-column:1/-1;grid-row:2}.contenido-pos{padding-bottom:20px}}
@media(max-width:520px){.pos-cierre-sticky{grid-template-columns:1fr auto}.pos-cierre-sticky .total-grande{font-size:24px}.pos-cierre-sticky #btn_cobrar{min-width:112px}.carrito-item:has(.carrito-producto-info){grid-template-columns:1fr 1fr auto}.carrito-producto-info{grid-column:1/-1}.carrito-item input.cant{width:70px}}
@media(max-width:900px){.carrito-item:has(.carrito-producto-info){grid-template-columns:minmax(0,1fr) auto auto 38px}}
@media(max-width:520px){.carrito-item:has(.carrito-producto-info){grid-template-columns:1fr auto auto 38px}}

/* POS compacto: el panel auxiliar se superpone y el cobro forma una consola inferior. */
@media(min-width:901px){
  .pos-layout>.pos-especiales{overflow:visible;background:#fff;border-style:solid;box-shadow:0 10px 28px rgba(18,38,30,.12)}
  .pos-layout>.pos-especiales .pos-especiales-body{position:absolute;z-index:95;top:calc(100% + 8px);right:0;width:min(760px,calc(100vw - 36px));max-height:calc(100vh - var(--alto-navegacion,100px) - 90px);margin:0;padding:16px;overflow:auto;border:1px solid var(--border-fuerte);border-radius:16px;background:#fff;box-shadow:0 22px 55px rgba(17,35,28,.24)}
  .pos-cierre-sticky{display:grid;grid-template-columns:auto minmax(220px,280px) minmax(0,1fr) minmax(145px,190px);align-items:end;gap:10px}
  .pos-cierre-sticky .total-grande{min-width:230px;white-space:nowrap}
  .pos-cierre-sticky #medio_pago_wrap{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;min-width:0;overflow-x:auto;overflow-y:hidden}
  .pos-cierre-sticky #medio_pago_wrap>div{flex:0 0 auto;min-width:180px;margin:0}
  .pos-cierre-sticky #medio_pago_wrap #campos_mixto{min-width:300px}
  .pos-cierre-sticky #medio_pago_wrap #campos_comprobante{min-width:220px}
  .pos-cierre-sticky #medio_pago_wrap #equivalente_moneda{align-self:center;min-width:max-content;margin:0!important}
  .pos-cierre-sticky #medio_pago_wrap label{margin:0 0 2px!important;font-size:9px;line-height:1.1}
  .pos-cierre-sticky #medio_pago_wrap input,.pos-cierre-sticky #medio_pago_wrap select{height:36px;min-height:36px;padding:5px 8px;font-size:12px}
  .pos-cierre-sticky #medio_pago_wrap .form-fila{gap:6px;margin:0}
  .pos-cierre-sticky #medio_pago_wrap .form-fila>div{min-width:135px}
  .pos-cierre-sticky #btn_cobrar{justify-self:end}
  .carrito-item:has(.carrito-producto-info){min-height:36px;padding:4px 8px;font-size:12.5px}
  .pos-carrito-panel #carrito{margin:3px 0}
  .pos-carrito-columnas{margin-top:8px;padding:6px 8px}
  .carrito-item input.cant{width:68px;height:28px;min-height:28px;padding:2px 6px;font-size:12.5px}
  .carrito-quitar{min-height:28px;padding:3px 7px}
}
@media(max-width:900px){
  .pos-cierre-sticky #medio_pago_wrap{grid-column:1/-1;grid-row:3;min-width:0}
}

/* La consola flotante pertenece exclusivamente al contenido de Vender. */
@media(min-width:901px){
  .contenido-pos .pos-cierre-sticky{border-radius:12px;box-shadow:0 8px 24px rgba(20,65,47,.14)}
}

/* Consola de cobro: una única composición, sin parches superpuestos. */
@media (min-width: 1200px) {
  .contenido-pos .pos-cierre-sticky {
    position: sticky;
    inset: auto;
    bottom: 0;
    z-index: 85;
    display: grid;
    grid-template-columns: minmax(200px, auto) 220px minmax(0, 1fr) 136px;
    align-items: center;
    gap: 16px;
    width: auto;
    min-height: 72px;
    margin: 16px -18px -16px;
    padding: 12px 18px;
    overflow: visible;
    border: 1px solid #cce4d8;
    border-radius: 12px 12px 0 0;
    background: rgba(248, 252, 250, .98);
    box-shadow: 0 8px 24px rgba(20, 65, 47, .14);
    backdrop-filter: blur(12px);
  }

  .contenido-pos .pos-cierre-sticky .total-grande {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 200px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    border: 0;
    background: transparent;
    text-align: left;
  }

  .contenido-pos .pos-medio-pago-principal {
    display: grid;
    gap: 4px;
    min-width: 0;
    margin: 0;
  }

  .contenido-pos .pos-medio-pago-principal label {
    margin: 0;
    color: var(--texto-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
  }

  .contenido-pos .pos-medio-pago-principal select {
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin: 0;
  }

  .contenido-pos #medio_pago_wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .contenido-pos #medio_pago_wrap > * {
    margin-block: 0;
  }

  .contenido-pos .pos-cierre-sticky #medio_pago_wrap #campos_comprobante {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  .contenido-pos #campos_comprobante[style*="display: block"] {
    display: flex !important;
    align-items: center;
  }

  .contenido-pos .pos-sin-comprobante {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
  }

  .contenido-pos .pos-sin-comprobante input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
  }

  .contenido-pos #campo_cliente {
    display: none !important;
  }

  .contenido-pos #campos_cliente_generico {
    position: relative;
    flex: 1 1 390px;
    grid-template-columns: minmax(190px, 1fr) minmax(130px, .72fr);
    align-items: center;
    gap: 8px;
    min-width: 320px;
    max-width: 460px;
    margin: 0;
  }

  .contenido-pos #campos_cliente_generico[style*="display: block"] {
    display: grid !important;
  }

  .contenido-pos #label_cliente_generico {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .contenido-pos .pos-cliente-busqueda {
    position: relative;
    min-width: 0;
  }

  .contenido-pos #cliente_generico_buscador {
    width: 100%;
    min-width: 0;
    height: 42px;
    margin: 0;
  }

  .contenido-pos #cliente_generico_seleccionado[style*="display: block"] {
    display: flex !important;
    align-items: center;
  }

  .contenido-pos #cliente_generico_seleccionado {
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 10px;
    overflow: hidden;
    color: var(--verde);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 10px;
    background: rgba(22, 132, 91, .07);
  }

  .contenido-pos #cliente_generico_sugerencias {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 12000;
    width: min(360px, 45vw);
    max-height: 260px;
    margin: 0;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(30, 36, 32, .16);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(18, 38, 30, .24);
  }

  .contenido-pos .pos-cierre-sticky #btn_cobrar {
    justify-self: end;
    width: 136px;
    min-width: 136px;
    max-width: 136px;
    min-height: 44px;
    margin: 0;
    padding-inline: 16px;
    white-space: nowrap;
  }
}

/* En escritorio angosto conserva el orden sin comprimir controles. */
@media (min-width: 901px) and (max-width: 1199px) {
  .contenido-pos .pos-cierre-sticky {
    position: sticky;
    inset: auto;
    bottom: 0;
    z-index: 85;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) 220px 136px;
    gap: 10px 14px;
    align-items: center;
    margin: 16px -18px -16px;
    padding: 12px 18px;
    overflow: visible;
  }

  .contenido-pos .pos-cierre-sticky .total-grande { margin: 0; white-space: nowrap; }
  .contenido-pos .pos-medio-pago-principal { min-width: 0; }
  .contenido-pos .pos-cierre-sticky #btn_cobrar { width: 136px; margin: 0; }
  .contenido-pos #medio_pago_wrap { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; overflow: visible; }
  .contenido-pos #campos_comprobante[style*="display: block"] { display: flex !important; align-items: center; }
  .contenido-pos .pos-sin-comprobante { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
  .contenido-pos #campo_cliente { display: none !important; }
  .contenido-pos #campos_cliente_generico[style*="display: block"] { display: flex !important; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .contenido-pos #label_cliente_generico { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .contenido-pos .pos-cliente-busqueda { position: relative; flex: 1; min-width: 190px; }
  .contenido-pos #cliente_generico_buscador { width: 100%; }
  .contenido-pos #cliente_generico_seleccionado { flex: 0 1 190px; min-width: 130px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .contenido-pos #cliente_generico_sugerencias { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12000; width: min(360px, 55vw); max-height: 260px; overflow-y: auto; background: #fff; }
}

/* Ajuste final del POS: más densidad, consola al pie y capas previsibles. */
.interfaz-interna .navbar {
  min-height: 44px;
  padding-block: 6px;
  overflow: visible;
}
.interfaz-interna .navbar a,
.interfaz-interna .nav-dropdown summary {
  padding-block: 6px;
  font-size: 12.5px;
  line-height: 1.25;
}
.interfaz-interna .navbar a.nav-destacado {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 15px;
  box-sizing: border-box;
}

.contenido-pos {
  padding-top: 12px;
  padding-bottom: 96px;
  font-size: 13px;
}
.contenido-pos .pos-buscador,
.contenido-pos .pos-carrito-panel,
.contenido-pos .pos-especiales {
  font-size: 13px;
}
.contenido-pos .pos-buscador {
  padding: 12px 16px;
}
.contenido-pos .pos-buscador input#buscador {
  min-height: 48px;
  padding: 10px 14px 10px 44px;
  font-size: 16px;
}
.contenido-pos .pos-buscador::before {
  left: 28px;
  top: 26px;
  font-size: 20px;
  line-height: 20px;
  pointer-events: none;
}
.contenido-pos .pos-buscador .btn,
.contenido-pos .pos-especiales .btn,
.contenido-pos .pos-cierre-sticky .btn {
  font-size: 12.5px;
}
.contenido-pos .pos-carrito-panel {
  padding-top: 12px;
}
.contenido-pos .pos-carrito-cabecera h3 {
  font-size: 18px;
}

@media (min-width: 901px) {
  .contenido-pos .pos-cierre-sticky {
    position: fixed;
    top: auto;
    right: max(16px, calc((100vw - 1680px) / 2 + 16px));
    bottom: 0;
    left: max(16px, calc((100vw - 1680px) / 2 + 16px));
    z-index: 100;
    grid-template-columns: minmax(190px, auto) 220px minmax(0, 1fr) 136px;
    width: auto;
    min-height: 70px;
    margin: 0;
    padding: 10px 18px;
    border-radius: 14px 14px 0 0;
    box-sizing: border-box;
  }

  .contenido-pos .pos-cierre-sticky .total-grande {
    font-size: 31px;
    line-height: 1;
  }

  .contenido-pos .pos-cierre-sticky #medio_pago_wrap {
    align-items: center;
  }

  .contenido-pos .pos-sin-comprobante {
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
  }

  .contenido-pos .pos-cierre-sticky #medio_pago_wrap .pos-sin-comprobante {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .contenido-pos .pos-sin-comprobante input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    outline: 0;
    box-shadow: none !important;
    accent-color: var(--verde);
  }

  .contenido-pos .pos-sin-comprobante input[type="checkbox"]:focus,
  .contenido-pos .pos-sin-comprobante input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(22, 122, 85, .3);
    outline-offset: 2px;
    box-shadow: none !important;
  }

  /* La consola está al pie: las coincidencias se despliegan hacia arriba. */
  .contenido-pos #cliente_generico_sugerencias {
    top: auto;
    bottom: calc(100% + 6px);
  }

  .contenido-pos .pos-post-venta {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    margin: 0;
  }

  .contenido-pos .pos-post-venta[style*="display: block"] {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .contenido-pos .pos-cierre-sticky:has(.pos-post-venta[style*="display: block"]) #medio_pago_wrap {
    display: none !important;
  }

  .contenido-pos .pos-post-venta > p {
    flex: 0 0 auto;
    margin: 0;
    color: var(--verde);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
  }

  .contenido-pos .pos-post-venta .btn {
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 12px;
    white-space: nowrap;
  }

  .contenido-pos #link_vales_emitidos,
  .contenido-pos #post_venta_creditos {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
  }

  /* El panel abierto pertenece a una capa superior a la consola de cobro. */
  .contenido-pos .pos-layout > .pos-especiales:has(.pos-especiales-body.abierta) {
    z-index: 180;
  }

  .contenido-pos .pos-especiales .pos-especiales-body.abierta {
    z-index: 190;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 12px;
    width: min(820px, calc(100vw - 32px));
    max-height: calc(100vh - var(--alto-navegacion, 100px) - 84px);
    padding: 14px;
    background: rgba(255, 255, 255, .99);
  }

  .contenido-pos .pos-especiales-body .subseccion {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
  }

  .contenido-pos .pos-especiales-body .titulo-grupo {
    margin-bottom: 8px;
    font-size: 12px;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .contenido-pos .pos-cierre-sticky {
    grid-template-columns: minmax(180px, 1fr) 210px 128px;
  }
  .contenido-pos .pos-post-venta {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .contenido-pos .pos-especiales .pos-especiales-body.abierta {
    grid-template-columns: 1fr;
    width: min(620px, calc(100vw - 28px));
  }
}

@media (max-width: 900px) {
  .contenido-pos {
    padding-top: 10px;
    padding-bottom: 20px;
    font-size: 13px;
  }
  .contenido-pos .pos-post-venta[style*="display: block"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    grid-column: 1 / -1;
  }
  .contenido-pos .pos-post-venta > p { width: 100%; margin: 0; color: var(--verde); font-weight: 750; }
}

@media (max-width: 760px) {
  .interfaz-interna .navbar a.nav-destacado { display: none; }
}

.detalle-combo-seleccion {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  color: var(--texto-muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
}

.combo-opciones-cabecera{display:grid;grid-template-columns:auto minmax(240px,420px);align-items:end;justify-content:space-between;gap:12px;margin-top:12px}.combo-opciones-lista{max-height:310px;overflow:auto;display:grid;gap:5px;padding:7px;border:1px solid var(--border);border-radius:12px;background:var(--surface-hundida)}.combo-opcion{display:grid;grid-template-columns:22px minmax(0,1fr) 110px;align-items:center;gap:9px;padding:8px 10px;margin:0!important;border-radius:9px;background:var(--surface)}.combo-opcion>input[type=checkbox]{width:18px;height:18px}.combo-opcion span{display:grid;min-width:0}.combo-opcion small{color:var(--texto-muted);font-weight:400}.combo-peso-unitario{min-width:0}.combo-opcion:has(input[type=checkbox]:checked){outline:1px solid var(--verde);background:var(--brass-light)}
@media(max-width:700px){.combo-opciones-cabecera{grid-template-columns:1fr}.combo-opcion{grid-template-columns:22px minmax(0,1fr)}.combo-peso-unitario{grid-column:2}}

.combo-grupo-editor{padding:16px!important}.combo-grupo-titulo{display:flex;align-items:center;gap:9px;margin-bottom:12px}.combo-grupo-titulo span{padding:4px 8px;border-radius:999px;background:var(--brass-light);color:var(--verde-oscuro);font-size:11px;font-weight:800}.combo-grupo-campos{grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(135px,1fr))}.combo-opciones-sugerencias{position:relative;z-index:3;display:grid;margin-left:auto;width:min(620px,100%);max-height:280px;overflow:auto;border:1px solid var(--border-fuerte);border-radius:12px;background:#fff;box-shadow:var(--sombra-media)}.combo-opciones-sugerencias[hidden]{display:none}.combo-opciones-sugerencias>button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-bottom:1px solid var(--border);background:#fff;text-align:left}.combo-opciones-sugerencias>button:hover{background:var(--surface-hundida)}.combo-opciones-sugerencias span,.combo-seleccionado span{display:grid}.combo-opciones-sugerencias small,.combo-seleccionado small{color:var(--texto-muted);font-weight:400}.combo-seleccionados{display:grid;gap:6px;margin:10px 0 12px}.combo-seleccionado{display:grid;grid-template-columns:minmax(0,1fr) 120px 32px;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:#fff}.combo-seleccionado>button{width:30px;height:30px;border:0;border-radius:8px;background:#fbe9e7;color:var(--rojo);font-size:18px}@media(max-width:900px){.combo-grupo-campos{grid-template-columns:1fr 1fr}}@media(max-width:600px){.combo-grupo-campos{grid-template-columns:1fr}.combo-opciones-cabecera{grid-template-columns:1fr}.combo-seleccionado{grid-template-columns:minmax(0,1fr) 32px}.combo-seleccionado .combo-peso-unitario{grid-column:1/-1;grid-row:2}}

/* Corrige el recorte de descendentes del texto sin alterar la isla de cobro. */
.contenido-pos .pos-medio-pago-principal select#medio_pago{height:44px;min-height:44px;padding-block:8px;line-height:1.35}
.topbar,.navbar,.barra-superior{min-height:54px}
.contenido,.contenido-ancho{padding-top:18px}
.tabla-scroll{overflow:auto;max-width:100%}
.producto-form-modal{width:min(980px,calc(100vw - 24px));height:min(820px,calc(100vh - 24px));padding:0;border:0;border-radius:14px;background:#fff;box-shadow:var(--sombra-elevada)}
.producto-form-modal::backdrop{background:rgba(10,16,13,.55)}
.producto-form-modal>header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:8px 12px;border-bottom:1px solid var(--borde);background:#fff}
.producto-form-modal header button{width:34px;height:34px;border:0;border-radius:8px;background:#eef1ef;font-size:22px}
.producto-form-modal iframe{display:block;width:100%;height:calc(100% - 47px);border:0}
@media(max-width:760px){.contenido,.contenido-ancho{padding-inline:10px}.tabla-scroll{max-height:72vh}.producto-form-modal{width:100vw;height:100vh;border-radius:0}}