/*! * Bootstrap 4 -> 5 compatibility layer (BNA.Bolivia.Frontend) * ----------------------------------------------------------- * Permite que el marcado escrito para Bootstrap 4 siga funcionando * sobre Bootstrap 5.1.0 (wwwroot/lib/bootstrap). * * Orden de carga requerido en el : * 1) lib/bootstrap/dist/css/bootstrap.min.css (Bootstrap 5.1.0) * 2) css/bootstrap4-compat.css (este archivo) * 3) css/custom.css (overrides propios del sitio) * * El comportamiento dinámico (collapse / carousel / alert dismiss con * atributos data-* de BS4) lo resuelve js/bootstrap4-compat.js. */ /* ========================================================================== 1. Enlaces sin subrayado BS4 no subrayaba ; BS5 (Reboot) los subraya por defecto. Restauramos el comportamiento de BS4. Las reglas de custom.css (que se carga después) siguen pudiendo forzar underline donde corresponda. ========================================================================== */ a { text-decoration: none; } /* ========================================================================== 2. Colores de btn-info BS4: fondo teal (#17a2b8) con texto BLANCO. BS5.1: fondo cyan (#0dcaf0) con texto OSCURO -> rompe el contraste cuando custom.css sólo reemplaza el fondo. Restauramos el texto blanco de BS4 en todos los estados; el fondo definitivo lo puede seguir fijando custom.css. ========================================================================== */ .btn-info { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } .btn-info:hover { color: #fff; background-color: #138496; border-color: #117a8b; } .btn-info:focus, .btn-info.focus { color: #fff; background-color: #138496; border-color: #117a8b; box-shadow: 0 0 0 0.25rem rgba(58, 176, 195, 0.5); } .btn-info:active, .btn-info.active, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #fff; background-color: #117a8b; border-color: #10707f; } .btn-info:disabled, .btn-info.disabled { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } .btn-outline-info { color: #17a2b8; border-color: #17a2b8; } .btn-outline-info:hover { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } /* btn-block: BS5 eliminó esta clase (ahora se usa un wrapper .d-grid). El marcado BS4 sigue usándola para botones a todo el ancho. La restauramos. */ .btn-block { display: block; width: 100%; } .btn-block + .btn-block { margin-top: 0.5rem; } /* ========================================================================== 3. Botón de cierre (.close -> .btn-close) BS5 renombró .close a .btn-close (icono SVG sin contenido de texto). El marcado BS4 usa , así que reproducimos el estilo clásico de BS4. ========================================================================== */ .close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: 0.5; background: transparent; border: 0; padding: 0; cursor: pointer; } .close:hover, .close:focus { color: #000; text-decoration: none; opacity: 0.75; } /* El .close dentro de un alert-dismissible queda posicionado como en BS4 */ .alert-dismissible .close { position: absolute; top: 0; right: 0; z-index: 2; padding: 0.75rem 1.25rem; } /* ========================================================================== 4. Utilidades renombradas de espaciado direccional BS4 usaba left/right (ml-, mr-, pl-, pr-); BS5 usa start/end (ms-, me-, ps-, pe-). Reproducimos los nombres de BS4 (sitio LTR). Escala de espaciado: 0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem. ========================================================================== */ .ml-0 { margin-left: 0 !important; } .ml-1 { margin-left: 0.25rem !important; } .ml-2 { margin-left: 0.5rem !important; } .ml-3 { margin-left: 1rem !important; } .ml-4 { margin-left: 1.5rem !important; } .ml-5 { margin-left: 3rem !important; } .ml-auto { margin-left: auto !important; } .mr-0 { margin-right: 0 !important; } .mr-1 { margin-right: 0.25rem !important; } .mr-2 { margin-right: 0.5rem !important; } .mr-3 { margin-right: 1rem !important; } .mr-4 { margin-right: 1.5rem !important; } .mr-5 { margin-right: 3rem !important; } .mr-auto { margin-right: auto !important; } .pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: 0.25rem !important; } .pl-2 { padding-left: 0.5rem !important; } .pl-3 { padding-left: 1rem !important; } .pl-4 { padding-left: 1.5rem !important; } .pl-5 { padding-left: 3rem !important; } .pr-0 { padding-right: 0 !important; } .pr-1 { padding-right: 0.25rem !important; } .pr-2 { padding-right: 0.5rem !important; } .pr-3 { padding-right: 1rem !important; } .pr-4 { padding-right: 1.5rem !important; } .pr-5 { padding-right: 3rem !important; } /* Variantes responsive (>= 576px sm / 768px md / 992px lg / 1200px xl / 1400px xxl) Se cubren los breakpoints usados con las utilidades direccionales. */ @media (min-width: 576px) { .ml-sm-auto { margin-left: auto !important; } .mr-sm-auto { margin-right: auto !important; } } @media (min-width: 768px) { .ml-md-0 { margin-left: 0 !important; } .ml-md-1 { margin-left: 0.25rem !important; } .ml-md-2 { margin-left: 0.5rem !important; } .ml-md-3 { margin-left: 1rem !important; } .ml-md-4 { margin-left: 1.5rem !important; } .ml-md-5 { margin-left: 3rem !important; } .ml-md-auto { margin-left: auto !important; } .mr-md-0 { margin-right: 0 !important; } .mr-md-1 { margin-right: 0.25rem !important; } .mr-md-2 { margin-right: 0.5rem !important; } .mr-md-3 { margin-right: 1rem !important; } .mr-md-4 { margin-right: 1.5rem !important; } .mr-md-5 { margin-right: 3rem !important; } .mr-md-auto { margin-right: auto !important; } .pl-md-0 { padding-left: 0 !important; } .pl-md-3 { padding-left: 1rem !important; } .pr-md-0 { padding-right: 0 !important; } .pr-md-3 { padding-right: 1rem !important; } } @media (min-width: 992px) { .ml-lg-0 { margin-left: 0 !important; } .ml-lg-1 { margin-left: 0.25rem !important; } .ml-lg-2 { margin-left: 0.5rem !important; } .ml-lg-3 { margin-left: 1rem !important; } .ml-lg-4 { margin-left: 1.5rem !important; } .ml-lg-5 { margin-left: 3rem !important; } .ml-lg-auto { margin-left: auto !important; } .mr-lg-0 { margin-right: 0 !important; } .mr-lg-1 { margin-right: 0.25rem !important; } .mr-lg-2 { margin-right: 0.5rem !important; } .mr-lg-3 { margin-right: 1rem !important; } .mr-lg-4 { margin-right: 1.5rem !important; } .mr-lg-5 { margin-right: 3rem !important; } .mr-lg-auto { margin-right: auto !important; } .pl-lg-0 { padding-left: 0 !important; } .pl-lg-3 { padding-left: 1rem !important; } .pr-lg-0 { padding-right: 0 !important; } .pr-lg-3 { padding-right: 1rem !important; } } @media (min-width: 1200px) { .ml-xl-0 { margin-left: 0 !important; } .ml-xl-3 { margin-left: 1rem !important; } .ml-xl-auto { margin-left: auto !important; } .mr-xl-0 { margin-right: 0 !important; } .mr-xl-3 { margin-right: 1rem !important; } .mr-xl-4 { margin-right: 1.5rem !important; } .mr-xl-auto { margin-right: auto !important; } } /* ========================================================================== 5. Alineación de texto y float renombrados ========================================================================== */ .text-left { text-align: left !important; } .text-right { text-align: right !important; } .float-left { float: left !important; } .float-right { float: right !important; } @media (min-width: 576px) { .text-sm-left { text-align: left !important; } .text-sm-right { text-align: right !important; } } @media (min-width: 768px) { .text-md-left { text-align: left !important; } .text-md-right { text-align: right !important; } .float-md-left { float: left !important; } .float-md-right { float: right !important; } } @media (min-width: 992px) { .text-lg-left { text-align: left !important; } .text-lg-right { text-align: right !important; } } /* ========================================================================== 6. Pesos de fuente renombrados (font-weight-* -> fw-*) ========================================================================== */ .font-weight-light { font-weight: 300 !important; } .font-weight-lighter { font-weight: lighter !important; } .font-weight-normal { font-weight: 400 !important; } .font-weight-bold { font-weight: 700 !important; } .font-weight-bolder { font-weight: bolder !important; } .font-italic { font-style: italic !important; } /* Texto pequeño: BS4 usaba 80%; BS5 usa .875em (87.5%). El tamaño mayor de BS5 hace que textos ajustados (p. ej. la barra de cotizaciones) envuelvan a una línea extra y dupliquen su alto. Restauramos el valor de BS4. */ .small, small { font-size: 80%; font-weight: 400; } /* ========================================================================== 7. Otras utilidades removidas/renombradas ========================================================================== */ /* no-gutters -> g-0 */ .no-gutters { --bs-gutter-x: 0; --bs-gutter-y: 0; } .no-gutters > * { padding-right: 0; padding-left: 0; } /* sr-only -> visually-hidden */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================================== 8. Grilla: hijos directos de .row sin clase de columna BS5 aplica `width: 100%; max-width: 100%;` a TODO hijo directo de .row (regla `.row > *` del sistema de gutters). En BS4 los hijos SIN clase de columna se dimensionaban a su contenido. Cuando un ítem flex (p. ej. `.d-flex.footer-item`) es hijo directo de un `.row`, ese width:100% lo hace ocupar toda la fila y los ítems se apilan uno debajo del otro. Restauramos el comportamiento de BS4 para ítems flex que no son columnas ni filas anidadas. Cualquier w-100 / w-50 explícito (!important) prevalece. ========================================================================== */ .row > .d-flex:not([class*="col-"]):not(.col):not(.row) { width: auto; max-width: none; } /* ========================================================================== 9. Utilidades de ancho responsive (w-{bp}-auto / w-{bp}-100) Ni BS4 ni BS5 generan las variantes responsive de ancho por defecto, pero el marcado las usa (p. ej. `w-100 w-lg-auto` en la barra de cotizaciones: ancho completo apilado en mobile, y ajustado al contenido en desktop). Sin `w-lg-auto` los ítems quedan en w-100 y se reparten el ancho en partes iguales, generando espacio lateral y forzando el texto a dos líneas. ========================================================================== */ @media (min-width: 768px) { .w-md-auto { width: auto !important; } .w-md-100 { width: 100% !important; } } @media (min-width: 992px) { .w-lg-auto { width: auto !important; } .w-lg-100 { width: 100% !important; } } @media (min-width: 1200px) { .w-xl-auto { width: auto !important; } .w-xl-100 { width: 100% !important; } } /* badge de color (badge-* -> bg-*) — colores estándar de BS4 */ .badge-primary { color: #fff; background-color: #007bff; } .badge-secondary { color: #fff; background-color: #6c757d; } .badge-success { color: #fff; background-color: #28a745; } .badge-danger { color: #fff; background-color: #dc3545; } .badge-warning { color: #212529; background-color: #ffc107; } .badge-info { color: #fff; background-color: #17a2b8; } .badge-light { color: #212529; background-color: #f8f9fa; } .badge-dark { color: #fff; background-color: #343a40; }