/* ═══════════════════════════════════════════════════════════════════════════
   BTC Signal Room — Dark Crypto Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0d1117;
    --bg2:       #161b22;
    --bg3:       #1c2333;
    --border:    #21262d;
    --border2:   #30363d;
    --text1:     #e6edf3;
    --text2:     #8b949e;
    --text3:     #6e7681;
    --orange:    #F7931A;
    --orange-d:  #d97a0f;
    --green:     #3fb950;
    --green-b:   #00c853;
    --green-d:   #238636;
    --red:       #f85149;
    --red-b:     #ff1744;
    --red-d:     #b91c1c;
    --yellow:    #e3b341;
    --blue:      #388bfd;
    --purple:    #a371f7;
    --radius:    10px;
    --radius-lg: 14px;
    --shadow:    0 4px 24px rgba(0,0,0,.45);
    --font:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono:      'Consolas', 'Fira Mono', monospace;
}

html { font-size: 15px; scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text1);
    font-family: var(--font);
    min-height: 100vh;
    line-height: 1.5;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-d); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(8px);
}
.header-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 0 1.5rem;
    height: 58px;
    display: flex; align-items: center; gap: 1.5rem;
}
.logo {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 700; font-size: 1.1rem;
    color: var(--text1);
    white-space: nowrap;
}
.logo svg { flex-shrink: 0; }
.header-nav { display: flex; gap: .25rem; margin-left: .5rem; }
.nav-link {
    padding: .4rem .8rem;
    border-radius: 6px;
    font-size: .875rem;
    color: var(--text2);
    transition: background .15s, color .15s;
}
.nav-link:hover, .nav-link.active {
    background: var(--bg3);
    color: var(--text1);
}
.clock-box {
    margin-left: auto;
    font-size: .8rem;
    color: var(--text3);
    font-family: var(--mono);
    white-space: nowrap;
}

/* ── Price Bar ────────────────────────────────────────────────────────────── */
.price-bar {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: .75rem 1.5rem;
    max-width: 100%;
}
.price-main { display: flex; align-items: baseline; gap: .75rem; }
.pair-tag {
    font-size: .8rem; font-weight: 600;
    color: var(--text2);
    background: var(--bg3);
    padding: .15rem .55rem;
    border-radius: 4px;
    border: 1px solid var(--border2);
}
.price-val {
    font-size: 1.75rem; font-weight: 800;
    font-family: var(--mono);
    color: var(--text1);
    transition: color .3s;
    letter-spacing: -.02em;
}
.price-val.up   { color: var(--green-b); }
.price-val.down { color: var(--red-b); }

.price-chg {
    font-size: .95rem; font-weight: 600;
    font-family: var(--mono);
    padding: .2rem .5rem;
    border-radius: 5px;
}
.price-chg.up      { background: rgba(63,185,80,.15); color: var(--green); }
.price-chg.down    { background: rgba(248,81,73,.15);  color: var(--red); }
.price-chg.neutral { background: var(--bg3); color: var(--text2); }

.price-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pstat { display: flex; flex-direction: column; gap: .1rem; }
.pstat span { font-size: .7rem; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.pstat strong { font-size: .85rem; color: var(--text2); font-family: var(--mono); }
.src-tag strong { color: var(--orange) !important; font-size: .8rem; }

/* Live dot */
.live-dot {
    display: flex; align-items: center; gap: .5rem;
    position: relative;
    font-size: .7rem; font-weight: 700;
    color: var(--green);
    text-transform: uppercase; letter-spacing: .06em;
    margin-left: auto;
}
.dot-ring, .dot-core {
    position: absolute; left: -14px;
    border-radius: 50%;
}
.dot-core { width: 8px; height: 8px; background: var(--green); transform: translate(-50%,-50%); top: 50%; left: -10px; }
.dot-ring  {
    width: 16px; height: 16px;
    border: 2px solid var(--green);
    transform: translate(-50%,-50%); top: 50%; left: -10px;
    animation: ringPulse 2s infinite;
}
@keyframes ringPulse {
    0%   { transform: translate(-50%,-50%) scale(.6); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}
.live-dot.pulse .dot-core { box-shadow: 0 0 8px var(--green); }

/* ── Main Layout ─────────────────────────────────────────────────────────── */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2rem;
}
.content-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .content-grid { grid-template-columns: 1fr; }
}

