/* 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; }
.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
   pantalla partida, cada mitad se mueve por su cuenta. */
.vista { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.panel { flex: 1; min-width: 0; overflow-y: auto; padding: 18px; }
.vista.partida { gap: 0; }
.vista.partida #panelIzq { flex: none; width: var(--ancho-izq, 50%); }
.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); }
.top #btnPartir.on { background: var(--marca); color: #000; border-color: 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%; }
.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); }

.avisos { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 90; 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. */
  .top #btnPartir { display: none; }
  .vista.partida { flex-direction: column; }
  .vista.partida #panelIzq { width: auto; flex: 1; }
  .panel-agarre { display: none; }
  .side { width: 60px; flex-basis: 60px; }
  .side-item span.tx, .side-nombre, .side-usuario, .side-sep { display: 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%; }

/* 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; }