/* 🎃 HALLOWEEN THEME 2025 - Professional & Elegant 🎃 */
/* Para quitar esta decoración, simplemente elimina o comenta la línea que importa este archivo en los HTML */

/* Variables de Halloween profesionales */
:root {
  --halloween-orange: #ff6b35;
  --halloween-purple: #8b4eff;
  --halloween-dark: #1a0a2e;
  --halloween-glow: rgba(255, 107, 53, 0.4);
  --halloween-shadow: rgba(0, 0, 0, 0.3);
  --halloween-gradient: linear-gradient(135deg, #ff6b35, #8b4eff, #ff6b35);
}

/* Cursor personalizado de calabaza */
body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="18" font-size="20">🎃</text></svg>'), auto;
}

/* Efectos de hover con cursor especial */
.btn:hover,
.card:hover,
.server-card:hover,
.feature-card:hover,
.game-card:hover {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="18" font-size="20">👻</text></svg>'), auto;
}

/* Fondo con patrón de Halloween sutil */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(255, 107, 53, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 78, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(255, 107, 53, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Efectos de brillo Halloween en elementos interactivos */
.btn-primary {
  background: var(--halloween-gradient) !important;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

/* Efectos de sombra Halloween en cards - SIN hover */
.card,
.server-card,
.feature-card,
.game-card {
  position: relative;
  transition: all 0.3s ease;
}

/* Quitar efectos de hover en cards principales */
.card:hover,
.server-card:hover,
.feature-card:hover,
.game-card:hover {
  /* Sin efectos de hover */
}

/* Efectos de texto con gradiente Halloween */
.hero-title,
.section-title,
.cta-title,
.web-editor-title {
  background: var(--halloween-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  position: relative;
}

/* Efecto de brillo en títulos */
.hero-title::after,
.section-title::after,
.cta-title::after,
.web-editor-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--halloween-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: textGlow 3s ease-in-out infinite;
}

@keyframes textGlow {
  0%, 100% {
    opacity: 0;
    filter: blur(0px);
  }
  50% {
    opacity: 0.3;
    filter: blur(1px);
  }
}

/* Efectos de partículas sutiles */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255, 107, 53, 0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(139, 78, 255, 0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255, 107, 53, 0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(139, 78, 255, 0.4), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: particleFloat 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes particleFloat {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-200px);
  }
}

/* Efectos de hover mejorados para iconos - Solo en homepage */
.feature-icon {
  position: relative;
  overflow: hidden;
}

.feature-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}

.feature-icon:hover::before {
  width: 120px;
  height: 120px;
}

/* Los iconos de estadísticas del dashboard NO deben tener efectos especiales */
.stat-icon {
  /* Mantener el tamaño original sin efectos */
  opacity: 0.2;
  font-size: 2rem;
}

/* Efectos de navegación mejorados */
.navbar {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.95), 
    rgba(30, 64, 175, 0.1)) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 107, 53, 0.2);
}

.nav-link:hover {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border-radius: 8px;
}

/* Efectos de sidebar mejorados */
.sidebar {
  background: linear-gradient(180deg, 
    rgba(26, 10, 46, 0.95), 
    rgba(30, 64, 175, 0.05)) !important;
  border-right: 1px solid rgba(255, 107, 53, 0.2);
}

.sidebar-link:hover,
.sidebar-link.active {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border-left: 3px solid var(--halloween-orange) !important;
}

/* Efectos de scrollbar personalizados */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(26, 10, 46, 0.3);
}

::-webkit-scrollbar-thumb {
  background: var(--halloween-gradient);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff6b35, #8b4eff);
}

/* Efectos de loading mejorados */
.loading-spinner .spinner {
  border-top-color: var(--halloween-orange) !important;
}

