/* ============================================================
   Lavandería Manager — Web (Modo Negocio Visual Redesign 2026)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --azul-principal: #0089B3;
  --azul-hover: #007094;
  --azul-oscuro: #0A3264;
  /* Color de TITULOS/nombres (h2, nombre de cliente en tarjeta de OT, valor
     de las tarjetas KPI, etc.) -- separado de --azul-oscuro porque esa
     variable tambien se usa como FONDO solido (sidebar, avatar, encabezado
     de chat) y esos fondos deben seguir siendo azul marino siempre, en los
     2 temas. Si el modo oscuro sobreescribiera --azul-oscuro directamente,
     el sidebar se volveria claro por error. En claro vale exactamente lo
     mismo que --azul-oscuro (mismo look de siempre); en
     #vistaApp.tema-oscuro se aclara para poder leerse sobre fondo oscuro. */
  --texto-titulo: #0A3264;
  --blanco: #FFFFFF;
  --gris-fondo: #F8FAFC;
  --gris-tarjeta: #FFFFFF;
  --gris-borde: #E2E8F0;
  --gris-texto: #64748B;
  --texto-oscuro: #0F172A;
  --verde-exito: #10B981;
  --verde-fondo: #ECFDF5;
  --naranja-accent: #F97316;
  --morado-accent: #8B5CF6;
  /* Acento separado del azul principal, SOLO para estados "en progreso"
     (tracker de avance de OT, pestaña activa Hoy/Todo el historial, chip de
     estado no cerrado) -- antes el azul principal hacia de todo (botones,
     enlaces, progreso), lo que le quitaba jerarquia visual. Idea tomada de
     una referencia (mockup laundry-management-dashboard) que trajo Jesuar:
     ahi el "accent" turquesa se reserva para progreso/actividad, separado
     del "primary" que se usa para acciones (botones). Agosto 2026. */
  --acento-progreso: #0D9488;
  --acento-progreso-fondo: #CCFBF1;
  /* Fondos "suaves" semanticos reutilizados en botones outline, chips y
     avisos (info/celeste y peligro/rojo) -- antes eran hex sueltos
     repetidos (#F0F9FF, #FEF2F2) en muchas reglas; se centralizan aca para
     poder darles una variante oscura en #vistaApp.tema-oscuro sin tener
     que tocar cada regla. */
  --azul-fondo-suave: #F0F9FF;
  --rojo-fondo-suave: #FEF2F2;
  --sombra-suave: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --sombra-elevada: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  --radio-card: 16px;
  --radio-input: 12px;
}

/* ============================================================
   Modo oscuro del panel de negocio (agosto 2026)
   ============================================================
   Alcance A PROPOSITO limitado a #vistaApp (Inicio, Libro Diario, Nueva
   OT, Clientes, Personal, Reportes, Caja, Banco) -- confirmado con Jesuar.
   Login, Bienvenida y el portal de Cliente quedan afuera: ya tienen su
   propio fondo oscuro fijo (el degradado azul de las pantallas de entrada),
   asi que "modo oscuro" no aplica ahi de la misma manera.

   Como funciona: la enorme mayoria de fondos/bordes/texto del panel ya
   pasaban por variables (--gris-fondo, --gris-tarjeta, --gris-borde,
   --texto-oscuro, --gris-texto) en vez de hex sueltos -- de hecho la unica
   limpieza que hizo falta fue mover ~21 fondos que usaban var(--blanco)
   directamente a var(--gris-tarjeta) (--blanco se queda SIEMPRE blanco,
   porque tambien se usa como color de TEXTO sobre botones/tarjetas de
   color, que no deben cambiar con el tema). Con eso, sobreescribir estas
   variables DENTRO de #vistaApp.tema-oscuro alcanza para re-tematizar
   prácticamente toda la superficie del panel sin tocar cada regla una por
   una. Los colores de marca (--azul-principal, --azul-oscuro, etc.) NO se
   tocan: los botones y el sidebar (ya oscuro) se ven igual en los 2 temas.

   Referencia visual: paleta OKLCH de un mockup (laundry-management-dashboard)
   que trajo Jesuar -- se tomo la INTENCION de color (superficie oscura
   azulada, no negro puro) pero con nuestros propios valores hex, no su
   sintaxis OKLCH. El toggle en si (boton + JS + localStorage) se agrega en
   app.js, ver alternarTemaPanelNegocio(). */
#vistaApp.tema-oscuro {
  --gris-fondo: #0F172A;
  --gris-tarjeta: #1E293B;
  --gris-borde: #334155;
  --gris-texto: #94A3B8;
  --texto-oscuro: #F1F5F9;
  --texto-titulo: #93C5FD;
  --verde-fondo: rgba(16, 185, 129, 0.15);
  --acento-progreso-fondo: rgba(13, 148, 136, 0.25);
  --azul-fondo-suave: rgba(0, 137, 179, 0.16);
  --rojo-fondo-suave: rgba(239, 68, 68, 0.16);
  --sombra-suave: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
  --sombra-elevada: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Algunos fondos "claros a proposito" (chips/avisos con su propio color de
   marca, ej. aviso de facturas en verde/rojo, o el fondo celeste de
   .ot-comentario) usan hex fijos en vez de las variables de arriba porque
   son colores semanticos (exito/alerta), no de superficie -- se dejan
   igual en los 2 temas a proposito, iguial que se ve un chip verde de
   "exito" tanto en apps claras como oscuras. */

* {
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--gris-fondo);
  color: var(--texto-oscuro);
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
  font-family: inherit;
}

#vistaSeleccionEmpresaCliente,
#vistaClienteTelefono,
#vistaClienteCodigo,
#vistaClienteNombre {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #0A3264 0%, #0089B3 100%);
  position: relative;
}

/* #vistaLogin, #vistaSeleccionModo y #vistaBienvenidaEmpresa tienen su
   PROPIO fondo desde el rediseño de agosto de 2026 (ver .pantalla-entrada-2col
   mas abajo) -- radiales de luz en vez de un degradado plano, a partir de
   una referencia visual que trajo Jesuar. #vistaBienvenidaEmpresa (pantalla
   de "¡Bienvenido de nuevo!" justo despues del login) se sumo despues, para
   que la secuencia completa Selección→Login→Bienvenida se sienta como una
   sola experiencia visual. El resto de pantallas de entrada arriba se
   quedan con el degradado simple de siempre. */
#vistaLogin,
#vistaSeleccionModo,
#vistaBienvenidaEmpresa,
#vistaMegaAdminLogin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 15% 20%, #1667b0 0%, transparent 55%),
    radial-gradient(1000px 700px at 85% 80%, #0c4a8c 0%, transparent 55%),
    linear-gradient(160deg, #0e4e92 0%, #0a2f5e 55%, #071f42 100%);
}

/* Vinieta suave para que la tarjeta/panel resalten mas hacia el centro. */
#vistaLogin::before,
#vistaSeleccionModo::before,
#vistaBienvenidaEmpresa::before,
#vistaMegaAdminLogin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 0%, transparent 60%, rgba(4, 17, 38, 0.5) 100%);
}

/* ---------------- Decoracion de fondo: lavadora + burbujas (ver index.html) ----------------
   Puramente ambiental -- nunca debe competir visualmente con la tarjeta ni
   con el texto, por eso todo va con opacidad baja y pointer-events:none.
   IMPORTANTE sobre el orden de capas: la pantalla (#vistaSeleccionModo, etc.)
   tiene su PROPIO fondo degradado opaco cubriendo toda la pantalla -- si la
   decoracion quedara "debajo" de esa pantalla en el eje z, el fondo opaco la
   taparia por completo (fue exactamente lo que paso en la primera prueba:
   ni la lavadora ni las burbujas se veian). Por eso el orden es:
   fondo de la pantalla (z automatico) < decoracion (z-index 1) < .tarjeta-login (z-index 2). */
.decoracion-lavado {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.lavadora-decorativa {
  display: none; /* en pantallas angostas no hay lugar sin chocar con la tarjeta */
  position: absolute;
  left: 4%;
  top: 50%;
  width: 260px;
  transform: translateY(-50%);
  opacity: 0.5;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25));
}

/* Es un PNG a color (recortado de un ilustracion vectorial, ver
   RESUMEN_PROYECTO.md), ya no la silueta blanca original -- por eso lleva
   opacidad mas alta que antes (si no, el color se lava casi por completo)
   pero se mantiene bien por debajo de 1 para que siga leyendose como
   decoracion ambiental y no compita con la tarjeta. */
.lavadora-decorativa img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 900px) {
  .lavadora-decorativa {
    display: block;
  }
}

/* En pantallas MUY anchas se aleja un poco mas del centro, para no quedar
   pegada a la tarjeta cuando esta crece con el viewport. */
@media (min-width: 1300px) {
  .lavadora-decorativa {
    left: 9%;
    width: 320px;
  }
}

.burbujas-decorativas {
  position: absolute;
  inset: 0;
}

.burbuja {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12) 70%);
  box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.35);
  opacity: 0;
  animation-name: burbujaSubiendo;
  animation-duration: var(--dur);
  animation-delay: var(--delay);
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

@keyframes burbujaSubiendo {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% {
    opacity: 0.65;
  }
  50% {
    transform: translate(10px, -55vh);
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translate(-6px, -105vh);
    opacity: 0;
  }
}

/* Respeta a quien prefiere menos movimiento en pantalla */
@media (prefers-reduced-motion: reduce) {
  .burbuja {
    animation: none;
    display: none;
  }
}

.texto-seleccion-modo {
  color: var(--gris-texto);
  font-size: 14px;
  margin: -8px 0 22px 0;
  line-height: 1.5;
}

/* Enlace de descarga directa del APK (para Android, mientras no hay Play Store). */
.enlace-descargar-apk {
  display: block;
  margin-top: 18px;
  padding: 12px 16px;
  border: 1.5px dashed var(--gris-borde);
  border-radius: var(--radio-input);
  color: var(--azul-principal);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.enlace-descargar-apk:hover {
  border-color: var(--azul-principal);
  background: var(--azul-fondo-suave);
}

.texto-ayuda-apk {
  font-size: 11px;
  color: var(--gris-texto);
  margin: 8px 0 0 0;
  line-height: 1.4;
}

#recaptcha-container {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* Portal de cliente: reusa .barra-superior/.contenido/.grid-ot/.tarjeta-ot
   del resto de la app para que Mis Lavados y Mi Perfil se vean consistentes
   con el panel de negocio, sin duplicar estilos. */
#vistaMisLavados,
#vistaMiPerfilCliente {
  min-height: 100vh;
  background: var(--gris-fondo);
}

