/* Agregados propios del POS sobre el sistema "Feria".
   styles.css, tokens/ y components/components.css son el CSS de producción
   tal como llegó de Claude Design (ver docs/diseno-feria/) — no se editan
   a mano, para poder reemplazarlos si llega una versión nueva. Lo que el
   JS existente necesita y ese CSS no trae va acá. */

/* Toggle de visibilidad que usa todo el JS de static/pos/ (classList
   .add/.remove/.toggle("oculto")). El sistema Feria no lo define. */
.oculto {
  display: none !important;
}

/* Texto solo para lectores de pantalla (ej. el <th> de la columna de
   acciones, que no lleva título visible). */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Toast (#mensaje) de las pantallas ya migradas: lo arma cada
   mostrarMensaje() con las clases "toast mensaje-toast mensaje-*" (la
   .mensaje-toast la usan los tests). El look es el .toast del sistema;
   5s como antes (el diseño dice 2.6s): funcionalidad existente precede.
   En las pantallas sin migrar no aplica: su #mensaje no lleva .toast. */
#mensaje:empty {
  display: none;
}
#mensaje.toast svg {
  color: var(--ok);
}
#mensaje.mensaje-error svg {
  color: var(--error);
}
#mensaje.mensaje-pendiente svg {
  color: var(--aviso);
}

/* --- Marco (nav.js) ---
   El diseño arma la navegación con <button> (prototipo SPA); acá son
   páginas separadas, así que los accesos son <a href> reales. Mismo look
   que ".nav-movil button" de components.css. */

/* 100vh en celular incluye la barra del navegador y deja la nav inferior
   tapada; dvh es el alto visible real. */
@supports (height: 100dvh) {
  .app { height: 100dvh; }
}

/* Nombre de usuario largo: se corta con "…" en vez de desbordar el
   sidebar (el diseño lo pone con estilo inline, sin tope). */
.nav-usuario-datos { min-width: 0; }
.nav-usuario-nombre {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-movil a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--texto-2xs);
  font-weight: 600;
  color: var(--texto-3);
  text-decoration: none;
}
.nav-movil a[aria-current=page],
.nav-movil .nav-movil-activo {
  color: var(--acento-tinta);
}

/* Hoja "Más" (<768px): el resto de las páginas + "Actualizar app".
   Entra desde abajo como .hoja, pero a la altura de su contenido (.hoja
   es para la caja de Venta, casi pantalla completa). */
.hoja-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100% - 40px);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  color: var(--texto);
  border-radius: var(--radio) var(--radio) 0 0;
  overflow: hidden;
}
.hoja-nav-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 10px 16px;
  border-bottom: var(--borde-ancho-fino) solid var(--borde);
}
.hoja-nav-encabezado h2 {
  font-size: var(--texto-lg);
  font-weight: 600;
}
.hoja-nav-cerrar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--alto-control);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radio-sm);
  background: none;
  color: var(--texto-2);
  font-weight: 600;
  cursor: pointer;
}
.hoja-nav-cerrar:hover { background: var(--superficie-2); color: var(--texto); }
.hoja-nav .lista { overflow-y: auto; }
.fila-lista-etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hoja-nav .fila-lista {
  font-weight: 500;
  text-decoration: none;
}
a.fila-lista:hover { background: var(--fila-hover); color: var(--texto); }
.hoja-nav .fila-lista[aria-current=page] {
  color: var(--acento-tinta);
  font-weight: 600;
}

/* <form> que envuelve .drawer-cuerpo + .drawer-pie (Catálogo, Clientes):
   tiene que ocupar el alto del drawer para que el pie quede abajo. */
.drawer-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Botón primario deshabilitado. components.css (sin tocar, ver arriba) solo
   baja la opacidad en .btn:disabled: el primario conservaba el amarillo, el
   borde y la sombra cómic, y :hover le seguía cambiando el fondo — se leía
   como activo, sobre todo en oscuro (bug de Railway, 2026-09-26: "Aplicar"
   de Importar Excel con 0 filas). Deshabilitado se ve igual que un .btn
   común deshabilitado, en todas las pantallas. */
.btn-primario:disabled,
.btn-primario:disabled:hover {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borde-control);
  box-shadow: none;
  transform: none;
}