/* ── Card Base ───────────────────────────────────────────────────────────── */
.signal-card, .chart-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.2rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg3);
}
.card-header h2 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text1);
}
.tv-badge {
    font-size: .7rem;
    background: rgba(56,139,253,.15);
    color: var(--blue);
    border: 1px solid rgba(56,139,253,.3);
    padding: .2rem .55rem;
    border-radius: 4px;
    font-weight: 600;
}

/* ── Signal Badge ────────────────────────────────────────────────────────── */
.sig-badge {
    font-size: .75rem; font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 20px;
    text-transform: uppercase; letter-spacing: .05em;
}
.sig-badge.waiting  { background: var(--bg); color: var(--text3); border: 1px solid var(--border2); }
.sig-badge.long     { background: rgba(0,200,83,.15); color: var(--green-b); border: 1px solid rgba(0,200,83,.3); }
.sig-badge.short    { background: rgba(255,23,68,.15); color: var(--red-b);  border: 1px solid rgba(255,23,68,.3); }
.sig-badge.partial  { background: rgba(227,179,65,.15); color: var(--yellow); border: 1px solid rgba(227,179,65,.3); }
.sig-badge.closed   { background: rgba(139,148,158,.15); color: var(--text2); border: 1px solid var(--border2); }

/* ── Signal Body ─────────────────────────────────────────────────────────── */
.signal-body { padding: 1.2rem; min-height: 260px; }

/* Waiting state */
.waiting-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    height: 220px; gap: .75rem;
}
.wait-title { font-size: 1rem; color: var(--text2); font-weight: 500; }
.waiting-state small { color: var(--text3); font-size: .78rem; }

/* Radar animation */
.radar-anim {
    position: relative; width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .5rem;
}
.radar-ring {
    position: absolute; border-radius: 50%;
    border: 2px solid var(--orange);
    animation: radarExpand 2.5s infinite ease-out;
}
.radar-ring.r1 { animation-delay: 0s; }
.radar-ring.r2 { animation-delay: .8s; }
.radar-ring.r3 { animation-delay: 1.6s; }
@keyframes radarExpand {
    0%   { width: 8px; height: 8px; opacity: .9; }
    100% { width: 60px; height: 60px; opacity: 0; }
}
.radar-dot {
    width: 10px; height: 10px;
    background: var(--orange);
    border-radius: 50%;
    position: relative; z-index: 1;
}

/* ── Active Signal ───────────────────────────────────────────────────────── */
.signal-active { display: flex; flex-direction: column; gap: .85rem; }

.sig-header { display: flex; justify-content: space-between; align-items: center; }
.sig-type {
    font-size: 1.1rem; font-weight: 800;
    letter-spacing: .04em;
}
.signal-active.long  .sig-type { color: var(--green-b); }
.signal-active.short .sig-type { color: var(--red-b); }

.sig-pnl {
    font-size: 1rem; font-weight: 700;
    font-family: var(--mono);
    padding: .25rem .6rem;
    border-radius: 6px;
}
.sig-pnl.pos { background: rgba(0,200,83,.12); color: var(--green-b); }
.sig-pnl.neg { background: rgba(255,23,68,.12); color: var(--red-b); }

.sig-time { font-size: .75rem; color: var(--text3); }

/* T1 hit banner */
.t1-hit-banner {
    background: rgba(227,179,65,.12);
    border: 1px solid rgba(227,179,65,.3);
    color: var(--yellow);
    padding: .5rem .8rem;
    border-radius: 7px;
    font-size: .8rem;
    font-weight: 600;
}

/* Price levels */
.price-levels { display: flex; flex-direction: column; gap: .4rem; }
.level {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem .8rem;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg);
    transition: border-color .3s;
}
.level.stop    { border-color: rgba(248,81,73,.35); background: rgba(248,81,73,.05); }
.level.entry   { border-color: rgba(227,179,65,.35); background: rgba(227,179,65,.05); }
.level.current { border-color: rgba(139,148,158,.3); }
.level.t1      { border-color: rgba(63,185,80,.25); background: rgba(63,185,80,.04); }
.level.t2      { border-color: rgba(63,185,80,.4);  background: rgba(63,185,80,.07); }
.level.hit     { border-color: var(--green-b); box-shadow: 0 0 8px rgba(0,200,83,.2); }

