/* === ESTILO MODERNO AZUL Y VERDE (AHB) === */

/* Fondo general del bloque */
#fbuilder {
  background-color: #FFFFFF !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  padding: 30px !important;
  max-width: 1100px;
  margin: 0 auto !important;
  font-family: "Poppins", "Segoe UI", sans-serif !important;
}

/* Título (Azul Claro) */
#fbuilder h2, 
#fbuilder .ahb-main-title {
  color: #A8CCEA !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
}

/* Texto general (Azul Acero) */
#fbuilder label,
#fbuilder span,
#fbuilder p {
  color: #5CA1D8 !important;
  font-size: 15px !important;
}

/* Campos de entrada */
#fbuilder input[type="text"],
#fbuilder input[type="email"],
#fbuilder input[type="tel"],
#fbuilder select,
#fbuilder textarea {
  background-color: #F2F7FC !important; /* Blanco azulado */
  border: 1px solid #5CA1D8 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: #333 !important;
}

#fbuilder input:focus,
#fbuilder select:focus,
#fbuilder textarea:focus {
  border-color: #0078FF !important; /* Azul eléctrico al enfocar */
  box-shadow: 0 0 6px rgba(0, 120, 255, 0.3) !important;
  outline: none !important;
}

/* === CALENDARIO === */
#fbuilder .apph-calendar-container {
  background-color: #5CA1D8 !important; /* Fondo azul del contenedor */
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
  padding: 20px !important;
  margin-bottom: 25px !important;
}

/* Días disponibles */
#fbuilder .apph-calendar-day.available {
  background-color: #E6F2FA !important;
  color: #0078FF !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

#fbuilder .apph-calendar-day.available:hover {
  background-color: #0078FF !important;
  color: #fff !important;
  transform: scale(1.05);
}

/* DÍA SELECCIONADO (Verde) */
#fbuilder .apph-calendar-day.selected {
  background-color: #92D050 !important; /* Verde solicitado */
  color: #ffffff !important;
  font-weight: 700 !important;
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(146,208,80,0.4) !important;
  border: none !important;
}

/* Días no disponibles */
#fbuilder .apph-calendar-day.unavailable {
  background-color: #F0F0F0 !important;
  color: #B0B0B0 !important;
  border-radius: 8px !important;
  opacity: 0.7 !important;
}

/* Encabezados de los días (L, M, M, J...) */
#fbuilder .apph-calendar-weekdays div {
  color: #FFFFFF !important; /* Blanco para que resalte sobre el fondo azul #5CA1D8 */
  font-weight: 600 !important;
}

/* === HORARIOS (BLOQUES DE TIEMPO) === */
#fbuilder .apph-timeslot {
  background: #E6F2FA !important;
  border: 1px solid #C7E0F5 !important;
  color: #0078FF !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  margin: 6px !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

#fbuilder .apph-timeslot:hover {
  background: #0078FF !important;
  color: #fff !important;
}

/* Horario seleccionado (Verde) */
#fbuilder .apph-timeslot.selected {
  background: #92D050 !important;
  color: #fff !important;
  border-color: #92D050 !important;
  box-shadow: 0 3px 10px rgba(146,208,80,0.3) !important;
}

/* === BOTÓN ENVIAR === */
#fbuilder .pbSubmit {
  background-color: #0078FF !important; /* Azul vibrante */
  color: #fff !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 22px !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

#fbuilder .pbSubmit:hover {
  background-color: #0056b3 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,120,255,0.4) !important;
}