/*
 * Bootstrap 4 -> 5 compatibility layer.
 * Load right after bootstrap@5 CSS. Covers BS4 classes/defaults removed in BS5
 * that legacy views (and their JS selectors) still rely on.
 */

/* Links: BS4 only underlined on hover */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover, .btn:hover, .nav-link:hover, .navbar-brand:hover, .dropdown-item:hover,
.page-link:hover, .list-group-item:hover, .card a:hover .card-title { text-decoration: none; }

/* Labels had display:inline-block + margin in BS4 reboot */
label { display: inline-block; margin-bottom: .5rem; }
.form-check-label, .form-check label, .input-group label, .btn label { margin-bottom: 0; }

/* Forms */
.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 { display: flex; align-items: center; justify-content: center; width: auto; padding-left: 0; }
    .form-inline .form-check-input { position: relative; flex-shrink: 0; margin-top: 0; margin-right: .25rem; margin-left: 0; }
}
select.form-control { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }
select.form-control[multiple], select.form-control[size]:not([size="1"]) { height: auto; }
.form-text { display: block; }

/* input-group-prepend / -append wrappers (removed in BS5) */
.input-group-prepend, .input-group-append { display: flex; }
.input-group-prepend { margin-right: -1px; }
.input-group-append { margin-left: -1px; }
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .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,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.input-group > .input-group-prepend ~ .form-control,
.input-group > .input-group-prepend ~ .form-select {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.input-group > .form-control:has(~ .input-group-append),
.input-group > .form-select:has(~ .input-group-append) {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}

/* custom-file (BS4) */
.custom-file { position: relative; display: inline-block; width: 100%; height: calc(1.5em + .75rem + 2px); margin-bottom: 0; }
.custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + .75rem + 2px); margin: 0; overflow: hidden; opacity: 0; }
.custom-file-label {
    position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem; overflow: hidden; font-weight: 400; line-height: 1.5; color: #495057;
    background-color: #fff; border: 1px solid #ced4da; border-radius: .25rem; margin-bottom: 0;
}
.custom-file-label::after {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: block; height: calc(1.5em + .75rem);
    padding: .375rem .75rem; line-height: 1.5; color: #495057; content: "Buscar"; background-color: #e9ecef;
    border-left: inherit; border-radius: 0 .25rem .25rem 0;
}
.custom-file-input:focus ~ .custom-file-label { border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }

/* Buttons */
.btn-link { text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }

/* Close button fallback (markup not converted to .btn-close) */
.close {
    float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000;
    text-shadow: 0 1px 0 #fff; opacity: .5; background: transparent; border: 0; padding: 0;
}
.close:hover { color: #000; text-decoration: none; opacity: .75; }
.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }

/* Layout components removed in BS5 */
.jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; background-color: #e9ecef; border-radius: .3rem; }
@media (min-width: 576px) { .jumbotron { padding: 4rem 2rem; } }
.jumbotron-fluid { padding-right: 0; padding-left: 0; border-radius: 0; }
.card-deck { display: flex; flex-direction: column; }
.card-deck .card { margin-bottom: 15px; }
@media (min-width: 576px) {
    .card-deck { flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }
    .card-deck .card { flex: 1 0 0%; margin-right: 15px; margin-left: 15px; }
}
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }
.text-justify { text-align: justify !important; }

/* BS4 badges had no default text color on links */
a.badge:hover { text-decoration: none; }