@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: 80px;
  right: 30px;
  z-index: 10000;
  max-width: 420px;
  width: 100%;
  pointer-events: none;
}

/* Estilos para las notificaciones individuales */
.notification-banner {
  margin-bottom: 12px;
  border-radius: 12px;
  border-left: 5px solid;
  position: relative;
  overflow: hidden;
  animation: slideInRight 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, 
             pulse 0.3s ease-in 0.5s,
             fadeOut 0.6s ease-in forwards 7.4s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 
              0 2px 8px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 1;
  backdrop-filter: blur(20px) saturate(180%);
  pointer-events: auto;
  padding: 16px 20px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease;
}

.notification-banner:hover {
  transform: translateX(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 
              0 6px 16px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.notification-banner.alert-success {
  border-left-color: #10b981;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 10, 0.95) 100%);
  color: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.notification-banner.alert-success::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
  border-radius: 12px;
  pointer-events: none;
}

.notification-banner.alert-danger {
  border-left-color: #ef4444;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 10, 0.95) 100%);
  color: #ffffff;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.notification-banner.alert-danger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, transparent 100%);
  border-radius: 12px;
  pointer-events: none;
}

.notification-banner.alert-warning {
  border-left-color: #f59e0b;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 10, 0.95) 100%);
  color: #ffffff;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.notification-banner.alert-warning::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, transparent 100%);
  border-radius: 12px;
  pointer-events: none;
}

.notification-banner.alert-info {
  border-left-color: #3b82f6;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(10, 10, 10, 0.95) 100%);
  color: #ffffff;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.notification-banner.alert-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
  border-radius: 12px;
  pointer-events: none;
}

/* Estilos para iconos y texto */
.notification-banner .bi {
  font-size: 1.3rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.notification-banner small {
  font-size: 0.85rem;
  opacity: 0.95;
  font-weight: 500;
}

.notification-banner .btn-close-white {
  opacity: 0.9;
  transition: opacity 0.2s, transform 0.2s;
}

.notification-banner .btn-close-white:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Animaciones de entrada y salida */
@keyframes slideInRight {
  from {
    transform: translateX(450px) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100px) scale(0.95);
  }
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .notification-container {
    top: 70px;
    right: 15px;
    left: 15px;
    max-width: calc(100% - 30px);
  }
  
  .notification-banner {
    padding: 14px 16px;
    font-size: 0.9rem;
  }
}

/* Estilos profesionales para detalles de operaciones */
.operation-details {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
}

.operation-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.operation-badge.buy {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.operation-badge.sell {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.operation-price {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
}

.operation-price strong {
  color: #ffffff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* src/styles/admin.css - Tema oscuro consistente con el dashboard */

/* ==================== LAYOUT PRINCIPAL ==================== */
.admin-panel {
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background: transparent;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.admin-unauthorized {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: transparent;
  color: white;
  text-align: center;
}

.admin-unauthorized h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.admin-unauthorized p {
  font-size: 1.2rem;
  opacity: 0.9;
  color: #a0a0a0;
}

/* ==================== HEADER ==================== */
.admin-header {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.admin-header h1 {
  margin: 0 0 1.5rem 0;
  font-size: 2.5rem;
  color: #ffffff;
  font-weight: 700;
}

/* ==================== STATISTICS ==================== */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.admin-stat-card {
  background-color: #0a0a0a !important;
  padding: 1rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.admin-stat-card:hover {
  border-color: #6c757d !important;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

.admin-stat-label {
  color: #a0a0a0;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-stat-value {
  color: #00c076;
  font-size: 2rem;
  font-weight: bold;
}

/* ==================== TABS ==================== */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

.admin-tabs::-webkit-scrollbar {
  height: 6px;
}

.admin-tabs::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 10px;
}

.admin-tabs::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 10px;
}

.admin-tab {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
  box-shadow: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #00c076;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.admin-tab.active {
  background: rgba(0, 192, 118, 0.1);
  color: #ffffff;
  border-color: #00c076;
  box-shadow: 0 4px 15px rgba(0, 192, 118, 0.2);
}

/* ==================== CONTENT ==================== */
.admin-content {
  background: transparent;
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.8);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.admin-loading,
.admin-error {
  text-align: center;
  padding: 3rem;
  font-size: 1.2rem;
  color: #ffffff;
}

.admin-error {
  color: #dc3545;
}

/* ==================== ACTIONS ==================== */
.admin-actions {
  margin-bottom: 0.5rem;
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

.admin-actions input[type="text"] {
  flex: 1;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  background-color: transparent !important;
  color: #ffffff;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.admin-actions input[type="text"]:focus {
  border-color: #00c076;
  background-color: rgba(0, 192, 118, 0.05) !important;
  box-shadow: 0 0 0 2px rgba(0, 192, 118, 0.2);
}

.btn-create {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid #6c757d;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
  animation: none !important;
}

.btn-create:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #adb5bd;
  transform: none;
  box-shadow: none;
}

/* ==================== TABLE ==================== */
.admin-table-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 320px);
  min-height: 0;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  background-color: rgba(13, 10, 12, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background-color: rgba(13, 10, 12, 0.25);
}

.admin-table thead {
  background-color: rgba(13, 10, 12, 0.25);
  color: #d0d0d0;
}

.admin-table th {
  padding: 1rem 0.8rem;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  border-bottom: none;
  color: #d0d0d0;
}

.admin-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
  transition: all 0.2s ease-in-out;
}

.admin-table tbody tr:hover {
  background-color: rgba(30, 30, 30, 0.5) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.admin-table td {
  padding: 1rem 0.8rem;
  font-size: 0.925rem;
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.8);
}

.admin-table td.bold {
  font-weight: 600;
  color: #00c076;
}

.admin-table td.truncate {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table td.symbols {
  max-width: 200px;
  font-size: 0.875rem;
}

.admin-table td.positive {
  color: #00c076;
  font-weight: 600;
}

.admin-table td.negative {
  color: #dc3545;
  font-weight: 600;
}

/* ==================== BADGES ==================== */
.status-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.status-badge.active {
  background: rgba(0, 192, 118, 0.2);
  color: #00c076;
  border: 1px solid #00c076;
}

.status-badge.inactive {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
  border: 1px solid #dc3545;
}

.action-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.action-badge.buy {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
  border: 1px solid #dc3545;
}

.action-badge.sell {
  background: rgba(0, 192, 118, 0.2);
  color: #00c076;
  border: 1px solid #00c076;
}

.win-loss {
  font-weight: 600;
  color: #00c076;
}

/* ==================== TABLE ACTIONS ==================== */
.table-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-edit,
.btn-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  color: #ffffff;
}

.btn-edit:hover {
  background: rgba(13, 110, 253, 0.2);
  color: #0d6efd;
  transform: scale(1.1);
}

.btn-delete:hover {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
  transform: scale(1.1);
}

/* ==================== MODAL ==================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: fadeIn 0.3s ease;
}

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

.modal-content {
  background: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease;
  border: 1px solid #343a40;
}

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

.modal-header {
  background: rgba(18, 18, 18, 0.95) !important;
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 16px 16px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #343a40;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #ffffff;
}

.modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.modal-body {
  padding: 2rem;
  background: rgba(18, 18, 18, 0.95) !important;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #ffffff;
  font-size: 0.925rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.875rem;
  border: 1px solid #495057;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  font-family: inherit;
  background-color: rgba(20, 20, 20, 0.8) !important;
  color: #ffffff;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #00c076;
  box-shadow: 0 0 0 3px rgba(0, 192, 118, 0.1);
  background-color: rgba(30, 30, 30, 0.9) !important;
}

.form-group input::placeholder {
  color: #6c757d;
}

.form-group input:disabled {
  background-color: rgba(30, 30, 30, 0.5) !important;
  cursor: not-allowed;
  color: #6c757d;
}

.form-group.checkbox {
  display: flex;
  align-items: center;
}

.form-group.checkbox label {
  margin-bottom: 0;
  margin-left: 0.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.form-group.checkbox input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
  cursor: pointer;
  transform: scale(1.2);
}

.modal-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid #343a40;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  background: rgba(18, 18, 18, 0.95) !important;
}

.btn-cancel,
.btn-save {
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-cancel {
  background: #495057;
  color: #ffffff;
}

.btn-cancel:hover {
  background: #5a6268;
}

.btn-save {
  background: #00c076;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 192, 118, 0.3);
}

.btn-save:hover {
  background: #00a863;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 192, 118, 0.4);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .admin-panel {
    padding: 1rem;
  }

  .admin-header {
    padding: 1.5rem;
  }

  .admin-header h1 {
    font-size: 1.75rem;
  }

  .admin-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .admin-tab {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .admin-content {
    padding: 1rem;
  }

  .admin-table {
    font-size: 0.825rem;
  }

  .admin-table th,
  .admin-table td {
    padding: 0.75rem;
  }

  .modal-content {
    max-width: 95%;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }

  .btn-cancel,
  .btn-save {
    padding: 0.75rem 1.5rem;
    font-size: 0.925rem;
  }
}

@media (max-width: 480px) {
  .admin-stats {
    grid-template-columns: 1fr;
  }

  .admin-stat-card {
    padding: 1rem;
  }

  .admin-stat-value {
    font-size: 1.5rem;
  }
  
  .admin-table th,
  .admin-table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.75rem;
  }
  
  .admin-actions input {
    font-size: 0.85rem !important;
    padding: 0.65rem 1rem !important;
  }
  
  .btn-create {
    padding: 0.65rem 1rem !important;
    font-size: 0.85rem !important;
  }
}

/* ==================== PAGINATION STYLING ==================== */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1rem;
  background-color: rgba(10, 10, 10, 0.85);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  flex-wrap: wrap;
  gap: 1rem;
}

.pagination-info {
  color: #a0a0a0;
  font-size: 0.9rem;
  white-space: nowrap;
}

.pagination-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .pagination-container {
    padding: 0.75rem;
    gap: 0.75rem;
  }
  
  .pagination-info {
    font-size: 0.8rem;
    width: 100%;
    text-align: center;
  }
  
  .pagination-buttons {
    width: 100%;
    justify-content: center;
    gap: 0.35rem;
  }
  
  .pagination-buttons button {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.8rem !important;
    min-width: 35px !important;
  }
  
  .pagination-buttons button:first-child,
  .pagination-buttons button:last-child {
    padding: 0.4rem 0.5rem !important;
  }
}

@media (max-width: 480px) {
  .pagination-container {
    padding: 0.5rem;
  }
  
  .pagination-info {
    font-size: 0.75rem;
  }
  
  .pagination-buttons {
    gap: 0.25rem;
  }
  
  .pagination-buttons button {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-width: 30px !important;
  }
  
  .pagination-buttons span {
    font-size: 0.75rem;
    padding: 0 0.1rem;
  }
}

/* ==================== MOBILE RESPONSIVE ==================== */

/* Ocultar estadísticas móviles en desktop */
.admin-stats-mobile {
  display: none !important;
}

/* Mostrar sidebar en desktop */
.admin-stats-sidebar {
  display: flex !important;
}

@media (max-width: 992px) {
  /* Mostrar estadísticas móviles */
  .admin-stats-mobile {
    display: grid !important;
  }

  /* Ocultar sidebar en móvil */
  .admin-stats-sidebar {
    display: none !important;
  }

  .admin-panel {
    padding: 0.5rem;
    height: auto;
    min-height: 100vh;
  }

  .admin-tabs {
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
    min-width: auto;
  }

  .admin-content {
    padding: 0.5rem;
    border-radius: 8px;
  }

  .admin-actions {
    margin-bottom: 0.5rem;
    gap: 0.5rem;
    flex-direction: column;
  }

  .admin-actions input[type="text"] {
    padding: 0.5rem;
    font-size: 0.85rem;
  }

  .admin-actions button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem;
    width: 100%;
  }

  .admin-table-container {
    border-radius: 8px;
    font-size: 0.75rem;
  }

  .admin-table {
    font-size: 0.75rem;
  }

  .admin-table th,
  .admin-table td {
    padding: 0.5rem 0.35rem;
    font-size: 0.7rem;
  }

  .admin-table th {
    white-space: nowrap;
  }

  .admin-table td {
    word-break: break-word;
  }

  .admin-table-actions {
    gap: 0.25rem;
  }

  .admin-table-actions button {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.7rem !important;
  }

  .admin-stat-card {
    padding: 0.75rem;
  }

  .admin-stat-label {
    font-size: 0.7rem;
  }

  .admin-stat-value {
    font-size: 1.2rem !important;
  }
}

@media (max-width: 576px) {
  .admin-stats-mobile {
    gap: 0.35rem !important;
    margin-bottom: 0.35rem !important;
  }

  .admin-panel {
    padding: 0.25rem;
  }

  .admin-tabs {
    gap: 0.15rem;
    margin-bottom: 0.25rem;
  }

  .admin-tab {
    padding: 0.4rem 0.5rem;
    font-size: 0.65rem;
  }

  .admin-content {
    padding: 0.35rem;
  }

  .admin-actions {
    margin-bottom: 0.35rem;
    gap: 0.35rem;
  }

  .admin-actions input[type="text"] {
    padding: 0.4rem;
    font-size: 0.75rem;
  }

  .admin-actions button {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem;
  }

  .admin-table th,
  .admin-table td {
    padding: 0.35rem 0.25rem;
    font-size: 0.65rem;
  }

  .admin-table-actions button {
    padding: 0.2rem 0.3rem !important;
    font-size: 0.65rem !important;
  }

  .admin-stat-card {
    padding: 0.5rem;
  }

  .admin-stat-label {
    font-size: 0.65rem;
  }

  .admin-stat-value {
    font-size: 1rem !important;
  }

  /* Filtros de fecha más compactos */
  .admin-actions input[type="date"] {
    padding: 0.35rem;
    font-size: 0.7rem;
  }

  /* Modal más compacto */
  .modal-content {
    padding: 0.75rem;
  }

  .modal-content h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }

  .modal-content input,
  .modal-content select {
    padding: 0.4rem;
    font-size: 0.75rem;
  }

  .modal-actions {
    gap: 0.5rem;
  }

  .modal-actions button {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem;
  }
}

/* ==================== SCROLLBAR STYLING ==================== */
.admin-table-container::-webkit-scrollbar,
.modal-content::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.admin-table-container::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 10px;
}

