se convierte en una tarjeta-renglon de 2 lineas (nombre +
estado arriba, folio/fecha + restante + acciones abajo) en vez de una tabla
de 9 columnas imposible de leer sin scroll horizontal. Toda la fila sigue
siendo clickeable a detalle (ver listener en tabla-historial-body,
ventas.js) -- esto solo cambia como se ve, no el comportamiento. */
#tabla-historial {
font-size: 0.78rem;
}
#tabla-historial th,
#tabla-historial td {
padding: 0.5rem 0.65rem;
}
#tabla-historial tbody tr[data-venta-id],
#tabla-historial tbody tr[data-abono-venta-id] {
cursor: pointer;
}
#tabla-historial tbody tr[data-venta-id]:nth-child(even),
#tabla-historial tbody tr[data-abono-venta-id]:nth-child(even) {
background: var(--color-superficie-2);
}
#tabla-historial tbody tr[data-venta-id]:hover,
#tabla-historial tbody tr[data-abono-venta-id]:hover {
background: var(--fia-naranja-tenue);
}
.historial-tipo {
display: inline-block;
margin-left: 4px;
padding: 2px 5px;
border-radius: var(--radio-pildora);
font-size: 0.62rem;
font-weight: 800;
line-height: 1;
}
.historial-tipo.venta {
background: var(--fia-naranja-tenue);
color: var(--color-texto);
}
.historial-tipo.abono {
background: var(--fia-exito-tenue);
color: var(--fia-exito-texto);
}
@media (max-width: 700px) {
/* La tabla completa se convierte en una lista de tarjetas: se pierde la
semantica visual de tabla (thead oculto) pero cada | sigue siendo
el mismo elemento, solo reposicionado por grid-area. */
.historial-table-wrapper {
border: none;
overflow-x: visible;
}
#tabla-historial {
font-size: 0.8rem;
}
#tabla-historial thead {
display: none;
}
#tabla-historial,
#tabla-historial tbody {
display: block;
}
#tabla-historial tbody tr[data-venta-id],
#tabla-historial tbody tr[data-abono-venta-id] {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"cliente estado"
"folio restante"
"acciones acciones";
row-gap: 3px;
padding: 10px 12px;
border-bottom: 1px solid var(--color-linea-suave);
border-radius: var(--radio-control);
margin-bottom: 6px;
background: var(--color-superficie);
border: 1px solid var(--color-linea);
}
/* Fila de VENTA: renglon propio para los tres montos (peticion Luis
27-08-26). Antes solo cabia uno y se mostraba el saldo restante, asi
que toda venta pagada aparecia como $0.00 -- sin el total, que es
justo lo que permite reconocer la venta de un vistazo. La tarjeta
tiene espacio de sobra, asi que ahora van los tres juntos y se leen
como un mini estado de cuenta: cuanto fue, cuanto lleva pagado y
cuanto debe. Las filas de abono conservan el grid de arriba: no
tienen total ni saldo propios. */
#tabla-historial tbody tr[data-venta-id] {
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"cliente cliente estado"
"folio folio folio"
"total abonado restante"
"acciones acciones acciones";
}
#tabla-historial tbody tr[data-venta-id]:nth-child(even),
#tabla-historial tbody tr[data-abono-venta-id]:nth-child(even) {
background: var(--color-superficie);
}
#tabla-historial td {
padding: 0;
border-bottom: none;
}
/* Columnas ocultas en movil (Total de venta, Abonado, Metodo): caben en
el detalle de la venta, no hacen falta para ubicar/abonar rapido. */
#tabla-historial td:nth-child(4),
#tabla-historial td:nth-child(5),
#tabla-historial td:nth-child(7) {
display: none;
}
#tabla-historial td:nth-child(1) {
grid-area: folio;
color: var(--color-texto-tenue);
font-size: 0.72rem;
align-self: end;
}
/* La fecha se pega junto al folio en la misma celda visual mediante
::before, para no necesitar una tercera columna en el grid. */
#tabla-historial td:nth-child(2) {
display: none;
}
#tabla-historial td:nth-child(1)::after {
content: attr(data-fecha-corta);
color: var(--color-texto-tenue);
margin-left: 6px;
}
#tabla-historial td:nth-child(3) {
grid-area: cliente;
font-weight: 800;
color: var(--color-texto);
font-size: 0.86rem;
align-self: start;
}
#tabla-historial td:nth-child(6) {
grid-area: restante;
font-weight: 900;
color: var(--color-texto);
text-align: right;
align-self: end;
}
#tabla-historial tr[data-abono-venta-id] td:nth-child(6)::before {
content: attr(data-monto) " - ";
}
/* Los tres montos de una fila de VENTA (Total / Abonado / Resta). Cada
uno lleva su etiqueta arriba via ::before, porque sin encabezado de
tabla en movil tres cifras sueltas no se distinguirian entre si. */
#tabla-historial tr[data-venta-id] td:nth-child(4),
#tabla-historial tr[data-venta-id] td:nth-child(5),
#tabla-historial tr[data-venta-id] td:nth-child(6) {
display: block;
margin-top: 4px;
font-weight: 800;
font-size: 0.82rem;
color: var(--color-texto);
align-self: end;
}
#tabla-historial tr[data-venta-id] td:nth-child(4)::before,
#tabla-historial tr[data-venta-id] td:nth-child(5)::before,
#tabla-historial tr[data-venta-id] td:nth-child(6)::before {
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-texto-tenue);
}
#tabla-historial tr[data-venta-id] td:nth-child(4) {
grid-area: total;
}
#tabla-historial tr[data-venta-id] td:nth-child(4)::before {
content: "Total";
}
#tabla-historial tr[data-venta-id] td:nth-child(5) {
grid-area: abonado;
text-align: center;
}
#tabla-historial tr[data-venta-id] td:nth-child(5)::before {
content: "Abonado";
}
/* El saldo restante se resalta en rojo solo cuando de verdad queda algo
por cobrar; la clase la pone renderFilaVentaHistorial() en ventas.js. */
#tabla-historial tr[data-venta-id] td:nth-child(6) {
grid-area: restante;
text-align: right;
}
#tabla-historial tr[data-venta-id] td:nth-child(6)::before {
content: "Resta";
}
#tabla-historial tr[data-venta-id] td.historial-resta-pendiente {
color: var(--fia-peligro-texto);
}
#tabla-historial td:nth-child(8) {
grid-area: estado;
justify-self: end;
align-self: start;
}
#tabla-historial td:nth-child(9) {
grid-area: acciones;
margin-top: 4px;
}
#tabla-historial td:nth-child(9) .acciones-fila {
justify-content: flex-end;
}
/* Encabezado de grupo (corte de caja): ya no es una fila de tabla
normal en movil, se convierte en una barra propia de ancho completo. */
#tabla-historial tr.historial-grupo-header {
display: block;
background: var(--color-fondo);
border-radius: var(--radio-control);
margin-bottom: 6px;
border: 1px solid var(--color-linea);
}
#tabla-historial tr.historial-grupo-header td {
display: block;
padding: 8px 12px;
}
.historial-grupo-header-row {
flex-wrap: wrap;
}
.historial-grupo-label {
font-size: 0.72rem;
}
}
/* ================================
TABLA DE PRODUCTOS DE LA VENTA ACTUAL -- una sola linea por producto por
defecto (item 4 del mockup): la columna de nombre se lleva el espacio
disponible, las columnas numéricas solo el que necesitan. El detalle
(categoria/descuentos/notas) se pliega detrás del botón ▸ de cada renglón.
================================ */
#tabla-ventas-principal {
table-layout: fixed;
}
#tabla-ventas-principal th:nth-child(1),
#tabla-ventas-principal td:nth-child(1) {
width: auto;
}
#tabla-ventas-principal th:nth-child(2),
#tabla-ventas-principal td:nth-child(2) {
/* Suficientemente ancha para el par Alto/Ancho (cm) cuando la unidad
es m2 -- antes 78px hacia que esos 2 inputs quedaran ilegibles. */
width: 128px;
}
#tabla-ventas-principal th:nth-child(3),
#tabla-ventas-principal td:nth-child(3) {
width: 76px;
}
#tabla-ventas-principal th:nth-child(4),
#tabla-ventas-principal td:nth-child(4) {
width: 100px;
}
#tabla-ventas-principal th:nth-child(5),
#tabla-ventas-principal td:nth-child(5) {
width: 100px;
}
#tabla-ventas-principal th:nth-child(6),
#tabla-ventas-principal td:nth-child(6) {
width: 64px;
}
/* Menos relleno por celda que el resto de las tablas (peticion Luis
26-08-26): con el padding generico de 0.8rem apenas cabian 2 productos
en pantalla; con este apretado caben comodamente 4+ junto con su nota. */
#tabla-ventas-principal th,
#tabla-ventas-principal td {
padding: 0.3rem 0.6rem;
vertical-align: top;
}
/* Interruptor unico arriba de la tabla para ver/ocultar la nota de TODOS
los renglones a la vez (reemplaza la flechita que cada renglon tenia
antes solo para su propia nota). */
/* EL RENGLON DE LA NOTA, APRETADO (Luis 17-09-26: "sin sacrificar la altura
de los renglones de edicion, si hay mucho espacio vacio entre cada
renglon"). Cada producto ocupaba 82 px: 43 el renglon donde se escribe
--que NO se toca, ahi se teclea-- y 39 el de su nota, que se lee. Medido:
el alto no lo pone el | de la fila sino su bloque de adentro. */
.renglon-notas-row>td {
padding: 0 10px 3px !important;
}
.renglon-notas-block {
padding: 2px 8px !important;
}
.tabla-ventas-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
/* Se parte en dos renglones donde no quepa, en vez de apretar la
etiqueta a dos lineas contra el interruptor. */
flex-wrap: wrap;
gap: var(--esp-2);
padding: var(--esp-1) var(--esp-3);
border-bottom: 1px solid var(--color-linea-suave);
}
.tabla-ventas-toolbar-label {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-texto-suave);
}
.toggle-switch {
position: relative;
width: 34px;
height: 19px;
flex: 0 0 auto;
cursor: pointer;
}
.toggle-switch input {
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
cursor: pointer;
}
.toggle-switch-track {
position: absolute;
inset: 0;
background: var(--color-linea);
border-radius: var(--radio-pildora);
transition: background 0.15s ease;
}
.toggle-switch input:checked+.toggle-switch-track {
background: var(--color-accion);
}
.toggle-switch-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 15px;
height: 15px;
background: white;
border-radius: 50%;
transition: left 0.15s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.toggle-switch input:checked~.toggle-switch-thumb {
left: 17px;
}
/* Fila de nota de un renglon: ya no es plegable individualmente, existe
siempre (con o sin texto) y su visibilidad la decide el interruptor
.tabla-ventas-toolbar de arriba, para todos los renglones a la vez. */
.renglon-notas-block {
background: var(--color-superficie-2);
border: 1px solid var(--color-linea);
border-radius: 7px;
padding: 5px 8px;
display: flex;
align-items: center;
gap: 8px;
}
.renglon-notas-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--color-texto-tenue);
flex: 0 0 auto;
text-transform: uppercase;
}
.renglon-notas-texto {
flex: 1 1 auto;
min-width: 0;
font: inherit;
font-size: 0.78rem;
color: var(--color-texto-suave);
border: none;
background: none;
resize: none;
height: 20px;
overflow: hidden;
}
.renglon-notas-texto::placeholder {
color: var(--color-texto-tenue);
}
.renglon-notas-texto:focus {
outline: none;
background: white;
border-radius: var(--radio-control);
height: auto;
resize: vertical;
}
.renglon-notas-check {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
color: var(--color-texto-tenue);
flex: 0 0 auto;
white-space: nowrap;
}
.renglon-acciones {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
.btn-expandir-renglon {
position: relative;
background: var(--color-fondo);
border: 1px solid var(--color-linea);
color: var(--color-texto-tenue);
border-radius: var(--radio-pildora);
min-width: 32px;
min-height: 32px;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
flex: 0 0 auto;
}
@media (max-width: 700px) {
.btn-expandir-renglon {
min-width: 40px;
min-height: 40px;
font-size: 1.3rem;
}
}
.btn-expandir-renglon:hover {
background: var(--color-linea);
color: var(--color-texto);
}
.btn-expandir-renglon.abierto {
transform: rotate(90deg);
background: var(--fia-naranja-tenue);
color: var(--color-accion-legible);
border-color: var(--fia-naranja-borde);
}
/* Indicador chico de "tiene descuento" cuando el renglón está colapsado,
para no obligar a abrir cada fila para saber (la nota ya no se colapsa
por renglón, así que este badge ya solo habla de descuentos). */
.renglon-extra-badge {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
border-radius: var(--radio-pildora);
background: var(--fia-aviso);
border: 1.5px solid #fff;
}
.history-actions {
display: flex;
flex-direction: row;
gap: var(--esp-2);
}
.empty-state {
padding: 2.5rem 1rem;
text-align: center;
color: var(--color-texto-tenue);
font-size: 0.85rem;
font-weight: 600;
}
.empty-icon {
display: flex;
justify-content: center;
margin-bottom: 10px;
color: var(--color-texto-tenue);
}
.btn-icon:focus-visible {
outline: 2px solid var(--color-accion);
outline-offset: 2px;
}
/* Modal detalle de venta */
.detalle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 12px 16px;
}
.detalle-item small {
display: block;
color: var(--color-texto-tenue);
font-weight: 800;
text-transform: uppercase;
font-size: 0.65rem;
margin-bottom: 3px;
}
.detalle-item strong {
color: var(--color-texto);
font-size: 0.85rem;
word-break: break-word;
}
/* Un dato del detalle que hay que atender, no solo leer: hoy lo usa la
mercancía de una sustitución que no pudo entrar a ningún almacén porque
nadie ha marcado uno que no venda al público (12-09-26). Pintarlo igual
que los demás sería esconderlo a la vista. */
.detalle-item strong.detalle-valor-aviso {
color: var(--fia-aviso-texto);
}
.detalle-seccion {
margin-top: 20px;
}
.detalle-seccion h4 {
font-weight: 900;
color: var(--color-texto);
font-size: 0.75rem;
text-transform: uppercase;
margin-bottom: 10px;
}
.detalle-seccion p {
color: var(--color-texto);
font-size: 0.85rem;
background: var(--color-superficie-2);
border: 1px solid var(--color-linea);
border-radius: var(--radio-control);
padding: 10px 12px;
}
.vincular-requisicion-item {
padding: 10px 14px;
border: 1px solid var(--color-linea);
border-radius: var(--radio-control);
margin-bottom: 8px;
cursor: pointer;
}
.vincular-requisicion-item:hover {
background: var(--color-superficie-2);
}
.vincular-requisicion-item.selected {
border-color: var(--color-accion-hover);
background: var(--fia-naranja-tenue);
}
.badge {
padding: 0.2rem 0.7rem;
border-radius: var(--radio-pildora);
font-size: 0.7rem;
font-weight: 800;
}
.badge.pendiente {
background: var(--fia-aviso-tenue);
color: var(--fia-aviso-texto);
}
.badge.pagado {
background: var(--fia-exito-tenue);
color: var(--fia-exito-texto);
}
.badge.devuelto {
background: var(--fia-naranja-tenue);
color: #5b21b6;
}
.badge.cancelado {
background: var(--fia-peligro-tenue);
color: var(--fia-peligro-texto);
}
.historial-grupo-header td {
background: var(--color-fondo);
font-weight: 800;
font-size: 0.75rem;
color: var(--color-texto-suave);
padding: 10px 14px;
border-bottom: 1px solid var(--color-linea);
}
.historial-grupo-header {
cursor: pointer;
}
.historial-grupo-header-row {
display: flex;
align-items: center;
gap: 10px;
}
.historial-grupo-chevron {
font-size: 0.7rem;
color: var(--color-texto-tenue);
width: 12px;
display: inline-block;
}
.btn-reimprimir-corte {
margin-left: auto;
background: var(--color-superficie);
border: 1px solid var(--color-linea);
border-radius: var(--radio-pildora);
padding: 4px 12px;
font-size: 0.72rem;
font-weight: 700;
color: var(--color-accion-legible);
cursor: pointer;
white-space: nowrap;
}
.btn-reimprimir-corte:hover {
background: var(--fia-naranja-tenue);
}
.btn-action {
border: none;
padding: 0.3rem 0.8rem;
border-radius: 30px;
font-size: 0.7rem;
font-weight: 800;
cursor: pointer;
margin: 2px;
}
/* GRAFITO, NO MORADO, en toda la fila de acciones de una venta (17-09-26).
Luis: "no quiero el morado". Eran tres botones morados --Req, Devolver y
Devolucion-- de un morado de Tailwind que no sale de la Guia Visual §3.
Y no era solo cuestion de identidad: #8b5cf6 sobre la tarjeta blanca daba
4.23:1, por debajo del minimo, justo en el boton que abre una devolucion.
La regla que queda: en esta fila el color marca DINERO QUE ENTRA (verde) y
DESTRUCTIVO (rojo); todo lo demas va en grafito, que es lo que ya hacia
.btn-duplicate. Las palabras distinguen el resto. */
.btn-req {
color: var(--color-texto);
}
.btn-pay {
color: var(--fia-exito);
}
.btn-cancel {
color: var(--fia-peligro);
}
.btn-return {
color: var(--color-texto);
}
/* La puerta de la devolucion (12-09-26). Hereda el color de "Devuelto", que
es el que la gente ya asociaba con esto; lo que cambia es que ahora es un
boton visible en el renglon y no el sexto item de un menu. */
.btn-devolucion {
color: var(--color-texto);
}
.btn-duplicate {
color: var(--color-texto);
}
.opciones-de-caja {
width: 620px;
}
/* BRIEF P1 07-08-26 punto 1: "Abonar" se renderiza aparte del resto de
acciones (ver renderAccionesVenta en tabla-acciones.js), asi que la celda
puede tener el boton de Abonar + un boton unico/dropdown al mismo tiempo. */
.acciones-fila {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--esp-2);
/* SIN PARTIRSE (Luis 17-09-26: "un tercer boton se baja a otro renglon").
Medido: los tres controles piden 330 px y el contenedor daba 127, asi
que el tercero caia a una segunda linea y el renglon entero medía 124
px de alto. Su columna ahora pide su ancho (`width: 1%` + nowrap
arriba) y la del cliente cede el sobrante. */
flex-wrap: nowrap;
}
.dropdown-actions {
position: relative;
display: inline-block;
}
.btn-dropdown {
background: var(--fia-grafito);
color: var(--fia-blanco);
border: none;
border-radius: var(--radio-control);
padding: 6px 12px;
cursor: pointer;
font-size: .8rem;
}
.btn-dropdown:hover {
background: var(--fia-grafito);
}
.dropdown-menu {
position: absolute;
top: 110%;
right: 0;
min-width: 170px;
background: var(--color-superficie);
border: 1px solid var(--color-linea);
border-radius: var(--radio-control);
box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
display: none;
overflow: hidden;
z-index: 1000;
}
.dropdown-actions.active .dropdown-menu {
display: flex;
flex-direction: column;
}
.dropdown-item {
width: 100%;
border: none;
background: none;
padding: 10px 14px;
text-align: left;
cursor: pointer;
font-size: .85rem;
transition: .15s;
display: flex;
align-items: center;
gap: 5px;
}
.dropdown-item svg {
width: 20px;
height: auto;
}
.dropdown-item:hover {
background: var(--color-superficie-2);
}
.dropdown-item.danger {
color: var(--fia-peligro);
}
.dropdown-item.danger:hover {
background: var(--fia-peligro-tenue);
}
/* Acción única renderizada directo en la celda (sin menú desplegable) */
.btn-accion-tabla {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--color-superficie);
border: 1px solid var(--color-linea);
border-radius: var(--radio-pildora);
padding: 6px 12px;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.btn-accion-tabla svg {
width: 18px;
height: auto;
}
.btn-accion-tabla:hover {
background: var(--color-superficie-2);
}
.btn-accion-tabla[disabled],
.dropdown-item[disabled] {
opacity: 0.55;
cursor: not-allowed;
}
/* Autorizaciones de cancelación (supervisor) */
.badge-contador {
display: none;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
margin-left: 6px;
border-radius: var(--radio-pildora);
background: var(--fia-peligro);
color: var(--fia-blanco);
font-size: 0.7rem;
font-weight: 800;
}
.solicitud-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background: var(--color-superficie-2);
border: 1px solid var(--color-linea);
border-radius: var(--radio-tarjeta);
padding: 14px;
margin-bottom: 10px;
}
.solicitud-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.solicitud-info small {
color: var(--color-texto-tenue);
}
.solicitud-notas {
background: var(--fia-aviso-tenue);
border: 1px solid var(--fia-aviso);
border-radius: var(--radio-control);
padding: 4px 8px;
margin-top: 4px;
color: var(--fia-aviso-texto) !important;
}
.solicitud-acciones {
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
@media (max-width: 1024px) {
.opciones-de-caja {
width: 90%;
}
.container {
padding-bottom: 76px;
}
}
/* ================================
VISTA MOVIL POS
================================ */
@media (max-width: 700px) {
body {
background: var(--color-fondo);
}
.container {
width: calc(100% - 24px);
margin: 14px auto;
padding-bottom: 24px;
}
/* EL ENCABEZADO DE VENTAS EN EL TELEFONO -- el circulo rojo de Luis
(17-09-26: "hay mucho espacio, donde te circulo de rojo").
Medido a 360 px: 221 px de los 800, el 28% de la pantalla, y ni una
sola venta visible todavia. La razon es que el encabezado se apilaba
en CUATRO renglones, uno por pieza:
Ventas 30 px
Efectivo en caja $0.00 16 px
Folio: -- 15 px
[Abono][Historial] 44 px
[Caja] 44 px <- los botones no cabian
La barra lateral se lleva 88 px, asi que al encabezado le quedan 240
de ancho: tres botones de ~85 px no caben en una fila que se parte, y
partirse era justo lo que hacia. Aqui se arma en tres renglones:
Ventas
EFECTIVO EN CAJA $0.00 Folio: -- <- el dinero, en una linea
[Abono][Historial][Caja] -> <- se desliza de lado
El titulo lo dimensiona base.css (--texto-lg); ya no hay una medida
propia de Ventas. */
.panel-header-ventas {
gap: var(--esp-2);
}
.panel-header-der {
flex: 1 0 100%;
/* Sin esto la fila que se desliza no se desliza: la anchura minima
de un contenedor flex es la de su contenido, asi que .panel-header-der
media 402 px dentro de 272 y lo que se movia de lado era la pagina
entera. Medido 18-09-26. */
min-width: 0;
justify-content: flex-start;
align-items: baseline;
gap: var(--esp-1) var(--esp-3);
}
.title-divider {
display: none;
}
.sl-total-dia {
flex: 0 1 auto;
justify-self: auto;
padding: 0;
font-size: 0.68rem;
}
.sl-total-dia strong {
font-size: 0.85rem;
}
.quick-folio {
flex: 0 1 auto;
}
/* Una fila que se desliza, no una que se parte: tres botones de 85 px
no caben en 240, y al partirse costaban un renglon entero de 44 px.
Deslizandose cuestan cero y siguen todos ahi. */
.toolbar-actions {
flex: 1 0 100%;
min-width: 0;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.toolbar-actions::-webkit-scrollbar {
display: none;
}
.toolbar-btn,
.toolbar-btn-sec {
flex: 0 0 auto;
font-size: 0.74rem;
padding: 7px 10px;
}
/* Orden solo en movil: sidebar (cliente/caja, el total ya esta fijo
abajo asi que no importa su lugar en el flujo) -> formulario/tabla
de productos. En escritorio el grid de 2 columnas no usa este orden
(se resetea en el breakpoint de 900px). */
.sales-sidebar {
order: 1;
}
.sales-main {
order: 2;
}
.sl-card {
padding: 12px 14px;
}
/* Tarjeta de cliente y barra de acciones mas bajas: menos padding,
renglones mas compactos. */
.sl-cliente-card {
padding: 8px 10px;
}
/* Caja nombre / Fondo inicial: eran 2 lineas (etiqueta arriba, valor
abajo) -- en movil se compactan a una sola linea de texto por dato,
"Etiqueta: valor" en vez de apilado. */
.sl-caja-info {
padding: 8px 10px;
gap: 6px 16px;
flex-wrap: wrap;
}
.sl-caja-info-item {
flex-direction: row;
align-items: baseline;
gap: 4px;
/* Un dato por renglon: de dos en dos, "Caja nombre: Caja Mostrador
Matriz" se partia en tres lineas. */
flex: 1 0 100%;
}
.sl-caja-info-label {
font-size: 0.68rem;
}
.sl-caja-info-label::after {
content: ':';
}
.sl-caja-info-value {
font-size: 0.82rem;
}
.toolbar-btn,
.toolbar-btn-sec {
padding: 6px 10px;
}
/* NOTAS Y "REQUIERE FACTURA" DEJAN DE COMPARTIR RENGLON.
En escritorio comparten fila a proposito, para ahorrar una. Aqui no
caben: de los 250 px del contenido, la casilla se lleva 149 y al campo
de notas le quedaban 89 -- menos que su propio placeholder. */
.notas-factura-row {
flex-direction: column;
align-items: stretch;
gap: var(--esp-2);
}
.notas-factura-row>label {
padding-bottom: 0;
/* Sin esto la etiqueta se estira a los 250 px de la columna y la
casilla --su primer hijo flexible-- se come el hueco: medida en
114 px de ancho en vez de 13. */
align-self: flex-start;
}
/* Campo "Codigo o concepto" y renglon cantidad/unidad/precio: mismo
campo, solo mas bajo. */
.quick-input {
padding: 0.5rem 0.7rem;
font-size: 0.85rem;
}
.quick-qty-price {
gap: 6px !important;
}
/* Barra de filtros del historial: en escritorio es una sola fila (busqueda
+ estado + rango de fechas + Buscar), pero en movil con flex-basis de
260px c/u no cabian ni de cerca -- se aplastaban a cajas casi
invisibles. Se reacomoda en 2 filas: busqueda + estado arriba (mitad y
mitad), fechas + boton abajo. */
.filters-bar {
background: transparent !important;
margin-bottom: 12px !important;
flex-wrap: wrap;
gap: 8px !important;
}
.filters-bar h3 {
width: 100%;
margin: 8px 0 0 !important;
font-size: 1rem !important;
color: var(--color-texto-suave) !important;
}
.filters-bar>div {
width: 100%;
flex: 1 1 100% !important;
gap: 8px !important;
}
#search-venta-historial {
flex: 1 1 100%;
min-width: 0;
}
#filter-estado-historial {
flex: 1 1 100%;
min-width: 0;
}
#historial-fecha-inicio,
#historial-fecha-fin {
flex: 1 1 calc(50% - 4px);
min-width: 0;
}
#btn-buscar-historial {
flex: 1 1 100%;
}
/*
Tabla del carrito de la venta en curso. 6 columnas reales:
1 Producto, 2 Cantidad, 3 Unidad, 4 Precio unit., 5 Importe, 6 acciones
(expandir + eliminar). En pantallas angostas ya no se intenta forzar una
tabla de 6 columnas angostas (eso se encimaba) -- en su lugar cada |