/*
 * Compatibilidad Bootstrap 3/4 -> Bootstrap 5.
 * Reproduce clases y comportamientos que BS5 elimino y que las vistas siguen usando.
 * Al ir migrando el markup a clases nativas de BS5 se pueden ir quitando reglas de aqui.
 */

/* Enlaces: BS4 solo subrayaba en hover */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .navbar-brand:hover, .dropdown-item:hover,
.page-link:hover, .list-group-item-action:hover, a.badge:hover { text-decoration: none; }

.btn-link { text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* Labels: BS4 les daba margen inferior */
label { margin-bottom: .5rem; }
.form-check-label { margin-bottom: 0; }

/* Formularios BS4 */
.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-check { width: 100%; }
@media (min-width: 576px) {
    .form-inline label { display: flex; align-items: center; justify-content: center; margin-bottom: 0; }
    .form-inline .form-group { display: flex; flex: 0 0 auto; flex-flow: row wrap; align-items: center; margin-bottom: 0; }
    .form-inline .form-control, .form-inline .form-select { display: inline-block; width: auto; vertical-align: middle; }
    .form-inline .input-group { width: auto; }
    .form-inline .form-check { width: auto; }
}

/* input-group-prepend / input-group-append (BS5 los quito) */
.input-group-prepend, .input-group-append { display: flex; }
.input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}

/* Botones */
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }

/* Boton .close de BS4 (modales y alertas) */
.close {
    float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000;
    text-shadow: 0 1px 0 #fff; opacity: .5; padding: 0; background-color: transparent; border: 0;
}
.close:hover { color: #000; text-decoration: none; }
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus { opacity: .75; }
.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }
.alert-dismissible .close { position: absolute; top: 0; right: 0; z-index: 2; padding: .75rem 1.25rem; color: inherit; }

/* Jumbotron */
.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: #e9ecef; border-radius: .3rem; }
@media (min-width: 576px) { .jumbotron { padding: 4rem 2rem; } }

/* Restos de Bootstrap 3 */
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid #ddd; background-color: #f5f5f5; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.panel-body { padding: 15px; }
.panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; }
.panel-title { margin: 0; font-size: 16px; }
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; }
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }
.has-error .help-block, .has-error .control-label { color: #a94442; }
.has-error .form-control { border-color: #a94442; }
.has-success .help-block, .has-success .control-label { color: #3c763d; }
.has-success .form-control { border-color: #3c763d; }