/* CSS Document */

/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
/*===== VARIABLES CSS =====*/
:root{
  /*===== Colores para IMPUT =====*/
  --first-color: #000000;/*#001f3f;*/
  --input-color: #80868B;
  --border-color: #DADCE0;
	
  /*===== Fuente y tipografia =====*/
  --body-font: 'Roboto', sans-serif;
  --normal-font-size: 1rem;
  --small-font-size: .80rem;
	
  /*=============== Colores para SELECT ===============*/
  --first-color2: #000000;/*#001f3f;*/
  --input-color2: #80868B;
  --border-color2: #DADCE0;	

  /*===== Fuente y tipografia SELECT =====*/
  --body-font2: 'Roboto', sans-serif;
  --normal-font-size2: 1rem;
  --small-font-size2: .80rem;
}
  
/*===== BASE =====*/
*,::before,::after{
  box-sizing: border-box;
}


/*===== CONFIG INPUT =====*/
.form__div{
  position: relative;
  height: 40px;
  /*margin-bottom: 1.5rem;*/
}
.form__input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--normal-font-size);
  border: 1px solid var(--border-color);
  border-radius: .5rem;
  outline: none;
  padding: 1rem;
  background: none;
  z-index: 1;
}
.form__label{
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0 .25rem;
  background-color: #fff;
  color: var(--input-color);
  font-size: var(--normal-font-size);
  font-weight: bold;
  transition: .3s;
}
/*Input focus move up label*/
.form__input + .form__label{
  top: -.5rem;
  left: .8rem;
  color: var(--first-color);
  font-size: var(--small-font-size);
  font-weight: 500;
  z-index: 10;
}
/*Input focus sticky top label*/
.form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label{
  top: -.5rem;
  left: .8rem;
  font-size: var(--small-font-size);
  font-weight: 500;
  z-index: 10;
}
/*Input focus*/
.form__input:focus{
  border: 1.5px solid var(--first-color);
}

/*=============== CONFIG SELECT ===============*/
.form__div2{
  position: relative;
  height: 40px;
  /*margin-bottom: 1.5rem;*/
}
.form__input2{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--normal-font-size2);
  border: 1px solid var(--border-color2);
  border-radius: .5rem;
  outline: none;
  padding: 0.5rem;
  background: none;
  z-index: 1;
}
.form__label2{
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: 0 .25rem;
  background-color: #fff;
  color: var(--input-color2);
  font-size: var(--normal-font-size2);
  transition: .3s;
}
/*Input focus move up label*/
.form__input2 + .form__label2{
  top: -.5rem;
  left: .8rem;
  color: var(--first-color2);
  font-size: var(--small-font-size2);
  font-weight: 500;
  z-index: 10;
}
/*Input focus sticky top label*/
.form__input2:not(:placeholder-shown).form__input:not(:focus)+ .form__label{
  top: -.5rem;
  left: .8rem;
  font-size: var(--small-font-size2);
  font-weight: 500;
  z-index: 10;
}
/*Input focus*/
.form__input2:focus{
  border: 1.5px solid var(--first-color2);
}


/*AGREGADO POR IA ME RECOMENDO PARA CORREGIR EL SELECT DE INSTITUCION PROVENIENTE*/

/* Nueva clase específica para Select2 */
.select2-custom-container {
  position: relative; /* Mantiene el control del label y del select */
}

.select2-container--default .select2-selection--single {
  height: 40px; /* Ajusta la altura del select */
  padding: 0.5rem; /* Espacio interno para texto */
  display: flex;
  align-items: center; /* Centra el texto verticalmente */
}

/* Ajuste del label */
.select2-custom-container .form__label2 {
  position: absolute;
  top: -0.5rem; /* Ajusta la posición superior del label */
  left: 0.8rem; /* Ajusta la posición izquierda */
  background: #fff; /* Fondo para evitar superposición visual */
  color: crimson;
  font-size: var(--small-font-size2); /* Tamaño reducido */
  transition: 0.3s; /* Transición suave */
  padding: 0 .25rem;
  z-index: 10; /* Asegura que el label esté visible */
}

/* Cuando el select está enfocado o tiene un valor */
.select2-custom-container .select2-container--default .select2-selection--single:focus + .form__label2,
.select2-custom-container .select2-container--default .select2-selection--single:focus:not(:placeholder-shown) + .form__label2,
.select2-custom-container .select2-selection--single:not(:placeholder-shown) + .form__label2,
.select2-custom-container .select2-selection--single:valid + .form__label2 {
  top: -1.2rem; /* Ajusta la posición del label al enfocar */
  left: 0.8rem;
  font-size: var(--small-font-size2); /* Tamaño cuando el select está enfocado */
  font-weight: 500;
  z-index: 10;
}

/* Borde enfocado */
.select2-container--default .select2-selection--single:focus {
  border: 1.5px solid var(--first-color2); /* Cambia el color del borde al enfocar */
}

/* Aplica a la selección del contenedor de Select2 */
.select2-container--default .select2-selection--single {
    border-radius: 8px !important; /* Ajusta a tu valor preferido */
}

/* Aplica a los contenedores internos también, por si hay capas adicionales */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    border-radius: 8px !important; /* Ajusta a tu valor preferido */
}

/* Foco (focus) en el select para cambiar el borde a navy */
.select2-container--default .select2-selection--single:focus {
    border-color: #000000 !important; /* Cambia el borde a navy al enfocar */
    /*box-shadow: 0 0 5px rgba(0, 0, 128, 0.5); /* Opcional: un efecto de sombra */
}

/* Cambia el fondo a negro cuando el mouse pasa sobre las opciones */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #727272 !important; /* Negro */
    color: #ffffff !important; /* Texto blanco para mejor contraste */
}