/**
 * BS3 -> BS5 Compatibility Layer
 * ==============================
 * Permite que paginas legacy con clases Bootstrap 3 funcionen con Bootstrap 5.
 * Cargar DESPUES de bootstrap 5 CSS.
 *
 * Cubre: grid (col-xs-*), floats (pull-right/left), visibility (hidden-*),
 *        labels, panels, forms, modals, navbars, wells y utilidades varias.
 *
 * @version 1.0.0
 * @date    2026-03-16
 */

/* ===== GRID SYSTEM ===== */
/* BS3 col-xs-* -> BS5 col-* (xs es el default en BS5) */
.col-xs-1  { flex: 0 0 auto; width:  8.333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* col-xs-offset-* -> margin-left equivalente */
.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left:  8.333333%; }
.col-xs-offset-2  { margin-left: 16.666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.333333%; }
.col-xs-offset-5  { margin-left: 41.666667%; }
.col-xs-offset-6  { margin-left: 50%; }
.col-xs-offset-7  { margin-left: 58.333333%; }
.col-xs-offset-8  { margin-left: 66.666667%; }
.col-xs-offset-9  { margin-left: 75%; }
.col-xs-offset-10 { margin-left: 83.333333%; }
.col-xs-offset-11 { margin-left: 91.666667%; }

/* col-xs-push / col-xs-pull (posicionamiento relativo BS3) */
.col-xs-push-0  { left: auto; }
.col-xs-push-1  { left:  8.333333%; }
.col-xs-push-2  { left: 16.666667%; }
.col-xs-push-3  { left: 25%; }
.col-xs-push-4  { left: 33.333333%; }
.col-xs-push-6  { left: 50%; }
.col-xs-pull-0   { right: auto; }
.col-xs-pull-6   { right: 50%; }
.col-xs-pull-9   { right: 75%; }


/* ===== FLOAT UTILITIES ===== */
.pull-right { float: right !important; }
.pull-left { float: left !important; }

/* Text alignment (removed in BS5, replaced by text-end/text-start) */
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }
.pull-left  { float: left !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }


/* ===== VISIBILITY ===== */
/* BS3 hidden-xs = oculto en < 576px */
@media (max-width: 575.98px) {
    .hidden-xs { display: none !important; }
}
/* BS3 hidden-sm = oculto en 576-767px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hidden-sm { display: none !important; }
}
/* BS3 hidden-md = oculto en 768-991px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-md { display: none !important; }
}
/* BS3 hidden-lg = oculto en >= 992px */
@media (min-width: 992px) {
    .hidden-lg { display: none !important; }
}

/* visible-* classes: oculto por defecto, visible solo en su breakpoint */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}
@media (max-width: 575.98px) {
    .visible-xs { display: block !important; }
    .visible-xs-block { display: block !important; }
    .visible-xs-inline { display: inline !important; }
    .visible-xs-inline-block { display: inline-block !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .visible-sm { display: block !important; }
    .visible-sm-block { display: block !important; }
    .visible-sm-inline { display: inline !important; }
    .visible-sm-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-md { display: block !important; }
    .visible-md-block { display: block !important; }
    .visible-md-inline { display: inline !important; }
    .visible-md-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) {
    .visible-lg { display: block !important; }
    .visible-lg-block { display: block !important; }
    .visible-lg-inline { display: inline !important; }
    .visible-lg-inline-block { display: inline-block !important; }
}

/* hidden-lt-ie10: no aplica en navegadores modernos, mantener oculto */
.hidden-lt-ie10 { }
.visible-lt-ie10 { display: none !important; }


/* ===== BUTTONS ===== */
/* btn-effect-ripple: efecto ripple de BS3 template */
.btn-effect-ripple {
    position: relative;
    overflow: hidden;
}

/* btn-default no existe en BS5 */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}


