/* ==========================================================================
   Bootstrap 3 → 5 Compatibility Layer
   Maps BS3 classes to BS5 equivalents so existing views work without changes.
   Load AFTER bootstrap.min.css and BEFORE gobierno-2026.css
   ========================================================================== */

/* ---------- [REMOVED] Panels → Cards ---------- */
/* Panel rules removed — all views now use BS5 .card classes (Phase 3, Mar 2026) */

/* ---------- [REMOVED] Phase 5 cleanup (Mar 2026) ---------- */
/* Removed dead rules with 0 remaining references:
   col-xs-* grid/offsets/push/pull, pull-left/right, center-block,
   img-responsive, img-rounded, img-circle, .label (base), .label-default,
   .label-primary, .label-info, .label-warning, .label-danger, .btn-default,
   .input-group-addon, .control-label, .help-block, .caret, .affix */

/* ---------- Visibility classes (BS3) ---------- */
.hidden { display: none !important; }

/* .hidden-xs, .hidden-sm, etc. — BS3 responsive visibility */
@media (max-width: 767.98px) {
    .hidden-xs { display: none !important; }
    .visible-xs { display: block !important; }
    table.visible-xs { display: table !important; }
    tr.visible-xs { display: table-row !important; }
    th.visible-xs, td.visible-xs { display: table-cell !important; }
    .visible-xs-inline { display: inline !important; }
    .visible-xs-inline-block { display: inline-block !important; }
    .visible-xs-block { display: block !important; }
}
@media (min-width: 768px) {
    .visible-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-sm { display: none !important; }
    .visible-sm { display: block !important; }
    table.visible-sm { display: table !important; }
    tr.visible-sm { display: table-row !important; }
    th.visible-sm, td.visible-sm { display: table-cell !important; }
    .visible-sm-inline { display: inline !important; }
    .visible-sm-inline-block { display: inline-block !important; }
    .visible-sm-block { display: block !important; }
}
@media (max-width: 767.98px), (min-width: 992px) {
    .visible-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hidden-md { display: none !important; }
    .visible-md { display: block !important; }
    table.visible-md { display: table !important; }
    tr.visible-md { display: table-row !important; }
    th.visible-md, td.visible-md { display: table-cell !important; }
    .visible-md-inline { display: inline !important; }
    .visible-md-inline-block { display: inline-block !important; }
    .visible-md-block { display: block !important; }
}
@media (max-width: 991.98px), (min-width: 1200px) {
    .visible-md { display: none !important; }
}

@media (min-width: 1200px) {
    .hidden-lg { display: none !important; }
    .visible-lg { display: block !important; }
    table.visible-lg { display: table !important; }
    tr.visible-lg { display: table-row !important; }
    th.visible-lg, td.visible-lg { display: table-cell !important; }
    .visible-lg-inline { display: inline !important; }
    .visible-lg-inline-block { display: inline-block !important; }
    .visible-lg-block { display: block !important; }
}
@media (max-width: 1199.98px) {
    .visible-lg { display: none !important; }
}

/* ---------- Labels: only label-success kept (toggle switches) ---------- */
.label-success { background-color: #198754; }

/* ---------- Forms ---------- */
/* Form-group spacing */
.form-group {
    margin-bottom: 1rem;
}

/* ---------- Well ---------- */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
}
.well-lg { padding: 24px; border-radius: .5rem; }
.well-sm { padding: 9px;  border-radius: .25rem; }

/* ---------- Thumbnail ---------- */
.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.thumbnail .caption {
    padding: 9px;
    color: #212529;
}

/* ---------- Page Header ---------- */
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #dee2e6;
}

/* ---------- Breadcrumb separator fix ---------- */
/* BS3 uses > as separator, BS5 uses / — keep BS3 style */
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

/* ---------- Breadcrumb BS3 <li> compat ---------- */
/* BS3: <ol class="breadcrumb"><li>...</li></ol>
   BS5: requires .breadcrumb-item on each <li>.
   This shim makes plain <li> inside .breadcrumb work like .breadcrumb-item. */
