/* ==========================================================================
   MONSTER — BASE
   --------------------------------------------------------------------------
   Reset, tipografia e componentes base.
   Depende de tokens.css — carregar SEMPRE depois dele.
   Documentação: docs/09-identidade-visual.md
   ========================================================================== */

/* ==========================================================================
   1. RESET
   ========================================================================== */

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

* {
    margin: 0;
}

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    min-height: 100vh;
    font-family: var(--fonte-corpo);
    font-size: var(--txt-base);
    line-height: var(--altura-normal);
    color: var(--texto);
    background-color: var(--fundo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}


/* ==========================================================================
   2. TIPOGRAFIA
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--fonte-display);
    font-weight: var(--peso-negrito);
    line-height: var(--altura-apertada);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

h1 { font-size: var(--txt-4xl); }
h2 { font-size: var(--txt-3xl); }
h3 { font-size: var(--txt-2xl); }
h4 { font-size: var(--txt-xl); }

h5, h6 {
    font-family: var(--fonte-corpo);
    font-weight: var(--peso-semi);
    line-height: var(--altura-apertada);
}

h5 { font-size: var(--txt-lg); }
h6 { font-size: var(--txt-base); }

a {
    color: var(--texto-marca);
    text-decoration: none;
    transition: color var(--transicao-rapida);
}

a:hover {
    text-decoration: underline;
}

strong, b { font-weight: var(--peso-semi); }
small     { font-size: var(--txt-sm); color: var(--texto-suave); }
code, kbd, samp, pre { font-family: var(--fonte-mono); font-size: 0.9em; }

.texto-suave  { color: var(--texto-suave); }
.texto-fraco  { color: var(--texto-fraco); }
.texto-marca  { color: var(--texto-marca); }
.texto-sucesso{ color: var(--sucesso); }
.texto-aviso  { color: var(--aviso); }
.texto-erro   { color: var(--erro); }


/* ==========================================================================
   3. ACESSIBILIDADE
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
    border-radius: var(--raio-sm);
}

/* Nunca remover foco sem substituto — ver docs/09 §11 */
:focus:not(:focus-visible) {
    outline: none;
}

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

.pular-para-conteudo {
    position: absolute;
    top: -100px;
    left: var(--esp-4);
    z-index: var(--z-aviso);
    padding: var(--esp-3) var(--esp-4);
    background-color: var(--btn-primario-fundo);
    color: var(--btn-primario-texto);
    border-radius: var(--raio);
    font-weight: var(--peso-semi);
    transition: top var(--transicao);
}

.pular-para-conteudo:focus {
    top: var(--esp-4);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--esp-4);
}

@media (min-width: 768px) {
    .container { padding-inline: var(--esp-6); }
}

.secao { padding-block: var(--esp-12); }

.grade {
    display: grid;
    gap: var(--esp-4);
}

