/* Fundo global do shell (Núcleo): evita faixa clara residual do
   navegador e mantém consistência visual com as molduras já
   implementadas. Cada página continua dona do seu layout interno.

   MIGRADO PARA TOKENS em 27/07/2026 (ADR 0019). Nenhum valor de cor
   literal daqui pra frente — tudo vem de `css/temas.css`.

   QUASE neutro no tema escuro, com 2 desvios deliberados — vale conferir
   estes dois pontos na validação visual, o resto deve estar idêntico:

     1. Raio do item da barra de módulos: era 10px, virou 12px
        (`--radius-lg`). A escala da referência é 6/8/12 — não tem 10.
        Preferimos encaixar na escala a manter um valor solto que
        reintroduz o problema que os tokens vieram resolver.

     2. Borda do item ativo: era #065f46, agora sai de
        `--color-primary-strong` (#059669 no escuro). Verde um pouco mais
        vivo. O ganho é a borda passar a derivar da mesma rampa de cor
        primária do resto do sistema, em vez de ser um valor único que só
        existia aqui — e é isso que faz o item ativo acompanhar o tema
        (teal da CDC no claro) sem regra extra. */

body {
    font-family: var(--font-ui);
    margin: 0;
    color: var(--color-ink);
    background: var(--color-bg);
}

.pagina {
    min-height: 100vh;
    background: var(--color-bg);
}

/* Sem align-items/justify-content:center aqui de propósito — regra
   antiga centralizava TODO `<main>`, incluindo telas de dashboard
   (ModuloVendas, Painel, AdminModulos) com altura dinâmica (esqueleto de
   carregamento mais baixo que o conteúdo real). Como a centralização
   redistribui o espaço livre acima/abaixo do conteúdo, cada mudança de
   altura deslocava a tela inteira pra baixo (carregando) e de volta pra
   cima (carregado) — bug relatado pelo Sylvio (25/07/2026) ao clicar
   entre abas do módulo Vendas. As 3 telas que realmente querem cartão
   centralizado (Login, LoginGestor, TrocarSenha) têm altura FIXA — não
   sofrem esse problema — e agora se centralizam sozinhas via
   `margin:auto` no próprio elemento raiz. */
.pagina main {
    min-height: 100vh;
    display: flex;
    padding: 16px;
}

.campo {
    margin-bottom: 0.75rem;
}

.campo label {
    display: block;
    margin-bottom: 0.25rem;
}

.erro {
    color: var(--danger-text);
}

/* ==========================================================================
   Shell — barra de módulos e barra lateral
   ==========================================================================

   Valores extraídos LITERALMENTE do protótipo do Claude Design
   (`Prototipos/CDC Vendas - Localidades (standalone).html`, classes
   `.mod` e `.navi`), não aproximados de captura de tela.

   Antes disto o ShellDesktop desenhava TODO item — ativo, inativo e
   desabilitado — com `border:1px solid #1f2937` + fundo próprio, o que
   enchia menu e barra lateral de retângulos (reclamação do Sylvio,
   26/07/2026). No protótipo o item inativo não tem moldura nenhuma: só
   o item ativo ganha fundo/borda verde.

   Estar em CSS de verdade (e não em `style=` inline como antes) não é
   preferência de organização — `:hover` não existe em atributo inline,
   então enquanto o estilo morava lá o item simplesmente não tinha como
   reagir ao mouse. */

/* ---- Moldura, cabeçalho e barra lateral ------------------------------
   Vieram de `style=` inline no ShellDesktop.razor (migrado 27/07/2026,
   ADR 0019). Além de tokenizar a cor, sair do inline devolve `:hover` e
   `:focus-visible` a esses elementos — atributo inline não suporta
   pseudo-classe, então o botão "Sair" e o cabeçalho eram inertes ao
   mouse e não mostravam foco de teclado. */

.shell-quadro {
    width: 100%;
    min-height: 82vh;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-bg);
    color: var(--color-ink);
}

.shell-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.shell-marca {
    margin-right: var(--space-2);
    color: var(--color-subtle);
    font-size: 11px;
    white-space: nowrap;
}

.shell-modulos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.shell-sessao {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.shell-usuario {
    color: var(--color-muted);
    font-size: 12px;
}

.shell-btn-sair {
    padding: 6px 10px;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}

/* Só possível fora do inline. */
.shell-btn-sair:hover {
    background: var(--color-surface-panel);
    border-color: var(--color-focus);
}

/* "Trocar senha" no cabeçalho (reset-de-senha-sem-a-ti), entre a saudação e
   "Sair": mesmo botão do "Sair", com o ícone de chave. É o que alcança o
   Administrador Geral nas telas de Administração, que não desenham barra. */
.shell-btn-trocar-senha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Botão de alternância de tema (ADR 0019). Usado no cabeçalho dos dois
   shells e nas 3 telas fora deles (Login, LoginGestor, TrocarSenha), por
   isso o estilo é global e não escopado ao Shell. */
.botao-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}