.level-label { font-size: .75rem; color: var(--text2); flex: 1; }
.level-val   { font-size: .9rem; font-weight: 700; font-family: var(--mono); flex: 1; text-align: right; }
.level-dist  { font-size: .72rem; font-family: var(--mono); color: var(--text3); min-width: 60px; text-align: right; }
.level.stop .level-val { color: var(--red); }
.level.t1   .level-val, .level.t2 .level-val { color: var(--green); }
.level.entry .level-val { color: var(--yellow); }

/* Progress bar */
.progress-track {
    position: relative;
    height: 8px;
    background: var(--bg);
    border-radius: 4px;
    overflow: visible;
    border: 1px solid var(--border);
    margin-top: .25rem;
}
.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .6s ease;
    position: relative;
}
.progress-fill.long  { background: linear-gradient(90deg, var(--red-d), var(--green-d)); }
.progress-fill.short { background: linear-gradient(90deg, var(--green-d), var(--red-d)); }

.progress-t1 {
    position: absolute; top: -3px;
    width: 2px; height: 14px;
    background: var(--yellow);
    transform: translateX(-50%);
    border-radius: 2px;
}
.progress-labels {
    display: flex; justify-content: space-between;
    font-size: .65rem; color: var(--text3);
    margin-top: .2rem;
}

/* ── Closed Signal ───────────────────────────────────────────────────────── */
.signal-closed { display: flex; flex-direction: column; gap: 1rem; align-items: center; padding: .5rem 0; }
.closed-result { display: flex; align-items: center; gap: .5rem; }
.result-icon   { font-size: 2rem; }
.result-text   { font-size: 1.4rem; font-weight: 800; letter-spacing: .04em; }
.signal-closed.win  .result-text { color: var(--green-b); }
.signal-closed.be   .result-text { color: var(--yellow); }
.signal-closed.loss .result-text { color: var(--red-b); }

.closed-details {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .4rem .8rem;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .8rem 1rem;
}
.closed-details > div { display: flex; flex-direction: column; }
.closed-details span  { font-size: .7rem; color: var(--text3); }
.closed-details strong { font-family: var(--mono); font-size: .9rem; }

.closed-next { font-size: .78rem; color: var(--text3); }

