/* Pantalla de Venta (index.html) sobre el sistema "Feria" — paso 3 del
   rediseño. Las piezas base (.venta, .venta-izq, .caja, .linea-carrito,
   .medios-pago, .producto, .barra-carrito, .aviso, .toast…) vienen de
   feria/components/components.css; acá va solo lo que el POS real
   necesita y el diseño no trae (precio libre, pagos parciales con
   promoción, ventas recientes, errores de sync, banner del service
   worker). El login tiene su propio login.css. */

/* --- Marco: Venta ocupa todo el alto, sin el padding de las demás
   páginas. Scrollean .venta-izq y .caja-cuerpo, no .app-main. --- */
.app[data-pagina="venta"] .app-main {
  overflow: hidden;
}
.app[data-pagina="venta"] .app-contenido {
  height: 100%;
}

.caja-titulo {
  margin: 0;
}
.caja-encabezado .badge {
  margin-left: auto;
}
.venta-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.venta-usuario {
  display: none;
}
.venta-herramientas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Buscador: Local (#input-codigo-barras) y Feria (#feria-buscador)
   usan el mismo .buscador-escaneo; solo uno se ve a la vez. --- */
#modo-local,
#feria-buscador-campo {
  display: block;
}
#modo-local.oculto,
#feria-buscador-campo.oculto {
  display: none;
}
#buscador-producto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.breadcrumb {
  font-size: var(--texto-sm);
  color: var(--texto-3);
}
.breadcrumb:empty {
  display: none;
}
#feria-categorias:empty {
  display: none;
}

/* Tarjeta de variante: la tarjeta entera es el botón (un toque suma 1).
   La de precio libre (modo Local) no: pide el precio antes de agregar. */
.producto-precio-libre {
  cursor: default;
}
.producto-precio-libre:hover {
  border-color: var(--borde);
}
.producto-precio-libre .producto-pie {
  flex-wrap: wrap;
}
.producto-precio-libre .input {
  flex: 1 1 110px;
  height: var(--alto-control-sm);
}
.dato-precio-libre {
  font-size: var(--texto-sm);
  color: var(--texto-3);
}

/* Productos de una categoría (paso intermedio antes de las variantes). */
#feria-resultados.lista {
  overflow: hidden;
}
.fila-lista-icono {
  color: var(--texto-3);
}

/* --- Errores de sincronización: aviso arriba del buscador --- */
.errores-sync-lista {
  margin-top: 8px;
}
.error-sync-item {
  flex-wrap: wrap;
}
.error-sync-info {
  flex: 1 1 220px;
  min-width: 0;
  font-size: var(--texto-sm);
  color: var(--texto-2);
}
.error-sync-info b {
  color: var(--texto);
}
.error-sync-acciones {
  display: flex;
  gap: 8px;
}

/* --- Ventas recientes (los dos modos) --- */
.venta-reciente {
  font-size: var(--texto-sm);
  justify-content: flex-start;
}
.venta-reciente .dato {
  color: var(--texto-3);
}

/* --- Caja: cliente --- */
.caja-cliente-bloque {
  margin: 0 20px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.caja-cliente-bloque .caja-cliente {
  margin: 0;
  cursor: default;
}
.caja-cliente-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buscador-cliente .input {
  border-style: dashed;
}
.buscador-cliente .input:focus {
  border-style: solid;
}
#venta-cliente-condicion-iva {
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  height: auto;
  padding: 3px 8px;
  align-self: flex-start;
}
.resultados-busqueda:empty {
  display: none;
}
.resultados-busqueda {
  margin-top: 0;
}
.alta-cliente {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: var(--borde-ancho-fino) solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
}
.alta-cliente .input {
  height: var(--alto-control-sm);
}
.link-apagado {
  color: var(--texto-3);
}

/* --- Caja: líneas del carrito --- */
.linea-carrito-acciones {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Stepper con el número editable: hoy se puede tipear una cantidad
   (el diseño solo tiene −/+). Mismo look que el <span> del diseño. */
.stepper input {
  width: 44px;
  height: 36px;
  border: 0;
  background: none;
  text-align: center;
  color: var(--texto);
  font-family: var(--fuente-dato);
  font-weight: 600;
  font-size: var(--texto-md);
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper input:focus {
  outline: none;
}
.stepper:focus-within {
  border-color: var(--foco);
  box-shadow: 0 0 0 3px var(--foco-anillo);
}
.stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.linea-carrito .carrito-precio-libre {
  width: 120px;
  height: var(--alto-control-sm);
  text-align: right;
}

/* --- Caja: pie (pagos) --- */
.caja-pie {
  overflow-y: auto;
  max-height: 62%;
}
.pago-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
/* Ancho fijo por la grilla; el nombre largo de la promoción se trunca
   con "…" en vez de ensanchar la fila (bug real 2026-09-07). */
.pago-linea .select-promocion {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pago-linea .input {
  height: var(--alto-control-sm);
  font-size: var(--texto-md);
}
.pago-linea-pie {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pago-unico-rotulo {
  font-size: var(--texto-md);
  color: var(--texto-2);
}
.pago-linea .input-monto-centavos {
  text-align: right;
}
.pagos-parciales {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pagos-parciales .pago-linea {
  padding-bottom: 12px;
  border-bottom: var(--borde-ancho-fino) solid var(--borde);
}
.check-ignorar {
  font-size: var(--texto-sm);
  color: var(--texto-2);
  align-items: center;
}
.check-ignorar input {
  margin: 0;
}
.pagos-resumen {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.caja-fila .dato {
  color: var(--texto);
  font-weight: 600;
}
.falta-cobrar {
  color: var(--aviso-tinta);
}
.caja-acciones .btn-primario {
  min-width: 0;
}
.caja-ocultar {
  display: none;
}

/* --- Banner de actualización del service worker (no modal) --- */
#banner-actualizacion {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: var(--radio);
  background: var(--toast-fondo);
  color: var(--toast-texto);
  font-size: var(--texto-md);
  font-weight: 500;
  box-shadow: var(--sombra-flotante);
}
#banner-actualizacion.oculto {
  display: none;
}

/* --- Celular: una columna, barra flotante del carrito y la caja como
   hoja desde abajo (.venta.caja-abierta). --- */
@media (max-width: 767px) {
  .venta-usuario {
    display: block;
    width: 100%;
    font-size: var(--texto-sm);
    color: var(--texto-3);
  }
  .venta-herramientas {
    width: 100%;
  }
  .buscador .tecla {
    display: none;
  }
  .buscador:has(.tecla) .input {
    padding-right: 12px;
  }
  .venta.caja-abierta > .caja {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 40px;
    height: auto;
    z-index: var(--z-drawer);
    border-left: 0;
    border-radius: var(--radio) var(--radio) 0 0;
    overflow-y: auto;
  }
  /* En la hoja scrollea la caja entera: el pie con pagos parciales no
     entra junto a las líneas en 700px de alto. */
  .venta.caja-abierta .caja-cuerpo {
    flex: none;
    overflow: visible;
  }
  .venta.caja-abierta > .barra-carrito {
    display: none;
  }
  .caja-ocultar {
    display: inline-flex;
  }
  .caja-encabezado .badge {
    display: none;
  }
  .caja-pie {
    max-height: none;
    overflow: visible;
  }
  #banner-actualizacion {
    bottom: calc(var(--nav-movil-alto) + 12px);
  }
}
@media (min-width: 768px) {
  .barra-carrito,
  #caja-overlay {
    display: none;
  }
}