@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css);
/* Variables personalizadas de Bootstrap - Tema negro profesional con acento verde y morado épico */
:root {
  --bs-body-bg: #050505; /* Fondo más oscuro */
  --bs-body-color: #f8f9fa;
  --bs-primary: #00c076;
  --bs-primary-rgb: 0, 192, 118;
  --bs-primary-hover: #00a864;
  --bs-success: #00c076;
  --bs-success-rgb: 0, 192, 118;
  --bs-warning: #f7931a;
  --bs-warning-rgb: 247, 147, 26;
  --bs-danger: #d9304e;
  --bs-danger-rgb: 217, 48, 78;
  --bs-dark: #0a0a0a; /* Oscurecido */
  --bs-dark-rgb: 10, 10, 10;
  --bs-secondary: #131313; /* Oscurecido */
  --bs-secondary-rgb: 19, 19, 19;
  --bs-card-bg: #0f0f0f; /* Un poco más claro que el fondo */
  --bs-border-color: #2a2a2a;
  --bs-nav-bg: #0f0f0f;
  --bs-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  --bs-text-muted: #a0a0a0;
  --bs-accent: #00d488;
  --bs-pulse-color: rgba(0, 212, 136, 0.7);
  --bs-epic-purple: #13004b; /* Morado épico */
  --bs-epic-purple-dark: #09002a; /* Morado épico más oscuro */
  --bs-epic-purple-rgb: 19, 0, 75; /* Valores RGB del morado épico */
}

/* Estilos globales y básicos */
html {
  scroll-behavior: smooth; /* Scroll más suave */
  overflow-x: hidden;
}

/* Clase de texto para el morado épico */
.text-epic-purple {
  color: #13004b !important;
}

body {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 30%, #0d0a0c 70%, #0a0a0a 100%);
  background-attachment: fixed;
  color: var(--bs-body-color);
  font-family: 'Inter', 'Roboto', sans-serif;
  min-height: 100vh;
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a var(--bs-secondary);
  position: relative;
  overflow: hidden;
}

/* Sistema de partículas CSS eliminado - solo se usan las partículas del Canvas */







body::-webkit-scrollbar {
  width: 6px;
}

body::-webkit-scrollbar-track {
  background: #1a1a2e;
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #ec4899, #db2777);
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #db2777, #be185d);
}

/* Personalización de tarjetas con efectos modernos */
.card {
  background: rgba(13, 10, 12, 0.25) !important;
  backdrop-filter: blur(10px) !important;
  border: none !important;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease;
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

.card-header {
  background-color: transparent;
  border-bottom: none !important;
  border: none !important;
}

.card-footer {
  background-color: rgba(0, 0, 0, 0.15);
  border-top: none !important;
  border: none !important;
}

/* Personalización de botones con efecto glassmorphism */
.btn {
  border-radius: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: all 0.3s ease;
}

.btn:hover::after {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--bs-primary), rgba(0, 192, 118, 0.8));
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(0, 212, 136, 0.3);
  animation: pulseBorder 2s infinite;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--bs-primary-hover), var(--bs-primary));
  border-color: transparent;
  box-shadow: 0 6px 15px rgba(0, 212, 136, 0.5);
}

@keyframes pulseBorder {
  0% {
    box-shadow: 0 4px 10px rgba(0, 212, 136, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 212, 136, 0.6);
  }
  100% {
    box-shadow: 0 4px 10px rgba(0, 212, 136, 0.3);
  }
}

/* Estilos para formularios con diseño mejorado */
.form-control, .form-select {
  background-color: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 6px;
  transition: all 0.3s ease;
  padding: 10px 15px;
}

.form-control:focus, .form-select:focus {
  background-color: rgba(30, 30, 30, 0.9);
  border-color: var(--bs-primary);
  color: white;
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2);
}

.input-group-text {
  background-color: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--bs-text-muted);
}

.form-label {
  color: var(--bs-text-muted);
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* Personalización de las cajas de selección */
.form-check-input {
  background-color: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Loading spinner animation mejorada */
@keyframes spin {
  0% {
    transform: rotate(0deg);
    border-top-color: var(--bs-primary);
  }
  50% {
    border-top-color: var(--bs-success);
  }
  100% {
    transform: rotate(360deg);
    border-top-color: var(--bs-primary);
  }
}

.loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--bs-primary);
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0.1, 0.5, 1) infinite;
  box-shadow: 0 0 10px rgba(58, 123, 213, 0.3);
}

/* Efectos de animación para elementos */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

/* Efecto de pulso para elementos destacados */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(var(--bs-primary-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0);
  }
}

/* Estilos para tarjetas de cuenta (collapsible) mejorados */
.account-card {
  border: none !important;
  background: rgba(13, 10, 12, 0.25) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  backdrop-filter: blur(10px) !important;
  position: relative;
}

.account-card .card-header {
  transition: all 0.3s ease;
  padding: 1rem 1.25rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  border-bottom: none !important;
  border: none !important;
}

.account-card .card-header:hover {
  background-color: rgba(20, 20, 20, 0.8) !important;
}

