/* Bootstrap 3 to Bootstrap 4 Compatibility Styles */
/* This file maintains Bootstrap 3 spacing and visual appearance in Bootstrap 4 */

/* Grid System Compatibility */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Bootstrap 3 Grid Breakpoints */
@media (min-width: 768px) {
    .col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xs-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xs-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Panel to Card Compatibility */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-default {
    border-color: #ddd;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-body {
    padding: 15px;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

/* Well to Card Compatibility */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

.well-sm {
    padding: 9px;
    border-radius: 3px;
}

.well-lg {
    padding: 24px;
    border-radius: 6px;
}

/* Hidden classes compatibility */
.hidden-xs {
    display: none !important;
}

@media (min-width: 768px) {
    .hidden-xs {
        display: block !important;
    }
}

.hidden-sm {
    display: block !important;
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hidden-sm {
        display: block !important;
    }
}

.hidden-md {
    display: block !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-md {
        display: block !important;
    }
}

.hidden-lg {
    display: block !important;
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/* Button block compatibility */
.btn-block {
    display: block;
    width: 100%;
}

/* Form spacing compatibility */
.form-group {
    margin-bottom: 15px;
}

.form-control {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

/* Input group compatibility */
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input-group-addon:first-child {
    border-right: 0;
}

.input-group-addon:last-child {
    border-left: 0;
}

/* Navigation compatibility */
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.navbar-default .navbar-nav > li > a {
    color: #777;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}

/* Navbar toggler visible sólo en mobile (BS4) */
@media (min-width: 992px) {
    .navbar .navbar-toggler { display: none; }
}

/* Ajuste del logo en navbar */
#lh-logo { max-height: 24px; height: 24px; width: auto; }

/* Colores de navbar y enlaces */
.navbar a {
    color: #465765;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    padding-top: 3px;
    padding-right: 20px;
    padding-bottom: 3px;
    padding-left: 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

/* Separación del dropdown respecto al navbar */
.navbar .dropdown-menu { margin-top: 10px !important; }

/* Navbar-header: mobile con espacio entre logo y toggler */
.navbar .navbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* En desktop el header no ocupa todo el ancho */
@media (min-width: 992px) {
    .navbar .navbar-header { width: auto; }
}

/* Container compatibility */
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* Row compatibility */
.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* Typography compatibility - Bootstrap 3 to 4 */
/* Bootstrap 3 font sizes */
h1 { font-size: 36px; line-height: 1.1; }
h2 { font-size: 30px; line-height: 1.1; }
h3 { font-size: 24px; line-height: 1.1; }
h4 { font-size: 18px; line-height: 1.1; }
h5 { font-size: 14px; line-height: 1.1; }
h6 { font-size: 12px; line-height: 1.1; }

/* Bootstrap 3 heading margins - CRITICAL for spacing */
.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

label {
    max-width: 100%;
    font-weight: 700;
}

.checkbox label, .radio label {
    min-height: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

/* Bootstrap 3 body font size */
body { font-size: 14px; line-height: 1.42857143; }

/* Bootstrap 3 small text */
small, .small { font-size: 12px; }

/* Bootstrap 3 lead text */
.lead { font-size: 16px; line-height: 1.4; }

/* Bootstrap 3 list margins */
ul, ol { margin-top: 0; margin-bottom: 10px; }

/* Bootstrap 3 blockquote margins */
blockquote { margin: 0 0 20px; }

/* Additional spacing utilities */
.top10 {
    margin-top: 10px;
}

.top20 {
    margin-top: 20px;
}

.bottom10 {
    margin-bottom: 10px;
}

.bottom20 {
    margin-bottom: 20px;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* FAQ Accordion Styles */
.accordion .card-header { 
    padding: 10px 15px; 
}

.accordion h4 { 
    margin-top: 0; 
}

.accordion .card-header .btn.btn-link { 
    color: #333; 
    text-decoration: none; 
    padding: 0;
}

.accordion .card-header .btn.btn-link:hover { 
    color: #333; 
    text-decoration: none; 
}

/* Date range fields - make them narrower to fit in same width */
.well .row .col-md-4 .input-group {
    display: flex;
    width: 100%;
}

.well .row .col-md-4 .input-group .form-control {
    flex: 1;
    width: auto;
    min-width: 0;
}

.well .row .col-md-4 .input-group-addon {
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: 12px;
}

/* Custom dropdown buttons styling to match form-control */
.well .btn.btn-default.dropdown-toggle.btn-block {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555;
    text-align: left;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.well .btn.btn-default.dropdown-toggle.btn-block:hover,
.well .btn.btn-default.dropdown-toggle.btn-block:focus {
    background-color: #fff;
    border-color: #66afe9;
    color: #555;
}

.well .btn.btn-default.dropdown-toggle.btn-block:active {
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* Element UI selects styling */
.well .el-select {
    width: 100%;
}

.well .el-select .el-input__inner {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555;
    height: 34px;
    line-height: 1.42857143;
    font-size: 14px;
    border-radius: 4px;
}

.well .el-select .el-input__inner:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

       /* Collapse wrapper divs without Bootstrap column classes (simulate height:0, no width) */
       .well .row > div:not([class]),
       .well .row > div[class=""],
       .well .row > div:not([class*="col-"]) {
           display: contents;
       }

       /* Fallback for browsers without display: contents support */
       @supports not (display: contents) {
           .well .row > div:not([class]),
           .well .row > div[class=""],
           .well .row > div:not([class*="col-"]) {
               width: 0 !important;
               max-width: 0 !important;
               flex: 0 0 0 !important;
               padding: 0 !important;
               margin: 0 !important;
               border: 0 !important;
           }
       }

       /* Dropdown menu padding for checkboxes */
       .dropdown-menu li a {
           padding: 8px 15px !important;
           display: block !important;
           position: relative !important;
           font-size: 14px !important;
       }

       .dropdown-menu li a input[type="checkbox"] {
           margin-right: 8px !important;
           margin-left: 0 !important;
           vertical-align: middle !important;
           position: relative !important;
           top: -1px !important;
       }

       .dropdown-menu li a label {
           margin: 0 !important;
           padding: 0 !important;
           vertical-align: middle !important;
           display: inline !important;
           font-size: 14px !important;
       }

/* Form labels stacked above inputs (Bootstrap 3 behavior) */
.form-group > label {
    display: block;
    width: 100%;
    margin-bottom: 5px;
}

/* Modal adjuntos: título a la derecha y botón cerrar a la izquierda */
#attachment-model .modal-header {
    display: flex;
    align-items: center;
}

#attachment-model .modal-header .close {
    order: 2;
    float: none; /* anula float de Bootstrap */
    margin: 0;
    margin-left: auto;
}

#attachment-model .modal-header .modal-title {
    order: 1;
    margin: 0;
    margin-right: auto;
    text-align: right;
    flex: 0 0 auto;
}

/* Botón OK con borde (estilo Bootstrap 3) */
.btn.btn-default {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
}

/* Links de remover adjuntos en nueva línea */
.form-group a.remove_this,
#removeFile {
    display: block !important;
    margin-top: 8px;
}