/* Estilos para forzar la visibilidad de cursos paginados */
.ffe-force-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  width: auto !important;
  min-height: auto !important;
  min-width: auto !important;
}

/* Estilos para forzar la ocultación de cursos paginados */
.ffe-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  height: 0 !important;
  width: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* Sobrescribir cualquier ocultar específico */
.ffe-courses-list .ffe-force-visible,
.elementor-widget-container .ffe-force-visible,
.elementor-column .ffe-force-visible,
.elementor-section .ffe-force-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Sobrescribir cualquier mostrar específico para elementos ocultos */
.ffe-courses-list .ffe-hidden,
.elementor-widget-container .ffe-hidden,
.elementor-column .ffe-hidden,
.elementor-section .ffe-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Asegurar que elementos internos también sean visibles */
.ffe-force-visible * {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Asegurar que elementos internos también sean ocultos */
.ffe-hidden * {
  visibility: hidden !important;
  opacity: 0 !important;
}

.ffe-edition-preview {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 5px;
  font-size: 12px;
}

.ffe-edition-info {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

/* Estilos para el campo de búsqueda */
.ffe-courses-filters {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  padding: 16px !important;
  background-color: #f8f9fa !important;
  border-radius: 8px !important;
  border: 1px solid #e9ecef !important;
}

.ffe-filter-form {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  width: 100% !important;
}

.ffe-filter-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.ffe-search-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.ffe-search-container label {
  font-weight: 600 !important;
  color: #333 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.ffe-search-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.ffe-filter-select-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.ffe-filter-select-container label {
  font-weight: 600 !important;
  color: #333 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.ffe-filter-select-container select {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  min-height: 40px !important;
  min-width: 180px !important;
  padding: 8px 12px !important;
  background-color: #ffffff !important;
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
  position: relative !important;
}

.ffe-filter-select-container select:focus {
  border-color: #007cba !important;
  box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1) !important;
}

.ffe-clear-filters {
  color: #007cba !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease !important;
}

.ffe-clear-filters:hover {
  background-color: rgba(0, 124, 186, 0.1) !important;
  text-decoration: none !important;
}

.ffe-search-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.ffe-search-container > div {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.ffe-search-container label {
  font-weight: 600 !important;
  color: #333 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#ffe-course-search {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  min-height: 40px !important;
  min-width: 180px !important;
  padding: 8px 12px !important;
  background-color: #ffffff !important;
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
  position: relative !important;
}

#ffe-clear-search {
  position: absolute !important;
  right: 8px !important;
  background: none !important;
  border: none !important;
  color: #666 !important;
  cursor: pointer !important;
  font-size: 16px !important;
  padding: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background-color 0.2s ease !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

/* Estilos para tags de cursos */
.ffe-course-tags {
  margin: 8px 0 12px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.ffe-course-tag {
  display: inline-block !important;
  background: #e8f4fd !important;
  color: #007cba !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #cce3f6 !important;
  transition: background 0.2s, color 0.2s !important;
}

.ffe-course-tag:hover {
  background: #007cba !important;
  color: #fff !important;
  border-color: #007cba !important;
}

#ffe-clear-search:hover {
  background-color: #f0f0f0 !important;
  color: #333 !important;
}

#ffe-course-search:focus {
  border-color: #007cba !important;
  box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1) !important;
}

#ffe-course-search:hover {
  border-color: #007cba !important;
}

#ffe-course-search::placeholder {
  color: #666 !important;
}

/* Estilos para el mensaje de no resultados */
.ffe-no-courses {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 40px 20px !important;
  background-color: #f8f9fa !important;
  border-radius: 8px !important;
  border: 2px dashed #ddd !important;
  margin: 20px 0 !important;
}