.grade-produtos {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (min-width: 768px) {
    .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}


/* ==========================================================================
   5. BOTÕES
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: var(--alvo-toque);
    padding: var(--esp-3) var(--esp-5);
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-family: var(--fonte-corpo);
    font-size: var(--txt-base);
    font-weight: var(--peso-semi);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transicao-rapida),
                color var(--transicao-rapida),
                border-color var(--transicao-rapida);
}

.btn:hover { text-decoration: none; }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primário — laranja da marca + texto escuro = 5,90:1 (AA).
   Texto branco sobre esse laranja daria 3,37:1 e reprovaria. */
.btn-primario {
    background-color: var(--btn-primario-fundo);
    color: var(--btn-primario-texto);
}

.btn-primario:hover {
    background-color: var(--btn-primario-fundo-hover);
    color: var(--btn-primario-texto-hover);
}

.btn-secundario {
    background-color: transparent;
    color: var(--texto-marca);
    border-color: var(--borda-marca);
}

.btn-secundario:hover {
    background-color: var(--laranja-50);
    color: var(--laranja-700);
}

.btn-neutro {
    background-color: var(--fundo-sutil);
    color: var(--texto);
    border-color: var(--borda);
}

.btn-neutro:hover { background-color: var(--borda); }

.btn-perigo {
    background-color: var(--erro);
    color: #FFFFFF;
}

.btn-perigo:hover { filter: brightness(0.9); }

.btn-fantasma {
    background-color: transparent;
    color: var(--texto-suave);
}

.btn-fantasma:hover {
    background-color: var(--fundo-sutil);
    color: var(--texto);
}

.btn-sm    { min-height: 36px; padding: var(--esp-2) var(--esp-3); font-size: var(--txt-sm); }
.btn-lg    { min-height: 52px; padding: var(--esp-4) var(--esp-8); font-size: var(--txt-lg); }
.btn-bloco { display: flex; width: 100%; }


/* ==========================================================================
   6. FORMULÁRIOS
   ========================================================================== */

.campo { margin-bottom: var(--esp-4); }

.rotulo {
    display: block;
    margin-bottom: var(--esp-2);
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    color: var(--texto);
}

.rotulo .obrigatorio {
    color: var(--erro);
    margin-left: 2px;
}

.entrada,
.selecao,
.area-texto {
    display: block;
    width: 100%;
    min-height: var(--alvo-toque);
    padding: var(--esp-3);
    background-color: var(--fundo-superficie);
    color: var(--texto);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio);
    transition: border-color var(--transicao-rapida),
                box-shadow var(--transicao-rapida);
}

.entrada::placeholder,
.area-texto::placeholder { color: var(--texto-fraco); }

.entrada:focus,
.selecao:focus,
.area-texto:focus {
    outline: none;
    border-color: var(--foco);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 22%, transparent);
}

.entrada:disabled,
.selecao:disabled,
.area-texto:disabled {
    background-color: var(--fundo-sutil);
    color: var(--texto-fraco);
    cursor: not-allowed;
}

.entrada[aria-invalid="true"],
.selecao[aria-invalid="true"],
.area-texto[aria-invalid="true"] {
    border-color: var(--erro);
}

.area-texto { min-height: 120px; resize: vertical; }

.ajuda {
    display: block;
    margin-top: var(--esp-1);
    font-size: var(--txt-sm);
    color: var(--texto-suave);
}

.erro-campo {
    display: block;
    margin-top: var(--esp-1);
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    color: var(--erro);
}


/* ==========================================================================
   7. CARTÃO
   ========================================================================== */

.cartao {
    background-color: var(--fundo-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra-sm);
    overflow: hidden;
}

.cartao-corpo   { padding: var(--esp-4); }
.cartao-cabecalho,
.cartao-rodape  { padding: var(--esp-4); }
.cartao-cabecalho { border-bottom: 1px solid var(--borda); }
.cartao-rodape    { border-top: 1px solid var(--borda); background-color: var(--fundo-sutil); }


/* ==========================================================================
   8. PREÇO
   ========================================================================== */

.preco {
    font-family: var(--fonte-display);
    font-size: var(--txt-2xl);
    font-weight: var(--peso-negrito);
    line-height: 1;
    color: var(--preco);
}

.preco-grande { font-size: var(--txt-4xl); }

.preco-anterior {
    font-size: var(--txt-sm);
    color: var(--preco-anterior);
    text-decoration: line-through;
}

.preco-parcela {
    font-size: var(--txt-sm);
    color: var(--texto-suave);
}

.preco-economia {
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    color: var(--sucesso);
}


/* ==========================================================================
   9. SELO / BADGE
   Cor NUNCA é o único indicador — sempre acompanha texto (docs/09 §11)
   ========================================================================== */

.selo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    padding: var(--esp-1) var(--esp-2);
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    font-size: var(--txt-xs);
    font-weight: var(--peso-semi);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.selo-sucesso { background-color: var(--sucesso-suave); color: var(--sucesso); border-color: var(--sucesso-borda); }
.selo-aviso   { background-color: var(--aviso-suave);   color: var(--aviso);   border-color: var(--aviso-borda); }
.selo-erro    { background-color: var(--erro-suave);    color: var(--erro);    border-color: var(--erro-borda); }
.selo-info    { background-color: var(--info-suave);    color: var(--info);    border-color: var(--info-borda); }
.selo-marca   { background-color: var(--laranja-500);   color: var(--grafite-950); }
.selo-neutro  { background-color: var(--fundo-sutil);   color: var(--texto-suave); border-color: var(--borda); }


