/* 🎄 CHRISTMAS 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 Navidad profesionales */
:root {
  --christmas-red: #e63946;
  --christmas-green: #2a9d8f;
  --christmas-gold: #ffd700;
  --christmas-white: #f8f9fa;
  --christmas-light-red: #ff6b6b;
  --christmas-light-green: #51cf66;
  --christmas-dark: #1a0f0f;
  --christmas-glow: rgba(230, 57, 70, 0.5);
  --christmas-shadow: rgba(0, 0, 0, 0.3);
  --christmas-gradient: linear-gradient(135deg, #e63946, #ffd700, #2a9d8f);
  --christmas-gradient-bright: linear-gradient(135deg, #ff6b6b, #ffd700, #51cf66);
}

/* Cursor personalizado de Navidad */
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 Navidad sutil pero alegre */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(230, 57, 70, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(42, 157, 143, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(255, 215, 0, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 60% 40%, rgba(255, 107, 107, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Efectos de brillo Navidad en elementos interactivos - MÁS SUTIL */
.btn-primary {
  background: var(--christmas-gradient-bright) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(230, 57, 70, 0.2) !important;
  border: 2px solid rgba(255, 215, 0, 0.3) !important;
}

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

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

/* Efectos de sombra Navidad 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 Navidad */
.hero-title,
.section-title,
.cta-title,
.web-editor-title {
  background: var(--christmas-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(--christmas-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 - Copos de nieve ALEGRES */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(3px 3px at 20px 30px, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255, 215, 0, 0.5), transparent),
    radial-gradient(2px 2px at 90px 40px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 130px 80px, rgba(230, 57, 70, 0.4), transparent),
    radial-gradient(1px 1px at 60px 50px, rgba(42, 157, 143, 0.4), transparent),
    radial-gradient(3px 3px at 150px 100px, rgba(255, 215, 0, 0.6), transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: snowfall 15s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes snowfall {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(200px);
    opacity: 0.8;
  }
}

/* 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(196, 30, 58, 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 - MÁS SUTIL */
.navbar {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.95), 
    rgba(42, 157, 143, 0.15)) !important;
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-link:hover {
  background: linear-gradient(135deg, 
    rgba(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border-radius: 8px;
  box-shadow: none;
}

/* Efectos de sidebar mejorados - MÁS SUTIL */
.sidebar {
  background: linear-gradient(180deg, 
    rgba(26, 15, 15, 0.95), 
    rgba(42, 157, 143, 0.08)) !important;
  border-right: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}

.sidebar-link:hover,
.sidebar-link.active {
  background: linear-gradient(135deg, 
    rgba(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border-left: 3px solid var(--christmas-gold) !important;
  box-shadow: none;
}

/* Efectos de scrollbar personalizados - MÁS ALEGRE */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(26, 15, 15, 0.3);
  border-left: 2px solid rgba(255, 215, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: var(--christmas-gradient-bright);
  border-radius: 5px;
  border: 2px solid rgba(255, 215, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #ff6b6b, #ffd700, #51cf66);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

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

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

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

/* Efectos de modal mejorados - MÁS SUTIL */
.modal {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 1), 
    rgba(42, 157, 143, 0.2)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(10px);
}

/* Efectos de formularios mejorados - MÁS SUTIL */
.form-input:focus {
  border-color: var(--christmas-gold) !important;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2) !important;
}

/* Efectos de estadísticas mejorados - SIN BRILLO EXCESIVO */
.stat-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.stat-card::before {
  display: none;
}

.stat-card:hover::before {
  display: none;
}

/* Efectos de servidores mejorados - SIN BRILLO EXCESIVO */
.server-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.server-header {
  background: linear-gradient(135deg, 
    rgba(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border-bottom: 2px solid rgba(255, 215, 0, 0.4) !important;
  box-shadow: none;
}

/* Efectos de características mejorados - SIN BRILLO EXCESIVO */
.feature-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.feature-icon {
  background: var(--christmas-gradient-bright) !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

/* Efectos de juegos mejorados - SIN BRILLO EXCESIVO */
.game-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

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

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

/* Efectos de badges mejorados - MÁS SUTIL */
.hero-badge,
.web-editor-badge,
.cta-badge {
  background: linear-gradient(135deg, 
    rgba(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.4) !important;
  color: var(--christmas-gold) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  text-shadow: none;
}

/* Efectos de hover en elementos específicos - MÁS SUTIL */
.btn-primary:hover {
  background: linear-gradient(135deg, #ff6b6b, #ffd700, #51cf66) !important;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3) !important;
  transform: translateY(-2px);
  border: 2px solid rgba(255, 215, 0, 0.5) !important;
}

/* Efectos de animación suaves - MÁS SUTIL */
@keyframes smoothGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
  }
  33% {
    box-shadow: 0 0 10px rgba(230, 57, 70, 0.3);
  }
  66% {
    box-shadow: 0 0 10px rgba(42, 157, 143, 0.3);
  }
}

/* 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 - MÁS ALEGRE */
.ai-api-container,
.docs-container {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.tab-btn {
  background: linear-gradient(135deg, 
    rgba(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3) !important;
  color: var(--christmas-gold) !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.tab-btn:hover,
.tab-btn.active {
  background: var(--christmas-gradient-bright) !important;
  color: white !important;
  border-color: var(--christmas-gold) !important;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
  text-shadow: none;
}

.code-block,
.endpoint {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.9), 
    rgba(42, 157, 143, 0.1)) !important;
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

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

/* Buy Coins Page - MÁS ALEGRE */
.payment-method {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.payment-method:hover,
.payment-method.active {
  border-color: var(--christmas-gold) !important;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3) !important;
  transform: translateY(-1px);
}

.purchase-summary {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Buy Coins específicos */
.coin-package {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 2px solid rgba(255, 215, 0, 0.3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

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

.select-package-btn {
  background: var(--christmas-gradient-bright) !important;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.transaction-skeleton {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

/* Documentación Page */
.docs-section,
.docs-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

.docs-nav-item {
  background: linear-gradient(135deg, 
    rgba(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  color: var(--christmas-gold) !important;
}

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

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

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

.info-box {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

.step-list {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.6), 
    rgba(15, 126, 62, 0.05)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

.step-item {
  background: linear-gradient(135deg, 
    rgba(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.feature-grid .feature-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

/* Support Page */
.ticket-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

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

.filter-btn {
  background: linear-gradient(135deg, 
    rgba(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  color: var(--christmas-gold) !important;
}

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

/* Support específicos */
.tickets-container {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

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

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

.modal-content {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 1), 
    rgba(15, 126, 62, 0.3)) !important;
  border: 1px solid rgba(196, 30, 58, 0.3) !important;
}

/* Contracts Page */
.contract-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 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, 15, 15, 0.05), 
    rgba(15, 126, 62, 0.02)) !important;
}

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

.user-coins {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

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

.empty-state {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.6), 
    rgba(15, 126, 62, 0.05)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

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

/* Profile Page */
.profile-container,
.profile-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

.profile-section {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.6), 
    rgba(15, 126, 62, 0.05)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

/* Profile específicos */
.profile-stats-grid .stat-card {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

.profile-stats-grid .stat-card::after {
  background: var(--christmas-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(230, 57, 70, 0.15), 
    rgba(42, 157, 143, 0.15)) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.section-content {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.6), 
    rgba(15, 126, 62, 0.05)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
}

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

/* Asegurar que todos los elementos con clase 'card' tengan estilos Navidad */
[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, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 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(--christmas-gold) !important;
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2) !important;
}

/* Estilos para Anuncios del Dashboard */
.announcements-container {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.05), 
    rgba(15, 126, 62, 0.02)) !important;
}

.announcement {
  background: linear-gradient(135deg, 
    rgba(26, 15, 15, 0.8), 
    rgba(15, 126, 62, 0.1)) !important;
  border: 1px solid rgba(196, 30, 58, 0.2) !important;
  border-left: 4px solid var(--christmas-red) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Tipos de anuncios con colores Navidad */
.announcement-info {
  border-left-color: var(--christmas-red) !important;
  background: linear-gradient(135deg, 
    rgba(196, 30, 58, 0.1), 
    rgba(15, 126, 62, 0.1)) !important;
}

.announcement-success {
  border-left-color: var(--christmas-green) !important;
  background: linear-gradient(135deg, 
    rgba(15, 126, 62, 0.1), 
    rgba(196, 30, 58, 0.1)) !important;
}

.announcement-warning {
  border-left-color: var(--christmas-gold) !important;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.1), 
    rgba(196, 30, 58, 0.1)) !important;
}

.announcement-error {
  border-left-color: var(--christmas-red) !important;
  background: linear-gradient(135deg, 
    rgba(196, 30, 58, 0.1), 
    rgba(15, 126, 62, 0.1)) !important;
}

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

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

.announcement-dismiss {
  background: var(--christmas-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, #c41e3a, #0f7e3e) !important;
  transform: scale(1.1) !important;
}

/* Efecto de luces navideñas parpadeantes - MÁS SUTIL */
@keyframes christmasLights {
  0%, 100% {
    border-color: rgba(230, 57, 70, 0.3);
    box-shadow: 0 0 5px rgba(230, 57, 70, 0.2);
  }
  25% {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
  }
  50% {
    border-color: rgba(42, 157, 143, 0.3);
    box-shadow: 0 0 5px rgba(42, 157, 143, 0.2);
  }
  75% {
    border-color: rgba(255, 107, 107, 0.3);
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.25);
  }
}

/* Aplicar luces navideñas a elementos destacados - DESACTIVADO POR DEFECTO */
.dashboard-header,
.page-header,
.hero {
  /* animation: christmasLights 4s ease-in-out infinite; */
}

/* Efecto de nieve brillante en el fondo */
@keyframes sparkle {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Agregar brillo especial a los títulos - MÁS SUTIL */
.hero-title,
.dashboard-title,
.page-title {
  text-shadow: 
    0 0 5px rgba(255, 215, 0, 0.3),
    0 0 10px rgba(230, 57, 70, 0.2);
}

/* 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;
  }
  
  /* Reducir animaciones en móvil */
  .dashboard-header,
  .page-header,
  .hero {
    animation: none;
  }
}