/* Collapse animation enhanced */
.account-card .card-body {
  max-height: 2000px; /* Valor máximo para contenido expandido */
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.3s ease;
  background: rgba(8, 8, 8, 0.6) !important;
  backdrop-filter: blur(5px) !important;
  border-radius: 0 0 12px 12px;
}

.account-card .card-body.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Estilos para los iconos de chevron mejorados */
.account-card .card-header .bi-chevron-right,
.account-card .card-header .bi-chevron-down {
  transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  color: var(--bs-primary);
  filter: drop-shadow(0 0 3px rgba(0, 212, 136, 0.5));
  animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
  0% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 136, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(0, 212, 136, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 136, 0.3));
  }
}

.account-card .card-header:hover .bi-chevron-right {
  transform: translateX(4px) scale(1.1);
}

.account-card .card-header:hover .bi-chevron-down {
  transform: translateY(4px) scale(1.1);
}

/* Estilo mejorado para el texto de ganancias en la cabecera */
.account-card .profit-text {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03rem;
  margin-left: 15px !important;
  display: inline-flex;
  align-items: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.account-card .profit-text:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.account-card .profit-text .bi {
  margin-right: 6px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Asegurar que el texto verde y rojo destaquen bien con efectos */
.account-card .text-success {
  color: #00d488 !important; /* Verde más intenso */
  text-shadow: 0 0 10px rgba(0, 212, 136, 0.3);
}

.account-card .text-danger {
  color: #ff4560 !important; /* Rojo más intenso */
  text-shadow: 0 0 10px rgba(255, 69, 96, 0.3);
}

/* Animación para el contenido desplegable */
.animate__fadeIn {
  --animate-duration: 0.6s;
}

/* Estilos para tarjetas colapsables accesibles con mejoras visuales */
.card-header[role=button] {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.card-header[role=button]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-header[role=button]:hover::after {
  opacity: 1;
}

.card-header[role=button]:focus {
  outline: none;
  box-shadow: none;
  animation: none;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 2px rgba(0, 212, 136, 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 212, 136, 0.6);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(0, 212, 136, 0.3);
  }
}

/* Estilos de accesibilidad mejorados */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Estilos adicionales para un diseño negro profesional */

/* Navbar personalizada - Completamente transparente */
.navbar {
  background-color: transparent !important;
  background: transparent !important;
  border-bottom: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 56px;
}

.navbar-flush {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #00d488, #00a864);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 2rem;
  position: relative;
  animation: textPulse 3s infinite;
}

@keyframes textPulse {
  0% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 136, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(0, 212, 136, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 136, 0.3));
  }
}

/* Texto de conexión en navbar siempre blanco */
.navbar span {
  color: #ffffff !important;
}

/* Header principal con animación sutil */
.app-header {
  background: transparent !important;
  border-bottom: none !important;
  border: none !important;
  padding: 1.5rem 0;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
}

.app-header .container {
  position: relative;
  z-index: 1;
}

.app-header h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #ffffff, #cccccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.app-header p {
  color: var(--bs-text-muted);
  font-size: 1.1rem;
  font-weight: 300;
  margin-bottom: 0;
  max-width: 80%;
}

/* Menú de navegación principal */
.main-nav {
  display: flex;
  align-items: center;
}

.main-nav .nav-link {
  color: var(--bs-text-muted);
  font-weight: 500;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
  border-radius: 6px;
  margin: 0 0.25rem;
  position: relative;
}

.main-nav .nav-link:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.05);
}

.main-nav .nav-link.active {
  color: white;
  background-color: rgba(58, 123, 213, 0.15);
}

.main-nav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 30%;
  width: 40%;
  height: 3px;
  background: linear-gradient(90deg, var(--bs-primary), rgba(0, 192, 118, 0.7));
  border-radius: 10px;
}

.user-dropdown {
  margin-left: auto;
}

