es un hijo flex de . Por regla de CSS, un hijo flex no puede achicarse mas alla de su contenido (min-width:auto). Con una tabla ancha adentro, eso hacia que

se estirara y empujara la pagina ENTERA hacia la derecha, en vez de que la tabla se deslizara dentro de su propia caja .overflow-x-auto. Medido en Facturacion: la pagina ocupaba 1776px de ancho aunque la pantalla tuviera 1500. En un celular de 375px eran 4,7 pantallas. min-width:0 le devuelve el permiso de achicarse. Las tablas anchas pasan a deslizarse adentro de su caja, que es lo que siempre se quiso. Tambien endereza la vista en la computadora. */ main { min-width: 0; } /* Que ninguna tabla ancha arrastre la pagina, y que deslizarla no dispare el "volver atras" del celular. */ .overflow-x-auto { overscroll-behavior-x: contain; } /* El boton de menu no existe en la computadora. */ .pf-menu-btn { display: none; } @media (max-width: 1023.98px) { /* ---------- El menu lateral se vuelve un cajon ---------- Antes ocupaba 256px fijos: en una pantalla de 375px se comia el 68% del ancho y no habia forma de sacarlo. Ahora esta afuera de la pantalla y entra deslizandose cuando se toca el boton. */ aside.pf-sidebar { width: 17rem; max-width: 84vw; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); will-change: transform; z-index: 60; } body.pf-menu-abierto aside.pf-sidebar { transform: translateX(0); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .45); } /* El contenido recupera los 256px que le reservaba el menu. */ main.ml-64 { margin-left: 0; } /* Fondo oscuro detras del cajon. */ .pf-menu-fondo { position: fixed; inset: 0; z-index: 50; background: rgba(27, 23, 40, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .26s ease; } body.pf-menu-abierto .pf-menu-fondo { opacity: 1; pointer-events: auto; } /* Con el cajon abierto la pagina de atras no se mueve. */ body.pf-menu-abierto { overflow: hidden; } /* ---------- El boton de las tres rayas ---------- */ .pf-menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; margin-left: -.5rem; /* alinea el icono con el titulo */ border-radius: .7rem; color: var(--pf-ink); background: transparent; transition: background .15s ease; } .pf-menu-btn:active { background: rgba(113, 69, 214, .1); } .pf-menu-btn svg { width: 24px; height: 24px; } /* ---------- Encabezado ---------- Los margenes de 32px a los costados se comen medio celular. */ header.pf-header { padding-left: 1rem; padding-right: 1rem; padding-top: .75rem; padding-bottom: .75rem; flex-wrap: wrap; row-gap: .5rem; justify-content: flex-start; gap: .5rem; } header.pf-header h1 { font-size: 1.05rem; } header.pf-header > div > h1 { font-size: 1.05rem; } /* En el dashboard la fila esta un nivel mas adentro. */ header.pf-header > div:only-child { flex-wrap: wrap; row-gap: .5rem; width: 100%; } /* Los botones de la pagina (Exportar, Respaldar, Comisiones...) pasan a una tira que se desliza con el dedo. Apilarlos haria un encabezado de media pantalla; esconderlos detras de un "mas" obligaria a tocar cada pagina. Asi se ven todos y no empujan nada. */ .pf-acciones { width: 100%; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .pf-acciones::-webkit-scrollbar { display: none; } .pf-acciones > * { flex: 0 0 auto; } /* ---------- Filas que no entran ---------- Filtros ("Estado: Todas / Pagadas / Pendientes"), leyendas y barras de herramientas estaban en una sola linea sin permiso de cortarse, y empujaban la pagina. Ahora se acomodan en varias lineas. Cuando la fila SI entra, esto no cambia nada: flex-wrap solo actua si hace falta. Quedan afuera las columnas, las filas marcadas a mano como flex-nowrap y la tira de botones del encabezado, que se desliza en vez de cortarse. */ main .flex:not(.flex-col):not(.flex-nowrap):not(.pf-acciones) { flex-wrap: wrap; } /* ---------- Aire del contenido ---------- */ main .p-8 { padding: 1rem; } main .px-8 { padding-left: 1rem; padding-right: 1rem; } main .p-6 { padding: .875rem; } main .gap-6 { gap: .875rem; } main .space-y-6 > * + * { margin-top: .875rem; } /* ---------- De muchas columnas a dos ---------- Vale para las tarjetas de numeros Y para los campos de los modales (que cuelgan del , no de

: por eso la regla arranca en body y no en main). En Facturacion, "Agente / Comision / Estado" eran tres columnas de 89px — un select de cuatro letras. En dos columnas quedan en 139px, que si se puede leer y tocar. Se queda en dos y no en una: una sola columna obliga a scrollear el doble para ver los totales o llenar la factura. Arranca en "body" por especificidad: Tailwind viene del CDN y se inyecta DESPUES de este archivo, asi que un .grid-cols-3 pelado perderia contra el suyo. */ body .grid-cols-3, body .grid-cols-4, body .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ---------- Formularios: que el telefono no haga zoom ---------- Safari en iPhone hace zoom automatico al tocar un campo con letra de menos de 16px, y despues deja la pagina corrida. Es LA razon por la que un formulario se siente incomodo en el celular. Va con !important porque compite con las clases text-sm/text-xs que estan escritas en cada campo del HTML. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; } /* Nada que haya que tocar con el dedo mas chico que la yema. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; } button, .pf-btn, a.inline-flex, label > input[type="checkbox"] { min-height: 40px; } .pf-nav { min-height: 46px; } /* ---------- Tablas ---------- Se deslizan de lado adentro de su caja (gracias al min-width:0 de arriba). La primera columna queda fija para no perder de vista de que fila se esta leyendo. */ .pf-table thead th, .pf-table tbody td { padding: .7rem .75rem; } .pf-table { font-size: .8125rem; } /* ---------- Modales ---------- Los paneles ya vienen con w-full/max-w-*, asi que entran. Lo que faltaba era que no se pasen de alto y que el contenido se pueda deslizar. */ .pf-modal-panel { max-height: 88vh; } /* Espacio para la barra de gestos del iPhone. */ main { padding-bottom: env(safe-area-inset-bottom, 0px); } aside.pf-sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); } } /* Pantallas muy angostas (iPhone SE y similares). */ @media (max-width: 400px) { main .grid-cols-3, main .grid-cols-4, main .grid-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } header.pf-header h1 { font-size: 1rem; } main .p-8, main .p-6 { padding: .75rem; } }