/** * Capa de compatibilidad Bootstrap 3 -> Bootstrap 5.3 para SIPA. * * Reimplementa SOLO las clases BS3 que Bootstrap 5 eliminó y que * webarch.css NO redefine por su cuenta (pull-left/right, well, checkbox, * label-*, caret, input-lg/sm y form-group ya están cubiertos por * webarch.css y no necesitan shim). * * Orden de carga obligatorio: bootstrap5.min.css -> bs3-shim.css -> webarch.css * para que los overrides de webarch sigan ganando la cascada. */ /* ---- Tipografía ---- */ /* BS3/normalize usaban font-weight:bold (absoluto) en b/strong; BS5 Reboot usa font-weight:bolder (relativo al padre), que con h1..h6 en 300 (webarch) calcula solo 400 en vez de 700 -> texto en negrita se ve más delgado (ej. "Bureau Veritas Chile" en login). */ b, strong { font-weight: bold; } /* BS3's .row llevaba clearfix (::before/::after{display:table}) que de paso evitaba que un margin-top (ej. .login-container{margin-top:13%}) colapsara con el padre .container y con . BS5 usa flexbox en .row (sin clearfix), así que ese margin-top ahora "sube" y empuja todo el body hacia abajo, generando un scroll vertical espurio (visible en login.php/browser.php, únicas vistas que usan .container). Se restaura sólo en .container (no en .row, para no insertar un flex-item extra entre las columnas). */ .container::before { content: ""; display: table; } /* ---- Utilidades de texto/alineación ---- */ .text-left { text-align: left !important; } .text-right { text-align: right !important; } .center-block { display: block; margin-left: auto; margin-right: auto; } /* ---- Imágenes ---- */ .img-responsive { display: block; max-width: 100%; height: auto; } .img-circle { border-radius: 50%; } .img-rounded { border-radius: 6px; } /* ---- Botones ---- */ /* Réplica exacta de .btn-default y .btn-xs de Bootstrap 3.3.5 */ .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } /* ---- Botón de cierre (modales/alerts) ---- * webarch.css sólo estiliza ".alert .close"; los modales usan el * ".close" genérico de Bootstrap 3 que BS5 reemplazó por ".btn-close". */ .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; } .close:hover, .close:focus { color: #000; text-decoration: none; opacity: 0.75; } /* Las vistas ponen el botón .btn-close ANTES que el título en el markup * (orden heredado de BS3, donde .close flotaba a la derecha). El * .modal-header de BS5 es un flex sin justify-content:space-between activo * aquí, así que ambos quedan pegados a la izquierda en orden de DOM. Se fija * el orden visual explícitamente sin depender del orden del markup. */ .modal-header { justify-content: space-between !important; } .modal-header .modal-title { order: 1; } .modal-header .btn-close { order: 2; } /* DataTables-c/datatables.min.css trae Bootstrap 3 embebido, que define * ".modal.fade .modal-dialog{transform:translate(0,-25%)}" con la misma * especificidad que el reset de Bootstrap 5 (transform:none al mostrarse) y * gana el empate por cargar después, empujando el modal fuera de pantalla. */ .modal.show .modal-dialog { transform: none !important; } /* Mismo bundle también trae ".fade{opacity:0}" incondicional (sintaxis BS3, * sin conocer la clase .show de BS5). Bootstrap 5 sólo pone opacity:0 en * ".fade:not(.show)", así que al tener .show nada restaura la opacidad. * Sólo se corrige el modal en sí: si se aplicara a ".fade.show" en general, * también forzaría opacity:1 en ".modal-backdrop", dejándolo negro sólido * en vez de semitransparente. */ .modal.show { opacity: 1 !important; } .modal-backdrop.show { opacity: var(--bs-backdrop-opacity, 0.5) !important; } /* Ese mismo BS3 embebido define ".modal-dialog{width:600px}" (min-width:768px) * y ".modal-lg{width:900px}" (min-width:992px), pero no conoce ".modal-xl" * (clase agregada recién en BS4). Como ".modal-dialog" y ".modal-xl" tienen * igual especificidad, la regla de BS3 (cargada después) gana y .modal-xl * queda sin efecto -> se restaura aquí el ancho de BS5 para .modal-xl. */ @media (min-width: 1200px) { .modal-xl { width: 1140px; } } /* ---- Formularios ---- */ .control-label { font-weight: 700; } /* Las vistas usan , así que .form-control le quita * el appearance nativo sin reponer flecha. Se repone con el mismo SVG que * usa .form-select. webarch.css fuerza `select{background-image:none!important}`, * por eso esta regla también necesita !important. */ select.form-control { appearance: none !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 16px 12px !important; padding-right: 2.25rem !important; } /* ---- Tablas / DataTables ---- * Bootstrap 5 pinta un background-color opaco en cada th/td vía la variable * --bs-table-bg (resuelve a blanco), lo que oculta el background-color en * línea que usan las vistas para las filas de encabezado * (). Bootstrap 3 no pintaba fondo * propio en las celdas, así que se restaura ese comportamiento sólo para * el encabezado (no afecta el rayado de filas del cuerpo). */ .table > thead > tr > th, .table > thead > tr > td { --bs-table-bg: transparent; --bs-table-color : #6f7b8a; } /* Iguala el borde de las filas al de "Mostrando N registros". Bootstrap 5 * agrega su PROPIO border-bottom sin color explícito (cae a currentColor, * el color del texto, mucho más oscuro) que se superpone al border-top claro * de webarch.css; se anula ese borde extra para dejar solo el de webarch. */ table.dataTable > tbody > tr > td, table.dataTable > tbody > tr > th { border-bottom-width: 0 !important; } /* ---- Grid: infijo "xs" que Bootstrap 5 eliminó (equivale a col-*, sin breakpoint) ---- */ @media (max-width: 767.98px) { .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; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-1 { width: 8.33333333%; } .col-xs-2 { width: 16.66666667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333%; } .col-xs-5 { width: 41.66666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333333%; } .col-xs-8 { width: 66.66666667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333%; } .col-xs-11 { width: 91.66666667%; } .col-xs-12 { width: 100%; } /* ---- Visibilidad: solo dentro de su propio breakpoint (nunca global) ---- */ .visible-xs { display: block !important; } .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .visible-sm { display: block !important; } .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .visible-md { display: block !important; } .hidden-md { display: none !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } .hidden-lg { display: none !important; } }