/*!//////////////////////////////////////////////////////////////////////// * BS3-BS5-BRIDGE.CSS * Capa de compatibilidad visual: permite que pantallas construidas con * marcado de Bootstrap 3 se vean igual corriendo sobre Bootstrap 5, * sin modificar el HTML de cada pantalla. * * ORDEN DE CARGA OBLIGATORIO (en el layout base, una sola vez): * 1) bootstrap.min.css (Bootstrap 5) * 2) bs3-bs5-bridge.css (este archivo) * 3) custom.css (tus customizaciones actuales) * * Cargar el bridge ANTES de custom.css permite que cualquier override * que ya tengas en custom.css (colores, tamaños, etc.) siga ganando por * cascada, igual que ganaba sobre bootstrap.css en BS3. * * Ver GUIA-INTEGRACION.md para el detalle de qué cubre y qué no cubre * esta capa (hay una parte funcional/JS que se resuelve en * bs3-bs5-bridge.js, y algunas cosas -como el font de Glyphicons- que * conviene resolver reutilizando el archivo original de BS3). ////////////////////////////////////////////////////////////////////////*/ /* ========================================================================== 0. Gutter del grid: BS3 usaba 15px de padding a cada lado (30px totales). BS5 usa 0.75rem (12px) por lado via variable. Igualamos la variable para que TODO el grid (tanto el recreado abajo como cualquier col-md-*/col-lg-* nativo de BS5 que uses a futuro) respete el espaciado visual que ya tenés hoy. ========================================================================== */ :root { --bs-gutter-x: 1.875rem; /* 30px, paridad con BS3 */ } /* ========================================================================== 1. GRID: BS5 eliminó el infijo "xs" (col-xs-*). Sin esto, esas clases no existen y el layout se cae a bloques apilados sin más. Recreamos el sistema completo (col-xs-N, offset, push, pull) usando el mismo motor flex que ya trae `.row` de Bootstrap 5. ========================================================================== */ [class*="col-xs-"] { position: relative; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } /* El ancho de col-xs-N se limita a mobile (<768px, ver más abajo) a propósito: NO alcanza con ponerlo acá sin media query (como estaba antes), porque un elemento típico "col-xs-12 col-md-8" (ancho completo en mobile, 8/12 en desktop) rompe en desktop. En BS3 real esto funcionaba por ORDEN DE FUENTE: col-xs (sin media, "base") se define PRIMERO en el mismo bootstrap.css, y col-sm/md/lg (con media query) se definen DESPUÉS en ese mismo archivo -misma especificidad, pero por estar más abajo, col-md-8 le ganaba a col-xs-12 en desktop-. Acá el ancho de col-md-8/col-sm-8/col-lg-8 NO lo define este bridge -ya viene nativo de Bootstrap 5 (bootstrap.min.css, con su propio @media)-, y ese archivo se carga ANTES que este bridge. Si esta regla de col-xs-12 siguiera sin media query, por estar en un archivo que carga DESPUÉS de bootstrap.min.css le ganaría a ".col-md-8" en CUALQUIER ancho de pantalla (misma especificidad, gana el que carga último), sin importar que el viewport sea de escritorio. Caso real: el widget "Calendario de detecciones" (Análisis > Gráficos) usa class="col-xs-12 col-md-offset-2 col-md-8": en desktop el offset-2 corría el calendario 16.66% a la derecha pero el ancho quedaba en 100% (por el .col-xs-12 sin media ganándole a .col-md-8) en vez de 66.66%, y el conjunto (offset + 100% de ancho) desbordaba el contenedor por exactamente ese 16.66% -de ahí la tabla del calendario y la barra "Mes/Semana/Agenda" cortadas, con scroll horizontal y hasta perdiendo la columna de "dom." (domingo) fuera de la vista-. Con el ancho de col-xs-N acotado a mobile, en desktop no queda ninguna regla de este bridge compitiendo por "width" en ese elemento, así que gana directamente el ".col-md-8" nativo de Bootstrap 5 (66.66%), igual que pasaba en BS3. Verificado en vivo en i1-qa-bonita mutando el CSSOM (removiendo "width" de estas reglas) antes de aplicar el fix: el calendario pasó de desbordar 291px a encajar exacto en su contenedor (66.6667% de ancho), sin scroll horizontal y con las 7 columnas de día visibles. Pantalla de Análisis > Gráficos (2026-07-14). Mismo criterio aplicado a TODOS los col-xs-N (no solo 12), por si aparece el mismo patrón "col-xs-N col-sm/md/lg-M" en otra pantalla. */ @media (max-width: 767.98px) { .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } } /* A propósito NO se agrega ningún "width" para [class*="col-xs-"] fuera del media de arriba: cualquier regla -aunque sea "width:auto"- puesta en este archivo volvería a ganarle a ".col-md-8" nativo de Bootstrap 5 en desktop (misma especificidad, y este archivo carga después), por lo que el ancho de col-md-8 quedaría pisado igual que antes del fix. Sin ninguna regla de este bridge compitiendo, en desktop gana directo el ancho que corresponda de Bootstrap 5 (col-sm/md/lg-N) o, si el elemento no tiene ninguna otra clase de ancho, el default del navegador para un bloque (auto = 100% del contenedor) -mismo resultado visual que "width:100%" explícito, sin regresión para el caso más común de "col-xs-12" usado solo-. */ .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0; } /* Contenedores: alinear los anchos fijos de BS3 (BS5 usa otros breakpoints/anchos) */ @media (min-width: 768px) { .container { max-width: 750px; } } @media (min-width: 992px) { .container { max-width: 970px; } } @media (min-width: 1200px) { .container { max-width: 1170px; } } /* ========================================================================== 1b. GRID: mismo problema que el punto 1, pero para col-sm-*, col-md-* y col-lg-* (BS5 les sacó el float igual que a col-xs-*, y sólo deja flex). No se nota en un .row real -ahí el flex alcanza-, pero se cae en marcado viejo tipo "form-horizontal" (label + input lado a lado usando .form-group como fila, en vez de .row): sin el float, label y input quedan apilados uno debajo del otro. Ej.: admin.php > Agregar Administrador. Referencia de cómo se veía antes (sin bridge, BS3 puro): devesa.iwebjbs.com.ar/admin.php. El float no rompe nada en un grid moderno: dentro de un .row flex, `float` se computa a `none` en los flex items (spec CSS), así que esta regla es un no-op ahí. ========================================================================== */ /* El padding horizontal (15px c/lado en BS3) tampoco se hereda acá: en BS5 ese padding lo pone ".row > *" (child combinator), y como este marcado no usa .row como fila sino .form-group, nunca matchea -quedaba en 0. Ojo: NO se puede resolver con calc(var(--bs-gutter-x)*.5) reusando la variable de la sección 0, porque ".row" de BS5 vuelve a declarar --bs-gutter-x:1.5rem de forma local; cualquier .col-sm-* que caiga dentro de un .row real (aunque no sea hijo directo) hereda ESE valor -no el de :root-, dando un gutter de 24px en vez de los 30px de BS3. Se hardcodea 15px para que sea idéntico a BS3 sin importar el anidado. */ [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] { position: relative; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } } @media (min-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } } @media (min-width: 1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } } /* .form-horizontal .form-group hace de ".row" en BS3 (clearfix + márgenes negativos que compensan el padding de los .col-*-N hijos). BS5 no tiene ese selector -su equivalente moderno es .row directamente-, así que si el marcado viejo sigue usando .form-group como fila hay que recrearlo a mano; si no, el contenedor no "contiene" la altura de los hijos flotados y los renglones del formulario se pisan entre sí. */ .form-horizontal .form-group { margin-right: -15px; margin-left: -15px; } .form-horizontal .form-group::before, .form-horizontal .form-group::after { display: table; content: " "; } .form-horizontal .form-group::after { clear: both; } /* .container / .container-fluid: en BS3 estos dos también traían el mismo mixin de clearfix (":before/:after{display:table;content:' '}" + ":after{clear:both}") de la lista larga de selectors del bootstrap.css original (clearfix, container, container-fluid, row, form-group, navbar, nav, panel-body, modal-header/footer, etc). BS5 los sigue dejando display:block (a diferencia de .row/.nav/.navbar, que en BS5 son flex y por eso NO se les agrega este clearfix acá -ya tienen su propio tratamiento flex en las secciones de navbar/grid-), pero sin el clearfix ya no "contienen" la altura de hijos flotados (ej: un `.pull-right` con botones sueltos directo adentro de un `.container-fluid`). Caso real: la franja blanca de "Listado de Usuarios" en Administración de Usuarios quedaba más baja que los botones "Agregar Usuario"/"Importar" (floteados, pull-right), y esos botones terminaban visualmente afuera del recuadro blanco, pisando el fondo gris de la página. Verificado en vivo en i1-qa-bonita (2026-07-06). Si aparece el mismo síntoma (fondo/borde de un contenedor que no llega a cubrir un hijo flotado) en .panel-body, .modal-header, .modal-footer, .btn-toolbar, .pager o .dl-horizontal dd, son candidatos a la misma receta (siguen siendo block en BS5). */ .container::before, .container::after, .container-fluid::before, .container-fluid::after { display: table; content: " "; } .container::after, .container-fluid::after { clear: both; } /* ========================================================================== 2. UTILIDADES BS3 renombradas o eliminadas en BS5 ========================================================================== */ .pull-left { float: left !important; } .pull-right { float: right !important; } /* pull-* como hijo directo de .row (típico footer "© a la izquierda, links a la derecha"): el .row de BS5 es flex, así que los floats se ignoran y ".row > *" fuerza width:100% -> quedaban apilados. Se emula el comportamiento BS3 (float shrink-wrap + derecha) con flex. */ .row > .pull-left, .row > .pull-right { width: auto; max-width: 100%; flex: 0 1 auto; padding-right: 0; padding-left: 0; } .row > .pull-right { margin-left: auto; } .row > .pull-right ~ .pull-right { margin-left: 0; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify{ text-align: justify !important; } .center-block { display: block; margin-left: auto; margin-right: auto; } /* Visibilidad responsive estilo BS3 (BS5 no trae "hidden-" ni "visible-") */ @media (max-width: 767.98px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-xs, .visible-sm, .visible-md, .visible-lg, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767.98px) { .visible-xs { display: block !important; } table.visible-xs { display: table !important; } tr.visible-xs { display: table-row !important; } th.visible-xs, td.visible-xs { display: table-cell !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .visible-sm { display: block !important; } table.visible-sm { display: table !important; } tr.visible-sm { display: table-row !important; } th.visible-sm, td.visible-sm { display: table-cell !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .visible-md { display: block !important; } table.visible-md { display: table !important; } tr.visible-md { display: table-row !important; } th.visible-md, td.visible-md { display: table-cell !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } table.visible-lg { display: table !important; } tr.visible-lg { display: table-row !important; } th.visible-lg, td.visible-lg { display: table-cell !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* ========================================================================== 3. PANELES / WELLS / THUMBNAILS (eliminados de Bootstrap desde la v4) ========================================================================== */ .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); } .panel-body { padding: 15px; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; } .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a { color: inherit; } .panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } .panel > .list-group, .panel > .panel-collapse > .list-group { margin-bottom: 0; } .panel-group { margin-bottom: 20px; } .panel-group .panel { margin-bottom: 0; border-radius: 4px; overflow: hidden; } .panel-group .panel + .panel { margin-top: 5px; } .panel-default { border-color: #ddd; } .panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; } .panel-primary { border-color: #337ab7; } .panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; } .panel-success { border-color: #d6e9c6; } .panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .panel-info { border-color: #bce8f1; } .panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .panel-warning { border-color: #faebcc; } .panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .panel-danger { border-color: #ebccd1; } .panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); } .well-lg { padding: 24px; border-radius: 6px; } .well-sm { padding: 9px; border-radius: 3px; } .thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; transition: border .2s ease-in-out; } .thumbnail > img, .thumbnail a > img { margin-left: auto; margin-right: auto; } .thumbnail .caption { padding: 9px; color: #333; } /* ========================================================================== 4. FORMULARIOS estilo BS3 (form-group, control-label, checkbox/radio, input-group-addon, help-block, has-error/has-success/has-warning) ========================================================================== */ .form-group { margin-bottom: 15px; } .control-label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; } .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; text-align: right; } .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; } .checkbox, .radio { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } .checkbox label, .radio label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; } .checkbox input[type="checkbox"], .radio input[type="radio"] { position: absolute; margin-top: 4px; margin-left: -20px; } .checkbox-inline, .radio-inline { display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: 400; vertical-align: middle; cursor: pointer; } .checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline { margin-top: 0; margin-left: 10px; } .has-error .control-label, .has-error .help-block { color: #a94442; } .has-error .form-control { border-color: #a94442; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } .has-success .control-label, .has-success .help-block { color: #3c763d; } .has-success .form-control { border-color: #3c763d; } .has-warning .control-label, .has-warning .help-block { color: #8a6d3b; } .has-warning .form-control { border-color: #8a6d3b; } .form-control-static { padding-top: 7px; padding-bottom: 7px; margin-bottom: 0; min-height: 34px; } /* , spinners de number, etc. entre navegadores), pero como consecuencia también apaga la flechita nativa de los a .form-select (implicaría tocar el HTML de cada pantalla). No se toca "background-image" (BS5 ya la deja en "none" para .form-control; si en algún punto se le pone una a mano, sacarla acá también para no duplicar flecha). Verificado en vivo en i1-qa-bonita, campo "Bifurcacion" (2026-07-06). */ select.form-control { appearance: auto; -webkit-appearance: menulist; -moz-appearance: menulist; } /* input-group-addon: eliminado (ahora es .input-group-text). Recreado para funcionar dentro del .input-group flex de BS5. */ .input-group-addon { display: flex; align-items: center; padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; white-space: nowrap; } .input-group > .input-group-addon:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .input-group-addon:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } .input-group-addon.input-sm { padding: 5px 10px; font-size: 12px; border-radius: 3px; } .input-group-addon.input-lg { padding: 10px 16px; font-size: 18px; border-radius: 6px; } /* .iconos-login: clase propia del proyecto (definida en custom.css, no en Bootstrap) que resuelve el ícono dentro del input igual que un .input-group-addon, pero con el truco de tabla de BS3 hardcodeado: "display:table-cell; width:1%". Adentro del .input-group flex de BS5 eso se "blockifica" (un flex item no puede ser table-cell) y "width:1%" pasa a leerse como flex-basis casi 0 en vez de "achicate al mínimo posible dentro de una tabla"; como el de adentro no tiene ancho de layout propio, la celda queda angosta y el ícono termina pegado/ superpuesto contra el borde del input en vez del recuadro con aire de antes. Mismo tratamiento que a .input-group-addon: display:flex + ancho por contenido en vez de por el width:1% de la tabla. Verificado en vivo en i1-qa-bonita, pantalla de login (2026-07-06). */ .input-group > .iconos-login { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; } /* Tamaños BS3 de inputs, no existen como .input-sm/.input-lg en BS5 (son form-control-sm/lg) */ .input-sm, select.input-sm { height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 3px; } .input-lg, select.input-lg { height: 46px; padding: 10px 16px; font-size: 18px; border-radius: 6px; } /* ========================================================================== 5. BOTONES: variantes/tamaños de BS3 que BS5 no trae ========================================================================== */ .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-default:hover, .btn-default:focus { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-default:active, .btn-default.active { color: #333; background-color: #d4d4d4; border-color: #8c8c8c; } .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } /* Caret de dropdown: en BS3 la flecha era un elemento explícito — solo aparecía donde el markup lo ponía. BS5 en cambio dibuja SIEMPRE una flecha ::after en todo .dropdown-toggle, lo que agrega flechas donde nunca existieron (ej. íconos de menú del navbar). Se apaga el ::after de BS5 y se restaura el .caret de BS3. */ .dropdown-toggle::after, .dropup .dropdown-toggle::after, .dropend .dropdown-toggle::after, .dropstart .dropdown-toggle::before { display: none; } .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; } .dropup .caret { border-top: 0; border-bottom: 4px dashed; } /* ========================================================================== 6. LABELS (BS3) vs BADGES (BS5 renombró/rediseñó ambos conceptos). Recreamos ".label" tal cual era en BS3. La forma de ".badge" también se restaura porque tu custom.css ya define los colores de .badge-danger/.badge-warning/.badge-success/etc. y solo necesita que la forma base (padding, radio, line-height) sea la de BS3. ========================================================================== */ .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } .label-default { background-color: #777; } .label-primary { background-color: #337ab7; } .label-success { background-color: #5cb85c; } .label-info { background-color: #5bc0de; } .label-warning { background-color: #f0ad4e; } .label-danger { background-color: #d9534f; } .badge { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #777; border-radius: 10px; } .badge:empty { display: none; } /* ========================================================================== 7. NAVBAR: bloque completo copiado del bootstrap.css 3.4.6 del proyecto (carpeta v3_example), en el mismo orden de fuente, más los neutralizadores del navbar de BS5 (que es flex: los floats de BS3 no aplican dentro de un contenedor flex). ========================================================================== */ /* Neutralizadores BS5 (en BS3 eran los defaults, no hacía falta decirlos) */ .navbar > .container, .navbar > .container-fluid { display: block; } .navbar-brand { margin-right: 0; } .navbar-text { padding-top: 0; padding-bottom: 0; } /* --- Desde acá: Bootstrap 3.4.6 tal cual (con display/padding explícitos donde BS5 define otra cosa) --- */ @media print { .navbar { display: none; } } .navbar-fixed-bottom .dropdown .caret { content: ""; border-top: 0; border-bottom: 4px dashed; } .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 2px; } .navbar { display: block; /* BS5: flex */ padding: 0; /* BS5: padding propio */ position: relative; min-height: 50px; margin-bottom: 20px; border: 1px solid transparent; } @media (min-width: 768px) { .navbar { border-radius: 4px; } .navbar-header { float: left; } .navbar-right .dropdown-menu { right: 0; left: auto; } .navbar-right .dropdown-menu-left { right: auto; left: 0; } } .navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-overflow-scrolling: touch; } .navbar-collapse.in { overflow-y: auto; } @media (min-width: 768px) { .navbar-collapse { width: auto; border-top: 0; box-shadow: none; } .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .navbar-collapse.in { overflow-y: visible; } .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { padding-right: 0; padding-left: 0; } } .navbar-fixed-top, .navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; } .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 340px; } @media (max-device-width: 480px) and (orientation: landscape) { .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 200px; } } @media (min-width: 768px) { .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; } } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; border-width: 1px 0 0; } .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: -15px; margin-left: -15px; } @media (min-width: 768px) { .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right: 0; margin-left: 0; } } .navbar-static-top { z-index: 1000; border-width: 0 0 1px; } @media (min-width: 768px) { .navbar-static-top { border-radius: 0; } } .navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; } .navbar-brand:hover, .navbar-brand:focus { text-decoration: none; } .navbar-brand > img { display: block; } @media (min-width: 768px) { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; } } .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; } .navbar-toggle:focus { outline: 0; } .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; } @media (min-width: 768px) { .navbar-toggle { display: none; } } .navbar-nav { display: block; /* BS5: flex en columna (apilaba los items) */ margin: 7.5px -15px; } /* el ".nav > li > a" genérico del bridge excluye navbar-nav por el fix de especificidad (ver HANDOFF), así que el padding va explícito acá */ .navbar-nav > li > a { position: relative; display: block; padding: 10px 15px; line-height: 20px; } @media (max-width: 767px) { .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } @media (min-width: 768px) { .navbar-nav { float: left; margin: 0; } .navbar-nav > li { float: left; } .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; } } .navbar-form { padding: 10px 15px; margin-right: -15px; margin-left: -15px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); margin-top: 8px; margin-bottom: 8px; } @media (min-width: 768px) { .navbar-form .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; } .navbar-form .form-control-static { display: inline-block; } /* BS3 usaba inline-table; inline-flex por el .input-group flex de BS5 (misma adaptación que en form-inline, ver sección 17) */ .navbar-form .input-group { display: inline-flex; width: auto; flex-wrap: nowrap; vertical-align: middle; } .navbar-form .input-group .input-group-addon, .navbar-form .input-group .input-group-btn, .navbar-form .input-group .form-control { width: auto; } .navbar-form .control-label { margin-bottom: 0; vertical-align: middle; } .navbar-form .radio, .navbar-form .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; } .navbar-form .radio label, .navbar-form .checkbox label { padding-left: 0; } .navbar-form .radio input[type="radio"], .navbar-form .checkbox input[type="checkbox"] { position: relative; margin-left: 0; } .navbar-form .has-feedback .form-control-feedback { top: 0; } } @media (max-width: 767px) { .navbar-form .form-group { margin-bottom: 5px; } .navbar-form .form-group:last-child { margin-bottom: 0; } } @media (min-width: 768px) { .navbar-form { width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; box-shadow: none; } } /* BS5 pone ".navbar-nav .dropdown-menu { position: static }" (pensado para su navbar colapsado): el menú entra en el flujo y estira toda la barra hacia abajo al abrir. En BS3 era absolute en desktop; la regla static solo aplicaba en mobile (ver media max-767 más arriba, que sigue ganando ahí por especificidad). */ .navbar-nav .dropdown-menu { position: absolute; } .navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { margin-bottom: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .navbar-btn { margin-top: 8px; margin-bottom: 8px; } .navbar-btn.btn-sm { margin-top: 10px; margin-bottom: 10px; } .navbar-btn.btn-xs { margin-top: 14px; margin-bottom: 14px; } .navbar-text { margin-top: 15px; margin-bottom: 15px; } @media (min-width: 768px) { .navbar-text { float: left; margin-right: 15px; margin-left: 15px; } .navbar-left { float: left !important; } .navbar-right { float: right !important; margin-right: -15px; } .navbar-right ~ .navbar-right { margin-right: 0; } } .navbar-default { background-color: #f8f8f8; border-color: #e7e7e7; } .navbar-default .navbar-brand { color: #777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5e5e5e; background-color: transparent; } .navbar-default .navbar-text { color: #777; } .navbar-default .navbar-nav > li > a { color: #777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { color: #ccc; background-color: transparent; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #e7e7e7; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555; background-color: #e7e7e7; } .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #ccc; background-color: transparent; } } .navbar-default .navbar-toggle { border-color: #ddd; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ddd; } .navbar-default .navbar-toggle .icon-bar { background-color: #888; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #e7e7e7; } .navbar-default .navbar-link { color: #777; } .navbar-default .navbar-link:hover { color: #333; } .navbar-default .btn-link { color: #777; } .navbar-default .btn-link:hover, .navbar-default .btn-link:focus { color: #333; } .navbar-inverse { background-color: #222; border-color: #080808; } .navbar-inverse .navbar-brand { color: #9d9d9d; } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { color: #fff; background-color: transparent; } .navbar-inverse .navbar-text { color: #9d9d9d; } .navbar-inverse .navbar-nav > li > a { color: #9d9d9d; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #fff; background-color: transparent; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background-color: #080808; } .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus { color: #444; background-color: transparent; } .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { color: #fff; background-color: #080808; } @media (max-width: 767px) { .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #080808; } .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; background-color: transparent; } .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { color: #fff; background-color: #080808; } .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #444; background-color: transparent; } } .navbar-inverse .navbar-toggle { border-color: #333; } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #333; } .navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #101010; } .navbar-inverse .navbar-link { color: #9d9d9d; } .navbar-inverse .navbar-link:hover { color: #fff; } .navbar-inverse .btn-link { color: #9d9d9d; } .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { color: #fff; } /* clearfix de BS3 para contener los floats de header/collapse/nav. OJO: ".navbar" NO entra acá (a diferencia de header/collapse, que siguen siendo block+float en BS5, ver arriba ".navbar-header{float:left}"). ".navbar" es display:flex en BS5, y un ::before/::after con content:" "; display:table adentro de un contenedor flex no queda fuera del flujo como en BS3: se convierte en un item flex real (ancho 0) más. Con justify-content:space-between (heredado/definido para separar brand de menú) eso deja 3 items en vez de 1 (fantasma-vacío, contenido real, fantasma-vacío), y el contenido real termina centrado entre los dos fantasmas en vez de pegado al borde. Caso real: navbar de login (nav.navbar-iweb) con un solo hijo real (el logo "portada" cuando el navbar-brand de texto está comentado en el HTML) quedaba centrado en vez de pegado a la izquierda. Un contenedor flex no necesita clearfix (los floats de los hijos no aplican en contexto flex), así que directamente se lo saca de la lista. Verificado en vivo en i1-qa-bonita, pantalla de login (2026-07-06). */ .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after { display: table; content: " "; } .navbar-header:after, .navbar-collapse:after { clear: both; } /* ========================================================================== 8. DROPDOWN, MODAL, COLLAPSE, TAB, ALERT: BS3 usaba la clase ".in" para marcar "abierto/visible" en elementos ".fade"/".collapse". BS5 usa ".show". El shim JS (bs3-bs5-bridge.js) mantiene ambas clases sincronizadas en tiempo real, así que acá sólo garantizamos que el estado ".in" (por si quedó escrito estático en el HTML, p. ej. un collapse que arranca abierto) se vea igual que ".show". ========================================================================== */ /* Items de dropdown: en BS3 el padding/color de cada opción venía de una regla BASE ".dropdown-menu > li > a" (fuera de cualquier media query). Esa regla nunca se portó a este bridge — solo quedó la variante mobile del navbar colapsado (@media max-767px, más abajo en NAVBAR) — por lo que en desktop cada queda con padding:0 (BS5 solo da padding a ".dropdown-item", clase que el HTML viejo no tiene). Sin esto, las últimas opciones de cualquier dropdown (ej. "Editar perfil" / "Cerrar sesión" en el menú de usuario) quedan pegadas al margen izquierdo. */ .dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #333; white-space: nowrap; background-color: transparent; border: 0; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; background-color: #337ab7; outline: 0; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #777; } .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { text-decoration: none; cursor: not-allowed; background-color: transparent; background-image: none; } .collapse.in { display: block; } .collapse.in.width { display: flex; } .fade.in { opacity: 1; } /* En BS3 esta regla venía DESPUÉS de .fade.in y ganaba por orden; sin ella, el .fade.in de arriba (el shim JS agrega .in al backdrop porque es .fade) pisa el opacity:.5 del .modal-backdrop.show de BS5 → fondo negro sólido. */ .modal-backdrop.in { opacity: 0.5; } .modal.in { display: block; } /* Botón de cerrar (.close) — reemplazado en BS5 por .btn-close (ícono SVG). Si tus pantallas siguen usando lo recreamos igual que en BS3. */ .close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; background: transparent; border: 0; appearance: none; } .close:hover, .close:focus { color: #000; text-decoration: none; opacity: .5; } .alert-dismissible .close { position: relative; top: -2px; right: -21px; padding: 0; color: inherit; } /* ".close { float: right }" (arriba) no hace nada dentro de ".modal-header", porque BS5 pone ese header en flex ("display:flex"), y float se ignora en un flex item. En BS5 el que queda pegado al extremo derecho es su propio botón ".btn-close" gracias a "margin-left: auto" (truco de flexbox) — pero ese estilo apunta puntualmente a la clase ".btn-close", no a ".close", así que el botón viejo () no lo hereda y queda pegado al título en vez de ir al extremo derecho del modal. Se le da el mismo "margin-left: auto" para que se comporte igual en flex. OJO: NO se le suma el mismo "top:-2px; right:-21px" que usa ".alert-dismissible .close" arriba. Ese offset está pensado para un ".close" con "float:right" (como en BS3): el float lo deja pegado al borde INTERNO del padding del header, y el "right:-21px" lo empuja 20px más para compensar el padding y que visualmente quede pegado al borde EXTERNO del modal. Acá el botón ya llega a ese mismo borde interno solo con "margin-left:auto" (flex), así que sumarle el mismo "right:-21px" lo manda 21px de más, afuera del modal — de ahí el scroll horizontal. Alcanza con dejarlo en su posición natural. */ .modal-header .close { margin-left: auto; position: relative; top: 0; right: 0; padding: 0; color: inherit; } /* El "margin-left:auto" de arriba asume que ".close" es el ÚLTIMO hijo del header en el flex, como en el modal de ejemplo de la guía de BS3. Pero hay pantallas (ej.: admin.php > Agregar Administrador > modal de selección) donde el HTML trae