/* ============================================================
   KPI Portal — tema visual Deuman Solutions
   Tipografía de marca + efectos (glass, glow, animaciones de
   entrada) adaptados de deuman-design-system/styles/effects.css
   para el CDN de Tailwind (sin build step). Cargar DESPUÉS de
   assets/js/tailwind-theme.js.
   ============================================================ */

@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geist/index.css");

html, body {
  background-color: #131316;
}

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #4d4353; border-radius: 10px; }

/* Tarjeta de vidrio esmerilado (glassmorphism) — reemplazo sutil de las
   tarjetas planas para paneles/KPI sobre el fondo oscuro de marca. */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.4s ease, background 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(224, 182, 255, 0.35) !important;
  background: rgba(224, 182, 255, 0.05);
  box-shadow: 0 12px 30px -16px rgba(157, 78, 221, 0.35);
}

/* Resplandor morado de marca, para CTAs y estados activos */
.glow-purple {
  box-shadow: 0 0 20px -5px rgba(157, 78, 221, 0.2);
}

.glow-purple:hover {
  box-shadow: 0 0 35px -5px rgba(157, 78, 221, 0.55);
}

/* Botón primario con gradiente de marca */
.primary-gradient-btn {
  background: linear-gradient(135deg, #9d4edd 0%, #5a3a7c 100%);
  transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.primary-gradient-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 20px rgba(157, 78, 221, 0.5);
}

/* Indicador pulsante (badges "en línea", notificaciones) */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

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

/* Entrada suave para paneles hero (login) */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-entrance {
  animation: heroFadeUp 0.9s cubic-bezier(0.2, 1, 0.3, 1) forwards;
  opacity: 0;
}

.hero-entrance-delay {
  animation: heroFadeUp 0.9s cubic-bezier(0.2, 1, 0.3, 1) 150ms forwards;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-entrance, .hero-entrance-delay { animation: none; opacity: 1; }
  .pulse-indicator { animation: none; }
  .glass-card, .glow-purple, .primary-gradient-btn { transition: none; }
}