/* =====================================================================
   Base — reset curto, tipografia, formulários e as telas de autenticação.

   Acessibilidade como piso, não como camada:
   - foco sempre visível, e visível de verdade (2px, cor de marca);
   - alvo de toque com no mínimo 44px de altura;
   - prefers-reduced-motion respeitado;
   - contraste conferido contra o fundo real de cada componente.
   ===================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    /* A Inter v4 tem eixo óptico: em tamanho grande ela usa o desenho de
       display sozinha, e em corpo de texto o desenho de leitura. É o que
       impede o número herói do painel de parecer inflado e o texto de 13px
       de fechar demais. */
    font-optical-sizing: auto;
    margin: 0;
    font-family: var(--fonte-base);
    font-size: var(--tam-base);
    line-height: var(--altura-linha-normal);
    color: var(--texto-normal);
    background: var(--cor-papel);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, pre {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--cor-tinta-clara);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--cor-tinta);
}

code, pre {
    font-family: var(--fonte-mono);
    font-size: 0.9em;
}

/* O foco é o único caminho de quem navega por teclado. Ele não some. */
:focus-visible {
    outline: 2px solid var(--cor-petroleo);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   Só para leitor de tela.

   Rótulo de campo de busca, cabeçalho de coluna de ações: existem para
   quem não vê a tela. `display: none` os tiraria também da árvore de
   acessibilidade, que é o oposto do que se quer.

   Mora AQUI, e não no CSS do painel, porque a LOJA também precisa — e
   enquanto estava só lá, o rótulo "Buscar produtos" aparecia escrito ao
   lado do campo de busca da vitrine.
   --------------------------------------------------------------------- */
.apenas-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cor-tinta);
    color: var(--texto-invertido);
    padding: var(--e-2) var(--e-4);
    z-index: 100;
}

.pular-para-conteudo:focus {
    left: 0;
}

/* ---------------------------------------------------------------------
   Marca
   O selo é a gota do logo reduzida a um sinal: um losango arredondado em
   degradê do petróleo ao marinho, com um ponto laranja no lugar do miolo
   do carretel. Reconhecível em 24px, e não depende de imagem carregar.
   --------------------------------------------------------------------- */
.marca-selo {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    background: linear-gradient(150deg, var(--cor-petroleo), var(--cor-tinta));
    border-radius: 50% 50% 50% 4px;
    position: relative;
    transform: rotate(-45deg);
}

.marca-selo::after {
    content: '';
    position: absolute;
    inset: 34%;
    background: var(--cor-laranja);
    border-radius: 50%;
}

.marca-selo--grande {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--e-4);
}

/* ---------------------------------------------------------------------
   Telas centradas: login, 2FA, erro, home provisória
   --------------------------------------------------------------------- */

.corpo-centrado {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--e-5) var(--e-4);
    gap: var(--e-5);
}

.cartao-central {
    width: 100%;
    max-width: var(--largura-cartao);
    background: var(--cor-branco);
    border: var(--borda-fina);
    border-radius: var(--raio-painel);
    box-shadow: var(--sombra-1);
    padding: var(--e-6) var(--e-5);
}

.cabecalho-auth {
    text-align: center;
    margin-bottom: var(--e-5);
}

.cabecalho-auth h1 {
    font-size: var(--tam-lg);
    font-weight: var(--peso-forte);
    color: var(--texto-forte);
    letter-spacing: -0.01em;
}

.codigo-erro {
    font-family: var(--fonte-mono);
    font-size: var(--tam-xl);
    font-weight: var(--peso-forte);
    color: var(--cor-laranja);
    line-height: 1;
    margin-bottom: var(--e-2);
}

.apoio {
    color: var(--texto-apoio);
    font-size: var(--tam-base);
    margin-top: var(--e-2);
}

.apoio--pequeno {
    font-size: var(--tam-xs);
    margin-top: var(--e-4);
}

.apoio-inline {
    color: var(--texto-apoio);
    font-size: var(--tam-xs);
}

.rodape-minimo {
    color: var(--texto-apoio);
    font-size: var(--tam-xs);
}

.faixa-ambiente {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--cor-laranja);
    color: var(--texto-invertido);
    font-size: var(--tam-xs);
    font-weight: var(--peso-forte);
    letter-spacing: 0.08em;
    text-align: center;
    padding: var(--e-1) 0;
    z-index: 50;
}

/* ---------------------------------------------------------------------
   Formulários
   --------------------------------------------------------------------- */

.formulario {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
}

.formulario-secundario {
    margin-top: var(--e-4);
    text-align: center;
}

.form-inline {
    display: inline;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
}

.campo label {
    font-size: var(--tam-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-forte);
}

