/* ============================================
   ESTILOS PARA SELECTORES DE FECHA
   ============================================ */

/* Inputs de ancho completo */
.form-input.w-input {
  width: 100%;
  margin-bottom: 15px;
}

/* Contenedor flex para fechas lado a lado */
.flex-inputs {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.flex-inputs .form-input.left {
  flex: 1;
  margin-bottom: 0;
}

.flex-inputs .form-input.right {
  flex: 1;
  margin-bottom: 0;
}

/* Estilos para inputs de fecha */
input[type="date"].form-input {
  position: relative;
  cursor: pointer;
  color: #333;
}

input[type="date"].form-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

input[type="date"].form-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Placeholder personalizado para inputs de fecha vacíos */
input[type="date"].form-input:invalid {
  color: #999;
}

input[type="date"].form-input:focus:invalid {
  color: #333;
}

/* Ajustes responsivos */
@media screen and (max-width: 767px) {
  .flex-inputs {
    flex-direction: column;
    gap: 0;
  }
  
  .flex-inputs .form-input.left,
  .flex-inputs .form-input.right {
    width: 100%;
    margin-bottom: 15px;
  }
}