/* Mesa do Tunela — escuro, cara de terminal, mobile-first (390) e desktop (1280+: ROI | terminal lado a lado). */
:root {
  --bg: #07090c; --bg2: #0d1117; --bg3: #151b23; --linha: #222b36; --tx: #e6edf3; --tx2: #9aa7b4; --mudo: #66727f;
  --ver: #3fb950; --ama: #d29922; --verm: #f85149; --azul: #58a6ff; --pri: #7ee787;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --sans: -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
  --r: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font: 14px/1.45 var(--sans); }
body { min-height: 100dvh; padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
button, input, select { font: inherit; color: inherit; }
.mudo { color: var(--mudo); font-size: 12px; }
.marca { font: 600 15px var(--mono); letter-spacing: .12em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.marca b { color: var(--pri); font-weight: 600; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--pri); box-shadow: 0 0 10px var(--pri); }

.bt { background: var(--bg3); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.bt:hover { border-color: var(--tx2); } .bt:disabled { opacity: .5; cursor: default; }
.bt.sm { padding: 5px 10px; font-size: 13px; } .bt.pri { background: #1a3a22; border-color: #2e6b3a; color: var(--pri); }
.bt.perigo { color: var(--verm); } .bt.fantasma { background: none; }

/* topo */
.topo { position: sticky; top: 0; z-index: 5; background: rgba(7, 9, 12, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; }
.per { display: flex; gap: 4px; order: 3; width: 100%; overflow-x: auto; }
.per button { background: none; border: 1px solid var(--linha); border-radius: 999px; padding: 4px 12px; cursor: pointer; color: var(--tx2); white-space: nowrap; }
.per button.ativa { color: var(--bg); background: var(--pri); border-color: var(--pri); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topo-dir select { background: var(--bg3); border: 1px solid var(--linha); border-radius: 8px; padding: 5px 6px; max-width: 140px; }

/* layout */
.mesa { padding: 12px 16px; }
.col-term { display: none; }
body.ver-term .col-roi { display: none; } body.ver-term .col-term { display: flex; }
.abas-cel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; background: var(--bg2); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.abas-cel button { flex: 1; background: none; border: 0; padding: 14px 0; color: var(--tx2); font: 600 13px var(--mono); letter-spacing: .08em; }
.abas-cel button.ativa { color: var(--pri); }
@media (min-width: 1100px) {
  body { padding-bottom: 0; } .abas-cel { display: none; }
  .per { order: 0; width: auto; }
  .mesa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(460px, 44%); gap: 16px; height: calc(100dvh - 54px); padding: 12px 16px; }
  .col-roi { overflow-y: auto; padding-right: 4px; display: block !important; }
  .col-term { display: flex !important; height: 100%; }
}

/* ROI */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--bg2); border: 1px solid var(--linha); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.kpi .l { color: var(--tx2); font-size: 12px; } .kpi .v { font: 600 20px var(--mono); margin: 2px 0; overflow-wrap: anywhere; } .kpi .d { color: var(--mudo); font-size: 11.5px; }
h2 { font: 600 12px var(--mono); letter-spacing: .12em; color: var(--tx2); text-transform: uppercase; margin: 18px 0 8px; }
.acao { background: var(--bg2); border: 1px solid var(--linha); border-left: 3px solid var(--ama); border-radius: var(--r); padding: 12px; margin-bottom: 8px; }
.acao.alta { border-left-color: var(--verm); } .acao .cab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; }
.acao .tit { font-weight: 600; margin: 6px 0; overflow-wrap: anywhere; } .acao ul { margin: 0 0 6px 18px; padding: 0; color: var(--tx2); font-size: 13px; }
.acao .prop { font-size: 13px; } .acao .bts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.selo { font: 600 11px var(--mono); padding: 2px 7px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--linha); color: var(--tx2); }
.selo.ok { color: var(--ver); border-color: #24502e; } .selo.ama { color: var(--ama); border-color: #5a4313; } .selo.verm { color: var(--verm); border-color: #6b2522; } .selo.azul { color: var(--azul); border-color: #1f4b7a; }
.dinheiro { font: 600 13px var(--mono); color: var(--pri); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th { color: var(--tx2); font-weight: 500; font-size: 12px; background: var(--bg2); } td.n, th.n { text-align: right; font-family: var(--mono); }
tr.clica { cursor: pointer; } tr.clica:hover td { background: var(--bg3); }
.vazio { color: var(--tx2); padding: 18px; text-align: center; border: 1px dashed var(--linha); border-radius: var(--r); }
.obs li { margin-bottom: 6px; color: var(--tx2); font-size: 13px; }
.carregando { color: var(--tx2); padding: 30px 0; text-align: center; font-family: var(--mono); }

/* terminal */
.col-term { flex-direction: column; gap: 8px; height: calc(100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.term-topo { display: flex; gap: 6px; align-items: center; }
.sessoes { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; }
.sessoes button { background: var(--bg2); border: 1px solid var(--linha); border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; font: 12.5px var(--mono); color: var(--tx2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sessoes button.ativa { color: var(--pri); border-color: #2e6b3a; }
.xterm-box { flex: 1; min-height: 240px; background: #000; border: 1px solid var(--linha); border-radius: var(--r); padding: 6px; overflow: hidden; position: relative; }
.vazio-term { color: var(--tx2); text-align: center; padding: 40px 16px; font-family: var(--mono); font-size: 13px; }
.manda { display: flex; gap: 6px; } .manda input { flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .7); display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal-caixa { background: var(--bg2); border: 1px solid var(--linha); border-radius: 14px 14px 0 0; width: 100%; max-width: 900px; max-height: 88dvh; overflow-y: auto; padding: 16px; position: relative; }
@media (min-width: 700px) { .modal { align-items: center; } .modal-caixa { border-radius: 14px; } }
.fecha { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 24px; color: var(--tx2); cursor: pointer; }
.abas { display: flex; gap: 4px; overflow-x: auto; margin: 10px 0; }
.abas button { background: none; border: 1px solid var(--linha); border-radius: 8px; padding: 5px 10px; color: var(--tx2); cursor: pointer; white-space: nowrap; }
.abas button.ativa { color: var(--pri); border-color: #2e6b3a; }
.bolhas { display: flex; flex-direction: column; gap: 6px; }
.bolha { max-width: 86%; padding: 6px 10px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.bolha.lead { align-self: flex-start; background: var(--bg3); } .bolha.bot { align-self: flex-end; background: #13261a; }
.bolha small { display: block; color: var(--mudo); font-size: 11px; margin-top: 2px; }
.campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .campo input, .campo textarea { background: var(--bg); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; width: 100%; }
.campo textarea { min-height: 120px; font-family: var(--mono); font-size: 12.5px; }

/* login */
.tela-login { display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.login form { display: flex; flex-direction: column; gap: 10px; } .login label { display: flex; flex-direction: column; gap: 4px; color: var(--tx2); font-size: 13px; }
.login input { background: var(--bg2); border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; color: var(--tx); }
.login button { background: #1a3a22; border: 1px solid #2e6b3a; color: var(--pri); border-radius: 8px; padding: 10px; cursor: pointer; font-weight: 600; }
.erro { color: var(--verm); min-height: 1em; margin: 0; } .dica { color: var(--mudo); font-size: 12px; margin: 0; }
/* seções do resto do Tunela (extras) */
.secao { background: var(--bg2); border: 1px solid var(--linha); border-radius: var(--r); margin: 10px 0; }
.secao > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; font: 600 12.5px var(--mono); letter-spacing: .06em; color: var(--tx2); text-transform: uppercase; }
.secao > summary::-webkit-details-marker { display: none; }
.secao[open] > summary { border-bottom: 1px solid var(--linha); color: var(--tx); }
.secao > div, .secao > .tbl-wrap, .secao > .vazio { margin: 10px; } .secao h3 { font-size: 13px; margin: 12px 0 6px; } .secao .tbl-wrap td { white-space: normal; min-width: 70px; }
.horas { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 90px; align-items: end; margin: 10px; }
.hora { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.hora i { display: block; width: 100%; background: var(--pri); opacity: .75; border-radius: 2px 2px 0 0; } .hora span { font: 9px var(--mono); color: var(--mudo); height: 11px; }
/* abas do ROI (24/10: "organiza por tabs tudo") */
.abas-roi { position: sticky; top: var(--topo-h, 104px); z-index: 4; display: flex; gap: 4px; overflow-x: auto; background: var(--bg); padding: 8px 0; margin: 4px 0 6px; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.abas-roi::-webkit-scrollbar { display: none; }
.abas-roi button { flex: 0 0 auto; background: none; border: 1px solid var(--linha); border-radius: 999px; padding: 6px 12px; color: var(--tx2); cursor: pointer; white-space: nowrap; font: 600 12.5px var(--mono); display: inline-flex; align-items: center; gap: 6px; }
.abas-roi button.ativa { color: var(--bg); background: var(--pri); border-color: var(--pri); }
.abas-roi button.ativa .selo { background: rgba(0,0,0,.25); color: var(--bg); border-color: transparent; }
.aba-corpo h2 { display: flex; align-items: center; gap: 8px; }
.aba-corpo > .tbl-wrap, .aba-corpo > div { margin-bottom: 8px; }
@media (min-width: 1100px) { .abas-roi { top: 0; } }