/* =====================================================================
   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): faixa da marca à esquerda (desktop) e o cartão do formulário */
.publico { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); background: var(--fundo); }
.publico-marca {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: var(--esp-6);
  padding: 4rem clamp(2rem, 5vw, 4.5rem); background: color-mix(in srgb, var(--marca-laranja) 7%, var(--superficie));
  border-right: 1px solid color-mix(in srgb, var(--marca-laranja) 18%, var(--borda));
}
.publico-logo { height: 64px; width: auto; align-self: flex-start; }
.publico-frase { margin: 0; max-width: 22rem; font-size: var(--fs-xl); line-height: 1.35; color: var(--texto); font-weight: 500; }
.publico-simbolo { position: absolute; right: -60px; bottom: -70px; width: 300px; height: auto; opacity: .12; transform: rotate(-8deg); }
.publico > main { align-self: center; justify-self: center; }  /* o cartão centraliza sem esticar até a altura da tela */
.cartao-login {
  width: min(420px, calc(100% - 2 * var(--gutter))); margin: 6vh 0; padding: var(--esp-8);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-painel);
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px rgb(0 0 0 / .06);
}
.cartao-login h1 { margin: 0 0 .2rem; font-size: var(--fs-2xl); }
.cartao-login .sub { color: var(--texto-2); margin: 0 0 var(--esp-6); }
.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); }
.cartao-login .btn:not(.btn-secundario):not(.btn-link) { background: var(--marca-laranja); color: #fff; min-height: 46px; font-size: var(--fs-md); font-weight: 600; }
.logo-login-caixa { display: none; }
.logo-login { display: block; height: 44px; width: auto; margin-bottom: var(--esp-6); }
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 5.5rem; }
.mostrar-senha { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); margin-top: .15rem; border: 0; background: none; color: var(--primaria); font: inherit; font-size: var(--fs-sm); font-weight: 600; padding: .35rem .5rem; cursor: pointer; border-radius: var(--raio-sm); }
.mostrar-senha:hover { background: var(--superficie-2); }
.publico-rodape { margin: var(--esp-5) 0 0; text-align: center; }
@media (max-width: 899px) {
  .publico { grid-template-columns: minmax(0, 1fr); }
  .publico-marca { display: none; }
  .logo-login-caixa { display: block; }
  .publico > main { align-self: start; }
  .cartao-login { margin: 8vh 0 4vh; padding: var(--esp-6) var(--esp-5); }
}
.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; }
.botao-otpauth { margin: var(--esp-2) 0; }
.chave-2fa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: var(--esp-3) 0 var(--esp-4); }
.chave-2fa .nota { flex-basis: 100%; margin: 0; }
.chave-2fa code { font-size: 1.05rem; letter-spacing: .08em; word-spacing: .25em; word-break: normal; overflow-wrap: normal; }
.cartao-login .chave-2fa .btn { width: auto; margin: 0; }
.cartao-login .lembrar-aparelho { display: flex; align-items: center; gap: var(--esp-2); font-weight: 500; }
.cartao-login .lembrar-aparelho input { display: inline; width: auto; margin: 0; }

/* Página: metas */
.metas-pagina .secao, .previa-metas { padding: var(--esp-4); margin-bottom: var(--esp-4); }
.metas-tabela input, .metas-percentuais input { width: 100%; min-width: 7.5rem; max-width: 11rem; text-align: right; font-variant-numeric: tabular-nums; }
.metas-tabela .campo-meta, .metas-percentuais .campo-meta { vertical-align: top; }
.metas-tabela .errorlist, .metas-percentuais .errorlist, .metas-tabela .erro-linha ul { margin: .2rem 0 0; padding: 0; list-style: none; color: var(--erro); font-size: var(--fs-xs); }
.metas-tabela .ficha-titulo .selo { display: block; width: fit-content; max-width: 18rem; margin: var(--esp-1, .25rem) 0 0; white-space: normal; }
.metas-tabela .ficha-acoes .btn { white-space: nowrap; }
.metas-tabela thead th { white-space: normal; max-width: 9rem; }  /* cabeçalhos longos quebram: 7 colunas cabem em 1110 px no mês em curso */
.metas-tabela input { min-width: 6.5rem; }
.metas-pagina input:disabled { background: transparent; border-color: transparent; color: var(--texto-2); cursor: not-allowed; opacity: 1; box-shadow: none; }
.previa-loja h3 { margin: 0 0 var(--esp-2); font-size: 1rem; }
.custo-previa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); margin: var(--esp-3) 0 0; }
.custo-previa dt { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-3); }
.custo-previa dd { margin: 0; display: flex; flex-direction: column; }
@media (max-width: 899px) {
  .metas-tabela input, .metas-percentuais input { min-width: 0; max-width: none; }
  table.fichas.metas-percentuais tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* mais específico que table.fichas tr */
  table.fichas.previa-tabela tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.fichas.metas-tabela tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* 3 campos por linha cortam o valor em 390 px */
  .custo-previa { grid-template-columns: minmax(0, 1fr); }
  .custo-previa > div { display: flex; flex-direction: column; gap: var(--esp-1, .25rem); }
  .custo-previa dd { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2); }
}