/* "Mis Lavados" tiene DOS botones ("Mi perfil" + "Cerrar sesión") en vez de
   uno solo como el resto de las barras superiores. El logo de fondo
   (.logo-fondo-grande) normalmente es una marca de agua "flotante" con una
   distancia fija al borde derecho, pensada para dejarle espacio a UN boton
   -- con dos queda montado encima. En vez de ajustar esa distancia a ojo,
   aqui se saca del posicionamiento absoluto y se deja como un elemento MAS
   de la fila (igual que ya hace el propio diseño en pantallas angostas):
   asi el logo queda entre el saludo y los botones sin poder pisar a
   ninguno, porque .barra-superior ya reparte el espacio con flexbox. */
#vistaMisLavados .logo-fondo-grande {
  position: static;
  transform: none;
  height: 90px;
}

/* Animacion de estado en "Mis Lavados" -- mismos Lottie que ya usa Android
   para RECIBIDO/LAVANDO/LISTO/ENTREGADO; SECANDO es CSS puro porque en
   Android tampoco usa Lottie para ese paso (tambor + calor animados). */
.anim-estado-ot {
  width: 100px;
  height: 100px;
  margin: 6px auto 0 auto;
}

.anim-secando {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tambor-secadora {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 6px solid var(--azul-principal);
  background: var(--azul-fondo-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  animation: vaivenTamborWeb 0.65s ease-in-out infinite alternate;
}

@keyframes vaivenTamborWeb {
  from { transform: rotate(-35deg); }
  to { transform: rotate(35deg); }
}

.burbuja-calor {
  position: absolute;
  bottom: 26px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FDBA74;
  opacity: 0;
  animation: subirCalorWeb 1.4s ease-in infinite;
}
.burbuja-calor:nth-child(2) { left: 34%; animation-delay: 0s; }
.burbuja-calor:nth-child(3) { left: 50%; animation-delay: 0.35s; }
.burbuja-calor:nth-child(4) { left: 66%; animation-delay: 0.7s; }

@keyframes subirCalorWeb {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-50px) scale(1.1); }
}

