/* Small runtime overrides for shared UI polish. Keep this file unminified on purpose. */ /* El viewport ya bloquea el zoom (ver App.razor), pero esto es lo que de verdad mata el doble-tap-para-ampliar en iOS Safari: sin el, el gesto se detecta y se descarta DESPUES de haber animado el zoom, asi que la pantalla igual "salta" un instante. touch-action:manipulation le dice al navegador desde el principio que ni pellizcar ni doble-tocar van a hacer nada aqui, y de paso quita el retraso de 300ms que todo navegador movil mete antes de disparar un click, esperando a ver si viene un segundo toque. */ html, body { touch-action: manipulation; } /* El rail del POS en movil SE MUDO a input.css, bajo `[data-nv-host="web"]`. Estaba aqui, y aqui fallaba en silencio: este archivo se enlazaba sin huella, o sea que el navegador de quien ya habia entrado antes se quedaba con la copia vieja y la hamburguesa seguia saliendo por mucho que la regla estuviera escrita. Ver el comentario del en App.razor. */ .nv-draft-card { border-color: color-mix(in srgb, var(--nv-border) 88%, var(--nv-primary) 12%); box-shadow: 0 12px 26px rgba(10, 10, 10, 0.06); } .nv-draft-grid { align-items: end; } .nv-draft-span-2 { grid-column: span 2 / span 2; } /* 36px, LA MISMA ALTURA QUE CUALQUIER OTRO CAMPO. Aqui median 42, y no por una razon de los editores de documento: simplemente nacio con ese numero cuando la base media 44. Al bajar la base a 36 se quedaron 6px por encima, o sea la misma clase de descuadre que se vino corrigiendo — solo que repartido entre pantallas en vez de dentro de una. La cuenta sale exacta y por eso el relleno es 7 y no 9: 7 + 20 de linea + 7 + 2 de borde = 36. Con `padding: 0` como en la base, el

pegaria el
   texto al borde de arriba.

El tamaño de letra tambien va fijo. Sin el lo decide el padre, que es como en
   `.nv-input` acabaron conviviendo campos de 14px con otros de 16 sin que nadie
   escribiera nada distinto.

Lo que NO cambia es el aspecto propio de hoja de documento: el borde mas
   marcado, el radio de 6 y el brillo interior. Eso si distingue al editor. */
.nv-draft-control,
.nv-input.nv-draft-control,
.nv-textarea.nv-draft-control {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-height: 36px !important;
  border: 1px solid var(--nv-border-strong) !important;
  border-radius: 6px !important;
  background-color: var(--nv-surface) !important;
  color: var(--nv-text) !important;
  font-size: 14px !important;
  padding: 7px 11px !important;
  line-height: 20px !important;
  box-shadow: inset 0 1px 0 rgba(10, 10, 10, 0.03) !important;
}

.nv-draft-control:focus,
.nv-input.nv-draft-control:focus,
.nv-textarea.nv-draft-control:focus {
  border-color: var(--nv-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nv-primary) 18%, transparent) !important;
}

.nv-draft-control:disabled,
.nv-input.nv-draft-control:disabled,
.nv-textarea.nv-draft-control:disabled {
  background-color: var(--nv-surface-muted) !important;
  color: var(--nv-muted) !important;
  opacity: 1 !important;
}

.nv-draft-textarea {
  min-height: 78px !important;
}

.nv-draft-primary-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--nv-primary);
  color: #ffffff;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--nv-primary) 22%, transparent);
}

.nv-draft-primary-action:hover:not(:disabled) {
  background: var(--nv-primary-dark);
  transform: translateY(-1px);
}

.nv-draft-primary-action:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}

.nv-nav-theme-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: color-mix(in srgb, var(--nv-brand-ice-silver) 88%, transparent);
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nv-nav-theme-switch:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: color-mix(in srgb, var(--nv-brand-iris) 45%, transparent);
  color: #ffffff;
}

