/* =========================================================================
MOBILE-RESPONSIVE LAYER · Sistema Aduanal 2.0 · Fase 1
-------------------------------------------------------------------------
ARCHIVO ADITIVO. Cargado DESPUES de style.css y CDN para tener
precedencia natural sin !important salvo casos puntuales.
PRINCIPIO:
- 100% de las reglas estan dentro de @media (max-width: X). Desktop
permanece intacto por construccion: si comentas el de este
archivo, el sistema vuelve a su estado anterior.
- Sin reglas globales fuera de media queries (excepto utility classes
opt-in via data-attribute o clase explicita).
BREAKPOINTS (target objetivo: 360px y arriba):
- <= 1199.98px : laptop pequeno / tablet horizontal
- <= 991.98px : tablet vertical (sidebar pasa a drawer - YA EXISTE)
- <= 767.98px : movil grande (la mayoria de fixes aplican aqui)
- <= 575.98px : movil estandar (modales fullscreen, cards 100%)
- <= 359.98px : safety net para Android antiguo (paddings minimos)
========================================================================= */
/* =========================================================================
0b. SAFEGUARD GLOBAL CONTRA "LETRA POR LETRA"
-------------------------------------------------------------------------
Algunos contenedores podian heredar word-break: break-all/break-word que
causa que el texto se rompa letra por letra en celdas estrechas. Aqui
forzamos word-break: normal en contenedores tipicos para que la ruptura
solo ocurra en espacios entre palabras (comportamiento esperado).
overflow-wrap: anywhere se mantiene como salvavidas para URLs/hashes
muy largos sin espacios.
========================================================================= */
@media (max-width: 767.98px) {
.floating-card,
.floating-card *,
.card-body,
.card-body *,
.modal-body,
.modal-body *,
.dropdown-menu,
.nav-link,
.btn,
td, th, .table td, .table th {
word-break: normal;
}
/* overflow-wrap: anywhere SOLO en contenedores que pueden recibir
cadenas largas sin espacios (urls, hashes, codigos). No bloquea
el wrap normal en espacios. */
.floating-card,
.modal-body,
td, th {
overflow-wrap: anywhere;
}
}
/* =========================================================================
0. ANTI-OVERFLOW HORIZONTAL (CRITICO)
-------------------------------------------------------------------------
Sin esto, cualquier tabla ancha o elemento que se salga del viewport
empuja el horizontalmente. Consecuencias:
- El usuario puede hacer scroll horizontal en TODA la pagina
- El sidebar drawer asoma por el costado cuando se "scrollea" la pagina
- La hamburguesa pasa a estar fuera del area tocable (parece que no
funciona, pero esta corrida porque la pagina se movio)
- .top-navbar con position:sticky se rompe en algunos browsers
La regla clipea a nivel body/main-content; las tablas siguen pudiendo
scrollear horizontalmente DENTRO de su .table-responsive (lo cual SI
se permite).
========================================================================= */
@media (max-width: 991.98px) {
html, body {
overflow-x: hidden;
max-width: 100vw;
}
.main-content {
overflow-x: hidden;
max-width: 100vw;
min-width: 0;
}
.content-body {
overflow-x: hidden;
max-width: 100%;
min-width: 0;
}
/* Cards y rows tampoco pueden empujar el viewport */
.floating-card,
.card {
max-width: 100%;
overflow-x: hidden;
}
.row { max-width: 100%; }
}
/* =========================================================================
1. MODALES FULLSCREEN AUTO (afecta los 60+ modales del sistema)
-------------------------------------------------------------------------
Por defecto todos los modales pasan a pantalla completa en <576px.
Excepcion: agregar clase .modal-no-fullscreen al .modal-dialog para
modales de confirmacion pequenos que queremos centrados.
========================================================================= */
@media (max-width: 575.98px) {
/* Bootstrap reset de modal-dialog en xs */
.modal-dialog:not(.modal-no-fullscreen) {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
height: 100vh !important;
height: 100dvh !important; /* dvh = dynamic vh (resta barra URL movil) */
}
/* Modal-content como flex column: header + body (scroll) + footer.
Patron estandar mas confiable que position:sticky (que tenia issues
de scroll lock con el body al seleccionar formularios). */
.modal-dialog:not(.modal-no-fullscreen) .modal-content {
border-radius: 0 !important;
height: 100vh;
height: 100dvh;
min-height: 100vh;
min-height: 100dvh;
border: 0;
display: flex;
flex-direction: column;
}
/* Header fijo arriba (flex item, no sticky) */
.modal-dialog:not(.modal-no-fullscreen) .modal-header {
flex: 0 0 auto;
background: #fff;
}
/* Body toma todo el espacio restante y SCROLLEA su contenido */
.modal-dialog:not(.modal-no-fullscreen) .modal-body {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
/* Asegurar scroll completo: el contenido puede ser cualquier alto */
min-height: 0;
}
/* Footer fijo abajo con safe-area iOS */
.modal-dialog:not(.modal-no-fullscreen) .modal-footer {
flex: 0 0 auto;
background: #fff;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
}
/* Botones del footer al 100% por defecto (mejor target touch) */
.modal-dialog:not(.modal-no-fullscreen) .modal-footer > .btn {
flex: 1 1 auto;
min-height: 44px;
}
/* CRITICO: si un