/* Estilos para resaltado de búsqueda */
.search-highlight {
  background-color: #ffeb3b;
  color: #000;
  padding: 2px 4px;
  border-radius: 2px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

/* Estilos para elementos completos cuando hay HTML en medio del término */
.search-highlight-element {
  background-color: rgba(255, 235, 59, 0.3);
  border-left: 3px solid #ffeb3b;
  padding-left: 8px;
  transition: background-color 0.3s ease;
}

/* Animación para el primer resultado */
.search-highlight-first {
  animation: highlight-pulse 2s ease-in-out;
}

@keyframes highlight-pulse {
  0%,
  100% {
    background-color: #ffeb3b;
  }
  50% {
    background-color: #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.6);
  }
}

/* Modo oscuro (opcional, si tu sitio lo usa) */
@media (prefers-color-scheme: dark) {
  .search-highlight {
    background-color: #ffc107;
    color: #000;
  }

  /* Estilos para elementos completos en modo oscuro */
  .search-highlight-element {
    background-color: rgba(255, 193, 7, 0.2);
    border-left-color: #ffc107;
  }

  @keyframes highlight-pulse {
    0%,
    100% {
      background-color: #ffc107;
    }
    50% {
      background-color: #ff9800;
      box-shadow: 0 0 10px rgba(255, 152, 0, 0.6);
    }
  }
}