.botao-tema:hover {
    background: var(--color-surface-panel);
    border-color: var(--color-focus);
    color: var(--color-ink);
}

/* Variante para as 3 telas SEM shell (Login, LoginGestor, TrocarSenha).
   Elas são cartões de tamanho fixo centralizados por `margin:auto`, com
   markup traduzido pixel a pixel do protótipo — inserir um botão dentro
   deles mexeria num layout que foi deliberadamente copiado. Flutuando no
   canto, o botão fica acessível sem tocar no cartão.

   `position: fixed` e não `absolute`: o cartão do Login tem 812px de
   altura e pode gerar rolagem em tela baixa; fixo, o botão continua
   alcançável sem precisar rolar de volta ao topo. */
.botao-tema--flutuante {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-action);
}

/* Número da versão (mudança `versao-na-tela`) — ver SeloDeVersao.razor.
   `--color-muted`, e não o `--color-subtle` da marca acima dele: o selo precisa
   passar 4,5:1 nos dois temas. Medido no pixel pelo E2E SeloDeVersaoTests;
   os números estão no tasks.md da mudança. */
.selo-versao {
    color: var(--color-muted);
    font-size: 11px;
    white-space: nowrap;
}

/* Telas sem shell: no respiro de 16px no alto do <main> (`.pagina main`,
   acima), no canto esquerdo. O cartão fica sempre dentro da área de conteúdo
   do <main>, então o respiro nunca tem cartão, em tela nenhuma. E o alto da
   página está sempre à vista, sem rolar. Embaixo não servia: o <main> tem
   100vh MAIS o respiro, e o de baixo fica sempre abaixo da dobra. O canto
   direito é do botão de tema.

   A primeira versão flutuava fixa no canto de baixo da janela, e cobria o
   cartão em telas comuns (1280x600, e todo celular no portal do Colaborador)
   — achado da revisão de 28/09/2026. `:has()` restringe o `position:
   relative` às 3 telas que têm o selo. As telas com shell não mudam.

   O `!important` vence o `display:none` em linha do componente (ver o
   porquê em SeloDeVersao.razor). */
.pagina main:has(> .selo-versao--fora-do-cartao) {
    position: relative;
}

.selo-versao--fora-do-cartao {
    display: block !important;
    position: absolute;
    top: 1px;
    left: var(--space-4);
    line-height: 14px;
}

/* No cabeçalho do shell desktop, o selo vai embaixo da marca, e não ao lado:
   ao lado ele tirava de 65 a 130px dos botões de módulo, e em tela estreita
   eles transbordavam os 56px do cabeçalho (achado da revisão de 28/09/2026). */
.shell-identificacao {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.shell-erro {
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-text);
}

.shell-corpo {
    display: flex;
    min-height: 70vh;
}

/* A barra lateral saiu daqui em 08/09/2026: virou o trilho escuro de
   `css/shell-sidebar.css`, com as classes `.app-sidebar`/`.nav-item`/
   `.nav-group`. Nada de barra lateral mora mais neste arquivo — ter as
   duas receitas ao mesmo tempo era o que fazia parecer que o sistema
   tinha dois desenhos de barra concorrendo. */

.shell-conteudo {
    flex: 1;
    padding: var(--space-4);

    /* ✏️ 17/09/2026: desde que o trilho EMPURRA o conteúdo (shell-sidebar.css,
       seção 1), o conteúdo encolhe 176px com a barra aberta. Item flex nasce
       com `min-width: auto` e não encolhe abaixo da grade mais larga da tela
       (`min-width: 960px` em Registros de canal incompletos): MEDIDO em
       Chromium, viewport 1200, a borda direita ia a x=1274 numa janela de
       1185 — cortada. Com `min-width: 0` a rolagem fica dentro da tela. */
    min-width: 0;
}

/* ---- Itens de navegação --------------------------------------------- */

.shell-modulo {
    display: flex;
    align-items: center;
    background: none;
    border: 1px solid transparent; /* reserva a espessura da borda do estado ativo — sem isso o item "pula" 1px ao ser selecionado */
    font-family: inherit;
    cursor: pointer;
    transition: opacity .12s, color .12s;
}

.shell-modulo {
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 500;
}

.shell-modulo:hover:not(:disabled) {
    opacity: .85;
    color: var(--color-ink);
}

/* Só o item selecionado tem moldura — inativo não tem borda nenhuma.
   A cor de destaque vem de `--color-primary`, então acompanha o tema:
   verde no escuro (como sempre foi), teal da CDC no claro. */
.shell-modulo--ativo {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-strong);
    color: var(--color-focus);
    font-weight: 600;
}

.shell-modulo--ativo:hover {
    color: var(--color-focus);
}

/* "Em breve": sem moldura também — só apagado, com cadeado. */
.shell-modulo:disabled {
    color: var(--color-disabled);
    cursor: not-allowed;
}

.oculto-visualmente {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}