/*===================================================================
  ESTILO INPUTS -  FLOTANTES
====================================================================*/

.input-flotante{
    position: relative;
    margin-bottom: 1.2rem;  
  }
  
.input-flotante label{
    position: absolute;
    top: 55%;
    left: 30px;
    transform: translateY(-50%);
    font-size: .8rem;
    color: #282727;
    transition: all 0.3s ease;
    pointer-events: none;
  }
  
.input-flotante .form-control{
    width: 100%;
    padding: .7rem 1rem;  
    font-size: 1rem;   /*tmb determina tamaño del formcontrol*/
    background-color: #fff;
    transition: all 0.3s ease;   
    height: auto;
    border-radius: 5px;
    border: 1px solid #dee2e6;
  }

  
.input-flotante .form-control:focus + label,
.input-flotante .form-control:not(:placeholder-shown) + label {
      top: 0;
      left: 23px;
      font-size: .7rem;     
      background-color: #fff;
      padding: 0 10px;
      color: #011B4F
  }
  
  /* Estilos para el select */
.input-flotante select.form-control {
    appearance: none;
    background-color: #fff; /* Fondo blanco */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23283F2B'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1.5rem;
    padding-right: 35px;
    border: 1px solid #DEE2E6; /* Opcional: borde para mejor visibilidad */
    color: #282727;
  }
  

          /* Personalización para que el botón se vea exactamente como el badge */
          .btn-badge-ruta {
            background-color: #EDF2F9;
            color: #aeafaf;
            padding: 0.2rem 0.5em; /* Ajuste de padding similar al badge */
            font-size: 0.6rem; /* Tamaño de fuente similar */
            font-weight: 700; /* Grosor del texto */
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border: none; /* Quitamos borde por defecto del botón */
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.5s ease;
        }

        .btn-badge-ruta:hover {
          background-color:#1B68FF ;
          color: #fff;
        }