.ffe-no-courses-content h3 {
  color: #666 !important;
  margin-bottom: 16px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

.ffe-no-courses-content p {
  color: #888 !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}

.ffe-no-courses-content ul {
  text-align: left !important;
  display: inline-block !important;
  margin: 12px 0 !important;
  padding-left: 20px !important;
}

.ffe-no-courses-content li {
  color: #666 !important;
  margin-bottom: 6px !important;
}

.ffe-no-courses-content small {
  color: #999 !important;
  font-size: 12px !important;
}

/* Responsive para el campo de búsqueda */
@media (max-width: 768px) {
  .ffe-search-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  #ffe-course-search {
    width: 100% !important;
    min-width: auto !important;
  }

  .ffe-courses-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .ffe-filter-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ffe-filter-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .ffe-search-container,
  .ffe-filter-select-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  .ffe-search-container label,
  .ffe-filter-select-container label {
    text-align: left !important;
  }
}

/* Estilos para el modal y formularios */
.ffe-modal-form-container {
  margin-top: 20px !important;
}

.ffe-form-info {
  background-color: #f8f9fa !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  margin-bottom: 16px !important;
  font-size: 12px !important;
  color: #666 !important;
  border-left: 3px solid #007cba !important;
}

.ffe-course-select {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  background-color: #fff !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
  margin-bottom: 16px !important;
}

.ffe-course-select:focus {
  border-color: #007cba !important;
  box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1) !important;
}

/* Estilos para el contenedor multiselect */
.ffe-multiselect-container {
  position: relative !important;
  width: 100% !important;
}

/* Campo principal del multiselect (simula un select) */
.ffe-multiselect-field {
  /* display: flex !important;
  align-items: center !important; */
  flex-wrap: wrap !important;
  min-height: 40px !important;
  min-width: 280px !important;
  padding: 4px 12px !important;
  background-color: #ffffff !important;
  border: 2px solid #ddd !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
  position: relative !important;
}

.ffe-multiselect-field:hover {
  border-color: #007cba !important;
}

.ffe-multiselect-field.ffe-multiselect-open {
  border-color: #007cba !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Contenedor de chips seleccionados */
.ffe-selected-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Chips individuales */
.ffe-selected-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 6px !important;
  background-color: #007cba !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* X de cerrar en los chips */
.ffe-chip-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  line-height: 1 !important;
}

.ffe-chip-close:hover {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Placeholder cuando no hay selección */
.ffe-multiselect-placeholder {
  color: #666 !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

/* Flecha del dropdown */
.ffe-multiselect-arrow {
  margin-left: auto !important;
  color: #666 !important;
  font-size: 12px !important;
  transition: transform 0.2s ease !important;
  pointer-events: none !important;
}

/* Lista desplegable */
.ffe-multiselect-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background-color: #ffffff !important;
  border: 2px solid #007cba !important;
  border-top: none !important;
  border-bottom-left-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Opciones del dropdown */
.ffe-multiselect-option {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 14px !important;
}

.ffe-multiselect-option:last-child {
  border-bottom: none !important;
}

.ffe-multiselect-option:hover {
  background-color: #f8f9fa !important;
}

.ffe-multiselect-option.ffe-option-selected {
  background-color: #e8f4fd !important;
  color: #007cba !important;
  font-weight: 500 !important;
}

/* Check de las opciones */
.ffe-option-check {
  color: #007cba !important;
  font-weight: bold !important;
  font-size: 12px !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.ffe-option-selected .ffe-option-check {
  opacity: 1 !important;
}

.ffe-filter-group label {
  font-weight: 600 !important;
  color: #333 !important;
  margin-bottom: 6px !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .ffe-multiselect-field {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }

  .ffe-selected-chip {
    font-size: 11px !important;
    padding: 1px 5px !important;
  }

  .ffe-chip-close {
    width: 12px !important;
    height: 12px !important;
    font-size: 9px !important;
  }

  .ffe-multiselect-option {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
}

/* Scrollbar personalizado para el dropdown */
.ffe-multiselect-dropdown::-webkit-scrollbar {
  width: 6px !important;
}

.ffe-multiselect-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}

.ffe-multiselect-dropdown::-webkit-scrollbar-thumb {
  background: #007cba !important;
  border-radius: 3px !important;
}

.ffe-multiselect-dropdown::-webkit-scrollbar-thumb:hover {
  background: #005a87 !important;
}

.ffe-areas-filter-container,
.ffe-plans-multiselect-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ffe-selected-filters-display {
  width: 100%;
}