/* Tarjeta con un leve resplandor verde cuando la ropa ya esta lista/entregada. */
.tarjeta-ot-lista {
  border-color: var(--verde-exito);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

@keyframes fadeInTarjetaWeb {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.grid-ot .tarjeta-ot {
  animation: fadeInTarjetaWeb 0.35s ease both;
}

/* ============================================================
   Ventanas de entrada (login / seleccion / bienvenida) -- estilo
   "biselado" (soft-UI / neumorphism), a pedido explicito de Jesuar tras ver
   una referencia de diseño. Se aplica SOLO adentro de .tarjeta-login (y su
   variante .tarjeta-bienvenida) para no tocar el look del resto del panel
   -- .campo/.btn-primario/.btn-outline en el resto de la app siguen igual.
   La idea del estilo: en vez de bordes/sombras planas, cada elemento
   "emerge" o "se hunde" de un mismo fondo suave usando DOS sombras
   opuestas (una oscura, una clara), como si la luz le pegara desde arriba
   a la izquierda. ============================================================ */
:root {
  --bisel-fondo: #EEF3FA;
  --bisel-sombra-oscura: rgba(163, 177, 198, 0.62);
  --bisel-sombra-clara: rgba(255, 255, 255, 0.9);
}

@keyframes tarjetaApareceBisel {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tarjeta-login {
  position: relative;
  z-index: 2; /* por encima de .decoracion-lavado (z-index 1) -- ver la nota grande ahí */
  background: var(--bisel-fondo);
  border-radius: 28px;
  padding: 44px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow:
    22px 22px 46px rgba(4, 20, 45, 0.4),
    -10px -10px 30px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-align: center;
  animation: tarjetaApareceBisel 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* El logo de WashSysPro (y el de Lavanderia 0611) son lockups ANCHOS
   (icono + texto en fila, no un icono cuadrado) -- un marco circular chico
   los aplastaba y dejaba casi todo el circulo vacio. Se muestran grandes y
   planos, sin recorte, para que se lean bien de entrada. */
.tarjeta-login img.logo {
  display: block;
  width: min(72%, 260px);
  height: auto;
  margin: 0 auto 26px auto;
  object-fit: contain;
}

/* Cuando no hay h1 debajo del logo (ver vistaSeleccionModo), el margen
   negativo que .texto-seleccion-modo usa normalmente para "pegarse" al h1
   ya no aplica -- se corrige solo para ese caso. */
.texto-seleccion-modo-sin-titulo {
  margin-top: 4px;
}

.footer-copyright {
  margin: 22px 0 0 0;
  font-size: 11px;
  color: var(--gris-texto);
  line-height: 1.5;
}

.footer-copyright a {
  color: var(--azul-principal);
  text-decoration: none;
  font-weight: 600;
}

.footer-copyright a:hover {
  text-decoration: underline;
}

.tarjeta-login h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texto-titulo);
  margin: 0 0 24px 0;
}

/* Campos, botones y el enlace de descarga del APK: version "hundida"
   (inputs) o "elevada" (botones) del mismo truco de doble sombra. */
.tarjeta-login .campo {
  background: var(--bisel-fondo);
  border: none;
  border-radius: 16px;
  box-shadow:
    inset 6px 6px 12px var(--bisel-sombra-oscura),
    inset -6px -6px 12px var(--bisel-sombra-clara);
}

.tarjeta-login .campo:focus {
  box-shadow:
    inset 6px 6px 12px var(--bisel-sombra-oscura),
    inset -6px -6px 12px var(--bisel-sombra-clara),
    0 0 0 3px rgba(0, 137, 179, 0.28);
}

.tarjeta-login .btn {
  border-radius: 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tarjeta-login .btn-primario {
  background: linear-gradient(145deg, var(--azul-principal), var(--azul-hover));
  box-shadow:
    7px 7px 15px rgba(4, 20, 45, 0.35),
    -4px -4px 10px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tarjeta-login .btn-primario:hover {
  transform: translateY(-2px);
  box-shadow:
    9px 9px 18px rgba(4, 20, 45, 0.4),
    -5px -5px 12px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tarjeta-login .btn-primario:active {
  transform: translateY(0);
  box-shadow:
    inset 4px 4px 10px rgba(0, 50, 80, 0.45),
    inset -4px -4px 10px rgba(255, 255, 255, 0.12);
}

.tarjeta-login .btn-outline {
  background: var(--bisel-fondo);
  border: none;
  color: var(--texto-titulo);
  box-shadow:
    6px 6px 14px var(--bisel-sombra-oscura),
    -6px -6px 14px var(--bisel-sombra-clara);
}

.tarjeta-login .btn-outline:hover {
  color: var(--azul-principal);
  transform: translateY(-2px);
}

.tarjeta-login .btn-outline:active {
  transform: translateY(0);
  box-shadow:
    inset 4px 4px 10px var(--bisel-sombra-oscura),
    inset -4px -4px 10px var(--bisel-sombra-clara);
}

/* Lista de lavanderías del selector de Modo Cliente (seleccion-empresa-cliente.js):
   un boton "hundido" (.boton-empresa-cliente) por empresa, apilados, con
   scroll si hay muchas. Se probó primero reusando .btn-outline (elevado,
   como "‹ Volver"), pero con dos o tres apilados tan cerca las sombras se
   pegaban entre sí y parecía un solo bloque -- el estilo hundido (mismo
   truco que .campo, sombra inset en vez de proyectada) no tiene ese
   problema, cada uno queda bien definido sin importar el espacio entre
   ellos. El padding lateral es para que la sombra de cada boton no se
   corte contra el borde del contenedor con scroll. */
.lista-empresas-cliente {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 3px;
  margin: 4px 0 6px 0;
}

.boton-empresa-cliente {
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 15px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-titulo);
  background: var(--bisel-fondo);
  box-shadow:
    inset 5px 5px 10px var(--bisel-sombra-oscura),
    inset -5px -5px 10px var(--bisel-sombra-clara);
  transition: color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.boton-empresa-cliente:hover {
  color: var(--azul-principal);
}

.boton-empresa-cliente:active {
  transform: scale(0.98);
  box-shadow:
    inset 3px 3px 7px var(--bisel-sombra-oscura),
    inset -3px -3px 7px var(--bisel-sombra-clara);
}

.tarjeta-login .enlace-descargar-apk {
  border: none;
  border-radius: 16px;
  background: var(--bisel-fondo);
  box-shadow:
    inset 4px 4px 9px var(--bisel-sombra-oscura),
    inset -4px -4px 9px var(--bisel-sombra-clara);
}

.tarjeta-login .enlace-descargar-apk:hover {
  color: var(--azul-hover);
}

/* ============================================================
   Rediseño de #vistaLogin / #vistaSeleccionModo (agosto de 2026), a partir
   de una referencia visual (mockup Next.js/Tailwind "washsys-pro") que
   trajo Jesuar. Layout de 2 columnas en pantallas grandes: panel de marca
   (izquierda) + tarjeta de vidrio (derecha, reemplaza el look biselado de
   arriba SOLO en estas 2 pantallas). En celular, el panel de marca se
   oculta por completo y solo queda la tarjeta centrada -- igual que antes.
   El logo en AMBAS columnas es siempre assets/logo-washsyspro.png (el real
   del proyecto), nunca el logo generico que traia el mockup de referencia.
   ============================================================ */

/* Burbujas de jabon ambientales, de pantalla completa, SOLO para
   #vistaLogin/#vistaSeleccionModo. Nota: estas 2 pantallas quedaron fuera
   de #decoracionPantallaLogin (la lavadora + burbujas compartidas que usa
   el resto de pantallas de entrada) porque su propia lavadora-decorativa
   duplicaba la ilustracion nueva del panel de marca -- pero al sacarlas
   tambien se fueron las burbujas, y las 5 burbujitas chiquitas de dentro
   de la tarjeta (.burbuja-tarjeta) son demasiado sutiles para notarse. Esta
   capa reutiliza el MISMO look de .burbuja (radial blanco, buen contraste
   contra el azul oscuro) pero como hijo directo de la pantalla, sin la
   lavadora. Orden de capas: fondo/vinieta (z-index 0) < burbujas (z-index 0.5,
   pinta despues del ::before) < .pantalla-entrada-2col (z-index 1). */
.burbujas-entrada-2col {
  position: absolute;
  inset: 0;
  z-index: 0.5;
  overflow: hidden;
  pointer-events: none;
}

.pantalla-entrada-2col {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
}

/* ---------- Panel de marca (solo visible desde ~1024px) ---------- */
.panel-marca-entrada {
  display: none;
  flex: 1 1 480px;
  max-width: 480px;
  color: #fff;
}

@media (min-width: 1024px) {
  .panel-marca-entrada {
    display: block;
  }
}

.panel-marca-logo {
  display: block;
  width: min(88%, 360px);
  height: auto;
  object-fit: contain;
}

.panel-marca-titular {
  margin: 40px 0 0 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

.panel-marca-subtitulo {
  margin: 14px 0 0 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(224, 242, 254, 0.8);
}

/* Antes: 6s + "ease-in-out" del navegador (curva casi plana en los extremos)
   se sentia pesada/lenta ("rentelizada"). Ahora dura menos y usa una curva
   sinusoidal pareja (cubic-bezier que aproxima una onda seno) para que el
   sube-baja se sienta fluido en vez de a trompicones; will-change avisa al
   navegador que anime en su propia capa (compositor), evitando el jank que
   se nota cuando reflowa junto al box-shadow grande de abajo. */
@keyframes panelMarcaFlotando {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.panel-marca-ilustracion-marco {
  position: relative;
  margin: 40px auto 0 auto;
  width: fit-content;
  padding: 8px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(240, 249, 255, 0.9));
  box-shadow: 0 25px 60px -15px rgba(2, 8, 23, 0.5);
  animation: panelMarcaFlotando 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}

.panel-marca-ilustracion-marco img {
  display: block;
  width: 260px;
  height: auto;
  border-radius: 24px;
}

@media (min-width: 1280px) {
  .panel-marca-ilustracion-marco img {
    width: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-marca-ilustracion-marco {
    animation: none;
  }
}

.panel-marca-chips {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.chip-servicio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 500;
  color: #e0f2fe;
  backdrop-filter: blur(4px);
}

.panel-marca-checklist {
  margin: 28px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-marca-checklist li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: rgba(224, 242, 254, 0.9);
}

.panel-marca-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.25);
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Columna de la tarjeta ---------- */
.columna-tarjeta-entrada {
  position: relative; /* ancla a .tarjeta-vidrio-resplandor, ver mas abajo */
  flex: 0 1 auto;
  width: 100%;
  max-width: 400px;
  display: flex;
  justify-content: center;
}

/* ---------- Tarjeta de vidrio (glassmorphism), reemplaza el bisel SOLO en
   #vistaLogin/#vistaSeleccionModo -- las reglas de .tarjeta-login de mas
   arriba (bisel) siguen aplicando tal cual al resto de tarjetas de la app
   (Bienvenida, Selección Empresa Cliente, etc.), .tarjeta-vidrio solo
   sobreescribe lo necesario encima. */
.tarjeta-login.tarjeta-vidrio {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 26px;
  box-shadow: 0 30px 70px -15px rgba(2, 8, 23, 0.55);
  overflow: hidden;
  padding-top: 36px;
}

/* resplandor suave detras de la tarjeta */
.tarjeta-vidrio-resplandor {
  position: absolute;
  inset: -20px;
  z-index: -1;
  border-radius: 40px;
  background: rgba(56, 189, 248, 0.22);
  filter: blur(32px);
}

/* barra de "agua" en movimiento en el borde superior de la tarjeta */
@keyframes washSweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.wash-bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    #0b4f96 0%, #0d63b6 20%, #38bdf8 40%, #a5f3fc 50%, #38bdf8 60%, #0d63b6 80%, #0b4f96 100%
  );
  background-size: 200% 100%;
  animation: washSweep 5s linear infinite;
}

/* pequeñas burbujas subiendo DENTRO de la tarjeta de vidrio */
.tarjeta-vidrio-burbujas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

@keyframes burbujaTarjetaSubiendo {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  15% { opacity: 0.65; }
  85% { opacity: 0.65; }
  100% { transform: translateY(-180px) scale(1); opacity: 0; }
}

.burbuja-tarjeta {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: burbujaTarjetaSubiendo var(--dur, 7s) ease-in infinite;
  animation-delay: var(--delay, 0s);
}

/* anillo tipo "tambor de lavadora" girando detras del logo */
.logo-con-anillo {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

/* Especificidad a proposito igual a ".tarjeta-login img.logo" (mas arriba)
   -- clase+elemento+clase -- para poder anular su margin-bottom sin
   !important; al empatar en especificidad, gana esta por venir despues en
   el archivo. Si va como ".logo-con-anillo .logo" (una clase menos) NO le
   gana a la regla original y el logo queda con doble espacio abajo (el
   margin propio + el margin-bottom de .logo-con-anillo). */
.logo-con-anillo img.logo {
  margin: 0;
  position: relative;
  z-index: 1;
}

@keyframes tamborGirando {
  to { transform: rotate(360deg); }
}

.anillo-tambor {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.7;
  background: conic-gradient(
    from 0deg, transparent 0deg, rgba(56, 189, 248, 0.35) 60deg,
    transparent 140deg, rgba(13, 99, 182, 0.25) 220deg, transparent 320deg
  );
  animation: tamborGirando 9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wash-bar,
  .burbuja-tarjeta,
  .anillo-tambor {
    animation: none;
  }
}

/* ---------- Botones grandes de Selección de modo (icono + subtítulo + chevron) ---------- */
.botones-entrada-grandes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.boton-entrada-grande {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  border-radius: 18px;
  padding: 14px 16px;
  text-align: left;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.boton-entrada-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 19px;
}

.boton-entrada-textos {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.boton-entrada-titulo {
  font-size: 14.5px;
  font-weight: 700;
}

.boton-entrada-subtitulo {
  margin-top: 1px;
  font-size: 12px;
}

.boton-entrada-chevron {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.boton-entrada-grande:hover .boton-entrada-chevron {
  transform: translateX(2px);
}

.boton-entrada-primario {
  background: linear-gradient(135deg, #0d63b6, #0b4f96);
  box-shadow: 0 12px 24px -8px rgba(11, 79, 150, 0.55);
}

.boton-entrada-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -8px rgba(11, 79, 150, 0.6);
}

.boton-entrada-primario .boton-entrada-icono {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.boton-entrada-primario .boton-entrada-titulo {
  color: #fff;
}

.boton-entrada-primario .boton-entrada-subtitulo {
  color: rgba(224, 242, 254, 0.85);
}

.boton-entrada-primario .boton-entrada-chevron {
  color: rgba(255, 255, 255, 0.8);
}

.boton-entrada-secundario {
  background: #fff;
  border: 1px solid var(--gris-borde);
}

.boton-entrada-secundario:hover {
  transform: translateY(-2px);
  border-color: #7dd3fc;
  background: #f0f9ff;
}

.boton-entrada-secundario .boton-entrada-icono {
  background: #e0f2fe;
  color: var(--azul-principal);
}

.boton-entrada-secundario .boton-entrada-titulo {
  color: var(--texto-oscuro);
}

.boton-entrada-secundario .boton-entrada-subtitulo {
  color: var(--gris-texto);
}

.boton-entrada-secundario .boton-entrada-chevron {
  color: #94a3b8;
}

/* En #vistaSeleccionModo el disclaimer del APK lleva un icono de escudo
   ahora (ver index.html) -- alineado arriba con el texto, no centrado. */
.tarjeta-vidrio .texto-ayuda-apk {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
}

/* En celular no hay panel de marca, asi que la tarjeta vuelve a ser lo
   unico en pantalla -- se le da un poco mas de aire arriba/abajo. */
@media (max-width: 1023px) {
  .pantalla-entrada-2col {
    gap: 0;
  }
}

/* ---------- Bienvenida a la empresa (post-login, ver app.js) ----------
   Desde agosto de 2026 comparte la MISMA tarjeta de vidrio de
   #vistaLogin/#vistaSeleccionModo (panel de marca + tarjeta a la derecha),
   para que la secuencia Selección→Login→Bienvenida se sienta continua. La
   version anterior usaba un "plato" biselado (.bienvenida-logo-marco) para
   el logo -- se reemplaza por el mismo .logo-con-anillo con anillo girando
   que ya usan las otras 2 pantallas (funciona igual de bien con el logo fijo
   de WashSysPro que con el logoUrl propio de cada empresa, sea cual sea su
   proporcion, porque no lo recorta a un circulo). El sello ✓ pasa de flotar
   sobre el borde de la tarjeta (chocaba en especificidad con el padding-top
   de .tarjeta-login.tarjeta-vidrio) a ser un elemento normal en el flujo,
   centrado arriba del titulo. */
@keyframes bienvenidaApareceElemento {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.bienvenida-sello {
  width: 34px;
  height: 34px;
  margin: 0 auto 14px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #0d9488;
  background: rgba(45, 212, 191, 0.16);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12);
  animation: bienvenidaApareceElemento 0.4s ease both;
}

.tarjeta-bienvenida .logo-con-anillo {
  animation: bienvenidaApareceElemento 0.45s 0.06s ease both;
}

.tarjeta-bienvenida h1 {
  animation: bienvenidaApareceElemento 0.4s 0.16s ease both;
}

.tarjeta-bienvenida .texto-seleccion-modo {
  animation: bienvenidaApareceElemento 0.4s 0.22s ease both;
}

.tarjeta-bienvenida .btn-primario {
  animation: bienvenidaApareceElemento 0.4s 0.3s ease both;
}

.campo {
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 14px;
  border: 1.5px solid var(--gris-borde);
  border-radius: var(--radio-input);
  font-size: 14px;
  background-color: var(--gris-fondo);
  color: var(--texto-oscuro);
  outline: none;
}

.campo:focus {
  border-color: var(--azul-principal);
  background-color: var(--gris-tarjeta);
  box-shadow: 0 0 0 4px rgba(0, 137, 179, 0.12);
}

.btn {
  border: none;
  border-radius: var(--radio-input);
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primario {
  background: var(--azul-principal);
  color: var(--blanco);
  box-shadow: 0 4px 12px rgba(0, 137, 179, 0.25);
}

.btn-primario:hover {
  background: var(--azul-hover);
  transform: translateY(-1px);
}

.btn-primario:disabled {
  background: var(--gris-borde);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-outline {
  background: var(--gris-tarjeta);
  color: var(--texto-titulo);
  border: 1.5px solid var(--gris-borde);
}

.btn-outline:hover {
  border-color: var(--azul-principal);
  color: var(--azul-principal);
  background: var(--azul-fondo-suave);
}

/* Acciones destructivas/irreversibles (ej. vaciar historial de Caja/Banco). */
.btn-peligro {
  background: var(--gris-tarjeta);
  color: #EF4444;
  border: 1.5px solid #EF4444;
}

.btn-peligro:hover {
  background: var(--rojo-fondo-suave);
}

.mensaje-error {
  color: #EF4444;
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
  min-height: 18px;
}

#vistaApp {
  display: none;
  /* Fondo propio (en vez de heredar el de <body>) para que el modo oscuro
     -- ver #vistaApp.tema-oscuro mas abajo -- pinte tambien los huecos de
     padding de .app-shell, no solo las tarjetas individuales. */
  background: var(--gris-fondo);
  min-height: 100vh;
}

.barra-superior {
  background: var(--gris-tarjeta);
  color: var(--texto-oscuro);
  padding: 14px 32px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}


/* El boton necesita su propio color solido, ya que el fondo de la barra
   ya no es oscuro (antes se apoyaba en el contraste con el azul_oscuro). */
.barra-superior .btn-outline {
  background: var(--azul-principal);
  color: var(--blanco);
  border: none;
}

.barra-superior .btn-outline:hover {
  background: var(--azul-hover);
  color: var(--blanco);
}

/* Logo grande, tipo "marca de agua", pegado a la derecha, aprovechando el
   espacio vacio de la barra. Va DETRAS del saludo y el boton (z-index 0),
   con poca opacidad para que no compita con el texto. */
.logo-fondo-grande {
  position: absolute;
  right: 190px;
  top: 50%;
  transform: translateY(-50%);
  height: 130px;
  pointer-events: none;
  z-index: 0;
}

/* #vistaApp: el logo pasa a ser un elemento MAS de la fila -- mismo criterio
   que ya se uso en #vistaMisLavados (ver comentario arriba) -- en vez de
   marca de agua con distancia fija al borde derecho. Hacia falta ahora
   porque el grupo de la derecha crecio (switch de tema + avatar + Cerrar
   sesion) y la posicion absoluta, pensada para un solo boton, quedaba
   montada encima. De paso se agranda bastante, a pedido de Jesuar. La
   barra pasa a "height: auto" para que crezca con el logo en vez de
   recortarlo. Agosto 2026. */
#vistaApp .barra-superior {
  height: auto;
  min-height: 140px;
}

#vistaApp .logo-fondo-grande {
  position: static;
  transform: none;
  height: 150px;
}

.logo-fondo-grande img {
  height: 100%;
  display: block;
}

.barra-superior .marca,
.barra-superior > .btn,
.barra-superior > button,
.barra-superior-acciones {
  position: relative;
  z-index: 1;
}

/* Agrupa el avatar + "Cerrar sesion" a la derecha de la barra -- antes solo
   estaba el boton; el avatar (iniciales + nombre) se sumo en agosto de 2026
   inspirado en un mockup de referencia que trajo Jesuar. Solo decorativo
   por ahora (sin menu desplegable, no hay opciones que mostrar todavia). */
.barra-superior-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar-usuario {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--gris-borde);
  background: var(--gris-fondo);
}

@media (min-width: 700px) {
  .avatar-usuario {
    display: flex;
  }
}

.avatar-usuario-circulo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--azul-oscuro);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.avatar-usuario-nombre {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-oscuro);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alternar modo oscuro/claro del panel de negocio (agosto 2026). Alcance a
   proposito limitado a #vistaApp -- ver comentario grande junto a
   #vistaApp.tema-oscuro en :root. Switch con sol/luna (referencia que trajo
   Jesuar), reescalado a 56x30 para que quede a la misma altura que el
   avatar (32px) en la barra superior; nombres de clase namespaced con
   "switch-tema-" para no chocar con nada mas del proyecto. */
.switch-tema {
  font-size: 15px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 56px;
  height: 30px;
  cursor: pointer;
}

.switch-tema-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-tema-control {
  position: absolute;
  inset: 0;
  background-color: #73C0FC;
  transition: 0.4s;
  border-radius: 30px;
}

.switch-tema-control::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  border-radius: 50%;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: 0.4s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.switch-tema-sol svg,
.switch-tema-luna svg {
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
}

.switch-tema-sol svg {
  top: 5px;
  left: 31px;
}

.switch-tema-luna svg {
  fill: #73C0FC;
  top: 4px;
  left: 4px;
}

.switch-tema:hover .switch-tema-sol svg {
  animation: girarSolTema 15s linear infinite;
}

.switch-tema:hover .switch-tema-luna svg {
  animation: inclinarLunaTema 5s linear infinite;
}

@keyframes girarSolTema {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes inclinarLunaTema {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.switch-tema-input:checked + .switch-tema-control {
  background-color: #183153;
}

.switch-tema-input:focus-visible + .switch-tema-control {
  box-shadow: 0 0 0 3px rgba(0, 137, 179, 0.35);
}

.switch-tema-input:checked + .switch-tema-control::before {
  transform: translateX(26px);
}

.barra-superior .marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.barra-superior .saludo {
  color: var(--texto-titulo);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.fecha-hoy-barra {
  font-size: 12.5px;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 2px;
}

/* Aviso de vencimiento de licencia en la barra superior (junto al saludo),
   agregado 4 de septiembre de 2026. Mismo color de "peligro" (#EF4444) que
   .aviso-facturas-restantes.alerta y .dashboard-card.alerta-baja, pero en
   version chica/inline para caber junto al saludo en vez de ocupar todo el
   ancho de una tarjeta. Ver iniciarAvisoVencimientoLicenciaWeb() en app.js. */
.aviso-vencimiento-licencia {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--rojo-fondo-suave);
  color: #EF4444;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Clima actual debajo del saludo -- agregado 4 de septiembre de 2026 a
   pedido de Jesuar. Ver cargarYMostrarClimaActualWeb() en app.js. Su icono
   (sol/nube/luna, segun el codigo WMO) ya transmite la idea de "hora del
   dia", asi que no lleva un icono aparte junto al saludo -- se quito por
   verse repetido. */
.clima-actual {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-titulo);
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 6px;
}

.clima-actual .clima-actual-icono {
  font-size: 16px;
}

/* ---------- Estructura general: menu lateral + area de contenido ---------- */

.app-shell {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 20px;
}

/* La barra de operacion (el menu lateral) se ve como una tarjeta mas del
   Dashboard -- esquinas redondas, sombra elevada y separada de los bordes --
   en vez de una columna solida pegada al borde de la pantalla. */
.sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--azul-oscuro);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-elevada);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
}

.sidebar-nav {
  flex: 1;
  width: 100%;
}

.sidebar-footer {
  width: 100%;
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Version del APK actualmente publicada (dato de configuracion/version,
   ver cargarVersionFooterAppWeb en app.js) -- se muestra siempre en el pie
   del panel para no tener que entrar al Mega Admin solo para verificarla.
   Un poco mas visible que el copyright de abajo porque es un dato util,
   no solo decorativo. */
.sidebar-footer-version {
  display: block;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sidebar-footer a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}

.sidebar-footer a:hover {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
}

.sidebar-grupo-titulo {
  color: rgba(255,255,255,0.4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 10px 6px 10px;
}

.sidebar-grupo:first-child .sidebar-grupo-titulo {
  padding-top: 0;
}

.area-principal {
  flex: 1;
  min-width: 0;
}

.nav-boton {
  border: none;
  border-radius: 20px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  background: var(--gris-fondo);
  color: var(--gris-texto);
  white-space: nowrap;
}

.nav-boton:hover {
  background: var(--gris-borde);
  color: var(--texto-oscuro);
}

.nav-boton.activo {
  background: var(--azul-principal);
  color: var(--blanco);
  box-shadow: 0 2px 8px rgba(0, 137, 179, 0.3);
}

.nav-boton.proximamente {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Dentro del sidebar, los mismos .nav-boton (los reutiliza mostrarModulo()
   de app.js para saber cual esta activo) se ven como filas completas en
   vez de pastillas -- se sobreescribe forma/color, no la clase en si.
   Desde agosto de 2026, cada fila separa icono y texto en spans propios
   (.nav-boton-icono / .nav-boton-texto) para poder darle al icono su
   propia "burbuja" circular de color -- inspirado en una referencia visual
   (dock oscuro con indicador circular) que trajo Jesuar. Se adopto SOLO el
   estilo (burbuja + transicion suave), no el layout horizontal de esa
   referencia: el sidebar sigue siendo la misma lista vertical de 8 botones
   en 2 grupos que ya funcionaba, para no perder texto ni reordenar nada. */
.sidebar .nav-boton {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border-radius: 14px;
  padding: 6px 12px 6px 6px;
  font-size: 13.5px;
  background: transparent;
  color: rgba(255,255,255,0.72);
  margin-bottom: 4px;
  box-shadow: none;
}

.nav-boton-icono {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.nav-boton-texto {
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar .nav-boton:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--blanco);
}

.sidebar .nav-boton:hover .nav-boton-icono {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.sidebar .nav-boton.activo {
  background: rgba(0, 137, 179, 0.14);
  color: var(--blanco);
  box-shadow: none;
}

.sidebar .nav-boton.activo .nav-boton-icono {
  background: var(--azul-principal);
  box-shadow: 0 4px 14px rgba(0, 137, 179, 0.55), 0 0 0 4px rgba(0, 137, 179, 0.15);
  transform: scale(1.08);
}

.contenido {
  padding: 32px 20px;
  max-width: 1140px;
  margin: 0 auto;
}

.contenido h2 {
  color: var(--texto-titulo);
  font-size: 24px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

/* Fila completa de la toolbar: pastilla de pestañas Hoy/Todo el historial a
   la izquierda + buscador a la derecha (agosto 2026 -- antes .filtros-libro
   ERA la pastilla; ahora la pastilla se movio a .filtros-libro-tabs y este
   selector pasa a ser el contenedor de toda la fila, con el buscador real
   al lado). En pantallas angostas se apilan. */
.filtros-libro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.filtros-libro-tabs {
  display: flex;
  gap: 8px;
  background: var(--gris-borde);
  padding: 4px;
  border-radius: 14px;
  max-width: 320px;
}

.filtros-libro-tabs .nav-boton {
  flex: 1;
  text-align: center;
  border-radius: 10px;
  padding: 8px 12px;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.filtros-libro-tabs .nav-boton.activo {
  background: var(--gris-tarjeta);
  color: var(--texto-titulo);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Buscador real (agosto 2026) -- la referencia visual que trajo Jesuar solo
   traia el diseño de este input, sin logica de filtrado; la logica esta en
   aplicarFiltroBusquedaLibroDiario() dentro de libro-diario.js. */
.buscador-libro {
  position: relative;
  flex: 1 1 260px;
  max-width: 320px;
}

.buscador-libro-icono {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.55;
  pointer-events: none;
}

.buscador-libro-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border-radius: var(--radio-input);
  border: 1px solid var(--gris-borde);
  background: var(--gris-tarjeta);
  font-size: 13.5px;
  color: var(--texto-oscuro);
  font-family: inherit;
}

.buscador-libro-input:focus {
  outline: none;
  border-color: var(--azul-principal);
  box-shadow: 0 0 0 3px rgba(0, 137, 179, 0.15);
}

.buscador-libro-input::placeholder {
  color: var(--gris-texto);
}

/* Marco/tarjeta que agrupa TODO el bloque de filtros de Libro Diario
   (pestañas + buscador arriba, fila de Estado abajo, separadas por una
   linea) -- agregado agosto 2026 a pedido de Jesuar, con la referencia
   visual que trajo: antes cada fila flotaba suelta sin un borde comun y se
   veia "desordenado". */
.panel-filtros-libro {
  background: var(--gris-tarjeta);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-card);
  padding: 16px 20px;
  box-shadow: var(--sombra-suave);
  margin-bottom: 20px;
}

.panel-filtros-libro .filtros-libro {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gris-borde);
}

/* Fila del filtro por etapa (Estado: Todos/Recibido/Lavando/Secando/Ropa
   Lista/Entregado), debajo de las pestañas Hoy/Todo el historial dentro del
   mismo marco -- agregado agosto 2026 a pedido de Jesuar. Se oculta en la
   vista de carpetas (ver mostrarVistaListaLibroDiario/mostrarVistaCarpetasLibroDiario
   en libro-diario.js). */
.filtros-libro-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.filtros-libro-estado-etiqueta {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-texto);
  margin-right: 2px;
}

.chips-estado-libro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-estado {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--gris-borde);
  background: var(--gris-tarjeta);
  color: var(--texto-oscuro);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip-estado:hover {
  border-color: var(--azul-principal);
}

.chip-estado.activo {
  background: var(--texto-titulo);
  border-color: var(--texto-titulo);
  color: #FFFFFF;
}

/* Vista de carpetas por año/mes de "Todo el historial" (agosto 2026) --
   reemplaza la vieja carga plana de TODAS las OT. Ver libro-diario.js:
   mostrarVistaCarpetasLibroDiario() y cargarCarpetasDeAnio(). */
.pastilla-anios {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.pastilla-anio {
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  background: var(--gris-borde);
  color: var(--gris-texto);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pastilla-anio:hover {
  background: var(--azul-principal);
  color: var(--blanco);
  opacity: 0.85;
}

.pastilla-anio.activo {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

.grid-carpetas-meses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.carpeta-mes {
  background: var(--gris-tarjeta);
  border: 1px solid var(--gris-borde);
  border-top: 3px solid var(--acento-progreso);
  border-radius: var(--radio-card);
  padding: 16px 18px;
  cursor: pointer;
  box-shadow: var(--sombra-suave);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.carpeta-mes:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-elevada);
}

.carpeta-mes:not(.carpeta-mes-actual) {
  border-top-color: var(--gris-borde);
}

.carpeta-mes-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.carpeta-mes-nombre {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--texto-titulo);
}

.carpeta-mes-badge {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--acento-progreso-fondo);
  color: var(--acento-progreso);
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.carpeta-mes-detalle {
  font-size: 12.5px;
  color: var(--gris-texto);
  margin: 0;
}

.carpeta-mes-total {
  font-size: 18px;
  font-weight: 800;
  color: var(--texto-titulo);
  margin: 6px 0 0;
}

.resumen-anio-libro {
  background: var(--azul-oscuro);
  border-radius: var(--radio-card);
  padding: 16px 22px;
}

.resumen-anio-etiqueta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.resumen-anio-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
  color: var(--blanco);
  font-size: 13.5px;
}

.resumen-anio-monto {
  font-size: 17px;
  font-weight: 800;
  color: #5DCAA5;
}

.boton-volver-carpetas {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--azul-principal);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 14px;
}

.boton-volver-carpetas:hover {
  text-decoration: underline;
}

.aviso-facturas-restantes {
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radio-input);
  margin-bottom: 16px;
  background: var(--gris-fondo);
  color: var(--gris-texto);
}

.aviso-facturas-restantes.alerta {
  background: var(--rojo-fondo-suave);
  color: #EF4444;
}

.total-libro {
  font-weight: 700;
  color: var(--verde-exito);
  margin-bottom: 20px;
  font-size: 17px;
  background: var(--verde-fondo);
  display: inline-block;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.texto-vacio {
  text-align: center;
  color: var(--gris-texto);
  margin-top: 60px;
  font-size: 15px;
  display: none;
}

.grid-ot {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.tarjeta-ot {
  background: var(--gris-tarjeta);
  border-radius: var(--radio-card);
  padding: 20px;
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-suave);
  position: relative;
}

.tarjeta-ot:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-elevada);
}

.chip-ot {
  display: inline-block;
  background: var(--verde-fondo);
  color: var(--verde-exito);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

/* Animacion Lottie pequeña en la esquina de la tarjeta, solo para OT ya
   Cerrada en el tab "Hoy" (agosto/septiembre 2026, a pedido de Jesuar) --
   ver renderAnimacionCerradaOtHoy() en libro-diario.js. Se apoya en que
   .tarjeta-ot ya es position: relative con padding: 20px. */
.anim-cerrada-ot-hoy {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 88px;
  height: 88px;
  pointer-events: none;
}

.ot-cliente {
  margin: 4px 0;
  color: var(--texto-titulo);
  font-size: 17px;
  font-weight: 700;
}

.ot-detalle {
  margin: 4px 0;
  color: var(--texto-oscuro);
  font-size: 14px;
}

.ot-fechas {
  margin: 6px 0;
  color: var(--gris-texto);
  font-size: 12.5px;
}

.ot-comentario {
  margin: 8px 0;
  color: var(--azul-principal);
  font-size: 13px;
  font-style: italic;
  background: var(--azul-fondo-suave);
  padding: 6px 10px;
  border-radius: 8px;
}

/* ---------- Tracker visual de avance de la OT (agosto 2026) ----------
   Reemplaza la vieja linea de texto con emojis (✅▶️◻️) por circulos
   numerados conectados con lineas: check verde-azulado en los pasos ya
   hechos, anillo resaltado en el paso actual, circulo vacio en los que
   faltan. Adaptado de una referencia visual (mockup) que trajo Jesuar,
   usando el nuevo --acento-progreso en vez de copiar su paleta OKLCH.
   Generado por lineaDeProgreso() en libro-diario.js -- ver ahi la razon de
   usar <ol> con clases .ot-tracker-paso-* segun estado (hecho/actual/pendiente). */
.ot-tracker {
  display: flex;
  align-items: flex-start;
  margin: 12px 0;
  padding: 10px 4px;
  background: var(--gris-fondo);
  border-radius: 10px;
  border: 1px solid var(--gris-borde);
  list-style: none;
}

.ot-tracker-paso {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.ot-tracker-lineas {
  display: flex;
  align-items: center;
  width: 100%;
}

.ot-tracker-linea {
  flex: 1;
  height: 2px;
  background: var(--gris-borde);
  border-radius: 2px;
}

.ot-tracker-paso:first-child .ot-tracker-linea:first-child,
.ot-tracker-paso:last-child .ot-tracker-linea:last-child {
  visibility: hidden;
}

.ot-tracker-paso.ot-tracker-hecho .ot-tracker-linea {
  background: var(--acento-progreso);
}

.ot-tracker-circulo {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--gris-borde);
  background: var(--gris-tarjeta);
  color: var(--gris-texto);
}

.ot-tracker-paso.ot-tracker-hecho .ot-tracker-circulo {
  border-color: var(--acento-progreso);
  background: var(--acento-progreso);
  color: var(--blanco);
}

.ot-tracker-paso.ot-tracker-actual .ot-tracker-circulo {
  border-color: var(--acento-progreso);
  background: var(--gris-tarjeta);
  color: var(--acento-progreso);
  box-shadow: 0 0 0 3px var(--acento-progreso-fondo);
}

.ot-tracker-etiqueta {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--gris-texto);
  text-align: center;
  line-height: 1.2;
}

.ot-tracker-paso.ot-tracker-hecho .ot-tracker-etiqueta,
.ot-tracker-paso.ot-tracker-actual .ot-tracker-etiqueta {
  color: var(--texto-oscuro);
}

.btn-avanzar {
  border: none;
  border-radius: var(--radio-input);
  padding: 11px 16px;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  background: var(--azul-principal);
  color: var(--blanco);
  margin-top: 8px;
}

.btn-avanzar:hover:not(:disabled) {
  background: var(--azul-hover);
}

.btn-avanzar:disabled {
  background: var(--gris-borde);
  color: var(--gris-texto);
  cursor: default;
}

.subtitulo-modulo {
  color: var(--gris-texto);
  font-size: 14px;
  margin-top: -12px;
  margin-bottom: 24px;
}

/* ---------- Dashboard "Inicio" ---------- */

.dashboard-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(120deg, var(--azul-oscuro) 0%, var(--azul-principal) 100%);
  border-radius: var(--radio-card);
  padding: 24px 28px;
  margin-bottom: 22px;
  box-shadow: var(--sombra-elevada);
}

.dashboard-hero-icono {
  font-size: 34px;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 14px;
}

/* Variante con ilustracion en vez de emoji -- por ahora solo la del hero de
   Inicio (lavadora + insumos), a pedido de Jesuar. Un poco mas grande que
   el emoji y con fondo blanco solido, ya que la ilustracion ya trae su
   propio fondo blanco. */
.dashboard-hero-icono-img {
  width: 68px;
  height: 68px;
  padding: 5px;
  background: var(--blanco);
}

.dashboard-hero-icono-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 9px;
  display: block;
}

.dashboard-hero-etiqueta {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.dashboard-hero-valor {
  color: var(--blanco);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Fila del valor hero + boton de ojo -- usado en Caja Chica y Banco para
   ocultar/revelar el saldo (ver caja.js / banco.js). */
.dashboard-hero-valor-fila {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-ojo-saldo {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--blanco);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-ojo-saldo:hover {
  background: rgba(255, 255, 255, 0.28);
}

.dashboard-hero-nota {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  margin-top: 4px;
}

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

.dashboard-card {
  position: relative;
  background: var(--gris-tarjeta);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-card);
  padding: 22px 22px 20px 22px;
  box-shadow: var(--sombra-suave);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-elevada);
}

/* Solo "Órdenes de hoy" y "Órdenes del mes" llevan al Libro Diario -- las
   demas tarjetas (ingresos, facturas CAI) se quedan como estan por ahora. */
.dashboard-card-clicable {
  cursor: pointer;
}

.dashboard-card-icono {
  font-size: 21px;
  margin-bottom: 10px;
}

.dashboard-card-etiqueta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris-texto);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.dashboard-card-valor {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--texto-titulo);
}

