/* =====================================================================
   TEMPLATES — esqueletos de página: onde cada organismo se encaixa.
   layout do app (menu + conteúdo + barra inferior) · layout público (login)
   ===================================================================== */

/* Layout do app */
.app { display: grid; grid-template-columns: var(--lateral-largura) minmax(0, 1fr); min-height: 100vh; background: var(--fundo); }
.conteudo { width: 100%; max-width: 1280px; padding: 1.75rem var(--esp-8) 4rem; }

/* Layout público (login, verificação em duas etapas) */
.cartao-login { max-width: 400px; margin: 10vh auto; margin-inline: max(var(--gutter), calc((100% - 400px) / 2)); padding: var(--esp-8) 0; }
.cartao-login .sub { color: var(--texto-2); }
.cartao-login label { display: block; margin-bottom: var(--esp-4); font-weight: 500; font-size: .9rem; }
.cartao-login input { display: block; width: 100%; margin-top: .3rem; }
.cartao-login .btn { width: 100%; margin-top: var(--esp-1); }
.logo-login { display: block; height: 44px; width: auto; margin-bottom: var(--esp-6); }
.qr { display: block; margin: var(--esp-4) 0; background: #fff; padding: var(--esp-2); border-radius: var(--raio-sm); }
.chave { word-break: break-all; }
.codigos { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.logo-escuro { display: none !important; }
@media (prefers-color-scheme: dark) { .tem-escuro .logo-claro { display: none !important; } .tem-escuro .logo-escuro { display: block !important; } }

@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .conteudo { padding: var(--esp-4) var(--gutter) calc(var(--abas-altura) + env(safe-area-inset-bottom) + var(--esp-5)); }
  body.menu-aberto { overflow: hidden; }
}

/* Página: catálogo de componentes */
.catalogo h3, .conteudo > h3 { margin: var(--esp-5) 0 var(--esp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.catalogo h3:first-of-type { margin-top: 0; }
.catalogo-rotulo { margin: var(--esp-6) 0 var(--esp-2); }
.catalogo-rotulo h2 { margin: 0; }
.amostras-token { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-2); }
.token { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--fs-xs); }
.token-cor { width: 28px; height: 28px; border-radius: var(--raio-sm); border: 1px solid var(--borda); flex: none; }