/* Ventana de compras y demás paneles de página completa en pantallas grandes (7-nov-2026). Va al final: solo afina lo anterior. */

/* 1) El panel mide la pantalla de verdad: con el zoom de los monitores grandes, «100vw» y «100dvh» se multiplicaban (2,816 px en una pantalla de 2,560) y el panel se salía por la derecha y por abajo: la barra de abajo quedaba fuera de la pantalla.
      Con las cuatro orillas en 0 se acomoda solo, sea cual sea el zoom. */
body #panel.panel.panel-pagina, body #panel.panel.panel-ancho { inset: 0; width: auto; max-width: none; height: auto; max-height: none; }

/* 2) Si la pantalla tiene menú lateral (se entró por un área), el panel se abre a la derecha del menú y debajo del encabezado: el menú y el encabezado se siguen viendo (atenuados), no desaparecen. */
@media (min-width: 961px) {
  body.con-area #panel.panel.panel-pagina:not(.panel-fijo), body.con-area #panel.panel.panel-ancho:not(.panel-fijo) { top: var(--alto-top-real, var(--alto-top)); left: 268px; }
}
@media (min-width: 1500px) {     /* el mismo ancho que el menú lateral angosto de abajo */
  body.con-area #panel.panel.panel-pagina:not(.panel-fijo), body.con-area #panel.panel.panel-ancho:not(.panel-fijo) { left: clamp(196px, 10%, 232px); }
}

/* 3) Campos numéricos sin las flechitas de subir y bajar: estorban y, al rodar el ratón, cambiaban la cantidad sin querer. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* 4) El menú lateral mide lo que queda de pantalla debajo del encabezado: su «100vh» también se multiplicaba por el zoom y se salía por abajo. */
body.con-area .lateral-area { height: auto; align-self: stretch; }


/* 5) Ventana de compras: pestañas (Mercancía · Gastos), tabla que se ve como tabla y la barra del total siempre abajo */
.ct-panel[hidden] { display: none !important; }
.compra-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--regla); }
.compra-tabs > button { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--regla); background: transparent; color: inherit; font-weight: 650; cursor: pointer; }
.compra-tabs > button[aria-selected=true] { background: var(--activo-bg, var(--oro)); color: var(--activo-tx, var(--carbon)); border-color: transparent; }
.compra-tabs .ct-n { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, transparent); font-size: .78rem; text-align: center; }
.compra-tabs .ct-n:empty { display: none; }
.compra-tabs .ct-escaner { margin: 0 0 0 auto; }

