// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

/* Evitar que el panel del calendario (date-picker) ocupe todo el ancho de la pantalla */
.el-picker-panel.el-date-picker,
body .el-picker-panel.el-date-picker {
  width: auto !important;
  max-width: 360px !important;
  min-width: 280px;
}
.el-date-range-picker.el-picker-panel {
  width: auto !important;
  max-width: 520px !important;
  min-width: 320px;
}

/* ============================================
   BOTONES RESPONSIVE - Touch-friendly en móvil
   ============================================ */
@media (max-width: 768px) {
  /* Bootstrap buttons */
  .btn,
  .btn-sm,
  .btn-lg {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* Element UI buttons */
  .el-button {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
  }

  .el-button--small {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
  }

  /* Botones en tablas - mantener compactos pero tocables */
  .table td .el-button,
  .table td .btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.9rem;
    margin: 2px;
  }

  /* Card headers - botones de acción */
  .card-header .btn,
  .card-header .el-button,
  .heading-elements .btn,
  .heading-elements .el-button {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.95rem;
  }

  /* Quotes - Crear Cita y similares */
  .quotes-btn,
  .quotes-action-buttons .btn {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 1rem;
  }

  /* Evita zoom automático al enfocar inputs en móvil/responsive */
  input,
  select,
  textarea,
  .form-control,
  .el-input__inner,
  .el-textarea__inner,
  .el-select .el-input__inner,
  .el-date-editor .el-input__inner {
    font-size: 16px !important;
  }
}