/* layout.css — a casca da aplicação: lateral, topo, vistas e grades. */

.app{display:grid;grid-template-columns:var(--lateral) 1fr;min-height:100vh}

/* ───────────────────────────────── lateral ───────────────────────────────── */
.lateral{
  background:var(--superficie);
  border-right:1px solid var(--linha);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  z-index:60;
}
.marca{display:flex;align-items:center;gap:11px;padding:19px 17px 16px;border-bottom:1px solid var(--linha-2)}
/* A logo vem em duas versões, uma para cada tema. Trocar a imagem em vez de
   filtrar a mesma preserva o contraste que o arquivo original tem.

   Regra própria, e não .selo: o selo é um rótulo, com recheio, fundo e borda.
   Com box-sizing:border-box o recheio comia a largura por dentro, e a arte
   aparecia minúscula no meio de uma caixa cinza. Aqui a imagem ocupa o
   quadrado inteiro — o arquivo já é 1:1 e sangra até a borda, então cover
   preenche sem cortar nada. */
.logo-marca{
  width:38px;height:38px;flex:none;
  padding:0;border:0;background:none;
  border-radius:10px;object-fit:cover;display:block;
}
.marca b{display:block;font-family:var(--f-titulo);font-size:14px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.marca span{display:block;font-size:11.5px;color:var(--tinta-3);line-height:1.3}

.nav{flex:1;overflow-y:auto;padding:13px 11px}
.nav-grupo{padding:14px 9px 6px}
.nav button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:var(--r-sm);
  color:var(--tinta-2);font-size:13.5px;font-weight:500;text-align:left;
  transition:background var(--t),color var(--t);
}
.nav button:hover{background:var(--superficie-3);color:var(--tinta)}
.nav button.ativo{background:var(--marca-suave);color:var(--marca-3);font-weight:600}
.nav button.ativo svg{color:var(--marca)}
.nav button svg{color:var(--tinta-3);flex:none}
.nav button .conta{
  margin-left:auto;font-family:var(--f-mono);font-size:10.5px;
  background:var(--superficie-3);color:var(--tinta-3);
  padding:1px 6px;border-radius:99px;font-weight:500;
}
.nav button.ativo .conta{background:#fff;color:var(--marca-2)}
:root[data-tema="escuro"] .nav button.ativo .conta{background:var(--superficie)}

.lateral-pe{border-top:1px solid var(--linha-2);padding:12px 13px 14px;display:grid;gap:9px}
.base-estado{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--tinta-2);line-height:1.4}
.base-estado .ponto{width:7px;height:7px;border-radius:99px;background:var(--neutro);margin-top:5px;flex:none}
.base-estado.ok .ponto{background:var(--ok)}
.base-estado.erro .ponto{background:var(--alerta)}

/* A assinatura no pé da lateral. Fica depois do botão de tema porque é a
   informação menos acionável da coluna: identifica, não pede clique. */
.marca-pe{
  display:flex;align-items:center;gap:8px;
  padding-top:10px;border-top:1px solid var(--linha-2);
}
.marca-pe .logo-pe{
  width:22px;height:22px;flex:none;
  padding:0;border:0;background:none;
  border-radius:6px;object-fit:cover;display:block;
}
.marca-pe span{font-size:10.5px;color:var(--tinta-3);line-height:1.35;min-width:0}
.marca-pe b{display:block;font-size:11px;font-weight:600;color:var(--tinta-2)}

/* ────────────────────────────────── principal ────────────────────────────── */
.area-principal{min-width:0;display:flex;flex-direction:column}

.topo{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--fundo) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
  padding:16px 28px;
}
.topo-linha{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
/* min-width impede que o título seja espremido pelos botões: em tela estreita
   as ações quebram para a linha de baixo em vez de partir o texto palavra a palavra */
.topo-titulo{flex:1 1 300px;min-width:min(300px,100%)}
.topo-titulo p{margin-top:3px;font-size:13px;color:var(--tinta-2);max-width:74ch}
.topo-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.conteudo{padding:24px 28px 80px;max-width:1220px;width:100%;margin:0 auto;flex:1}
.conteudo.largo{max-width:1560px}

.vista{display:none}
.vista.ativa{display:block;animation:surge .24s ease}
@keyframes surge{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ───────────────────────────────── grades ───────────────────────────────── */
.grade{display:grid;gap:14px}
.grade.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grade.principal-lateral{grid-template-columns:minmax(0,1fr) 340px;align-items:start}

.pilha{display:grid;gap:14px}
.pilha.apertada{gap:9px}
.linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.linha.topo-alinhado{align-items:flex-start}
.espaco{flex:1}

/* ─────────────────────────────── responsivo ─────────────────────────────── */
@media (max-width:1180px){
  .grade.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grade.principal-lateral{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .lateral{
    position:fixed;inset:0 auto 0 0;width:260px;
    transform:translateX(-100%);transition:transform var(--t);
    box-shadow:var(--sombra-3);
  }
  .app.menu-aberto .lateral{transform:none}
  .cobertura{
    position:fixed;inset:0;background:rgba(10,14,26,.5);z-index:55;
    opacity:0;pointer-events:none;transition:opacity var(--t);
  }
  .app.menu-aberto .cobertura{opacity:1;pointer-events:auto}
  .botao-menu{display:inline-flex !important}
  .conteudo,.topo{padding-left:18px;padding-right:18px}
  .grade.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .grade.c2,.grade.c3,.grade.c4{grid-template-columns:minmax(0,1fr)}
  .conteudo,.topo{padding-left:14px;padding-right:14px}
  h1{font-size:21px}
}
.botao-menu{display:none}
.cobertura{display:none}
@media (max-width:980px){.cobertura{display:block}}