/* Efectos de notificaciones Halloween */
.notification-success {
  background: linear-gradient(135deg, #10b981, var(--halloween-orange)) !important;
}

.notification-error {
  background: linear-gradient(135deg, #ef4444, var(--halloween-purple)) !important;
}

/* Efectos de modal mejorados */
.modal {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 1), 
    rgba(30, 64, 175, 0.3)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(255, 107, 53, 0.2) !important;
  backdrop-filter: blur(10px);
}

/* Efectos de formularios mejorados */
.form-input:focus {
  border-color: var(--halloween-orange) !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3) !important;
}

/* Efectos de estadísticas mejorados */
.stat-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 107, 53, 0.1), 
    transparent);
  transition: left 0.8s ease;
}

.stat-card:hover::before {
  left: 100%;
}

/* Efectos de servidores mejorados */
.server-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2);
}

.server-header {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border-bottom: 2px solid var(--halloween-orange) !important;
}

/* Efectos de características mejorados */
.feature-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2);
}

.feature-icon {
  background: var(--halloween-gradient) !important;
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3) !important;
}

/* Efectos de juegos mejorados */
.game-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2);
}

/* Efectos de CTA mejorados */
.cta-section {
  background: radial-gradient(circle at center, 
    rgba(255, 107, 53, 0.05) 0%, 
    transparent 70%) !important;
}

/* Efectos de web editor mejorados */
.web-editor-section {
  background: radial-gradient(circle at top right, 
    rgba(139, 78, 255, 0.05) 0%, 
    transparent 70%) !important;
}

/* Efectos de badges mejorados */
.hero-badge,
.web-editor-badge,
.cta-badge {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  color: var(--halloween-orange) !important;
}

/* Efectos de hover en elementos específicos */
.btn-primary:hover {
  background: linear-gradient(135deg, #ff6b35, #8b4eff, #ff6b35) !important;
  box-shadow: 
    0 8px 25px rgba(255, 107, 53, 0.4),
    0 0 20px rgba(139, 78, 255, 0.3) !important;
  transform: translateY(-2px);
}

/* Efectos de animación suaves */
@keyframes smoothGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 107, 53, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
  }
}

/* Aplicar animación suave a elementos clave */
.hero-title,
.section-title,
.cta-title,
.web-editor-title {
  animation: smoothGlow 4s ease-in-out infinite;
}

/* Estilos específicos para páginas adicionales */

/* AI API Page */
.ai-api-container,
.docs-container {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2);
  border-radius: 12px;
  padding: 2rem;
}

.tab-btn {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  color: var(--halloween-orange) !important;
}

.tab-btn:hover,
.tab-btn.active {
  background: var(--halloween-gradient) !important;
  color: white !important;
  border-color: var(--halloween-orange) !important;
}

.code-block,
.endpoint {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.9), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.method.post,
.method.get {
  background: var(--halloween-gradient) !important;
}

/* Buy Coins Page */
.payment-method {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.payment-method:hover,
.payment-method.active {
  border-color: var(--halloween-orange) !important;
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.3) !important;
}

