/* ==========================================================================
CAPA DEL TELEFONO
--------------------------------------------------------------------------
La hoja de porkys.css se escribio para el monitor del mostrador y, bajo
760px, solo "aprieta" lo que estorba. Esta capa es la que lo hace comodo con
el dedo: blancos de toque de 42-48px, letra de 16px en los campos (iOS hace
zoom al tocar uno mas chico), tiras que se deslizan en vez de filas que
se apilan, hojas desde abajo en vez de ventanas, y tarjetas en vez de tablas
de veinte columnas para lo que se teclea.
Se carga DESPUES de porkys.css y solo en una pantalla tactil o estrecha (el
atributo media del en base.html): en el monitor ni se descarga. Va en
tres tramos:
1. lo que vale siempre que el dedo es el puntero y la pantalla es estrecha;
2. (pointer:coarse): tamanos de toque, tambien en una tableta;
3. (max-width:760px): la disposicion del telefono. En el telefono tactil
lo que rodea a una lista se acorta (3a'): la tabla es lo que se mira.
========================================================================== */
/* ---- 1. Base ----------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 100vh en un telefono incluye la barra de direcciones y deja la barra de
abajo -Guardar, Cancelar- fuera de la vista; 100dvh sigue a la que se ve. */
@supports (height:100dvh){html,body{height:100dvh}}
body{
-webkit-tap-highlight-color:rgba(255,92,153,.22);
/* La muesca y la barra de inicio de un iPhone no tapan nada. */
padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
padding-bottom:env(safe-area-inset-bottom);
}
/* Sin el retardo ni el zoom del doble toque en lo que se pulsa. */
a,button,input,select,textarea,summary,label,[role=button]{touch-action:manipulation}
/* Llegar al final de una lista no tiene que arrastrar la pagina ni recargarla:
se perderia lo escrito en un formulario. */
main.contenido,.marco-grilla,.tabla-ancha,.panel-valores,.lista-valores,.popup-cuerpo,
.barra-menu,.barra-herramientas,.tb-tira,.barra-filtros,.pie-resumen{overscroll-behavior:contain}
/* ---- 2. Toque: pointer:coarse (telefono y tableta) --------------------- */
@media (pointer:coarse){
/* Letra de 16px: por debajo, iOS Safari amplia la pagina al enfocar el campo. */
input,select,textarea{font-size:16px}
.buscador,.barra-filtros .buscador,.filtro-barra select,.filtro-barra input,
.filtro-barra input[type=date],.editor-inline,.editor-celda,
.caja-totales input.editor-inline{font-size:16px}
input[type=checkbox],input[type=radio]{width:22px;height:22px;flex:0 0 22px;min-width:22px}
.alerta-cerrar{min-width:40px;min-height:40px}
.totales-comprobante .campo,.totales-comprobante .campo input{min-width:0}
.buscador,.barra-filtros .buscador{min-height:44px;padding:8px 12px}
.filtro-barra select,.filtro-barra input[type=date]{min-height:44px;padding:8px 10px}
.campo input:not([type=checkbox]):not([type=radio]),.campo select,
.campo-formulario input:not([type=checkbox]):not([type=radio]),.campo-formulario select,
.editor-inline{min-height:44px}
input[type=file]{min-height:44px;padding:10px 0;font-size:16px}
.bloque-piezas .busca-pieza input,.alta-descuento-pieza .busca-pieza input,.buscador-piezas{
min-height:44px;font-size:16px}
/* Un enlace con aspecto de boton mide lo mismo que un boton (un en linea no
toma el min-height). */
a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
table.simple.caja-totales input{min-height:44px}
/* CAJA: las flechas de dia y la fecha. */
.caja-dia-fecha .btn{min-width:44px}
.caja-dia-fecha input[type=date]{min-height:44px;font-size:16px;padding:6px 8px}
.aviso-pruebas a{display:inline-block;padding:13px 4px}
.campo textarea{min-height:92px;font-size:16px}
/* Dentro de una tabla -hay filas con diez campos- un campo de 38px basta. */
table.simple input:not([type=checkbox]):not([type=radio]),table.simple select{min-height:38px}
.conmutador{min-height:44px;font-size:14px;gap:9px}
.conmutador .pista{width:46px;height:26px;border-radius:13px}
.conmutador .pista i{top:3px;left:3px;width:20px;height:20px}
.conmutador.on .pista i{left:23px}
.selector-opciones{font-size:13px}
.selector-opciones button{min-height:44px;padding:8px 14px;font-size:13px}
.marca-filtro{font-size:12px;padding:6px 12px}
/* Botones de la barra: el dedo es mas ancho que el puntero. */
.tb-btn,.barra-herramientas .tb-menu .tb-btn{min-height:44px;padding:8px 14px;font-size:14px;
gap:7px;border-radius:6px}
.tb-btn span{font-size:14px}
.tb-btn.tb-nuevo{padding:8px 18px}
.tb-btn.tb-nuevo span{font-size:19px}
.desplegable button{min-height:48px;padding:13px 18px;font-size:15px}
.btn,.acciones-proceso .btn{min-height:44px;padding:9px 18px;font-size:14px}
.barra-acciones .btn,.barra-acciones.con-resumen .btn,.btn-guardar,
.barra-acciones.con-resumen .btn-guardar{min-height:48px;font-size:15px}
.btn-icono{min-width:44px;min-height:44px}
.barra-paginas button{min-width:44px;min-height:44px;font-size:14px}
.popup-pie .btn{min-height:46px}
/* Menu superior. En una tableta -mas ancha que 760px- los siete grupos tampoco
caben con letra de 14px: la barra se desliza y los submenus salen fijos bajo
su grupo (dentro de una barra que se desliza un submenu absoluto se recorta). */
.barra-menu{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.barra-menu::-webkit-scrollbar{display:none}
.menu-raiz{flex:0 0 auto;height:48px;font-size:14px}
.menu-usuario{flex:0 0 auto}
.submenu{position:fixed;top:48px;min-width:220px}
.cal-mas-btn,.cal .cal-atajos{display:none}
.submenu a{min-height:48px;padding:14px 18px;font-size:15px}
.menu-usuario{font-size:13px}
/* La tabla: letra y filas que se leen y se tocan. Las celdas de casilla
son todo el blanco para marcar la fila. */
table.grilla{font-size:13px}
table.grilla th{font-size:12px;padding-top:12px;padding-bottom:12px}
table.grilla td{padding-top:8px;padding-bottom:8px}
.celda-check{width:48px}
table.grilla th[data-campo]{padding-right:44px}
table.grilla th .embudo{right:10px;width:32px}
.casilla-sel,.casilla-bool{width:22px;height:22px}
table.simple{font-size:13px}
table.simple th,table.simple td{padding-top:8px;padding-bottom:8px}
table.simple tfoot td{font-size:14px}
.valor-opcion,.columna-opcion{min-height:46px}
.buscador-valores{min-height:44px;font-size:16px;padding:8px 12px}
.panel-valores-pie .btn{min-height:46px;font-size:14px}
/* Pie de totales: el rotulo de 8px no se lee. */
.pie-resumen .total-etiqueta,.caja-cifra span{font-size:11px}
.barra-acciones.con-resumen .pie-resumen .total-cifra,
.barra-acciones.con-resumen .pie-resumen .total-cuenta .total-cifra{font-size:14px}
/* El interruptor "Recordarme" de la pantalla de acceso. */
.fila-recordar{min-height:48px}
.interruptor{width:68px;height:34px;border-radius:17px}
.interruptor .bola{top:3px;left:3px;width:28px;height:28px}
.interruptor.si .bola{left:37px}
.interruptor .etiqueta{top:8px;right:10px;font-size:14px}
.ver-pass{width:64px}
.tarjeta h2{font-size:15px}
.nota-tabla,.pista{font-size:12.5px}
summary{min-height:44px;display:flex;align-items:center}
/* Calendario: los chips, las razones y los campos se tocan. calendario.css se
carga despues (va dentro de la pagina) y escribe font:inherit en sus campos:
el ``.cal`` delante les gana por especificidad. */
.cal .cal-razon{min-height:40px;padding:6px 12px;font-size:13px}
.cal .cal-chip{min-height:40px;padding:6px 12px;font-size:13px}
.cal .cal-titulo{min-height:44px;font-size:20px}
.cal .cal-tabs button{min-height:46px}
.cal .cal-tercero-quitar{min-width:44px;min-height:44px;right:0;top:0}
.cal .cal-item input[type=checkbox]{width:26px;height:26px}
.cal .cal-filtros input[type=search],.cal .cal-form input[type=text],.cal .cal-form input[type=time],
.cal .cal-form input[type=date],.cal .cal-form textarea{min-height:44px;font-size:16px}
.cal .cal-form textarea{min-height:92px}
}
/* ---- 3a. Barras y hojas: telefono, o telefono de lado --------------------- */
/* De lado la pantalla es ancha pero mide ~375px de alto: cuatro filas de botones de
44px no dejan ver la tabla. Las barras y las ventanas se comportan como en vertical. */
@media (max-width:760px),(pointer:coarse) and (max-height:520px){
/* --- Barras: una tira que se desliza, no cinco filas apiladas --------- */
/* Los botones van bajo el titulo, en una sola linea que se desliza de lado.
El que queda a medias en el borde dice que hay mas. */
.barra-herramientas{padding:6px 8px 2px;gap:2px;align-items:stretch}
.titulo-pantalla{order:-1;flex:1 0 100%;padding:0 2px;margin:0 0 2px;font-size:13px;
line-height:1.2;letter-spacing:1.5px}
.tb-tira{display:flex;flex:1 0 100%;flex-wrap:nowrap;align-items:center;gap:6px;
overflow-x:auto;overflow-y:hidden;padding:2px 0 6px;scrollbar-width:none;
-webkit-overflow-scrolling:touch}
.tb-tira::-webkit-scrollbar{display:none}
/* Con ACCIONES desplegado hay quince botones: en una tira habria que deslizar
cinco pantallas para llegar a Exportar. Quien las despliega las quiere todas a la vista:
se acomodan en varias filas. */
.tb-tira:has(#accionesBarra:not([hidden])){flex-wrap:wrap;overflow:visible}
.tb-tira>*,.acciones-barra>*{flex:0 0 auto}
/* Los desplegables salen como una hoja desde abajo: dentro de una tira que se
desliza, un menu anclado a su boton quedaria recortado. */
.tb-menu .desplegable{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
min-width:0;max-height:70dvh;overflow-y:auto;z-index:300;border:none;
border-top:1px solid var(--control-borde);border-radius:16px 16px 0 0;
padding:6px 0 calc(8px + env(safe-area-inset-bottom));
box-shadow:0 -12px 34px rgba(0,0,0,.65)}
.tb-menu .desplegable.lista-especies{max-height:70dvh;white-space:normal}
.tb-menu .desplegable button{border-bottom:1px solid var(--linea-fina)}
/* Filtros: tambien en una tira; el buscador crece si sobra sitio. */
.barra-filtros{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:center;
gap:8px;padding:4px 8px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.barra-filtros::-webkit-scrollbar{display:none}
.barra-filtros>*{flex:0 0 auto}
.barra-filtros .buscador{flex:1 0 190px;width:auto;min-width:190px}
.bloque-fechas{gap:8px}
.filtro-barra{flex-wrap:nowrap;font-size:13px}
/* --- Ventanas: hojas que suben desde abajo ---------------------------- */
.popup{align-items:flex-end;padding:0;background:rgba(14,4,9,.78)}
.popup-caja,.caja-formulario,.caja-pagos,.popup-caja-movimiento,.popup-caja-caja,
.popup-caja-arqueo{width:100vw;min-width:0;max-width:100vw;max-height:94dvh;margin:0;
border-radius:16px 16px 0 0;display:flex;flex-direction:column}
.popup-cabecera,.popup-pie{flex:0 0 auto}
.popup-cuerpo,.popup-caja-movimiento .popup-cuerpo,.popup-caja-caja .popup-cuerpo{
flex:1 1 auto;min-height:0;overflow:auto;padding:14px}
.popup-pie{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
/* El filtro de una columna (lista de valores) sube desde abajo, como los menus: el JS
lo coloca junto al embudo con left/top/width escritos en el elemento, de ahi el
!important. */
.panel-valores{left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
width:auto !important;min-width:0;max-width:none;max-height:78dvh;z-index:310;
border-radius:16px 16px 0 0;padding:12px 12px calc(12px + env(safe-area-inset-bottom))}
.lista-valores{max-height:46dvh}
.panel-valores-pie{display:flex;gap:8px}
.panel-valores-pie .btn{flex:1 1 0;padding:10px 6px}
}
/* ---- 3a'. Telefono: la lista manda --------------------------------------- */
/* Con los blancos de 44-48px del tramo 2, en un telefono el menu, la barra, el
buscador, la cabecera, el paginador, el pie y Guardar/Cancelar se comian mas de
media pantalla: en GANADO se veian siete filas. En el telefono -de pie o de
lado- lo que rodea a la tabla baja a 34-40px, que se sigue tocando bien con el
dedo, y las filas a ~30px: en 360x668 GANADO pasa de 7 a 12 filas. Los campos
conservan la letra de 16px (es la que evita el zoom de iOS); la tableta, mas
ancha que 760px y de pie, sigue con el tramo 2. */
@media (pointer:coarse) and (max-width:760px),(pointer:coarse) and (max-height:520px){
.menu-raiz{height:40px;font-size:13px}
.submenu{top:40px}
.menu-usuario{font-size:12px}
.barra-herramientas{padding:4px 6px 0}
.titulo-pantalla{margin:0 0 1px;font-size:12px}
.tb-tira{gap:5px;padding:2px 0 4px}
.tb-btn,.barra-herramientas .tb-menu .tb-btn{min-height:34px;padding:5px 11px;font-size:13px;gap:6px}
.tb-btn span{font-size:13px}
.tb-btn.tb-nuevo{padding:5px 14px}
.tb-btn.tb-nuevo span{font-size:17px}
.barra-filtros{gap:6px;padding:2px 6px 5px}
.buscador,.barra-filtros .buscador{min-height:36px;padding:5px 10px}
.filtro-barra select,.filtro-barra input[type=date]{min-height:36px;padding:5px 8px}
.selector-opciones button{min-height:36px;padding:5px 11px}
.conmutador{min-height:36px}
.marca-filtro{font-size:11px;padding:4px 10px}
/* La tabla: la celda de la casilla sigue siendo todo el blanco para marcar la
fila; el embudo, todo el alto de la cabecera. Sin los 44px que el embudo
reservaba a la derecha, el titulo de una columna estrecha ("Pieza") se lee. */
table.grilla{font-size:12.5px}
table.grilla th{font-size:11.5px;padding-top:7px;padding-bottom:7px}
table.grilla td{padding-top:5px;padding-bottom:5px}
.celda-check{width:38px}
/* input[...] del tramo 2 pesa mas que una sola clase: sin el input delante la
casilla seguia en 22px y fijaba el alto de la fila. */
input.casilla-sel,input.casilla-bool{width:19px;height:19px;flex:0 0 19px;min-width:19px}
table.grilla th[data-campo]{padding-left:5px;padding-right:26px}
table.grilla th .embudo{right:8px;width:18px}
.barra-paginas{padding:2px 6px;font-size:12px}
.barra-paginas button{min-width:36px;min-height:32px;padding:3px 10px;font-size:13px}
/* El paginador por paginas (COMPRAS) son ocho botones: envueltos ocupaban dos
renglones. Va en una tira, como la barra. */
.barra-paginas:not(.continua){flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.barra-paginas:not(.continua)::-webkit-scrollbar{display:none}
.barra-paginas:not(.continua)>*{flex:0 0 auto}
.barra-acciones .btn,.barra-acciones.con-resumen .btn,.btn-guardar,
.barra-acciones.con-resumen .btn-guardar{min-height:38px;font-size:14px}
}
/* Telefono de lado: ~375px de alto. El titulo ya lo dice el menu, y en 700px de
ancho los totales y Guardar/Cancelar caben en una franja, como en la tableta. */
@media (pointer:coarse) and (max-height:520px){
.titulo-pantalla{display:none}
.barra-herramientas{padding-top:4px}
.tb-tira{padding:0 0 4px}
.barra-acciones.con-resumen{flex-wrap:nowrap}
.barra-acciones.con-resumen .pie-resumen{flex:1 1 auto}
.barra-acciones.con-resumen .btn{flex:0 0 auto;padding:6px 14px}
.popup-caja,.caja-formulario,.caja-pagos,.popup-caja-movimiento,.popup-caja-caja{max-height:98dvh}
}
/* ---- 3b. Telefono: formularios, tablas y tarjetas (max-width:760px) ------- */
@media (max-width:760px){
/* --- Formularios ------------------------------------------------------- */
/* El buscador de un combo ocupa el ancho entero, como los demas campos. */
.campo-combo{display:block;width:100%;flex:1 1 100%}
.campo-combo input:not([type=hidden]){width:100%}
.tarjeta{padding:12px 10px}
.tarjeta h2{margin-bottom:10px}
.detraccion-campos{grid-template-columns:minmax(0,1fr)}
.totales-comprobante{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.totales-comprobante .campo{flex-wrap:wrap}
.totales-comprobante .campo label{flex:1 0 100%;white-space:normal}
.totales-comprobante .campo input{flex:1 1 100%;width:100%;max-width:none}
/* Mas campos por pantalla: los cortos van de dos en dos y los largos (un
buscador, un texto) ocupan la fila. */
.rejilla-campos{gap:14px 10px}
.rejilla-campos[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
.rejilla-campos>.campo{margin-bottom:0}
/* El navegador deja un hueco entre un campo y el siguiente: la etiqueta ya
lo separa. */
.campo{gap:3px}
.campo label{font-size:12px;letter-spacing:.2px}
/* LEER VOUCHER: la foto encima de lo leido, a todo el ancho. */
.nota-voucher{margin:-4px 0 10px}
.voucher-vista{flex-direction:column;margin-left:0}
.voucher-vista img{max-width:100%;max-height:260px}
.voucher-lectura .btn{width:100%}
.acciones-proceso{padding:8px 8px calc(8px + env(safe-area-inset-bottom));
box-shadow:0 -8px 22px rgba(0,0,0,.45)}
.acciones-proceso .btn{flex:1 1 140px}
/* Un grupo de botones dentro de un formulario (vencimiento: 5, 10, 15 dias...)
pasa a la linea siguiente en vez de salirse de la tarjeta. */
.tarjeta .selector-opciones{display:flex;flex-wrap:wrap;gap:6px;white-space:normal}
.tarjeta .selector-opciones .selector-titulo{flex:1 0 100%;margin:0}
.tarjeta .selector-opciones button{border-radius:6px;border-left:1px solid var(--control-borde)}
/* Un enlace dentro de una tabla se alcanza con el dedo sin agrandar la fila. */
.enlace-celda{display:inline-block;padding:11px 6px;margin:-11px -6px;white-space:nowrap}
/* --- Tablas que se deslizan: se nota que hay mas a la derecha --------- */
.tabla-ancha{
background:
linear-gradient(to right,var(--panel) 30%,transparent) left center/36px 100% no-repeat local,
linear-gradient(to left,var(--panel) 30%,transparent) right center/36px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.55),transparent) left center/12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.55),transparent) right center/12px 100% no-repeat scroll;
-webkit-overflow-scrolling:touch}
/* --- Tablas de lineas -> tarjetas ------------------------------------- */
/* Lo que se teclea linea por linea (PIEZAS de la compra, lineas de factura,
conceptos, descuentos, cuotas) no cabe en 375px sin dejar los campos del
ancho de un dedo. Cada fila pasa a una tarjeta, y cada celda se rotula con
el titulo de su columna (static/js/porkys-movil.js escribe data-et). El
DOM no cambia: el JS de cada pantalla sigue leyendo las mismas celdas. */
.tabla-ancha:has(table.reflujo){overflow:visible;background:none}
table.reflujo{display:block;width:100%;max-width:100%;border:0;font-size:14px}
table.reflujo thead{display:none}
table.reflujo tbody{display:flex;flex-direction:column;gap:10px}
table.reflujo tbody tr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
gap:8px;padding:12px 10px;background:var(--fondo-fila);border:1px solid var(--linea);
border-left:3px solid var(--acento);border-radius:8px}
table.reflujo tbody td{display:block;grid-column:span 6;min-width:0;padding:0;border:0;
text-align:left;font-size:14px;color:var(--texto);background:none}
table.reflujo tbody td::before,table.reflujo tfoot td::before{content:attr(data-et);display:block;
margin:0 0 3px;font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
color:var(--texto-tenue)}
table.reflujo td[data-et=""]::before,table.reflujo td:not([data-et])::before{display:none}
table.reflujo td.num{text-align:left}
/* Los anchos de los campos venian escritos en la celda (style="width:110px"). */
table.reflujo td input:not([type=checkbox]):not([type=radio]),table.reflujo td select{
width:100% !important;max-width:none !important;min-width:0}
table.reflujo td .campo-combo{display:block;width:100%}
table.reflujo td input:not([type=checkbox]):not([type=radio]),table.reflujo td select{
min-height:44px;font-size:16px;padding:8px 10px;border-radius:6px;
background:var(--campo);border:1px solid var(--control-borde);color:var(--texto)}
table.reflujo td input:focus,table.reflujo td select:focus{border-color:var(--acento);outline:none}
table.reflujo td input:disabled,table.reflujo td select:disabled{opacity:.6}
table.reflujo td .btn,table.reflujo td .btn-icono{min-width:44px;min-height:44px}
table.reflujo tfoot{display:block;margin-top:2px}
table.reflujo tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;
align-items:baseline;gap:4px 14px;padding:10px 12px;background:var(--panel);
border:1px solid var(--linea);border-top:2px solid var(--acento);border-radius:8px}
table.reflujo tfoot td{display:flex;align-items:baseline;gap:6px;padding:0;border:0;
background:none;font-size:14px;font-weight:700}
table.reflujo tfoot td::before{display:inline;margin:0}
table.reflujo tfoot td:empty{display:none}
table.reflujo tfoot td.num{color:var(--cifra-total)}
/* "Total conceptos adicionales ... 0.00": el texto ya dice de que es cada cifra. */
table.reflujo-texto tfoot tr{justify-content:space-between;align-items:center}
table.reflujo-texto tfoot td::before{display:none}
/* "Sin descuentos." no es una linea: se lee como un aviso. */
table.reflujo tbody tr.fila-vacia{display:block;padding:12px;background:none;
border:1px dashed var(--linea);border-radius:8px;color:var(--texto-tenue)}
/* Texto + monto (conceptos, descuentos): la descripcion ocupa la fila. */
table.reflujo-texto tbody td:nth-child(1){grid-column:1/-1}
table.reflujo-texto tbody td:nth-child(2){grid-column:1/10}
table.reflujo-texto tbody td:nth-child(3){grid-column:10/13;align-self:end;justify-self:end}
/* PIEZAS de la compra: producto arriba; pieza, PZ, peso y costo en una fila; la
categoria y el total cierran la tarjeta. */
table.reflujo-piezas tbody td:nth-child(1){grid-column:1/3;grid-row:1;align-self:center;
font-size:17px;font-weight:700;color:var(--acento)}
table.reflujo-piezas tbody td:nth-child(1)::before{display:inline;content:"#";margin:0;
font-size:inherit;color:inherit;text-transform:none}
table.reflujo-piezas tbody td:nth-child(3){grid-column:3/11;grid-row:1}
table.reflujo-piezas tbody td:nth-child(9){grid-column:11/13;grid-row:1;justify-self:end;align-self:end}
table.reflujo-piezas tbody td:nth-child(2){grid-column:1/4;grid-row:2}
table.reflujo-piezas tbody td:nth-child(5){grid-column:4/6;grid-row:2}
table.reflujo-piezas tbody td:nth-child(6){grid-column:6/9;grid-row:2}
table.reflujo-piezas tbody td:nth-child(7){grid-column:9/13;grid-row:2}
table.reflujo-piezas tbody td:nth-child(4){grid-column:1/8;grid-row:3;align-self:center;
font-size:12px;color:var(--texto-tenue)}
table.reflujo-piezas tbody td:nth-child(4)::before{display:none}
table.reflujo-piezas tbody td:nth-child(4):empty{display:none}
table.reflujo-piezas tbody td:nth-child(8){grid-column:8/13;grid-row:3;text-align:right;
align-self:center;font-weight:700;font-size:15px;color:var(--cifra-total)}
table.reflujo-piezas tbody td:nth-child(8)::before{display:inline;margin-right:6px}
/* Articulos de la compra (registrados antes): el nombre arriba, las cifras abajo. */
table.reflujo-art-compra tbody td:nth-child(1){grid-column:1/11;font-weight:700}
table.reflujo-art-compra tbody td:nth-child(1)::before{display:none}
table.reflujo-art-compra tbody td:nth-child(6){grid-column:11/13;justify-self:end;align-self:start}
table.reflujo-art-compra tbody td:nth-child(2){grid-column:1/4}
table.reflujo-art-compra tbody td:nth-child(3){grid-column:4/7}
table.reflujo-art-compra tbody td:nth-child(4){grid-column:7/10}
table.reflujo-art-compra tbody td:nth-child(5){grid-column:10/13}
/* Articulos de una liquidacion nueva: # y articulo, y las cifras abajo. */
table.reflujo-art tbody td:nth-child(1){grid-column:1/3;grid-row:1;align-self:center;
font-size:17px;font-weight:700;color:var(--acento)}
table.reflujo-art tbody td:nth-child(1)::before{display:inline;content:"#";margin:0;
font-size:inherit;color:inherit;text-transform:none}
table.reflujo-art tbody td:nth-child(2){grid-column:3/11;grid-row:1}
table.reflujo-art tbody td:nth-child(7){grid-column:11/13;grid-row:1;justify-self:end;align-self:end}
table.reflujo-art tbody td:nth-child(3){grid-column:1/4;grid-row:2}
table.reflujo-art tbody td:nth-child(4){grid-column:4/8;grid-row:2}
table.reflujo-art tbody td:nth-child(5){grid-column:8/13;grid-row:2}
table.reflujo-art tbody td:nth-child(6){grid-column:1/13;grid-row:3;text-align:right;
font-weight:700;font-size:15px;color:var(--cifra-total)}
table.reflujo-art tbody td:nth-child(6)::before{display:inline;margin-right:6px}
/* Lineas del comprobante: igual, mas la afectacion. */
table.reflujo-fe tbody td:nth-child(1){grid-column:1/3;grid-row:1;align-self:center;
font-size:17px;font-weight:700;color:var(--acento)}
table.reflujo-fe tbody td:nth-child(1)::before{display:inline;content:"#";margin:0;
font-size:inherit;color:inherit;text-transform:none}
table.reflujo-fe tbody td:nth-child(2){grid-column:3/11;grid-row:1}
table.reflujo-fe tbody td:nth-child(8){grid-column:11/13;grid-row:1;justify-self:end;align-self:end}
table.reflujo-fe tbody td:nth-child(3){grid-column:1/7;grid-row:2}
table.reflujo-fe tbody td:nth-child(4){grid-column:7/10;grid-row:2}
table.reflujo-fe tbody td:nth-child(5){grid-column:10/13;grid-row:2}
table.reflujo-fe tbody td:nth-child(6){grid-column:1/9;grid-row:3}
table.reflujo-fe tbody td:nth-child(7){grid-column:9/13;grid-row:3;text-align:right;
align-self:end;font-weight:700;font-size:15px;color:var(--cifra-total)}
table.reflujo-fe .nota-col{display:none}
/* Cuotas: numero, vencimiento y monto. */
table.reflujo-cuotas{max-width:none !important}
table.reflujo-cuotas tbody td:nth-child(1){grid-column:1/5}
table.reflujo-cuotas tbody td:nth-child(2){grid-column:5/13}
table.reflujo-cuotas tbody td:nth-child(3){grid-column:1/10}
table.reflujo-cuotas tbody td:nth-child(4){grid-column:10/13;justify-self:end;align-self:end}
/* --- Portada ----------------------------------------------------------- */
.mosaico{font-size:14px;line-height:1.2}
/* --- Calendario -------------------------------------------------------- */
.cal-barra{padding:8px}
/* Las ocho razones eran tres filas antes de ver el mes: van en una tira. */
.cal .cal-filtros{flex:1 1 100%;min-width:0;max-width:100%;flex-direction:column;flex-wrap:nowrap;
align-items:stretch;gap:8px}
.cal .cal-chips{flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none;
-webkit-overflow-scrolling:touch;padding-bottom:2px}
.cal .cal-chips::-webkit-scrollbar{display:none}
.cal .cal-chip{flex:0 0 auto}
.cal .selector-opciones{align-self:flex-start}
.cal-nav .btn{min-width:46px}
.cal-form{padding:10px}
.cal-fila.tres{grid-template-columns:1fr 1fr}
}
/* Dos columnas en los formularios mientras quepan dos campos: de 340px para
arriba. Los que llevan buscador o texto largo ocupan la fila entera. */
@media (max-width:760px) and (min-width:340px){
.rejilla-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
.rejilla-campos>.campo:has(.campo-combo),.rejilla-campos>.campo:has(textarea),
.rejilla-campos>.campo:has(input[list]),.rejilla-campos>.campo-observaciones,
.rejilla-campos>.campo-ancho{grid-column:1/-1}
}
/* --- PIEZAS de una liquidacion: sin caja con alto maximo ------------------ */
/* En el escritorio la tabla se desplaza dentro de su caja (porkys.css,
12/10/2026). En un telefono o una tableta esa caja ocupa casi toda la
pantalla y atrapa el dedo: el gesto vertical se quedaba dentro de la tabla y
la pagina no avanzaba hasta el final (los totales, GUARDAR). Aqui la tabla
crece con la pagina y solo se desliza de lado -que es lo que hace falta para
llegar a TOTAL, Redond. y Margen-; los titulos y la sumatoria vuelven a su
sitio. */
@media (pointer:coarse),(max-width:760px){
.tabla-desplazable{max-height:none;overflow-y:visible;overscroll-behavior-y:auto}
.tabla-desplazable thead th,.tabla-desplazable tfoot td{position:static;box-shadow:none}
}