completos (el de "Mostrar/Buscar", el de la tabla y el de "info/paginación"), que en BS3 simplemente se apilaban en bloque uno debajo de otro. Si a ESE wrapper también le aplicamos display:flex, esos tres ".row" pasan a ser items flex en horizontal (flex-direction:row por defecto) en vez de apilarse, y además cada uno se encoge a su contenido en vez de ocupar el 100% del ancho — por eso "Buscar:" quedaba pegado justo detrás de "Mostrar X registros" en vez de ir al extremo derecho de la tabla. Se excluye explícitamente .dataTables_wrapper para que conserve el apilado en bloque normal; el reparto 50/50 de Mostrar/Buscar ya lo da el propio .row (flex) + .col-sm-6 de Bootstrap sin necesitar esto. */ .form-inline:not(.dataTables_wrapper) { display: flex; flex-wrap: wrap; } /* BS3 traía también esta regla compañera (misma media query >=768px que el propio Bootstrap 3): dentro de .form-inline, los .form-control dejan de ser display:block/width:100% y pasan a inline-block/width:auto, para que los campos se vean a su tamaño natural en vez de ocupar toda la fila. Sin esto, cualquier metido dentro de un .form-inline (p. ej. los controles "Mostrar X registros" / "Buscar:" que genera la integración Bootstrap-3 de DataTables, cuyo wrapper lleva la clase "dataTables_wrapper form-inline dt-bootstrap") se estira a ancho completo y fuerza saltos de línea alrededor, rompiendo el layout compacto de esos controles (visto en empresas_listar.php / usuarios_listar.php). */ @media (min-width: 768px) { .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } } /* En ajax_modalProfile.php, el bloque "Cambio de contraseña" mete directamente un

y un como hijos sueltos de un .row, sin .col-* (ver #oDiv_perfil). En BS3 esto apilaba sin más porque ni .row ni esos hijos eran flex: cada uno ocupaba su línea de bloque normal. El .row de BS5 SÍ es flex con wrap, así que ahora depende de que ninguno de los dos "quepa" al lado del otro para que el wrap los apile — funciona casi siempre pero no está garantizado (ni el alto resultante es necesariamente el mismo: los márgenes de bloque que colapsaban en BS3 no colapsan entre items flex). Se fuerza a ocupar el 100% del ancho para que apilen exactamente igual que en BS3, sin depender de si "caben" uno al lado del otro. */ #oDiv_perfil .row > .page-header, #oDiv_perfil .row > form { flex: 0 0 100%; max-width: 100%; } /* Dentro de #oFormularioPassword, "Antigua"/"Nueva" meten

(etiqueta) y

(input) como hijos sueltos de su propio .form-group, sin .row, igual que en develop (col-xs-3/col-xs-9 flotaban solos en BS3 sin necesitar .row). Sin flex, esas dos columnas se apilan (etiqueta encima, input debajo) en vez de ir en la misma línea, lo que además hace que el bloque "Antigua"/"Nueva" (dos líneas) quede más alto que el bloque del botón "Cambiar" (una sola línea), desalineando el botón respecto a los campos. Se hace flex para que etiqueta+input vayan en la misma línea (como en develop) y se centra verticalmente. */ #oFormularioPassword > .form-group, #oFormularioSoporte > .form-group { display: flex; align-items: center; } /* El .tab-content del modal de perfil tiene una altura fija en px (.sil-h-245px / .sil-h-215px, con !important) pensada para el alto que ocupaba este contenido en BS3, más compacto que en BS5. Con esa altura fija, el contenido real (panel de 2FA, botón de caducar, formulario de contraseña) queda más alto que la caja y se sale visualmente por debajo del modal. En vez de forzar scroll interno (no se quiere scroll), se deja que la caja crezca a lo que ocupe su contenido, como hacía el modal completo en develop: el modal simplemente es un poco más alto, pero todo queda dentro de su recuadro sin cortar ni scrollear nada. */ #oModalPassword .tab-content { height: auto !important; overflow: visible; } /* Con las columnas "Antigua"/"Nueva" ya en una sola línea, las tres columnas del formulario (Antigua, Nueva, Cambiar) quedan prácticamente con la misma altura; align-items:center en el propio .form-inline termina de alinear el botón "Cambiar" en vertical con los campos. */ #oFormularioPassword.form-inline { align-items: center; } /* ---------- checkbox / radio (BS3, sustituidos por .form-check en BS5) ---------- Hay DOS marcados en la plataforma: 1) ficha_contacto.php / contactos.php:

Texto

El input VA DENTRO del label. BS3 lo sacaba del flujo con position:absolute y padding-left:20px en el label. 2) empresas_editar.php / ajax_modalEditarRemitente.php:

Texto

El input NO está dentro del label: el label va en otra columna. Si se aplica el position:absolute de (1) aquí, el checkbox se desplaza -20px y se pinta ENCIMA del final de la etiqueta ("Habilitar Soporte Documen", "Activar CR", "PartnerGre"...). La regla absoluta solo aplica al patrón (1). El (2) deja el input estático, alineado con los .form-control de la columna de campos. */ .radio, .checkbox { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } .radio label, .checkbox label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; } .radio label input[type="radio"], .checkbox label input[type="checkbox"] { position: absolute; margin-left: -20px; margin-top: 4px; } /* Jerarquía de permisos (ajax_modalEditarUsuario.php). Cada nivel es un .divPermisos con huecos col-md-1 / col-md-2 + checkbox col-md-1 + etiqueta. En BS3 esas columnas flotaban y el hueco indentaba hijos y nietos. En BS5 las col no flotan: el hueco ocupa una línea vacía y checkbox+etiqueta quedan todos alineados a la izquierda. Se vuelve a una fila (flex) y se ocultan los
de relleno. */ .divPermisos { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; } .divPermisos > .divPermisos { flex: 0 0 100%; max-width: 100%; } .divPermisos > br { display: none; } .divPermisos > .col-md-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; width: 8.33333333%; box-sizing: border-box; } .divPermisos > .col-md-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; width: 16.66666667%; box-sizing: border-box; } .divPermisos > .col-md-9 { flex: 0 0 75%; max-width: 75%; width: 75%; box-sizing: border-box; } .divPermisos > .col-md-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; width: 83.33333333%; box-sizing: border-box; } .divPermisos > .col-md-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; width: 91.66666667%; box-sizing: border-box; } /* ---------- page-header (BS3, eliminado en BS4/5) ---------- */ .page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee; } /* ---------- breadcrumb (BS3) ---------- El marcado sigue siendo (sin .breadcrumb-item, que es lo que exige BS5 para el separador "/" y el padding). Se restaura el aspecto BS3 completo: fondo gris, padding propio y separador "/" entre

, porque el