.controles {
   display: flex;
   justify-content: space-between;
   border: 0px solid red;
   padding-top: 4px;
   padding-bottom: 12px;
   padding-left: 2px;
   padding-right: 2px;
   }

.controles > .left {
   display: flex;
   border: 0px dotted red;
   justify-content: flex-start;
   width: 100%;
   }

.controles > .left > a,button,input {
   margin-right: 4px;
   }

.controles > .center {
   display: flex;
   border: 0px dotted green;
   justify-content: center;
   width: 100%;
   }

.controles > .center > a,button,input {
   margin-right: 2px;
   margin-left: 2px;
   }

.controles > .right {
   display: flex;
   justify-content: flex-end;
   border: 0px solid cyan;
   width: 100%;
   }

.controles > .right > a,button,input {
   margin-left: 4px;
}

.two-panels {
   display: flex;
   gap: 10px;
   border-top: 2px solid gray;
   border-bottom: 2px solid gray;
   padding-top: 4px;
   padding-bottom: 12px;
   padding-left: 2px;
   padding-right: 2px;
}

.two-panels .left-panel {
   display: flex;
   flex-direction: column;
   border: 0px dotted navy;
   justify-content: flex-start;
   width: 100%;
}

.two-panels .right-panel {
   display: flex;
   flex-direction: column;
   border: 0px dotted red;
   justify-content: flex-start;
   width: 100%;
 }

/* Formulario de búsqueda */

.search-query {
   display: flex;
   flex-direction: rows;
   gap: 10px;
   border: 0px dotted red;
} 

.modal-dialog {
  padding-left: 2%;
  padding-right: 2%;
  border-radius: 20px;
  }

  .search-container {
    position: relative;
}

.search-input {
    height: 50px;
    border-radius: 30px;
    padding-left: 35px;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #888;
}