* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f2f4f7;
  color: #1a1f2b;
}
/* Mobile-first: .app llena el ancho disponible. En pantallas mas anchas
   (tablet/desktop) se centra como una tarjeta con ancho maximo creciente, en vez
   de quedar una columna angosta con mucho espacio vacio a los lados. */
.app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: #fff;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .app { max-width: 640px; }
}
@media (min-width: 900px) {
  body { background: #e7eaf1; }
  .app {
    max-width: 760px;
    min-height: 100vh;
    margin: 0 auto;
    box-shadow: 0 0 40px rgba(20, 30, 60, 0.08);
  }
}
@media (min-width: 1200px) {
  .app { max-width: 900px; }
}
/* Landscape en telefono: poca altura, hay que ser mas compactos. */
@media (max-height: 480px) and (orientation: landscape) {
  main { padding-bottom: 70px; }
  nav.tabs a { padding: 8px 0; }
  .login-splash { padding: 20px 24px 16px; }
  .login-logo { width: 100px; height: 100px; }
  .login-logo img { width: 80px; height: 80px; }
}
header.topbar {
  background: linear-gradient(155deg, #1e4278, #14315c);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(12, 20, 40, 0.15);
}
header.topbar h1 { font-size: 17px; margin: 0; }
header.topbar .sub { font-size: 12px; opacity: .85; }
header.topbar .brand { display: flex; align-items: center; gap: 10px; }
header.topbar .bienvenida-usuario { margin-left:auto; margin-right:18px; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:700px) { header.topbar .bienvenida-usuario { max-width:38vw; margin-right:8px; font-size:12px; } }
header.topbar .logo-badge {
  background: #fff;
  border-radius: 9px;
  padding: 3px;
  display: flex;
  flex-shrink: 0;
}
header.topbar .logo-badge img { width: 30px; height: 30px; display: block; }
header.topbar .btn-atras {
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  padding: 6px 8px;
  margin-left: -8px;
  flex-shrink: 0;
}

.login-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px 24px;
  position: relative;
  overflow: hidden;
}

/* Fondo animado sutil -- dos manchas de color desenfocadas que derivan lento, para
   que la pantalla de login no se sienta estatica sin llegar a distraer. */
.login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
  opacity: 0.3;
  pointer-events: none;
}
.login-blob.b1 {
  width: 260px;
  height: 260px;
  background: #3a63a8;
  top: -90px;
  left: -70px;
  animation: blob-drift-1 15s ease-in-out infinite;
}
.login-blob.b2 {
  width: 230px;
  height: 230px;
  background: #8a6fd6;
  bottom: -70px;
  right: -60px;
  animation: blob-drift-2 17s ease-in-out infinite;
}
@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, 30px) scale(1.12); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-26px, -22px) scale(1.08); }
}