.purchase-summary {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* Buy Coins específicos */
.coin-package {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* Quitar hover en coin-package */
.coin-package:hover {
  /* Sin efectos de hover */
}

.select-package-btn {
  background: var(--halloween-gradient) !important;
}

.transaction-skeleton {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* Documentación Page */
.docs-section,
.docs-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.docs-nav-item {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  color: var(--halloween-orange) !important;
}

.docs-nav-item:hover,
.docs-nav-item.active {
  background: var(--halloween-gradient) !important;
  color: white !important;
}

/* Documentación específicos */
.docs-header {
  background: var(--halloween-gradient) !important;
}

.docs-title {
  color: white !important;
}

.info-box {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.step-list {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.6), 
    rgba(30, 64, 175, 0.05)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.step-item {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
}

.feature-grid .feature-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* Support Page */
.ticket-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* Quitar hover en ticket-card */
.ticket-card:hover {
  /* Sin efectos de hover */
}

.filter-btn {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  color: var(--halloween-orange) !important;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--halloween-gradient) !important;
  color: white !important;
}

/* Support específicos */
.tickets-container {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.dashboard-title::after {
  background: var(--halloween-gradient) !important;
}

.create-ticket-btn {
  background: var(--halloween-gradient) !important;
}

.modal-content {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 1), 
    rgba(30, 64, 175, 0.3)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
}

/* Contracts Page */
.contract-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* Quitar hover en contract-card */
.contract-card:hover {
  /* Sin efectos de hover */
}

/* Contracts específicos */
.contracts-container {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.05), 
    rgba(30, 64, 175, 0.02)) !important;
}

.page-title::after {
  background: var(--halloween-gradient) !important;
}

.user-coins {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.btn-add-coins {
  background: var(--halloween-gradient) !important;
}

.empty-state {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.6), 
    rgba(30, 64, 175, 0.05)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.btn-create {
  background: var(--halloween-gradient) !important;
}

/* Profile Page */
.profile-container,
.profile-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.profile-section {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.6), 
    rgba(30, 64, 175, 0.05)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* Profile específicos */
.profile-stats-grid .stat-card {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

.profile-stats-grid .stat-card::after {
  background: var(--halloween-gradient) !important;
}

/* Quitar hover en profile stat-cards */
.profile-stats-grid .stat-card:hover {
  /* Sin efectos de hover */
}

.section-header {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
}

.section-content {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.6), 
    rgba(30, 64, 175, 0.05)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
}

/* Estilos generales para elementos que puedan faltar */
.container,
.page-container,
.content-container,
.main-container {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.05), 
    rgba(30, 64, 175, 0.02)) !important;
}

/* Asegurar que todos los elementos con clase 'card' tengan estilos Halloween */
[class*="card"],
[class*="container"],
[class*="section"],
[class*="panel"],
[class*="box"] {
  transition: all 0.3s ease;
}

/* Asegurar que todos los elementos con clase 'card' NO tengan efectos de hover */
[class*="card"]:hover,
[class*="container"]:hover,
[class*="section"]:hover,
[class*="panel"]:hover,
[class*="box"]:hover {
  /* Sin efectos de hover */
}

/* Estilos para elementos de formulario */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.3) !important;
  color: var(--text-primary) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--halloween-orange) !important;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3) !important;
}

/* Estilos para Anuncios del Dashboard */
.announcements-container {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.05), 
    rgba(30, 64, 175, 0.02)) !important;
}

.announcement {
  background: linear-gradient(135deg, 
    rgba(26, 10, 46, 0.8), 
    rgba(30, 64, 175, 0.1)) !important;
  border: 1px solid rgba(255, 107, 53, 0.2) !important;
  border-left: 4px solid var(--halloween-orange) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Tipos de anuncios con colores Halloween */
.announcement-info {
  border-left-color: var(--halloween-orange) !important;
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
}

.announcement-success {
  border-left-color: var(--halloween-orange) !important;
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1), 
    rgba(139, 78, 255, 0.1)) !important;
}

.announcement-warning {
  border-left-color: var(--halloween-purple) !important;
  background: linear-gradient(135deg, 
    rgba(139, 78, 255, 0.1), 
    rgba(255, 107, 53, 0.1)) !important;
}

.announcement-error {
  border-left-color: var(--halloween-purple) !important;
  background: linear-gradient(135deg, 
    rgba(139, 78, 255, 0.1), 
    rgba(255, 107, 53, 0.1)) !important;
}

.announcement-title {
  color: var(--halloween-orange) !important;
  font-weight: 600;
}

.announcement-message {
  color: var(--text-primary) !important;
}

.announcement-dismiss {
  background: var(--halloween-gradient) !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.announcement-dismiss:hover {
  background: linear-gradient(135deg, #ff6b35, #8b4eff) !important;
  transform: scale(1.1) !important;
}

/* Responsive - Mantener efectos en móvil pero más sutiles */
@media (max-width: 768px) {
  .hero::before {
    background-size: 100px 100px;
  }
  
  .btn-primary:hover {
    transform: none;
  }
  
  /* Sin efectos de hover en móvil */
  .card:hover,
  .server-card:hover,
  .feature-card:hover,
  .game-card:hover {
    transform: none;
  }
}