@media (min-width: 1024px) {
  .nv-nav-theme-switch {
    width: 38px;
    padding: 9px;
  }

.nv-nav-theme-switch span {
    display: none;
  }

.nv-nav:is(:hover, .is-pinned) .nv-nav-theme-switch {
    width: 100%;
    justify-content: flex-start;
    padding: 9px 11px;
  }

.nv-nav:is(:hover, .is-pinned) .nv-nav-theme-switch span {
    display: inline;
  }
}

/* Fila compacta en el pie del nav admin: toggle de tema (icono) junto a "Cerrar sesion". */
.nv-nav-logout-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nv-nav-theme-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: color-mix(in srgb, var(--nv-brand-ice-silver) 88%, transparent);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nv-nav-theme-inline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: color-mix(in srgb, var(--nv-brand-iris) 45%, transparent);
  color: #ffffff;
}

.nv-nav-theme-inline .nv-nav-link-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 767px) {
  .nv-draft-span-2 {
    grid-column: auto;
  }
}

/* Precios (listas de precios) premium iris accents. Light/dark aware. */
.nv-precios-hero {
  border: 1px solid var(--nv-brand-ice-blue);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--nv-brand-iris) 0%, var(--nv-brand-deep-blue) 55%, var(--nv-brand-violet) 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--nv-brand-deep-blue) 26%, transparent);
}

.nv-precios-hero .nv-precios-hero-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
}

[data-nv-theme=dark] .nv-precios-hero {
  border-color: color-mix(in srgb, var(--nv-brand-iris) 40%, transparent);
  background: linear-gradient(135deg, var(--nv-brand-deep-blue) 0%, var(--nv-brand-graphite) 60%, var(--nv-brand-night) 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.nv-precios-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--nv-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nv-precios-tab:hover {
  color: var(--nv-text);
}

.nv-precios-tab-active {
  color: var(--nv-brand-deep-blue);
  border-bottom-color: var(--nv-brand-iris);
}

[data-nv-theme=dark] .nv-precios-tab-active {
  color: var(--nv-brand-ice-blue);
}

.nv-precios-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  border: 1px solid var(--nv-border);
  background: var(--nv-surface);
  color: var(--nv-muted);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nv-precios-chip:hover {
  color: var(--nv-text);
  border-color: color-mix(in srgb, var(--nv-brand-iris) 50%, var(--nv-border));
}

.nv-precios-chip-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--nv-brand-iris), var(--nv-brand-deep-blue));
  color: #ffffff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--nv-brand-deep-blue) 30%, transparent);
}

.nv-precios-chip-active:hover {
  color: #ffffff;
}

.nv-precios-accent-card {
  border: 1px solid color-mix(in srgb, var(--nv-brand-iris) 35%, var(--nv-border));
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nv-brand-ice-blue) 22%, var(--nv-surface)) 0%, var(--nv-surface) 62%);
}

[data-nv-theme=dark] .nv-precios-accent-card {
  border-color: color-mix(in srgb, var(--nv-brand-iris) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nv-brand-deep-blue) 22%, var(--nv-surface)) 0%, var(--nv-surface) 70%);
}

.nv-precios-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--nv-brand-iris) 30%, var(--nv-border));
  background: var(--nv-surface);
  color: var(--nv-text);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
}

.nv-precios-metric strong {
  color: var(--nv-brand-deep-blue);
}

[data-nv-theme=dark] .nv-precios-metric strong {
  color: var(--nv-brand-ice-blue);
}

/* Dark-theme fix: @tailwindcss/forms base reset hardcodes a white background on
   typed inputs ([type=number], [type=date], select, textarea...), which overrides
   .nv-input and leaves light text on white in dark mode. Restore theme surfaces. */
[data-nv-theme=dark] .nv-input,
[data-nv-theme=dark] .nv-textarea {
  background-color: var(--nv-surface);
  color: var(--nv-text);
  border-color: var(--nv-border);
  color-scheme: dark;
}

[data-nv-theme=dark] .nv-input::placeholder,
[data-nv-theme=dark] .nv-textarea::placeholder {
  color: var(--nv-muted);
}

/* Documento borrador: hoja tipo factura. Papel blanco con texto oscuro en ambos
   temas (los utilitarios slate de Tailwind no se compilan en este proyecto). */
.nv-invoice {
  background: #ffffff;
  color: #334155;
}

