/* ==========================================================================
   SubeYa! - Estilos Bursátiles y Efectos Visuales Especiales
   Bolsa de Santiago (BCS / IPSA)
   ========================================================================== */

/* Fondo de cuadrícula sutil estilo terminal de trading (TradingView / Bloomberg) */
body {
  background-color: #080C14;
  background-image: 
    radial-gradient(rgba(30, 41, 59, 0.45) 1px, transparent 0),
    linear-gradient(to bottom, rgba(10, 14, 23, 0.95), rgba(8, 12, 20, 1));
  background-size: 24px 24px, 100% 100%;
  background-attachment: fixed;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0a0e17;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Ticker Tape horizontal infinito */
.ticker-content {
  display: inline-flex;
  animation: tickerScroll 45s linear infinite;
}
.ticker-content:hover {
  animation-play-state: paused;
}

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

/* Efecto Flash cuando el precio cambia */
@keyframes flashUptick {
  0% {
    background-color: rgba(0, 230, 118, 0.4);
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.6);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

@keyframes flashDowntick {
  0% {
    background-color: rgba(255, 51, 102, 0.4);
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.6);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

.flash-up {
  animation: flashUptick 1.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.flash-down {
  animation: flashDowntick 1.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* Resplandor Neón para el estado de Alerta SubeYa! (Límite Superior alcanzado) */
@keyframes neonPulseGreen {
  0%, 100% {
    border-color: rgba(0, 230, 118, 0.8);
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.25), inset 0 0 10px rgba(0, 230, 118, 0.1);
  }
  50% {
    border-color: rgba(0, 230, 118, 0.3);
    box-shadow: 0 0 5px rgba(0, 230, 118, 0.1), inset 0 0 0px transparent;
  }
}

.card-alert-up {
  border-color: #00E676 !important;
  animation: neonPulseGreen 2s infinite ease-in-out;
}

/* Resplandor Alerta Stop Loss / Límite Inferior */
@keyframes neonPulseRed {
  0%, 100% {
    border-color: rgba(255, 51, 102, 0.8);
    box-shadow: 0 0 20px rgba(255, 51, 102, 0.25), inset 0 0 10px rgba(255, 51, 102, 0.1);
  }
  50% {
    border-color: rgba(255, 51, 102, 0.3);
    box-shadow: 0 0 5px rgba(255, 51, 102, 0.1), inset 0 0 0px transparent;
  }
}

.card-alert-down {
  border-color: #FF3366 !important;
  animation: neonPulseRed 2s infinite ease-in-out;
}

/* Barra de Medidor de Rango Visual (Range Gauge) */
.range-track {
  position: relative;
  height: 8px;
  background: #1a2233;
  border-radius: 9999px;
  overflow: visible;
}

.range-safe-fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), rgba(0, 230, 118, 0.35));
  border-radius: 9999px;
  transition: all 0.4s ease;
}

.range-current-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s;
  z-index: 10;
}

/* Marcadores de límite inferior y superior */
.range-limit-marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background-color: #64748b;
  z-index: 5;
}

/* Glassmorphism para tarjetas */
.glass-panel {
  background: rgba(18, 24, 36, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Transiciones de botones y tabs */
.active-tab {
  background-color: #1E293B;
  color: #00E676;
  font-weight: 700;
  border: 1px solid rgba(0, 230, 118, 0.2);
}

/* Toasts animados */
.toast-slide-in {
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-slide-out {
  animation: toastOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}

/* Número tipográfico financiero */
.financial-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}