/* ===== CQ DEV - tema dark premium =====
   Paleta extraida de TradingOps2 (layout2.js). Sin dependencias externas. */
:root{
  --bg:#0d0f14;
  --sidebar:#0b0d12;
  --surface:#161a22;
  --surface2:#1e2430;
  --border:#2a3040;
  --border2:#1e2430;
  --text:#e8eaf0;
  --text2:#a8b4c0;
  --muted:#8b93a5;
  --accent:#A52441;      /* rojo CQ */
  --accent2:#C13651;
  --gold:#f0a500;
  --green:#2ecc71;
  --red:#e74c3c;
  --blue:#3a9fd8;
  --purple:#9b59b6;
  --radius:12px;
  --radius-sm:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.card-sm{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:16px;
}
.badge{
  display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:.68rem;font-weight:700;letter-spacing:.5px;
}
.b-green{background:rgba(46,204,113,.12);color:var(--green)}
.b-gold{background:rgba(240,165,0,.12);color:var(--gold)}
.b-red{background:rgba(231,76,60,.12);color:var(--red)}
.b-blue{background:rgba(58,159,216,.12);color:var(--blue)}
.b-accent{background:rgba(165,36,65,.14);color:var(--accent2)}
.btn{
  display:inline-block;padding:9px 16px;border-radius:8px;border:1px solid transparent;
  font-weight:700;font-size:.82rem;cursor:pointer;transition:all .15s;
  background:var(--accent);color:#fff;
}
.btn:hover{background:var(--accent2)}
.btn-out{background:transparent;border-color:var(--border);color:var(--text)}
.btn-out:hover{border-color:var(--accent2);color:#fff}
.btn-gold{background:var(--gold);color:#1a1500}
.muted{color:var(--muted)}
.mono{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace}

/* badges extra */
.b-purple{background:rgba(155,89,182,.14);color:var(--purple)}
.b-muted{background:rgba(139,147,165,.14);color:var(--muted)}

/* pipeline laboral: celeste + verde fuerte */
.b-cyan{background:rgba(58,159,216,.18);color:#5bc0eb}
.b-greenstrong{background:rgba(46,204,113,.25);color:#19d96a;font-weight:800}

/* 🔥 FREELANCE: categoria top (por encima de P1) */
.b-fire{background:rgba(255,107,53,.18);color:#ff8a4c;font-weight:800;border:1px solid rgba(255,107,53,.35)}
/* 💎 HIGH VALUE (lo mas alto) + ⭐ BUILDER */
.b-diamond{background:rgba(96,205,255,.18);color:#7fdcff;font-weight:800;border:1px solid rgba(96,205,255,.45)}
.b-builder{background:rgba(180,120,255,.16);color:#c9a6ff;font-weight:800;border:1px solid rgba(180,120,255,.35)}
/* 🕒 FLEXIBLE: libertad de tiempo */
.b-clock{background:rgba(46,204,113,.16);color:#46d39a;font-weight:800;border:1px solid rgba(46,204,113,.35)}
/* 🚫 bloqueantes geo/idioma/visa/presencial */
.b-block{background:rgba(231,76,60,.16);color:#ff7b6b;font-weight:700}

/* CRM intel: punto de color del indicador de Seguimiento (feature 5) */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;vertical-align:middle}
.dot-green{background:var(--green);box-shadow:0 0 6px rgba(46,204,113,.6)}
.dot-yellow{background:var(--gold);box-shadow:0 0 6px rgba(240,165,0,.5)}
.dot-orange{background:#ff8a4c;box-shadow:0 0 6px rgba(255,138,76,.5)}
.dot-red{background:var(--red);box-shadow:0 0 6px rgba(231,76,60,.55)}
.dot-muted{background:var(--muted)}
/* barra de score (probabilidad de ganar, feature 6) */
.scorebar{display:inline-block;width:54px;height:6px;border-radius:4px;background:var(--border);overflow:hidden;vertical-align:middle}
.scorebar>span{display:block;height:100%}
.score-3>span{background:var(--green)} .score-2>span{background:var(--gold)} .score-1>span{background:var(--red)}
/* tarjeta de Seguimiento con borde izquierdo según color */
.item.edge-green{border-left:3px solid var(--green)}
.item.edge-yellow{border-left:3px solid var(--gold)}
.item.edge-orange{border-left:3px solid #ff8a4c}
.item.edge-red{border-left:3px solid var(--red)}
.item.edge-muted{border-left:3px solid var(--border)}