/* ============================================================================= [T272] KEDAS · ajustes de teléfono ----------------------------------------------------------------------------- El portal se diseñó para pantalla de escritorio y en el teléfono se notaba: barras de botones que se salían, tablas de factura aplastadas hasta lo ilegible, formularios de edición con la etiqueta y el campo peleando por la misma línea, y el navegador de iOS haciendo zoom cada vez que se tocaba un campo. Esta hoja no rediseña nada: corrige lo que se rompe por debajo de 768 px, respetando los colores y las formas de siempre. Se carga al final del del panel, después de all.minified.css, para ganar en cascada sin tener que llenar todo de !important. Donde sí aparece es porque la regla original ya venía marcada. ============================================================================= */ @media (max-width: 767px) { /* --- Nada debe empujar la página a lo ancho -------------------------- */ html, body { max-width: 100%; overflow-x: hidden; } .dashboard-right { padding-left: 0 !important; padding-right: 0 !important; } .invoice-container, .dashboard-right > .container, .dashboard-right > .container-fluid { padding-left: 12px !important; padding-right: 12px !important; } /* --- Barra de acciones ---------------------------------------------- Era una fila de botones pensada para 1400 px: en el teléfono se salían por la derecha o quedaban de un dedo de alto. Pasan a rejilla de dos columnas, con altura pulsable y el texto centrado sin cortarse. */ .action-btns-view { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .action-btns-view.show-wrap-btns { display: block !important; } .action-btns-view .btn-custom, .action-btns-view a[role="button"] { display: flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px; margin: 0 !important; padding: 9px 10px !important; font-size: 13px; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere; } /* --- Tablas ----------------------------------------------------------- Una factura tiene más columnas de las que caben. Aplastarlas deja los importes partidos en tres líneas, así que se deja que la tabla conserve su ancho y sea el bloque el que se desplace de lado. El resto de la página no se mueve. */ .table-wrap, .default-table, .credit-show-table-wrap, .view-form-custom, .table-responsive, .dataTables_wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap > table, .default-table > table, .view-form-custom > table, .table-responsive > table { min-width: 560px; } /* La tabla de datos de cabecera (cliente, fecha, NCF…) sí cabe: se deja fluida y se le quita la sangría de escritorio, que en el teléfono empujaba el valor fuera de la pantalla. */ .credit-show-table, .invoice-summary-table { min-width: 0 !important; } .summary td, .credit-show-table td { padding-left: 8px !important; } .credit-show-table td, .credit-show-table th { font-size: 13px; padding-top: 7px; padding-bottom: 7px; } /* Totales y contadores de la factura: en columna, no en fila apretada. */ .invoice-detail-count { display: block; } .invoice-detail-count > div { width: 100% !important; float: none !important; } /* --- Pestañas --------------------------------------------------------- Pagos, contabilidad, comentarios, DGII… no caben en una línea. Se desplazan de lado en vez de romperse en escalera. */ .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid #dee2e6; } .nav-tabs > li, .nav-tabs .nav-item { float: none; flex: 0 0 auto; } .nav-tabs > li > a, .nav-tabs .nav-link { white-space: nowrap; font-size: 13px; padding: 8px 12px; } /* --- Formularios (crear y editar factura) ----------------------------- Etiqueta arriba y campo a lo ancho. Y 16 px en los campos a propósito: por debajo de ese tamaño Safari de iOS hace zoom al enfocar y deja la pantalla descuadrada, que es justo lo que se veía al editar. */ .default-form .form-group, .default-form .row > [class^="col-"], .default-form .row > [class*=" col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; } .default-form label { display: block; width: 100%; margin-bottom: 4px; font-size: 13px; } .default-form input[type="text"], .default-form input[type="number"], .default-form input[type="email"], .default-form input[type="date"], .default-form input[type="password"], .default-form select, .default-form textarea, .form-control, .select2-container { width: 100% !important; max-width: 100%; } .form-control, .default-form input, .default-form select, .default-form textarea { font-size: 16px !important; min-height: 42px; } /* El desplegable de búsqueda tiene que caber en la pantalla, no en la columna que tenía en escritorio. */ .select2-container--open .select2-dropdown { max-width: calc(100vw - 24px); } .select2-container .select2-selection--single { height: 42px !important; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px !important; } /* Las líneas de artículos de la factura en edición: cada campo en su renglón, con el botón de quitar accesible y no pegado al importe. */ .add-invoice-table td, .add-invoice-table th { padding: 6px !important; } .add-invoice-table input, .add-invoice-table select { min-width: 90px; } /* --- Cabeceras y títulos ---------------------------------------------- */ .invoice-container h2 { font-size: 20px; } .invoice-container h3 { font-size: 17px; } /* --- Ventanas modales -------------------------------------------------- */ .modal-dialog { margin: 10px; max-width: calc(100% - 20px); } .modal-body { padding: 14px; } .modal-footer .btn { min-height: 42px; } /* --- Aviso de envío a la DGII ([T272]) --------------------------------- */ .kdgii-aviso { margin: 0 0 14px; padding: 11px 12px; font-size: 13px; } } /* Teléfonos estrechos: una sola columna de botones, que a 320 px dos no caben sin partir las palabras. */ @media (max-width: 400px) { .action-btns-view { grid-template-columns: minmax(0, 1fr); } } /* ───────────────────────────────────────────────────────────────────────────── [T289] El menú lateral usaba 700 px y dejaba el resto en azul vacío. La regla original (`all.minified.css`) era: .side-blue-sec { position: fixed; top: 72px; height: 100%; } .side-blue-sec #accordion{ max-height: 700px; overflow-y: auto; height: 100%; } Dos fallos que se sumaban. El `max-height: 700px` es un número escrito a mano: en cualquier pantalla más alta que eso la lista se corta ahí y debajo queda una franja azul sin nada, con opciones escondidas detrás. Y `height: 100%` con `top: 72px` hace la barra 72 px más alta que el hueco que tiene, así que su final cae por debajo del borde de la ventana. Se corrige con la altura real disponible. Nada de números fijos: `100vh` menos la cabecera, y la lista ocupa todo y hace scroll sólo si de verdad no cabe. ───────────────────────────────────────────────────────────────────────────── */ .main-wrapper .side-blue-sec { height: calc(100vh - 72px); } .main-wrapper .side-blue-sec #accordion { max-height: none; height: 100%; overflow-y: auto; /* Que el scroll del menú no arrastre la página de detrás al llegar al final. */ overscroll-behavior: contain; } /* La barra de scroll del menú, discreta sobre el azul: la del navegador en Windows sale gris claro y encima del azul canta mucho. */ .main-wrapper .side-blue-sec #accordion::-webkit-scrollbar { width: 8px; } .main-wrapper .side-blue-sec #accordion::-webkit-scrollbar-track { background: transparent; } .main-wrapper .side-blue-sec #accordion::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 4px; } .main-wrapper .side-blue-sec #accordion::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); }