/* ========================================
   BUSCADOR SIMPLE (Original)
   ======================================== */
.container-search-box{
    position: absolute;
    top:32px;
    left:100px;
}
.search-box{
    background-color:#160437;
    width: fit-content;
    padding: 5px 5px 5px 55px;
    font-family: "gob regular", Sans-serif;
    position: relative;
}
.search-box input{
    width: 180px;
}

.container-search-box svg {
    position: absolute;
    padding: 10px 6px;
    width: 53px;
    height: 53px;
    left: 0;
    top: 0;
}

.container-search-box svg path{
    fill: white;
}

#livesearch{
    width: fit-content;
    position: relative;
    background-color:white;
    font-family: "gob regular", Sans-serif;
    color: black;
    float:left;
    display:none;
    max-height: 300px;
    overflow-y: auto;


}
#livesearch ul {
    list-style-type: none;
    margin: 0;
    padding:0;
    
  }
#livesearch li a {
    font-family: "gob regular", Sans-serif;
    color: black;
    list-style: none;

    padding: 5px;
    display: block;
}
#livesearch li:not(:last-child){
border-bottom-style:solid;
border-bottom-width: 1px;
border-bottom-color:lightgray;
}
#livesearch li:hover{
    background-color:#160437;
}
#livesearch li:hover a{
    color: white;

}

@media only screen and (max-width: 1024px) {
    .container-search-box{
        position: absolute;
        top: 16px;
        left: 16px;
    }

    .container-search-box > .search-box > input{
        width: 90px;
    }
}

@media only screen and (orientation: portrait) {
    .container-search-box{
        display: none;
    }
}

/* ========================================
   BUSCADOR AVANZADO
   ======================================== */
.advanced-search-box {
    background-color: #160437;
    padding: 25px 30px;
    border-radius: 8px;
    font-family: "gob regular", Sans-serif;
    margin-bottom: 30px;
}

.advanced-search-box form {
    margin: 0;
    padding: 0;
}

.advanced-search-box .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    margin-bottom: 15px;
}

.advanced-search-box .row:last-child {
    margin-bottom: 0;
}

.advanced-search-box [class*="col-"] {
    padding: 0 10px;
    box-sizing: border-box;
}

.advanced-search-box .col-md-3 {
    width: 25%;
}

.advanced-search-box .col-md-6 {
    width: 50%;
}

.advanced-search-box .col-md-12 {
    width: 100%;
}

/* Inputs y Selects */
.advanced-search-box input[type="text"],
.advanced-search-box select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid transparent;
    border-radius: 4px;
    font-family: "gob regular", Sans-serif;
    font-size: 14px;
    background-color: #ffffff;
    color: #333;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Transiciones solo para focus (no para cambios de estado) */
.advanced-search-box input[type="text"]:focus,
.advanced-search-box select:focus {
    outline: none;
    border-color: #e8b923;
    box-shadow: 0 0 0 3px rgba(232, 185, 35, 0.2);
}

.advanced-search-box input[type="text"]::placeholder {
    color: #999;
}

/* Select con flecha personalizada */
.advanced-search-box select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Campos deshabilitados (cuando se selecciona Circuitos) */
.advanced-search-box select:disabled,
.advanced-search-box select.field-disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    border-color: #ced4da;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.advanced-search-box select:disabled:focus,
.advanced-search-box select.field-disabled:focus {
    border-color: #ced4da;
    box-shadow: none;
    outline: none;
}

/* Botón de búsqueda */
.advanced-search-box .button-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #e8b923;
    color: #160437;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-family: "gob regular", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    margin-top: 10px;
}

.advanced-search-box .button-search:hover {
    background-color: #d4a820;
    transform: translateY(-2px);
}

.advanced-search-box .button-search:active {
    transform: translateY(0);
    transition: none;
}

.advanced-search-box .button-search i {
    font-size: 14px;
}

/* ========================================
   RESPONSIVE - Buscador Avanzado
   ======================================== */
@media only screen and (max-width: 992px) {
    .advanced-search-box .col-md-3 {
        width: 50%;
        margin-bottom: 10px;
    }
    
    .advanced-search-box .col-md-6 {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 576px) {
    .advanced-search-box {
        padding: 20px 15px;
    }
    
    .advanced-search-box .col-md-3,
    .advanced-search-box .col-md-6,
    .advanced-search-box .col-md-12 {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .advanced-search-box .row {
        margin-bottom: 5px;
    }
    
    .advanced-search-box .button-search {
        width: 100%;
    }
}