/* 
  TEMA: FIESTAS PATRIAS PERÚ (JULIO)
  Este archivo sobreescribe los estilos globales para dar un ambiente patrio rojo y blanco.
  Para revertir a la normalidad, simplemente elimina la referencia a este archivo en index.html.
*/

:root {
  --brand: #e51c23 !important; /* Rojo bandera */
  --brand-glow: rgba(229, 28, 35, 0.4) !important;
  --surface-light: rgba(229, 28, 35, 0.05) !important;
  --brand-gradient: linear-gradient(135deg, #e51c23 0%, #b71c1c 100%) !important;
}

/* Detalles Blancos y Rojos en Componentes */
.app-sidebar, .app-nav {
  border-color: rgba(229, 28, 35, 0.2) !important;
  box-shadow: 0 0 20px rgba(229, 28, 35, 0.05) !important;
}

/* Pill de Balance */
.nav-pill.balance {
  background: rgba(229, 28, 35, 0.1) !important;
  border: 1px solid rgba(229, 28, 35, 0.3) !important;
}
.nav-pill.balance i {
  color: #e51c23 !important;
}
.nav-pill.balance:hover {
  background: rgba(229, 28, 35, 0.2) !important;
}

/* Iconos de Navegación */
.nav-btn.active i {
  color: #e51c23 !important;
  filter: drop-shadow(0 0 8px rgba(229, 28, 35, 0.6)) !important;
}

/* Botones Principales */
.btn-primary {
  background: linear-gradient(135deg, #e51c23 0%, #d32f2f 100%) !important;
  box-shadow: 0 8px 25px rgba(229, 28, 35, 0.3) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  box-shadow: 0 12px 30px rgba(229, 28, 35, 0.5) !important;
  transform: translateY(-2px) !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(229, 28, 35, 0.3) !important;
  color: #ffffff !important;
}
.btn-secondary:hover {
  background: rgba(229, 28, 35, 0.15) !important;
}

/* Botón de Recargar Perfil */
.btn-recharge {
  background: rgba(229, 28, 35, 0.1) !important;
  color: #e51c23 !important;
  border: 1px solid rgba(229, 28, 35, 0.2) !important;
}

/* Tarjetas y Contenedores */
.glass-panel {
  border-top: 1px solid rgba(229, 28, 35, 0.2) !important;
}

/* Badges (Spotify/Cuentas) */
.sp-badge {
  background: rgba(229, 28, 35, 0.15) !important;
  color: #ff5252 !important;
  border: 1px solid rgba(229, 28, 35, 0.3) !important;
}

/* Resalte de Textos Importantes */
.text-brand {
  color: #ff5252 !important;
}

/* Animación Especial de Carga (Loader) */
.spinner {
  border: 2px solid rgba(229, 28, 35, 0.1) !important;
  border-top-color: #e51c23 !important;
}

/* Efecto Hover en las cards de Spotify / Cuentas */
.sp-hub-card:hover {
  border-color: rgba(229, 28, 35, 0.4) !important;
  box-shadow: 0 10px 30px rgba(229, 28, 35, 0.1) !important;
}

.cuenta-card:hover {
  border-color: rgba(229, 28, 35, 0.3) !important;
}

/* Modal de Cuentas (Copiar Link) */
.sp-icon-btn.small {
  color: #ff5252 !important;
}
.sp-icon-btn:hover {
  background: rgba(229, 28, 35, 0.15) !important;
}

/* Modales de Avatar (Perú Theme) */
.av-modal-content {
  border-top: 2px solid #e51c23 !important;
}