/* ==========================================================================
   10. AVISO EM LINHA
   ========================================================================== */

.aviso {
    display: flex;
    gap: var(--esp-3);
    padding: var(--esp-4);
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--raio);
    font-size: var(--txt-sm);
}

.aviso-sucesso { background-color: var(--sucesso-suave); border-color: var(--sucesso-borda); border-left-color: var(--sucesso); color: var(--sucesso); }
.aviso-atencao { background-color: var(--aviso-suave);   border-color: var(--aviso-borda);   border-left-color: var(--aviso);   color: var(--aviso); }
.aviso-erro    { background-color: var(--erro-suave);    border-color: var(--erro-borda);    border-left-color: var(--erro);    color: var(--erro); }
.aviso-info    { background-color: var(--info-suave);    border-color: var(--info-borda);    border-left-color: var(--info);    color: var(--info); }


/* ==========================================================================
   11. TABELA
   ========================================================================== */

.tabela-rolagem { overflow-x: auto; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--txt-sm);
}

.tabela th {
    padding: var(--esp-3);
    background-color: var(--fundo-sutil);
    color: var(--texto-suave);
    font-weight: var(--peso-semi);
    font-size: var(--txt-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    border-bottom: 1px solid var(--borda-forte);
    white-space: nowrap;
}

.tabela td {
    padding: var(--esp-3);
    border-bottom: 1px solid var(--borda);
}

.tabela tbody tr:hover { background-color: var(--fundo-sutil); }
.tabela .numero        { text-align: right; font-variant-numeric: tabular-nums; }


/* ==========================================================================
   12. UTILITÁRIOS
   ========================================================================== */

.oculto           { display: none !important; }
.centro           { text-align: center; }
.direita          { text-align: right; }
.flex             { display: flex; }
.flex-centro      { display: flex; align-items: center; justify-content: center; }
.flex-entre       { display: flex; align-items: center; justify-content: space-between; }
.flex-coluna      { display: flex; flex-direction: column; }
.gap-2            { gap: var(--esp-2); }
.gap-4            { gap: var(--esp-4); }
.mt-4             { margin-top: var(--esp-4); }
.mb-4             { margin-bottom: var(--esp-4); }
.largura-total    { width: 100%; }

/* ==========================================================================
   ABAS
   --------------------------------------------------------------------------
   Painéis irmãos alternados por `hidden`. Ficam no MESMO formulário quando os
   campos pertencem ao mesmo cadastro — trocar de aba não envia nada nem perde
   o que foi digitado.

   Acessibilidade: role="tablist"/"tab"/"tabpanel", aria-selected e navegação
   por seta, Home e End. Ver docs/09-identidade-visual.md
   ========================================================================== */

.abas__lista {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--esp-1);
    margin-bottom: var(--esp-5);

    /*
     * A linha de base vem de sombra interna, não de `border-bottom`.
     *
     * Com borda, a aba ativa precisava de `margin-bottom: -1px` para cobri-la —
     * e essa margem negativa estourava o eixo Y. Como declarar `overflow-x`
     * faz o eixo Y computar de `visible` para `auto`, o container ganhava uma
     * barra de rolagem vertical de 1px de curso. A sombra fica dentro da caixa,
     * então a borda da aba ativa a cobre sem margem nenhuma.
     */
    box-shadow: inset 0 -1px 0 var(--borda);

    /* Em telas estreitas as abas rolam na horizontal em vez de quebrar feio */
    overflow-x: auto;
    overflow-y: hidden;

    /* Rolagem por gesto: a barra some, o curso continua */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.abas__lista::-webkit-scrollbar {
    display: none;
}

.abas__aba {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    flex: 0 0 auto;
    padding: var(--esp-3) var(--esp-4);
    min-height: var(--alvo-toque);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: var(--fonte-corpo);
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-suave);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transicao-rapida), border-color var(--transicao-rapida);
}

