/* PIEZAS SUELTAS que usan varias pantallas.

   POR QUE ESTE ARCHIVO EXISTE
   ---------------------------
   Estos estilos venian en un archivo del sistema de Esteban que se
   llamaba  vehiculo.css . Por el nombre parecia todo del auto, y al
   armar el esqueleto se descarto entero.

   Fue un error: adentro habia TRES cosas genericas que no tienen nada
   que ver con vehiculos. El sintoma fue que el Punto de Venta, al
   cambiar a la vista en cuadros, se desarmaba; y que la cajita-con-lista
   que usan varias pantallas no tenia ningun estilo.

   LA LECCION, por si aparece otra igual: un archivo no se descarta por
   el nombre. Se mira que clases define y quien las usa. Hay una prueba
   que lo vigila ahora: pruebas/probar_estilos.py avisa si alguna
   pantalla usa una clase que ningun CSS define.

   Las tres piezas son:

       el lector de codigo de barras   (Ingreso de Mercaderia)
       la vista en cuadros             (Punto de Venta)
       el cuadro con lista que filtra  (varias, ver web/combo.js)
*/

/* --------------------------------- ingreso con lector de codigo de barras */
.ing-lector { padding: 18px; }
.ing-lector-cab {
  display: flex; align-items: center; gap: 9px; font-size: 12px;
  color: var(--text-muted); margin-bottom: 10px;
}
.ing-punto {
  width: 9px; height: 9px; border-radius: 50%; background: #1D9E75;
  animation: pu 1.6s ease-in-out infinite; flex: 0 0 auto;
}
.ing-input {
  font-size: 19px !important; padding: 15px 18px !important;
  letter-spacing: .02em; font-weight: 600;
}
.ing-ultimo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 12px; padding: 11px 14px; border-radius: 10px;
  background: #1D9E7514; border: 1px solid #1D9E7533; animation: fi .2s ease;
}
.ing-ultimo-cant { font-size: 20px; font-weight: 700; color: #1D9E75; }
.ing-cant {
  width: 100%; padding: 5px 7px !important; font-size: 12px !important;
  text-align: right;
}


/* ------------------------------- punto de venta: vista en cuadros */
.pos-vista { display: flex; gap: 3px; flex: 0 0 auto; }
.pos-vista .bt { padding: 7px 11px !important; font-size: 14px !important; }
.pos-lista.en-grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 9px; padding: 10px; align-content: start;
}
.pos-tarjeta {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px;
  padding: 11px; cursor: pointer; display: flex; flex-direction: column;
  gap: 7px; min-height: 112px; transition: all .13s;
}
.pos-tarjeta:hover {
  border-color: var(--marca, var(--border-strong));
  transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,.1);
}
.pos-tarjeta:active { transform: scale(.975); }
.pos-tarjeta.sin { opacity: .5; }
.pos-tarjeta-cat {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  align-self: flex-start; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%;
}
.pos-tarjeta-nom {
  font-size: 12.5px; line-height: 1.3; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pos-tarjeta-pie {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 6px; border-top: 1px solid var(--border); padding-top: 7px;
}
.pos-tarjeta-st { font-size: 10px; color: var(--text-muted); }
.pos-tarjeta-pr { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }



/* ------------------------------------ cuadro con lista que se filtra */
.combo { position: relative; }
.combo-input { width: 100%; padding-right: 30px !important; }
.combo-input:disabled { opacity: .45; cursor: not-allowed; }
.combo-x {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 3px 5px; border-radius: 5px; display: none;
}
.combo-x.visible { display: block; }
.combo-x:hover { background: var(--card-hover); color: var(--text); }
.combo-lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 10px; max-height: 320px; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.22); animation: fi .12s ease;
}
.combo-op {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 9px 13px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.combo-op:last-child { border-bottom: none; }
.combo-op.marcada { background: var(--marca-tinte, var(--card-hover)); }
.combo-op-tx { flex: 1; }
.combo-op-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.combo-mas { padding: 10px 13px; font-size: 11px; color: var(--text-muted); }


/* ------------------------------- el "ver mas" que parece un enlace

   Un boton que no parece un boton: texto subrayado con puntitos. Se usa
   donde ofrecer algo secundario con un boton de verdad seria gritar
   (ponerle nombre a una venta, ver el detalle de un faltante).

   Venia de  buscador.css  en el sistema de Esteban. Ese archivo era del
   buscador de filtros y aceite y no se copio, pero esta pieza no tiene
   nada que ver con autos. */
.bs-ver {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: underline dotted;
}
.bs-ver:hover { color: var(--text-dim); }

/* ---------------------------------- renglon de total en un detalle
   "Descuento ............ -$500". Etiqueta a la izquierda, numero a la
   derecha, y una raya finita arriba para que se lea como un subtotal. */
.li-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; font-size: 13px;
  border-top: 1px solid var(--border);
}
.li-total b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------- aviso de "este dato no va"
   Amarillo y chico. NO es un error -- el dato se guarda igual -- es un
   "ojo con esto". Un rojo acá seria mentir: nada esta roto. */
.warn-tel {
  color: var(--marca, #B5730C);
  display: block;
  margin-top: 4px;
  line-height: 1.45;
}
span.warn-tel { display: inline; margin-top: 0; cursor: help; }