/* Importar Poppins de Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

/* Variables de color personalizadas */
:root {
  /* Colores principales */
  --azul-datio: #0a2540;
  --morado-inteligencia: #7b61ff;

  /* Colores secundarios */
  --celeste-tiempo-real: #00c2ff;
  --verde-conversion: #00d084;

  /* Neutros */
  --blanco: #ffffff;
  --gris-oscuro: #1c1c1c;
  --gris-claro: #f5f7fa;
}

/* Aplicar Poppins globalmente */
* {
  font-family:
    "Poppins",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
}

/* Animaciones personalizadas */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

/* Animación para el sidebar */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.sidebar-enter {
  animation: slideIn 0.3s ease-out;
}

.sidebar-exit {
  animation: slideOut 0.3s ease-in;
}

/* Estilos para tablas responsivas */
.table-responsive {
  overflow-x: auto;
}

/* Loader */
.loader {
  border: 3px solid var(--gris-claro);
  border-top: 3px solid var(--celeste-tiempo-real);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Estilos para alerts */
.alert {
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-family: "Poppins", sans-serif;
}

.alert-success {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid var(--verde-conversion);
}

.alert-error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.alert-warning {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.alert-info {
  background-color: #dbeafe;
  color: var(--azul-datio);
  border: 1px solid var(--celeste-tiempo-real);
}

/* Overlay del sidebar para móviles */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 37, 64, 0.5); /* Azul Datio con transparencia */
  z-index: 25;
  transition: opacity 0.3s ease;
}

/* Ocultar scrollbar en el sidebar */
.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(
    123,
    97,
    255,
    0.3
  ); /* Morado Inteligencia con transparencia */
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(123, 97, 255, 0.5);
}

/* Estilos para el formulario de registro */
.step-content {
  animation: fadeIn 0.3s ease-in-out;
}

.plan-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(123, 97, 255, 0.2); /* Sombra con Morado Inteligencia */
}

.plan-card.scale-105 {
  transform: scale(1.02);
}

.plan-radio {
  transition: all 0.3s ease;
}

.plan-radio-inner {
  transition: opacity 0.3s ease;
}

.plan-select-text {
  transition: all 0.3s ease;
}

/* Clases de utilidad de color - Azul Datio */
.bg-azul-datio {
  background-color: var(--azul-datio);
}

.text-azul-datio {
  color: var(--azul-datio);
}

.border-azul-datio {
  border-color: var(--azul-datio);
}

/* Clases de utilidad de color - Morado Inteligencia */
.bg-morado-inteligencia {
  background-color: var(--morado-inteligencia);
}

.text-morado-inteligencia {
  color: var(--morado-inteligencia);
}

.border-morado-inteligencia {
  border-color: var(--morado-inteligencia);
}

/* Clases de utilidad de color - Celeste Tiempo Real */
.bg-celeste-tiempo-real {
  background-color: var(--celeste-tiempo-real);
}

.text-celeste-tiempo-real {
  color: var(--celeste-tiempo-real);
}

.border-celeste-tiempo-real {
  border-color: var(--celeste-tiempo-real);
}

/* Clases de utilidad de color - Verde Conversión */
.bg-verde-conversion {
  background-color: var(--verde-conversion);
}

.text-verde-conversion {
  color: var(--verde-conversion);
}

.border-verde-conversion {
  border-color: var(--verde-conversion);
}

/* Clases de utilidad - Neutros */
.bg-gris-claro {
  background-color: var(--gris-claro);
}

.bg-gris-oscuro {
  background-color: var(--gris-oscuro);
}

.text-gris-oscuro {
  color: var(--gris-oscuro);
}

.text-gris-claro {
  color: var(--gris-claro);
}

/* Botones con gradientes */
.btn-primary {
  background: linear-gradient(
    135deg,
    var(--morado-inteligencia),
    var(--celeste-tiempo-real)
  );
  color: var(--blanco);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(123, 97, 255, 0.3);
}

.btn-success {
  background-color: var(--verde-conversion);
  color: var(--blanco);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.btn-success:hover {
  background-color: #00b872;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 208, 132, 0.3);
}

/* Gradientes de fondo */
.gradient-azul-morado {
  background: linear-gradient(
    135deg,
    var(--azul-datio),
    var(--morado-inteligencia)
  );
}

.gradient-celeste-verde {
  background: linear-gradient(
    135deg,
    var(--celeste-tiempo-real),
    var(--verde-conversion)
  );
}

/* Tipografías personalizadas */
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

/* Sombras personalizadas con colores de marca */
.shadow-azul {
  box-shadow: 0 10px 30px rgba(10, 37, 64, 0.15);
}

.shadow-morado {
  box-shadow: 0 10px 30px rgba(123, 97, 255, 0.15);
}

.shadow-celeste {
  box-shadow: 0 10px 30px rgba(0, 194, 255, 0.15);
}

.shadow-verde {
  box-shadow: 0 10px 30px rgba(0, 208, 132, 0.15);
}

/* Efectos de hover para cards */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(123, 97, 255, 0.2);
}

/* Estilos para inputs con colores de marca */
.input-focus {
  transition: all 0.3s ease;
}

.input-focus:focus {
  border-color: var(--morado-inteligencia);
  box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.1);
  outline: none;
}

/* Badges con colores de marca */
.badge-primary {
  background-color: var(--morado-inteligencia);
  color: var(--blanco);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success {
  background-color: var(--verde-conversion);
  color: var(--blanco);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-info {
  background-color: var(--celeste-tiempo-real);
  color: var(--blanco);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Animación de pulso para elementos destacados */
@keyframes pulse-custom {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.pulse-custom {
  animation: pulse-custom 2s ease-in-out infinite;
}

/* Scrollbar personalizado para Información Claro */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ec4899, #a855f7, #10b981);
  border-radius: 10px;
  transition: background 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #db2777, #9333ea, #059669);
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
}