.InputForm
{
  width: 100%;
  height: 55px;
  background: #FFFFFF;
  border: 1px solid #E9E9E9;
  box-sizing: border-box;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 0 20px;
  font-family: "Playfair Display", serif;;
  font-size: 14px !important;
  color: #050567;
  padding: .5em;
}

.InputForm.Tam18
{
  font-size: 18px !important;
}

.InputForm.Tam22
{
  font-size: 22px !important;
}

.DivContenedor 
{
  position: fixed;
  min-height: 96px;
  width: 96px;
  text-align: center;
  word-wrap: break-word;
  top:    50%;
  right:   2%; 
  z-index: 1000;
  visibility: hidden;
}

.DivWait 
{  
  width:      6rem; 
  height:     6rem;  
}


/* ============================================ Input Label Floating ============================================ */
/*
  Uso:
                            <div class="input-group">
                                <input type="text" class="input"  placeholder=" " required>
                                <label class="label">Nombre de usuario</label>
                                <span class="error-msg">Debe digitar un valor</span>
                            </div>

*/
/* Contenedor relativo para posicionar la etiqueta */
.input-group {
  position: relative;
  margin: 20px 0;
  width: 300px;
}

/* Estilo del campo de texto */
.input-group .input {
  width: 100%;
  padding: 12px 10px;
  font-size: 16px;
  border: 1px solid #d3d3d3 !important;
  border-radius: 15px !important;
  outline: none !important;
  background: none !important;
  margin-bottom: 1px !important;
  height: 37px !important;
}

/* Estilo de la etiqueta (en reposo dentro del input) */
.input-group .label {
  position: absolute;
  left: 12px;
  top: 6px;
  color: #999;
  font-size: 16px;
  pointer-events: none; /* Permite hacer clic "a través" de la etiqueta */
  transition: 0.3s ease all;
  background-color: #fff  !important; /* Tapa la línea del borde al subir */
  padding: 0 4px;
}

/* Efecto al enfocar o si el input es válido (tiene texto) */
.input-group .input:focus ~ .label,
.input-group .input:valid ~ .label {
  top: -8px; /* Sube la etiqueta al borde superior */
  left: 8px;
  font-size: 12px;
  color: #068fff; /* Cambia a color azul de enfoque */
}

/* Cambia el color del borde del input al hacer focus */
.input-group .input:focus {  border: 1px solid #068fff !important; }


/* --- Lógica de Error (Rojo) --- */

/* 1. Cuando el input es inválido Y el usuario ya escribió algo */
.input-group .input:not(:placeholder-shown):invalid           { border-color: #ff4d4d !important;  }
.input-group .input:not(:placeholder-shown):invalid ~ .label  { color: #ff4d4d !important;   }

/* 2. Mostrar el mensaje de error solo si es inválido y no está vacío */
.error-msg {
  display: none;
  color: #ff4d4d;
  font-size: 12px;
  margin-top: 5px;
  padding-left: 5px;
}

.input-group .input:not(:placeholder-shown):invalid ~ .error-msg {  display: block; }

/* --- Lógica de Éxito (Verde) --- */

/* Cuando el input es válido Y tiene texto dentro */
.input-group .input:not(:placeholder-shown):valid           { border-color: #2ecc71 !important;  }
.input-group .input:not(:placeholder-shown):valid ~ .label  { color: #2ecc71 !important; }

select
{
  border-radius: 10px !important;
  margin-left: 5px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-bottom: 10px !important;
}


/* ==================== Med1as ======================================= */
@media (max-width: 767px) 
{
  .swiper-button-white  {    visibility:hidden !important;  }
}

/* ── TABLET (768px - 991px) ── */
@media (min-width: 768px) and (max-width: 991px) 
{
  .swiper-button-white  {    visibility:hidden !important;  }
}

/* ── LAPTOP (992px - 1199px) ── */
@media (min-width: 992px) and (max-width: 1199px) 
{

}

/* ── DESKTOP (≥ 1200px) ── */
@media (min-width: 1200px) 
{

}