/* =============================================================================
 * CABEÇALHO DA PÁGINA DE COMPRA — logo à esquerda, identificação à direita
 * =============================================================================
 * Desenhado pelo croqui dele de 17/08/2026: um quadrado à esquerda com a logo
 * e, à direita, três linhas empilhadas — nome do produto, vendedor, regional.
 * Antes era logo centralizada e uma única linha cinza ("Vendedor: Fulano ·
 * cidade"), que ele resumiu como "muito feio".
 *
 * 🔑 POR QUE UM ARQUIVO E NÃO CLASSES DO TAILWIND: o CSS desta tela é compilado
 *    pelo Vite e nenhuma das duas máquinas tem `node_modules` — classe nova do
 *    Tailwind escrita no Blade simplesmente não existe em produção. Arquivo
 *    próprio, servido por `Arte::url()` (que carimba `?v=filemtime`), é o
 *    caminho que já funciona para o `bolas.css` e o `gamificacao.css`.
 *
 * 🔑 AS CORES SAEM DAS VARIÁVEIS DE TEMA (`--ct-texto`, `--ct-texto-suave`,
 *    `--ct-borda`): a tela tem três temas trocáveis em Configurações, e cor
 *    fechada aqui quebraria dois deles.
 * ========================================================================== */

.ct-cabecalho {
    position: relative; /* o mudo se ancora no canto inferior esquerdo */
    display: flex;

    /* ⚠️ `center`, e NÃO `stretch`. Tentei `stretch` para a logo pegar sozinha
       a altura do texto e deu realimentação: a logo é deitada, esticar a altura
       aumenta a largura, o que espreme o texto, que ganha mais linhas, que
       esticam mais a logo. Parou com 164x106 — o dobro do croqui. A altura é
       fixada na regra da logo, calculada pelas três linhas. */
    align-items: center;
    gap: 12px;

    /* O CONJUNTO no meio da página, o texto alinhado à esquerda DENTRO dele.
       Centralizar cada linha faria as três dançarem umas sobre as outras. */
    justify-content: center;
    text-align: left;
}

/* A LOGO.
 * `flex: 0 0 auto` para ela nunca encolher quando o nome do vendedor for
 * comprido — quem quebra linha é o texto, nunca a marca.
 *
 * 🔑 QUEM MANDA É A ALTURA; A LARGURA É `auto`. A logo é um retângulo deitado,
 *    e o desenho antigo travava um QUADRADO de 68px — aí o `contain` encolhia a
 *    arte até uns 40px de altura para caber na largura. Era essa a reclamação
 *    dele: a logo parecia pequena mesmo ocupando uma caixa grande. Com a altura
 *    mandando, a largura acompanha o desenho original e a marca aparece.
 *
 * 🔑 OS 62px SÃO A ALTURA DA CAIXA DE TEXTO, que é o que o croqui pede: linha
 *    vermelha no topo do nome do produto, linha vermelha no pé da regional.
 *    Conta das três linhas: 20px do produto + 3+16 do vendedor + 3+16 da
 *    regional. Mexeu no corpo das linhas, refaça a conta aqui.
 *
 *    O `max-width` é só a trava para logo muito deitada não empurrar o texto
 *    contra a borda em tela estreita. */
.ct-cabecalho__logo {
    flex: 0 0 auto;
    width: auto;
    height: 62px;
    max-width: 42vw;

    /* `contain` porque a arte não pode ser cortada nem esticada. */
    object-fit: contain;
    object-position: center;
}

.ct-cabecalho__dados {
    min-width: 0; /* deixa o texto quebrar em vez de estourar a linha */
}

/* 1ª LINHA — o nome do produto, que vem de `identidade.titulo` (Configurações).
 * É a única linha em corpo grande: é ela que diz ao cliente onde ele está. */
.ct-cabecalho__produto {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ct-texto);
}

/* 2ª e 3ª LINHAS — vendedor e regional. Rótulo em cinza, nome em preto: o olho
 * pula o rótulo e lê o que interessa. */
.ct-cabecalho__linha {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.25;
    color: var(--ct-texto-suave);
}

.ct-cabecalho__linha strong {
    font-weight: 700;
    color: var(--ct-texto);
}

/* -----------------------------------------------------------------------------
 * COMPUTADOR (o mesmo teto de 620px que o resto da tela usa)
 * -----------------------------------------------------------------------------
 * Ele pediu a mesma informação, no formato que ficasse melhor na largura do
 * computador. Mesma fileira do celular — logo à esquerda, três linhas à
 * direita —, só que o CONJUNTO vai para o meio da página e cresce.
 *
 * Alinhar à esquerda numa página de 768px deixaria a marca perdida num canto,
 * com meio metro de branco à direita; e centralizar CADA linha faria as três
 * dançarem umas sobre as outras. Centralizar o bloco inteiro, mantendo o texto
 * alinhado à esquerda dentro dele, resolve os dois.
 * -------------------------------------------------------------------------- */
