/* UIX01 / HANDOFF-056 Fase 2 — shell (topo horizontal) e telas de autenticação.
   Substitui a barra lateral escura, que sai do base.css junto com esta entrega.

   ⚠️ REGRA DA DEC-0024, que é o critério que mais pesa nesta fase: NENHUMA região
   tem paleta própria. Tudo aqui usa os tokens de PÁGINA (--u-*). Não existe
   --u-topo-*, --u-shell-* nem equivalente — foi exatamente esse tipo de token que
   produziu o defeito que a DEC-0024 corrigiu.

   INVARIANTE DE FLAG: o shell só é renderizado com UIX01_SHELL_ENABLED ON, e essa
   flag só tem efeito com UIX01_TOKENS_ENABLED ON (dependência no código, travada por
   teste — ver features.js e a suíte da fase). Logo, quando qualquer regra daqui se
   aplica, os tokens existem. Mesmo assim o fundo e a cor da própria barra levam
   fallback: uma barra invisível é a falha mais cara possível, e custa nada evitá-la.

   MEDIDAS: vêm do artboard aprovado (DEC-0022 §D1), não de aproximação. */

/* ============================ topo ============================ */
.topo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 28px;
  background: var(--u-superficie, #fff);
  color: var(--u-texto, #222);
  border-bottom: 1px solid var(--u-linha, #d9dde1);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topo-logo { display: flex; align-items: center; margin-right: 32px; flex-shrink: 0 }
.topo-logo img { height: 22px; display: block }
.topo-logo a { display: flex; align-items: center; text-decoration: none }

/* A MARCA ACOMPANHA O TEMA. As duas variantes ficam no DOM e quem escolhe e o CSS:
   trocar o `src` em JS pisca a imagem enquanto a nova carrega, e a marca e
   justamente o que denuncia uma regiao que nao alternou (DEC-0024).
   `-dark` = arte para superficie ESCURA (e o uso que a barra lateral ja fazia). */
/* CADLOG01/G3 (achado do owner): `.topo-logo img{display:block}` e
   `.auth-topo img{display:block}` (0,1,1) venciam `.logo-escuro{display:none}`
   (0,1,0) e as DUAS variantes apareciam — a escura tem o texto branco (invisível
   no claro) e sobrava um 2º glifo à direita do nome, no topo E no login.
   Classe dobrada (0,2,0) vence os dois `img` de contêiner em qualquer ordem
   do arquivo — sem !important. */
.logo-escuro.logo-escuro { display: none }
:root[data-theme="dark"] .logo-claro.logo-claro { display: none }
:root[data-theme="dark"] .logo-escuro.logo-escuro { display: block }

.topo-nav { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0 }

.topo-item {
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--u-texto-2);
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.topo-item:hover { background: var(--u-hover) }
.topo-item.ativo {
  background: var(--u-verde-fundo);
  /* ⚠️ --u-verde-ink, nao --u-verde-texto: aqui o texto esta sobre o TINTE verde,
     onde o verde de texto mede 4,25. Mesmo defeito que a Fase 1 corrigiu no badge. */
  color: var(--u-verde-ink);
  font-weight: 600;
}
.topo-item:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }

/* ---- menu "Mais" ---- */
.topo-mais { position: relative }
.topo-mais-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  background: var(--u-superficie);
  border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 6px;
  z-index: 50;
}
.topo-mais-lista a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--u-texto);
  text-decoration: none;
}
.topo-mais-lista a:hover { background: var(--u-hover) }
.topo-mais-grupo {
  padding: 10px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--u-linha);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--u-texto-2);
}

/* ---- seletor de tema (pílula, dois botões) ---- */
.topo-tema {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--u-linha);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
.topo-tema button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--u-texto-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.topo-tema button[aria-pressed="true"] {
  background: var(--u-verde-fundo);
  color: var(--u-verde-ink); /* idem: texto sobre tinte */
}
.topo-tema button:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 1px }

/* ---- usuário ---- */
.topo-user { position: relative; flex-shrink: 0 }
.topo-user-bt {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
}
.topo-user-bt:hover { background: var(--u-hover) }
.topo-user-bt:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }
.topo-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--u-verde-fundo);
  color: var(--u-verde-ink); /* idem: iniciais sobre tinte */
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topo-user-nome {
  font-size: 13px;
  color: var(--u-texto-2);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo-user-lista {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--u-superficie);
  border: 1px solid var(--u-linha);
  border-radius: var(--u-raio-cartao, 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 6px;
  z-index: 50;
}
.topo-user-lista .email {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--u-texto-2);
  border-bottom: 1px solid var(--u-linha);
  margin-bottom: 4px;
  word-break: break-all;
}
.topo-user-lista button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--u-texto);
  cursor: pointer;
}
.topo-user-lista button:hover { background: var(--u-hover) }

/* ---- botão de menu recolhido (só no estreito) ---- */
.topo-hamburguer { display: none }

/* ============================ responsivo ============================ */
/* O breakpoint de 820px que empilhava a barra lateral saiu do base.css; o topo tem
   o seu próprio comportamento e em NENHUMA largura reaparece barra lateral. */
@media (max-width: 820px) {
  .topo { padding: 0 14px; gap: 6px }
  .topo-logo { margin-right: 10px }
  .topo-hamburguer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--u-linha);
    border-radius: 8px;
    background: none;
    color: var(--u-texto);
    font-size: 17px;
    cursor: pointer;
  }
  .topo-nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px 14px 14px;
    background: var(--u-superficie);
    border-bottom: 1px solid var(--u-linha);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  }
  .topo-nav.aberto { display: flex }
  .topo-item { min-height: 44px; display: flex; align-items: center }
  .topo-mais { position: static }
  .topo-mais-lista { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0 }
  .topo-mais-lista a { min-height: 44px }
  .topo-user-nome { display: none }
}

