anidado dentro del box-body solo
para agrupar campos. Al ser un .box hereda borde, fondo y esquinas, pero no
relleno —ese vive en .box-body—, así que los campos quedaban pegados a ese
borde interior. Un panel dentro de un panel no aporta nada: se neutraliza. */
.box-body > .box {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin-bottom: 0;
}
.box-body > .box > .box-body { padding: 0; }
.box-footer {
background: var(--pos-surface-2) !important;
border-top: 1px solid var(--pos-line) !important;
color: var(--pos-text-soft);
border-radius: 0 0 var(--pos-radius) var(--pos-radius);
}
/* --- etiquetas al lado del campo, no encima ------------------------------- */
/* Vendedor, Número de factura y Cliente tenían la etiqueta arriba, y en un
formulario que pelea por cada píxel de alto eso gastaba tres líneas. Al
ponerlas al lado se recupera ese alto y, de paso, quedan igual que
Descuento, Impuesto y Total, que ya usan etiqueta a la izquierda.
Solo aplica donde hay etiqueta seguida de un grupo con icono. */
.formularioVenta .form-group:has(> label + .input-group),
.formularioGasto .form-group:has(> label + .input-group) {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.formularioVenta .form-group:has(> label + .input-group) > label,
.formularioGasto .form-group:has(> label + .input-group) > label {
flex: 0 0 120px;
margin: 0;
line-height: 1.3;
}
.formularioVenta .form-group:has(> label + .input-group) > .input-group,
.formularioGasto .form-group:has(> label + .input-group) > .input-group {
flex: 1 1 auto;
min-width: 0;
}
/* en pantallas estrechas no hay ancho para las dos cosas: vuelven a apilarse */
@media (max-width: 991px) {
.formularioVenta .form-group:has(> label + .input-group),
.formularioGasto .form-group:has(> label + .input-group) {
display: block;
}
.formularioVenta .form-group:has(> label + .input-group) > label,
.formularioGasto .form-group:has(> label + .input-group) > label {
margin-bottom: 6px;
}
}
/* --- descuento e impuesto plegables --------------------------------------- */
.fila-plegable-cabecera th { padding: 4px 12px !important; border: 0 !important; }
.plegar-ajustes {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 2px;
border: 0;
background: transparent;
color: var(--pos-muted);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .02em;
cursor: pointer;
transition: color .16s ease;
}
.plegar-ajustes:hover { color: var(--pos-gold); }
.plegar-ajustes:focus-visible { outline: 2px solid var(--pos-gold); outline-offset: 2px; }
.plegar-ajustes i { font-size: 13px; width: 10px; }
/* señal de que hay un ajuste aplicado, visible aun con el bloque plegado */
.plegar-ajustes__aviso {
padding: 2px 8px;
border-radius: 999px;
background: var(--pos-gold-soft);
color: var(--pos-gold);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.plegar-ajustes__aviso[hidden] { display: none; }
/* al intentar plegar con un ajuste aplicado */
.plegar-ajustes--negado { color: var(--pos-warn) !important; }
.fila-ajuste[hidden] { display: none; }
/* --- el Total, con el peso que le corresponde ------------------------------ */
/* El número del total se muestra a 17px por estilo en línea, pero la palabra
«Total» iba al tamaño normal de la tabla y quedaba pequeña al lado. */
.formularioVenta table.table > tbody > tr > th,
.formularioGasto table.table > tbody > tr > th { font-size: 14px; }
.formularioVenta table.table > tbody > tr:last-child > th {
font-size: 17px;
font-weight: 700;
color: var(--pos-text);
letter-spacing: -.01em;
}
/* --- resumen de la venta: ítems y unidades -------------------------------- */
.venta-resumen {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
padding: 5px 10px;
border-radius: 999px;
background: var(--pos-surface-3);
border: 1px solid var(--pos-line);
width: max-content;
font-size: 11.5px;
letter-spacing: .03em;
color: var(--pos-muted);
}
.venta-resumen b {
color: var(--pos-text);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.venta-resumen__sep {
width: 1px;
height: 12px;
background: var(--pos-line-2);
}
.venta-resumen[hidden] { display: none; }
/* --- la lista de productos de la venta se desplaza sola ------------------- */
/* Fijar solo el botón no bastaba: para cerrar la venta hay que elegir método
de pago y escribir el valor recibido o el código de transacción, y esos
campos van DEBAJO de la lista, así que también se iban de la pantalla.
La solución es la de cualquier POS: que crezca la lista dentro de su propia
caja, no la página. Así los totales, el método de pago y el botón se quedan
siempre a la vista, y solo se desplaza lo que debe.
El alto se da en `vh` para que se adapte a la pantalla: en un portátil deja
ver unos cuatro productos, en un monitor grande el doble. */
/* El alto fijo no bastaba: la lista va ANTES de los totales y del método de
pago, así que al llenarse seguía empujándolos fuera de pantalla y había que
bajar igual.
Ahora el formulario se limita al alto de la ventana y reparte: los campos de
arriba y el bloque de cierre —totales, método de pago, botón— ocupan lo suyo,
y la lista se queda con TODO lo que sobra. Crezca lo que crezca la venta,
nada del cierre se mueve. */
.formularioVenta {
display: flex;
flex-direction: column;
max-height: calc(100vh - 150px);
min-height: 420px; /* en pantallas bajas no se comprime hasta ser inútil */
}
.formularioVenta > .box-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0; /* sin esto un hijo desplazable no encoge */
overflow: hidden;
}
/* Toda la venta —campos, lista, totales y método de pago— vive dentro de un
.box anidado, así que el reparto tiene que hacerse ahí dentro: si se le da
tamaño fijo, la lista nunca recibe el espacio sobrante. */
.formularioVenta > .box-body > .box {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
/* todo mantiene su tamaño natural… */
.formularioVenta > .box-body > .box > * { flex: 0 0 auto; }
/* …salvo la lista, que absorbe lo que sobre y cede cuando algo se despliega */
.formularioVenta > .box-body > .box > .nuevoProducto { flex: 1 1 auto; min-height: 0; }
.nuevoProducto {
overflow-y: auto;
overflow-x: hidden;
margin-left: 0;
margin-right: 0;
/* sitio para la barra, para que no tape el botón de quitar */
padding-right: 4px;
}
/* sin productos aún, la caja no debe reclamar espacio */
.nuevoProducto:empty { flex: 0 0 auto; overflow: visible; padding-right: 0; }
/* En pantallas pequeñas se vuelve al comportamiento normal: ahí el alto fijo
estorba más de lo que ayuda y es preferible desplazar la página entera. */
@media (max-width: 991px) {
.formularioVenta { display: block; max-height: none; min-height: 0; }
.formularioVenta > .box-body { display: block; overflow: visible; }
.nuevoProducto { max-height: 40vh; }
}
/* aviso visual de que hay más arriba o abajo */
.nuevoProducto {
scrollbar-width: thin;
border-radius: var(--pos-radius-sm);
}
/* El pie de los formularios largos —donde vive «Guardar venta»— se queda
pegado a la parte baja de la pantalla mientras el panel siga a la vista.
Junto con la lista desplazable de arriba, el bloque de cierre completo
—totales, método de pago y botón— permanece accesible. */
.formularioVenta > .box-footer,
.formularioGasto > .box-footer,
form[class*="formulario"] > .box-footer {
position: sticky;
bottom: 0;
z-index: 20;
/* opaco de verdad: por debajo pasan las filas de la tabla */
background: var(--pos-surface-2) !important;
box-shadow: 0 -6px 18px rgba(0, 0, 0, .28);
}
html.tema-claro .formularioVenta > .box-footer,
html.tema-claro .formularioGasto > .box-footer,
html.tema-claro form[class*="formulario"] > .box-footer {
box-shadow: 0 -6px 18px rgba(15, 23, 42, .10);
}
/* --- tarjetas de indicadores --------------------------------------------- */
/* AdminLTE las pinta de colores planos y saturados. Aquí pasan a ser tarjetas
oscuras con el color solo como acento: el número manda, no el fondo. */
.small-box {
background: var(--pos-surface) !important;
border: 1px solid var(--pos-line);
border-radius: var(--pos-radius);
box-shadow: none !important;
overflow: hidden;
position: relative;
transition: border-color .2s ease, transform .2s ease;
}
.small-box:hover { border-color: var(--pos-line-2); transform: translateY(-2px); }
.small-box > .inner { padding: 18px 18px 12px; }
.small-box h3 {
color: var(--pos-text) !important;
font-size: 27px !important;
font-weight: 700;
letter-spacing: -.02em;
margin: 0 0 6px;
white-space: nowrap;
}
.small-box p {
color: var(--pos-muted) !important;
font-size: 12.5px;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0;
}
.small-box > .small-box-footer {
background: transparent !important;
border-top: 1px solid var(--pos-line);
color: var(--pos-faint) !important;
font-size: 12px;
padding: 9px 18px;
transition: color .18s ease, background .18s ease;
}
.small-box > .small-box-footer:hover {
background: var(--pos-surface-2) !important;
color: var(--pos-gold) !important;
}
.small-box .icon {
top: 12px;
right: 14px;
font-size: 56px !important;
opacity: .13;
color: var(--pos-text-strong);
transition: opacity .2s ease;
}
.small-box:hover .icon { opacity: .2; }
/* El acento por tipo va como BORDE, no como box-shadow: así la sombra queda
libre para dar profundidad sin borrar el acento (que es lo que pasaba en el
tema claro, donde las tarjetas quedaban lavadas). */
.small-box { border-left: 3px solid var(--pos-line) !important; }
.small-box.bg-aqua, .small-box.bg-blue { border-left-color: var(--pos-info) !important; }
.small-box.bg-green, .small-box.bg-olive { border-left-color: var(--pos-ok) !important; }
.small-box.bg-yellow, .small-box.bg-orange { border-left-color: var(--pos-gold) !important; }
.small-box.bg-teal { border-left-color: #34d3c0 !important; }
.small-box.bg-red, .small-box.bg-maroon { border-left-color: var(--pos-danger) !important; }
.small-box.bg-purple { border-left-color: #a78bfa !important; }
.small-box.bg-aqua .icon, .small-box.bg-blue .icon { color: var(--pos-info); opacity: .22; }
.small-box.bg-green .icon, .small-box.bg-olive .icon { color: var(--pos-ok); opacity: .22; }
.small-box.bg-yellow .icon, .small-box.bg-orange .icon { color: var(--pos-gold); opacity: .22; }
.small-box.bg-teal .icon { color: #34d3c0; opacity: .22; }
.small-box.bg-red .icon, .small-box.bg-maroon .icon { color: var(--pos-danger); opacity: .22; }
.small-box.bg-purple .icon { color: #a78bfa; opacity: .22; }
/* los mismos bg-* usados fuera de small-box (etiquetas, cabeceras) */
.bg-aqua, .bg-blue { background-color: rgba(91,124,250,.14) !important; color: #9db1ff !important; }
.bg-green, .bg-olive { background-color: rgba(74,222,155,.14) !important; color: var(--pos-ok) !important; }
.bg-yellow, .bg-orange{ background-color: var(--pos-gold-soft) !important; color: var(--pos-gold) !important; }
.bg-teal { background-color: rgba(52,211,192,.14) !important; color: #34d3c0 !important; }
.bg-red, .bg-maroon { background-color: rgba(248,117,117,.14) !important; color: var(--pos-danger) !important; }
.bg-gray { background-color: var(--pos-surface-3) !important; color: var(--pos-text-soft) !important; }
/* dentro de small-box el fondo lo maneja .small-box, no estas reglas */
.small-box.bg-aqua, .small-box.bg-blue, .small-box.bg-green, .small-box.bg-olive,
.small-box.bg-yellow, .small-box.bg-orange, .small-box.bg-teal,
.small-box.bg-red, .small-box.bg-maroon, .small-box.bg-purple, .small-box.bg-gray {
background: var(--pos-surface) !important;
color: var(--pos-text) !important;
}
/* --- tablas --------------------------------------------------------------- */
.table { color: var(--pos-text); }
.table > thead > tr > th {
background: var(--pos-surface-2);
border-bottom: 1px solid var(--pos-line-2) !important;
border-top: 0 !important;
color: var(--pos-muted);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
padding: 9px 12px;
}
.table > tbody > tr > td {
border-top: 1px solid var(--pos-line) !important;
padding: 9px 12px; /* 11 era demasiado, 6 quedó apretado */
vertical-align: middle;
font-size: 13.5px;
}
/* Los botones dentro de las celdas —el stock, «Agregar», editar y borrar—
traen el relleno de un botón normal y son los que estiraban la fila mucho
más que el propio texto. Dentro de una tabla van compactos. */
.table > tbody > tr > td .btn {
padding: 5px 12px;
font-size: 12.5px;
line-height: 1.5;
}
.table > tbody > tr > td .btn-group .btn { padding: 5px 10px; }
.table > tbody > tr > td .img-thumbnail { padding: 2px !important; }
.table-hover > tbody > tr:hover,
.table > tbody > tr:hover { background-color: var(--pos-surface-2) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.015); }
.table-bordered, .table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th {
border-color: var(--pos-line) !important;
}
/* DataTables */
.dataTables_wrapper { color: var(--pos-text-soft); }
/* Las tablas anchas se cortaban contra el borde del panel y la columna de
Acciones quedaba fuera de alcance: sin barra de desplazamiento no había
forma de pulsar sus botones. Ahora la tabla se desplaza en horizontal
dentro de su panel. Se aplica al envoltorio de DataTables y no a .box-body,
porque hacer de este último un contenedor de desplazamiento recortaría los
menús desplegables que se abren dentro. */
/* Sin recorte ni barras. Se probó `overflow-x: auto` para las tablas anchas,
pero arrastraba dos problemas: el navegador forzaba también la barra
vertical, y al taparla con `overflow-y: hidden` se recortaba el paginador,
que queda al final del envoltorio. Como la causa del desbordamiento eran los
márgenes negativos de los controles —ya corregidos abajo— y la tabla ahora
se ajusta al 100%, no hace falta ningún recorte. */
.dataTables_wrapper { overflow: visible; }
/* DataTables le fija a la tabla un ancho en PÍXELES calculado al arrancar. Si
mide antes de que el panel se asiente, se pasa por uno o dos píxeles y salta
la barra horizontal aunque a la vista quepa. Forzando el 100% la tabla se
adapta al panel y solo se desplaza cuando las columnas de verdad no caben. */
.dataTables_wrapper table.dataTable {
width: 100% !important;
max-width: 100% !important;
}
/* LA CAUSA REAL de la barra horizontal: DataTables mete los controles de
«Mostrar» y «Buscar» y la paginación en