/* ── Indicators row ──────────────────────────────────────────────────────── */
.inds-row {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding: .85rem 1.2rem;
    border-top: 1px solid var(--border);
    background: var(--bg);
}
.ind-box {
    display: flex; flex-direction: column; gap: .15rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .35rem .65rem;
    flex: 1; min-width: 70px;
}
.ind-lbl { font-size: .62rem; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.ind-val { font-size: .85rem; font-family: var(--mono); color: var(--text1); font-weight: 600; }

/* ── Chart card ──────────────────────────────────────────────────────────── */
.tv-wrap { height: 470px; overflow: hidden; }
.tv-wrap > div { width: 100%; height: 100%; }

/* ── Context bar ─────────────────────────────────────────────────────────── */
.context-bar {
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
    margin-top: 1.25rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem 1.25rem;
}
.ctx-item { display: flex; flex-direction: column; gap: .1rem; }
.ctx-item span  { font-size: .68rem; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.ctx-item strong { font-size: .85rem; font-family: var(--mono); color: var(--text1); }

/* ── Color utilities ─────────────────────────────────────────────────────── */
.c-green  { color: var(--green-b) !important; }
.c-red    { color: var(--red-b)   !important; }
.c-yellow { color: var(--yellow)  !important; }
.c-muted  { color: var(--text3)   !important; }
.pos      { color: var(--green-b) !important; }
.neg      { color: var(--red-b)   !important; }
.neutral  { color: var(--text1)   !important; }
.up       { color: var(--green-b) !important; }
.down     { color: var(--red-b)   !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HISTÓRICO
   ══════════════════════════════════════════════════════════════════════════ */
.hist-main { padding-bottom: 3rem; }

.hist-title-row {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.hist-title { font-size: 1.4rem; font-weight: 700; }
.hist-sub   { font-size: .82rem; color: var(--text3); }

/* Summary cards */
.summary-grid {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-bottom: 1rem;
}
.sum-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .75rem 1.1rem;
    display: flex; flex-direction: column; gap: .2rem;
    flex: 1; min-width: 130px;
}
.sum-label { font-size: .7rem; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.sum-val   { font-size: 1.15rem; font-weight: 700; font-family: var(--mono); }

/* Banner resultado geral */
.result-banner {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1.2rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: .88rem;
}
.result-banner.profit {
    background: rgba(0,200,83,.08);
    border: 1px solid rgba(0,200,83,.3);
    color: var(--green-b);
}
.result-banner.loss {
    background: rgba(255,23,68,.08);
    border: 1px solid rgba(255,23,68,.3);
    color: var(--red-b);
}
.banner-icon { font-size: 1.3rem; flex-shrink: 0; }
.banner-text { line-height: 1.5; }
.banner-text strong { font-weight: 700; }

/* Table */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}
.hist-table {
    width: 100%; border-collapse: collapse;
    font-size: .83rem;
    min-width: 900px;
}
.hist-table thead tr {
    background: var(--bg3);
}
.hist-table th {
    padding: .75rem 1rem;
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.hist-table td {
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}
.hist-row:last-child td { border-bottom: none; }
.hist-row:hover td { background: rgba(255,255,255,.03); }

.td-num  { color: var(--text3); font-size: .75rem; }
.td-time { color: var(--text2); font-family: var(--mono); font-size: .78rem; }
.td-price { font-family: var(--mono); font-size: .83rem; }
.td-pnl, .td-rr { font-family: var(--mono); font-weight: 700; }

/* Row tint */
.res-win2-row td   { background: rgba(0,200,83,.04); }
.res-win1-row td   { background: rgba(0,200,83,.025); }
.res-be-row td     { background: rgba(227,179,65,.04); }
.res-loss-row td   { background: rgba(248,81,73,.04); }

/* Type badge */
.type-badge {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.type-badge.long  { background: rgba(0,200,83,.15); color: var(--green-b); }
.type-badge.short { background: rgba(255,23,68,.15); color: var(--red-b); }

/* Result badge */
.res-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .22rem .6rem;
    border-radius: 5px;
    font-size: .78rem;
    font-weight: 700;
}
.res-win2  { background: rgba(0,200,83,.18); color: var(--green-b); border: 1px solid rgba(0,200,83,.3); }
.res-win1  { background: rgba(63,185,80,.15); color: var(--green);   border: 1px solid rgba(63,185,80,.25); }
.res-be    { background: rgba(227,179,65,.15); color: var(--yellow);  border: 1px solid rgba(227,179,65,.3); }
.res-loss  { background: rgba(248,81,73,.15); color: var(--red);     border: 1px solid rgba(248,81,73,.3); }

/* Calc section */
.calc-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.calc-section h3 { font-size: 1rem; margin-bottom: 1rem; }
.calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .6rem;
    margin-bottom: .85rem;
}
.calc-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: .55rem .85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 7px;
}
.calc-label { font-size: .78rem; color: var(--text2); }
.calc-val   { font-family: var(--mono); font-size: .88rem; font-weight: 700; }
.calc-val.big { font-size: 1rem; }
.calc-item.highlight {
    grid-column: 1 / -1;
    padding: .8rem 1rem;
}
.calc-item.highlight.profit { border-color: rgba(0,200,83,.4); background: rgba(0,200,83,.05); }
.calc-item.highlight.loss   { border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.05); }
.calc-note {
    font-size: .73rem;
    color: var(--text3);
    line-height: 1.6;
    border-top: 1px solid var(--border);
    padding-top: .75rem;
    margin-top: .75rem;
}

/* Empty state */
.empty-hist {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    padding: 4rem 2rem;
    color: var(--text2);
    gap: .75rem;
}
.empty-icon { font-size: 3rem; }
.btn-back {
    display: inline-block;
    margin-top: 1rem;
    padding: .5rem 1.2rem;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 6px;
    color: var(--text1);
    font-size: .875rem;
}
.btn-back:hover { background: var(--bg2); }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--bg2); }
::-webkit-scrollbar-thumb  { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .price-bar { flex-direction: column; align-items: flex-start; }
    .price-stats { gap: 1rem; }
    .live-dot { margin-left: 0; }
    .header-inner { padding: 0 1rem; }
    .main-content { padding: 1rem; }
    .tv-wrap { height: 300px; }
    .summary-grid { gap: .5rem; }
    .sum-card { min-width: 100px; }
}