/* Ponteiro grosso: alvo mínimo de 44px em qualquer largura (HANDOFF-056 §5).
   No desktop com mouse vale a densidade do mockup (34px de altura, ≥8px de folga
   entre alvos), que é o que o artboard aprovado desenha. */
@media (pointer: coarse) {
  .topo-item, .topo-mais-lista a, .topo-user-lista button { min-height: 44px; display: flex; align-items: center }
  .topo-tema button { width: 44px; height: 44px }
  .topo-user-bt { min-height: 44px }
}

/* Com a lateral fora de cena o conteudo tem a largura toda; sem isto ele ficaria
   colado a esquerda numa janela larga, porque `.main` tem max-width mas nao centro. */
.sidebar[hidden] + .main { margin-inline: auto; width: 100% }

/* ============================ telas de autenticação ============================ */
/* Pré-sessão: mesmo vocabulário do resto (superfície, linha, campos de 48px), sem
   inventar layout. O topo aparece reduzido — só a marca — porque não há navegação
   nem usuário antes da sessão. */
.auth-topo {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 28px;
  border-bottom: 1px solid var(--u-linha, #d9dde1);
  background: var(--u-superficie, #fff);
}
.auth-topo img { height: 22px; display: block }

.auth-wrap {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 16px 24px;
  background: var(--u-fundo, #f5f6f7);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--u-superficie, #fff);
  border: 1px solid var(--u-linha, #d9dde1);
  border-radius: var(--u-raio-cartao, 10px);
  padding: 32px 28px;
}
.auth-card.larga { max-width: 640px }
.auth-card h1 { font-size: 20px; margin: 0 0 6px; color: var(--u-texto) }
.auth-card .auth-sub { font-size: 13px; color: var(--u-texto-2); margin: 0 0 22px }

.auth-campo { display: block; margin-bottom: 14px }
.auth-campo > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--u-texto-2);
  margin-bottom: 6px;
}
.auth-inp {
  width: 100%;
  height: var(--u-altura-campo, 48px);
  padding: 0 13px;
  font: inherit;
  font-size: 14px;
  color: var(--u-texto);
  background: var(--u-superficie);
  border: 1px solid var(--u-linha-forte);
  border-radius: var(--u-raio-controle, 8px);
}
.auth-inp:focus {
  outline: 0;
  border-color: var(--u-verde-marca);
  box-shadow: 0 0 0 3px var(--u-verde-fundo);
}
.auth-inp[disabled] { background: var(--u-hover); color: var(--u-texto-2) }

.auth-bt {
  width: 100%;
  min-height: var(--u-altura-campo, 48px);
  margin-top: 6px;
  border: 0;
  border-radius: var(--u-raio-controle, 8px);
  background: var(--u-verde-marca);
  color: var(--u-marca-ink, #fff);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.auth-bt[disabled] { background: var(--u-hover); color: var(--u-tinte-ink); cursor: not-allowed }
.auth-bt:focus-visible { outline: 2px solid var(--u-verde-marca); outline-offset: 2px }

.auth-link {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--u-verde-texto);
  text-decoration: underline;
}
.auth-msg {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--u-raio-controle, 8px);
  font-size: 13px;
  line-height: 1.5;
}
.auth-msg.erro { background: var(--u-erro-fundo); border: 1px solid var(--u-erro); color: var(--u-erro) }
.auth-msg.ok { background: var(--u-verde-fundo); border: 1px solid var(--u-verde-marca); color: var(--u-verde-ink) }
.auth-msg.info { background: var(--u-hover); border: 1px solid var(--u-linha); color: var(--u-texto) }

/* força da senha (portado do #/reset da v1) */
.auth-forca { height: 4px; border-radius: 3px; background: var(--u-linha); margin: -6px 0 8px; overflow: hidden }
.auth-forca i { display: block; height: 100%; width: 0; background: var(--u-erro) }
.auth-forca i.fraca { width: 33%; background: var(--u-erro) }
.auth-forca i.media { width: 66%; background: var(--u-ambar) }
.auth-forca i.forte { width: 100%; background: var(--u-verde-marca) }
.auth-regras { font-size: 11.5px; color: var(--u-texto-2); margin: 0 0 14px }
.auth-regras .falta { color: var(--u-ambar); font-weight: 600 }
.auth-regras .ok { color: var(--u-verde-texto); font-weight: 600 }
.auth-mostrar { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--u-texto-2); margin-bottom: 4px }
.auth-mostrar input { width: 16px; height: 16px }

/* grade do formulário público */
.auth-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px }
.auth-grade .col2 { grid-column: 1 / -1 }
@media (max-width: 560px) { .auth-grade { grid-template-columns: 1fr } }

/* ============================ aviso de tela que mudou de lugar ============================ */
/* DEC-0023 §D5, antecipada para cá: hash da v1 sem equivalente na v2 não cai calado. */
.mudou-lugar {
  max-width: 560px;
  margin: 48px auto;
  padding: 22px 24px;
  background: var(--u-superficie);
  border: 1px solid var(--u-linha);
  border-left: 4px solid var(--u-ambar);
  border-radius: var(--u-raio-cartao, 10px);
}
.mudou-lugar h2 { font-size: 16px; margin: 0 0 8px; color: var(--u-texto) }
.mudou-lugar p { font-size: 13px; color: var(--u-texto-2); margin: 0 0 14px; line-height: 1.55 }
.mudou-lugar a { color: var(--u-verde-texto); font-weight: 600; text-decoration: underline }