.admin-table-container::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 10px;
}

.admin-table-container::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* Custom styles for Dashboard components */

/* Asegurar que todo sea fluido y responsivo */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Prevenir overflow horizontal en móviles */
body {
  overflow-x: hidden;
}

.container-fluid,
.container {
  overflow-x: hidden;
}

/* 🎨 ANIMACIONES Y EFECTOS INTERACTIVOS */

/* Tarjetas de estadísticas con efecto hover suave */
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
  cursor: pointer;
}

.stat-card .card-body {
  padding: 0.75rem !important;
  display: flex;
  align-items: center;
  min-height: 70px;
}

.stat-card .card-body > div {
  width: 100%;
}

.stat-card h6 {
  font-size: 0.65rem !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.2;
}

.stat-card .fs-2 {
  font-size: 1.2rem !important;
  line-height: 1.3;
}

.stat-card p {
  margin-bottom: 0 !important;
}

.stat-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 192, 118, 0.15) !important;
}

.stat-card .stat-icon {
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card:hover .stat-icon svg {
  transform: scale(1.1) rotate(5deg);
}

/* Botones con efecto ripple y hover mejorado */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Tarjetas de cuenta con animación de expansión */
.dashboard-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.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;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dashboard-card .card-header:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Iconos con animación de pulso */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.animate-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Números con animación de contador */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fs-2 {
  animation: countUp 0.5s ease-out;
}

/* Tablas con hover effect */
.table tbody tr {
  transition: all 0.2s ease;
}

.table tbody tr:hover {
  background-color: rgba(0, 192, 118, 0.05) !important;
  transform: translateX(5px);
}

/* Badges con efecto glow */
.badge {
  transition: all 0.3s ease;
}

.badge:hover {
  box-shadow: 0 0 15px currentColor;
  transform: scale(1.1);
}

/* Override card header hover effects for dashboard cards */

/* 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; }
}

/* Estilos para modales del Dashboard - fondo consistente con el resto de la app */
.modal-content.bg-dark {
  background: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(10px) !important;
}

.modal-content.bg-dark .modal-header {
  background: rgba(18, 18, 18, 0.95) !important;
}

.modal-content.bg-dark .modal-body {
  background: rgba(18, 18, 18, 0.95) !important;
}

.modal-content.bg-dark .modal-footer {
  background: rgba(18, 18, 18, 0.95) !important;
}

/* Inputs dentro de modales del Dashboard con fondo consistente */
.modal-content.bg-dark .form-control {
  background-color: rgba(20, 20, 20, 0.8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-content.bg-dark .form-control:focus {
  background-color: rgba(30, 30, 30, 0.9) !important;
  color: #ffffff !important;
  border-color: #00c076;
  box-shadow: 0 0 0 0.2rem rgba(0, 192, 118, 0.2);
}

.modal-content.bg-dark .form-control:disabled {
  background-color: rgba(30, 30, 30, 0.5) !important;
  color: #6c757d !important;
}

.modal-content.bg-dark .form-select {
  background-color: rgba(20, 20, 20, 0.8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-content.bg-dark .form-select:focus {
  background-color: rgba(30, 30, 30, 0.9) !important;
  color: #ffffff !important;
  border-color: #00c076;
  box-shadow: 0 0 0 0.2rem rgba(0, 192, 118, 0.2);
}

/* Forzar fondo consistente para todos los form-control y form-select dentro de modales */
.modal-dialog .bg-dark .form-control,
.modal-dialog .bg-dark .form-select,
.modal-dialog .bg-dark input.form-control,
.modal-dialog .bg-dark select.form-select {
  background-color: rgba(20, 20, 20, 0.8) !important;
  color: #ffffff !important;
}

/* Ticker de logros - Animaciones fluidas y responsivas */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.achievements-ticker {
  background: transparent;
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* Forzar renderización inicial */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.ticker-track {
  animation-timing-function: linear !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Forzar inicio de animación */
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important;
}

/* Pausar animación solo en hover en pantallas grandes */
@media (min-width: 768px) {
  .ticker-track:hover {
    animation-play-state: paused;
  }
  
  /* Gráfico TradingView tamaño desktop */
  .chart-container {
    height: 600px;
    width: 100%;
    padding: 0;
  }
}

/* Optimización para móviles */
@media (max-width: 767px) {
  .achievements-ticker {
    height: 40px !important;
    margin-bottom: 0.5rem !important;
    /* Forzar visibilidad y renderización */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .ticker-track {
    gap: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    /* Asegurar que la animación se ejecute */
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
    display: inline-flex !important;
  }
  
  /* Forzar renderizado de hardware en móviles */
  .ticker-track,
  .ticker-track > div {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  
  /* Asegurar que los items del ticker sean más compactos en móviles */
  .ticker-track > div {
    padding: 0 8px !important;
    gap: 5px !important;
    border-left-width: 1px !important;
    padding-left: 8px !important;
  }
  
  /* Ajustar tamaños de fuente para mejor legibilidad */
  .ticker-track span {
    font-size: 0.6rem !important;
  }
  
  /* Iconos más pequeños en móviles */
  .ticker-track svg {
    width: 11px !important;
    height: 11px !important;
  }
  
  /* TABLA DE OPERACIONES RECIENTES - RESPONSIVE */
  .dashboard-content-container {
    position: relative !important;
    height: auto !important;
    margin-bottom: 1rem;
  }
  
  /* Card de operaciones recientes */
  .dashboard-content-container .card {
    margin-bottom: 0.5rem;
  }
  
  /* Header de la tabla más compacto */
  .dashboard-content-container .card-header {
    padding: 10px 12px !important;
  }
  
  .dashboard-content-container .card-header h5 {
    font-size: 0.85rem !important;
  }
  
  .dashboard-content-container .card-header svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Badge "Hoy" más pequeño */
  .dashboard-content-container .card-header .badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
  }
  
  /* Selectores de filtro más compactos */
  .dashboard-content-container .form-select {
    font-size: 0.75rem !important;
    padding: 6px 10px !important;
  }
  
  /* IMPORTANTE: NO aplicar flex-direction column a los filtros */
  /* Solo aplicar a otros elementos que NO sean operations-filters-container */
  .dashboard-content-container .card-header > div:last-child:not(.operations-filters-container) {
    flex-direction: column !important;
    gap: 6px !important;
  }
  
  /* FILTROS TABLA OPERACIONES - FORZAR HORIZONTAL EN MÓVIL CON MÁXIMA PRIORIDAD */
  .dashboard-content-container .card-header .operations-filters-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0.5rem !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .dashboard-content-container .card-header .operations-filters-container .form-select {
    min-width: 120px !important;
    max-width: 180px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    margin-bottom: 0 !important;
  }
  
  /* Fallback para selectores antiguos sin clase específica */
  .dashboard-content-container .card-header .d-flex.gap-2 {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.5rem !important;
  }
  
  .dashboard-content-container .card-header .d-flex.gap-2 .form-select {
    min-width: 120px !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }
  
  /* Body de la tabla */
  .dashboard-content-container .card-body {
    max-height: 450px !important;
    height: auto !important;
  }
  
  /* Filas de operaciones más compactas en móvil */
  .operation-row {
    padding: 10px 8px !important;
    min-height: auto !important;
  }
  
  /* Layout de operaciones en móvil - Stack vertical */
  .operation-content {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  
  /* Sección izquierda (Cuenta + Símbolo + Acción) */
  .operation-left {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  
  /* Sección centro (Precio × Cantidad) */
  .operation-center {
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    font-size: 0.75rem !important;
  }
  
  /* Sección derecha (Grid + Profit + Fecha) */
  .operation-right {
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  /* Badges más pequeños */
  .operation-row .badge {
    font-size: 0.65rem !important;
    padding: 3px 6px !important;
  }
  
  /* Texto más pequeño pero legible */
  .operation-row span {
    font-size: 0.75rem !important;
  }
  
  /* Profit destacado */
  .operation-right > span:nth-child(2) {
    font-size: 0.95rem !important;
  }
  
  /* Vista agrupada por día en móvil */
  .operation-row .d-flex.align-items-center.gap-2 {
    flex-wrap: wrap !important;
  }
  
  /* Para la vista agrupada por día */
  .operation-row .calendar3 {
    width: 100% !important;
    margin-bottom: 4px !important;
  }
  
  /* Desglose de ventas por cuenta - responsive móvil */
  .operation-row .d-flex.flex-column {
    gap: 6px !important;
  }
  
  .operation-row .d-flex.flex-column > div:first-child {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  
  /* Primera parte: Fecha */
  .operation-row .d-flex.flex-column > div:first-child > div:first-child {
    width: 100% !important;
  }
  
  /* Segunda parte: Badges BUY/SELL y Total */
  .operation-row .d-flex.flex-column > div:first-child > div:nth-child(2) {
    width: 100% !important;
    justify-content: flex-start !important;
    padding-left: 22px !important;
  }
  
  /* Tercera parte: Profit */
  .operation-row .d-flex.flex-column > div:first-child > div:last-child {
    width: 100% !important;
    padding-left: 22px !important;
    text-align: left !important;
  }
  
  /* Desglose de ventas por cuenta - centrado */
  .operation-row .d-flex.flex-wrap.justify-content-center {
    justify-content: center !important;
    gap: 4px !important;
    padding-left: 0 !important;
  }
  
  .operation-row .d-flex.flex-wrap.justify-content-center > div {
    font-size: 0.6rem !important;
  }
  
  .operation-row .d-flex.flex-wrap.justify-content-center .badge {
    font-size: 0.55rem !important;
    padding: 1px 3px !important;
  }
  
  /* GRÁFICO TRADINGVIEW - RESPONSIVE MÓVIL */
  .chart-container {
    height: 400px !important;
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Card del gráfico más compacta */
  .chart-container + div,
  div[style*="height: 600px"] {
    height: 400px !important;
  }
}

/* Estilos para pantallas muy pequeñas (menos de 400px) */
@media (max-width: 400px) {
  .ticker-track {
    gap: 8px !important;
  }
  
  .ticker-track > div {
    padding: 0 6px !important;
    gap: 3px !important;
  }
  
  .ticker-track span {
    font-size: 0.55rem !important;
  }
  
  .ticker-track svg {
    width: 10px !important;
    height: 10px !important;
  }
  
  /* Gráfico aún más compacto en pantallas muy pequeñas */
  .chart-container {
    height: 300px !important;
  }
  
  /* Tabla aún más compacta */
  .dashboard-content-container .card-header {
    padding: 8px 10px !important;
  }
  
  .dashboard-content-container .card-header h5 {
    font-size: 0.8rem !important;
  }
  
  .dashboard-content-container .form-select {
    font-size: 0.7rem !important;
    padding: 5px 8px !important;
  }
  
  /* CRÍTICO: Forzar filtros horizontales en pantallas MUY pequeñas */
  .dashboard-content-container .card-header .operations-filters-container,
  .operations-filters-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.35rem !important;
  }
  
  .dashboard-content-container .card-header .operations-filters-container .form-select,
  .operations-filters-container .form-select {
    min-width: 95px !important;
    max-width: 130px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
  
  .operation-row {
    padding: 8px 6px !important;
  }
  
  .operation-row .badge {
    font-size: 0.6rem !important;
    padding: 2px 5px !important;
  }
  
  .operation-row span {
    font-size: 0.7rem !important;
  }
  
  .operation-center {
    font-size: 0.7rem !important;
  }
}

/* Optimización de tarjetas stat para móviles */
@media (max-width: 576px) {
  .stat-card .card-body {
    padding: 0.5rem !important;
    min-height: 60px;
  }
  
  .stat-card h6 {
    font-size: 0.6rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .stat-card .fs-2 {
    font-size: 1rem !important;
  }
  
  .stat-card .stat-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Desactivar hover effects en móviles */
  .stat-card:hover {
    transform: none;
    box-shadow: none !important;
  }
}

/* =========================================================
   REGLA GLOBAL ULTRA ESPECÍFICA PARA FILTROS HORIZONTALES
   Máxima prioridad en TODAS las resoluciones
   ========================================================= */
.operations-filters-container,
div.operations-filters-container,
.dashboard-content-container .operations-filters-container,
.dashboard-content-container .card-header .operations-filters-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 0.5rem !important;
}

.operations-filters-container .form-select,
div.operations-filters-container .form-select,
.dashboard-content-container .operations-filters-container .form-select,
.dashboard-content-container .card-header .operations-filters-container .form-select {
  flex: 0 0 auto !important;
  min-width: 120px !important;
  max-width: 180px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-bottom: 0 !important;
}

/* Optimización para tablets */
@media (min-width: 577px) and (max-width: 991px) {
  .stat-card .card-body {
    padding: 0.65rem !important;
    min-height: 65px;
  }
  
  .stat-card h6 {
    font-size: 0.63rem !important;
  }
  
  .stat-card .fs-2 {
    font-size: 1.1rem !important;
  }
}