.nv-invoice * {
  border-color: #e2e8f0;
}

.nv-invoice .inv-title {
  color: #0f172a;
}

.nv-invoice .inv-muted {
  color: #64748b;
}

.nv-invoice .inv-faint {
  color: #94a3b8;
}

/* La variante compacta .nv-input-sm SE MUDO al CSS compartido (input.css).
   Aqui exigia las dos clases —.nv-input.nv-input-sm— y en seis pantallas estaba
   escrita suelta, asi que no aplicaba y esos campos salian desnudos. Ademas este
   archivo esta duplicado a mano para Web y para MAUI, o sea dos sitios donde
   corregirla. En input.css funciona sola y compila a los dos. */

/* Etiqueta mini de campo (mayúsculas, 11px) para editores/filtros compactos */
.nv-flabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--nv-muted);
}

/* =================================================================================================
   EL AVISO DE RED LENTA. Lo pinta noventa-red.js; aqui solo se le da forma. Ver ese archivo para el
   porque de cada umbral.

VA EN ESTE ARCHIVO Y NO EN input.css por una razon practica: input.css lo compila Tailwind y su
   salida —app.css— esta comiteada, asi que tocarlo obliga a regenerar los dos bundles (web y MAUI)
   y a comitear 129 kB de diff. Esto es chrome de la web y de nadie mas, y aqui se enlaza tal cual.
   Ya no se pierde por cache: App.razor lo enlaza con @Assets, o sea con huella en el nombre.
   ================================================================================================= */

/* EL NARANJA VA A PELO Y NO SALE DE LA PALETA, a proposito. El token de aviso de la casa
   —`--nv-warning`— es un ambar quemado (#92400e en claro) pensado para tintar el fondo de una
   tarjeta, no para gritar desde un cartel flotante: sobre superficie clara se lee marron y pasa
   desapercibido. Esto tiene que verse a la primera y desde lejos, que es todo su trabajo.

Se sube un punto en tema oscuro: el mismo naranja que resalta sobre blanco se apaga sobre negro.
   El texto va SIEMPRE blanco, y por eso el fondo es el 600 y no el 500 — con #f97316 el blanco se
   queda en 3,0:1 y aqui llega a 4,2:1, que es lo que hace legible una linea de 13px. */
:root {
  --nv-red-naranja: #ea580c;
  --nv-red-naranja-suave: rgba(234, 88, 12, 0.14);
}

[data-nv-theme="dark"] {
  --nv-red-naranja: #f97316;
  --nv-red-naranja-suave: rgba(249, 115, 22, 0.18);
}

#nv-red-raiz {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Por encima de todo lo de la aplicacion —la hoja «Mas» es z-60 y la hamburguesa del POS z-70—
     pero eso no le gana al cuadro de reconexion de Blazor, que se abre con showModal() y por tanto
     vive en la CAPA SUPERIOR del navegador, donde ningun z-index llega. Es lo que se quiere: si el
     circuito se cayo, manda ese mensaje y no este. */
  z-index: 9000;
  /* Deja pasar el raton: es un cartel, no una barrera. Solo el boton «Recargar» lo recupera. */
  pointer-events: none;
  padding-top: env(safe-area-inset-top);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* La barra fina de siempre. Indeterminada a proposito: no se sabe cuanto falta —el servidor no lo
   dice— y una barra que finge saberlo miente dos veces. */
#nv-red-barra {
  width: 100%;
  height: 3px;
  overflow: hidden;
  background: var(--nv-red-naranja-suave);
  opacity: 0;
  transition: opacity .15s ease;
}

#nv-red-barra.is-on {
  opacity: 1;
}

#nv-red-barra span {
  display: block;
  height: 100%;
  width: 38%;
  background: var(--nv-red-naranja);
  transform: translateX(-100%);
}

#nv-red-barra.is-on span {
  animation: nv-red-avance 1.1s ease-in-out infinite;
}