.dropdown-menu {
  background: rgba(13, 10, 12, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(236, 72, 153, 0.1) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-item {
  background: transparent !important;
  color: #f8f9fa !important;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(236, 72, 153, 0.15) !important;
  color: #ffffff !important;
}

.user-profile {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: 30px;
  background: rgba(30, 30, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.user-profile:hover {
  background: rgba(40, 40, 40, 0.7);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.user-profile img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.user-profile span {
  color: white;
  font-weight: 500;
  margin-right: 10px;
}

/* Barra de navegación responsive */
@media (max-width: 992px) {
  .navbar-collapse {
    background: rgba(10, 10, 10, 0.95);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .main-nav .nav-link {
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
  }
  
  .user-dropdown {
    margin-left: 0;
    margin-top: 1rem;
  }
}

/* Tabs personalizadas */
.nav-tabs {
  border-bottom: none;
}

.nav-tabs .nav-link {
  color: var(--bs-text-muted);
  background-color: transparent;
  border: none;
  padding: 10px 15px;
  transition: all 0.3s ease;
  position: relative;
  font-weight: 500;
  min-width: 100px; /* Ancho mínimo para facilitar la interacción en móvil */
  text-align: center;
  touch-action: manipulation; /* Mejora la respuesta táctil en dispositivos móviles */
}

/* Mejorar interacción táctil en tabs para móviles */
@media (max-width: 768px) {
  .nav-tabs .nav-link {
    padding: 12px 20px; /* Área táctil más grande */
    margin: 0 2px; /* Pequeño espacio entre pestañas */
    min-width: 90px; /* Ancho mínimo ligeramente menor para mejor ajuste */
  }
  
  /* Pseudo-elemento para aumentar el área táctil sin afectar el diseño */
  .nav-tabs .nav-link::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
  }
}

.nav-tabs .nav-link:hover {
  color: white;
}

.nav-tabs .nav-link.active {
  color: white;
  background-color: transparent;
  border: none;
}

.nav-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, var(--bs-primary), rgba(0, 192, 118, 0.7));
  animation: pulseWidth 2s infinite;
  z-index: 2; /* Asegura que sea visible sobre cualquier contenido */
}

@keyframes pulseWidth {
  0% {
    opacity: 0.7;
    box-shadow: 0 0 5px rgba(0, 192, 118, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 192, 118, 0.8);
  }
  100% {
    opacity: 0.7;
    box-shadow: 0 0 5px rgba(0, 192, 118, 0.4);
  }
}

/* Estilo para dashboard y tablas */
.table {
  color: var(--bs-body-color);
  border-color: rgba(255, 255, 255, 0.05);
}

.table thead th {
  background-color: rgba(20, 20, 20, 0.8);
  border-bottom: none;
  color: var(--bs-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05rem;
}

.table tbody tr {
  background-color: rgba(18, 18, 18, 0.5);
  transition: all 0.2s ease;
}

.table tbody tr:hover {
  background-color: rgba(30, 30, 30, 0.7);
}

/* Fondos específicos para las tablas de operaciones y APIs */
.operations-table,
.operations-table thead,
.operations-table tbody,
.operations-table tr,
.operations-table th,
.operations-table td {
  background-color: rgba(13, 10, 12, 0.25) !important;
}

.apis-table,
.apis-table thead,
.apis-table tbody,
.apis-table tr,
.apis-table th,
.apis-table td {
  background-color: rgba(13, 10, 12, 0.25) !important;
}

/* Stats cards on dashboard */
.stat-card {
  overflow: hidden;
  border-radius: 10px;
  background: rgba(13, 10, 12, 0.25) !important;
  backdrop-filter: blur(10px) !important;
  border: none !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

.stat-card .stat-icon {
  opacity: 0.8;
  transition: all 0.3s ease;
}

.stat-card:hover .stat-icon {
  transform: scale(1.1);
  opacity: 1;
}

/* Modal styling */
.modal-content {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(15, 15, 15, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.modal-header, .modal-footer {
  border-color: rgba(255, 255, 255, 0.05);
}

/* Tooltips & Popovers */
.tooltip .tooltip-inner, .popover {
  background-color: var(--bs-dark);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Login page special styling */
.login-page {
  background: linear-gradient(135deg, #0a0a0a, #151515);
}

.login-card {
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
}

.login-brand {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, #3a7bd5, #00c076);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Botón con efecto hover */
.hover-lift {
  transition: none !important;
}

.hover-lift:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Efecto de glassmorphism para contenedores */
.glass-container {
  background: rgba(18, 18, 18, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
  border-radius: 10px;
}

/* Estilos para badges */
.badge {
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.35em 0.65em;
  border-radius: 6px;
}

/* Mejora responsiva para dispositivos móviles */
@media (max-width: 768px) {
  .card-header {
    padding: 0.75rem 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  /* Optimización adicional para tarjetas en pantallas muy pequeñas */
  .account-card {
    margin-left: -10px;
    margin-right: -10px;
    border-radius: 10px;
  }
  
  .table-responsive {
    border-radius: 8px;
  }
  
  /* Mejoras para contenido de pestañas en móvil */
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #1a1a1a;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
    touch-action: pan-x; /* Mejora el scroll horizontal en dispositivos táctiles */
    max-width: 100vw; /* Evita el desbordamiento horizontal */
  }
  
  .nav-tabs::-webkit-scrollbar {
    height: 4px;
  }
  
  .nav-tabs::-webkit-scrollbar-track {
    background: #1a1a1a;
  }
  
  .nav-tabs::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
  }
  
  /* Mejorar tablas en móvil */
  .operations-table th,
  .operations-table td {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
  
  /* Mejoras para tablas de operaciones en móvil */
  .operations-table-container {
    margin: 0 -1rem;
    width: calc(100% + 2rem);
    overflow-x: auto;
  }
  
  .operations-table-scroll {
    max-height: 300px; /* Altura ligeramente reducida en móviles */
    overflow-y: auto;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Mejora para IE/Edge */
    -webkit-overflow-scrolling: touch; /* Scroll con inercia en iOS */
    overscroll-behavior-y: contain; /* Evita propagación de scroll */
    touch-action: pan-x pan-y; /* Mejora la interacción táctil permitiendo scroll horizontal y vertical */
    padding-bottom: 5px; /* Espacio adicional en la parte inferior */
  }
  
  /* Ajustes para la visualización de datos en tabla */
  .operations-table .badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  /* Mejoras para contenido de tablas en móvil */
  .operations-table td {
    word-break: normal;
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: none;
    min-width: 80px; /* Ancho mínimo para garantizar la legibilidad */
  }
  
  /* Optimizaciones avanzadas de tablas para móviles */
  @media (max-width: 576px) {
    .operations-table {
      font-size: 0.8rem;
    }
    
    .operations-table th {
      font-size: 0.75rem;
      white-space: nowrap;
      padding: 0.5rem 0.3rem;
    }
    
    .operations-table td {
      padding: 0.5rem 0.3rem;
    }          /* Mostrar datos importantes incluso en pantallas muy pequeñas */
    .operations-table .action-cell {
      min-width: 60px;
    }
    
    .operations-table .profit-cell {
      min-width: 65px;
    }
    
    /* Ajuste para la columna de fecha en dispositivos móviles */
    .operations-table td:first-child {
      min-width: 80px;
      max-width: 90px;
      font-size: 0.75rem;
    }
    
    /* Reducir espaciado dentro de las tablas en móviles */
    .table>:not(caption)>*>* {
      padding: 0.4rem 0.3rem;
    }
  }
  
  /* Mejoras para el contenedor de gráficos en móvil */
  .chart-responsive-wrapper {
    overflow-x: hidden;
    margin: 0 -0.5rem;
    width: calc(100% + 1rem);
    position: relative;
    overscroll-behavior: none; /* Evita scroll innecesario en móviles */
  }
  
  .performance-chart-mobile-container {
    overflow-x: visible;
    width: 100%;
    touch-action: pan-y; /* Mejora el desplazamiento vertical en dispositivos táctiles */
  }
  
  /* Mejoras para el gráfico de rendimiento */
  .performance-chart-wrapper {
    transition: height 0.3s ease;
    position: relative;
    overscroll-behavior: none;
    border: 1px solid #00c076;
    box-shadow: 0 0 10px rgba(0, 192, 118, 0.2);
  }
  
  .performance-chart {
    touch-action: pan-x pan-y;
    max-width: 100%;
  }
  
  /* Optimizaciones para el gráfico en móviles */
  @media (max-width: 576px) {
    .performance-chart-wrapper {
      padding: 0.5rem !important;
      border-radius: 8px !important;
      border-width: 1px !important;
      height: 280px !important;
      margin: 0 auto;
    }
  }
  
  /* Ajustes adicionales para pantallas muy pequeñas */
  @media (max-width: 360px) {
    .account-card .card-header h5 {
      font-size: 0.95rem !important;
    }
    
    .account-card .badge {
      padding: 0.2rem 0.4rem;
      font-size: 0.7rem;
    }
    
    .profit-text {
      font-size: 0.8rem;
    }
    
    .performance-chart-wrapper {
      height: 220px !important;
      padding: 0.35rem !important;
    }
    
    .operations-table td {
      padding: 0.3rem 0.2rem;
      font-size: 0.75rem;
    }
  }
  
  /* Estilo para el botón de añadir API sin efectos */
  .add-api-button {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
  }
  
  .add-api-button:hover,
  .add-api-button:focus,
  .add-api-button:active {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
  }
  
  /* Contenedor responsivo optimizado para móviles */
  .mobile-optimized-container {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden; /* Evitar scroll horizontal en móviles */
    width: 100%; /* Asegurar que ocupa todo el ancho disponible */
    max-width: 100%; /* Evita que se desborde */
  }
  
  /* Optimizaciones específicas para diferentes tamaños de pantalla */
  @media (max-width: 360px) {
    .mobile-optimized-container {
      padding-left: 8px;
      padding-right: 8px;
    }
  }
  
  @media (min-width: 768px) {
    .mobile-optimized-container {
      padding-left: 15px;
      padding-right: 15px;
    }
  }
  
  /* Mejora de espacio para contenedores en dispositivos muy pequeños */
  @media (max-width: 320px) {
    .mobile-optimized-container {
      padding-left: 5px;
      padding-right: 5px;
    }
  }
  
  /* Mejoras para el contenedor de pestañas en tarjetas */
  .account-card .tab-content {
    padding: 0.5rem 0;
  }
}

/* Estilos para el botón de añadir API sin efectos ni colores */
.add-api-button.btn {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  color: white !important;
  text-decoration: none !important;
}

.add-api-button.btn:hover,
.add-api-button.btn:focus,
.add-api-button.btn:active {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: brightness(1.2) !important;
}

/* Animación de entrada para las páginas */
.page-transition-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
}

/* Footer personalizado - 100% Transparente sin fondo */
.app-footer {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0.75rem 0 !important;
  margin-top: auto !important;
  position: relative;
  overflow: hidden;
}

.app-footer::before,
.app-footer::after {
  content: none !important;
  display: none !important;
}

.app-footer .container {
  position: relative;
  z-index: 1;
}

.footer-brand {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #00d488, #00a864);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: footerPulse 3s infinite;
  position: relative;
}

.footer-brand::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 25%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d488, transparent);
  animation: footerLinePulse 3s infinite;
}

@keyframes footerPulse {
  0% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 136, 0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(0, 212, 136, 0.7));
    transform: scale(1.03);
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 136, 0.3));
    transform: scale(1);
  }
}

@keyframes footerLinePulse {
  0% {
    opacity: 0.5;
    width: 30%;
    left: 35%;
    box-shadow: 0 0 5px rgba(0, 212, 136, 0.3);
  }
  50% {
    opacity: 1;
    width: 60%;
    left: 20%;
    box-shadow: 0 0 15px rgba(0, 212, 136, 0.7);
  }
  100% {
    opacity: 0.5;
    width: 30%;
    left: 35%;
    box-shadow: 0 0 5px rgba(0, 212, 136, 0.3);
  }
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
}

.footer-links li {
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--bs-text-muted);
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: white;
  text-decoration: none;
}

.footer-copyright {
  color: var(--bs-text-muted);
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  text-align: center;
}

/* Mejorando el efecto de pulso para el footer brand */
.footer-brand {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #00d488, #00a864);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: footerPulse 3s infinite;
  position: relative;
}

.footer-brand::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 25%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d488, transparent);
  animation: footerLinePulse 3s infinite;
}

@keyframes footerPulse {
  0% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 136, 0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(0, 212, 136, 0.7));
    transform: scale(1.03);
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(0, 212, 136, 0.3));
    transform: scale(1);
  }
}

