/* Ronin Trading Lab — pantalla Aprendizaje */
.tl-root { height: 100%; display: flex; flex-direction: column; background: #07080f; color: #e2e8f0; font-family: Inter, system-ui, sans-serif; position: relative; }
.tl-scroll { flex: 1; overflow-y: auto; padding: 16px 16px 88px; }
.tl-title { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; }
.tl-sub { font-size: 12px; color: #94a3b8; margin-top: 4px; line-height: 1.45; }
.tl-hint { font-size: 11px; color: #64748b; margin: 0 0 10px; line-height: 1.4; }
.tl-demo { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #86efac; border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.1); }
.tl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
@media (min-width: 700px) { .tl-grid { grid-template-columns: repeat(3, 1fr); } }
.tl-card { padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.06); background: rgba(15,17,28,.9); }
.tl-card strong { display: block; font-size: 20px; font-weight: 800; color: #f0c420; }
.tl-card span { font-size: 11px; color: #94a3b8; }
.tl-sec { margin-top: 18px; }
.tl-sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; margin: 0 0 10px; }
.tl-strat { padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06); margin-bottom: 8px; font-size: 12px; }
.tl-strat.active { border-color: rgba(240,196,32,.45); background: rgba(240,196,32,.06); }
.tl-params { font-size: 10px; color: #64748b; margin: 4px 0 6px; font-family: 'JetBrains Mono', monospace; }
.tl-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; flex-wrap: wrap; }
.tl-status-activo { color: #86efac; font-weight: 700; }
.tl-status-candidato { color: #f0c420; font-weight: 700; }
.tl-status-retirado, .tl-status-rechazado { color: #94a3b8; }
.tl-alert { padding: 10px 12px; border-radius: 10px; margin: 10px 0 8px; font-size: 12px; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #fca5a5; }
.tl-alert-kill { background: rgba(251,146,60,.08); border-color: rgba(251,146,60,.3); color: #fdba74; }
.tl-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tl-btns-main { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.tl-btn { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: #12141f; color: #e2e8f0; font-size: 11px; font-weight: 700; cursor: pointer; }
.tl-btn:disabled { opacity: .45; cursor: not-allowed; }
.tl-btn.primary { border-color: rgba(240,196,32,.5); color: #f0c420; }
.tl-btn.danger { border-color: rgba(239,68,68,.45); color: #fca5a5; }
.tl-btn-sm { padding: 4px 8px; font-size: 10px; }
.tl-loading { padding: 40px; text-align: center; color: #94a3b8; }
.tl-eval-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 600px) { .tl-eval-grid { grid-template-columns: repeat(3, 1fr); } }
.tl-eval-item { padding: 10px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.tl-eval-item span { display: block; font-size: 10px; color: #64748b; margin-bottom: 2px; }
.tl-eval-item strong { font-size: 15px; color: #f0c420; }
.tl-eval-ts { font-size: 10px; color: #64748b; margin-top: 8px; }
.tl-toast { position: absolute; top: 12px; left: 50%; transform: translateX(-50%) translateY(-8px); padding: 8px 14px; border-radius: 8px; background: rgba(15,17,28,.95); border: 1px solid rgba(240,196,32,.35); color: #f0c420; font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
.tl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }