/* IPOS: ajustes propios sobre Bootstrap 5. Todo lo demás son clases de Bootstrap. */
:root {
  --ipos-cobro: #0f6b4f;
}

body { background: #eef1f4; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.oculto { display: none !important; }

/* Barra superior */
.navbar .nav-link.active { box-shadow: inset 0 -3px 0 #7fd1b0; }
.navbar .empresa { max-width: 16rem; }

/* Botón de cobro con el verde del dinero que entra */
.btn-cobrar { --bs-btn-bg: var(--ipos-cobro); --bs-btn-border-color: var(--ipos-cobro); --bs-btn-hover-bg: #0a5039;
  --bs-btn-hover-border-color: #0a5039; --bs-btn-active-bg: #0a5039; --bs-btn-disabled-bg: var(--ipos-cobro);
  --bs-btn-disabled-border-color: var(--ipos-cobro); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-disabled-color: #fff; }
.tecla { font-size: .7rem; padding: 0 .3rem; border: 1px solid currentColor; border-radius: 3px; opacity: .75; margin-left: .25rem; }

/* Punto de venta */
.buscador { position: relative; }
.buscador .tecla { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.resultados { max-height: calc(100vh - 220px); overflow-y: auto; }
.resultado { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 7rem 6.5rem; gap: .75rem; align-items: center; }
.resultado .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket { position: sticky; top: 1rem; max-height: calc(100vh - 90px); }
.ticket .renglones { overflow-y: auto; min-height: 120px; }
.renglon .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.renglon .cantidad { width: 4.5rem; }
.renglon .descuento { width: 6rem; }
.renglon .lista { width: auto; }
.total-grande { font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.total-modal { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Caja */
.conteo .denominacion { width: 5.5rem; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.conteo .subtotal { width: 6.5rem; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.conteo input { text-align: right; }

/* Artículos */
.existencia-actual { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 991.98px) {
  .ticket { position: static; max-height: none; }
  .resultado { grid-template-columns: 6rem minmax(0, 1fr) 6rem; }
  .resultado .exist { display: none; }
}

/* Impresión (ticket de 80 mm y corte) */
.impresion { background: #fff; }
.papel-ticket { width: 72mm; margin: 0 auto; padding: 4mm 0; font-size: 12px; line-height: 1.35; color: #000; }
.papel-ticket .centro { text-align: center; }
.papel-ticket img { max-width: 48mm; max-height: 22mm; display: block; margin: 0 auto 2mm; }
.papel-ticket table { width: 100%; border-collapse: collapse; }
.papel-ticket td { padding: 1px 0; vertical-align: top; }
.papel-ticket .corte-linea { border-top: 1px dashed #000; margin: 2mm 0; }
.papel-ticket .gran-total { font-size: 16px; font-weight: 700; }
@media print {
  @page { margin: 0; }
  .acciones-impresion { display: none !important; }
}
.acceso-card { max-width: 380px; }
.min-w-0 { min-width: 0; }

/* ---------- Barra superior clara (como el sistema anterior) ---------- */
.barra-ipos .navbar-brand { font-size: 1.35rem; letter-spacing: -.01em; }
.barra-ipos .marca-mas { color: #37bc9b; font-weight: 800; margin-left: 1px; }
.barra-ipos .nav-link.active { box-shadow: inset 0 -3px 0 #37bc9b; color: #212529; }

/* ---------- Colores de botones del sistema anterior ---------- */
.btn-legacy-info, .btn-legacy-success, .btn-legacy-warning, .btn-legacy-danger {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  border-radius: 0; font-size: .85rem;
}
.btn-legacy-info { --bs-btn-bg: #3bafda; --bs-btn-border-color: #3bafda; --bs-btn-hover-bg: #2b9ec9; --bs-btn-hover-border-color: #2b9ec9; --bs-btn-active-bg: #2b9ec9; --bs-btn-disabled-bg: #3bafda; --bs-btn-disabled-border-color: #3bafda; }
.btn-legacy-success { --bs-btn-bg: #37bc9b; --bs-btn-border-color: #37bc9b; --bs-btn-hover-bg: #2aa486; --bs-btn-hover-border-color: #2aa486; --bs-btn-active-bg: #2aa486; --bs-btn-disabled-bg: #37bc9b; --bs-btn-disabled-border-color: #37bc9b; }
.btn-legacy-warning { --bs-btn-bg: #f6bb42; --bs-btn-border-color: #f6bb42; --bs-btn-hover-bg: #e6a92c; --bs-btn-hover-border-color: #e6a92c; --bs-btn-active-bg: #e6a92c; --bs-btn-disabled-bg: #f6bb42; --bs-btn-disabled-border-color: #f6bb42; }
.btn-legacy-danger { --bs-btn-bg: #da4453; --bs-btn-border-color: #da4453; --bs-btn-hover-bg: #c53242; --bs-btn-hover-border-color: #c53242; --bs-btn-active-bg: #c53242; --bs-btn-disabled-bg: #da4453; --bs-btn-disabled-border-color: #da4453; }
.btn-pie { --bs-btn-bg: #f2f2f2; --bs-btn-border-color: #555; --bs-btn-hover-bg: #e6e6e6; --bs-btn-disabled-bg: #f2f2f2; --bs-btn-disabled-border-color: #999; --bs-btn-disabled-color: #777; border-radius: 0; }

/* ---------- Pantalla de venta a pantalla completa ---------- */
body.pantalla-completa { height: 100vh; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.venta-principal { flex: 1; min-height: 0; min-width: 0; display: flex; }
.venta { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; border: 2px solid #222; border-top: 0; }
.venta-fila { display: flex; align-items: stretch; border-bottom: 2px solid #222; }
.venta-fila > * { flex: 0 0 auto; }
.venta-fila .btn { min-width: 10rem; }
.venta-input, .venta-select { border-radius: 0; border: 0; border-right: 2px solid #222; font-size: 1.05rem; height: 2.75rem; }
.venta-input:focus, .venta-select:focus { box-shadow: inset 0 0 0 2px #3bafda; }
.venta-cliente .campo-cliente { flex: 1 1 40%; min-width: 12rem; }
.venta-cliente .campo-cliente .venta-input { height: 100%; text-transform: uppercase; }
.venta-cliente .espacio { flex: 1 1 15%; border-right: 2px solid #222; }
.venta-cliente .venta-select { width: auto; min-width: 12rem; flex: 0 1 16rem; border-right: 0; font-size: .85rem; }
.venta-busqueda .campo-clave { flex: 1 1 20%; }
.venta-busqueda .campo-descripcion { flex: 1 1 30%; }
.venta-busqueda .campo-complementario { flex: 1 1 30%; }
.venta-busqueda .venta-input { height: 2.9rem; font-size: 1.15rem; }

.sugerencias, .resultados {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; max-height: 50vh; overflow-y: auto;
  background: #fff; border: 2px solid #222; box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.sugerencias .list-group-item { border-radius: 0; }
.resultados table { margin: 0; }
.resultados tr { cursor: pointer; }
.resultados tr.marcado td { background: #d9eefa; }

.venta-tabla { flex: 1; min-height: 0; min-width: 0; overflow: auto; }
.venta-tabla thead th { position: sticky; top: 0; background: #fff; z-index: 1; font-size: 1rem; font-weight: 700; white-space: nowrap; border-bottom: 1px solid #dee2e6; }
.venta-tabla td { font-size: 1rem; text-align: center; border-right: 1px solid #eef0f2; }
.venta-tabla td.col-descripcion, .venta-tabla th.col-descripcion { text-align: left; min-width: 18rem; }
.venta-tabla tr.seleccionado td { background: #fff7d6; }
.venta-tabla .miniatura { width: 42px; height: 42px; object-fit: contain; }
.venta-tabla .exist, .venta-tabla .cant { background: #8a00ff !important; color: #fff; font-weight: 600; }
.venta-tabla .exist.negativa { background: #da4453 !important; }
.venta-tabla .cant input { width: 4rem; background: transparent; color: #fff; border: 0; text-align: center; font-weight: 600; }
.venta-tabla .cant input:focus { outline: 2px solid #fff; }
.venta-tabla .desc input { width: 5.5rem; text-align: right; }
.venta-tabla .vacio td { color: #6c757d; padding: 3rem 1rem; border: 0; }

.venta-pie { display: grid; grid-template-columns: auto minmax(10rem, 22rem) 1fr; gap: 1rem; align-items: center; background: #e4e4e4; padding: .5rem; border-top: 2px solid #222; }
.botonera { display: grid; grid-template-columns: repeat(4, 7.5rem) 14.5rem; grid-template-rows: 5rem 5rem; gap: .4rem; }
.botonera .btn { border-radius: 0; font-size: 1.05rem; line-height: 1.15; }
.botonera .btn-grande { font-size: 1.15rem; }
.tipo-venta { text-align: center; }
.caja-tipo { border: 2px solid #555; font-size: 1.4rem; padding: .1rem 1rem; background: #f2f2f2; }
.totales { display: grid; grid-template-columns: 1fr auto; column-gap: 2rem; margin: 0; font-size: 1.75rem; line-height: 1.3; text-align: right; }
.totales dt { font-weight: 400; white-space: nowrap; }
.totales dd { margin: 0; min-width: 7rem; font-variant-numeric: tabular-nums; }

@media (max-width: 1599.98px) {
  .venta-pie { grid-template-columns: auto minmax(8rem, 14rem) auto; justify-content: space-between; }
  .botonera { grid-template-columns: repeat(4, 6.75rem) 12rem; grid-template-rows: 4.5rem 4.5rem; }
  .botonera .btn { font-size: .95rem; }
  .totales { font-size: 1.4rem; column-gap: 1.25rem; }
  .totales dd { min-width: 6rem; }
}
@media (max-width: 1199.98px) {
  body.pantalla-completa { height: auto; overflow: visible; }
  .venta-fila { flex-wrap: wrap; }
  .venta-fila .btn { flex: 1 1 auto; min-width: 8rem; min-height: 2.75rem; }
  .venta-fila .venta-input { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid #222; }
  .venta-cliente .venta-select { flex: 1 1 100%; }
  .venta-tabla { min-height: 40vh; }
  .botonera .btn:disabled { display: none; }
  .venta-pie { grid-template-columns: 1fr; }
  .botonera { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 3.5rem; }
  .totales { font-size: 1.35rem; }
}