.tabla-compra { width: 100%; border-collapse: collapse; }
.tabla-compra thead th { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--papel, #1b2a26) 88%, currentColor 12%); border-bottom: 2px solid var(--regla); font-size: .82rem; padding: 10px 10px; white-space: nowrap; }
.tabla-compra td { border-bottom: 1px solid var(--regla); padding: 6px 10px; vertical-align: middle; }
.tabla-compra tbody tr[data-fila]:nth-child(even) { background: color-mix(in srgb, currentColor 4%, transparent); }
.tabla-compra tbody tr[data-fila]:hover { background: color-mix(in srgb, var(--oro) 10%, transparent); }
.tabla-compra .vacio { padding: 36px 12px; text-align: center; color: var(--tinta-suave); }
.compra-lineas { border: 1px solid var(--regla); border-radius: 12px; }

@media (min-width: 961px) {
  /* el panel de compras aprovecha el ancho de monitores grandes (antes quedaba una columna angosta al centro) */
  body #panel.panel.panel-ancho > header { padding-inline: max(26px, calc((100% - 1760px) / 2 + 26px)); }
  body #panel.panel.panel-ancho > .cuerpo { width: min(1760px, 100%); padding-bottom: 0; }
  /* la ventana es una columna: datos arriba, la tabla ocupa lo que sobra y la barra del total queda pegada abajo, sin tapar nada */
  #form-compra { display: flex; flex-direction: column; min-height: 100%; }
  #form-compra #lineas-compra { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  #form-compra #lineas-compra .compra-lineas { flex: 1 1 280px; max-height: none; min-height: 220px; }
  #form-compra #gastos-compra { flex: 1 1 auto; }
  #form-compra .barra-total-compra { position: sticky; bottom: 0; margin-top: 12px; border-radius: 14px 14px 0 0; }
}


/* ---------- PANTALLA DE COMPRAS: «Registrar compra» y «Modificar compra» (Nueva entrada) se abren como una pantalla normal en el mismo espacio de la página (a la derecha del menú, debajo del encabezado), con la tabla al centro y la barra del total pegada abajo ---------- */
@media (min-width: 961px) {
  body #panel.panel.panel-ancho > header { padding-inline: max(26px, calc((100% - 1760px) / 2 + 26px)); }
  body #panel.panel.panel-ancho > .cuerpo { width: min(1760px, 100%); max-width: none; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: 4px 26px 0; }
  /* una columna: datos y pestañas arriba, la tabla ocupa lo que sobra (con su propio desplazamiento) y la barra del total queda abajo */
  #panel.panel-ancho #form-compra { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #panel.panel-ancho #form-compra #lineas-compra { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #panel.panel-ancho #form-compra #lineas-compra .compra-lineas { flex: 1 1 0; min-height: 120px; max-height: none; overflow: auto; }
  #panel.panel-ancho #form-compra #gastos-compra { flex: 1 1 0; min-height: 0; overflow: auto; }
  #panel.panel-ancho #form-compra .barra-total-compra { position: static; flex: none; margin: 10px -26px 0; padding: 12px 26px; border-radius: 0; box-shadow: none; border-top: 1px solid var(--regla); }
  #panel.panel-ancho #form-compra .compra-tabs { margin: 8px 0; padding-bottom: 8px; }
  #panel.panel-ancho #form-compra .compra-captura { margin: 0 0 10px; }
}

/* 6) Menú lateral proporcional: ocupa una parte de la pantalla (15 %), ni más ancho que 252 px ni más angosto que 208 px. Junto con el ajuste automático de tamaño (escala94.js) se adapta solo a cualquier ventana. */
@media (min-width: 1100px) {
  body.sin-rail.con-area #app { grid-template-columns: clamp(208px, 15%, 252px) 1fr; }
  body.con-area #panel.panel.panel-pagina:not(.panel-fijo), body.con-area #panel.panel.panel-ancho:not(.panel-fijo) { left: clamp(208px, 15%, 252px); }
}

/* 7) Ajuste automático: la altura de la aplicación se mide contra la pantalla ya con el factor de escala (--z) que deja escala94.js; sin esto, al reducir quedaba una franja vacía abajo. */
@media (min-width: 961px) {
  html body #app { height: calc(100dvh / var(--z, 1)) !important; min-height: 0 !important; }
}

/* 8) Ventanas bajas (menos de 760 px de alto): la ventana de compras se compacta para que la tabla tenga lugar. */
@media (min-width: 961px) and (max-height: 760px) {
  #panel.panel-ancho #form-compra .compra-captura { padding: 10px 14px; margin: 0 0 6px; }
  #panel.panel-ancho #form-compra .compra-tabs { margin: 4px 0; padding-bottom: 4px; }
  #panel.panel-ancho #form-compra .barra-total-compra { margin-top: 6px; padding: 8px 22px; }
  #panel.panel-ancho #form-compra > .rejilla-2 { gap: 2px 12px; }
}

/* 9) Esquinas menos redondas en ventanas y cuadros: el redondeo grande le quitaba lugar al contenido. */
body #panel.panel, body #panel.panel.panel-fijo { border-radius: 8px; }
body #panel.panel > header { border-radius: 8px 8px 0 0; }
.modal-salida-caja, .fm-caja { border-radius: 10px; }
.inf-vent-caja { border-radius: 8px; }
.compra-captura, .compra-lineas, .compra-tabs > button { border-radius: 8px; }
@media (min-width: 961px) {
  body #panel.panel.panel-fijo.panel-ancho { border-radius: 8px; }
  body #panel.panel.panel-fijo.panel-ancho > header { border-radius: 8px 8px 0 0; }
  #panel.panel-ancho #form-compra .barra-total-compra { border-radius: 0 0 8px 8px; }
}

/* 10) Pantallas de captura (Nueva factura, cotización, pedido…) con el menú lateral: se abren como una pantalla normal en el mismo espacio de la página (a la derecha del menú y debajo del encabezado),
       sin tarjeta redondeada, sin sombra y sin oscurecer el menú ni el encabezado. */
@media (min-width: 961px) {
  body.con-area #panel.panel.panel-pagina:not(.panel-fijo), body.con-area #panel.panel.panel-ancho:not(.panel-fijo) { border-radius: 0; border: 0; box-shadow: none; }
  body.con-area #panel.panel.panel-pagina:not(.panel-fijo) > header, body.con-area #panel.panel.panel-ancho:not(.panel-fijo) > header { border-radius: 0; }
  body.con-area:has(#panel.panel.panel-pagina:not(.panel-fijo)) #velo, body.con-area:has(#panel.panel.panel-ancho:not(.panel-fijo)) #velo { background: transparent; }
}

/* 11) (los renglones de una sola línea y el botón «Lote…» viven ahora en compras100.css) */

/* 12) La compra es una pantalla, no una tarjeta puesta encima: se quita la tarjeta redondeada del formulario y la franja del encabezado (robaban espacio); el contenido va directo sobre la página, como en las demás pantallas. */
@media (min-width: 961px) {
  body #panel.panel.panel-ancho > header { background: transparent; border-bottom: 0; padding-top: 14px; padding-bottom: 8px; }
  body #panel.panel.panel-ancho > header h2 { font-size: clamp(1.4rem, 1.05rem + .6vw, 1.75rem); line-height: 1.2; }
  body #panel.panel.panel-ancho > .cuerpo { padding-top: 0; }
  #panel.panel-ancho #form-compra { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; }
  /* datos de la compra en una sola fila: «Nuevo proveedor» y «Activar crédito» se pegan arriba a la derecha de su campo en vez de abrir otra fila */
  #panel.panel-ancho #form-compra > .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) auto repeat(3, minmax(0, 1fr)); gap: 0 12px; margin: 0; align-items: end; }
}

/* 13) Con el ajuste automático de tamaño (html.con-escala), lo que ocupa toda la pantalla y se mide en unidades de pantalla (vh, dvh, lvh) se mide contra el factor --z: sin esto el salvapantallas, el inicio de sesión y las ventanas grandes dejaban una franja vacía abajo. */
html.con-escala #protector { bottom: 0; height: calc(100lvh / var(--z)); }
html.con-escala #protector .pr-centro { height: calc(100svh / var(--z)); }
html.con-escala .entrada { min-height: calc(100dvh / var(--z)); }
html.con-escala .inf-vent-caja { max-height: calc(100dvh / var(--z) - 32px); }
html.con-escala .inf-vent-caja.ancha { height: calc(100dvh / var(--z) - 32px); }
html.con-escala #asistente { height: min(580px, calc(100dvh / var(--z) - 90px)); }
html.con-escala .fm-caja { max-height: calc(100dvh / var(--z) - 32px); }

/* 14) «Activar crédito» chico y recortado: ya no le tapa el nombre a «Cómo se paga». */
@media (min-width: 961px) {
}

/* 15) «+ Nuevo proveedor» es una columna propia, al lado del campo de proveedor y del mismo alto (antes llevaba un margen negativo y el borde de la pantalla lo recortaba). Si se abre la caja para capturar el proveedor nuevo, esa columna crece lo necesario. */
@media (min-width: 961px) {
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(1) { grid-column: 1; grid-row: 1; }
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(2) { grid-column: 2; grid-row: 1; }
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(3) { grid-column: 3; grid-row: 1; align-self: end; margin: 0 0 4px !important; }
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(4) { grid-column: 4; grid-row: 1; }
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(5) { grid-column: 5; grid-row: 1; }
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(6) { grid-column: 6; grid-row: 1; }
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(3) .btn { min-height: 38px; padding: 0 12px; font-size: .86rem; white-space: nowrap; }
}

/* 16) Fila de datos de la compra pareja: todos los campos del mismo ancho y del mismo alto, alineados abajo; la nota de «crédito» no empuja la fila y las ayudas chicas no cambian la altura de unos sí y otros no. */
@media (min-width: 961px) {
  #panel.panel-ancho #form-compra > .rejilla-2 > .campo { margin: 0; gap: 4px; }
  #panel.panel-ancho #form-compra > .rejilla-2 > .campo small:not(#compra-sin-credito) { display: none; }
  #panel.panel-ancho #form-compra > .rejilla-2 > .campo input, #panel.panel-ancho #form-compra > .rejilla-2 > .campo select { height: 38px; min-height: 38px; box-sizing: border-box; padding-block: 0; margin: 0; }
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(3) .btn { height: 38px; }
  #panel.panel-ancho #form-compra > .rejilla-2 > :nth-child(3) { margin: 0 !important; }
}

/* 17) Gastos de la compra: cada gasto en una sola línea (concepto, importe, «se le debe al proveedor» y quitar), con aire antes de «Agregar gasto». */
@media (min-width: 961px) {
  #panel.panel-ancho #gastos-compra h3 { margin: 6px 0 2px; }
  #panel.panel-ancho #gastos-compra .rejilla-2 { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(140px, .7fr) auto auto; gap: 8px 16px; align-items: end; margin: 10px 0 0; padding: 0; }
  #panel.panel-ancho #gastos-compra .rejilla-2 > .campo { margin: 0; gap: 4px; }
  #panel.panel-ancho #gastos-compra .rejilla-2 .fila-check { grid-column: auto !important; align-self: center; margin: 0 0 6px; white-space: nowrap; }
  #panel.panel-ancho #gastos-compra .rejilla-2 > .btn { align-self: end; margin-bottom: 0; }
  #panel.panel-ancho #gastos-compra input:not([type=checkbox]) { height: 38px; box-sizing: border-box; }
  #panel.panel-ancho #gastos-compra #gasto-mas { margin-top: 16px; }
}

/* 18) Todas las pantallas de página completa de «Ventas y compras» (Nueva devolución, Nueva factura, cotización, pedido, remisión, anticipo…) se acomodan como la de Nueva entrada: sin tarjeta redondeada adentro de la página (robaba espacio), a todo lo ancho disponible (hasta 1760 px), con los campos en tres columnas y un ritmo vertical más corto para que quepan sin desplazar. */
@media (min-width: 961px) {
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) > header { background: transparent; border-bottom: 0; padding-block: 14px 8px; padding-inline: max(26px, calc((100% - 1760px) / 2 + 26px)); }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) > header h2 { font-size: clamp(1.4rem, 1.05rem + .6vw, 1.75rem); line-height: 1.2; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) > .cuerpo { width: min(1760px, 100%); padding: 0 26px 16px; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > .bloque { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 12px; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque > :not(.campo) { grid-column: 1 / -1; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque > .campo { margin: 0; gap: 4px; min-width: 0; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque > .campo small { font-size: .74rem; line-height: 1.25; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque > button[type=submit] { justify-self: start; width: auto; min-width: 240px; margin-top: 4px; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque input:not([type=checkbox]):not([type=radio]), body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque select { height: 38px; min-height: 38px; box-sizing: border-box; padding-block: 0; }
}

/* 19) El «aún no hay productos» de esas pantallas no ocupa media pantalla: queda compacto (la marca de agua se ve igual) y cabe todo sin desplazar. */
@media (min-width: 961px) {
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque .vacio { min-height: 0; padding-block: 22px; }
}

/* 20) Lo de pocos campos en «Ventas y compras» (Nueva devolución, factura, abono, anticipo…) se abre como ventana centrada, no como página completa: la página queda para lo largo (la compra). Campos en dos columnas para que quepa sin desplazar. */
@media (min-width: 961px) {
  body.diseno-std #panel.panel.panel-auto-ventana { width: min(1040px, 96%); max-height: 94%; }
  body.diseno-std #panel.panel.panel-auto-ventana > .cuerpo { padding: 4px 22px 18px; }
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo > form.bloque, body.diseno-std #panel.panel.panel-auto-ventana .cuerpo > .bloque > form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo form.bloque > :not(.campo), body.diseno-std #panel.panel.panel-auto-ventana .cuerpo > .bloque > form > :not(.campo) { grid-column: 1 / -1; }
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo form.bloque > .campo { margin: 0; gap: 4px; min-width: 0; }
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo form.bloque > .campo small { font-size: .74rem; line-height: 1.25; }
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo form.bloque > button[type=submit] { justify-self: start; width: auto; min-width: 240px; margin-top: 4px; }
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo form.bloque input:not([type=checkbox]):not([type=radio]), body.diseno-std #panel.panel.panel-auto-ventana .cuerpo form.bloque select { height: 38px; min-height: 38px; box-sizing: border-box; padding-block: 0; }
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo form.bloque .vacio { min-height: 0; padding-block: 22px; }
}

/* 21) Ventana sin «ventana dentro de ventana»: el bloque de adentro ya no es otra tarjeta redondeada con borde y fondo; el contenido va directo sobre la ventana. */
@media (min-width: 961px) {
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo > .bloque { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 8px; }
}

/* 22) El «aún no hay productos» con la marca de agua del logo: completa (no recortada) y más tenue. Se dibuja en un fondo propio, contenida en la altura que tenga, con la mitad de intensidad. */
body.diseno-std .cuerpo form.bloque .vacio, .compra-lineas .vacio, .tabla-compra .vacio { position: relative; isolation: isolate; background: none !important; min-height: 150px !important; padding-block: 16px !important; }
body.diseno-std .cuerpo form.bloque .vacio::before, .compra-lineas .vacio::before, .tabla-compra .vacio::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; background: url("vacio-marca.svg") center / contain no-repeat; opacity: .5; pointer-events: none; }

/* 23) «Nuevo proveedor» (desde una compra, una devolución o la ficha de un producto): ventana centrada con todos los datos, en dos columnas, alineada a la izquierda. */
.modal-confirma .modal-salida-caja.prov-modal { width: min(680px, 100%); text-align: left; padding: 18px 22px; }
.modal-confirma .modal-salida-caja.prov-modal h3 { margin-bottom: 10px; }
.prov-modal .rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 8px; }
.prov-modal .campo { margin: 0 0 6px; }
.prov-modal .modal-salida-botones { justify-content: flex-end; margin-top: 10px; }
@media (max-width: 560px) { .prov-modal .rejilla-2 { grid-template-columns: 1fr; } }

/* 24) Listas con buscador: el PROPIO CAMPO es el buscador. Al tocarlo se escribe ahí mismo y la lista (todas las opciones, o solo las que coinciden) cae justo debajo, del mismo ancho. Sin barra de búsqueda aparte. En celular se conserva la hoja desde abajo con su barra. */
.bs .bs-q-campo { position: absolute; left: 1px; top: 1px; bottom: 1px; right: 38px; width: auto; height: auto; min-height: 0; margin: 0; padding: 0 0 0 13px; border: 0; border-radius: 11px 0 0 11px; background: var(--blanco); color: var(--tinta); font: inherit; box-shadow: none; outline: none; z-index: 1; }
.bs .bs-btn[aria-expanded=true]:not([data-sin-busca]) .bs-txt { visibility: hidden; }
.bs-lista.bs-en-campo { border-radius: 12px; }

/* 25) Campos con sugerencias (cliente, producto, clave…): misma lista que las demás, con el nombre arriba y el código chico debajo. */
.bs-lista .bs-ul li .bs-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-lista .bs-ul li small { display: block; opacity: .65; font-size: .78em; line-height: 1.2; }

/* 26) Campo de búsqueda sin coincidencias (clientes, proveedores…): dice que no hay y ofrece, con un botón discreto, agregarlo ahí mismo sin ir a su pantalla. */
.bs-lista .bs-ul li.bs-nada { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; cursor: default; color: var(--tinta-suave); }
.bs-lista .bs-ul li.bs-nada:hover { background: transparent; }
.bs-alta { padding: 5px 12px; min-height: 0; border: 1px solid var(--regla); border-radius: 8px; background: transparent; color: var(--tinta); font: inherit; font-size: .85rem; cursor: pointer; }
.bs-alta:hover, .bs-alta:focus-visible { border-color: var(--jade); color: var(--jade); outline: none; }

/* 27) Listas y campos más finos y sobrios (estándar de diseño): borde delgado y discreto, esquinas de 8 px, letra un poco menor, sin negritas ni brillos. El texto largo (p. ej. «Uso del CFDI») se parte en dos renglones en lugar de cortarse o ensanchar el campo. */
.bs { min-width: 0; max-width: 100%; }
.rejilla-2 > .campo, .prov-modal .campo { min-width: 0; }
.bs-btn { height: auto; min-height: 38px; padding: 6px 10px 6px 12px; border-radius: 8px; border-color: color-mix(in srgb, var(--regla) 85%, transparent); font-size: .94rem; line-height: 1.3; }
.bs-btn:hover { border-color: color-mix(in srgb, var(--tinta-suave) 70%, transparent); }
.bs-btn:focus-visible, .bs-btn[aria-expanded=true] { border-color: color-mix(in srgb, var(--oro) 80%, transparent); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--oro) 22%, transparent); }
.bs-txt { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.bs-btn svg { width: 16px; height: 16px; opacity: .5; }
.bs .bs-q-campo { border-radius: 7px 0 0 7px; font-size: .94rem; }
.bs-lista { border: 1px solid color-mix(in srgb, var(--regla) 90%, transparent); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: .94rem; }
.bs-lista.bs-en-campo { border-radius: 10px; }
.bs-ul { padding: 4px; }
.bs-ul li { padding: 7px 10px; border-radius: 6px; line-height: 1.3; }
.bs-ul li.bs-act { background: color-mix(in srgb, var(--oro) 13%, transparent); }
.bs-ul li.bs-sel { font-weight: 500; background: color-mix(in srgb, var(--oro) 8%, transparent); }
.bs-ul li.bs-sel::before { content: "✓ "; font-size: .85em; opacity: .8; }
.bs-busca { padding: 6px 10px; }
.bs-busca input { min-height: 32px; font-size: .94rem; }
@media (min-width: 961px) {
  .campo select, .campo input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) { border-radius: 8px; border-color: color-mix(in srgb, var(--regla) 85%, transparent); font-size: .94rem; }
  .campo select { min-height: 38px; padding-block: 0; }
}

/* 28) Productos elegidos como etiquetas (Borrar ofertas por rango y similares): una etiqueta por producto, con su código chico y una × para quitarlo. */
.chips-prod { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.chips-prod:empty { display: none; }
.chip-prod { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 6px 4px 10px; border: 1px solid color-mix(in srgb, var(--regla) 85%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--oro) 8%, transparent); font-size: .9rem; line-height: 1.2; }
.chip-prod > span { min-width: 0; overflow-wrap: anywhere; }
.chip-prod small { display: block; opacity: .6; font-size: .8em; }
.chip-prod button { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .65; }
.chip-prod button:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

/* 29) Estándar: los campos y listas ocupan TODO el ancho de su celda (antes un select quedaba de 80 px en una celda de 312 y se desperdiciaba el espacio). */
#vista .campo > select, #vista .campo > textarea, #vista .campo > .bs, #vista .campo > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
#panel .campo > select, #panel .campo > textarea, #panel .campo > .bs, #panel .campo > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.modal-confirma .campo > select, .modal-confirma .campo > textarea, .modal-confirma .campo > .bs, .modal-confirma .campo > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]) { width: 100%; box-sizing: border-box; }

/* 30) Pantallas de cambios masivos (Actualizar precios de venta, Actualizar costos): todos los filtros en pocos renglones, la tabla de vista previa sube y toma el alto que queda de pantalla. */
@media (min-width: 961px) {
  #pv-form, #co-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; align-items: end; }
  #pv-form .rejilla-2, #co-form .rejilla-2, #co-form #co-valor { display: contents; }
  #pv-form > #err-pv, #co-form > #err-co, #co-form > #co-lista { grid-column: 1 / -1; }
  #co-form #co-valor .campo { max-width: none !important; }
  #pv-form .campo, #co-form .campo { margin: 0; }
  #pv-form > button[type=submit], #co-form > button[type=submit] { width: auto; justify-self: start; margin: 0; }
  #com-cuerpo > section.bloque:has(> #pv-form), #com-cuerpo > section.bloque:has(> #co-form) { padding: 12px 14px; margin-bottom: 10px; }
  #pv-vista > .bloque, #co-vista > .bloque { padding: 10px 14px; }
  #pv-vista .aviso-caja, #co-vista .aviso-caja { margin: 0 0 6px; padding: 6px 12px; }
  #pv-vista h3, #co-vista h3 { margin: 4px 0 6px; }
}

@media (min-width: 961px) {
  /* la vista previa en pocos renglones: avisos lado a lado; título con su filtro y botones en la misma línea; nota y botón «Aplicar» juntos abajo */
  #pv-vista > .bloque, #co-vista > .bloque { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  #pv-vista > .bloque > .aviso-caja, #co-vista > .bloque > .aviso-caja { flex: 1 1 300px; margin: 0; }
  #pv-vista > .bloque > h3, #co-vista > .bloque > h3 { flex: 0 0 auto; margin: 0; }
  #pv-vista > .bloque > .kit-barra, #co-vista > .bloque > .kit-barra { flex: 1 1 380px; margin: 0; }
  #pv-vista > .bloque > .tabla-scroll, #co-vista > .bloque > .tabla-scroll, #pv-vista > .bloque > .pag-barra, #co-vista > .bloque > .pag-barra { flex: 1 1 100%; }
  #pv-vista > .bloque > .nota, #co-vista > .bloque > .nota { flex: 1 1 260px; margin: 0; }
  #pv-vista > .bloque > #pv-aplicar, #co-vista > .bloque > #co-aplicar { flex: none; margin: 0 !important; }
}

/* 31) El control de cada campo ocupa toda su celda: una regla global dejaba la columna del campo del ancho de su contenido (fechas y listas de 120 px en celdas de 550). */
#vista .campo, #panel .campo, .modal-confirma .campo { grid-template-columns: minmax(0, 1fr); }

/* 32) Pantallas de Ventas y compras a todo lo ancho en monitores grandes (la hoja de compactos las dejaba en 1120 px con mucho espacio a los lados) y sin la tarjeta con borde alrededor de los filtros y de la vista previa. */
@media (min-width: 901px) {
  body.diseno-std #vista > *, body.diseno-std #vista:has(> * form > .rejilla-2) > * { max-width: none; }
  body.diseno-std #com-cuerpo > section.bloque, body.diseno-std #pv-vista > .bloque, body.diseno-std #co-vista > .bloque { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; }
}

/* 33) Formularios con campos en pares (.rejilla-2): en la ventana (2 columnas) y en la página (3 columnas) todos los campos fluyen parejo en la misma rejilla, sin renglones sueltos de uno y de dos (Nuevo almacén…). */
@media (min-width: 961px) {
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque .rejilla-2,
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo > form.bloque .rejilla-2 { display: contents; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque .rejilla-2 > .campo,
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo > form.bloque .rejilla-2 > .campo { margin: 0; gap: 4px; min-width: 0; }
  body.diseno-std #panel.panel.panel-pagina:not(.panel-fijo):not(.panel-ancho) .cuerpo > form.bloque .alm82-sub,
  body.diseno-std #panel.panel.panel-auto-ventana .cuerpo > form.bloque .alm82-sub { margin: 10px 0 0; }
}

/* 34) Estándar (Ventas y compras y Almacén): sin contenedor doble en ninguna ventana (también las que se abren con ventana explícita); botones de acción separados de las pestañas; filtros y botón de la misma altura y alineados. */
body.diseno-std #panel.panel.panel-fijo .cuerpo > .bloque { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0 0 8px; }
#tabs-inv + .barra-herramientas { margin: 12px 0 0; }
@media (min-width: 961px) {
  body.diseno-std .barra-herramientas { align-items: flex-end; gap: 10px 12px; }
  body.diseno-std .barra-herramientas .campo input, body.diseno-std .barra-herramientas .campo select, body.diseno-std .barra-herramientas .campo .bs-btn { min-height: 38px; height: 38px; box-sizing: border-box; }
  body.diseno-std .barra-herramientas > .btn, body.diseno-std .barra-herramientas > button.btn { min-height: 38px; height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; margin-top: 0; margin-bottom: 0; }
}

/* 35) Almacén y Ventas y compras: (a) los campos de una barra de filtros tienen ancho natural (fechas, listas), no se estiran por toda la pantalla; el campo de producto/artículo es el único ancho; (b) las páginas de función van planas, sin tarjeta alrededor de la tabla ni del contenido; (c) lo que lleva una tabla no se mete en una tarjeta. */
body.diseno-std .barra-herramientas > .campo { flex: 0 1 200px; min-width: 150px; max-width: 280px; margin: 0; }
body.diseno-std .barra-herramientas > .campo.a80-art, body.diseno-std .barra-herramientas > .campo.bp-caja { flex: 1 1 300px; min-width: 220px; max-width: 480px; }
body.diseno-std .barra-herramientas > .campo.a80-folio { flex: 0 1 110px; min-width: 100px; }
body.diseno-std .barra-herramientas > .btn, body.diseno-std .barra-herramientas > button { flex: 0 0 auto; }
body.diseno-std :is(#panel, #panel-fn-fondo).pagina-fn .cuerpo > .bloque, body.diseno-std :is(#panel, #panel-fn-fondo).pagina-fn .cuerpo > section.bloque { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
body.diseno-std #vista section.bloque:has(> .tabla-scroll), body.diseno-std #vista section.bloque:has(> table.tabla), body.diseno-std #vista section.bloque:has(> .kit-barra) { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; }

/* 36) Tarjetas sueltas (una opción con casilla, una cifra de resumen) con el tamaño de su contenido: no se estiran por toda la pantalla en monitores grandes. */
@media (min-width: 961px) {
  body.diseno-std .a80-opcion, body.diseno-std #vista .a80-opcion { width: fit-content; max-width: min(100%, 640px); }
  body.diseno-std .franja { width: fit-content; max-width: 100%; min-width: min(100%, 260px); }
}

/* 37) Páginas de función (Toma de inventario, Volcado, Hoja de conteo…): los campos de un formulario tienen un ancho razonable, no ocupan toda la pantalla; los pares se acomodan en columnas de ancho natural. */
@media (min-width: 961px) {
  body.diseno-std :is(#panel, #panel-fn-fondo).pagina-fn .cuerpo .rejilla-2 { grid-template-columns: repeat(auto-fill, minmax(240px, 360px)); }
  body.diseno-std :is(#panel, #panel-fn-fondo).pagina-fn .cuerpo .campo { max-width: 480px; }
  body.diseno-std :is(#panel, #panel-fn-fondo).pagina-fn .cuerpo .barra-herramientas > .campo { max-width: 280px; }
  body.diseno-std :is(#panel, #panel-fn-fondo).pagina-fn .cuerpo .barra-herramientas > .campo.a80-art { max-width: 480px; }
}

/* 38) Lista del buscador de producto con fotos (compras, traspasos, salidas, conteo, kárdex): flota sobre todo (se cuelga del cuerpo de la página) en lugar de quedar recortada o debajo de la ventana que la contiene. */
.bp-lista.bp-flotante { position: fixed; right: auto; top: auto; bottom: auto; margin: 0; z-index: 700; box-sizing: border-box; }

/* 39) Renglones de productos (Registrar salida, Nuevo traspaso…) en pantallas grandes: un renglón por producto, como tabla — nombre y código, cantidad, existencia y botón de quitar en una sola línea, sin tarjetas grandes ni franja de color a un lado (el estado se lee en el texto de color). */
@media (min-width: 961px) {
  body.diseno-std .a80-lineas { border: 1px solid var(--regla); border-radius: 8px; overflow: hidden; margin-top: 8px; }
  body.diseno-std .a80-lineas .a80-linea { display: grid; grid-template-columns: minmax(200px, 2fr) auto minmax(150px, 190px) minmax(170px, 1.4fr) auto; align-items: center; gap: 6px 14px; padding: 6px 12px; margin: 0; border: 0; border-bottom: 1px solid var(--regla); border-radius: 0; background: transparent; }
  body.diseno-std .a80-lineas .a80-fila:last-child .a80-linea { border-bottom: 0; }
  body.diseno-std .a80-lineas .a80-enc { display: contents; }
  body.diseno-std .a80-lineas .a80-nom { grid-column: 1; grid-row: 1; }
  body.diseno-std .a80-lineas .a80-var { grid-column: 2; grid-row: 1; margin: 0; }
  body.diseno-std .a80-lineas .a80-ctl { grid-column: 3; grid-row: 1; }
  body.diseno-std .a80-lineas .a80-ctl .campo { display: flex; align-items: center; gap: 8px; margin: 0; }
  body.diseno-std .a80-lineas .a80-ctl .campo input { width: 96px; min-height: 34px; height: 34px; }
  body.diseno-std .a80-lineas .a80-estado { grid-column: 4; grid-row: 1; font-size: .86rem; font-weight: 600; }
  body.diseno-std .a80-lineas .a80-estado::before { content: "●"; margin-right: 6px; font-size: .7em; vertical-align: 1px; }
  body.diseno-std .a80-lineas [data-quitar] { grid-column: 5; grid-row: 1; justify-self: end; min-height: 30px; height: 30px; padding: 0 10px; }
  body.diseno-std .a80-lineas .a80-nom strong { font-size: .94rem; }
  body.diseno-std .a80-lineas .a80-nom small { font-size: .78rem; }
}

/* 40) Ventanas: los botones de acción (Guardar, Registrar…) quedan fijos abajo. Si el contenido es largo la ventana se desplaza por dentro y los botones siguen a la vista, sin bajar hasta el final. */
body.diseno-std #panel.panel.panel-fijo .acciones-fijas { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px -22px 0; padding: 10px 22px 12px; background: var(--blanco); border-top: 1px solid var(--regla); }
body.diseno-std #panel.panel.panel-auto-ventana .acciones-fijas { bottom: -18px; margin-bottom: -18px; padding-bottom: 14px; }
body.diseno-std #panel.panel.panel-fijo .acciones-fijas > .btn { margin: 0; min-width: 200px; }
body.diseno-std #panel.panel.panel-fijo .acciones-fijas > p { flex: 1 1 100%; margin: 0; }

/* 41) Barra de botones fija de las ventanas, compacta: poco margen y botones de 36 px (no roba espacio al contenido). */
body.diseno-std #panel.panel.panel-fijo .acciones-fijas { margin: 6px -22px 0; padding: 6px 22px 8px; gap: 8px; }
body.diseno-std #panel.panel.panel-auto-ventana .acciones-fijas { padding-bottom: 8px; }
body.diseno-std #panel.panel.panel-fijo .acciones-fijas > .btn, body.diseno-std #panel.panel.panel-fijo .acciones-fijas .btn { min-height: 36px; height: 36px; padding-block: 0; min-width: 150px; }
body.diseno-std #panel.panel.panel-fijo .acciones-fijas > div, body.diseno-std #panel.panel.panel-fijo .acciones-fijas > button { margin: 0 !important; padding-top: 0; padding-bottom: 0; }
body.diseno-std #panel.panel.panel-fijo .acciones-fijas > div { display: flex; flex-wrap: wrap; gap: 8px; }

/* 42) La barra de botones llega justo al borde de abajo de la ventana (sin franja vacía debajo). */
body.diseno-std #panel.panel.panel-fijo > .cuerpo { padding-bottom: 0; }
body.diseno-std #panel.panel.panel-fijo .acciones-fijas, body.diseno-std #panel.panel.panel-auto-ventana .acciones-fijas { bottom: 0; margin-bottom: 0; padding-bottom: 8px; }
body.diseno-std #panel.panel.panel-fijo .cuerpo > .bloque, body.diseno-std #panel.panel.panel-fijo .cuerpo > form { margin-bottom: 0; }

/* 43) Barra de botones de las ventanas: aún más justa abajo. */
body.diseno-std #panel.panel.panel-fijo .acciones-fijas, body.diseno-std #panel.panel.panel-auto-ventana .acciones-fijas { margin-top: 4px; padding: 5px 22px 3px; }

/* 44 a 46) La pantalla de entrada (ancho del formulario, tableta en vertical y fundido de la foto) pasó a acceso94.css, que cargan el Administrativo y el POS web. */

/* 47) Menú principal (mosaicos): los íconos se ven más grandes en pantallas grandes y en tabletas, y el bloque queda CENTRADO a lo alto (antes se pegaba arriba y dejaba vacía la mitad de abajo). En laptops de 13" y en celular no cambia el tamaño. */
@media (min-width: 641px) { .menu-mosaicos.menu-mosaicos { align-content: center; min-height: calc(100 * var(--uvh, 1vh) - 112px); } }
@media (min-width: 641px) and (max-width: 960px) and (min-height: 760px) {
  .menu-mosaicos.menu-mosaicos { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 30px 10px; }
  .menu-mosaicos .mos .mos-ico { width: clamp(88px, 12vw, 112px); }
  .menu-mosaicos .mos .mos-nombre { font-size: .98rem; }
}
/* Tableta grande (iPad Pro, 961-1699 px): en vertical, o con dedo en horizontal. Una laptop de 13" (horizontal, con mouse) no entra aqui. */
@media (min-width: 961px) and (max-width: 1699px) and (min-height: 760px) and (max-aspect-ratio: 1/1), (pointer: coarse) and (min-width: 961px) and (max-width: 1699px) and (min-height: 700px) {
  .menu-mosaicos.menu-mosaicos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .menu-mosaicos .mos .mos-ico { width: clamp(100px, min(9.5vw, 11vh), 150px); }
  .menu-mosaicos .mos .mos-nombre { font-size: 1.02rem; }
}
/* Monitor grande (mas de 1500 px de ancho y 880 px de alto: 24", 27", 32"). Con el alto bajo (laptop de 1536x730) no cambia. */
@media (min-width: 1500px) and (min-height: 880px) and (min-aspect-ratio: 1/1) {
  .menu-mosaicos.menu-mosaicos { grid-template-columns: repeat(auto-fill, minmax(clamp(112px, 10vw, 280px), 1fr)); }
  .menu-mosaicos .mos .mos-ico { width: clamp(76px, min(9vw, 12.5vh), 220px); }
  .menu-mosaicos .mos .mos-nombre { font-size: clamp(.88rem, 1.05vw, 1.6rem); }
}

/* 48) Administración con el estándar: (a) las secciones de las pantallas (tarjetas con borde) van planas, con su título, igual que en Ventas y compras y Almacén; (b) una casilla dentro de una barra de filtros ("Solo con saldo") es una casilla con su texto al lado, no un campo de 150 px con el texto aplastado; (c) la franja de botones para cambiar de tema es más compacta y cabe en una sola línea en una laptop. */
body:is(.area-administracion, .area-empresa) #vista .tarjeta { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; }
body.diseno-std .barra-herramientas > .campo.campo-check { flex: 0 0 auto; width: auto; max-width: none; min-height: 38px; margin: 0; }
body.diseno-std .barra-herramientas .campo.campo-check input { width: 20px; min-width: 20px; height: 20px; min-height: 0; flex: none; }
body.diseno-std .barra-herramientas .campo.campo-check span { white-space: nowrap; }
@media (min-width: 901px) {
  body:is(.area-administracion, .area-empresa) #vista .filtros:has(> [data-adm], > [data-b84-tab], > [data-emp], > [data-pers]) { gap: 5px; margin-bottom: 12px; }
  body:is(.area-administracion, .area-empresa) #vista .filtros:has(> [data-adm], > [data-b84-tab], > [data-emp], > [data-pers]) > button { min-height: 32px; padding: 0 10px; font-size: .8rem; }
}

/* 49) Administración, pantallas de función con un formulario largo (Gasto de un vendedor, Conceptos de gasto): los campos van en tres columnas, sin una tarjeta con borde adentro de la página («Factura, proveedor y vendedor» era una caja con borde dentro de la pantalla) y con los campos del mismo alto que los del resto del sistema. Los pares (.rejilla-2) y los bloques que se muestran u ocultan (cuenta, sucursal) fluyen en la misma rejilla. */
@media (min-width: 961px) {
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque > :not(.campo):not(.rejilla-2):not(div:has(> .campo)) { grid-column: 1 / -1; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque > .rejilla-2, body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque > div:has(> .campo):not(.oculto) { display: contents; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque > .campo, body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque .rejilla-2 > .campo, body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque details > .campo { margin: 0; gap: 4px; min-width: 0; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque details { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 4px 0 0; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque details::details-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque details > summary { margin-bottom: 8px; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque details > :not(.campo):not(.rejilla-2):not(summary) { grid-column: 1 / -1; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque details > .rejilla-2 { display: contents; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque input:not([type=checkbox]):not([type=radio]), body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque select { height: 38px; min-height: 38px; box-sizing: border-box; padding-block: 0; }
  body:is(.area-administracion, .area-empresa) #panel.pagina-fn .cuerpo > form.bloque button[type=submit] { justify-self: start; width: auto; min-width: 240px; }
}

/* 49b) Lo mismo dentro de una ventana (Nuevo gasto): la sección plegable «Factura, proveedor y vendedor» no es una caja con borde adentro de la ventana; sus campos siguen las dos columnas de la ventana. */
@media (min-width: 961px) {
  body:is(.area-administracion, .area-empresa) #panel.panel-auto-ventana .cuerpo form.bloque details { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 2px 0 0; }
  body:is(.area-administracion, .area-empresa) #panel.panel-auto-ventana .cuerpo form.bloque details > summary { margin-bottom: 8px; }
  body:is(.area-administracion, .area-empresa) #panel.panel-auto-ventana .cuerpo form.bloque details::details-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: start; }
  body:is(.area-administracion, .area-empresa) #panel.panel-auto-ventana .cuerpo form.bloque details > .campo { margin: 0; gap: 4px; min-width: 0; }
  body:is(.area-administracion, .area-empresa) #panel.panel-auto-ventana .cuerpo form.bloque details > :not(.campo):not(.rejilla-2):not(summary) { grid-column: 1 / -1; }
}

/* 50) (a) El logo de las pantallas vacías sale una sola vez por pantalla: el resto de los «no hay…» van solo con su texto, compactos. (b) Administración: las secciones de una pantalla van planas (sin caja con borde) y se separan con una línea fina recta, para ver dónde empieza cada una. (c) «Más datos» plegable de la cuenta de banco. */
.vacio.sin-logo { background: none !important; min-height: 0 !important; padding-block: 14px !important; }
.vacio.sin-logo::before { display: none !important; }
body:is(.area-administracion, .area-empresa) #vista :is(section, div).bloque { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; }
body:is(.area-administracion, .area-empresa) #vista :is(section.tarjeta, section.bloque):not(:first-child) { border-top: 1.5px solid color-mix(in srgb, var(--tinta-suave, #8aa) 45%, transparent); border-radius: 0; padding-top: 16px; margin-top: 20px; }
.b84-mas > summary { cursor: pointer; font-weight: 650; min-height: 40px; display: flex; align-items: center; }
.b84-mas > summary::before, .g85-mas > summary::before { content: ""; width: 7px; height: 7px; margin-right: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.b84-mas[open] > summary::before, .g85-mas[open] > summary::before { transform: rotate(45deg); }

/* 51) Tableta en vertical (761 a 900 px: iPad de 768 y 820) dentro de un área (Ventas y compras, Almacén, Administración, Empresa): el marco tiene tres filas (encabezado, el menú del área en una barra y la pantalla), pero una regla de «dos filas» mandaba la pantalla a la fila 2, encima de la barra del menú, que la tapaba. La pantalla va en la fila 3. */
@media (min-width: 761px) and (max-width: 900px) {
  html body.con-area #app > main#vista { grid-row: 3; }
}

/* 52) Marca de agua de las pantallas vacías: UNA, en el centro de la pantalla (detrás de todas las secciones), no pegada a la primera sección. Ver adm96.js (.marca-vacia). */
:is(#vista, #panel.pagina-fn, #panel-fn-fondo.pagina-fn).marca-vacia { position: relative; isolation: isolate; }
:is(#vista, #panel.pagina-fn, #panel-fn-fondo.pagina-fn).marca-vacia::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: min(100%, calc((100dvh - 120px) / var(--z, 1))); z-index: -1; pointer-events: none; background: url("vacio-marca.svg") center / min(340px, 46%) auto no-repeat; }
/* 52b) En pantallas de la página, el «no hay…» NUNCA lleva marca propia (ni un instante): la única marca es la del centro de la pantalla (.marca-vacia). Antes cada «no hay…» mostraba la suya un momento y luego se quitaba. */
#vista :is(p, div).vacio, #panel.pagina-fn :is(p, div).vacio, #panel-fn-fondo.pagina-fn :is(p, div).vacio { background: none; }

/* 53) Columna «N°» en las listas largas (las que se parten en páginas): el número de cada renglón, para saber cuántos se ven y en cuál va. Es un contador de CSS dentro de la primera celda de datos (después de la casilla de elegir), así no cambia el orden de las columnas, ni el ordenar, ni lo que se descarga. Sigue contando entre páginas (--num-ini) y se renumera al filtrar. */
.tabla.con-num tbody { counter-reset: fila var(--num-ini, 0); }
.tabla.con-num tbody tr { counter-increment: fila; }
.tabla.con-num :is(thead th, tbody td):is(.hl-cel + *, :first-child:not(.hl-cel)) { padding-left: 54px; }
.tabla.con-num tbody td:is(.hl-cel + td, :first-child:not(.hl-cel)) { position: relative; }
.tabla.con-num tbody td:is(.hl-cel + td, :first-child:not(.hl-cel))::before, .tabla.con-num thead th:is(.hl-cel + th, :first-child:not(.hl-cel))::before { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 36px; text-align: right; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--tinta-suave); font-weight: 500; pointer-events: none; }
.tabla.con-num tbody td:is(.hl-cel + td, :first-child:not(.hl-cel))::before { content: counter(fila); }
.tabla.con-num thead th:is(.hl-cel + th, :first-child:not(.hl-cel))::before { content: "N°"; font-weight: 700; }

/* 54) Empresa: las secciones de «Mi negocio» (y de las demás pantallas con secciones) van planas, sin caja con borde, separadas por una línea fina recta, igual que en Administración. Las tarjetas de plugins sí son tarjetas. */
body.area-empresa #vista section.seccion { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; }
body.area-empresa #vista section.seccion:not(:first-child) { border-top: 1.5px solid color-mix(in srgb, var(--tinta-suave, #8aa) 45%, transparent); padding-top: 16px; margin-top: 20px; }
body.area-empresa #vista:has(#form-perfil) section.seccion { background: transparent; border: 0; border-top: 1.5px solid color-mix(in srgb, var(--tinta-suave, #8aa) 45%, transparent); border-radius: 0; box-shadow: none; padding: 14px 0 6px; margin: 0; }
body.area-empresa #vista:has(#form-perfil) section.seccion:first-child { border-top: 0; padding-top: 0; }

/* 55) Reportes (Vendedores y comisiones…): la pantalla sube y se compacta en pantalla grande: el periodo y la lista de reporte van en la misma fila, y el aviso del corte semanal es una barra delgada de una línea (antes ocupaba 70 px y empujaba la tabla hacia abajo). */
.rep-aviso-corte { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (min-width: 961px) {
  #vista:has(> .rep-aviso-corte) { display: grid; grid-template-columns: max-content minmax(240px, 340px) 1fr; column-gap: 14px; row-gap: 8px; align-items: end; align-content: start; padding-top: 10px; }
  #vista:has(> .rep-aviso-corte) > .cabecera, #vista:has(> .rep-aviso-corte) > .rep-aviso-corte, #vista:has(> .rep-aviso-corte) > #rep-cuerpo { grid-column: 1 / -1; }
  #vista:has(> .rep-aviso-corte) > .cabecera { margin-bottom: 0; }
  #vista:has(> .rep-aviso-corte) > label.campo { margin: 0 !important; max-width: none !important; }
  #vista:has(> .rep-aviso-corte) > .barra-herramientas { margin: 0; }
  .rep-aviso-corte { padding: 5px 12px !important; font-size: .86rem; min-height: 0; }
  .rep-aviso-corte .btn { min-height: 30px; height: 30px; padding: 0 14px; font-size: .84rem; }
}

/* 56) Lista de Productos: las filas de acciones y filtros van más juntas (ocupaban casi un tercio de la pantalla antes de ver el primer producto). */
@media (min-width: 961px) {
  #vista:has(#tabla-prod) > .cabecera { margin-bottom: 4px; }
  #vista:has(#tabla-prod) > .barra-herramientas { margin: 0 0 4px; row-gap: 6px; }
  #vista:has(#tabla-prod) > .lp75-barra { margin: 0 0 6px; }
  #vista:has(#tabla-prod) #pag-prod { margin: 6px 0 0; padding-right: 84px; }
}

/* 57) Mi negocio por apartados: lo que no es del apartado elegido se esconde (negocio97.js); la segunda fila de pestañas es compacta. */
.sub-oculta { display: none !important; }
@media (min-width: 901px) { #vista .filtros.neg-sub { gap: 5px; margin: 0 0 4px; } #vista .filtros.neg-sub > button { min-height: 32px; padding: 0 12px; font-size: .84rem; } }

/* 58) Perfil de acceso (permisos de la caja): las secciones de la página van planas con su línea fina y los permisos (casillas) en dos columnas, no una lista larguísima de una sola columna. */
@media (min-width: 961px) {
  body:is(.area-administracion, .area-empresa) #panel.panel-pagina #form-perfil-edit > section.tarjeta { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 14px 0 6px; margin: 8px 0 0 !important; border-top: 1.5px solid color-mix(in srgb, var(--tinta-suave, #8aa) 45%, transparent); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
  body:is(.area-administracion, .area-empresa) #panel.panel-pagina #form-perfil-edit > section.tarjeta > h2 { grid-column: 1 / -1; }
  body:is(.area-administracion, .area-empresa) #panel.panel-pagina #form-perfil-edit > section.tarjeta > .rejilla-2 { grid-column: 1 / -1; }
}

/* 59) Configuración de ticket por apartados. Cada opción es un renglón con su casilla y su explicación debajo (nada se encima aunque el texto sea largo), las secciones se separan con una línea fina, y el selector de documento y los apartados son pestañas. */
.tk-cols { align-items: start; }
.tk-docs { display: inline-flex; gap: 0; padding: 4px; border: 1px solid var(--regla); border-radius: 12px; margin: 0 0 8px; background: color-mix(in srgb, var(--blanco) 60%, transparent); }
.tk-docs button { min-height: 38px; padding: 0 20px; border: 0; border-radius: 9px; background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
.tk-docs button[aria-pressed=true] { background: var(--acento-fuerte, #f2a33a); color: #1b1b1b; }
.tk-ayuda, .tk-doc-ayuda { margin: 0 0 14px; color: var(--tinta-suave); font-size: .9rem; line-height: 1.45; max-width: 68ch; }
.tk-aviso { margin: 6px 0 0; color: var(--tinta-suave); font-size: .85rem; line-height: 1.4; }
.tk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1.5px solid color-mix(in srgb, var(--tinta-suave, #8aa) 35%, transparent); }
.tk-tabs button { min-height: 34px; padding: 0 14px; font-size: .88rem; }
.tk-panel { min-width: 0; padding-bottom: 8px; }
.tk-grupo { padding: 16px 0 6px; }
.tk-grupo + .tk-grupo { border-top: 1px solid color-mix(in srgb, var(--tinta-suave, #8aa) 28%, transparent); }
.tk-grupo > h3 { margin: 0 0 4px; font-size: 1.02rem; }
.tk-grupo > .tk-ayuda { margin-bottom: 10px; }
.tk-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 28px; }
.tk-op { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px 2px; min-height: 48px; cursor: pointer; }
.tk-op input { width: 20px; height: 20px; margin-top: 2px; }
.tk-op-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.tk-op-t strong { font-weight: 600; line-height: 1.3; }
.tk-op-t small { color: var(--tinta-suave); font-size: .8rem; line-height: 1.4; font-weight: 400; }
.tk-op-off { opacity: .6; cursor: not-allowed; }
.tk-cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; align-items: start; }
.tk-campo { display: flex; flex-direction: column; gap: 5px; margin: 0 0 10px; min-width: 0; }
.tk-rotulo { font-weight: 600; font-size: .92rem; }
.tk-ayuda-c { color: var(--tinta-suave); font-size: .8rem; line-height: 1.4; font-weight: 400; }
.tk-campo input, .tk-campo select, .tk-campo textarea { width: 100%; }
.tk-lineas { display: flex; flex-direction: column; gap: 8px; }
.tk-linea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto auto; gap: 8px 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed color-mix(in srgb, var(--tinta-suave, #8aa) 25%, transparent); }
.tk-linea > input[type=text] { min-width: 0; }
.tk-neg { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; white-space: nowrap; cursor: pointer; }
.tk-palabras { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 22px; }
.tk-estilos { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tk-estilo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.tk-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: sticky; bottom: 0; z-index: 3; padding: 12px 0 10px; margin-top: 10px; background: var(--papel-2, #17201e); border-top: 1px solid color-mix(in srgb, var(--tinta-suave, #8aa) 25%, transparent); }
@media (max-width: 700px) {
  .tk-linea { grid-template-columns: minmax(0, 1fr) auto; }
  .tk-linea > select { grid-column: 1 / 2; }
  .tk-docs { display: flex; }
  .tk-docs button { flex: 1 1 0; padding: 0 8px; }
}
/* 60. Recuadro del logo en la vista previa del ticket (solo se ve en pantalla, no se imprime): mismo lugar y tamaño que tendría el logo real. */
.tk-logo-ej { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; margin-bottom: 6px; border: 1px dashed #8a918f; color: #5d6563; font-size: .85rem; font-weight: 600; }
/* 61. Apartados de «Opciones de documentos»: lo que no es del apartado elegido se esconde (sin mover los campos). */
.op-oculto { display: none !important; }
#op-form .tk-tabs { margin-bottom: 14px; }
/* 62. Salvapantallas: UN bloque con el precio de hoy del dólar, el euro y las demás divisas (Banco de México), una a la vez, con su gráfica y si sube o baja. Mismo vidrio que el aviso; si no hay lugar, se esconde. */
#protector .pr-divisas { width: min(520px, 100%); margin: clamp(8px, 1.8vh, 16px) auto 0; padding: 9px 18px 8px; border-radius: 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); color: #fff; }
#protector .pr-divisas:empty { display: none; }
#protector .pr-div-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cod var" "val spark"; column-gap: 16px; row-gap: 0; align-items: center; transition: opacity .35s ease; }
#protector .pr-div-cuerpo.saliendo { opacity: 0; }
#protector .pr-cod { grid-area: cod; font-size: .78rem; font-weight: 700; letter-spacing: .05em; opacity: .85; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#protector .pr-var { grid-area: var; font-size: .82rem; font-weight: 700; text-align: right; white-space: nowrap; }
#protector .pr-div-cuerpo b { grid-area: val; font: 700 clamp(1.6rem, 3.4vw, 2.2rem)/1.15 var(--f-cifra, system-ui); text-align: left; }
#protector .pr-var.sube { color: #fde3b0; }
#protector .pr-var.baja { color: #8fe3d0; }
#protector .pr-spark { grid-area: spark; width: 100%; height: 44px; color: #fff; overflow: visible; }
#protector .pr-div-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 3px; font-size: .72rem; opacity: .7; }
#protector .pr-puntos { display: inline-flex; gap: 5px; }
#protector .pr-puntos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); }
#protector .pr-puntos i.activo { background: #fff; }
@media (prefers-reduced-motion: reduce) { #protector .pr-div-cuerpo { transition: none; } }
/* 63. Salvapantallas, ajuste por pantalla. El precio de las divisas ya no se esconde: en pantalla ancha va en un panel de vidrio a la IZQUIERDA (espejo del aviso de la derecha); en pantalla angosta baja al centro y, si la ventana es muy baja o muy angosta, se compacta a una sola línea (solo el valor y si sube o baja). Y todo el contenido crece con --ps (la mide modulos37.js: 1 en laptop, hasta 2.2 en monitores grandes) para no dejar el espacio vacío. */
#protector .pr-centro > * { zoom: var(--ps, 1); }
#protector .pr-centro > .pr-hora { zoom: calc(1 + (var(--ps, 1) - 1) * .35); }      /* el reloj ya crece con el ancho de la pantalla: aquí solo un poco más, para no chocar con los paneles de los lados */
@media (max-width: 1099px), (max-height: 599px) {
  #protector .pr-divisas { padding: 7px 14px 6px; }
  #protector .pr-spark { height: 34px; }
}
@media (max-height: 560px), (max-width: 760px), (max-width: 1099px) and (max-height: 820px) {
  #protector .pr-divisas { padding: 5px 12px; width: min(360px, 100%); }
  #protector .pr-div-cuerpo { grid-template-areas: "cod var" "val val"; }
  #protector .pr-spark, #protector .pr-div-pie > span:last-child { display: none; }
  #protector .pr-div-cuerpo b { font-size: 1.35rem; }
}
@media (max-height: 360px), (max-width: 240px) { #protector .pr-divisas { display: none; } }
@media (min-width: 1100px) and (min-height: 600px) {
  #protector .pr-divisas { position: absolute; left: clamp(24px, 4vw, 64px); top: 50%; transform: translateY(-50%); width: min(340px, 26vw); margin: 0; padding: 22px 24px 18px; border-radius: 24px; backdrop-filter: blur(12px); background: rgba(255,255,255,.10); text-align: left; }
  #protector .pr-div-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cod" "val" "var" "spark"; row-gap: 4px; }
  #protector .pr-var { text-align: left; }
  #protector .pr-div-cuerpo b { font-size: clamp(2.2rem, 3.4vw, 3rem); }
  #protector .pr-spark { height: 64px; margin-top: 6px; }
  #protector .pr-div-pie { margin-top: 10px; font-size: .78rem; }
}