@keyframes footerLinePulse {
  0% {
    opacity: 0.5;
    width: 30%;
    left: 35%;
    box-shadow: 0 0 5px rgba(0, 212, 136, 0.3);
  }
  50% {
    opacity: 1;
    width: 60%;
    left: 20%;
    box-shadow: 0 0 15px rgba(0, 212, 136, 0.7);
  }
  100% {
    opacity: 0.5;
    width: 30%;
    left: 35%;
    box-shadow: 0 0 5px rgba(0, 212, 136, 0.3);
  }
}

/* Efecto de resplandor para elementos clave de la interfaz */
.glow-effect {
  position: relative;
  overflow: hidden;
}

.glow-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(0, 212, 136, 0.4), transparent 70%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.glow-effect:hover::after {
  opacity: 1;
}

/* Indicador de conexión sutil sin efectos */
.connection-status.connected {
  background-color: rgba(0, 212, 136, 0.4);
  box-shadow: none;
  animation: none;
}

.connection-status.disconnected {
  background-color: rgba(220, 53, 69, 0.4);
  box-shadow: none;
  animation: none;
}

/* Mejora de títulos de tarjetas */
.card-title {
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  color: white;
  position: relative;
  display: inline-block;
}

/* Eliminado el subrayado pulsante verde de los títulos de tarjetas */