.dashboard-card-azul::before { background: var(--azul-principal); }
.dashboard-card-azul .dashboard-card-valor { color: var(--azul-principal); }

.dashboard-card-morado::before { background: var(--morado-accent); }
.dashboard-card-morado .dashboard-card-valor { color: var(--morado-accent); }

.dashboard-card-verde::before { background: var(--verde-exito); }
.dashboard-card-verde .dashboard-card-valor { color: var(--verde-exito); }

.dashboard-card-teal::before { background: var(--acento-progreso); }
.dashboard-card-teal .dashboard-card-valor { color: var(--acento-progreso); }

.dashboard-card-naranja::before { background: var(--naranja-accent); }
.dashboard-card-naranja .dashboard-card-valor { color: var(--naranja-accent); }

/* Tarjeta de "Facturas CAI disponibles" en Libro Diario cuando quedan pocas
   -- reemplaza al viejo .aviso-facturas-restantes.alerta (texto en rojo). */
.dashboard-card.alerta-baja::before { background: #EF4444; }
.dashboard-card.alerta-baja .dashboard-card-valor { color: #EF4444; }

/* Tarjeta KPI "En proceso" de Libro Diario mientras su filtro esta activo
   (click para ver solo las OT en proceso) -- mismo anillo que ya se usa en
   el paso "actual" del tracker, para que se sienta como el mismo lenguaje
   visual de "esto esta resaltado ahora mismo". */
.dashboard-card-filtro-activo {
  border-color: var(--acento-progreso);
  box-shadow: 0 0 0 3px var(--acento-progreso-fondo);
}

.dashboard-top-clientes {
  background: var(--gris-tarjeta);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-card);
  padding: 22px 26px 8px 26px;
  box-shadow: var(--sombra-suave);
  max-width: 560px;
}

.dashboard-top-cliente-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--gris-fondo);
}

