/* =========================
   Smart Trading - Estilos (Light)
   ========================= */

/* Paleta clara con buen contraste */
:root{
  --bg: #f7f9fc;
  --bg-2: #ffffff;
  --text: #0f172a;          /* azul oscuro legible */
  --muted: #334155;         /* gris/azulado medio */
  --primary: #0ea5e9;       /* azul claro */
  --primary-2:#6366f1;      /* índigo */
  --accent: #06b6d4;
  --card: rgba(15, 23, 42, .03);
  --glass: rgba(255,255,255, .9);
  --border: rgba(2, 6, 23, .08);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

html, body {
  scroll-behavior: smooth;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utilidades */
.text-gradient{
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Navbar claro y sticky */
.navbar{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.85) !important;
  border-bottom: 1px solid var(--border);
  transition: background .25s ease, box-shadow .25s ease;
}
.navbar.scrolled{
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
}
.navbar .navbar-brand span{ color: var(--text); }
.navbar .nav-link{
  color: var(--muted);
}
.navbar .nav-link:hover{ color: var(--text); }
.nav-link.active{
  color: var(--text) !important;
}
.nav-link.active::after{
  content:""; position:absolute; left:8px; right:8px; bottom:6px; height:2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border-radius: 4px;
}

/* Hero */
header#inicio{ background: var(--bg); }
header#inicio .lead{ color: var(--muted); }

/* Cards y secciones */
.card{
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 1rem;
}
.bg-body-tertiary{
  background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0)) !important;
}

/* CTA cover: imagen de fondo con overlay suave para texto oscuro */
.cta-cover{
  position: relative;
  background: url('/assets/img/banner-cta-1400x600.jpg') center/cover no-repeat;
  border: 1px solid var(--border);
  color: #0b1220;
}
.cta-cover::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgb(25, 66, 104), rgba(25, 41, 75, 0.705));
  border-radius: inherit;
}
.cta-cover > *{ position: relative; }

/* Simulador */
#simulador .display-5{
  letter-spacing: .3px;
}
#simulador .display-5.positive{ color: #16a34a; }
#simulador .display-5.negative{ color: #dc2626; }

/* TradingView widget contenedor */
#tv-advanced-chart{
  border: 1px solid var(--border);
  border-radius: 12px;
  
  background: #fff;
}

/* Botones */
.btn-primary{
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border: none;
}
.btn-outline-light{
  color: var(--text);
  border-color: var(--border);
}
.btn-outline-light:hover{
  background: #ffffff;
  border-color: transparent;
}
.btn-outline-primary{
  border: 1px solid var(--primary);
  color: var(--text);
}
.btn-outline-primary:hover{
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border-color: transparent;
  color: #fff;
}

/* Formularios (fondo claro, alto contraste) */
.form-label{ color: var(--muted); }
.form-control, .form-select{
  background: #ffffff;
  border: 1px solid #dbe3f0;
  color: var(--text);
}
.form-control::placeholder, .form-select::placeholder{
  color: #94a3b8; /* placeholder visible en claro */
}
.form-control:focus, .form-select:focus{
  outline: none; box-shadow: 0 0 0 .25rem rgba(14,165,233,.20);
  border-color: var(--primary);
}

/* Ticker strip claro */
.bg-dark-subtle{
  background: #ffffff !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Footer links */
.btn.btn-link{
  color: var(--muted);
  text-decoration: none;
}
.btn.btn-link:hover{
  color: var(--text);
}

/* Botón flotante “subir” */
.to-top{
  position: fixed; right: 18px; bottom: 18px; z-index: 999;
  width: 50px; height: 50px; border-radius: 14px;
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .2s ease;
}
.to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }

/* Micro-animaciones */
.fade-in-up{
  animation: fadeInUp .6s ease both;
}
@keyframes fadeInUp{
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive tweaks */
@media (max-width: 992px){
  .navbar .navbar-brand span{ font-size: 1rem; }
  .display-5{ font-size: 2rem; }
}

#pnl.positive { color: #16a34a !important; }
#pnl.negative { color: #dc2626 !important; }
#pnlPct { font-size: 1.2rem; font-weight: 600; }

/* === Toasts elegantes === */
#toast-portal{
  position: fixed; right: 18px; bottom: 18px; z-index: 2000;
  display: grid; gap: 10px;
}
.st-toast{
  min-width: 300px;
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(2,6,23,.18);
  overflow: hidden;
  background: #ffffff;
}
.st-toast .st-head{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px; font-weight: 700;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color: #fff;
}
.st-toast.success .st-head{ background: linear-gradient(90deg, #16a34a, #22c55e); }
.st-toast.error   .st-head{ background: linear-gradient(90deg, #ef4444, #f43f5e); }
.st-toast .st-body{
  padding: 12px; color: var(--muted);
}
.st-toast .st-icon{
  width: 28px; height: 28px; display:grid; place-items:center;
  background: rgba(255,255,255,.18); border-radius: 8px;
}

#trade-history table thead th { white-space: nowrap; }
#trade-history table td { white-space: nowrap; }
#pnlSpark { background: #fff; border:1px solid #e5e7eb; border-radius:10px; }