.section-title {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: white;
  position: relative;
  padding-bottom: 0.75rem;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 60px;
  background: linear-gradient(90deg, var(--bs-primary), var(--bs-success));
  border-radius: 10px;
}

/* Mensaje de bienvenida */
.welcome-message {
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.9), rgba(18, 18, 18, 0.95));
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.welcome-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.1), transparent 70%);
  z-index: 0;
}

.welcome-message .content {
  position: relative;
  z-index: 1;
}

.welcome-message h2 {
  font-weight: 700;
  font-size: 1.8rem;
  color: white;
  margin-bottom: 1rem;
}

.welcome-message p {
  color: var(--bs-text-muted);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  max-width: 90%;
}

.welcome-message .btn {
  padding: 0.5rem 1.5rem;
}

/* Decoración de las tarjetas para diferentes secciones */
.card.feature-card {
  border-top: 3px solid var(--bs-primary);
  transition: all 0.3s ease;
}

.card.warning-card {
  border-top: 3px solid var(--bs-warning);
}

.card.success-card {
  border-top: 3px solid var(--bs-success);
}

.card.danger-card {
  border-top: 3px solid var(--bs-danger);
}

/* Títulos de sección con diseño sofisticado */
.dashboard-section {
  margin-bottom: 3rem;
}

.dashboard-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: none;
}

.dashboard-section-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: white;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.dashboard-section-title .bi {
  margin-right: 10px;
  color: var(--bs-primary);
}

/* Mensaje "No hay datos" estilizado */
.no-data-message {
  text-align: center;
  padding: 3rem;
  background: rgba(18, 18, 18, 0.5);
  border-radius: 10px;
  margin: 2rem 0;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.no-data-message .icon {
  font-size: 2.5rem;
  color: var(--bs-text-muted);
  margin-bottom: 1rem;
}

.no-data-message h4 {
  color: white;
  margin-bottom: 0.5rem;
}

.no-data-message p {
  color: var(--bs-text-muted);
  max-width: 80%;
  margin: 0 auto;
}

/* Mejoras para el panel de control */
.dashboard-container {
  position: relative;
  animation: fadeIn 0.5s ease;
}

/* Widgets personalizados */
.widget-card {
  background: linear-gradient(145deg, rgba(22, 22, 22, 0.9), rgba(15, 15, 15, 0.95));
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.widget-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  transform: translateY(-5px);
}

.widget-header {
  padding: 1rem;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(13, 10, 12, 0.25);
}

.widget-title {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin: 0;
  display: flex;
  align-items: center;
}

.widget-title .icon {
  margin-right: 8px;
  font-size: 1.2rem;
  color: var(--bs-primary);
}

.widget-content {
  padding: 1.5rem;
}

.widget-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(15, 15, 15, 0.5);
  font-size: 0.9rem;
  color: var(--bs-text-muted);
}