.dashboard-top-cliente-fila:last-child {
  border-bottom: none;
}

.dashboard-top-cliente-medalla {
  font-size: 16px;
  width: 26px;
  text-align: center;
  flex-shrink: 0;
}

.dashboard-top-cliente-nombre {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-oscuro);
}

.dashboard-top-cliente-ot {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--azul-principal);
  background: var(--azul-fondo-suave);
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* ---------- Caja Chica: historial de movimientos ---------- */

.lista-movimientos-caja {
  background: var(--gris-tarjeta);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-card);
  box-shadow: var(--sombra-suave);
  padding: 6px 20px;
}

.movimiento-caja-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-fondo);
}

.movimiento-caja-fila:last-child {
  border-bottom: none;
}

.movimiento-caja-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.movimiento-caja-tipo {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-titulo);
}

.movimiento-caja-desc {
  font-size: 13px;
  color: var(--texto-oscuro);
}

.movimiento-caja-meta {
  font-size: 11.5px;
  color: var(--gris-texto);
}

.movimiento-caja-monto {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.movimiento-caja-ingreso .movimiento-caja-monto {
  color: var(--verde-exito);
}

.movimiento-caja-egreso .movimiento-caja-monto {
  color: #EF4444;
}

/* Columna a la derecha de cada fila: el monto, y debajo -- si aplica -- el
   boton de anular o la etiqueta de "Anulado". Reemplaza el simple texto
   .movimiento-caja-monto como hijo directo de .movimiento-caja-fila. */
.movimiento-caja-derecha {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.btn-anular-movimiento {
  background: none;
  border: 1px solid #EF4444;
  color: #EF4444;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-anular-movimiento:hover {
  background: var(--rojo-fondo-suave);
}

.etiqueta-movimiento-anulado {
  font-size: 11px;
  color: var(--gris-texto);
  font-style: italic;
}

.tarjeta-formulario {
  background: var(--gris-tarjeta);
  border-radius: var(--radio-card);
  padding: 28px;
  max-width: 500px;
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-suave);
}

/* Variante ancha, para tarjetas que llevan una tabla adentro (ej. "Clientes
   en riesgo" del Panel de Negocio) -- el ancho fijo de 500px de arriba deja
   las columnas de una tabla muy apretadas. Mismo patron que
   .tarjeta-reporte-ancha para el Registro de Facturas. */
.tarjeta-formulario.tarjeta-formulario-ancha {
  max-width: 900px;
}

.etiqueta-campo {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-oscuro);
  margin-bottom: 6px;
  margin-top: 16px;
}

