/* 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: #000000;/*#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: #000000;/*#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*/

/* Contenedor principal */
.select2-custom-container {
  position: relative;
}

/* === ESTILOS PARA SELECT2 === */

/* Texto dentro del select */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000000 !important; /* texto negro */
    line-height: 40px !important;
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #000000 !important;
}

/* Borde del select normal */
.select2-container--default .select2-selection--single {
    height: 40px !important;
    border: 1px solid #000000 !important; /* borde negro */
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
}

/* Borde cuando está en focus */
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border: 2px solid #000000 !important; /* negro */
}

/* Flechita del select */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #000000 transparent transparent transparent !important;
}

/* === ESTILOS DEL MENÚ DESPLEGADO === */

/* Opciones normales */
.select2-container--default .select2-results__option {
    background-color: #ffffff !important; /* blanco */
    color: #000000 !important; /* negro */
}

/* Opción hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #000000 !important; /* fondo negro */
    color: #ffffff !important; /* texto blanco */
}

/* Opción seleccionada */
.select2-results__option[aria-selected="true"] {
    background-color: #cccccc !important; /* gris claro */
    color: #000000 !important;
}

/* === LABEL flotante (si usas form__label2) === */
.select2-custom-container .form__label2 {
    position: absolute;
    top: -0.5rem;
    left: 0.8rem;
    background: #fff;
    color: crimson;
    font-size: var(--small-font-size2);
    padding: 0 .25rem;
    z-index: 10;
}

/* === Ajustar Select2 pequeño dentro de input-group === */

/* === Tamaño especial para Select2 con clase form-control-sm2 === */

/* Contenedor generado por Select2 justo después del <select> con form-control-sm2 */
/* === SOLO PARA SELECT2 PEQUEÑO (form-control-sm2) === */

/* Contenedor principal */
.form-control-sm2 + .select2.select2-container .select2-selection--single {
    height: 31px !important;
    min-height: 31px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 8px !important;
    border-radius: 4px !important;
    font-size: 0.875rem !important;
}

/* Texto centrado verticalmente SOLO en el pequeño */
.form-control-sm2 + .select2.select2-container 
.select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    line-height: normal !important;
}

/* Flecha centrada SOLO en el pequeño */
.form-control-sm2 + .select2.select2-container 
.select2-selection__arrow {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.form-control-sm2 + .select2.select2-container 
.select2-selection__arrow b {
    margin-top: -1px !important;  /* prueba -1 o -2 según tu ojo */
}

/*PARA CENTRAR ICONO DE FLECHITA DE LOS SELECT*/
.select2-container--default .select2-selection__arrow b,
.select2-container--bootstrap4 .select2-selection__arrow b {
    margin-top: 3px !important;
}


/* Borde personalizado para selects nativos */
select.form-control {
    border: 1px solid #000 !important;   /* color de borde */
    border-radius: 6px !important;         /* opcional */
}

/* Borde cuando recibe focus */
select.form-control:focus {
    border-color: #000 !important;
    box-shadow: none !important;           /* evita el azul de bootstrap */
}