.abas__aba:hover {
    color: var(--texto);
}

.abas__aba:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
    border-radius: var(--raio-sm) var(--raio-sm) 0 0;
}

/*
 * A aba ativa é marcada por cor E por barra inferior: cor sozinha não pode
 * carregar a informação (docs/09 §11).
 */
.abas__aba[aria-selected="true"] {
    color: var(--laranja-600);
    border-bottom-color: var(--laranja-500);
    font-weight: var(--peso-negrito);
}

.abas__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--raio-full);
    background: var(--fundo-sutil);
    color: var(--texto-suave);
    font-size: var(--txt-xs);
    font-weight: var(--peso-medio);
    font-variant-numeric: tabular-nums;
}

.abas__aba[aria-selected="true"] .abas__contador {
    background: var(--laranja-500);
    color: var(--grafite-950);
}

/* Barra de ação do formulário — acompanha a rolagem */
.abas__acoes {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--esp-3);
    margin-top: var(--esp-5);
    padding: var(--esp-4);
    background: var(--fundo-superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra);
}

@media (max-width: 640px) {
    .abas__aba {
        padding: var(--esp-3);
    }

    .abas__acoes {
        flex-direction: column;
        align-items: stretch;
    }

    .abas__acoes .btn {
        width: 100%;
    }
}

@media (prefers-contrast: more) {
    .abas__aba[aria-selected="true"] {
        border-bottom-width: 4px;
    }
}

/* ==========================================================================
   ESCOLHA EM CARTÃO — frete, pagamento
   --------------------------------------------------------------------------
   Rótulo grande e clicável no lugar do radio solto: a área de toque passa a
   ser o cartão inteiro, e o estado marcado é visível sem depender do
   desenho nativo do controle, que varia entre navegadores.
   ========================================================================== */

.opcao-frete {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    cursor: pointer;
    transition: border-color var(--transicao-rapida), background-color var(--transicao-rapida);
}

.opcao-frete:hover {
    border-color: var(--borda-forte);
}

.opcao-frete > span {
    flex: 1;
}

/* :has() marca o cartão a partir do radio interno — sem JS para um estado visual */
.opcao-frete:has(input:checked) {
    border-color: var(--laranja-500);
    background-color: color-mix(in srgb, var(--laranja-500) 6%, transparent);
}

.opcao-frete:has(input:focus-visible) {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* ==========================================================================
   LINHA DO TEMPO — histórico de pedido
   ========================================================================== */

.linha-tempo {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--esp-5);
    position: relative;
}

.linha-tempo::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--borda);
}

.linha-tempo li {
    position: relative;
    padding-bottom: var(--esp-4);
}

.linha-tempo li:last-child {
    padding-bottom: 0;
}

.linha-tempo li::before {
    content: '';
    position: absolute;
    left: calc(var(--esp-5) * -1);
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: var(--raio-full);
    background: var(--fundo-superficie);
    border: 2px solid var(--borda-forte);
}

/* O passo mais recente fica em destaque */
.linha-tempo li:last-child::before {
    background: var(--laranja-500);
    border-color: var(--laranja-500);
}

/* ==========================================================================
   PAGINAÇÃO
   ========================================================================== */

.paginacao {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-1);
    justify-content: center;
    margin-top: var(--esp-5);
}

.paginacao a,
.paginacao__atual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--alvo-toque);
    min-height: var(--alvo-toque);
    padding: 0 var(--esp-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-size: var(--txt-sm);
    text-decoration: none;
    color: var(--texto-suave);
}

.paginacao a:hover {
    border-color: var(--borda-forte);
    color: var(--texto);
}

/* Página atual: cor E peso, porque cor sozinha não informa */
.paginacao__atual {
    background: var(--laranja-500);
    border-color: var(--laranja-500);
    color: var(--grafite-950);
    font-weight: var(--peso-negrito);
}

/* Cartão usado como filtro ativo na listagem de pedidos */
.cartao--ativo {
    border-color: var(--laranja-500);
    box-shadow: inset 0 -3px 0 var(--laranja-500);
}