.etiqueta-campo:first-of-type {
  margin-top: 0;
}

/* Equivalente en Lempiras junto a cada precio en dólares, en la tarjeta de
   precios de planes del Mega Admin -- agregado 9 de septiembre de 2026 a
   pedido de Jesuar. Ver actualizarEquivalentesLempiraMegaAdmin() en
   mega-admin.js. */
.equivalente-lempira-mega-admin {
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-texto);
  margin: 4px 0 0 0;
}

.tarjeta-formulario select.campo,
.tarjeta-formulario input.campo {
  margin-bottom: 0;
}

.total-calculado-ot {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  color: var(--verde-exito);
  padding: 14px;
  margin-top: 18px;
  background: var(--verde-fondo);
  border-radius: var(--radio-input);
  border: 1px dashed rgba(16, 185, 129, 0.4);
}

.confirmacion-ot {
  max-width: 500px;
  background: var(--verde-fondo);
  border: 1.5px solid var(--verde-exito);
  border-radius: var(--radio-input);
  padding: 18px;
  margin-top: 20px;
  color: #065F46;
  font-size: 14px;
  line-height: 1.6;
}

.titulo-form-chico {
  margin: 0 0 16px 0;
  color: var(--texto-titulo);
  font-size: 17px;
  font-weight: 700;
}

.tarjeta-cliente {
  background: var(--gris-tarjeta);
  border-radius: var(--radio-card);
  padding: 18px;
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-suave);
}

.cliente-nombre {
  margin: 0 0 6px 0;
  color: var(--texto-titulo);
  font-size: 16px;
  font-weight: 700;
}

.cliente-telefonos {
  margin: 0;
  color: var(--gris-texto);
  font-size: 13.5px;
}

.acciones-cliente {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* ---------- Tarjeta de cliente (Modo Negocio): version enriquecida con
   notas internas y estadisticas por cliente. Se agregan clases NUEVAS
   (cliente-cabecera, cliente-acciones-iconos, cliente-notas, cliente-stats,
   etc.) sin tocar .tarjeta-cliente / .cliente-nombre / .cliente-telefonos /
   .acciones-cliente / .btn-chico / .btn-outline-chico, porque personal.js
   reutiliza esas mismas clases para la lista de Personal y no debe verse
   afectado. ---------- */

.cliente-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.cliente-cabecera .cliente-nombre {
  margin: 0;
}

.cliente-acciones-iconos {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn-icono-cliente {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--gris-borde);
  background: var(--gris-tarjeta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
}

.btn-icono-cliente:hover {
  background: var(--gris-fondo);
}

.btn-icono-cliente.eliminar {
  border-color: #FECACA;
  color: #EF4444;
}

.btn-icono-cliente.eliminar:hover {
  background: var(--rojo-fondo-suave);
}

.cliente-notas {
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--texto-oscuro);
  margin-top: 10px;
}

.cliente-notas strong {
  color: var(--texto-titulo);
}

.cliente-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gris-borde);
}

.stat-cliente {
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
}

.stat-etiqueta {
  font-size: 9.5px;
  color: var(--gris-texto);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-valor {
  font-size: 14px;
  font-weight: 800;
  color: var(--texto-oscuro);
  margin-top: 3px;
}

.stat-valor.positivo {
  color: var(--verde-exito);
}

.stat-valor.pendiente {
  color: #EF4444;
}

.stat-valor.sin-pendiente {
  color: var(--gris-texto);
}

.btn-historial-cliente {
  border: 1.5px solid var(--azul-principal);
  background: var(--azul-fondo-suave);
  color: var(--azul-principal);
  border-radius: var(--radio-input);
  padding: 9px 12px;
  width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 12px;
  cursor: pointer;
}

.btn-historial-cliente:hover {
  background: var(--azul-principal);
  color: var(--blanco);
}

/* ---------- Tarjeta de insumo (modulo Insumos, 1 de septiembre de 2026) --
   estructura identica a .tarjeta-cliente/.cliente-cabecera, con nombres
   propios para que quede claro que es una entidad distinta; reutiliza
   .stat-cliente/.stat-etiqueta/.stat-valor (genericos, sin nada especifico
   de "cliente" en el estilo) y .acciones-cliente/.btn-chico/.btn-outline-chico
   para los botones, igual que hace personal.js. ---------- */

.tarjeta-insumo {
  background: var(--gris-tarjeta);
  border-radius: var(--radio-card);
  padding: 18px;
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-suave);
}

/* Tarjeta entera en rojo cuando el insumo esta en stock bajo (1 de
   septiembre de 2026, a pedido de Jesuar: "que la tarjeta entera se ponga
   roja, para mas impacto visual" en vez de solo la insignia). */
.tarjeta-insumo--stock-bajo {
  background: var(--rojo-fondo-suave);
  border-color: #EF4444;
  box-shadow: 0 6px 24px -4px rgba(239, 68, 68, 0.35);
}

/* Con la tarjeta ya roja, la insignia necesita fondo solido para no
   perderse contra el mismo tono de rojo claro de la tarjeta. */
.tarjeta-insumo--stock-bajo .badge-stock-bajo {
  background: #EF4444;
  color: var(--blanco);
}

.insumo-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.insumo-nombre {
  margin: 0;
  color: var(--texto-titulo);
  font-size: 16px;
  font-weight: 700;
}

