/* ==========================================================================
   DHARMA SHALA - SISTEMA DE CITAS DIRECTO Y SIN FRICCIÓN (FRONTEND CSS)
   Estética idéntica al bloque de contacto de dharmashaladr.com
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Marcellus+SC&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

#dharma-citas-app.dharma-citas-wrap {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #1B1B1A !important;
  background: transparent !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#dharma-citas-app.dharma-citas-wrap *,
#dharma-citas-app.dharma-citas-wrap *::before,
#dharma-citas-app.dharma-citas-wrap *::after {
  box-sizing: border-box !important;
}

/* Título único (idéntico al ESCRÍBENOS original) */
#dharma-citas-app .dharma-citas-title {
  font-family: 'Marcellus SC', 'Marcellus', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #1B1B1A !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Contenedor principal en una sola vista */
#dharma-citas-app .ds-direct-row {
  margin-bottom: 12px !important;
}

#dharma-citas-app .ds-direct-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* Inputs, Select y Textarea idénticos a la captura original de la home */
#dharma-citas-app select.dharma-input,
#dharma-citas-app input.dharma-input,
#dharma-citas-app textarea.dharma-textarea {
  width: 100% !important;
  padding: 13px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  color: #1B1B1A !important;
  background-color: #F6E7D2 !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: auto !important;
  margin: 0 !important;
}

#dharma-citas-app select.dharma-input:focus,
#dharma-citas-app input.dharma-input:focus,
#dharma-citas-app textarea.dharma-textarea:focus {
  background-color: #FFFEF6 !important;
  box-shadow: 0 0 0 1.5px #A39D64 !important;
}

/* Bloque compacto de Calendario + Horas */
#dharma-citas-app .ds-picker-shell {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

#dharma-citas-app .ds-cal-card,
#dharma-citas-app .ds-slots-card {
  background-color: #F6E7D2 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

#dharma-citas-app .ds-cal-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

#dharma-citas-app .ds-cal-month {
  font-family: 'Marcellus SC', Georgia, serif !important;
  font-size: 14.5px !important;
  color: #1B1B1A !important;
}

#dharma-citas-app .ds-cal-arrows {
  display: flex !important;
  gap: 4px !important;
}

#dharma-citas-app button.ds-cal-arrow {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255, 254, 246, 0.75) !important;
  color: #1B1B1A !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

#dharma-citas-app button.ds-cal-arrow:hover:not(:disabled) {
  background: #A39D64 !important;
  color: #FFFFFF !important;
}

#dharma-citas-app button.ds-cal-arrow:disabled {
  opacity: 0.3 !important;
  cursor: default !important;
}

#dharma-citas-app .ds-cal-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}

#dharma-citas-app .ds-cal-weekdays span {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #6E6D68 !important;
}

#dharma-citas-app .ds-cal-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 3px !important;
}

#dharma-citas-app button.dharma-cal-day {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 7px !important;
  background: rgba(255, 254, 246, 0.65) !important;
  color: #1B1B1A !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

#dharma-citas-app .dharma-cal-day.is-empty {
  background: transparent !important;
  pointer-events: none !important;
}

#dharma-citas-app button.dharma-cal-day.is-disabled {
  background: transparent !important;
  color: #B5AFA4 !important;
  cursor: not-allowed !important;
  font-weight: 400 !important;
}

#dharma-citas-app button.dharma-cal-day:not(.is-disabled):not(.is-empty):hover {
  background: #FFFEF6 !important;
}

#dharma-citas-app button.dharma-cal-day.is-selected {
  background: #A39D64 !important;
  color: #FFFFFF !important;
}

/* Panel derecho de horas */
#dharma-citas-app .ds-slots-title {
  font-family: 'Marcellus SC', Georgia, serif !important;
  font-size: 13.5px !important;
  color: #1B1B1A !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
}

#dharma-citas-app .dharma-slots-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
  max-height: 176px !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

#dharma-citas-app button.dharma-slot-btn {
  padding: 7px 4px !important;
  margin: 0 !important;
  background: rgba(255, 254, 246, 0.75) !important;
  color: #1B1B1A !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
}

#dharma-citas-app button.dharma-slot-btn:hover:not(:disabled) {
  background: #FFFEF6 !important;
}

#dharma-citas-app button.dharma-slot-btn.is-selected {
  background: #A39D64 !important;
  color: #FFFFFF !important;
}

#dharma-citas-app button.dharma-slot-btn:disabled,
#dharma-citas-app button.dharma-slot-btn.is-occupied {
  background: rgba(255, 254, 246, 0.25) !important;
  color: #B5AFA4 !important;
  text-decoration: line-through !important;
  cursor: not-allowed !important;
}

#dharma-citas-app .dharma-slots-empty {
  font-size: 12px !important;
  color: #6E6D68 !important;
  padding: 16px 8px !important;
  text-align: center !important;
}

/* Botón Enviar idéntico al botón verde oliva de la captura original */
#dharma-citas-app button.dharma-btn-submit,
#dharma-citas-app a.dharma-btn-submit {
  width: 100% !important;
  padding: 13px 24px !important;
  margin: 0 !important;
  background-color: #A39D64 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 25px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

#dharma-citas-app button.dharma-btn-submit:hover:not(:disabled),
#dharma-citas-app a.dharma-btn-submit:hover {
  background-color: #8A844E !important;
  color: #FFFFFF !important;
}

#dharma-citas-app .dharma-alert-error {
  display: none;
  background: #FDF4F4 !important;
  color: #8B2626 !important;
  padding: 9px 14px !important;
  font-size: 12.5px !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
}

/* Tarjeta de confirmación post-envío */
#dharma-citas-app .dharma-confirmation-box {
  background: #F6E7D2 !important;
  border-radius: 14px !important;
  padding: 22px 20px !important;
  text-align: center !important;
}

#dharma-citas-app .dharma-confirm-title {
  font-family: 'Marcellus SC', Georgia, serif !important;
  font-size: 20px !important;
  color: #1B1B1A !important;
  margin: 0 0 8px 0 !important;
}

#dharma-citas-app .dharma-confirm-text {
  font-size: 13.5px !important;
  color: #494947 !important;
  margin: 0 0 16px 0 !important;
}

@media (max-width: 600px) {
  #dharma-citas-app.dharma-citas-wrap {
    max-width: 100% !important;
  }

  #dharma-citas-app .ds-picker-shell,
  #dharma-citas-app .ds-direct-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #dharma-citas-app select.dharma-input,
  #dharma-citas-app input.dharma-input,
  #dharma-citas-app textarea.dharma-textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }

  #dharma-citas-app button.dharma-cal-day {
    height: 35px !important;
    min-height: 35px !important;
    font-size: 13px !important;
  }

  #dharma-citas-app button.ds-cal-arrow {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  #dharma-citas-app .dharma-slots-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-height: 165px !important;
  }

  #dharma-citas-app button.dharma-slot-btn {
    padding: 9px 4px !important;
    font-size: 12.5px !important;
  }
}