/* ============================================================
   CONQUER TERMINAL — Sistema de diseño (Bloomberg-style, verde Conquer)
   Autor: Jordi Guillamón — autoría permanente, no eliminar.
   Drop-in: <link rel="stylesheet" href="conquer-terminal.css">
   Aplica a TODA la app (commodities + cripto). Cero dependencias.
   ============================================================ */

:root{
  /* --- superficie (near-black con tinte verde) --- */
  --bg:#060906; --panel:#0b110b; --panel2:#0e150e; --panelhi:#101a10;
  --border:#19281a; --line:#1c3020;
  /* --- verde fósforo Conquer (acento primario, nunca como gran superficie) --- */
  --green:#00ff85; --green2:#13c97a; --green-deep:#0a3c2a; --green-glow:#00ff8530;
  /* --- semánticos --- */
  --up:#2ee87f; --down:#ff4d57; --amber:#ffb000; --cyan:#22d3ee; --violet:#a78bfa;
  /* --- texto (greenish white) --- */
  --txt:#bdf5d7; --txt2:#7fcda2; --mut:#4f7d63; --dim:#345544;
  /* --- tipografía: MONOESPACIADA en todo (carácter terminal) --- */
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --radius:0px;            /* terminal = esquinas a 0 (industrial) */
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:12px;line-height:1.35;
  letter-spacing:.2px;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% -10%, #0a160d 0%, var(--bg) 55%);
}
::selection{background:var(--green);color:#001b10}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#1c3322;border:1px solid #25462f}
::-webkit-scrollbar-track{background:#0a0f0a}
.blink{animation:cqblink 1.05s steps(1) infinite}
@keyframes cqblink{50%{opacity:0}}
.up{color:var(--up)} .down{color:var(--down)} .muted{color:var(--mut)}

/* ---------- COMMAND BAR (cabecera estilo BLP) ---------- */
.cq-cmd{display:flex;align-items:center;height:34px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0c140d,#080d08)}
.cq-brand{display:flex;align-items:center;gap:8px;padding:0 12px;height:100%;border-right:1px solid var(--line);background:#0a3c2a18}
.cq-brand .mk{color:var(--green);font-weight:700;letter-spacing:2px;text-shadow:0 0 8px var(--green-glow)}
.cq-cmdline{flex:1;display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--amber)}
.cq-cmdline .prompt{color:var(--green)}
.cq-cmdline input{background:transparent;border:0;outline:0;color:var(--amber);font-family:var(--mono);
  font-size:12px;flex:1;letter-spacing:1px;text-transform:uppercase}
.cq-go{border:1px solid var(--green-deep);color:var(--green);padding:2px 8px;font-size:10px;letter-spacing:1px;cursor:pointer}
.cq-led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--up);
  box-shadow:0 0 8px var(--up);animation:cqpulse 2.4s infinite}
@keyframes cqpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- TICKER TAPE ---------- */
.cq-tape{display:flex;align-items:center;height:24px;border-bottom:1px solid var(--line);background:#070c08;overflow:hidden}
.cq-tape .lbl{padding:0 10px;height:100%;display:flex;align-items:center;color:#06170f;background:var(--green);font-weight:700;letter-spacing:1px;font-size:10px}
.cq-tape .track{display:flex;gap:26px;white-space:nowrap;animation:cqscroll 48s linear infinite;padding-left:26px}
.cq-tape:hover .track{animation-play-state:paused}
@keyframes cqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cq-tk{display:inline-flex;gap:7px;align-items:baseline}
.cq-tk b{color:var(--txt)} .cq-tk .p{color:var(--txt2)}

/* ---------- SQUAWK / RIBBON DE ALERTAS ---------- */
.cq-squawk{display:flex;align-items:center;height:22px;border-bottom:1px solid var(--line);background:#120c06;overflow:hidden}
.cq-squawk .lbl{padding:0 10px;height:100%;display:flex;align-items:center;color:#1a0f00;background:var(--amber);font-weight:700;letter-spacing:1px;font-size:10px}
.cq-squawk .track{display:flex;gap:34px;white-space:nowrap;animation:cqscroll 36s linear infinite;padding-left:20px;color:var(--amber);font-size:11px}
.cq-squawk .x{color:var(--down)} .cq-squawk .pin{color:var(--green)}

/* ---------- FUNCTION TABS (F1..F5) ---------- */
.cq-fkeys{display:flex;height:30px;border-bottom:1px solid var(--line);background:#0a100a}
.cq-fkey{display:flex;align-items:center;gap:6px;padding:0 16px;border-right:1px solid var(--line);
  color:var(--txt2);cursor:pointer;letter-spacing:1px;font-size:11px;user-select:none}
.cq-fkey .fn{color:var(--mut);font-size:9px}
.cq-fkey:hover{background:#0e160e;color:var(--txt)}
.cq-fkey.active{color:#06170f;background:var(--green);font-weight:700}
.cq-fkey.active .fn{color:#0a3c2a}
.cq-fkey.crypto.active{background:var(--violet);color:#0c0820}
.cq-fkey.crypto.active .fn{color:#3a2a6a}

/* ---------- PANELES ---------- */
.cq-panel{border:1px solid var(--border);background:var(--panel);margin-bottom:10px}
.cq-phead{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 10px;
  background:linear-gradient(180deg,#0f1a10,#0a120b);border-bottom:1px solid var(--line);
  color:var(--green);letter-spacing:1px;font-size:11px;text-transform:uppercase}
.cq-phead.violet{color:var(--violet)}
.cq-phead .tag{color:var(--mut);font-size:10px;letter-spacing:1px}
.cq-pbody{padding:8px 10px}

/* ---------- TABLAS DE DATOS ---------- */
.cq-table{width:100%;border-collapse:collapse;font-size:11px}
.cq-table th{text-align:left;color:var(--mut);font-weight:400;letter-spacing:1px;text-transform:uppercase;
  padding:4px 8px;border-bottom:1px solid var(--line);font-size:10px;position:sticky;top:0;background:var(--panel)}
.cq-table td{padding:3px 8px;border-bottom:1px solid #0f1a11;white-space:nowrap}
.cq-table tr:hover td{background:#0d160e}
.cq-table .r{text-align:right;font-variant-numeric:tabular-nums}
.cq-table .sym{color:var(--txt);font-weight:700}

/* ---------- HEATMAP ---------- */
.cq-heat{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.cq-cell{border:1px solid #11210f;padding:6px 7px;min-height:46px;display:flex;flex-direction:column;
  justify-content:space-between;cursor:pointer;position:relative;overflow:hidden}
.cq-cell .s{color:var(--txt);font-weight:700;font-size:11px}
.cq-cell .e{position:absolute;top:4px;right:6px;font-size:13px;opacity:.85}
.cq-cell:hover{outline:1px solid var(--green)}
/* color de celda en JS: heatColor(d) → rgba verde/rojo por |Δ%| */

/* ---------- CHIPS / BADGES ---------- */
.cq-chip{display:inline-block;padding:1px 6px;border:1px solid var(--green-deep);color:var(--green2);font-size:9px;letter-spacing:1px}
.cq-chip.v{border-color:#3a2a6a;color:var(--violet)}
.cq-chip.a{border-color:#5a3a00;color:var(--amber)}
.cq-badge-x{color:#1a0500;background:var(--down);padding:1px 6px;font-weight:700;font-size:9px;letter-spacing:1px}
.cq-badge-ok{color:#06170f;background:var(--up);padding:1px 6px;font-weight:700;font-size:9px;letter-spacing:1px}

/* ---------- Z-METER (fuerza relativa / z-score) ---------- */
.cq-zbar{position:relative;height:8px;background:#0e1a11;border:1px solid var(--line)}
.cq-zbar .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--mut)}
.cq-zbar .fill{position:absolute;top:0;bottom:0;background:var(--green2);opacity:.8}
.cq-zbar .fill.neg{background:var(--down)}

/* ---------- SPARKBAR ---------- */
.cq-spark{display:inline-flex;align-items:flex-end;gap:1px;height:14px}
.cq-spark i{width:3px;background:var(--green2);opacity:.85}
.cq-spark.dn i{background:var(--down)}

/* ---------- SUB-PESTAÑAS (cripto, acento violeta) ---------- */
.cq-subtabs{display:flex;border:1px solid var(--border);margin-bottom:10px}
.cq-subtab{padding:5px 16px;border-right:1px solid var(--border);color:var(--txt2);cursor:pointer;
  letter-spacing:1px;font-size:11px;text-transform:uppercase}
.cq-subtab:hover{background:#0e160e}
.cq-subtab.on{background:var(--violet);color:#0c0820;font-weight:700}

/* ---------- BOTONES ---------- */
.cq-btn{background:#0d1f16;border:1px solid var(--green-deep);color:var(--green);padding:4px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:1px;cursor:pointer;text-transform:uppercase}
.cq-btn:hover{background:var(--green);color:#06170f}
.cq-btn.v{border-color:var(--violet);color:var(--violet)}
.cq-btn.v:hover{background:var(--violet);color:#0c0820}

/* ---------- RANGOS DE CHART (1D/1S/1M/6M/1A) ---------- */
.cq-range{display:flex}
.cq-range button{flex:1;background:#0b120b;border:1px solid var(--line);border-right:0;color:var(--txt2);
  padding:3px;font-family:var(--mono);font-size:10px;cursor:pointer}
.cq-range button:last-child{border-right:1px solid var(--line)}
.cq-range button.on{background:var(--green);color:#06170f;font-weight:700}

/* ---------- STATUS BAR (pie con teclas F + autoría) ---------- */
.cq-status{display:flex;align-items:center;height:24px;border-top:1px solid var(--line);background:#0a100a;font-size:10px;color:var(--mut)}
.cq-status .fk{padding:0 10px;border-right:1px solid var(--line);height:100%;display:flex;align-items:center;gap:5px}
.cq-status .fk b{color:var(--green)}
.cq-status .grow{flex:1}
.cq-status .auth{padding:0 12px;color:var(--green2);letter-spacing:1px}

/* ---------- MODO CRT (opcional, toggle body.crt) ---------- */
#cq-crt{position:fixed;inset:0;pointer-events:none;z-index:99;display:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,40,20,.14) 2px 3px);mix-blend-mode:overlay}
body.crt #cq-crt{display:block}
body.crt{text-shadow:0 0 1px var(--green-glow)}