@media (min-width: 621px) {
    .ct-cabecalho {
        gap: 18px;
    }

    /* No computador as três linhas são maiores (24 + 4+19 + 4+19), então a
       altura da logo sobe junto — mesma regra do croqui, outra conta. */
    .ct-cabecalho__logo {
        height: 90px;
        max-width: 260px;
    }

    .ct-cabecalho__produto {
        font-size: 24px;
    }

    .ct-cabecalho__linha {
        margin-top: 4px;
        font-size: 15px;
    }
}

/* =============================================================================
 * O ATALHO DA CONTA — no topo da página de compra (27/08/2026)
 * =============================================================================
 * Um botão discreto no canto superior ESQUERDO, levando o cliente logado de
 * volta à área dele. Vale no celular e no computador.
 *
 * 🔑 UM SÓ, E À ESQUERDA. A primeira versão trazia dois — "Início" à esquerda e
 *    "Minha conta" à direita — e ele cortou na hora: *"pode acabar atrapalhando
 *    a decisão do cliente de comprar"*. Nesta tela quem tem de puxar o olho é o
 *    botão de comprar. O rótulo também encolheu para "Conta".
 *
 * DISCRETO É REQUISITO, não estilo: contorno fino, fundo transparente e o cinza
 * de apoio do tema (`--ct-texto-suave`), o mesmo dos rótulos do cabeçalho.
 *
 * 🔑 A MARGEM NEGATIVA NÃO É GAMBIARRA — é o pedido dele. O atalho tem de ficar
 *    colado na borda de cima ("bem no limite da borda"), e sem empurrar a logo
 *    para baixo: ele reparou que a fileira tinha afastado o cabeçalho do topo.
 *    A conta é direta: o botão tem 26px de altura, e a margem negativa de mesmo
 *    valor come o respiro de 32px do `py-8` da página. Medido no site publicado:
 *    o botão fica a 6px do topo e a logo volta aos MESMOS 32px de antes de este
 *    atalho existir. Mexeu no corpo do botão, refaça a conta.
 * ========================================================================== */

.ct-atalhos {
    display: flex;
    align-items: center;
    margin: -26px 0 0 -4px;
}

.ct-atalho {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--ct-borda);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--ct-texto-suave);
    background: transparent;
    transition: .18s ease;
}

.ct-atalho:hover {
    color: var(--ct-texto);
    border-color: var(--ct-texto-suave);
}

.ct-atalho:active {
    transform: scale(.97);
}

.ct-atalho svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

@media (min-width: 621px) {
    /* No computador o botão é maior (29px contra 26px), e a margem acompanha:
       medido no site publicado, o botão fica nos mesmos 6px do topo que o
       celular e a logo desce 3px — invisível a olho nu. Ele fica na borda
       ESQUERDA DO CONTEÚDO, não na da janela: a página é centrada. */
    .ct-atalhos {
        margin: -26px 0 0 -4px;
    }

    .ct-atalho {
        padding: 6px 13px;
        font-size: 13px;
    }

    .ct-atalho svg {
        width: 15px;
        height: 15px;
    }
}

/* 🔇 O MUDO DA GAMIFICAÇÃO (30/09/2026) — canto INFERIOR esquerdo do cabeçalho,
   fora do fluxo (não empurra a logo nem o texto). Discreto: só o ícone, 60% de
   opacidade, alvo de toque de 32px. */
