/* Estructura de pantalla. Los colores y los botones vienen de base.css,
   que es la misma hoja de estilos que usa el programa original. */

.oculto { display: none !important; }

/* ---------------------------------------------------------------- login */
.pantalla-login {
  position: fixed; inset: 0; display: flex; align-items: center;
  justify-content: center; background: var(--bg); z-index: 50;
}
.login-caja { width: 380px; max-width: calc(100vw - 32px); text-align: center; padding: 28px; }
.login-logo img { max-height: 70px; max-width: 200px; object-fit: contain; }
.login-nombre { font-size: 22px; font-weight: 700; margin-top: 10px; }
.login-sub { font-size: 13px; color: var(--text-muted); margin: 4px 0 20px; }
.login-usuarios { display: flex; flex-direction: column; gap: 8px; }
.login-user {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--card); cursor: pointer; text-align: left; width: 100%;
  color: var(--text); font-size: 14px; transition: all .15s;
}
.login-user:hover { background: var(--card-hover); transform: translateY(-1px); }
.login-user .av {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--row-alt); font-weight: 700; font-size: 14px; flex: 0 0 auto;
}
.login-user .rol { font-size: 11px; color: var(--text-muted); }
.login-quien { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.pin-input { text-align: center; letter-spacing: 8px; font-size: 20px; }
.login-error { color: #E24B4A; font-size: 12px; min-height: 18px; margin: 8px 0; }
.fila-botones { display: flex; gap: 8px; }
.fila-botones .bt { flex: 1; }

/* ----------------------------------------------------------------- shell */
#app { display: flex; height: 100vh; overflow: hidden; }

.side {
  width: 238px; flex: 0 0 238px; background: var(--bg-elev);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
.side-head { display: flex; gap: 10px; align-items: center; padding: 14px; border-bottom: 1px solid var(--border); }
.side-logo img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
/* En oscuro el logo va sobre una base clara.
   El logo de un negocio esta dibujado para papel blanco, asi que casi
   siempre tiene azul oscuro o negro adentro. Sobre el fondo del menu en
   modo oscuro esa mitad desaparece: con el de PCJuegos se borraba la
   palabra "Juegos" y quedaba colgado el "Pc" rojo solo.
   Va aca y no en la imagen de cada cliente porque le pasa a todos: el
   dueno sube el logo que tiene, no uno preparado para fondo oscuro. */
:root:not([data-theme="light"]) .side-logo img { background: #FFFFFF; padding: 3px; }
.side-nombre { font-size: 14px; font-weight: 700; line-height: 1.2; }
.side-usuario { font-size: 11px; color: var(--text-muted); }
.side-nav { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }
.side-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: none; background: transparent; color: var(--text-dim); border-radius: 9px;
  font-size: 13px; cursor: pointer; text-align: left; transition: all .12s;
}
.side-item:hover { background: var(--card-hover); color: var(--text); }
.side-item.on { background: var(--card); color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand, #EF9F27); }
.side-item .ic { width: 18px; text-align: center; }
.side-sep { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); padding: 14px 10px 6px; }
.side-pie { padding: 10px; border-top: 1px solid var(--border); display: flex; gap: 6px; }
.side-pie .bt { flex: 1; padding: 8px; font-size: 12px; }

.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* La barra de arriba: titulo a la izquierda, y TODO lo demas junto a
   la derecha. Los dos botones (refrescar y partir la pantalla) estaban
   sueltos en el medio, como si se hubieran caido ahi. */
.top {
  height: 54px; flex: 0 0 54px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
  background: var(--bg-elev);
}
.top-titulo { flex: 0 0 auto; }
.top-relleno { flex: 1 1 auto; }
.top-titulo { font-size: 16px; font-weight: 700; }
.top #btnRefrescar { padding: 4px 9px; font-size: 13px; line-height: 1; }
.top-info { font-size: 12px; color: var(--text-muted); display: flex; gap: 14px; align-items: center; }
/* #vista es el marco y ya no scrollea: scrollea cada panel. Asi, con la
   su propio scroll. */
.vista { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.panel { flex: 1; min-width: 0; overflow-y: auto; padding: 18px; }
.lado-der { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel-cab {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); background: var(--row-alt);
}
.panel-cab .ip { flex: 1; min-width: 0; padding: 5px 8px; font-size: 12px; }
.panel-agarre {
  flex: none; width: 6px; cursor: col-resize; position: relative;
  background: var(--border); transition: background .12s;
}
.panel-agarre::before { content: ''; position: absolute; top: 0; bottom: 0;
  left: -5px; right: -5px; }
.panel-agarre:hover, .panel-agarre.agarrado { background: var(--marca); }

/* La animacion va en la pantalla y no en el marco: el marco se queda
   quieto y lo que entra y sale es el div de adentro. */
.pantalla { animation: fi .18s ease; }
.barra-vieja {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; padding: 9px 13px; font-size: 12.5px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--row-alt); color: var(--text-muted);
}

/* ----------------------------------------------------------- componentes */
.grilla { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

.kpi { padding: 14px 16px; }
.kpi .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.kpi .v { font-size: 23px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.kpi .s { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.seccion-tit { font-size: 13px; font-weight: 700; margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; }
.seccion-tit:first-child { margin-top: 0; }

table.tb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tb th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong); position: sticky; top: 0;
  background: var(--card); z-index: 1;
}
table.tb td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.tb tbody tr:hover { background: var(--card-hover); }
table.tb .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tb .acc { text-align: right; white-space: nowrap; }
.tabla-wrap { max-height: calc(100vh - 230px); overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }

.barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.barra .ip { width: auto; flex: 1; min-width: 180px; }
.barra .bt { white-space: nowrap; }
.chip {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--card); font-size: 12px; cursor: pointer; color: var(--text-dim);
}
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill.ok { background: #1D9E7522; color: #1D9E75; }
.pill.warn { background: #EF9F2722; color: #EF9F27; }
.pill.bad { background: #E24B4A22; color: #E24B4A; }
.pill.gris { background: var(--row-alt); color: var(--text-muted); }
.vacio { text-align: center; padding: 40px 16px; color: var(--text-muted); font-size: 13px; }
.muted { color: var(--text-muted); }
.mini { font-size: 11px; color: var(--text-muted); }
.plata { font-variant-numeric: tabular-nums; }
.pos { color: #1D9E75; } .neg { color: #E24B4A; }
.campo { margin-bottom: 11px; }
.campo > label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; }
.campo-fila { display: flex; gap: 10px; }
.campo-fila > .campo { flex: 1; }
textarea.ip { min-height: 68px; resize: vertical; font-size: 13px; }

/* -------------------------------------------------------- punto de venta */
/* El ancho del carrito lo elige Esteban y queda guardado. Va por
   variable y no por un numero fijo: la misma variable la escribe el
   agarre al arrastrar. */
.pos-cols { display: grid; grid-template-columns: 1fr 6px var(--ancho-carrito, 380px);
  gap: 8px; height: calc(100vh - 92px); }
.pos-izq, .pos-der { display: flex; flex-direction: column; min-height: 0; }
/* El agarre entre las dos columnas. Angosto a la vista, ancho al mouse:
   la zona que responde se estira con el ::before, asi no hay que
   acertarle a tres pixeles. */
.pos-agarre { position: relative; cursor: col-resize; border-radius: 3px;
  background: var(--border); transition: background .12s; }
.pos-agarre::before { content: ''; position: absolute; top: 0; bottom: 0;
  left: -5px; right: -5px; }
.pos-agarre:hover, .pos-agarre.agarrado { background: var(--marca); }
body.redimensionando { cursor: col-resize; user-select: none; }
.pos-lista { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.pos-prod {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.pos-prod:hover { background: var(--card-hover); }
.pos-prod .nom { flex: 1; font-size: 13px; }
.pos-prod .cat { font-size: 10px; color: var(--text-muted); }
.pos-prod .pr { font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-prod .st { font-size: 11px; color: var(--text-muted); width: 70px; text-align: right; }
.pos-prod.sin { opacity: .5; }
.carrito { flex: 1; overflow-y: auto; }
.carrito-item { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.carrito-item .nom { flex: 1; font-size: 12px; line-height: 1.3; }
.carrito-item .qty { flex: none; }
.carrito-item .tot { width: 86px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; }
.carrito-item .x { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; }
.carrito-item .x:hover { color: #E24B4A; }
.totales { border-top: 1px solid var(--border-strong); padding-top: 10px; margin-top: 6px; }
.totales .ln { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); padding: 2px 0; }
.totales .ln.big { font-size: 22px; font-weight: 700; color: var(--text); padding-top: 8px; }
.pagos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.pago-b { padding: 9px 6px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card); color: var(--text-dim); font-size: 12px; cursor: pointer; }
.pago-b.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.btn-cobrar { width: 100%; padding: 15px; font-size: 16px; font-weight: 700; }
.pago-rec { display: block; font-size: 10px; opacity: .8; font-weight: 600; }

/* Con cuanto paga y cuanto hay que darle de vuelto.
   El numero del vuelto es el mas grande de la ventana despues del
   total, a proposito: es el que se lee de reojo con el cliente
   esperando y la plata en la mano. Si falta, en rojo. */
.efectivo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-strong); }
.efectivo[hidden] { display: none; }
.ip-grande { font-size: 20px; font-weight: 600; padding: 12px; text-align: center; }
.vuelto {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--row-alt);
}
.vuelto span { font-size: 13px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .04em; }
.vuelto b { font-size: 28px; font-weight: 700; color: #1D9E75; }
.vuelto.falta b { color: #E24B4A; }

/* El precio de cada linea del carrito. Se ve como texto hasta que lo
   tocas, para que la columna no quede ruidosa; al tocarlo abre la
   ventana del precio. Si quedo distinto al de lista se marca y al lado
   se ve, tachado, cuanto valia: asi Esteban sabe de un vistazo en que
   renglon toco el precio sin tener que abrirlos uno por uno. */
.carrito-precio { display: flex; align-items: center; gap: 4px; }
.bt-precio { border: 1px solid transparent; background: transparent;
  color: inherit; font: inherit; padding: 1px 5px; border-radius: 5px;
  cursor: pointer; }
.bt-precio:hover { border-color: var(--border-strong); background: var(--row-alt); }
.bt-precio.tocado { color: var(--marca); font-weight: 700;
  border-color: var(--marca); }
.precio-antes { text-decoration: line-through; opacity: .55; }

/* El detalle del cartel de cobro, antes de confirmar. */
.cobro-det { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.cobro-det .ln { display: flex; justify-content: space-between; font-size: 13px;
  padding: 3px 0; }
.cobro-det .ln.big { font-size: 20px; font-weight: 700; border-top: 1px solid var(--border);
  margin-top: 7px; padding-top: 9px; }

/* ------------------------------------------------------------- trabajos */
.ot-card { padding: 14px; cursor: pointer; }
.ot-card:hover { background: var(--card-hover); }
.ot-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.ot-num { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.ot-pat { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.ot-auto { font-size: 12px; color: var(--text-dim); }
.ot-cli { font-size: 12px; margin-top: 6px; }
.ot-tot { font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* Una orden anulada se ve, pero se ve de lejos que no cuenta: apagada y
   con la patente y el total tachados. */
.ot-card.anulada { opacity: .62; }
.ot-card.anulada .ot-pat, .ot-card.anulada .ot-tot { text-decoration: line-through; }
.tarea-fila { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tarea-fila .nom { flex: 1; font-size: 13px; }
.tarea-fila .hs { width: 74px; }
.tarea-fila .cant { width: 62px; }
.tarea-fila .pr { width: 96px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tarea-fila input { padding: 5px 7px; font-size: 12px; text-align: center; width: 100%; }
/* El casillero del costo del repuesto comprado afuera, que va DENTRO del
   nombre y no en una columna propia. Sin esto se come el ancho entero:
   la regla de arriba pone width:100% a todo input de la fila. */
.tarea-fila .nom input.ip-costo {
  width: 78px; flex: none; padding: 3px 6px; font-size: 11px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.nota-interna {
  background: #EF9F2714; border: 1px solid #EF9F2733; border-radius: 9px;
  padding: 9px 11px; font-size: 11px; color: var(--text-dim); margin: 10px 0;
}

/* ----------------------------------------------------------- modal/aviso */
.modal-fondo {
  position: fixed; inset: 0; background: var(--overlay-bg); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal { width: 560px; max-width: 100%; max-height: calc(100vh - 60px); display: flex; flex-direction: column; padding: 0; }
.modal.ancho { width: 860px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.modal-titulo { font-size: 15px; font-weight: 700; }
.modal-x { background: none; border: none; color: var(--text-muted); font-size: 15px; cursor: pointer; }
.modal-x:hover { color: var(--text); }
.modal-cuerpo { padding: 18px; overflow-y: auto; }
.modal-pie { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* LOS AVISOS VAN ARRIBA DE TODO.

   Lo pidió Esteban en el audio del 30/10/2026: guardaba una orden sin
   patente ni cliente, el aviso de que falta cargarlos salía DETRAS de la
   ficha, y él no veía nada. Cerraba la ventana y recién ahí descubría
   los carteles apilados abajo. "Ese cartel me debería aparecer por
   delante de la ventana."

   La causa: la ficha es un modal (`.ov`, capa 100) y los avisos estaban
   en 90. El aviso que dice por qué NO se guardó no puede estar debajo de
   la ventana que no se guardó.

   9997 y no 101: arriba de los modales (`.ov`, 100) y del cajón del menú
   del celular (`.side`, 70), y justo abajo de las dos franjas de alarma
   —conexión (9999) y versión nueva (9998)—, que van arriba de la
   pantalla y de todos modos no se cruzan con esto. Un aviso de "guardé
   el repuesto" no le gana a "te quedaste sin internet".

   Las capas 100/200/99999 que trae base.css (`.ts`, `.rotate-overlay`,
   `.mobile-nav`) son del programa ANTERIOR: esas clases no las escribe
   ninguna pantalla de acá, así que no entran en la cuenta. */
.avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9997; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.aviso {
  padding: 11px 20px; border-radius: 10px; font-size: 13px; font-weight: 500;
  background: var(--card); border: 1px solid var(--border-strong); color: var(--text);
  box-shadow: 0 8px 28px rgba(0,0,0,.28); animation: ti .2s ease;
}
.aviso.ok { border-color: #1D9E7566; color: #1D9E75; }
.aviso.mal { border-color: #E24B4A66; color: #E24B4A; }

@media (max-width: 1000px) {
  .pos-cols { grid-template-columns: 1fr; height: auto; }
  .pos-agarre { display: none; }   /* en pantalla angosta van uno abajo del otro */
  /* Partir una pantalla de celular deja dos mitades donde no entra nada. */
  .panel-agarre { display: none; }
}

/* LA BARRA DE ICONOS: SOLO ENTRE 761 Y 1000, O SEA LA TABLET.
   Abajo de 760 el menu es un cajon que se abre con la hamburguesa (ver
   el bloque del telefono, al final del archivo) y ahi los textos TIENEN
   que verse.
   Antes estas dos reglas vivian en el bloque de arriba, sin piso, asi
   que tambien se aplicaban en el telefono: el cajon se abria con 60 px
   de ancho y los nombres escondidos -- una columna de iconos mudos. */
@media (min-width: 761px) and (max-width: 1000px) {
  .side { width: 60px; flex-basis: 60px; }
  /* .ni es el renglon del menu y .side-grupo el titulo de grupo. Antes
     esto decia ".side-item span.tx" y ".side-sep", que son clases del
     programa ANTERIOR y no existen: la barra se achicaba a 60 px pero
     los textos NO se escondian, asi que en una tablet quedaban
     aplastados contra el borde. Medido en el navegador a 800 px. */
  .ni .tx, .side-nombre, .side-usuario, .side-grupo { display: none; }
  .side-buscar, .side-pie { display: none; }
  .side-sub { margin-left: 0; padding-left: 0; border-left: none; }
}

/* ---------------------------------------------- maqueta del QR del auto */
.qr-cols { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
.qr-rotulo { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; }

.telefono {
  width: 330px; border: 10px solid #222; border-radius: 30px; background: #222;
  box-shadow: 0 14px 40px rgba(0,0,0,.28); overflow: hidden;
}
.telefono .pantalla {
  background: var(--bg); height: 580px; overflow-y: auto; padding: 16px 14px 28px;
  border-radius: 21px;
}
.telefono .pantalla::-webkit-scrollbar { width: 5px; }

.cl-taller { text-align: center; padding: 4px 0 14px; }
.cl-taller img { max-height: 46px; max-width: 150px; object-fit: contain; }
.cl-taller .nom { font-size: 15px; font-weight: 700; margin-top: 6px; }
.cl-taller .dat { font-size: 11px; color: var(--text-muted); }
.cl-chapa {
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 13px;
  padding: 15px; text-align: center;
}
.cl-chapa .pat { font-size: 26px; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.cl-chapa .auto { font-size: 13px; margin-top: 5px; }
.cl-chapa .sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.cl-prox {
  margin-top: 10px; background: #EF9F2714; border: 1px solid #EF9F2733;
  border-radius: 10px; padding: 10px 12px; font-size: 12px;
}
.cl-prox b { display: block; font-size: 9px; text-transform: uppercase;
  letter-spacing: .07em; color: #EF9F27; margin-bottom: 2px; }
.cl-tit {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); font-weight: 700; margin: 18px 0 8px;
}
.cl-visita {
  background: var(--card); border: 1px solid var(--border); border-radius: 11px;
  padding: 12px; margin-bottom: 8px;
}
.cl-visita .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cl-visita .fecha { font-size: 13px; font-weight: 700; }
.cl-visita .km { font-size: 11px; color: var(--text-muted); }
.cl-visita .total { font-size: 14px; font-weight: 700; white-space: nowrap; }
.cl-visita ul { list-style: none; margin: 9px 0 0; padding: 0; }
.cl-visita li { font-size: 12px; padding: 3px 0 3px 16px; position: relative; line-height: 1.3; }
.cl-visita li:before { content: '✓'; position: absolute; left: 0; color: #1D9E75; font-size: 10px; }
.cl-visita li.rep:before { content: '•'; color: var(--text-muted); }
.cl-pie { text-align: center; font-size: 10px; color: var(--text-faint); margin-top: 18px; line-height: 1.6; }

.qr-taller { min-height: 300px; }
.qr-candado { text-align: center; padding: 34px 26px; }
.caja-pin { display: flex; gap: 8px; max-width: 230px; margin: 0 auto; }
.caja-pin .ip { flex: 1; }
.err { color: #E24B4A; font-size: 12px; margin-top: 9px; min-height: 17px; }
.qr-abierto {
  background: #534AB714; border: 1px solid #534AB733; color: #534AB7;
  border-radius: 9px; padding: 8px 12px; font-size: 12px; font-weight: 600; margin-bottom: 12px;
}
.qr-ot { border: 1px solid var(--border); border-radius: 11px; padding: 13px; margin-bottom: 9px; }
.qr-ot .cab { display: flex; justify-content: space-between; align-items: start;
  gap: 10px; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.qr-ot .total { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qr-ot .ln { display: flex; justify-content: space-between; font-size: 12px;
  padding: 3px 0; color: var(--text-dim); }
.qr-ot .ln span:last-child { font-variant-numeric: tabular-nums; }
.qr-ot .ln.big { font-size: 14px; font-weight: 700; color: var(--text);
  border-top: 1px solid var(--border); margin-top: 5px; padding-top: 7px; }
.qr-ot .obs { font-size: 12px; color: var(--text-dim); font-style: italic; margin-top: 8px; }

@media (max-width: 1100px) { .qr-cols { grid-template-columns: 1fr; } }

.qr-cabeza { display: flex; gap: 20px; align-items: center; margin-bottom: 16px; padding: 18px; }
.qr-img { text-align: center; flex: 0 0 auto; }
.qr-img img { width: 128px; height: 128px; display: block; background: #fff;
  padding: 6px; border-radius: 8px; border: 1px solid var(--border); }
.qr-pat { font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-top: 6px; }
.qr-texto { flex: 1; }
.qr-t1 { font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.qr-t2 { font-size: 12px; color: var(--text-dim); line-height: 1.55; margin-bottom: 6px; }
.qr-dest { font-size: 11px; color: var(--text-muted); margin-top: 9px;
  border-top: 1px solid var(--border); padding-top: 9px; line-height: 1.5; }
.qr-dest code { background: var(--row-alt); padding: 1px 6px; border-radius: 4px;
  font-family: 'Cascadia Mono','Consolas',monospace; font-size: 10px; }
@media (max-width: 760px) { .qr-cabeza { flex-direction: column; text-align: center; } }

/* ===================================================================
   Cáscara nueva: pestañas arriba, menú con grupos, y el pulido que
   tiene el programa original (desenfoque detrás de los diálogos,
   animaciones de entrada, botones de cantidad).
   .ov .ml .ni .bg .qb .bt-compact salen de base.css, que es la misma
   hoja que usa el programa de ellos.
   =================================================================== */

.side-ident { min-width: 0; }
.side-buscar { padding: 0 10px 8px; display: flex; gap: 6px; align-items: center; }
.side-buscar .ip { padding: 7px 11px; font-size: 12px; flex: 1; min-width: 0; }
.side-buscar .bt { flex: none; padding: 7px 9px; font-size: 13px; line-height: 1; }
.side-buscar .bt.on { background: var(--marca); color: #000; border-color: var(--marca); }

/* El menú en modo ordenar. Cada bloque con sus dos flechas; no se puede
   navegar mientras tanto, a propósito: el modo se ve y se sale de él. */
.ord-cab { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); padding: 6px 9px 8px; }
.ord-fila { display: flex; align-items: center; gap: 4px; padding: 5px 6px;
  border-radius: 8px; font-size: 12.5px; }
.ord-fila:hover { background: var(--row-alt); }
.ord-fila .tx { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ord-fila .qb { width: 22px; height: 22px; flex: none; padding: 0; line-height: 1;
  font-size: 12px; cursor: pointer; border-radius: 6px;
  background: var(--input-bg); border: 1px solid var(--border-strong);
  color: var(--text); font-family: inherit; }
.ord-fila .qb:hover:not(:disabled) { background: var(--card-hover); }
.ord-fila .qb:disabled { opacity: .3; cursor: default; }
.ord-pie { display: flex; gap: 6px; padding: 10px 6px 0; }
.ord-pie .bt { flex: 1; padding: 7px; font-size: 12px; }

/* El menu scrollea, y al cortarse justo a la mitad de un renglon
   parecia un cuadro mal acomodado. El degrade de arriba y abajo lo
   dice sin palabras: hay mas, segui bajando. */
.side-nav {
  padding: 4px 8px 16px;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 12px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 12px, #000 calc(100% - 14px), transparent 100%);
}
/* El titulo de seccion. "CHEQUES Y BANCOS" con el espaciado de antes
   entraba en tres renglones, con la Y sola en el medio: feo y encima
   movia de lugar los iconos. Menos espaciado entre letras y los
   renglones juntos: entra en uno o, cuando no, en dos prolijos. */
.side-grupo {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-top: 6px; border: none; background: transparent;
  color: var(--text-faint); border-radius: 9px; cursor: pointer;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1.25; font-family: inherit;
  transition: color .12s;
}
.side-grupo:hover { color: var(--text-muted); }
.side-grupo .tx { flex: 1; text-align: left; }
.side-grupo .fl {
  font-size: 13px; line-height: 1; display: inline-block;
  transition: transform .15s ease; color: var(--text-faint);
}
.side-grupo.abierto .fl { transform: rotate(90deg); }
.side-sub { padding-left: 6px; border-left: 1px solid var(--border); margin-left: 13px; }

.ni { font-size: 12.5px; padding: 7px 9px; gap: 8px; }
.ni .ic { width: 18px; text-align: center; flex: 0 0 18px; }
.ni .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni.on {
  background: var(--card); color: var(--text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand, #EF9F27);
}

/* ------------------------------------------------------------ pestañas */
.tabs {
  display: flex; gap: 3px; padding: 7px 10px 0; background: var(--bg-elev);
  border-bottom: 1px solid var(--border); overflow-x: auto; flex: 0 0 auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { height: 0; }
.tab {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 9px 9px 0 0; font-size: 12px; cursor: pointer;
  color: var(--text-muted); white-space: nowrap; max-width: 190px;
  transition: background .12s, color .12s;
}
.tab:hover { background: var(--card-hover); color: var(--text-dim); }
.tab.on {
  background: var(--bg); border-color: var(--border); color: var(--text);
  font-weight: 600; margin-bottom: -1px; padding-bottom: 8px;
}
.tab .tx { overflow: hidden; text-overflow: ellipsis; }
.tab .x {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 10px; padding: 1px 3px; border-radius: 4px; line-height: 1;
}
.tab .x:hover { background: var(--border-strong); color: var(--text); }
.tab .pin { font-size: 9px; opacity: .6; }
.tab.fija { padding-right: 8px; }

/* -------------------------------------------------- diálogos y detalles */
.ov { padding: 20px; }
.ml { width: 560px; max-width: 100%; display: flex; flex-direction: column; padding: 0; }
.ml.ancho { width: 880px; }
.ml.gigante { width: 1120px; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 17px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.modal-titulo { font-size: 15px; font-weight: 700; }
.modal-x { background: none; border: none; color: var(--text-muted);
  font-size: 15px; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.modal-x:hover { background: var(--card-hover); color: var(--text); }
.modal-cuerpo { padding: 22px; overflow-y: auto; }
.modal-pie {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}

.bg.ok   { background: #1D9E7522; color: #1D9E75; }
.bg.warn { background: #EF9F2722; color: #EF9F27; }
.bg.bad  { background: #E24B4A22; color: #E24B4A; }
.bg.gris { background: var(--row-alt); color: var(--text-muted); }

.cd { animation: fi .22s ease; }
.gc:hover { background: var(--card-hover); transform: translateY(-1px); }

/* Botones de cantidad, como los del original. Los usan el carrito de
   Punto de Venta y el flotante: es el mismo gesto, tiene que verse
   igual en los dos lados. */
.qty-grupo { display: flex; align-items: center; gap: 4px; }
.qty-grupo .qb {
  width: 22px; height: 22px; flex: none; padding: 0; line-height: 1;
  font-size: 14px; cursor: pointer; border-radius: 6px;
  background: var(--input-bg); border: 1px solid var(--border-strong);
  color: var(--text); font-family: inherit;
}
.qty-grupo .qb:hover { background: var(--card-hover); border-color: var(--text-muted); }
.qty-grupo .qb:active { transform: scale(.92); }
.qty-grupo input {
  width: 54px; text-align: center; padding: 5px 2px; font-size: 12px;
  background: var(--input-bg); border: 1px solid var(--border-strong);
  border-radius: 6px; color: var(--text); font-family: inherit;
}
.qty-grupo input::-webkit-outer-spin-button,
.qty-grupo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.avisos { bottom: 24px; }
.aviso { animation: ti .25s ease; }

/* las filas de tabla entran escalonadas, como en el original */
table.tb tbody tr { animation: fi .2s ease backwards; }
table.tb tbody tr:nth-child(1) { animation-delay: .01s; }
table.tb tbody tr:nth-child(2) { animation-delay: .02s; }
table.tb tbody tr:nth-child(3) { animation-delay: .03s; }
table.tb tbody tr:nth-child(4) { animation-delay: .04s; }
table.tb tbody tr:nth-child(5) { animation-delay: .05s; }
table.tb tbody tr:nth-child(6) { animation-delay: .06s; }
table.tb tbody tr:nth-child(7) { animation-delay: .07s; }
table.tb tbody tr:nth-child(8) { animation-delay: .08s; }

.seccion-tit .bg { font-weight: 600; }
/* Una barra que es solo filtros: pueden ser muchos y bajan de renglón
   sin empujar los botones de acción. */
.barra-filtros { flex-wrap: wrap; gap: 5px; }
.estado-tabs { display: flex; gap: 4px; }

/* ===================================================== carrito flotante ===
   La venta en curso, visible desde cualquier pantalla. Se agarra de la
   barra de arriba y se lleva a donde moleste menos; la X la esconde sin
   borrar nada. En Punto de Venta no aparece: ahi esta el de verdad. */
.cf {
  position: fixed; right: 18px; bottom: 18px; width: 350px; z-index: 60;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.26);
  display: flex; flex-direction: column; max-height: 62vh; overflow: hidden;
}
.cf.oculto { display: none; }
.cf-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 12px; cursor: move; user-select: none;
  background: var(--marca); color: #000; font-size: 12px; font-weight: 700;
}
.cf-barra .x {
  background: none; border: 0; cursor: pointer; font-size: 13px;
  color: #000; opacity: .65; padding: 0 2px;
}
.cf-barra .x:hover { opacity: 1; }
.cf-items { overflow-y: auto; padding: 4px 0; }
.cf-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-bottom: 1px solid var(--border);
}
.cf-item:last-child { border-bottom: 0; }
.cf-nom { flex: 1; min-width: 0; font-size: 12px; line-height: 1.3; }
.cf-nom .tx { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.cf-nom .mini { font-size: 11px; white-space: nowrap; }
.cf-tot { font-size: 12px; font-weight: 600; white-space: nowrap; }
/* En el flotante hay menos lugar, asi que la casilla va mas angosta.
   Los botones son los mismos. */
.cf .qty-grupo input { width: 42px; }
.cf-item .x {
  background: none; border: 0; cursor: pointer; color: var(--text-faint);
  font-size: 12px; padding: 0 2px;
}
.cf-item .x:hover { color: var(--text); }
.cf-pie { padding: 10px 12px; border-top: 1px solid var(--border-strong); }
.cf-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 9px; font-size: 13px;
}
.cf-total b { font-size: 17px; }
.cf-pie .bt { width: 100%; }

/* Vaciar y Cobrar en una fila. El 100% de arriba los apilaba uno sobre
   el otro y el pie quedaba el doble de alto, tapando media pantalla.
   Vaciar se queda con lo que necesita y Cobrar con el resto. */
.cf-acciones { display: flex; gap: 6px; align-items: stretch; }
.cf-acciones .bt { width: auto; }
.cf-acciones #cfVaciar { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
.cf-acciones #cfIr { flex: 1 1 auto; }

/* La vista previa del ticket. Fondo blanco siempre, aunque el programa
   este en oscuro: el papel es blanco. */
.ticket-prev {
  background: #e9e9e4; border-radius: 8px; padding: 12px;
  display: flex; justify-content: center; overflow-x: auto;
}
.ticket-hoja {
  background: #fff; color: #000; padding: 10px 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  /* sin esto el flex lo encoge y los 58 y los 80 mm se ven igual */
  flex: 0 0 auto;
}
.ticket-hoja h1 { font-size: 14px; margin: 0; text-align: center; }
.ticket-hoja .c { text-align: center; }
.ticket-hoja .r { text-align: right; }
.ticket-hoja .hr { border-top: 1px dashed #000; margin: 5px 0; }
.ticket-hoja table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ticket-hoja td { padding: 1px 0; vertical-align: top; }
.ticket-hoja .tot { font-size: 16px; font-weight: 700; }
.ticket-hoja .mini { font-size: 9px; color: #333; }
.ticket-hoja img.logo {
  max-height: 46px; object-fit: contain; display: block; margin: 0 auto 4px;
}

/* La lista de clientes, al costado de su ficha. */
.cl2-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  cursor: pointer; border-left: 3px solid transparent;
}
.cl2-item:hover { background: var(--card-hover); }
.cl2-item.on { background: var(--card-hover); border-left-color: var(--marca); }
.cl2-nom { flex: 1; min-width: 0; font-size: 13px; }
.cl2-nom .mini { font-size: 11px; }

/* Las dos lineas de "cuando volver", una por service configurado. */
.cl-prox .prox-ln { font-size: 12px; line-height: 1.5; }
.cl-prox .prox-nota { font-size: 10px; opacity: .7; margin-top: 4px; }

/* ------------------------------------------------- cartel de conexion

   Tiene que verse SI o SI: franja entera arriba de todo, no un puntito
   al costado. El que esta cobrando con el cliente adelante no mira los
   rincones de la pantalla. */
.barra-conexion {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 11px 16px;
  text-align: center;
  font: 600 13.5px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.barra-conexion.mal  { background: #c0392b; }
.barra-conexion.bien { background: #1e8e3e; }
/* El espejo no es un error ni una alarma: es un estado normal. Azul,
   no rojo. El rojo queda para cuando hace rato que no llega la copia,
   que ahi si hay algo para mirar. */
.barra-conexion.espejo { background: #1d5e8c; }
.barra-conexion.oculto { display: none; }

/* "HAY UNA VERSION NUEVA, RECARGA."

   Abajo de la franja de conexion, no encima: si ademas se quedo sin
   internet, eso importa mas.

   No es roja ni salta: una version nueva no es un problema, es una
   mejora esperando. Y NUNCA recarga sola -- puede estar en medio de
   una venta -- asi que hay un boton y lo aprieta cuando puede. */
.barra-version {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9998;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 9px 16px;
  font: 600 13px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #fff;
  background: #1d5e8c;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.barra-conexion:not(.oculto) ~ .barra-version { top: 42px; }
.barra-version.oculto { display: none; }
.barra-version button {
  font: inherit;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
}
.barra-version button:hover { background: rgba(255, 255, 255, .28); }
.barra-version .despues {
  border-color: transparent;
  background: none;
  text-decoration: underline;
  font-weight: 400;
}

/* Arrastrar para ordenar. El ⠿ es el agarre: se ve que de ahi se tira. */
.ord-ayuda { font-size: 11px; color: var(--text-faint); padding: 0 9px 8px; }
.ord-agarre {
  flex: none; width: 16px; text-align: center; cursor: grab;
  color: var(--text-faint); font-size: 13px; line-height: 1;
  touch-action: none;   /* que al arrastrar no scrollee la pagina */
}
.ord-agarre:active { cursor: grabbing; }
.ord-fila.arrastrando {
  background: var(--card-hover);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
body.ordenando { user-select: none; cursor: grabbing; }

/* Los botones para ordenar una tabla de informes. Chicos y arriba de la
   tabla: son una forma de mirar, no una configuracion. */
.in-orden { display: flex; align-items: center; gap: 6px; margin: -4px 0 8px; flex-wrap: wrap; }
.in-orden .mini { margin-right: 2px; }
.in-orden .bt { padding: 3px 9px; font-size: 11.5px; }
.in-orden .bt.on { background: var(--marca); color: #000; border-color: var(--marca); }

/* Encabezado de tabla que ordena. Se ve que se puede tocar y la flecha
   dice por cual columna esta ordenada y para donde. */
.tb th.con-orden { padding: 0; }
.th-ord {
  display: flex; align-items: center; gap: 5px; width: 100%;
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: inherit;
  text-transform: uppercase; color: var(--text-muted); text-align: left;
}
.tb th.num .th-ord { justify-content: flex-end; }
.th-ord:hover { color: var(--text); }
.th-ord.on { color: var(--text); }
.th-ord .fl { font-size: 9px; }

/* El elegidor de iconos de los rubros. */
.ic-boton {
  width: 34px; height: 30px; border-radius: 8px; cursor: pointer;
  background: var(--input-bg); border: 1px solid var(--border-strong);
  font-size: 17px; line-height: 1; padding: 0;
}
.ic-boton:hover { border-color: var(--marca); }
.ic-tit {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; margin: 12px 0 6px;
}
.ic-grilla { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-uno {
  width: 40px; height: 36px; border-radius: 9px; cursor: pointer;
  background: var(--input-bg); border: 1px solid var(--border);
  font-size: 19px; line-height: 1; padding: 0;
}
.ic-uno:hover { border-color: var(--marca); background: var(--card-hover); }
.ic-uno.on { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }

/* Los filtros del historial del cliente: por cual auto y de cuando a
   cuando. Van a la vista, arriba de la lista: un filtro escondido hace
   creer que no hay nada cuando en realidad esta recortado. */
.hs-filtros {
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 11px; margin-bottom: 4px;
  background: var(--row-alt); border-radius: 9px;
}
.hs-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hs-fila > .mini { min-width: 48px; }
.hs-fila .bt { padding: 3px 9px; font-size: 11.5px; }
.hs-fila .bt.on { background: var(--marca); color: #000; border-color: var(--marca); }
.hs-fecha { padding: 3px 7px; font-size: 12px; width: 140px; }

/* El carrito minimizado: una pestanita con lo que lleva.

   Lo pidio Esteban porque la cruz lo escondia del todo y despues no
   habia forma de volver a abrirlo sin agregar otro articulo. */
.cf.cf-chico {
  width: auto;
  max-height: none;
  border-radius: 999px;
  overflow: visible;
}
.cf-botones { display: flex; gap: 2px; align-items: center; }
.cf-abrir {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 11px;
  background: var(--marca); color: #000;
  border: 0; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cf-globo {
  background: rgba(0, 0, 0, .78); color: #fff;
  min-width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; padding: 0 5px;
}
.cf-flecha { opacity: .6; font-size: 11px; }

/* ===================================== el cuadro de cobrar, compacto

   Esteban lo pidio asi: "toda la misma data pero mas chiquito", porque
   tenia que bajar con la barra para llegar al boton de cobrar. El
   ajuste va en UNA fila -- signo, unidad, numero y los atajos -- en vez
   de dos bloques separados. */
.cobro-aj { margin-top: 12px; }
.cobro-aj > label {
  display: block;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 5px;
}
.cobro-aj-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cobro-aj-fila .ip { height: 34px; }
.cobro-aj-fila #cbTipo { width: 62px; padding: 0 6px; }
.cobro-aj-fila #cbVal { width: 96px; }
.cobro-aj-fila #cbRec { flex: 1 1 130px; min-width: 110px; }
.cobro-signo { display: flex; gap: 3px; }
.cobro-signo .chip { min-width: 30px; font-weight: 700; }
.cobro-nombre {
  display: block;
  margin: 10px 0 0;
  text-align: left;
}

/* ======================================= subir la lista del proveedor */
.im-muestra { font-size: 11.5px; }
.im-muestra th {
  font-size: 10.5px;
  white-space: nowrap;
  color: var(--text-muted);
}
.im-muestra td {
  white-space: nowrap;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El resumen de antes de aplicar. Son los numeros que hay que mirar y
   por eso van grandes: cuantos cambian, cuantos suben y cuantos no
   estaban. */
.im-cuenta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 0 4px;
}
.im-cuenta > div { display: flex; flex-direction: column; }
.im-cuenta b { font-size: 21px; line-height: 1.1; }
.im-cuenta span { font-size: 11.5px; color: var(--text-muted); }
.im-sin {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.im-sin > span:first-child {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--text-muted);
  min-width: 90px;
}
.im-sin b { margin-left: auto; white-space: nowrap; }

/* ================================================ cheques que se vencen

   Lo pidio Esteban: "que me salte una alarma si se esta por vencer un
   cheque para que lo deposite". Va arriba de la pantalla de cheques y
   no como un cartel al entrar al sistema: un cartel que sale todos los
   dias se ignora a la semana, y entonces no sirve el dia que importa. */
.ch-aviso {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 11px 15px;
  border-radius: 9px;
  background: #fdf3e2;
  border: 1px solid #f0ddb8;
  color: #7a4e00;
  font-size: 13.5px;
}
.ch-aviso-tarde { background: #fbecea; border-color: #f0c8c2; color: #8c2b21; }
.ch-aviso span { opacity: .85; }
.ch-aviso .bt { margin-left: auto; }
/* El renglon del que se vence, marcado en la tabla: el aviso dice
   cuantos, la fila dice cual. */
tr.ch-fila-vence > td:first-child { box-shadow: inset 3px 0 0 #a86a00; }

/* Las ultimas compras, en Ingreso de mercaderia. */
.ig-compra {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ig-compra:last-child { border-bottom: 0; }
.ig-compra-tit { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ig-papel {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--marca-texto, #1d5e8c);
  text-decoration: none;
}
.ig-papel:hover { text-decoration: underline; }

/* Un cuadro para explicar algo adentro de una ventana: por que falta
   un paso, que tiene que traer el, que va a pasar con lo que carga.
   Mismo tono que el aviso de los cheques, pero en bloque. */
.cartel {
  padding: 11px 14px;
  border-radius: 9px;
  background: #fdf3e2;
  border: 1px solid #f0ddb8;
  color: #7a4e00;
  font-size: 13px;
  line-height: 1.6;
}

/* ============================================ lo que dice el Banco Central

   Va en la ficha del cheque, al lado del CUIT. Lo pidio Esteban: "asi
   se hace para ver si agarras o no agarras un cheque de alguien". */
.bc-fila { display: flex; gap: 7px; align-items: stretch; }
.bc-fila .ip { flex: 1; }
.bc-ver { white-space: nowrap; padding: 0 13px; }

.bc-caja {
  margin: 10px 0 2px;
  padding: 10px 13px;
  border-radius: 9px;
  border: 1px solid;
  font-size: 13px;
  line-height: 1.55;
}
.bc-verde    { background: #eaf6ed; border-color: #bcdfc6; color: #1b5e2a; }
.bc-amarillo { background: #fdf3e2; border-color: #f0ddb8; color: #7a4e00; }
.bc-rojo     { background: #fbecea; border-color: #f0c8c2; color: #8c2b21; }
.bc-gris     { background: var(--fondo2, #f4f5f7); border-color: var(--linea, #e4e7ec);
               color: var(--tenue, #6b7280); }
.bc-tit { font-size: 14px; }
.bc-frase { opacity: .9; }
.bc-pie { margin-top: 6px; font-size: 11.5px; opacity: .75; }

.bc-det { margin-top: 7px; font-size: 12.5px; }
.bc-det summary { cursor: pointer; opacity: .8; }
.bc-ent {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.bc-ent > span:nth-child(2) { flex: 1; }
.bc-monto { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* El numero de situacion del Banco Central: del 1 (paga en termino) al
   6 (irrecuperable). Se pinta porque el numero solo no dice nada. */
.bc-sit {
  min-width: 18px;
  text-align: center;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, .08);
}
.bc-sit1 { background: #bcdfc6; color: #14421f; }
.bc-sit2 { background: #f0ddb8; color: #6b4400; }
.bc-sit3, .bc-sit4, .bc-sit5, .bc-sit6 { background: #f0c8c2; color: #7a2319; }

/* El puntito del Banco Central en la lista de cheques. Solo sale si
   hay algo que mirar; el que esta al dia no lleva nada. */
.bc-punto { font-size: 11px; vertical-align: 1px; cursor: help; }
.bc-punto-amarillo { color: #c98a00; }
.bc-punto-rojo { color: #c0392b; }

/* El "+ Nuevo rubro" cargando un articulo: el campo se transforma en
   un cuadrito para escribir, en vez de abrir otra ventana encima. */
.rubro-nuevo { display: flex; gap: 6px; }
.rubro-nuevo .ip { flex: 1; }
.rubro-nuevo .bt { padding: 0 11px; }

/* El link a la guia, arriba de la Ayuda. Es una tarjeta y no un boton:
   lo que ofrece es para leer, no una accion. */
.guia-link {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--marca, #1d5e8c);
}
.guia-link:hover { background: var(--fondo2, #f4f5f7); }
.guia-ic { font-size: 30px; line-height: 1; }
.guia-tit { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.guia-fl { margin-left: auto; font-size: 24px; opacity: .4; }

/* Los dos botones de cada fila de "Para service": avisarle y cargarle
   la orden. En el celular se ponen uno arriba del otro solos. */
.sv-botones { display: flex; flex-direction: column; gap: 6px; }
.sv-botones .bt { white-space: nowrap; }
@media (max-width: 700px) {
  .sv-botones { flex-direction: row; }
}

/* ------------------------------------------------- el control de numeros
   Lo pidio Esteban cuando sumo las ganancias por rubro y no le dio la
   ganancia de arriba (eran los descuentos). Cada control muestra los
   dos lados de la cuenta y la resta: lo que lo hace servir no es que
   diga "esta bien", es que se puedan ver los dos numeros.

   Los colores salen de la convencion que ya usa .aviso: el fondo queda
   el del tema (var(--card)) y se pinta el borde y el texto. Asi anda
   en claro y en oscuro sin definir una paleta nueva. */
.cierre { margin-top: -6px; }
.cierre .ln span:last-child { font-variant-numeric: tabular-nums; }
.cierre-nota { margin-top: 8px; }

.cuadre-cab {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--card);
  margin-bottom: 14px;
}
.cuadre-cab.ok  { border-color: #1D9E7566; }
.cuadre-cab.ojo { border-color: #E24B4A66; }
.cuadre-marca { font-size: 22px; line-height: 1.1; }
.cuadre-cab.ok .cuadre-marca  { color: #1D9E75; }
.cuadre-cab.ojo .cuadre-marca { color: #E24B4A; }

.cuadre-it {
  border-left: 3px solid #1D9E75;
  padding: 11px 0 11px 13px;
  margin-bottom: 13px;
}
.cuadre-it.mal { border-left-color: #E24B4A; }
.cuadre-q { font-weight: 600; display: flex; gap: 8px; margin-bottom: 7px; }
.cuadre-p { flex: none; color: #1D9E75; }
.cuadre-it.mal .cuadre-p { color: #E24B4A; }
.cuadre-n .ln span:last-child { font-variant-numeric: tabular-nums; }
.cuadre-det {
  margin: 7px 0 0 11px;
  padding-left: 11px;
  border-left: 1px dashed var(--border);
  font-size: 13px;
}
.cuadre-det .ln span:last-child { font-variant-numeric: tabular-nums; }
.cuadre-por { margin-top: 7px; }

/* ══════════════════════════════════════════════════════════════════
   EL TELÉFONO
   ══════════════════════════════════════════════════════════════════

   Hasta el 29/10/2026 esto no existía. No es que estuviera mal hecho:
   estaba sin hacer. El único corte era @media (max-width:1000px), que
   achica la barra lateral a 60 px de iconos sin texto — eso es para
   una tablet. En un teléfono de 390 px se perdían 60 px en una columna
   de iconos mudos y el resto era la pantalla de escritorio apretada.

   (En base.css hay otra capa de celular, con .mobile-nav y .mob-bar.
   Es del programa ANTERIOR y no la usa nadie: ningún .js ni el
   index.html nombran esas clases. No guiarse por ella.)

   El corte es a 760 px: arriba entra la barra lateral de 238 px y
   sobra ancho para una tabla; abajo, no.
*/

/* ---------------------------------------------------------- el alto
   100vh en un teléfono NO es lo que se ve: el navegador cuenta también
   la franja de la dirección, que aparece y desaparece al scrollear. El
   resultado es que el pie de la pantalla queda cortado abajo. dvh es
   el alto de verdad, el que queda. El 100vh queda como respaldo para
   un navegador viejo que no entienda dvh. */
#app { height: 100vh; height: 100dvh; }

/* La hamburguesa no se ve en la computadora. */
.solo-celu { display: none; }

/* El fondo oscuro detrás del cajón del menú.
   z-index 69/70 y no 59/60: el carrito flotante (.cf) también está en
   60, así que con el mismo número podía quedar por encima del menú y
   taparlo. El menú va arriba de todo salvo los carteles. */
.tapa-menu {
  display: none; position: fixed; inset: 0; z-index: 69;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.tapa-menu.se-ve { display: block; }

@media (max-width: 760px) {

  /* ------------------------------------------- 1. el menú, en cajón */
  .solo-celu { display: inline-flex; }

  .side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    width: 82vw; max-width: 310px; flex-basis: auto;
    transform: translateX(-102%);        /* el 2% de más tapa la sombra */
    transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(0, 0, 0, .28);
  }
  .side.abierto { transform: translateX(0); }

  /* Los renglones del menú, más altos: con el dedo, 7 px de alto es
     una lotería. 44 px es lo que recomienda Apple y se nota.

     OJO CON EL NOMBRE DE LA CLASE. El renglón del menú es .ni (con
     .ic adentro para el icono y .tx para el texto) y el título de
     grupo es .side-grupo. La primera versión de esto decía
     .side-item y .side-sep, que son del programa ANTERIOR: no existen
     en ninguna pantalla, así que las dos reglas no hacían nada y los
     renglones quedaban en 7 px. Medido en el navegador a 390 px. */
  .ni { padding: 12px 12px; font-size: 14px; min-height: 44px; }
  .side-grupo { padding: 16px 12px 6px; }
  .side-sub { margin-left: 10px; }

  /* ------------------------------------------- la barra de arriba */
  .top { padding: 0 10px; gap: 7px; }
  .top-titulo { font-size: 15px; min-width: 0; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
  /* En el teléfono no entra: son datos de contexto, no acciones. */
  .top-info { display: none; }
  /* Partir en dos una pantalla de 390 px deja dos mitades donde no
     entra nada. */

  /* Las pestañas, más chicas. */
  .tabs { padding: 5px 8px 0; }
  .tab { font-size: 11px; padding: 6px 8px; max-width: 140px; }

  .panel { padding: 11px; }

  /* --------------------------- las cajitas de numeros, sin cortar

     Las grillas .g2 .g3 .g4 son auto-fit, asi que se acomodan solas y
     en 390 px entran de a dos. El problema no era la grilla sino el
     numero: en Caja, "$2.197.366,00" a 23 px mide 151 px y adentro de
     la cajita quedan 138, asi que los ultimos dos digitos quedaban
     cortados contra el borde. Un importe cortado no es feo, es otro
     importe. Con 19 px y menos margen entran unos 15 caracteres, que
     cubre hasta las decenas de millones. Medido a 390 px. */
  .kpi { padding: 12px 12px; }
  .kpi .v { font-size: 19px; }

  /* ------------------------------- 2. las tablas, como tarjetas

     Es el cambio que más se nota, y por qué se hace acá y no en cada
     pantalla: las 33 listas del programa salen de la misma función
     (tabla(), en app.js), que ya le pone a cada celda el rótulo de su
     columna en data-r. Entonces una sola regla las arregla todas.

     Una tabla de 7 columnas en 390 px no se arregla achicando la
     letra: hay que cambiar la forma. Cada fila pasa a ser una ficha y
     cada dato lleva su nombre al lado, porque sin el encabezado arriba
     "$12.400" no dice si es el costo, la venta o el total. */
  .tabla-wrap { max-height: none; border: none; background: transparent; }
  table.tb, table.tb tbody, table.tb tr, table.tb td { display: block; width: auto; }
  table.tb thead { display: none; }

  table.tb tr {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 11px 13px; margin-bottom: 9px;
  }
  table.tb tbody tr:hover { background: var(--card); }

  /* EL  flex-wrap  NO ES DECORATIVO.
     Muchas celdas traen más de una cosa adentro: el nombre del
     artículo y abajo, en chiquito, su código de barras. Sin wrap, flex
     los pone uno AL LADO del otro y el renglón queda ilegible. Con
     wrap, lo que no entra baja solo. */
  table.tb td {
    border: none; padding: 3px 0; font-size: 13px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
    text-align: left !important;
  }
  /* El rótulo, a la izquierda y apagado; el dato, a la derecha. */
  table.tb td::before {
    content: attr(data-r); flex: 0 0 42%;
    color: var(--text-muted); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em;
  }
  /* Una celda sin rótulo (la de los botones) no deja el hueco. */
  table.tb td[data-r=""]::before { content: none; }

  /* El nombre de la cosa va arriba, grande y sin rótulo: es el título
     de la ficha y repetir "Artículo:" al lado sobra. */
  /* El título va en bloque y no en flex: adentro suele haber el nombre
     y debajo un dato chico (el código de barras, el stock mínimo), y
     eso tiene que quedar apilado, no en fila. */
  table.tb td.td-titulo {
    display: block;
    font-size: 15px; font-weight: 600; padding-bottom: 7px;
    margin-bottom: 5px; border-bottom: 1px solid var(--row-alt);
  }
  table.tb td.td-titulo::before { content: none; }

  /* Los botones de la fila, abajo de todo y a lo ancho, para que se
     puedan tocar. */
  table.tb td.acc {
    display: flex; flex-wrap: wrap; gap: 6px; padding-top: 9px;
    margin-top: 5px; border-top: 1px solid var(--row-alt);
  }
  table.tb td.acc .bt { flex: 1 1 auto; min-height: 36px; }

  /* Una celda vacía no ocupa un renglón en blanco. */
  table.tb td:empty { display: none; }

  /* ------------------------------------ 3. los carteles, a pantalla
     El modal era de 560 px fijos con 22 px de aire alrededor: en 390
     px quedaba un cuadrado apretado en el medio con el contenido
     cortado. Acá ocupa todo y el pie queda siempre a la vista.

     OJO CON EL NOMBRE DE LA CLASE: el cartel es .modal, no .ml. En
     app.css conviven los dos (.ml, línea 490) porque .ml es del
     programa ANTERIOR y quedó sin borrar; ningún .js la usa. La
     primera versión de esto apuntaba a .ml, así que el cartel seguía
     saliendo de 560 px con las esquinas redondeadas y 60 px de aire
     abajo. Medido en el navegador. */
  .ov { padding: 0; align-items: stretch; }
  .modal, .modal.ancho {
    width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh;
    border-radius: 0; border: none;
  }
  .modal-head { padding: 13px 15px; }
  .modal-cuerpo { padding: 15px; flex: 1; }
  .modal-pie {
    flex-wrap: wrap; gap: 7px; padding: 12px 15px;
    margin-top: 0; position: sticky; bottom: 0;
    background: var(--card); border-top: 1px solid var(--border);
  }
  .modal-pie .bt { flex: 1 1 auto; min-height: 42px; }

  /* Los campos de a uno: dos columnas en 390 px no entran.
     Ojo que .campo-fila es FLEX, no grid: la primera versión de esto
     le ponía grid-template-columns y no hacía absolutamente nada. */
  .campo-fila { flex-direction: column; gap: 0; }

  /* ----------------------------------------- lo que se toca con el dedo
     16 px en un input no es estética: con menos, el iPhone hace zoom
     solo al tocarlo y después la pantalla queda corrida. */
  .ip, input, select, textarea { font-size: 16px; }
  .bt { min-height: 38px; }
  .chip { min-height: 34px; }

  /* La barra de filtros, que se pueda arrastrar de costado en vez de
     amontonarse en cinco renglones. */
  .barra-filtros {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 3px;
  }
  .barra-filtros::-webkit-scrollbar { height: 0; }
  .barra-filtros .chip { flex: 0 0 auto; }

  /* El carrito flotante, abajo y a lo ancho: arrastrarlo con el dedo
     en una pantalla chica no sirve de nada. */
  #carritoFlot {
    left: 8px !important; right: 8px !important; width: auto !important;
    bottom: 8px !important; top: auto !important; max-height: 62dvh;
  }
}