/* ============================================================
   Panorama PRO — Terminal personalizável (js/terminal.js)
   ============================================================ */
#terminal-personalizavel .tp-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#terminal-personalizavel .tp-sub { margin: 6px 0 0 16px; font-size: 11px; color: #6b7280; }
#terminal-personalizavel .tp-layouts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#terminal-personalizavel .tp-layouts select,
#terminal-personalizavel .tp-layouts button,
#terminal-personalizavel .tp-adicionar button {
    font-size: 11px; font-weight: 600; color: #e5e7eb; padding: 7px 11px; border-radius: 8px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s, border-color .2s, color .2s;
}
#terminal-personalizavel .tp-layouts select { padding-right: 26px; max-width: 190px; color-scheme: dark; }
#terminal-personalizavel .tp-layouts button:hover,
#terminal-personalizavel .tp-adicionar button:hover { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .1); color: #fff; }
#tp-salvo { font: 10px "JetBrains Mono", monospace; color: #4b5563; transition: color .3s; min-width: 52px; }
#tp-salvo.tp-ok { color: #34d399; }

#terminal-personalizavel .tp-adicionar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
#terminal-personalizavel .tp-adicionar span { align-self: center; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin-right: 4px; }
#terminal-personalizavel .tp-adicionar button { border-style: dashed; }

/* grid de 12 colunas, linhas de 170px */
.tp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 170px; grid-auto-flow: dense; gap: 12px; }
.tp-vazio { padding: 40px 16px; text-align: center; font-size: 13px; color: #6b7280; border: 1px dashed rgba(255, 255, 255, .12); border-radius: 12px; }

.tp-painel {
    position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
    background: linear-gradient(180deg, rgba(17, 22, 31, .92), rgba(9, 12, 18, .95));
    border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px;
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .9);
    transition: border-color .25s, box-shadow .25s, opacity .2s;
}
.tp-painel:hover { border-color: rgba(251, 191, 36, .22); }
.tp-painel.tp-arrastando { opacity: .45; }
.tp-painel.tp-alvo { border-color: rgba(251, 191, 36, .6); }
.tp-painel.tp-novo { animation: tp-novo .9s ease; }
.tp-painel.tp-redimensionando { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b inset; }
@keyframes tp-novo { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .7); } 100% { box-shadow: 0 0 0 14px rgba(251, 191, 36, 0); } }

