/* ==========================================================
   MT5 Cloud — hoja de estilos (tema oscuro profesional)
   ========================================================== */
:root{
  --bg:#0f1117; --card:#161b27; --txt:#e6e8ee; --muted:#8b93a7;
  --border:#262c3a; --pro:#4ade80; --loss:#f87171; --accent:#60a5fa;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex; justify-content:center; padding:24px 12px;
}
.screen{width:100%;max-width:980px}
.hidden{display:none}

/* ---------- Pantalla de conexión ---------- */
.connect-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:32px; max-width:420px; margin:60px auto;
}
.connect-card h1{font-size:24px;margin-bottom:6px}
.sub{color:var(--muted);font-size:13px;margin-bottom:22px}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px;text-transform:uppercase;letter-spacing:.5px}
input{
  width:100%; padding:10px 12px; font-size:15px;
  background:#0d1017; color:var(--txt);
  border:1px solid var(--border); border-radius:8px;
}
input:focus{outline:none;border-color:var(--accent)}
button{
  width:100%; margin-top:20px; padding:12px; font-size:15px; font-weight:600;
  background:var(--accent); color:#0b1220; border:none; border-radius:8px; cursor:pointer;
}
button:disabled{opacity:.55;cursor:wait}
.status{margin-top:14px;font-size:13px;min-height:18px}

/* ---------- Buscador de servidor (autocompletado) ---------- */
.server-picker{position:relative}
.server-list{
  position:absolute; top:100%; left:0; right:0; z-index:50;
  max-height:260px; overflow-y:auto; margin-top:4px;
  background:#12151f; border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.server-group{padding:6px 12px 2px;font-size:11px;color:var(--accent);
  text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.server-item{
  padding:9px 12px;font-size:14px;cursor:pointer;color:var(--txt);
  display:flex;justify-content:space-between;align-items:center;
}
.server-item:hover,.server-item.active{background:#1c2333}
.server-item .tag{font-size:10px;color:var(--muted)}
.hint{margin-top:6px;font-size:11px;color:var(--muted)}
.status.ok{color:var(--pro)} .status.err{color:var(--loss)}

/* ---------- Dashboard ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.topbar h2{font-size:20px}
.badge{
  display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;
  font-size:11px;font-weight:600;
}
.badge-wait{background:rgba(96,165,250,.15);color:var(--accent)}
.badge-live{background:rgba(74,222,128,.15);color:var(--pro)}
.btn-ghost{
  width:auto;margin:0;padding:8px 14px;font-size:13px;
  background:transparent;color:var(--muted);border:1px solid var(--border);
}
.btn-ghost:hover{color:var(--txt)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.stat-card .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.stat-card .value{font-size:20px;font-weight:700;margin-top:4px}
.stat-card.pro .value{color:var(--pro)}
.stat-card.loss .value{color:var(--loss)}

table.trades{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
table.trades th,table.trades td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px;text-align:left}
table.trades th{background:#1a2030;color:var(--muted);font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
table.trades tr:last-child td{border-bottom:none}
tr.pro td.pl{color:var(--pro);font-weight:600}
tr.loss td.pl{color:var(--loss);font-weight:600}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.pill.buy{background:rgba(74,222,128,.15);color:var(--pro)}
.pill.sell{background:rgba(248,113,113,.15);color:var(--loss)}
.stamp{color:var(--muted);font-size:12px}
.empty{text-align:center;padding:30px;color:var(--muted)}

@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .connect-card{margin:20px auto;padding:24px}
}