/* ===== LABELS -> BADGES ===== */
/* BS3 .label .label-* -> BS5 .badge .bg-* */
.label {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
}
.label-default { background-color: #6c757d; }
.label-primary { background-color: #0d6efd; }
.label-success { background-color: #198754; }
.label-info    { background-color: #0dcaf0; color: #000; }
.label-warning { background-color: #ffc107; color: #000; }
.label-danger  { background-color: #dc3545; }


/* ===== PANELS -> CARDS ===== */
.panel {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}
.panel-heading {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}
.panel-body {
    padding: 1.25rem;
}
.panel-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, .03);
    border-top: 1px solid rgba(0, 0, 0, .125);
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
}
.panel-primary > .panel-heading {
    color: #fff;
    background-color: #ED1C24;
}
.panel-success > .panel-heading {
    color: #155724;
    background-color: #d4edda;
}
.panel-info > .panel-heading {
    color: #0c5460;
    background-color: #d1ecf1;
}
.panel-warning > .panel-heading {
    color: #856404;
    background-color: #fff3cd;
}
.panel-danger > .panel-heading {
    color: #721c24;
    background-color: #f8d7da;
}


/* ===== FORMS ===== */
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
    margin-bottom: 1rem;
}
.form-horizontal .control-label {
    padding-top: calc(0.375rem + 1px);
}
.form-group {
    margin-bottom: 1rem;
}
.form-bordered .form-group {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* input-group-addon (BS3) -> input-group-text (BS5) */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
.input-group .input-group-addon:first-child {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .input-group-addon:first-child + .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group-btn {
    display: flex;
}
.input-group-btn .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* help-block (BS3) -> form-text (BS5) */
.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
    font-size: 0.875em;
}

/* control-label */
.control-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}


/* ===== DROPDOWNS ===== */
/* dropdown-menu-right (BS3) -> dropdown-menu-end (BS5) */
.dropdown-menu-right {
    right: 0;
    left: auto;
}

/* divider (BS3) -> dropdown-divider (BS5) */
.divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}


/* ===== MODALS ===== */
/* main.css anima .modal.fade .modal-dialog a opacity 0 y solo lo restaura con
   .modal.in (BS3). Bootstrap 5 aplica .show, asi que sin esta regla los
   modales legacy abren invisibles. */
.modal.show .modal-dialog {
    opacity: 1 !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
}

/* BS3 close button compat */
.modal .close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.5;
    padding: 0;
    float: right;
    cursor: pointer;
}
.modal .close:hover {
    opacity: 0.75;
}

/* BS3 modal-header tenia titulo a la izquierda y close a la derecha */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-header .modal-title {
    margin: 0;
}


/* ===== NAVBARS ===== */
.navbar-nav-custom {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: center;
}
.navbar-nav-custom > li {
    position: relative;
}
.navbar-nav-custom > li > a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
}
.navbar-inverse {
    background-color: #343a40;
    border-color: #343a40;
}
.navbar-default {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}


/* ===== ALERTS ===== */
/* BS3 alert-dismissable (nota: BS5 usa alert-dismissible) */
.alert-dismissable {
    padding-right: 3rem;
}
.alert-dismissable .close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem 1rem;
}


/* ===== IMAGES ===== */
.img-circle {
    border-radius: 50% !important;
}
.img-rounded {
    border-radius: 0.375rem !important;
}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
.img-thumbnail-avatar-2x {
    width: 80px;
    height: 80px;
    object-fit: cover;
}


/* ===== WELLS ===== */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}
.well-sm {
    padding: 9px;
    border-radius: 3px;
}
.well-lg {
    padding: 24px;
    border-radius: 6px;
}


/* ===== PROGRESS BARS ===== */
.progress-mini {
    height: 6px;
}
.progress-bar-primary {
    background-color: #ED1C24;
}
.progress-bar-success {
    background-color: #198754;
}
.progress-bar-info {
    background-color: #0dcaf0;
}
.progress-bar-warning {
    background-color: #ffc107;
}
.progress-bar-danger {
    background-color: #dc3545;
}


/* ===== TEXT UTILITIES ===== */
.text-light-op {
    color: rgba(255, 255, 255, 0.6) !important;
}


/* ===== SPACING UTILITIES (template custom) ===== */
.push {
    margin: 15px;
}
.push-bit {
    margin: 10px;
}
.push-top {
    margin-top: 15px;
}
.push-top-bottom {
    margin-top: 15px;
    margin-bottom: 15px;
}
.pad {
    padding: 15px;
}


/* ===== PRINT ===== */
@media print {
    .no-print {
        display: none !important;
    }
}


/* ===== TABLES ===== */
/* BS3 table-condensed -> BS5 table-sm */
.table-condensed th,
.table-condensed td {
    padding: 0.25rem 0.5rem;
}


/* ===== PAGINATION ===== */
/* BS3 paginacion con > li > a directos */
.pagination > li {
    display: inline;
}
.pagination > li > a,
.pagination > li > span {
    position: relative;
    display: block;
    padding: 0.375rem 0.75rem;
    margin-left: -1px;
    line-height: 1.5;
    color: #ED1C24;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.pagination > li.active > a,
.pagination > li.active > span {
    z-index: 3;
    color: #fff;
    background-color: #ED1C24;
    border-color: #ED1C24;
}
.pagination > li > a:hover {
    color: #c41017;
    background-color: #e9ecef;
    border-color: #dee2e6;
}


/* ===== CLEARFIX ===== */
/* BS3 clearfix helper - BS5 ya lo tiene pero por si acaso */
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}


/* ===== CARET ===== */
/* BS3 usaba .caret para dropdown arrows */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}