.ct-cabecalho__som {
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    opacity: 0.6;
    color: var(--ct-texto-suave);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* =============================================================================
 * 🧭 08/10/2026 — CABEÇALHO EM DUAS PONTAS (pedido dele)
 * -----------------------------------------------------------------------------
 * Marca e identificação ALINHADAS À ESQUERDA; Conta, Som e Voltar à DIREITA,
 * como botões sólidos azul-escuros com ícone branco — visíveis de primeira.
 * Sobrescreve o desenho centralizado de 17/08 (as regras acima ficam de
 * histórico) e aposenta o atalho discreto `.ct-atalhos` e o mudo apagado.
 * ========================================================================== */
.ct-cabecalho {
    justify-content: space-between;
    gap: 10px;
}

.ct-cabecalho__marca {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ct-cabecalho__logo {
    height: 54px;
    max-width: 30vw;
}

.ct-cabecalho__produto { font-size: 15px; }
.ct-cabecalho__linha { font-size: 12.5px; }

.ct-cabecalho__acoes {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.ct-icone-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #0b2a6f;
    color: #fff;
    box-shadow: 0 3px 8px rgba(11, 42, 111, .3);
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ct-icone-btn:hover { background: #1462b8; }
.ct-icone-btn:active { transform: scale(.94); }
.ct-icone-btn:focus-visible { outline: 3px solid #f5c518; outline-offset: 2px; }

.ct-icone-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

@media (min-width: 621px) {
    .ct-cabecalho { gap: 18px; }
    .ct-cabecalho__marca { gap: 16px; }
    .ct-cabecalho__logo { height: 84px; max-width: 240px; }
    .ct-cabecalho__produto { font-size: 22px; }
    .ct-cabecalho__linha { font-size: 15px; }
    .ct-cabecalho__acoes { gap: 10px; }
    .ct-icone-btn { width: 46px; height: 46px; border-radius: 13px; }
    .ct-icone-btn svg { width: 23px; height: 23px; }
}

/* -----------------------------------------------------------------------------
 * 🧭 09/10/2026 — OS TRÊS BOTÕES EM COLUNA, MENORES E NA COR DA PÁGINA
 *    (pedido dele: estavam "recebendo muito destaque").
 *    • Um embaixo do outro: Minha conta, Voltar, Som.
 *    • Fundo = a cor de fundo da própria página (`--ct-fundo`, que segue o
 *      matiz da arte da campanha) num tom mais ESCURO; ícone continua branco.
 *    • 30px no celular (eram 38), 36px no computador (eram 46).
 * -------------------------------------------------------------------------- */
.ct-cabecalho__acoes {
    flex-direction: column;
    gap: 5px;
}

.ct-icone-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ct-fundo, #e9eef7) 52%, #1d1430);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}

.ct-icone-btn:hover {
    background: color-mix(in srgb, var(--ct-fundo, #e9eef7) 40%, #1d1430);
}

.ct-icone-btn svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 621px) {
    .ct-cabecalho__acoes { gap: 6px; }
    .ct-icone-btn { width: 36px; height: 36px; border-radius: 10px; }
    .ct-icone-btn svg { width: 19px; height: 19px; }
}

/* -----------------------------------------------------------------------------
 * 📏 09/10/2026 — CABEÇALHO COLADO E NA ALTURA DOS BOTÕES (marcação dele)
 *    • Some o vazio em cima e embaixo: a página começa a 2px do topo e o
 *      cabeçalho fica a 2px do cartão do concurso (eram 32px e 24px).
 *    • COM TRÊS BOTÕES (logado): logo e texto crescem até a altura da coluna
 *      de botões (topo do 1º ao pé do 3º, 100px).
 *    • COM DOIS (sem login): fica como está.
 * -------------------------------------------------------------------------- */
.ct-tela:has(> header > .ct-cabecalho) { padding-top: 2px; }
header:has(> .ct-cabecalho) { margin-bottom: 2px !important; }

.ct-cabecalho:has(.ct-cabecalho__acoes > :nth-child(3)) .ct-cabecalho__logo {
    height: 100px;
}
.ct-cabecalho:has(.ct-cabecalho__acoes > :nth-child(3)) .ct-cabecalho__produto {
    font-size: 18px;
}
.ct-cabecalho:has(.ct-cabecalho__acoes > :nth-child(3)) .ct-cabecalho__linha {
    margin-top: 6px;
    font-size: 14.5px;
}

@media (min-width: 621px) {
    .ct-tela:has(> header > .ct-cabecalho) { padding-top: 6px; }
    .ct-cabecalho:has(.ct-cabecalho__acoes > :nth-child(3)) .ct-cabecalho__logo { height: 120px; }
    .ct-cabecalho:has(.ct-cabecalho__acoes > :nth-child(3)) .ct-cabecalho__produto { font-size: 24px; }
    .ct-cabecalho:has(.ct-cabecalho__acoes > :nth-child(3)) .ct-cabecalho__linha { font-size: 16px; }
}


/* 09/10/2026 (2ª): estava colado demais (pedido dele).
   • Dois botões (sem login): +5px em cima e embaixo → 7px e 7px.
   • Três botões (logado): +5px só embaixo → 2px em cima, 7px embaixo. */
.ct-tela:has(> header > .ct-cabecalho) { padding-top: 7px; }
header:has(> .ct-cabecalho) { margin-bottom: 7px !important; }
.ct-tela:has(> header .ct-cabecalho__acoes > :nth-child(3)) { padding-top: 2px; }