:root {
  --colorF: $colorF;
  --color1: $color1;
  --color2: $color2;
  --color3: $color3;
  --color4: $color4;
  --color5: $color5;
  --color6: $color6;
  --color7: $color7;
  --color8: $color8;
}

.color1 {
  color: #0085ac;
}

.color2 {
  color: #004482;
}

.color3 {
  color: #06283D;
}

.color4 {
  color: #9157c7;
}

.color5 {
  color: #e9faff;
}

.color6 {
  color: rgba(123, 224, 255, 0.0901960784);
}

.color7 {
  color: #c13832;
}

.color8 {
  color: #6c757d;
}

body {
  margin: 0;
  font-family: "Montserrat", sans-serif !important;
}

.btn-primary {
  background: #76C5ED !important;
  color: #000 !important;
  border: unset !important;
  font-weight: 600 !important;
}

.btn-secondary {
  background: #fff !important;
  color: #000 !important;
  border: unset !important;
  font-weight: 600 !important;
}

.badge-primary {
  background-color: #76C5ED !important;
  color: #000 !important;
}

.text-primary {
  color: #000 !important;
}

/* Tema personalizado para Element UI */
:root {
  --el-color-primary: #4A90E2;
  --el-color-primary-light-1: #5BA0F2;
  --el-color-primary-light-2: #6CB0FF;
  --el-color-primary-light-3: #7DC0FF;
  --el-color-primary-light-4: #8ED0FF;
  --el-color-primary-light-5: #9FE0FF;
  --el-color-primary-light-6: #B0F0FF;
  --el-color-primary-light-7: #C1FFFF;
  --el-color-primary-light-8: #D2FFFF;
  --el-color-primary-light-9: #E3FFFF;
  --el-color-primary-dark-2: #357ABD;
}

/* Botones primarios */
.el-button--primary {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}

.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--el-color-primary-dark-2);
  border-color: var(--el-color-primary-dark-2);
}

/* Inputs con border-radius mejorado */
.el-input__inner {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-input__inner:focus {
  border-color: var(--el-color-primary);
}

/* Autocomplete con border-radius mejorado */
.el-autocomplete .el-input__inner {
  border-radius: 8px;
}

/* Select con border-radius mejorado */
.el-select .el-input__inner {
  border-radius: 8px;
}

/* Inputs en el hero - border-radius completo */
.hero-search-input .el-input,
.hero-search-input .el-autocomplete {
  border-radius: 50px;
  overflow: hidden;
}

.hero-search-input .el-input__inner {
  border-radius: 50px !important;
  border: 1px solid #e5e7eb !important;
}

.hero-search-input .el-input__inner:focus,
.hero-search-input .el-input__inner:hover {
  border-color: #e5e7eb !important;
  box-shadow: none !important;
}

/* Cards con border-radius mejorado */
.el-card {
  border-radius: 12px;
}

/* Select dropdown mejorado */
.el-select-dropdown {
  border-radius: 12px;
}

/* Date picker mejorado */
.el-date-editor.el-input {
  border-radius: 8px;
}

/* Textarea mejorado */
.el-textarea__inner {
  border-radius: 8px;
}

/* Form items con mejor espaciado */
.el-form-item {
  margin-bottom: 20px;
}

/* Mejoras generales de border-radius para componentes comunes */
.el-input-group,
.el-input-group__append,
.el-input-group__prepend {
  border-radius: 8px;
}

/* Pagination mejorada */
.el-pagination {
  margin-top: 20px;
}

/* Table mejorada */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

/* Dialog mejorado */
.el-dialog {
  border-radius: 12px;
}

/* Message box mejorado */
.el-message-box {
  border-radius: 12px;
}

/* Loading mejorado */
.el-loading-mask {
  border-radius: 8px;
}