.badge-stock-bajo {
  display: inline-block;
  background: var(--rojo-fondo-suave);
  color: #EF4444;
  font-weight: 700;
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.insumo-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 14px;
  align-items: center;
}

/* Animacion Lottie de advertencia, en el espacio libre junto al stat de
   "Stock actual" (misma segunda columna de .insumo-stats), SOLO en tarjetas
   de stock bajo -- ver renderAnimacionStockBajoInsumo() en insumos.js. */
.insumo-anim-stock-bajo {
  width: 76px;
  height: 76px;
  justify-self: center;
  pointer-events: none;
}

/* ---------- Modal "Ver Historial de Ordenes" de un cliente -- reutiliza
   el mismo armazon visual que .modal-chat/.chat-ventana/.chat-encabezado
   (ver mas abajo), solo con clases propias para la lista de OT. ---------- */

.historial-lista {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--gris-fondo);
}

.historial-item {
  background: var(--gris-tarjeta);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.historial-item-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.historial-item-numero {
  font-weight: 700;
  color: var(--texto-titulo);
  font-size: 13.5px;
}

.historial-item-monto {
  font-weight: 700;
  color: var(--verde-exito);
  font-size: 13.5px;
}

.historial-item-detalle {
  font-size: 12px;
  color: var(--gris-texto);
  margin: 2px 0 0 0;
}

.historial-item-factura {
  font-size: 11px;
  color: var(--azul-principal);
  margin-top: 4px;
}

.btn-chico {
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}

.btn-outline-chico {
  background: var(--gris-tarjeta);
  color: var(--texto-titulo);
  border: 1.5px solid var(--gris-borde);
}

.btn-outline-chico:hover {
  border-color: var(--azul-principal);
  color: var(--azul-principal);
}

.btn-chat-ot {
  border: 1.5px solid var(--azul-principal);
  background: var(--azul-fondo-suave);
  color: var(--azul-principal);
  border-radius: var(--radio-input);
  padding: 10px 14px;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}

.btn-imprimir-factura {
  border: none;
  background: var(--verde-exito);
  color: var(--blanco);
  border-radius: var(--radio-input);
  padding: 10px 14px;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
}

.btn-imprimir-factura:hover {
  opacity: 0.9;
}

.btn-anular-factura {
  display: block;
  margin: 8px 0 0 auto;
  background: transparent;
  border: none;
  color: #EF4444;
  font-size: 11px;
  padding: 4px;
}

.btn-anular-factura:hover {
  text-decoration: underline;
}

.ot-badge-anulada {
  background: var(--rojo-fondo-suave);
  color: #EF4444;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  margin: 8px 0 0 0;
}

.btn-chat-ot:hover {
  background: var(--azul-principal);
  color: var(--blanco);
}

.btn-eliminar-ot-web {
  display: block;
  margin: 8px 0 0 auto;
  background: transparent;
  border: none;
  color: var(--gris-texto);
  font-size: 11px;
  padding: 4px;
}

.btn-eliminar-ot-web:hover {
  color: #EF4444;
}

.tarjeta-reporte {
  background: var(--gris-tarjeta);
  border-radius: var(--radio-card);
  padding: 24px;
  max-width: 560px;
  margin-top: 24px;
  border: 1px solid var(--gris-borde);
  box-shadow: var(--sombra-suave);
}

/* Variante mas ancha, solo para el Registro de Facturas Emitidas (tabla de
   7 columnas) -- los demas reportes (listas de vinetas) se quedan con el
   ancho angosto normal. Se activa/desactiva por JS segun que reporte se
   este mostrando. Ampliada a 1040px: en pantalla sobraba espacio a los
   lados y eso obligaba a las columnas Del No./Al No. a apretarse mas de
   lo necesario. */
.tarjeta-reporte.tarjeta-reporte-ancha {
  max-width: 1040px;
}

@media print {
  .tarjeta-reporte.tarjeta-reporte-ancha {
    max-width: 100%;
  }
}

/* ---------- Grafico "OT por dia" (reporte por rango) ---------- */

.contenedor-grafico {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 160px;
  padding: 12px;
  overflow-x: auto;
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-input);
  margin-top: 10px;
}

.columna-grafico {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 32px;
  flex-shrink: 0;
}

.valor-barra {
  font-size: 10px;
  color: var(--texto-titulo);
  font-weight: 700;
  margin-bottom: 2px;
}

.barra-grafico {
  width: 20px;
  background: var(--azul-principal);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}

.etiqueta-barra {
  font-size: 9px;
  color: var(--gris-texto);
  margin-top: 4px;
  white-space: nowrap;
}

/* ---------- Top 5 clientes (reporte por rango) ---------- */

.tarjeta-top-clientes {
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-input);
  padding: 10px 16px;
  margin-top: 10px;
}

.tarjeta-top-clientes p {
  margin: 8px 0;
}

.tarjeta-reporte h3 {
  margin-top: 0;
  color: var(--texto-titulo);
  font-weight: 700;
}

.tarjeta-reporte p {
  margin: 8px 0;
  font-size: 14.5px;
  color: var(--texto-oscuro);
}

.membrete-reporte {
  margin-bottom: 18px;
}

/* Ficha con los datos de autorizacion de la SAR (C.A.I., rango de
   correlativos autorizado, fecha limite de emision) -- exigidos por ley en
   cualquier documento fiscal, por eso van en el encabezado del reporte,
   antes del periodo del reporte en si. */
.ficha-cai-reporte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  background: var(--gris-fondo);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 6px 0 14px 0;
}

.ficha-cai-reporte p {
  margin: 0 !important;
  font-size: 12.5px !important;
  color: var(--texto-oscuro) !important;
}

.ficha-cai-reporte strong {
  color: var(--texto-titulo);
}

.ficha-cai-reporte .valor-cai {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.3px;
}

.logo-membrete-reporte {
  width: 120px;
  display: block;
  margin-bottom: 12px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.barra-acento-reporte {
  height: 4px;
  background: var(--azul-principal);
  border-radius: 2px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.modal-chat {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.chat-ventana {
  background: var(--gris-tarjeta);
  border-radius: 24px;
  width: 100%;
  max-width: 440px;
  height: 75vh;
  max-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--sombra-elevada);
}

.chat-encabezado {
  background: var(--azul-oscuro);
  color: var(--blanco);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-encabezado-cliente {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

.btn-cerrar-chat {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: var(--blanco);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
}

.btn-cerrar-chat:hover {
  background: rgba(255, 255, 255, 0.3);
}

.chat-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--gris-fondo);
}

.chat-form {
  display: flex;
  gap: 8px;
  padding: 14px;
  background: var(--gris-tarjeta);
  border-top: 1px solid var(--gris-borde);
}

.burbuja-chat {
  max-width: 80%;
  margin-bottom: 12px;
}

.burbuja-mia {
  margin-left: auto;
  text-align: right;
}

.burbuja-otro {
  margin-right: auto;
  text-align: left;
}

.texto-burbuja {
  display: inline-block;
  padding: 11px 16px;
  border-radius: 18px;
  font-size: 14px;
  text-align: left;
  line-height: 1.4;
}

.burbuja-mia .texto-burbuja {
  background: var(--azul-principal);
  color: var(--blanco);
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 137, 179, 0.2);
}

.burbuja-otro .texto-burbuja {
  background: var(--gris-borde);
  color: var(--texto-oscuro);
  border-bottom-left-radius: 4px;
}

.hora-burbuja {
  font-size: 10.5px;
  color: var(--gris-texto);
  margin-top: 4px;
}

@media (max-width: 600px) {
  .barra-superior {
    padding: 12px 16px;
    height: auto;
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  .logo-fondo-grande {
    position: static;
    transform: none;
    height: 60px;
    margin-top: 10px;
    align-self: center;
  }

  /* Misma especificidad que la version de escritorio de #vistaApp (ID +
     clase) para que esta SI gane en movil -- si no, el "height: 150px" de
     arriba se comeria a este por especificidad, sin importar el orden. */
  #vistaApp .logo-fondo-grande {
    height: 70px;
  }

  /* En pantallas angostas el sidebar se acuesta: se vuelve una barra
     horizontal (con scroll lateral en los botones), en vez de una
     columna fija -- no hay espacio para una columna de 250px en un celular. */
  .app-shell {
    flex-direction: column;
    min-height: auto;
    gap: 12px;
    padding: 12px;
  }

  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    overflow-x: auto;
  }

  .sidebar-nav {
    display: flex;
    flex: none;
    gap: 6px;
  }

  .sidebar-grupo {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .sidebar-grupo-titulo {
    display: none;
  }

  .sidebar-footer {
    display: none;
  }

  .sidebar .nav-boton {
    width: auto;
    white-space: nowrap;
    padding: 4px 12px 4px 4px;
  }

  .nav-boton-icono {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .grid-ot {
    grid-template-columns: 1fr;
  }

  .contenido {
    padding: 20px 16px;
  }

  .dashboard-hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
  }

  .dashboard-hero-valor {
    font-size: 26px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .dashboard-card-valor {
    font-size: 21px;
  }

  .dashboard-top-clientes {
    max-width: 100%;
    padding: 18px 18px 6px 18px;
  }

  .movimiento-caja-fila {
    flex-wrap: wrap;
  }

  .lista-movimientos-caja {
    padding: 6px 14px;
  }
}

@media print {
  /* Los navegadores, por defecto, NO imprimen los colores de fondo (para
     ahorrar tinta) -- por eso las barras del grafico (que son un color de
     fondo, no texto) desaparecian al imprimir/guardar como PDF, aunque en
     pantalla se vieran bien. Esto le dice al navegador que si los imprima
     tal como se ven. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  #vistaLogin,
  .barra-superior,
  .sidebar,
  #seccionInicio,
  #seccionLibroDiario,
  #seccionNuevaOt,
  #seccionClientes,
  #seccionPersonal,
  #seccionCaja,
  #seccionBanco,
  .tarjeta-formulario,
  .no-imprimir,
  #modalChatWeb,
  #modalHistorialClienteWeb,
  #modalConfirmacionWeb,
  #modalAvisoWeb,
  #modalCierreOtWeb,
  #modalRestablecerContrasenaWeb,
  #modalPrecioPorLibraWeb,
  #modalCaiWeb,
  #modalNotaCreditoWeb,
  #modalDatosFacturaWeb,
  #modalMotivoAnulacionWeb,
  #modalGastoCajaWeb,
  #modalDepositoCajaWeb,
  #modalArqueoCajaWeb,
  #modalFondoCajaWeb,
  #modalGastoBancoWeb,
  #modalArqueoBancoWeb,
  #modalSaldoBancoWeb,
  #modalRevelarSaldoWeb,
  #modalAnularGastoWeb,
  #modalVaciarHistorialWeb,
  #tiqueFacturaWeb {
    display: none !important;
  }

  /* Al imprimir un tique especificamente (ver body.imprimiendo-tique, que
     se activa solo un momento desde JS), se invierte: se oculta TODO lo
     demas y se muestra unicamente el tique. */
  body.imprimiendo-tique > *:not(#tiqueFacturaWeb) {
    display: none !important;
  }

  body.imprimiendo-tique #tiqueFacturaWeb {
    display: block !important;
  }

  body {
    /* Siempre blanco puro al imprimir/guardar PDF, sin importar si el modo
       oscuro esta activo en pantalla (--superficie se ve dark en ese caso). */
    background: var(--blanco);
  }

  /* El scroll horizontal del grafico no sirve en una hoja impresa: en vez
     de dejar que las columnas salten a otra fila (eso rompia la altura de
     las barras), se dejan ENCOGER de ancho para que todas quepan en una
     sola fila -- la altura de cada barra no se toca, sigue siendo un
     porcentaje normal de la altura fija del contenedor. */
  .contenedor-grafico {
    overflow-x: visible;
  }

  .columna-grafico {
    min-width: 0;
    flex: 1 1 0;
  }

  .barra-grafico {
    width: 60%;
  }

  .tarjeta-reporte {
    border: none;
    box-shadow: none;
    padding: 0;
  }
}

/* ---------- Dialogos personalizados (confirmacion / aviso) ---------- */

.modal-dialogo {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.caja-dialogo {
  background: var(--gris-tarjeta);
  border-radius: 20px;
  padding: 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--sombra-elevada);
}

.dialogo-titulo {
  font-size: 17px;
  font-weight: 700;
  color: var(--texto-titulo);
  margin: 0 0 10px 0;
}

.dialogo-mensaje {
  font-size: 14px;
  color: var(--texto-oscuro);
  line-height: 1.5;
  margin: 0 0 22px 0;
  white-space: pre-line;
}

.dialogo-icono {
  font-size: 40px;
  text-align: center;
  margin: 0 0 8px 0;
}

.dialogo-botones {
  display: flex;
  gap: 10px;
}

.dialogo-botones .btn {
  width: auto;
  flex: 1;
}

.etiqueta-monto-cierre {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-titulo);
  margin: 4px 0 6px 0;
}