.campo input,
.campo select,
.campo textarea {
    font: inherit;
    color: var(--texto-normal);
    background: var(--cor-branco);
    border: 1px solid var(--cor-cinza-40);
    border-radius: var(--raio-controle);
    padding: var(--e-3);
    min-height: 44px;
    width: 100%;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo input:focus {
    border-color: var(--cor-petroleo);
    outline: none;
    box-shadow: 0 0 0 3px var(--cor-petroleo-fraca);
}

.campo input[aria-invalid='true'] {
    border-color: var(--cor-erro);
}

/* Código de 6 dígitos: monoespaçado e espaçado, para conferir digitando. */
.entrada-codigo {
    font-family: var(--fonte-mono);
    font-size: var(--tam-lg);
    letter-spacing: 0.35em;
    text-align: center;
}

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */

.botao {
    font: inherit;
    font-weight: var(--peso-medio);
    /* Um `<a class="botao">` herdaria o sublinhado de link, e um botão com o
       texto sublinhado parece um link dentro de uma caixa — o "Novo produto"
       e o "Ver os alertas" do painel saíam assim. Quem desenha o botão é a
       caixa; o sublinhado é do que NÃO é botão. */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    border: 1px solid transparent;
    border-radius: var(--raio-controle);
    padding: var(--e-3) var(--e-4);
    min-height: 44px;
    cursor: pointer;
    background: none;
    color: var(--cor-tinta);
    transition: background-color var(--transicao), border-color var(--transicao);
}

.botao--primario {
    background: var(--cor-tinta);
    color: var(--texto-invertido);
}

.botao--primario:hover {
    background: var(--cor-tinta-clara);
}

/* O secundário tem contorno e fundo branco: ele fica AO LADO do primário
   (Salvar / Cancelar, Buscar / o resto da barra) e precisa se ler como
   botão sem competir com ele. Sem contorno, um <button> vira texto solto —
   e ninguém clica no que não parece clicável. */
.botao--secundario {
    background: var(--cor-branco);
    border-color: var(--cor-cinza-20);
    color: var(--cor-tinta);
}

.botao--secundario:hover {
    border-color: var(--cor-cinza-40);
    background: var(--cor-cinza-05);
}

/* Botão desabilitado precisa PARECER desabilitado.

   O "Usar este NCM" do modal nasce desligado — não há NCM escolhido ainda —,
   e sem isto ele aparecia em azul-marinho sólido, igual ao habilitado. Quem
   clica e não vê resposta conclui que a tela travou. */
.botao:disabled,
.botao[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.botao--bloco {
    width: 100%;
}

.botao--texto {
    color: var(--texto-apoio);
    padding: var(--e-2);
    min-height: 36px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.botao--texto:hover {
    color: var(--cor-tinta);
}

/* ---------------------------------------------------------------------
   Avisos
   Ícone via borda lateral grossa em vez de emoji ou fonte de ícone:
   funciona sem carregar nada e não some se a fonte falhar.
   --------------------------------------------------------------------- */

.aviso {
    border-left: 3px solid;
    border-radius: 0 var(--raio-controle) var(--raio-controle) 0;
    padding: var(--e-3) var(--e-4);
    font-size: var(--tam-sm);
    margin-bottom: var(--e-4);
}

.aviso--erro {
    border-color: var(--cor-erro);
    background: var(--cor-erro-fraca);
    color: var(--cor-erro);
}

.aviso--ok {
    border-color: var(--cor-ok);
    background: var(--cor-ok-fraca);
    color: var(--cor-ok);
}

.aviso--atencao {
    border-color: var(--cor-laranja);
    background: var(--cor-laranja-fraca);
    color: var(--cor-atencao);
}

/* ---------------------------------------------------------------------
   Passos e chave do 2FA
   --------------------------------------------------------------------- */

.passos {
    counter-reset: passo;
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    margin-bottom: var(--e-5);
    font-size: var(--tam-sm);
}

.passos li {
    counter-increment: passo;
    padding-left: var(--e-6);
    position: relative;
}

.passos li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cor-petroleo-fraca);
    color: var(--cor-tinta);
    font-size: var(--tam-xs);
    font-weight: var(--peso-forte);
}

.chave-secreta {
    display: block;
    margin: var(--e-2) 0;
    padding: var(--e-3);
    background: var(--cor-cinza-05);
    border: var(--borda-fina);
    border-radius: var(--raio-controle);
    font-size: var(--tam-md);
    letter-spacing: 0.06em;
    word-break: break-all;
    user-select: all;
}

.link-otpauth {
    font-size: var(--tam-xs);
}

.detalhe-erro {
    margin-top: var(--e-4);
    padding: var(--e-3);
    background: var(--cor-cinza-05);
    border: var(--borda-fina);
    border-radius: var(--raio-controle);
    font-size: var(--tam-xs);
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 20rem;
}

/* ---------------------------------------------------------------------
   QR Code do segundo fator

   Desenhado no servidor, em SVG embutido. Fundo branco explícito e uma
   moldura clara: um QR sobre fundo colorido ou sem margem é um QR que a
   câmera não lê — e a pessoa culpa o próprio celular.
   --------------------------------------------------------------------- */

.qr-code {
    display: flex;
    justify-content: center;
    margin: var(--e-4) 0;
}

.qr-code svg {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: var(--raio-controle);
    border: 1px solid var(--cor-cinza-20);
    background: var(--cor-branco);
}

.chave-manual {
    margin-top: var(--e-3);
}

.chave-manual summary {
    font-size: var(--tam-sm);
    color: var(--texto-apoio);
    cursor: pointer;
    padding: var(--e-2) 0;
    /* Alvo de toque de 44px mesmo sendo um <summary>. */
    min-height: 44px;
    display: flex;
    align-items: center;
}

.chave-manual summary:hover {
    color: var(--texto-forte);
}


/* --- `hidden` precisa vencer -------------------------------------------
   O navegador aplica `display: none` a `[hidden]` pela folha de estilo DELE,
   e qualquer regra nossa — mesmo uma classe simples — sobrepõe isso, porque
   estilo de autor vence estilo do navegador independentemente de
   especificidade.

   Foi assim que os três blocos de cor da página de produto apareceram todos
   de uma vez: `.produto__atributos { display: flex }` anulava o `hidden` que
   o servidor tinha escrito. O sintoma é mudo — nada quebra, a página só
   mostra o que devia estar escondido.

   Uma regra global resolve para sempre. O `!important` aqui é deliberado, como
   o do bloco de `prefers-reduced-motion` acima: ele existe justamente para
   ganhar de qualquer `display` que alguém venha a escrever depois.
   ----------------------------------------------------------------------- */

[hidden] {
    display: none !important;
}