.login-logo,
.login-title,
.login-form {
  position: relative;
  z-index: 1;
}
.login-logo {
  width: 156px;
  height: 156px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 4px 20px rgba(24, 28, 77, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: login-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.login-logo::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 36px;
  background: radial-gradient(circle, rgba(26, 60, 110, 0.18), transparent 70%);
  z-index: -1;
  animation: logo-pulse 2.8s ease-in-out infinite;
}
.login-logo img { width: 128px; height: 128px; display: block; }
.login-title {
  margin: 20px 0 32px;
  font-size: 22px;
  color: #181c4d;
  animation: login-fade-up 0.45s ease-out 0.15s both;
}
.login-form { width: 100%; max-width: 320px; animation: login-fade-up 0.45s ease-out 0.28s both; }

@keyframes login-pop {
  from { opacity: 0; transform: scale(0.85) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes login-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes logo-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .login-blob, .login-logo, .login-logo::after, .login-title, .login-form { animation: none; }
}
main {
  flex: 1;
  padding: 16px;
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  width: 100%;
}
nav.tabs {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  background: #fff;
  border-top: 1px solid #e2e6ee;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 640px) { nav.tabs { max-width: 640px; } }
@media (min-width: 900px) { nav.tabs { max-width: 760px; } }
@media (min-width: 1200px) { nav.tabs { max-width: 900px; } }
nav.tabs a {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  text-decoration: none;
  color: #666;
  font-size: 13px;
}
nav.tabs a.active { color: #1a3c6e; font-weight: 600; }

label { display: block; font-size: 13px; color: #444; margin: 14px 0 4px; }
input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d7dce5;
  border-radius: 8px;
  font-size: 16px; /* >=16px evita el auto-zoom al enfocar en iOS Safari */
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #97aede;
  box-shadow: 0 0 0 3px rgba(26, 60, 110, 0.1);
}
textarea { resize: vertical; min-height: 60px; }

button { cursor: pointer; }
button.primary {
  width: 100%;
  padding: 13px;
  background: linear-gradient(155deg, #234a85, #14315c);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
  box-shadow: 0 4px 12px rgba(20, 49, 92, 0.25);
  transition: box-shadow 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}
button.primary:hover { filter: brightness(1.06); }
button.primary:active { transform: scale(0.98); box-shadow: 0 2px 6px rgba(20, 49, 92, 0.25); }
button.caja {
  width: 100%;
  padding: 12px;
  background: linear-gradient(155deg, #279456, #1a6b3d);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
  box-shadow: 0 3px 10px rgba(26, 107, 61, 0.22);
  transition: box-shadow 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}
button.caja:hover { filter: brightness(1.06); }
button.caja:active { transform: scale(0.98); }
button.caja svg { transition: transform 0.15s ease; }
button.caja:hover svg { transform: translateX(3px); }
button.secondary {
  width: 100%;
  padding: 10px;
  background: #fff;
  color: #1a3c6e;
  border: 1px solid #dde2ee;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
button.secondary:hover { background: #f3f6fb; border-color: #c7d0e4; }
button.secondary:active { transform: scale(0.98); }
button:disabled { opacity: .5; cursor: default; }
button:disabled:hover { filter: none; background: inherit; }

.card {
  border: 1px solid #edeff4;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover { box-shadow: 0 6px 16px rgba(20, 30, 60, 0.07); border-color: #e2e6f0; }
.card .row { display: flex; justify-content: space-between; align-items: center; }
.card .titulo { font-weight: 600; font-size: 14.5px; letter-spacing: -0.1px; }
.card .meta { font-size: 12px; color: #868c9c; margin-top: 3px; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
}
.badge.ok { background: #e3f6e9; color: #1e7a3d; border-color: #cbecd6; }
.badge.espera { background: #fff2df; color: #a3610a; border-color: #f6e0b4; }
.badge.error { background: #fde5e5; color: #a3221f; border-color: #f7cdcd; }
.badge.caja { background: #e6edfb; color: #1a4fa3; border-color: #cddaf5; }
.badge.almacen { background: #eef0f4; color: #565c6b; border-color: #dfe2ea; }

/* Animacion de entrada escalonada para listas (tarjetas de pedidos, resultados de
   busqueda, etc.) -- aplicar la clase con JS y un --delay por indice (ej.
   el.style.setProperty('--delay', i*35+'ms')) le da a la lista una sensacion de
   "cargar en cascada" en vez de aparecer de golpe.
   Solo opacidad, SIN transform -- un translateY aca (probado real, 2026-09-05) hace que
   el texto de la tarjeta animada deje un "fantasma"/repetido visible sobre otros
   elementos de la pantalla en algunos navegadores de celular reales (reportado por el
   dueño del sistema con captura real) -- un glitch de composicion de esos navegadores
   con animaciones de transform en listas largas. Opacidad sola no lo produce. */
@keyframes fade-up {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-up {
  animation: fade-up 0.3s ease-out both;
  animation-delay: var(--delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; }
}

/* Panel colapsable ("Más filtros" y similares) -- animacion real de alto via CSS
   Grid (grid-template-rows 0fr->1fr), mas fluida que un display:none/block a secas.
   Requiere el wrapper .collapse-inner adentro para que el contenido no se vea
   recortado mientras crece/encoge. */
.collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.collapse.abierto { grid-template-rows: 1fr; }
.collapse-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .collapse { transition: none; }
}

/* Resumen de líneas (producto/servicio) del pedido dentro del panel Facturar -- de
   solo lectura, para que la cajera confirme QUÉ se está facturando antes de registrar,
   no solo el Total. */
.lineas-resumen {
  margin: 8px 0 4px;
  padding: 2px 0;
  border-top: 1px solid #eef1f6;
  border-bottom: 1px solid #eef1f6;
  max-height: 220px;
  overflow-y: auto;
}
.lineas-resumen:empty { display: none; }
.lineas-resumen .linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid #f5f6f9;
}
.lineas-resumen .linea:last-child { border-bottom: none; }
.lineas-resumen .linea .desc { flex: 1; color: #333; }
.lineas-resumen .linea .cant { color: #8b90a0; font-size: 12px; margin-right: 4px; }
.lineas-resumen .linea .monto { font-weight: 600; color: #1a3c6e; white-space: nowrap; }

.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}
@media (min-width: 500px) {
  .menu-grid { grid-template-columns: 1fr 1fr; }
}
.menu-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid #eceff4;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  color: #1a1f2b;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.menu-card:hover { box-shadow: 0 10px 24px rgba(20, 30, 60, 0.09); border-color: #dde2ee; }
.menu-card:active { background: #f7f9fc; transform: scale(0.98); box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05); }
.menu-card .icono-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(155deg, #eef2fb, #e2e8f7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.menu-card .icono-badge svg { width: 26px; height: 26px; display: block; color: #1a3c6e; }
.menu-card .titulo { display: block; font-weight: 700; font-size: 15px; color: #1a3c6e; letter-spacing: -0.1px; }
.menu-card .desc { font-size: 12.5px; color: #8b90a0; margin-top: 4px; }

.menu-card { position: relative; }
.orden-agarre {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #dde2ee;
  background: #eef2fb;
  color: #1a3c6e;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.orden-agarre:active { cursor: grabbing; background: #dde5f7; }
.menu-card.arrastrando {
  position: fixed;
  z-index: 1000;
  box-shadow: 0 14px 30px rgba(20, 30, 60, 0.22);
  pointer-events: none;
}
.orden-marcador {
  border: 2px dashed #c3cce4;
  border-radius: 16px;
  background: #f4f6fb;
}

.toast-contenedor {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 448px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}
.toast {
  background: #1a1f2b;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.error-box {
  background: #fde5e5;
  color: #a3221f;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 10px;
}
.aviso-box {
  background: #fff2df;
  color: #a3610a;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 10px;
}

/* Paneles que piden la clave de un supervisor (permiso faltante, edicion avanzada,
   etc.) -- mismo tono ambar que .aviso-box, para que se distingan de una tarjeta
   comun apenas se ven, sin tener que leer el texto primero. */
.card-clave {
  background: #fff2df;
  border-color: #f0c584;
  border-left: 4px solid #a3610a;
}
.card-clave label {
  color: #a3610a;
  font-weight: 700;
}
.card-clave p {
  color: #8a5a12 !important;
}

/* Modal tipo "hoja" (bottom sheet) para Facturar/Autorizar/clave -- reemplaza el
   scroll-hasta-el-panel: aparece siempre al instante encima del contenido, sin
   importar en qué parte de una lista larga esté el usuario (pedido explicito del
   dueño del sistema, 2026-09-06). Un solo backdrop compartido detras de los tres
   paneles (nunca hay mas de uno abierto a la vez). */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 24, 0.55);
  /* Evita los parpadeos de composición que algunos controladores de video
     provocan al abrir este diálogo en Windows. El oscurecimiento mantiene
     el foco visual sin forzar un filtro GPU sobre toda la ventana. */
  z-index: 150;
  animation: backdrop-fade-in 0.2s ease-out;
}
@keyframes backdrop-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Movil (<640px): hoja que sube desde abajo, patron nativo de apps moviles. Desde
   640px (tablet/escritorio) se vuelve un dialogo centrado de verdad -- una hoja pegada
   al borde inferior de una pantalla ancha se ve fuera de lugar/poco profesional
   (reportado real por el dueño del sistema), un dialogo centrado es lo esperado ahi. */
.modal-panel {
  position: fixed !important;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  z-index: 200;
  box-shadow: 0 -10px 40px rgba(10, 15, 30, 0.25);
  margin-bottom: 0 !important;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  animation: sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-panel::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background: #dde2ee;
  border-radius: 4px;
  margin: -6px auto 14px;
}
@keyframes sheet-up {
  from { transform: translate(-50%, 100%); }
  to { transform: translate(-50%, 0); }
}
@media (min-width: 640px) {
  .modal-panel {
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 560px;
    max-height: 80vh;
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(10, 15, 30, 0.35), 0 4px 16px rgba(10, 15, 30, 0.12);
    animation: modal-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .modal-panel::before { display: none; }
}
@media (min-width: 900px) { .modal-panel { max-width: 620px; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-panel, .modal-backdrop { animation: none; }
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eef1f6;
}
.modal-header label { margin: 0; }
.modal-cerrar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #f2f4f8;
  color: #6b7180;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-cerrar:hover { background: #e6e9f0; color: #1a1f2b; }

.check-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
  margin: 10px 0 14px;
}
.check-inline input { width: auto; margin: 0; }

.compartir-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.compartir-box button {
  width: auto;
  flex: 1 1 auto;
  min-width: 110px;
  margin-top: 0;
  padding: 10px 12px;
  font-size: 13px;
}

.lista-resultados {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #e2e6ee;
  border-radius: 8px;
  margin-top: 6px;
}
.lista-resultados .item {
  padding: 10px 12px;
  border-bottom: 1px solid #eef1f6;
  cursor: pointer;
}
.lista-resultados .item:last-child { border-bottom: none; }
.lista-resultados .item:active { background: #f2f4f7; }

/* Consulta de movimiento por cliente o suplidor. */
.mov-tercero .grid-2 label { min-width: 0; }
.mov-tercero .lista-resultados { background: #fff; }
.mov-tercero .resultado-item { display:block; width:100%; margin:0; border:0; border-bottom:1px solid #eef1f6; border-radius:0; background:#fff; color:#183f76; text-align:left; box-shadow:none; }
.mov-tercero .resultado-item:hover { background:#f4f8fd; }
.mov-resumen { display:grid; grid-template-columns:repeat(5,minmax(120px,1fr)); gap:10px; margin:0 0 18px; }
.mov-resumen div { padding:12px; border:1px solid #e4eaf2; border-radius:9px; background:#fbfcfe; }
.mov-resumen span,.mov-resumen strong { display:block; }
.mov-resumen span { color:#66758a; font-size:12px; }
.mov-resumen strong { margin-top:5px; color:#183f76; font-size:16px; }
.mov-tercero .table-wrap { overflow:auto; max-height:60vh; border:1px solid #e4eaf2; border-radius:8px; }
.mov-tercero table { width:100%; min-width:760px; }
.mov-tercero th,.mov-tercero td { padding:9px 10px; border-bottom:1px solid #edf0f5; text-align:left; }
.mov-tercero .num { text-align:right; white-space:nowrap; }
.acciones-reporte { display:flex; justify-content:flex-end; margin-bottom:12px; }
.acciones-reporte button { width:auto; margin:0; }
@media (max-width:760px) { .mov-resumen { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media print { .topbar,.btn-atras,.mov-tercero>section:first-child,.acciones-reporte,.tabs { display:none!important; } .app { max-width:none; } .mov-tercero .card { border:0; box-shadow:none; padding:0; } .mov-tercero .table-wrap { max-height:none; overflow:visible; } }



.carrito-item {
  padding: 10px 0;
  border-bottom: 1px solid #eef1f6;
}
.carrito-item .fila-principal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.carrito-item .desc { font-size: 13px; flex: 1; padding-right: 8px; }
.carrito-item .cant-controls { display: flex; align-items: center; gap: 6px; }
.carrito-item .cant-controls button {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid #d7dce5; background: #fff;
}
.carrito-item .cant-controls input { width: 50px; text-align: center; padding: 6px; }
.carrito-item .fila-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: #666;
}
.carrito-item .fila-extra label { margin: 0; font-size: 12px; color: #666; white-space: nowrap; }
.carrito-item .fila-extra input.desc-input { width: 52px; padding: 5px 6px; font-size: 13px; }
.carrito-item .fila-extra input.precio-input { width: 78px; padding: 5px 6px; font-size: 13px; }
.carrito-item .editar-precio-link { color: #1a3c6e; text-decoration: underline; cursor: pointer; }
.carrito-item .stock-warning { color: #a3221f; font-size: 11px; margin-top: 4px; }
.carrito-item .series-box {
  margin-top: 8px;
  padding: 8px;
  background: #f7f8fb;
  border-radius: 8px;
}
.carrito-item .series-box label { display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.carrito-item .series-box input.serie-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;
  font-size: 13px;
  margin-bottom: 6px;
}
.carrito-item .series-box input.serie-input:last-child { margin-bottom: 0; }

.totales { margin-top: 14px; border-top: 1px solid #e2e6ee; padding-top: 10px; font-size: 14px; }
.totales .row { display: flex; justify-content: space-between; padding: 3px 0; }
.totales .gran-total { font-weight: 700; font-size: 17px; }

.link-cliente { color: #1a3c6e; font-size: 13px; text-decoration: underline; }

/* Buscador compacto en linea (input + boton), ej. aplicar NC/Recibo a una factura --
   a diferencia del resto de la app (botones siempre a lo ancho), aca el boton va al
   lado del campo porque es una accion puntual sobre ESE campo, no la accion principal
   del formulario. */
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1; }
.input-row button { width: auto; white-space: nowrap; margin-top: 0; }

/* "Chip" de confirmacion cuando se aplica una NC/Recibo a una factura -- mismo tono
   verde que .badge.ok (aplicado con exito), con un link para quitarlo sin tener que
   volver a tocar el campo de busqueda. */
.aplicado-box {
  margin-top: 8px;
  padding: 10px 12px;
  background: #e9f7ee;
  border: 1px solid #bfe3cc;
  border-radius: 8px;
}
.aplicado-box .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.aplicado-box .titulo { font-weight: 600; font-size: 13px; color: #1e7a3d; }
.quitar {
  font-size: 12px;
  color: #a3221f;
  text-decoration: underline;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.aplicado-box label { margin-top: 10px; }

/* Agrupa pares de campo (label+select/input) en 2 columnas cuando hay espacio,
   para no dejar una columna larga y angosta en tablet/desktop/landscape. */
@media (min-width: 640px) {
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .grid-2 > div { min-width: 0; }
}
/* Referencia española bajo el nombre traducido de cada campo. Se representa también
   con CSS para que las PWA/WebView restauradas no dependan de insertar nodos extra. */
html[lang="en"] label[data-i18n-espanol]::after,
html[lang="zh-CN"] label[data-i18n-espanol]::after,
html[lang="en"] .titulo[data-i18n-espanol]::after,
html[lang="zh-CN"] .titulo[data-i18n-espanol]::after,
html[lang="en"] .desc[data-i18n-espanol]::after,
html[lang="zh-CN"] .desc[data-i18n-espanol]::after,
html[lang="en"] h1[data-i18n-espanol]::after,
html[lang="zh-CN"] h1[data-i18n-espanol]::after {
  content: attr(data-i18n-espanol);
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.15;
  opacity: .72;
}
html[lang="en"] button[data-i18n-espanol]::after,
html[lang="zh-CN"] button[data-i18n-espanol]::after,
html[lang="zh-CN"] summary[data-i18n-espanol]::after,
html[lang="en"] summary[data-i18n-espanol]::after {
  content: attr(data-i18n-espanol);
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.15;
  opacity: .72;
}

/* Invitación opcional para instalar la PWA. Se ubica fuera de cada pantalla para
   estar presente desde el login y en los módulos que no comparten encabezado. */
.aviso-instalar-app {
  position: fixed;
  z-index: 10000;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(370px, calc(100vw - 24px));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 10px 12px 14px;
  border: 1px solid #b9cae2;
  border-radius: 12px;
  background: #fff;
  color: #173f75;
  box-shadow: 0 9px 28px #12294a3b;
}
.aviso-instalar-texto { display: grid; gap: 3px; min-width: 0; }
.aviso-instalar-texto strong { font-size: 14px; }
.aviso-instalar-texto span { font-size: 12px; line-height: 1.3; color: #4c607c; }
.aviso-instalar-boton { width: auto; margin: 0; padding: 9px 10px; white-space: nowrap; font-size: 12px; }
.aviso-instalar-cerrar { width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; color: #52637d; font-size: 25px; line-height: 1; }
.aviso-instalar-cerrar:hover { background: #edf2f8; }

/* Tablero ejecutivo del menú principal */
.dashboard{margin:28px 0 8px;padding:24px;border:1px solid #e5ebf3;border-radius:18px;background:linear-gradient(145deg,#fff 0%,#f7faff 100%);box-shadow:0 12px 34px #173f7510}.dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px}.dashboard-eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:800;color:#5273a8}.dashboard h2,.dashboard h3{margin:3px 0;color:#152f57}.dashboard h2{font-size:21px}.dashboard h3{font-size:15px}.dashboard-head p,.dashboard-chart-title p{margin:4px 0 0;color:#71809a;font-size:12px;text-transform:capitalize}.dashboard-refresh{width:36px;height:36px;margin:0;padding:0;border-radius:10px;background:#edf3fc;color:#26508a;font-size:22px;line-height:1}.dashboard-refresh.loading{animation:dash-spin .7s linear infinite}.dashboard-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.dashboard-kpi{position:relative;overflow:hidden;padding:16px;border-radius:14px;background:#fff;border:1px solid #e7edf5}.dashboard-kpi:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#3478d0}.dashboard-kpi.facturas:before{background:#7b5bd6}.dashboard-kpi.pedidos:before{background:#e18a36}.dashboard-kpi span{display:block;color:#6b7890;font-size:12px;font-weight:600}.dashboard-kpi strong{display:block;margin:7px 0 4px;color:#172d4f;font-size:23px;letter-spacing:-.5px}.dashboard-kpi small{font-size:11px;color:#77869d}.dashboard-kpi small.positivo{color:#168451;font-weight:700}.dashboard-kpi small.negativo{color:#c45454;font-weight:700}.dashboard-chart-card{margin-top:14px;padding:17px 18px 13px;border-radius:14px;background:#fff;border:1px solid #e7edf5}.dashboard-chart-title{display:flex;justify-content:space-between;gap:12px;align-items:start}.dashboard-chart-title>strong{color:#204a82;font-size:16px}.dashboard-chart{height:178px;margin-top:14px;display:flex;gap:9px;align-items:flex-end;border-bottom:1px solid #e9eef5;background:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,#eef2f7 44px)}.dash-bar-wrap{height:100%;min-width:0;flex:1;display:flex;position:relative;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}.dash-bar{width:min(36px,82%);min-height:5px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#5e9bea,#2865b5);box-shadow:0 4px 10px #2865b540;transition:height .5s ease}.dash-bar-value{position:absolute;bottom:calc(var(--bar, 0%) + 6px);display:none;font-size:10px}.dash-bar-wrap:hover .dash-bar{filter:brightness(1.1)}.dash-bar-wrap span{height:16px;font-size:10px;color:#758299}.dash-empty{margin:auto;color:#76849b;font-size:13px}@keyframes dash-spin{to{transform:rotate(360deg)}}
.dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-kpi.cobros:before{background:#149c72}@media(max-width:850px) and (min-width:621px){.dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dashboard-ncf-card{margin-top:14px;padding:17px 18px;border-radius:14px;background:#fff;border:1px solid #e7edf5}.dashboard-ncf-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.dashboard-ncf-fila{display:grid;gap:4px;padding:12px 13px;border:1px solid #e8edf5;border-radius:10px;background:#f9fbfe}.dashboard-ncf-fila strong{color:#173b70;font-size:14px;overflow-wrap:anywhere}.dashboard-ncf-fila span{color:#51698b;font-size:11px;font-weight:700}.dashboard-ncf-fila small{color:#738198;font-size:11px}@media(max-width:850px){.dashboard-ncf-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.dashboard-ncf-card{padding:14px 12px}.dashboard-ncf-lista{grid-template-columns:1fr;gap:8px}.dashboard-ncf-fila{padding:11px 12px}}
@media(max-width:620px){.dashboard{padding:18px 14px;border-radius:15px}.dashboard-kpis{grid-template-columns:1fr;gap:9px}.dashboard-kpi{padding:13px 15px}.dashboard-kpi strong{font-size:21px}.dashboard-chart-card{padding:14px 12px 10px}.dashboard-chart{height:145px;gap:4px}.dash-bar{width:70%}.dashboard-chart-title>strong{font-size:13px}.dashboard h3{font-size:13px}.dashboard-chart-title p{font-size:10px}}
@media (max-width: 520px) {
  .aviso-instalar-app { grid-template-columns: 1fr auto; }
  .aviso-instalar-boton { grid-column: 1; width: 100%; }
  .aviso-instalar-cerrar { grid-column: 2; grid-row: 1; }
}

/* Identidad y acabado visual global — acceso, hubs, tablas y controles. */
.app:has(.menu-grid) { max-width: 1180px; }
@media (min-width: 700px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.menu-card:hover { transform: translateY(-2px); }
.badge-rayo { position:absolute; top:12px; left:12px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#fff3c4; color:#b76a00; box-shadow:0 2px 5px rgba(100,65,0,.16); }
.badge-rayo svg { width:14px; height:14px; fill:currentColor; }
header.topbar .btn-atras { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; font-size:0; padding:0; margin-left:-8px; transition:background .15s ease; }
header.topbar .btn-atras:hover, header.topbar .btn-atras:active { background:rgba(255,255,255,.14); }
header.topbar .btn-atras::before { content:""; width:10px; height:10px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:4px; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
table { border-collapse:collapse; }
table thead th { position:sticky; top:0; z-index:1; background:#f4f6fa; }
table tbody tr:nth-child(even) { background:rgba(20,49,92,.018); }
table tbody tr:hover { background:rgba(20,49,92,.05); }
.estado-vacio { text-align:center; padding:40px 20px; color:#7b8798; }
.estado-vacio svg { margin-bottom:8px; opacity:.5; }
.login-splash { min-height:100vh; justify-content:center; padding:46px 24px 34px; background:linear-gradient(112deg,#f6f8fc 0%,#fff 38%,#fff 100%); }
.login-blob { display:none; }
.login-logo { width:154px; height:154px; border-radius:24px; box-shadow:0 12px 26px rgba(24,28,77,.14); }
.login-logo::after { display:none; }
.login-logo img { width:124px; height:124px; object-fit:contain; }
.login-title { margin:22px 0 32px; font-size:24px; color:#102d61; }
.login-form { max-width:312px; }
.login-form label { color:#40587c; margin-top:0; margin-bottom:5px; }
.login-form input { height:43px; }
.login-form .primary { margin-top:16px; min-height:46px; border-radius:9px; }
.login-idioma { margin-bottom:18px; }
.idioma-select-native { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.idioma-switch { display:inline-flex; overflow:hidden; border:1px solid #ced8e8; border-radius:999px; background:#fff; }
.idioma-switch button { width:auto; margin:0; border:0; border-radius:0; padding:6px 12px; background:transparent; color:#52647d; font-size:12px; font-weight:700; box-shadow:none; }
.idioma-switch button.activo { background:#1b427c; color:#fff; }
.login-footer { width:312px; max-width:100%; margin-top:38px; padding-top:24px; border-top:1px solid #dce4ef; text-align:center; color:#7183a0; font-size:11px; }
.login-footer img { display:block; width:160px; max-width:74%; height:35px; object-fit:contain; margin:0 auto 10px; }
.login-footer p { margin:0 0 5px; }
.login-footer a { color:#6b86b2; text-decoration:none; }
@media (max-height:650px) { .login-splash { justify-content:flex-start; padding-top:28px; } .login-footer { margin-top:24px; } }
/* Acceso sobrio: evita animaciones y estilos que simulan formularios guardables. */
.login-splash{min-height:100vh;justify-content:center;padding:56px 24px 32px;background:#fff}.login-blob{display:none}.login-sello{width:84px;height:84px;margin-bottom:20px;border:1px solid #ebedf2;border-radius:18px;background:#fff;box-shadow:0 6px 16px rgba(21,23,28,.1);display:flex;align-items:center;justify-content:center}.login-sello img{width:64px;height:64px;object-fit:contain}.login-title{margin:0 0 8px;color:#1c1a16;font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:400;letter-spacing:-.5px;text-align:center;animation:none}.login-sub{margin:0 0 28px;color:#8a8477;font-size:15px;text-align:center}.login-form{max-width:320px;animation:none}.login-campo{position:relative;margin-bottom:12px}.login-campo input,.login-turno-panel .login-campo select{box-sizing:border-box;width:100%;height:50px;padding:0 18px;border:0;border-radius:12px;outline:0;background:#eef1f9;color:#1c1a16;font:inherit;font-size:15px}.login-campo input:focus,.login-turno-panel .login-campo select:focus{box-shadow:0 0 0 2.5px #1a3c6e}.login-campo input[data-clave-secreta]{padding-right:46px}.login-ojo{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:9px;background:transparent;box-shadow:none;color:#8a8477;cursor:pointer}.login-ojo svg{width:18px;height:18px}.login-splash button.login-boton,.login-turno-panel button.login-boton{width:100%;height:52px;min-height:52px;margin-top:10px;border:0;border-radius:999px;background:#15171c;box-shadow:none;color:#fff;font-size:15px;font-weight:700}.idioma-select-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.login-idioma-pills{display:inline-flex;gap:2px;margin-top:30px;padding:3px;border:1px solid #00000024;border-radius:999px}.login-idioma-pills button{width:auto;margin:0;padding:8px 16px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:#8a8477;font-size:13px;font-weight:600}.login-idioma-pills button.activo{background:#15171c;color:#fff}.login-footer{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:320px;margin-top:26px;padding-top:16px;border-top:1px solid #e6e9f0;color:#9aa0b1;font-size:11px;text-align:center}.login-footer img{width:auto;max-width:74%;height:46px;object-fit:contain}.login-footer .texto{line-height:1.5}.login-footer a{color:#9aa0b1;text-decoration:none}#turnoBackdrop{align-items:center;justify-content:center}.login-turno-panel{width:min(360px,calc(100vw - 32px));text-align:left}.login-turno-panel .modal-header label{color:#1c1a16;font-size:16px;font-weight:700}.login-turno-sub{margin:0 0 18px;color:#8a8477;font-size:13px}.menu-grid{margin-top:20px}.menu-card:hover{box-shadow:0 8px 20px rgba(20,30,60,.08)}.menu-card:hover .orden-agarre{opacity:1}.orden-agarre{opacity:.45;transition:opacity .15s ease}
/* Facturas recurrentes: recorrido visual de la corrida. */
.progreso-corrida { overflow:hidden; }.progreso-cabecera,.progreso-pie { display:flex; align-items:center; justify-content:space-between; gap:12px; }.progreso-porcentaje { min-width:54px; padding:7px 9px; border-radius:999px; text-align:center; font-weight:800; color:#194a83; background:#e9f1fc; }.carretera { position:relative; height:72px; margin:16px 2px 10px; overflow:hidden; border-radius:12px; background:linear-gradient(#dcecf9 0 53%,#6e7887 54% 100%); }.carretera::before { content:""; position:absolute; top:77%; left:5%; width:9%; height:4px; background:#fff7; border-radius:4px; box-shadow:15vw 0 #fff7,30vw 0 #fff7,45vw 0 #fff7,60vw 0 #fff7; }.carretera-linea { position:absolute; left:0; right:0; top:53%; height:3px; background:#cbd4df; }.carrito { position:absolute; left:0; bottom:13px; width:72px; color:#d56d22; transition:left .65s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 4px 3px #17283c55); }.carrito svg { display:block; width:72px; height:42px; }.progreso-pie { align-items:flex-start; margin-top:8px; color:#5f6f85; font-size:13px; line-height:1.35; }.progreso-acciones { display:flex; gap:8px; flex:0 0 auto; }.detener-progreso,.continuar-progreso { width:auto; min-width:100px; margin:0; }