/* 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);
}

/* 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);
}

.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;
}

.shell-barra-lateral {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--space-1);
    width: 224px;
    padding: var(--space-4) var(--space-3);
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
}

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

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

.shell-modulo,
.shell-navitem {
    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-navitem {
    width: 100%;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

.shell-modulo:hover:not(:disabled),
.shell-navitem: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,
.shell-navitem--ativo {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-strong);
    color: var(--color-focus);
    font-weight: 600;
}

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

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

.shell-navitem:disabled {
    padding: 8px 12px;
    font-size: 12.5px;
}

.shell-navgrupo {
    padding: 14px 12px 4px;
    color: var(--color-disabled);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.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;
}