#inputMontoCierreOt {
  font-size: 16px;
  font-weight: 600;
}

/* ---------- Tique de factura (80mm, solo visible al imprimir) ---------- */

.tique-factura {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #000;
  width: 80mm;
  padding: 4mm;
}

.tique-factura .centrado { text-align: center; }
.tique-factura .negrita { font-weight: 700; }

.tique-factura .nombre-negocio {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.tique-factura .linea-punteada-tique {
  border: none;
  border-top: 1px dashed #000;
  margin: 6px 0;
}

.tique-factura .fila {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.tique-factura .tabla-items {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0;
}

.tique-factura .tabla-items td {
  padding-top: 4px;
  vertical-align: top;
}

.tique-factura .desc-secundaria {
  font-size: 10px;
  color: #333;
}

.tique-factura .qr-espacio {
  width: 22mm;
  height: 22mm;
  border: 1px dashed #999;
  margin: 8px auto 4px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #999;
  text-align: center;
  padding: 4px;
}

/* ---------- Impresora animada al emitir factura (ver #modalImpresoraFacturaWeb
   en index.html y mostrarAnimacionImpresoraFactura() en libro-diario.js).
   Colores fijos (no siguen el modo oscuro del panel): es un mockup de un
   dispositivo fisico -- una "dispensadora" negra de la que el recibo sale
   deslizandose desde una rendija, con el borde inferior serrado (como si
   estuviera cortado con cuchilla), igual criterio que el tique de papel
   que representa. ---------- */

.caja-impresora {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.impresora-maquina {
  width: 100%;
  max-width: 302px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.impresora-capucha-arriba {
  width: 100%;
  height: 38px;
  border-radius: 16px 16px 3px 3px;
  background: linear-gradient(180deg, #3a3a3c 0%, #232326 20%, #141416 55%, #050506 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 2px 2px rgba(255, 255, 255, 0.08), inset 0 -2px 4px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.impresora-brillo {
  position: absolute;
  top: 4px;
  left: 6%;
  width: 88%;
  height: 5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
  border-radius: 999px;
  filter: blur(1px);
}

.impresora-rendija {
  width: 88%;
  height: 10px;
  margin: -5px auto 0;
  background: #000;
  border-radius: 2px;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.9);
  position: relative;
  z-index: 2;
}

.impresora-flash-corte {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 50%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 10px #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.impresora-flash-corte.activo {
  animation: impresoraFlashCorte 0.35s ease-out forwards;
}

@keyframes impresoraFlashCorte {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0.1); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1); }
}

.impresora-capucha-abajo {
  width: 100%;
  height: 10px;
  margin-top: -3px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #050506 0%, #232326 50%, #3a3a3c 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.impresora-papel-viewport {
  width: 100%;
  max-width: 302px;
  max-height: 56vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 2px;
}

.impresora-papel {
  width: 100%;
  height: 0;
  overflow: hidden;
  margin: 0 auto;
  transition: height 0.05s linear;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

.impresora-papel.arrancando {
  animation: impresoraPapelArrancar 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes impresoraPapelArrancar {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  40% { transform: translateY(10px) translateX(40px) rotate(-6deg); opacity: 0.85; }
  100% { transform: translateY(18px) translateX(90px) rotate(-12deg); opacity: 0; }
}

.impresora-papel-interior {
  background: #FAF9F5;
  padding-bottom: 10px;
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% calc(100% - 8px),
    97% 100%, 94% calc(100% - 8px),
    91% 100%, 88% calc(100% - 8px),
    85% 100%, 82% calc(100% - 8px),
    79% 100%, 76% calc(100% - 8px),
    73% 100%, 70% calc(100% - 8px),
    67% 100%, 64% calc(100% - 8px),
    61% 100%, 58% calc(100% - 8px),
    55% 100%, 52% calc(100% - 8px),
    49% 100%, 46% calc(100% - 8px),
    43% 100%, 40% calc(100% - 8px),
    37% 100%, 34% calc(100% - 8px),
    31% 100%, 28% calc(100% - 8px),
    25% 100%, 22% calc(100% - 8px),
    19% 100%, 16% calc(100% - 8px),
    13% 100%, 10% calc(100% - 8px),
    7% 100%, 4% calc(100% - 8px),
    1% 100%, 0% calc(100% - 8px)
  );
}

.impresora-estado {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.impresora-estado-titulo {
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
  text-align: center;
  margin: 0;
}

.etiqueta-seccion-reportes {
  font-size: 11px;
  font-weight: 700;
  color: var(--gris-texto);
  letter-spacing: 0.05em;
  margin: 0 0 10px 0;
}

.tabla-registro-facturas {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tabla-registro-facturas th,
.tabla-registro-facturas td {
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.tabla-registro-facturas th {
  background: var(--azul-oscuro);
  color: var(--blanco);
  text-align: left;
  padding: 9px 12px;
  font-size: 10px;
  text-transform: uppercase;
}

.tabla-registro-facturas td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--gris-borde);
}

.tabla-registro-facturas td.der {
  white-space: nowrap;
}

.tabla-registro-facturas th.der,
.tabla-registro-facturas td.der {
  text-align: right;
}

.tabla-registro-facturas tfoot td {
  border-top: 2px solid var(--azul-oscuro);
  border-bottom: none;
  padding-top: 12px;
  color: var(--texto-titulo);
}

/* Tabla principal del Registro de Facturas (condensada por dia): 7
   columnas. table-layout AUTO + nowrap para que en pantalla (donde sobra
   espacio) cada columna se ajuste a su contenido real y el numero de
   factura completo (ej. 000-001-01-00000051) siempre quede en una sola
   linea. En impresion/PDF, donde el ancho es fijo y limitado por el
   tamaño de hoja, se usa un layout fijo por % mas compacto (ver
   @media print) para garantizar que todo quepa dentro de la pagina. */
.tabla-dias {
  table-layout: auto;
}

.tabla-dias th, .tabla-dias td {
  padding: 9px 12px;
  white-space: nowrap;
}

.tabla-dias th:nth-child(1), .tabla-dias td:nth-child(1) { width: 11%; }
.tabla-dias th:nth-child(2), .tabla-dias td:nth-child(2) { width: 21%; }
.tabla-dias th:nth-child(3), .tabla-dias td:nth-child(3) { width: 21%; }
.tabla-dias th:nth-child(4), .tabla-dias td:nth-child(4) { width: 7%; }
.tabla-dias th:nth-child(5), .tabla-dias td:nth-child(5) { width: 14%; }
.tabla-dias th:nth-child(6), .tabla-dias td:nth-child(6) { width: 11%; }
.tabla-dias th:nth-child(7), .tabla-dias td:nth-child(7) { width: 15%; }

@media print {
  .tabla-dias {
    table-layout: fixed;
    font-size: 11px;
  }

  .tabla-dias th, .tabla-dias td {
    padding: 7px 8px;
  }
}

/* Tabla secundaria de anuladas: mismo tratamiento -- Factura anulada /
   Nota de Credito llevan numeros completos y no deben partirse; Motivo es
   texto libre y sigue pudiendo hacer salto de linea normal. */
.tabla-anuladas-detalle {
  table-layout: auto;
}

.tabla-anuladas-detalle th:nth-child(1), .tabla-anuladas-detalle td:nth-child(1) { width: 27%; white-space: nowrap; }
.tabla-anuladas-detalle th:nth-child(2), .tabla-anuladas-detalle td:nth-child(2) { width: 27%; white-space: nowrap; }
.tabla-anuladas-detalle th:nth-child(3), .tabla-anuladas-detalle td:nth-child(3) { width: 46%; }

@media print {
  .tabla-anuladas-detalle {
    table-layout: fixed;
    font-size: 11px;
  }

  .tabla-anuladas-detalle th, .tabla-anuladas-detalle td {
    padding: 7px 8px;
  }
}

.fila-anulada td {
  color: #9CA3AF;
  font-style: italic;
}