.tp-cab { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); cursor: grab; user-select: none; min-width: 0; }
.tp-cab:active { cursor: grabbing; }
.tp-pega { color: #4b5563; font-size: 13px; }
.tp-titulo { font-size: 11px; color: #9ca3af; white-space: nowrap; }
.tp-titulo b { color: #e5e7eb; font-weight: 700; letter-spacing: .04em; }
.tp-extra { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.tp-extra .tp-simbolo { width: 104px; min-width: 70px; font: 700 11px "JetBrains Mono", monospace; color: #fbbf24; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 4px 7px; text-transform: uppercase; }
.tp-extra .tp-simbolo:focus { outline: none; border-color: #f59e0b; }
.tp-extra select { font: 11px "JetBrains Mono", monospace; color: #e5e7eb; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; padding: 3px 4px; color-scheme: dark; }
.tp-check { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #9ca3af; cursor: pointer; }
.tp-check input { accent-color: #f59e0b; }
.tp-mini { font-size: 12px; color: #9ca3af; padding: 2px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .1); }
.tp-mini:hover { color: #fbbf24; border-color: rgba(251, 191, 36, .4); }
.tp-botoes { display: flex; gap: 2px; margin-left: auto; flex: none; }
.tp-botoes button { width: 24px; height: 24px; display: grid; place-items: center; font-size: 13px; color: #6b7280; border-radius: 6px; }
.tp-botoes button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.tp-botoes [data-acao="fechar"]:hover { color: #f87171; background: rgba(248, 113, 113, .12); }

.tp-corpo { position: relative; flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.tp-redim { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 5; touch-action: none;
    background: linear-gradient(135deg, transparent 50%, rgba(251, 191, 36, .45) 50%, rgba(251, 191, 36, .45) 60%, transparent 60%, transparent 70%, rgba(251, 191, 36, .45) 70%, rgba(251, 191, 36, .45) 80%, transparent 80%); opacity: .5; transition: opacity .2s; }
.tp-painel:hover .tp-redim { opacity: 1; }

/* maximizado */
.tp-painel.tp-max { position: fixed; inset: 12px; z-index: 1090; grid-column: auto !important; grid-row: auto !important; border-color: rgba(251, 191, 36, .4); box-shadow: 0 30px 80px rgba(0, 0, 0, .8); }
.tp-painel.tp-max .tp-redim { display: none; }
body.tp-travado { overflow: hidden; }

/* gráfico */
.tp-grafico { position: absolute; inset: 22px 0 0 0; }
.tp-legenda { position: absolute; left: 10px; top: 4px; right: 70px; z-index: 3; font: 10.5px "JetBrains Mono", monospace; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tp-legenda b { color: #fff; }
.tp-legenda span { margin-left: 8px; }
.tp-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font: 11px "JetBrains Mono", monospace; color: #9ca3af; z-index: 4; background: rgba(9, 12, 18, .6); }
.tp-up { color: #00d26a !important; }
.tp-down { color: #ff433d !important; }

/* cotações */
.tp-tabela { font: 12px "JetBrains Mono", monospace; }
.tp-linha { display: grid; grid-template-columns: 1.1fr 1.2fr .8fr 22px; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .04); cursor: pointer; transition: background .15s; }
.tp-linha:hover { background: rgba(251, 191, 36, .06); }
.tp-linha--cab { position: sticky; top: 0; z-index: 1; cursor: default; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; background: #0d121a; }
.tp-linha--cab:hover { background: #0d121a; }
.tp-linha > span:nth-child(2), .tp-linha > span:nth-child(3) { text-align: right; }
.tp-ativo { font-weight: 700; color: #fff; }
.tp-ativo small { margin-left: 3px; font-weight: 400; font-size: 9px; color: #6b7280; }
.tp-preco { color: #e5e7eb; border-radius: 4px; padding: 1px 3px; }
.tp-pisca-up { animation: tp-pisca-up .6s ease; }
.tp-pisca-down { animation: tp-pisca-down .6s ease; }
@keyframes tp-pisca-up { 0% { background: rgba(0, 210, 106, .16); } 100% { background: transparent; } }
@keyframes tp-pisca-down { 0% { background: rgba(255, 67, 61, .16); } 100% { background: transparent; } }
.tp-rem { color: #4b5563; font-size: 11px; opacity: 0; transition: opacity .15s, color .15s; }
.tp-linha:hover .tp-rem { opacity: 1; }
.tp-rem:hover { color: #f87171; }
.tp-dica { margin: 8px 10px; font-size: 10px; color: #4b5563; }

/* indicadores */
.tp-inds { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 10px; }
.tp-ind { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .05); }
.tp-ind small { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.tp-ind b { font: 700 17px "JetBrains Mono", monospace; color: #fff; }
.tp-ind em { font-style: normal; font-size: 10.5px; color: #6b7280; }
.tp-barra { display: block; height: 4px; margin-top: 4px; border-radius: 4px; background: linear-gradient(90deg, #ff433d, #fbbf24, #00d26a); opacity: .35; position: relative; }
.tp-barra i { position: absolute; top: -3px; width: 2px; height: 10px; background: #fff; box-shadow: 0 0 6px #fff; left: 0; transition: left .6s; }
.tp-ind--fg .tp-barra { opacity: 1; background: linear-gradient(90deg, rgba(255, 67, 61, .5), rgba(251, 191, 36, .5), rgba(0, 210, 106, .5)); }
.tp-ind--fg .tp-barra i { width: 2px; left: auto; }

/* notícias */
.tp-noticias { display: flex; flex-direction: column; }
.tp-noticia { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .04); transition: background .15s; }
.tp-noticia:hover { background: rgba(251, 191, 36, .06); }
.tp-noticia span { font-size: 12px; line-height: 1.4; color: #e5e7eb; }
.tp-noticia small { font: 10px "JetBrains Mono", monospace; color: #6b7280; }

/* tablet e celular: colunas menores; no celular cada painel ocupa a largura toda */
@media (max-width: 1023px) {
    .tp-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .tp-painel { grid-column: span 6 !important; }
}
@media (max-width: 640px) {
    .tp-grid { grid-auto-rows: 150px; gap: 10px; }
    .tp-painel { grid-row: span 2 !important; }
    .tp-painel[data-tipo="grafico"] { grid-row: span 3 !important; }
    .tp-redim, .tp-botoes [data-acao="max"] { display: none; }
    .tp-extra .tp-simbolo { width: 84px; }
    #terminal-personalizavel .tp-sub { margin-left: 0; }
}
@media (hover: none) { .tp-rem { opacity: 1; } }

.tp-msg[hidden] { display: none; }