/* Trading view y gráficas */
.trading-chart-container {
  border-radius: 10px;
  overflow: hidden;
  background: #131722;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 2rem;
  height: 500px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Mejoras para alertas y notificaciones */
.alert {
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  padding: 1rem 1.25rem;
}

.alert-dark {
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.95), rgba(18, 18, 18, 0.9));
  color: var(--bs-body-color);
  border-left: 4px solid var(--bs-primary);
}

.alert-success {
  background: linear-gradient(145deg, rgba(0, 150, 90, 0.15), rgba(0, 192, 118, 0.1));
  color: #00d488;
  border-left: 4px solid var(--bs-success);
}

.alert-danger {
  background: linear-gradient(145deg, rgba(217, 48, 78, 0.15), rgba(255, 69, 96, 0.1));
  color: #ff4560;
  border-left: 4px solid var(--bs-danger);
}

.alert-warning {
  background: linear-gradient(145deg, rgba(247, 147, 26, 0.15), rgba(247, 147, 26, 0.1));
  color: #f7931a;
  border-left: 4px solid var(--bs-warning);
}

/* Notificación toast personalizada */
.toast {
  background: rgba(18, 18, 18, 0.95);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.toast-header {
  background: rgba(13, 10, 12, 0.25);
  border-bottom: none;
  color: white;
}

/* Definición de badges mejoradas */
.badge-success {
  background: rgba(0, 192, 118, 0.2);
  color: #00d488;
  font-weight: 500;
  border: 1px solid rgba(0, 192, 118, 0.3);
}

.badge-danger {
  background: rgba(217, 48, 78, 0.2);
  color: #ff4560;
  font-weight: 500;
  border: 1px solid rgba(217, 48, 78, 0.3);
}

.badge-warning {
  background: rgba(247, 147, 26, 0.2);
  color: #f7931a;
  font-weight: 500;
  border: 1px solid rgba(247, 147, 26, 0.3);
}

.badge-primary {
  background: rgba(58, 123, 213, 0.2);
  color: #3a7bd5;
  font-weight: 500;
  border: 1px solid rgba(58, 123, 213, 0.3);
}

/* Distintivo sutil para acción */
.action-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(30, 30, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--bs-text-muted);
  transition: all 0.3s ease;
}

.action-badge:hover {
  background: rgba(40, 40, 40, 0.8);
  color: white;
  transform: translateY(-1px);
}

.action-badge .icon {
  margin-right: 5px;
}

/* Estilos suplementarios para botones de texto */
.btn-text {
  background: transparent;
  border: none;
  color: var(--bs-primary);
  padding: 0.5rem 0;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-text:hover {
  color: white;
  text-decoration: none;
  background: transparent;
}

/* Ajuste para el componente de acceso con Google */
.social-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
}

.social-login-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.social-login-btn img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

/* Estilos específicos para la pantalla de Login */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  position: relative;
  overflow: hidden;
}

/* Pseudo-elementos de login-container eliminados para permitir ver el fondo del body */

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

.login-form-container {
  background: rgba(18, 18, 18, 0.7);
  border-radius: 15px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  padding: 2.5rem;
  width: 100%;
  max-width: 450px;
  position: relative;
  z-index: 2;
  transform: translateY(0);
  transition: all 0.5s ease;
}

.login-form-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo img {
  max-height: 80px;
  margin-bottom: 1rem;
}

