/* AS SEÇÕES DO PAINEL (ver secoes.js). Usa os tokens do index.html: --vidro*, --accent, --muted…
   Nada aqui redefine cor: tudo vem de lá, então as seções nascem no mesmo vidro do terminal. */

/* ---------- a fileira de seções, na lateral ------------------------------------------------------
   Um controle SEGMENTADO: um trilho rebaixado e a seção atual como a única peça de vidro em cima
   dele, com o ícone aceso. Ícones de traço (o sprite no index.html), todos do mesmo desenho. */
#secoes {
  /* Oito peças em 246px não cabem numa fileira sem cortar rótulo (com a Galeria, "Ajustes" saía pela
     borda): eram duas fileiras de quatro. Com o Palco (17/10) são nove — três de três, todas da mesma
     largura (4+4+1 deixava uma peça sozinha embaixo; cinco por fileira cortava "Terminal"). */
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px 0;
  margin:0 8px 10px; padding:2px; border-radius:14px;
  background:rgba(2,5,12,.38); border:1px solid var(--vidro-brd);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
#secoes button {
  display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0;
  padding:7px 0 5px; border:1px solid transparent; border-radius:11px;
  background:none; color:var(--muted); cursor:pointer; font:inherit; font-size:10px; font-weight:500; letter-spacing:-.15px;
  transition:color .15s, background .15s, border-color .15s, box-shadow .15s;
}
#secoes button span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#secoes button:hover { color:var(--text); }
#secoes button.on {
  color:var(--text); background:var(--vidro-leve); border-color:var(--vidro-brd);
  box-shadow:var(--vidro-topo), 0 6px 16px rgba(0,0,0,.28);
}
#secoes button.on svg.ic { color:var(--accent); filter:drop-shadow(0 0 6px rgba(56,189,248,.45)); }
#secoes button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ---------- o palco ------------------------------------------------------------------------------ */
#secao {
  flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column;
  background:var(--vidro); border:1px solid var(--vidro-brd); border-radius:16px;
  -webkit-backdrop-filter:var(--desfoque); backdrop-filter:var(--desfoque);
  box-shadow:var(--vidro-topo), 0 18px 50px rgba(0,0,0,.35); overflow:hidden;
}
#secao[hidden], #main[hidden], #chat[hidden], #chatFundo[hidden] { display:none !important; }
.sec-quadro { flex:1; min-height:0; display:flex; flex-direction:column; }
.sec-quadro[hidden] { display:none; }
.sec-topo {
  display:flex; align-items:center; gap:10px; padding:12px 16px; min-height:56px;
  border-bottom:1px solid var(--vidro-brd); flex-wrap:wrap;
}
.sec-topo h1 { margin:0; font-size:15.5px; font-weight:500; letter-spacing:-.1px; flex:1; min-width:0;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec-topo svg.sec-ic { color:var(--accent); filter:drop-shadow(0 0 6px rgba(56,189,248,.35)); }
svg.ic { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
/* Sem a faixa de título no largo: a lateral já diz em que seção se está, e a lista tem cabeçalho. */
@media (min-width:861px) { .sec-quadro.sem-topo > .sec-topo { display:none; } }
.sec-acoes { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.sec-hamb { display:none !important; }
/* O ☰ das seções: o `.hamb` do index.html só vale dentro do #topbar do terminal. */
.sec-topo button.sec-hamb {
  align-items:center; justify-content:center; width:36px; height:36px; padding:0; flex-shrink:0;
  border:1px solid var(--vidro-brd); border-radius:10px; background:var(--vidro-leve); color:var(--text);
  font-size:16px; cursor:pointer; box-shadow:var(--vidro-topo);
}
.sec-topo button.sec-hamb:hover { border-color:var(--accent); color:var(--accent); }
.sec-corpo { flex:1; min-height:0; overflow:auto; position:relative; }
@media (max-width:860px) {
  .sec-hamb { display:inline-flex !important; }
  .sec-topo { padding:10px 12px; }
}

/* ---------- kit: lista + detalhe ----------------------------------------------------------------- */
/* Duas colunas no largo; no estreito uma de cada vez — quem alterna é a classe .detalhe no container. */
.s-duas { display:grid; grid-template-columns:minmax(260px, 320px) minmax(0, 1fr); height:100%; min-height:0; }
.s-duas > .s-col-lista { border-right:1px solid var(--vidro-brd); display:flex; flex-direction:column; min-height:0; }
.s-duas > .s-col-detalhe { display:flex; flex-direction:column; min-height:0; min-width:0; }
.s-voltar { display:none !important; }
@media (max-width:860px) {
  .s-duas { grid-template-columns:minmax(0, 1fr); }
  .s-duas > .s-col-lista { border-right:none; }
  .s-duas:not(.detalhe) > .s-col-detalhe { display:none; }
  .s-duas.detalhe > .s-col-lista { display:none; }
  .s-voltar { display:inline-flex !important; }
}

.s-lista { flex:1; min-height:0; overflow:auto; padding:6px; display:flex; flex-direction:column; gap:2px; }
.s-item {
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:11px; cursor:pointer;
  border:1px solid transparent; background:none; color:var(--text); font:inherit;
}
.s-item:hover { background:var(--vidro-leve); }
.s-item.on { background:var(--vidro-leve); border-color:var(--vidro-brd); box-shadow:var(--vidro-topo); }
.s-item-tit { font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.s-item-sub { margin-top:2px; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis;
              display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.s-item-meta { margin-top:5px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* Rótulo de grupo na gramática do instrumento: mono, caixa-alta, bem espaçado (igual às leituras da
   home do app). É o que faz o painel e o celular parecerem o mesmo produto. */
.s-grupo { font-family:var(--mono); font-size:9.5px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); padding:12px 12px 4px; }
.s-busca { margin:10px 10px 4px; width:auto; }

.s-vazio { padding:40px 20px; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:8px; }
.s-vazio b { color:var(--text); font-size:15px; font-weight:600; }
.s-vazio p { margin:0; max-width:36ch; font-size:13px; }
.s-vazio i { font-style:normal; font-size:28px; opacity:.8; }
.s-carregando { padding:30px; text-align:center; color:var(--muted); font-size:13px; }

.s-pad { padding:18px 20px 40px; max-width:820px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:860px) { .s-pad { padding:14px 12px 32px; } }

/* ---------- kit: peças ---------------------------------------------------------------------------- */
.s-card {
  border:1px solid var(--vidro-brd); border-radius:14px; padding:16px; background:var(--vidro-leve);
  box-shadow:var(--vidro-topo); display:flex; flex-direction:column; gap:12px; min-width:0;
}
.s-card h2 { margin:0; font-size:14.5px; font-weight:650; }
.s-card p { margin:0; color:var(--muted); font-size:13px; }
.s-linha { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.s-linha.entre { justify-content:space-between; }
.s-espaco { flex:1; }
.s-campo { display:flex; flex-direction:column; gap:6px; min-width:0; }
.s-campo label { margin:0; font-size:12px; color:var(--muted); }
.s-campo select, select.s-select {
  width:100%; padding:10px 12px; background:rgba(2,5,12,.5); color:var(--text);
  border:1px solid var(--vidro-brd); border-radius:10px; font:inherit; outline:none;
}
.s-campo select:focus, select.s-select:focus { border-color:var(--accent); }
.s-dica { font-size:12px; color:var(--muted); }
.s-erro { color:var(--err); font-size:13px; }

.s-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 13px; min-height:36px;
  border-radius:10px; border:1px solid var(--vidro-brd); background:var(--vidro-leve); color:var(--text);
  font:inherit; font-size:13px; font-weight:550; cursor:pointer; box-shadow:var(--vidro-topo);
  transition:border-color .15s, color .15s, background .15s; white-space:nowrap;
}
.s-btn:hover { border-color:var(--accent); color:var(--accent); }
.s-btn:disabled { opacity:.45; cursor:default; pointer-events:none; }
.s-btn.s-prim {
  background:linear-gradient(rgba(56,189,248,.28), rgba(56,189,248,.18)); border-color:rgba(56,189,248,.55);
  color:#dff4ff; font-weight:650; box-shadow:var(--vidro-topo), 0 6px 18px rgba(56,189,248,.14);
}
.s-btn.s-prim:hover { color:#fff; border-color:var(--accent); background:linear-gradient(rgba(56,189,248,.38), rgba(56,189,248,.26)); }
.s-btn.s-perigo { color:var(--err); }
.s-btn.s-perigo:hover { border-color:var(--err); color:var(--err); }
.s-btn.s-perigo-cheio { background:var(--err); border-color:var(--err); color:#1a0606; font-weight:650; }
.s-btn.s-icone { padding:0; width:36px; }
.s-btn:focus-visible, .s-item:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

.s-chip {
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11.5px;
  border:1px solid var(--linha-fraca); color:var(--muted); white-space:nowrap;
}
.s-chip.ok { color:var(--ok); border-color:rgba(45,212,167,.45); }
.s-chip.warn { color:var(--warn); border-color:rgba(245,181,68,.45); }
.s-chip.err { color:var(--err); border-color:rgba(248,113,113,.45); }
.s-chip.ac { color:var(--accent); border-color:var(--line); }
button.s-chip { background:none; cursor:pointer; font:inherit; font-size:11.5px; }
button.s-chip.on { background:var(--accent); border-color:var(--accent); color:#04121f; font-weight:600; }

.s-medidor { height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.s-medidor > i { display:block; height:100%; border-radius:99px; background:var(--accent); }
.s-medidor.warn > i { background:var(--warn); }
.s-medidor.err > i { background:var(--err); }
.s-num { font-variant-numeric:tabular-nums; }

/* ---------- cabeçalho de lista e botão de ícone ---------------------------------------------------- */
.s-lista-topo { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 10px 4px 16px; }
.s-lt-rot { font-size:10.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.s-lt-conta { font-size:10.5px; font-weight:600; color:var(--muted); opacity:.75; font-variant-numeric:tabular-nums; }
.s-lt-conta:empty { display:none; }
.s-ib {
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; padding:0;
  border:1px solid transparent; border-radius:10px; background:none; color:var(--muted); cursor:pointer;
  transition:color .15s, background .15s, border-color .15s;
}
.s-ib:hover { color:var(--text); background:rgba(255,255,255,.06); }
.s-ib.on { color:var(--warn); }
.s-ib.s-ib-ac { color:var(--accent); }
.s-ib.s-ib-ac:hover { background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.35); }
.s-ib.s-ib-perigo:hover { color:var(--err); background:rgba(248,113,113,.1); }
.s-ib:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.s-ib:disabled { opacity:.4; pointer-events:none; }
.s-busca-wrap { position:relative; margin:2px 10px 6px; }
.s-busca-wrap svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.s-busca-wrap input { margin:0; width:100%; padding:9px 12px 9px 34px; font-size:13.5px; border-radius:11px; }

/* ---------- diálogo e aviso ----------------------------------------------------------------------- */
.s-overlay { z-index:60; padding:16px; background:rgba(2,5,12,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.s-dialogo { width:min(460px, 100%); display:flex; flex-direction:column; gap:14px; }
.s-dialogo-corpo { display:flex; flex-direction:column; gap:12px; }
.s-dialogo-texto { margin:0; color:var(--muted); line-height:1.5; }
.s-dialogo-acoes { display:flex; justify-content:flex-end; gap:8px; }

#secAviso {
  position:fixed; left:50%; bottom:22px; z-index:70; transform:translate(-50%, 12px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:12px; max-width:calc(100% - 32px); padding:10px 12px 10px 16px;
  border-radius:12px; background:var(--vidro-denso); border:1px solid var(--vidro-brd); color:var(--text);
  -webkit-backdrop-filter:var(--desfoque); backdrop-filter:var(--desfoque);
  box-shadow:var(--vidro-topo), 0 16px 40px rgba(0,0,0,.45); font-size:13.5px; transition:opacity .18s, transform .18s;
}
#secAviso.on { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
#secAviso.erro { border-color:rgba(248,113,113,.5); }
#secAviso.erro span::before { content:"⚠ "; color:var(--err); }
#secAviso button { border:none; background:none; color:var(--accent); font:inherit; font-weight:650; cursor:pointer; padding:4px 6px; }

@media (prefers-reduced-motion: reduce) { #secAviso, #secoes button, #sideFim button { transition:none; } }