/* ============================================================================= FILE: /app/ps_bs4_compat.css ----------------------------------------------------------------------------- LAS CLASES DE BOOTSTRAP 4 QUE LAS PANTALLAS TODAVIA USAN, DICHAS EN BOOTSTRAP 5. El panel cargaba Bootstrap 4.5.2 y Bootstrap 5 a la vez, uno arriba del otro, porque 20 pantallas siguen escritas con clases que en la 5 no existen o se llaman distinto. Medido el 30/09/2026 sobre los 568 archivos del panel: 95 .close 68 .form-group 30 .input-group-prepend 15 .mr-2 8 .input-group-append 8 .custom-control (checkbox) 8 .btn-block 8 .mr-1 6 .text-left / 3 .text-right 6 .form-control-file 3 .form-row / 3 .form-inline 3 .font-weight-bold 2 .text-monospace y sueltos: .sr-only, .no-gutters, .ml-2, .media, .custom-select, .badge-secondary/-light/-danger Con esta hoja esas clases se ven igual SIN cargar la 4. Asi la 4 se puede quitar hoy, y cada pantalla se migra a las clases de la 5 cuando le toque su turno (paso 2 del plan), no todas juntas y a ciegas. Cuando una pantalla ya no use ninguna de estas clases, no hace falta tocar esta hoja: no pisa nada de la 5, solo agrega lo que la 5 no tiene. ============================================================================= */ /* ── Margenes: la 4 decia left/right, la 5 dice start/end ─────────────────── */ .ml-0{margin-left:0!important} .mr-0{margin-right:0!important} .ml-1{margin-left:.25rem!important} .mr-1{margin-right:.25rem!important} .ml-2{margin-left:.5rem!important} .mr-2{margin-right:.5rem!important} .ml-3{margin-left:1rem!important} .mr-3{margin-right:1rem!important} .ml-4{margin-left:1.5rem!important} .mr-4{margin-right:1.5rem!important} .ml-5{margin-left:3rem!important} .mr-5{margin-right:3rem!important} .ml-auto{margin-left:auto!important} .mr-auto{margin-right:auto!important} .pl-0{padding-left:0!important} .pr-0{padding-right:0!important} .pl-1{padding-left:.25rem!important} .pr-1{padding-right:.25rem!important} .pl-2{padding-left:.5rem!important} .pr-2{padding-right:.5rem!important} .pl-3{padding-left:1rem!important} .pr-3{padding-right:1rem!important} .pl-4{padding-left:1.5rem!important} .pr-4{padding-right:1.5rem!important} .pl-5{padding-left:3rem!important} .pr-5{padding-right:3rem!important} /* ── Texto y flotantes ────────────────────────────────────────────────────── */ .text-left{text-align:left!important} .text-right{text-align:right!important} .float-left{float:left!important} .float-right{float:right!important} .font-weight-bold{font-weight:700!important} .font-weight-bolder{font-weight:bolder!important} .font-weight-normal{font-weight:400!important} .font-weight-light{font-weight:300!important} .font-italic{font-style:italic!important} .text-monospace{font-family:var(--bs-font-monospace)!important} .text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0} .sr-only, .sr-only-focusable:not(:focus):not(:focus-within){ 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; } .rounded-sm{border-radius:var(--bs-border-radius-sm)!important} .rounded-lg{border-radius:var(--bs-border-radius-lg)!important} /* ── Grilla y formularios ─────────────────────────────────────────────────── */ .no-gutters{margin-right:0;margin-left:0} .no-gutters>.col,.no-gutters>[class*="col-"]{padding-right:0;padding-left:0} .form-group{margin-bottom:1rem} .form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px} .form-row>.col,.form-row>[class*="col-"]{padding-right:5px;padding-left:5px} .form-inline{display:flex;flex-flow:row wrap;align-items:center} .form-inline .form-control,.form-inline .form-select{display:inline-block;width:auto;vertical-align:middle} .form-inline .form-group{display:flex;flex:0 0 auto;flex-flow:row wrap;align-items:center;margin-bottom:0} .form-control-file{display:block;width:100%} .btn-block{display:block;width:100%} .btn-block+.btn-block{margin-top:.5rem} /* Los grupos de entrada: en la 4 el boton o el texto iban dentro de un envoltorio .input-group-prepend / -append. La 5 los pone directo y redondea por posicion, asi que hay que decirle al envoltorio que se comporte igual. */ .input-group-prepend,.input-group-append{display:flex} .input-group-prepend>.input-group-text,.input-group-prepend>.btn{ border-top-right-radius:0;border-bottom-right-radius:0; } .input-group>.input-group-prepend:not(:first-child)>*{ margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0; } .input-group-append>*{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0} .input-group>.input-group-append:not(:last-child)>*{ border-top-right-radius:0;border-bottom-right-radius:0; } .input-group-prepend>.btn+.btn,.input-group-append>.btn+.btn{margin-left:-1px} /* ── Casillas "custom" de la 4, con el aspecto de .form-check de la 5 ─────── */ .custom-control{position:relative;display:flex;align-items:center;gap:.5em;min-height:1.5rem;padding-left:0} .custom-control-input{ -webkit-appearance:none;appearance:none;flex:0 0 auto;width:1em;height:1em;margin:0; border:1px solid var(--bs-border-color,rgba(0,0,0,.25));border-radius:.25em; background:var(--bs-body-bg,#fff) center/contain no-repeat;vertical-align:top;cursor:pointer; } .custom-radio .custom-control-input{border-radius:50%} .custom-switch .custom-control-input{width:2em;border-radius:2em;background-position:left center; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");transition:background-position .15s ease-in-out} .custom-control-input:checked{background-color:var(--bs-primary,#0d6efd);border-color:var(--bs-primary,#0d6efd)} .custom-checkbox .custom-control-input:checked{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .custom-radio .custom-control-input:checked{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } .custom-switch .custom-control-input:checked{background-position:right center; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")} .custom-control-input:focus-visible{outline:0;box-shadow:0 0 0 .25rem var(--bs-focus-ring-color,rgba(13,110,253,.25))} .custom-control-input:disabled{pointer-events:none;filter:none;opacity:.5} .custom-control-label{margin-bottom:0;cursor:pointer} .custom-control-input:disabled~.custom-control-label{opacity:.5} /* El select "custom" de la 4 es el .form-select de la 5. */ .custom-select{ display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem; font-size:1rem;font-weight:400;line-height:1.5;color:var(--bs-body-color); background-color:var(--bs-body-bg); 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"); background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px; border:1px solid var(--bs-border-color);border-radius:var(--bs-border-radius); -webkit-appearance:none;-moz-appearance:none;appearance:none; } .custom-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem;border-radius:var(--bs-border-radius-sm)} /* ── Insignias con color propio (en la 5 es .badge + .bg-*) ───────────────── */ .badge-pill{border-radius:50rem} .badge-primary{color:#fff;background-color:var(--bs-primary)} .badge-secondary{color:#fff;background-color:var(--bs-secondary)} .badge-success{color:#fff;background-color:var(--bs-success)} .badge-danger{color:#fff;background-color:var(--bs-danger)} .badge-warning{color:#212529;background-color:var(--bs-warning)} .badge-info{color:#212529;background-color:var(--bs-info)} .badge-light{color:#212529;background-color:var(--bs-light)} .badge-dark{color:#fff;background-color:var(--bs-dark)} /* ── La X de cerrar de la 4 (.close). La 5 usa .btn-close, que es otra cosa. ── */ .close{ float:right;font-size:1.5rem;font-weight:700;line-height:1; color:var(--bs-body-color,#000);text-shadow:0 1px 0 #fff;opacity:.5; padding:0;background-color:transparent;border:0;-webkit-appearance:none;appearance:none; } .close:hover{color:var(--bs-body-color,#000);text-decoration:none} .close:not(:disabled):not(.disabled):hover,.close:not(:disabled):not(.disabled):focus{opacity:.75} .modal-header .close{padding:1rem 1rem;margin:-1rem -1rem -1rem auto} .alert-dismissible .close{position:absolute;top:0;right:0;z-index:2;padding:.75rem 1.25rem} .toast-header .close{margin-bottom:.25rem;margin-left:.5rem} html[data-ps-theme="dark"] .close{color:#fff;text-shadow:none} /* ── Sueltos ──────────────────────────────────────────────────────────────── */ .media{display:flex;align-items:flex-start} .media-body{flex:1} /* La 4 no le ponia color a .card ni a .list-group-item: heredaban del contenedor. La 5 les pone var(--bs-body-color), y en una tienda con plantilla oscura (dark, grafito, medianoche) el titulo de cada producto quedaba gris oscuro sobre la tarjeta negra. Se vuelve a heredar. */ .card,.list-group-item{color:inherit} .dropdown-menu-right{right:0;left:auto} .dropdown-menu-left{right:auto;left:0} .jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:var(--bs-tertiary-bg);border-radius:var(--bs-border-radius-lg)} .card-deck{display:flex;flex-flow:row wrap;gap:1rem} .card-deck .card{flex:1 0 0%} .pre-scrollable{max-height:340px;overflow-y:scroll} .embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden} .embed-responsive::before{display:block;content:"";padding-top:56.25%} .embed-responsive-item,.embed-responsive iframe,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}