.breadcrumb > li:not(.breadcrumb-item) {
    display: inline-block;
    font-size: 14px;
}
.breadcrumb > li:not(.breadcrumb-item) + li:not(.breadcrumb-item)::before {
    content: ">";
    padding: 0 6px;
    color: #6c757d;
}
.breadcrumb > li:not(.breadcrumb-item).active {
    color: #6c757d;
}
.breadcrumb > li:not(.breadcrumb-item) a {
    color: var(--azul, #02395e);
    text-decoration: none;
}
.breadcrumb > li:not(.breadcrumb-item) a:hover {
    color: var(--dorado, #ad8411);
    text-decoration: underline;
}

/* ---------- Navbar compatibility ---------- */
/* BS3 .navbar-default → BS5 just uses .navbar */
.navbar-default {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-brand {
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-right: 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #ddd;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #888;
}
.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

/* navbar-right (BS3 alignment) */
.navbar-right {
    margin-left: auto !important;
}

/* ---------- List-inline compatibility ---------- */
/* BS3 .list-inline > li had inline-block + padding */
.list-inline-item {
    display: inline-block;
}

/* ---------- Progress bar compatibility ---------- */
/* BS3 uses .active for animated, BS5 uses .progress-bar-animated */
.progress-bar.active {
    animation: progress-bar-stripes 1s linear infinite;
}

/* ---------- Modal dialog sizes (BS3 names) ---------- */
.modal-sm { max-width: 300px; }
/* .modal-lg already exists in BS5 */

/* ---------- Table responsive (BS3 direct class on table) ---------- */
/* In BS3, .table-responsive was applied directly to the table
   In BS5, it's a wrapper div. This compat keeps direct usage working. */
table.table-responsive {
    display: table;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- [REMOVED] Close button compat ---------- */
/* .close rules removed — all views now use BS5 .btn-close (Phase 5B, Mar 2026) */

/* ---------- Nav-pills / Nav-tabs (BS3 → BS5 structure) ---------- */
/* BS3: .nav-pills > li > a  —  BS5: .nav-pills > .nav-item > .nav-link
   This compat makes BS3 markup work with BS5 styling. */
.nav-pills > li:not(.nav-item),
.nav-tabs > li:not(.nav-item) {
    display: inline-block;
    margin-bottom: -1px;
}
.nav-pills > li:not(.nav-item) > a:not(.nav-link),
.nav-tabs > li:not(.nav-item) > a:not(.nav-link) {
    display: block;
    padding: 8px 16px;
    font-size: inherit;
    text-decoration: none;
    color: #555;
    border-radius: .375rem;
    transition: color .15s, background-color .15s;
}
.nav-pills > li:not(.nav-item) > a:not(.nav-link):hover {
    color: #02395e;
    background-color: rgba(0,61,123,.06);
}
.nav-pills > li.active:not(.nav-item) > a:not(.nav-link),
.nav-pills > li:not(.nav-item) > a.active:not(.nav-link) {
    color: #fff !important;
    background-color: #02395e !important;
    border-radius: .375rem;
}
/* Nav-tabs active state for BS3 markup */
.nav-tabs > li.active:not(.nav-item) > a:not(.nav-link),
.nav-tabs > li:not(.nav-item) > a.active:not(.nav-link) {
    color: #02395e !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6;
    border-bottom-color: #fff;
    border-radius: .375rem .375rem 0 0;
}
.nav-tabs > li:not(.nav-item) > a:not(.nav-link):hover {
    color: #02395e;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom-color: transparent;
    border-radius: .375rem .375rem 0 0;
}

/* Tab pane safety — BS5 handles .tab-pane display natively.
   Only ensure .active panes have .show when using .fade transitions. */

/* Nav-justified (BS3 equal-width pills/tabs) */
.nav-justified > li:not(.nav-item) {
    flex: 1;
    text-align: center;
}

/* ---------- Orphaned col-* without .row parent ---------- */
/* BS5 requires col-* inside .row for flexbox grid. This compat makes
   container-fluid act like .row when it has direct col-* children. */
.container-fluid:has(> [class*="col-"]:not(.row)) {
    display: flex;
    flex-wrap: wrap;
}
/* Fallback for older browsers — float-based */
.container-fluid > [class*="col-"]:not(.row [class*="col-"]) {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* ---------- Form-horizontal (BS3 → BS5 flexbox) ---------- */
/* BS3 .form-horizontal created grid-aligned label+input rows.
   BS5 removed it. This shim recreates the layout with flexbox. */
.form-horizontal .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.form-horizontal .form-group > label,
.form-horizontal .form-group > .form-label {
    padding-top: calc(.375rem + 1px);
    margin-bottom: 0;
}
.form-horizontal .form-group > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}
@media (max-width: 767.98px) {
    .form-horizontal .form-group {
        flex-direction: column;
    }
    .form-horizontal .form-group > label,
    .form-horizontal .form-group > .form-label {
        padding-top: 0;
        margin-bottom: .5rem;
        width: 100%;
    }
    .form-horizontal .form-group > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* ---------- DL-horizontal (BS3 definition lists) ---------- */
/* BS3 .dl-horizontal displayed dt/dd side-by-side. BS5 removed it. */
.dl-horizontal {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    align-items: baseline;
}
.dl-horizontal dt {
    grid-column: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.dl-horizontal dd {
    grid-column: 2;
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .dl-horizontal {
        grid-template-columns: 1fr;
    }
    .dl-horizontal dt {
        grid-column: 1;
        text-align: left;
        max-width: none;
    }
    .dl-horizontal dd {
        grid-column: 1;
        margin-bottom: .5rem;
    }
}

/* ---------- btn-xs (BS3 extra-small button) ---------- */
/* BS5 removed .btn-xs. Map to smaller than .btn-sm. */
.btn-xs {
    padding: 2px 8px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    border-radius: .2rem !important;
}

/* ---------- Form-inline (BS3 → BS5 flexbox) ---------- */
/* BS3 .form-inline placed controls inline. BS5 changed behavior. */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 8px;
}
.form-inline .form-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
@media (max-width: 575.98px) {
    .form-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .form-inline .form-group {
        width: 100%;
    }
    .form-inline .form-control {
        width: 100%;
    }
}