@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Variables personalizadas para usar con Tailwind */
:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --info-color: #17a2b8;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
}

/* Estilos base que complementan a Tailwind */
body {
  font-family: 'Inter', sans-serif;
}

/* Estilos de elemento para integrarse con Tailwind */
.custom-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Estilos de transición para enlaces y botones */
.hover-effect {
  transition: all 0.2s ease-in-out;
}

/* Estilos para acordeones con Tailwind */
.accordion-item {
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.accordion-header {
  cursor: pointer;
  user-select: none;
}

.accordion-content {
  transition: max-height 0.3s ease-out;
}

/* Animación de rotación para el ícono del acordeón */
.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-icon.rotate-180 {
  transform: rotate(180deg);
}

/* Utilidades para compatibilidad con Bootstrap existente */
.anchor-inherit-styles {
  color: inherit;
  text-decoration: none;
}