.login-title {
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 700;
  font-size: 2rem;
  background: linear-gradient(135deg, #fff, #a0a0a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.login-subtitle {
  text-align: center;
  color: var(--bs-text-muted);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.login-footer {
  text-align: center;
  margin-top: 2rem;
  color: var(--bs-text-muted);
  font-size: 0.9rem;
}

.login-footer a {
  color: var(--bs-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-footer a:hover {
  color: white;
  text-decoration: none;
}

/* Botón de Google personalizado */
.btn-google {
  background: transparent !important;
  color: white !important;
  border: none !important;
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: none !important;
  box-shadow: none !important;
  position: relative;
  overflow: visible !important;
}

/* Clase para eliminar el borde perimetral */
.no-border {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.btn-google:hover {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.btn-google:focus,
.btn-google:active {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.btn-google img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.btn-google span {
  position: relative;
}

/* Mejoras de accesibilidad adicionales */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bs-primary);
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}

/* Media queries para mejorar el soporte móvil */
@media (max-width: 576px) {
  .login-form-container {
    padding: 1.5rem;
    margin: 0 1rem;
  }
  
  .login-title {
    font-size: 1.75rem;
  }
  
  .login-subtitle {
    font-size: 1rem;
  }
  
  .app-header h1 {
    font-size: 1.75rem;
  }
  
  .app-header p {
    font-size: 1rem;
    max-width: 100%;
  }
  
  .welcome-message {
    padding: 1.5rem;
  }
  
  .welcome-message h2 {
    font-size: 1.5rem;
  }
  
  .welcome-message p {
    font-size: 1rem;
    max-width: 100%;
  }
  
  .card-title {
    font-size: 1.2rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
}

/* Estilo específico para el componente de balance y rendimiento */
.balance-card {
  background: linear-gradient(145deg, rgba(25, 25, 25, 0.9), rgba(18, 18, 18, 0.95));
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  height: 100%;
}

.balance-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at top right, rgba(58, 123, 213, 0.07), transparent 70%);
}

.balance-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.balance-label {
  font-size: 1rem;
  color: var(--bs-text-muted);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.performance-indicator {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  margin-top: 1rem;
}

.performance-indicator .icon {
  margin-right: 8px;
  font-size: 1.2rem;
}

.performance-indicator .value {
  font-weight: 600;
}

/* Elemento decorativo para el fondo */
.bg-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
}

.bg-decoration::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 5%;
  width: 40%;
  height: 40%;
  background: radial-gradient(circle, rgba(58, 123, 213, 0.05), transparent 70%);
  border-radius: 50%;
}

.bg-decoration::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 30%;
  height: 30%;
  background: radial-gradient(circle, rgba(0, 192, 118, 0.05), transparent 70%);
  border-radius: 50%;
}

/* Trading View Widget flush with header - Enhanced Zero-Spacing */
.ticker-wrapper {
  line-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: -1px !important; /* Negative position to remove any gap */
  font-size: 0 !important; /* Eliminate any text spacing */
  border: none !important;
  overflow: hidden !important;
  background-color: transparent !important;
  z-index: 10 !important; /* Mantener por encima de otros elementos */
}

#tradingview-widget-container {
  line-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  font-size: 0 !important; /* Eliminate any text spacing */
  border: 0 !important;
}

.tradingview-widget-container,
.tradingview-widget-container__widget,
.tv-flush {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  line-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  font-size: 0 !important; /* Eliminate any text spacing */
  border-top: 0 !important;
  border-bottom: none !important;
}

/* Aplicar estilos para el footer */
/* .app-footer duplicado eliminado - ver línea 1101 para la definición principal */

/* Mejoras para la tabla responsive en móviles */
.table-responsive {
  min-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  white-space: nowrap; /* Evita que el texto rompa las celdas */
}

/* Mejoras adicionales para versiones específicas de iOS */
@supports (-webkit-touch-callout: none) {
  .operations-table-container, .operations-table-scroll, .table-responsive {
    overflow-x: auto !important;
  }
}

/* Mejora para pantallas muy pequeñas en la tabla */
@media (max-width: 320px) {
  .operations-table {
    white-space: nowrap;
    min-width: 500px; /* Asegura una anchura mínima para el contenido */
  }
  
  .operations-table th,
  .operations-table td {
    padding: 0.3rem 0.5rem;
  }
  
  /* Ajustes específicos para la columna de fecha en pantallas muy pequeñas */
  .operations-table td:first-child {
    min-width: 70px;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Particles Canvas Styles */
.particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Additional particle layers with pure CSS */
.particles-layer-3 {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle 1px at 12% 18%, rgba(236, 72, 153, 0.9), transparent 1px),
    radial-gradient(circle 1px at 88% 22%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 34% 42%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 76% 58%, rgba(190, 24, 93, 0.9), transparent 1px),
    radial-gradient(circle 1px at 22% 68%, rgba(236, 72, 153, 0.85), transparent 1px),
    radial-gradient(circle 1px at 64% 78%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 42% 88%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 82% 32%, rgba(190, 24, 93, 0.9), transparent 1px),
    radial-gradient(circle 1px at 18% 52%, rgba(236, 72, 153, 0.85), transparent 1px),
    radial-gradient(circle 1px at 56% 12%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 92% 72%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 28% 38%, rgba(190, 24, 93, 0.9), transparent 1px),
    radial-gradient(circle 1px at 68% 48%, rgba(236, 72, 153, 0.85), transparent 1px),
    radial-gradient(circle 1px at 8% 82%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 48% 28%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 72% 92%, rgba(190, 24, 93, 0.9), transparent 1px),
    radial-gradient(circle 1px at 38% 62%, rgba(236, 72, 153, 0.85), transparent 1px),
    radial-gradient(circle 1px at 84% 8%, rgba(219, 39, 119, 0.8), transparent 1px),
    radial-gradient(circle 1px at 52% 72%, rgba(244, 114, 182, 0.85), transparent 1px),
    radial-gradient(circle 1px at 96% 42%, rgba(190, 24, 93, 0.9), transparent 1px);
  background-size: 400px 400px, 450px 450px, 420px 420px, 480px 480px, 400px 400px,
                   450px 450px, 420px 420px, 480px 480px, 400px 400px, 450px 450px,
                   420px 420px, 480px 480px, 400px 400px, 450px 450px, 420px 420px,
                   480px 480px, 400px 400px, 450px 450px, 420px 420px, 480px 480px;
  animation: particlesLayer3 35s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

@keyframes particlesLayer3 {
  0% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
  25% {
    transform: translate(-2%, 3%);
    opacity: 0.85;
  }
  50% {
    transform: translate(2%, -2%);
    opacity: 0.6;
  }
  75% {
    transform: translate(-3%, -3%);
    opacity: 0.8;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
}

/* Ambient glow effect rosa */
@keyframes ambientGlow {
  0%, 100% {
    box-shadow: 0 0 100px rgba(236, 72, 153, 0.15),
                0 0 200px rgba(219, 39, 119, 0.1);
  }
  50% {
    box-shadow: 0 0 150px rgba(219, 39, 119, 0.15),
                0 0 250px rgba(236, 72, 153, 0.1);
  }
}

/* Estilos para los efectos visuales */

/* Estilos para el efecto de humo en el cursor */
.cursor-smoke-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999999;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  display: block !important;
  background: transparent !important;
  will-change: transform; /* Optimización para rendimiento */
  isolation: isolate; /* Asegura que el efecto se renderiza apropiadamente */
  /* Asegura que el contenedor no es afectado por cambios en la navegación */
  transition: none !important;
}

.cursor-trail {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 0.8;
  animation: smoke 1.5s ease-out forwards;
  mix-blend-mode: screen;
  filter: blur(1px);
  pointer-events: none;
  z-index: 10000;
  will-change: opacity, transform; /* Mejora el rendimiento de la animación */
  contain: layout style paint; /* Mejora aún más el rendimiento en producción */
}

@keyframes smoke {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2) translate(0, -10px);
    opacity: 0;
  }
}

/* Estilos para el fondo animado del login */
.animated-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    225deg,
    var(--bs-dark) 0%,
    var(--bs-epic-purple-dark) 25%,
    var(--bs-dark) 50%,
    var(--bs-epic-purple) 75%,
    var(--bs-dark) 100%
  );
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  overflow: hidden;
}