@keyframes nv-red-avance {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* El texto. Nace oculto y solo aparece cuando la espera ya dejo de ser normal.

POR DEBAJO DE LA BARRA SUPERIOR, no encima. Con 8px de margen el cartel caia dentro de la franja
   del encabezado y tapaba el logotipo y el nombre de la empresa; se vio en la captura de un iPhone
   de 375px. Se midieron las dos barras que puede haber —`.nv-topbar` en escritorio, 54,8px, y
   `.nv-nav-topbar` en movil, 56px— y por eso basta UN numero y no hace falta un punto de corte: a
   los 56px el cartel queda justo debajo de cualquiera de las dos. La barra fina de progreso si se
   queda pegada al borde de arriba, que es su sitio. */
#nv-red-aviso,
#nv-red-salud {
  margin-top: 56px;
  display: none;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--nv-red-naranja);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  /* Dos sombras: la de siempre, que lo despega del fondo, y un halo del mismo naranja que lo hace
     mirar. Sin el halo, sobre una pantalla con tarjetas blancas el cartel se lee como un boton mas
     de la interfaz en vez de como un aviso. */
  box-shadow: 0 8px 24px rgba(10, 10, 10, .18), 0 0 0 4px var(--nv-red-naranja-suave);
}

#nv-red-aviso.is-on {
  display: flex;
}

/* Sobre naranja el boton va en blanco calado, no con el borde gris de la interfaz: cualquier gris
   sobre este fondo se lee como deshabilitado. */
#nv-red-aviso-accion {
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: inherit;
  padding: 2px 12px;
  cursor: pointer;
}

#nv-red-aviso-accion:hover {
  background: rgba(255, 255, 255, .24);
  border-color: #fff;
}

/* EL ESTADO DE FONDO. Sale cuando la mediana de los ultimos gestos pasa de un segundo, o sea que no
   es este clic el que va mal sino la red entera. Sirve para lo que pedia el reporte: enterarse de
   la lentitud ANTES de pulsar y no despues de dudar. Se apaga solo cuando la mediana se recupera. */
/* ES EL ESCALON BAJO DE LA MISMA ESCALERA, y por eso NO va relleno de naranja como el aviso. Este
   cartel puede quedarse puesto minutos enteros —dice como esta la red, no que algo este pasando
   ahora— y un relleno vivo permanente en la esquina superior deja de leerse a los dos minutos y
   estorba para siempre. Naranja al borde y a la letra, superficie normal debajo: se distingue de
   un vistazo y no compite con el aviso cuando salen los dos.

EL FONDO OPACO ES OBLIGATORIO, aunque el tinte sea translucido: este cartel flota sobre el
   contenido de la pantalla, y sin una superficie debajo se leeria el texto de la pagina a traves. */
html[data-nv-red="lenta"] #nv-red-salud {
  display: flex;
  background-color: var(--nv-surface, #fff);
  background-image: linear-gradient(var(--nv-red-naranja-suave), var(--nv-red-naranja-suave));
  border-color: var(--nv-red-naranja);
  color: var(--nv-red-naranja);
  box-shadow: 0 6px 18px rgba(10, 10, 10, .14);
}

/* Los dos no caben a la vez: mientras haya un gesto colgado manda el aviso concreto. */
#nv-red-aviso.is-on ~ #nv-red-salud {
  display: none !important;
}

/* Un cartel que avisa de que algo va mal no es sitio para una animacion que no se puede parar. */
@media (prefers-reduced-motion: reduce) {
  #nv-red-barra.is-on span {
    animation: none;
    width: 100%;
    transform: none;
  }
}

/* ==== Y EL BOTON QUE TODAVIA NO ESTA CONECTADO A NADA ====
   Entre que el HTML llega y el circuito engancha, el <nav> del shell es marcado muerto: la hoja
   «Mas», los grupos y «Salir» no responden porque no hay nadie escuchando. NoventaTapFx daba
   igualmente su pulso de 700 ms y lo apagaba, o sea que respondia «recibido» a un clic que no iba a
   ninguna parte — exactamente el «hace la pulsacion y no pasa nada» que se reporto.
   Mientras dura esa ventana el pulso NO se apaga: se queda esperando, que es la verdad. */
html[data-nv-interactivo="no"] .nv-tap-loading {
  animation: none !important;
  opacity: .55;
  cursor: progress;
}