/* Terminal com a cara do Tabuleiro Tropical (06/10/2026). O João pediu para
   "fundir os dois projetos": o Terminal mantém a grade densa de painéis, o
   teclado e os comandos, mas deixa a estética de mesa de operações (fonte
   mono, cantos retos, âmbar) e passa a usar o tema comum (tema.css, body.tt):
   cartões translúcidos de cantos arredondados, rótulo pequeno acima do
   título, abas em pílula, verde como cor de ação. Carregado depois de
   style.css e tema.css; tudo sob body.terminal. */

body.terminal { font-size: 13.5px; }
html:has(body.terminal) { background: #07110f; }

/* ------------------------------------------------------------- cabeçalho */
body.terminal header {
  gap: 14px; padding: 12px 18px;
  background: rgba(7, 17, 15, 0.82); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  position: relative; z-index: 20;
}
body.terminal .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; letter-spacing: 0; font-size: inherit; flex-shrink: 0; }
body.terminal .brand-marca { width: 40px; height: 40px; border-radius: 10px; display: block; box-shadow: 0 12px 30px rgba(0, 156, 59, 0.28), 0 0 0 1px var(--line); }
body.terminal .brand-txt { display: flex; flex-direction: column; gap: 2px; }
body.terminal .brand-txt b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
body.terminal .brand-txt small { margin: 0; color: var(--ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
body.terminal .cmd {
  height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(20, 36, 30, 0.55); max-width: 640px;
}
body.terminal .cmd:focus-within { border-color: var(--up-ink); }
body.terminal .cmd span { color: var(--ink-2); font-weight: 400; font-size: 15px; }
body.terminal .cmd input { font-family: var(--sans); font-size: 13.5px; letter-spacing: 0; }
body.terminal .clock {
  height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px;
  border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(20, 36, 30, 0.35); font-size: 12.5px;
}
/* conta: no cabeçalho (#conta-vaga), estilo em tema.css */
body.terminal .m-conta { margin-left: auto; }

/* --------------------------------------------------------------- faixa */
body.terminal .tape { gap: 8px; padding: 12px 18px 0; background: transparent; border-bottom: 0; }
body.terminal .tape-item {
  gap: 8px; padding: 8px 13px; border: 1px solid var(--line-soft); border-left: 3px solid var(--ink-3);
  border-radius: 10px; background: var(--panel-3); flex: 0 0 auto;
}
body.terminal .tape-item:has(.t-chg.up) { border-left-color: var(--up-ink); }
body.terminal .tape-item:has(.t-chg.down) { border-left-color: var(--down-ink); }
body.terminal .tape-item .t-label { color: var(--ink); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
body.terminal .tape-item .t-price { font-size: 14.5px; font-weight: 700; }
body.terminal .tape-item .t-chg { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(180, 220, 200, 0.1); }
body.terminal .tape-item .t-chg.up { color: #bbf7d0; background: rgba(34, 197, 94, 0.15); }
body.terminal .tape-item .t-chg.down { color: #fecaca; background: rgba(239, 68, 68, 0.15); }

/* ---------------------------------------------------------------- grade */
body.terminal main { gap: 12px; padding: 12px 18px; background: transparent; }
body.terminal .panel {
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden;
  box-shadow: 0 18px 50px rgba(7, 17, 15, 0.32); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.terminal .panel-head { gap: 10px; padding: 11px 14px 9px; background: transparent; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
body.terminal .panel-head h2 {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-transform: none;
}
body.terminal .panel-head h2 .eyebrow { font-size: 10px; }
body.terminal .panel-head .meta {
  font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--ink-2);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-3);
}
body.terminal .tabs { gap: 4px; }
body.terminal .tab {
  height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3);
  color: var(--ink-2); font-family: var(--sans); font-size: 12px; letter-spacing: 0;
}
body.terminal .tab:hover { color: var(--ink); background: var(--panel-3-hi); }
body.terminal .tab[aria-selected="true"] { color: #07110f; background: var(--up-ink); border-color: var(--up-ink); font-weight: 700; }
body.terminal .panel-body::-webkit-scrollbar-thumb { background: rgba(180, 220, 200, 0.15); }

/* tabela de cotações */
body.terminal table.q th {
  background: rgba(10, 22, 20, 0.96); color: var(--ink-2); font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding: 7px 10px; border-bottom: 1px solid var(--line-soft);
}
body.terminal table.q td { padding: 6px 10px; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
body.terminal table.q tbody tr:hover { background: var(--panel-3-hi); }
body.terminal table.q tbody tr.sel { background: rgba(34, 197, 94, 0.1); box-shadow: inset 3px 0 0 var(--up-ink); }
body.terminal .sym { letter-spacing: .02em; }
body.terminal .nm { font-size: 10.5px; }

/* gráfico */
body.terminal .chart-hd { padding: 10px 14px 2px; }
body.terminal .chart-hd .c-sym { letter-spacing: 0; }
body.terminal .chart-stats { padding: 6px 14px; font-size: 11.5px; }
body.terminal .tip { background: rgba(7, 17, 15, 0.96); border-radius: 10px; padding: 7px 10px; }

/* manchetes: caixinhas com filete, como na Sala de situação */
body.terminal #news-body, body.terminal #geo-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
body.terminal .news-item { padding: 8px 11px; border: 1px solid var(--line-soft); border-left: 3px solid var(--up-ink); border-radius: 10px; background: var(--panel-3); }
body.terminal .news-item:hover { background: var(--panel-3-hi); border-color: var(--line-hi); border-left-color: var(--amber-ink); }
body.terminal .news-item:hover .news-title { color: var(--ink); }
body.terminal .news-meta { justify-content: space-between; }
body.terminal .news-src { color: var(--amber-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
body.terminal .news-time { color: var(--ink-2); font-size: 10.5px; font-weight: 600; }
body.terminal .news-title { font-size: 13px; font-weight: 600; line-height: 1.36; }

/* macro em blocos */
body.terminal #macro-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
body.terminal .macro-row, body.terminal .pm-item { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-3); padding: 8px 12px; }
body.terminal .macro-lbl { color: var(--ink); font-size: 12px; letter-spacing: 0; }
body.terminal .macro-lbl small { font-size: 10.5px; }
body.terminal .macro-val { font-size: 15px; font-weight: 700; }
body.terminal .pm-q { font-size: 12.5px; }
body.terminal .pm-bar { background: rgba(180, 220, 200, 0.1); border-radius: 999px; }
body.terminal .pm-fill { border-radius: 999px; }
body.terminal .msg code { background: var(--panel-3); border-radius: 6px; }
body.terminal .skel div { background: linear-gradient(90deg, rgba(20, 36, 30, 0.6), rgba(40, 66, 54, 0.6), rgba(20, 36, 30, 0.6)); background-size: 200% 100%; border-radius: 6px; }

/* rodapé de atalhos */
body.terminal footer { gap: 18px; padding: 8px 18px 10px; background: transparent; border-top: 0; font-size: 11.5px; letter-spacing: 0; }
body.terminal footer kbd { font-family: var(--sans); font-size: 11px; border-radius: 6px; background: var(--panel-3); border-color: var(--line); padding: 1px 6px; }

/* ------------------------------------------- análise fundamentalista (F) */
body.terminal .fa-overlay { background: rgba(2, 8, 18, 0.72); backdrop-filter: blur(6px); }
body.terminal .fa-head { background: rgba(7, 17, 15, 0.92); border-bottom: 1px solid var(--line-soft); padding: 12px 18px; }
body.terminal .fa-head .fa-tick { letter-spacing: 0; }
body.terminal .fa-head .fa-sec { border-radius: 999px; letter-spacing: .04em; }
body.terminal .fa-close { height: 34px; padding: 0 14px; border-radius: 10px; background: var(--panel-3); font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; color: var(--ink); }
body.terminal .fa-close:hover { border-color: var(--line-hi); color: var(--ink); background: var(--panel-3-hi); }
body.terminal .fa-body { padding: 18px; }
body.terminal .fa-card { border-radius: 14px; padding: 14px 16px; background: var(--panel); }
body.terminal .fa-card > h3 { color: var(--ink-2); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
body.terminal .kv .k { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
body.terminal .disclaimer { border-radius: 10px; }

/* ------------------------------------------------- resumo do dia (B) */
body.terminal .brief { background: radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.08), transparent 32rem), linear-gradient(135deg, #07110f 0%, #0d1719 42%, #11100d 100%); }
body.terminal .brief-top .brand { display: flex; align-items: center; gap: 10px; }
body.terminal .brief-top .brand-marca { width: 34px; height: 34px; }
body.terminal .brief-switch { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3); color: var(--ink); font-family: var(--sans); font-size: 13px; letter-spacing: 0; }
body.terminal .brief-switch:hover { background: var(--panel-3-hi); border-color: var(--line-hi); color: var(--ink); }
body.terminal .brief-kicker, body.terminal .brief-h { color: var(--ink-2); letter-spacing: .06em; }
body.terminal .brief-story p { font-family: var(--sans); }
body.terminal .driver, body.terminal .hold-row { border-bottom-color: var(--line-soft); }
body.terminal .hold-row:hover { background: var(--panel-3-hi); }
body.terminal .sig { border-radius: 999px; padding: 5px 11px; }
body.terminal .brief-loading { letter-spacing: .04em; }

/* notebook pequeno: sem o relógio o topo cabe numa linha (passava 120 px em 1024) */
@media (min-width: 901px) and (max-width: 1180px) {
  body.terminal .clock { display: none; }
  body.terminal header { flex-wrap: wrap; row-gap: 8px; }
}

/* ------------------------------------------------------------ celular */
@media (max-width: 900px) {
  body.terminal header { flex-wrap: wrap; padding: 10px 12px; gap: 8px 10px; }
  body.terminal .brand-marca { width: 34px; height: 34px; }
  body.terminal .cmd { order: 4; width: 100%; max-width: none; flex-basis: 100%; }
  body.terminal .clock { display: none; }
  body.terminal .jtc-btn { height: 32px; padding: 0 11px; font-size: 12.5px; }
  body.terminal main { padding: 10px 12px; gap: 10px; }
  body.terminal .tape { padding: 10px 12px 0; }
}
body.terminal .fa-head .fa-sec:empty { display: none; }

/* atraso da cotação (minutos) ao lado do preço/rótulo: só quando não é tempo real */
.t-atraso { margin-left: 4px; font-size: 9px; font-weight: 600; color: var(--amber-ink); vertical-align: super; letter-spacing: 0; }
.q-nota { caption-side: bottom; text-align: left; font-size: 10px; color: var(--ink-3); padding: 6px 8px; }

/* ------------------------------------------------- indicadores do gráfico */
body.terminal .ind-ancora { position: relative; display: inline-flex; }
body.terminal .ind-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 290px; padding: 8px; display: flex; flex-direction: column; gap: 4px;
  background: #0c1714; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
body.terminal .ind-menu[hidden] { display: none; }
body.terminal .ind-btn { display: flex; gap: 8px; align-items: baseline; text-align: left; font: inherit; font-size: 12px; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
body.terminal .ind-btn b { min-width: 64px; color: var(--ink); font-weight: 600; }
body.terminal .ind-btn:hover { background: var(--panel-3-hi, rgba(255,255,255,.05)); }
body.terminal .ind-btn[aria-pressed="true"] { border-color: var(--up-ink); color: var(--ink); }
body.terminal .ind-nota { margin: 4px 8px 2px; color: var(--ink-3); font-size: 11px; }
body.terminal .ind-leg { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 12px; padding: 0 14px 4px; font-size: 11px; color: var(--ink-3); }
body.terminal .ind-leg::-webkit-scrollbar { display: none; }
body.terminal .ind-item { white-space: nowrap; }
body.terminal .ind-item i { display: inline-block; width: 9px; height: 2px; vertical-align: middle; margin-right: 5px; }
body.terminal .ind-item b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Com IFR/MACD o gráfico pede altura mínima: o cabeçalho e a legenda não
   encolhem, a caixa cresce e o painel rola (antes a legenda era espremida). */
body.terminal .chart-wrap { height: auto; min-height: 100%; }
body.terminal .chart-wrap > * { flex-shrink: 0; }
body.terminal .chart-wrap > .chart-svg { flex-shrink: 1; }