.animated-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width=%2780%27 height=%2780%27 viewBox=%270 0 80 80%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cg fill=%27%23ffffff%27 fill-opacity=%270.03%27%3E%3Cpath d=%27M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z%27 /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
}

.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.login-card {
  backdrop-filter: blur(10px);
  background-color: rgba(15, 15, 15, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.3s ease;
}

/* Estilos para el botón de Google - sin efectos */
.btn-google {
  position: relative;
  z-index: 5;
  transition: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.btn-google:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.btn-google:active {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Efecto de partículas flotantes */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: -1;
  will-change: transform, opacity;
  transition: opacity 0.2s ease;
  animation: twinkle 4s infinite alternate;
}

@keyframes twinkle {
  0% {
    opacity: var(--base-opacity, 0.5);
  }
  50% {
    opacity: calc(var(--base-opacity, 0.5) * 0.5);
  }
  100% {
    opacity: var(--base-opacity, 0.5);
  }
}

/* Estilos para el contenedor de notificaciones */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 350px;
  width: 100%;
}

/* Estilos para las notificaciones individuales */
.notification-banner {
  margin-bottom: 10px;
  border-left: 4px solid;
  animation: slideInRight 0.4s ease-out forwards, fadeOut 0.5s ease-in forwards 5s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 1;
}

.notification-banner.alert-success {
  border-left-color: #198754;
  background-color: rgba(25, 135, 84, 0.9);
}

.notification-banner.alert-danger {
  border-left-color: #dc3545;
  background-color: rgba(220, 53, 69, 0.9);
}

.notification-banner.alert-warning {
  border-left-color: #ffc107;
  background-color: rgba(255, 193, 7, 0.9);
}

.notification-banner.alert-info {
  border-left-color: #0dcaf0;
  background-color: rgba(13, 202, 240, 0.9);
}

/* Animaciones de entrada y salida */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/* Custom styles for Dashboard components */

/* Override card header hover effects for dashboard cards */
.dashboard-card:hover {
  transform: none !important;
  transition: none !important;
}

.dashboard-card .card-header {
  background-color: var(--bs-card-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  font-weight: 500;
}

/* Estilos para las tarjetas de información */
.info-card {
  height: 100%;
}

.info-card .value {
  font-size: 1.5rem;
  font-weight: 600;
}

/* Estilos para las tablas dentro del dashboard */
.dashboard-table {
  color: var(--bs-body-color);
}

.dashboard-table thead th {
  border-bottom-width: 1px;
  background-color: rgba(0, 0, 0, 0.2);
}

/* Performance indicators */
.performance-positive {
  color: var(--bs-success) !important;
}

.performance-negative {
  color: var(--bs-danger) !important;
}

/* Animation effect for loading states */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}