:root {
    /* ---- Paleta da marca ---------------------------------------------
       A do manual de marca (kit-de-marca/): verde #046739, amarelo da
       etiqueta #FFD600, vermelho do PRICE #D62828, branco.

       A escala de verde sai do PRÓPRIO tom da marca — hsl(152, 93%) — com
       só a luminosidade variando. É isso que mantém tudo na mesma família;
       escolher tons "que combinam" a olho é o que produz aquela sensação
       de peças de origens diferentes na mesma tela.
       ------------------------------------------------------------------ */
    --verde-900: #023B21;   /* fundo do menu, hover forte */
    --verde-800: #046739;   /* PRINCIPAL — a cor da marca */
    --verde-700: #058549;   /* realce, item ativo */
    --verde-600: #06A75C;   /* foco, detalhe vivo */
    --verde-100: #E5F5EE;   /* fundo suave */
    --verde-050: #F2FAF6;   /* fundo bem suave */

    --amarelo: #FFD600;         /* SECUNDÁRIA — a etiqueta, preço, destaque */
    --amarelo-luz: #FFE44D;     /* a luz de cima da etiqueta */
    --amarelo-texto: #6E6202;   /* texto legível SOBRE o amarelo */

    --vermelho: #D62828;        /* DESTAQUE — a caixa do PRICE, oferta, erro */
    --vermelho-play: #E53935;   /* o play do símbolo */
    --vermelho-100: #FDECEC;

    --branco: #FFFFFF;

    /* Os dois cinzas neutros. Vinham sendo escritos como valor de reserva em
       cada uso (`var(--cinza-200, #e5e7eb)`) porque nunca foram declarados —
       e o mesmo papel acabou com dois tons diferentes em lugares diferentes.
       Declarados, a reserva vira o que sempre deveria ter sido: reserva. */
    --cinza-200: #E5E7EB;   /* borda suave, separador */
    --cinza-600: #7B8A82;   /* texto de apoio */

    /* ---- Papéis: é isto que o resto do arquivo consome ---- */
    --sidebar-bg: var(--verde-900);
    --sidebar-text: #ffffff;
    --sidebar-active: var(--verde-700);
    --topbar-bg: var(--verde-800);
    --workarea-bg: #eef1f0;
    /* O painel de edição era #d1d9e6 — um cinza AZULADO, de outra família que
       a do resto do sistema. Com a barra de abas agora branca, o azul ficou
       gritando por baixo dela. Este é o mesmo neutro da área de trabalho, um
       tom acima, para os cartões brancos do painel continuarem se destacando. */
    --editor-bg: #F2F5F3;
    --primary-color: var(--verde-800);
    --accent-color: var(--vermelho);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
}

/* ==========================================================================
   A BARRA DE ROLAGEM DO SITE

   A barra que o Windows desenha sozinho é cinza, larga e quadrada, com duas
   setinhas nas pontas. Num painel branco ela já pesa; encostada na barra
   lateral verde-escura ela vira um risco cinzento no meio do desenho — e é
   ali que ela aparece com mais frequência, porque a coluna do menu rola
   quando o Painel Admin abre os subitens.

   Aqui fica o PADRÃO de toda a casa: fina, sem pista, polegar arredondado e
   translúcido, que escurece um pouco ao passar o mouse. Translúcido de
   propósito — assim a mesma regra serve no branco e no verde sem inventar
   uma cor para cada fundo.

   ARMADILHA JÁ DOCUMENTADA MAIS ABAIXO, e que vale repetir porque aqui ela
   valeria para o site inteiro: o Chrome IGNORA os `::-webkit-scrollbar` se
   `scrollbar-width` estiver no mesmo elemento. Por isso a propriedade padrão
   (que é a que o Firefox entende) fica isolada no `@supports`, e nunca solta
   num `*`. Um `scrollbar-width: thin` global apagaria, de uma vez, todo o
   acerto de barra que existe neste arquivo.

   AQUI É O ÚNICO LUGAR ONDE ESTA BARRA É DESENHADA. Havia três cópias à mão
   pelo arquivo — a aba do editor, a lista de replicar e o corpo das janelas
   de escolha —, e as três já discordavam entre si: 6px, 6px e 10px, dois
   lilases diferentes e um cinza. Ninguém tinha decidido isso; foi cada uma
   sendo escrita num dia. Saíram todas.

   O que continua com regra própria são os trilhos que ESCONDEM a barra de
   propósito (formatos, páginas, chips da loja de temas): um seletor com
   classe vence estas regras sem classe, então eles seguem escondidos.
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

/* SEM O TRUQUE DA BORDA TRANSPARENTE, E DE PROPÓSITO.

   O jeito comum de afinar o polegar é dar a ele uma borda transparente com
   `background-clip: padding-box`. Numa regra geral isso é veneno: a borda
   valeria também para qualquer barra que venha a ter pista mais estreita, e
   3px de cada lado numa pista de 6px deixam o polegar com ZERO — a barra
   some sem que nada acuse.

   Então a pista já nasce fina e o polegar ocupa ela inteira. Quem um dia
   precisar afinar mais, afina na própria regra, onde sabe a largura que tem
   — e sabendo que a conta é `pista menos duas bordas`. */
::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: rgba(38, 34, 42, 0.22);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(38, 34, 42, 0.42);
}

/* OS DOIS FUNDOS ESCUROS DO SITE, ONDE O POLEGAR VIRA CLARO.

   São só estes: a coluna do menu (verde-escuro) e a mesa onde a folha do
   encarte fica (#555). Um polegar escuro neles é um borrão invisível — e
   barra que não se vê é barra que não se acha quando se precisa dela.

   A lista é curta e escrita à mão de propósito. Não dá para adivinhar em CSS
   se um fundo é claro ou escuro; se um dia nascer outro painel escuro que
   rola, o nome dele entra aqui. */
.main-sidebar ::-webkit-scrollbar-thumb,
.preview-panel::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.22);
}

.main-sidebar:hover ::-webkit-scrollbar-thumb,
.preview-panel:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.38);
}

.main-sidebar ::-webkit-scrollbar-thumb:hover,
.preview-panel::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(38, 34, 42, 0.28) transparent;
    }
    .main-sidebar,
    .preview-panel {
        scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    }
}

.app-layout {
    display: flex;
    height: 100vh;
}

/* Sidebar */
/* ==========================================================================
   BARRA LATERAL

   Antes: fundo preto, item que MUDAVA margin e width no hover — então o item
   pulava de lugar sob o cursor, e o `transition: all` animava esse pulo. E o
   botão de recolher morava dentro da barra, enquanto no celular existia um
   segundo botão no topo: dois controles para a mesma tarefa, em cantos
   diferentes conforme a largura da tela.

   Agora: um botão só, sempre no canto superior esquerdo (montado pelo
   sidebar-nav.js), e o item de menu anima apenas cor — a caixa dele não se
   mexe mais.
   ========================================================================== */

.main-sidebar {
    /* flex-basis, e nao so width: a barra e item de um contentor flex, e
       medindo no navegador o `width` sozinho NAO encolhia a barra — nem
       forcado em estilo de linha. O `flex-basis` encolhe. O `width` fica
       junto porque no celular a barra vira `position: fixed` e sai do
       fluxo flex, e ai e ele que vale. */
    flex: 0 0 248px;
    width: 248px;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    padding: 16px 0 12px;
    flex-shrink: 0;
    transition: width 0.22s ease;
    position: relative;
    overflow: hidden;
}

.main-sidebar.collapsed {
    flex-basis: 76px;
    width: 76px;
}

.brand {
    padding: 4px 18px 20px;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.brand-logo {
    font-size: 19px;
    color: var(--verde-900);
    flex-shrink: 0;
    /* A marca ganha o amarelo: é a segunda cor do sistema e aqui ela tem
       função, marcar o ponto de identidade, em vez de enfeitar. */
    background: var(--amarelo);
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
}

.main-sidebar.collapsed .brand {
    padding: 4px 0 20px;
    justify-content: center;
}

.main-sidebar.collapsed .brand-name,
.main-sidebar.collapsed .nav-text {
    display: none;
}

/* O antigo botão de recolher, que ficava dentro da barra, deu lugar ao único
   do topo. O elemento continua no HTML das seis telas; escondê-lo aqui evita
   editar todas para remover a mesma linha. */
.btn-toggle-sidebar {
    display: none;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* NADA NESTA COLUNA ENCOLHE — ELA ROLA.

   Defeito medido em 26/09/2026, numa janela de 1280x560 com o Painel Admin
   aberto: os seis subitens não cabiam, e em vez de a barra rolar, TODOS os
   botões foram espremidos de 56px para 35px. Início, Encarte, Cartaz e Temas
   encolhiam porque alguém abriu um menu que não é deles.

   O motivo é uma armadilha conhecida do flexbox, e ela tem duas metades: um
   item de flex encolhe por padrão (`flex-shrink: 1`), e normalmente pararia
   no tamanho do próprio conteúdo — mas `overflow: hidden`, que o `.nav-item`
   e o `.nav-grupo` usam para cortar texto comprido, faz o tamanho mínimo
   automático virar ZERO. Juntas, as duas deixam o botão espremer até sumir,
   e o `overflow-y: auto` daqui de cima nunca chega a ter o que rolar.

   No filho direto, e não nos nomes das classes: assim o próximo item que
   alguém acrescentar a esta coluna já nasce com a regra certa. */
.sidebar-nav > * {
    flex-shrink: 0;
}

.nav-item {
    width: calc(100% - 20px);
    margin: 0 10px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.76);
    text-align: left;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 13px;
    position: relative;
    /* Só cor anima. Animar margin/width fazia o item escorregar sob o cursor
       — e num menu isso dá a impressão de que o clique errou o alvo. */
    transition: background-color 0.16s ease, color 0.16s ease;
}

.nav-item i {
    width: 20px;
    font-size: 15px;
    text-align: center;
    flex-shrink: 0;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.nav-item:focus-visible {
    outline: 2px solid var(--amarelo);
    outline-offset: -2px;
}

.nav-item.active {
    background-color: var(--verde-700);
    color: #fff;
    font-weight: 600;
}

/* Marca amarela na borda do item ativo: cor sozinha não basta para quem não
   distingue verdes, e a barrinha responde "onde estou" de relance. */
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 2px;
    background: var(--amarelo);
}

.main-sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px 0;
}

.main-sidebar.collapsed .nav-item i {
    margin: 0;
    font-size: 18px;
}

.main-sidebar.collapsed .nav-item.active::before {
    display: none;
}

/* Sair fica destacado do resto e usa o vermelho do sistema no hover: é a
   única ação da barra que tira a pessoa de onde ela está. */
.logout {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    width: 100%;
    padding-top: 16px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.62);
}

.logout:hover {
    background-color: rgba(165, 13, 38, 0.28);
    color: #fff;
}

/* Work Area */
.work-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--workarea-bg);
    /* Antes era overflow:hidden: o que passava da altura da tela era cortado
       sem barra de rolagem. O editor não rola aqui — ele tem a rolagem própria
       do .preview-panel e ocupa exatamente a altura disponível. */
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
}

.top-toolbar {
    height: 50px;
    background-color: var(--topbar-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: white;
}

/* ==========================================================================
   BOTÕES DA BARRA SUPERIOR
   Eram seis ícones soltos de 18px sobre o verde: sem área de clique, sem
   retorno ao passar o mouse, sem nome para leitor de tela e sem separar o que
   MEXE no encarte do que só muda o ZOOM. Num toque de dedo, 18px é metade do
   alvo mínimo recomendado.
   ========================================================================== */
.toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toolbar-grupo {
    display: flex;
    align-items: center;
    gap: 2px;
}

.toolbar-divisor {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.22);
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.tool-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.tool-btn:active {
    transform: translateY(1px);
}

.tool-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Baixar é o que mais se usa e o fim do caminho: ganha nome e um fundo que o
   separa dos demais, em vez de ser mais um glifo igual aos outros. */
.tool-btn-destaque {
    background: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 700;
}

.tool-btn-destaque:hover {
    background: rgba(255, 255, 255, 0.3);
}

.tool-btn-texto {
    letter-spacing: 0.01em;
}

/* Numa tela estreita some o nome: o ícone já basta e a barra tem o dobro de
   botões à esquerda do que cabe com texto. */
@media (max-width: 600px) {
    .tool-btn-texto {
        display: none;
    }

    .toolbar-left {
        gap: 6px;
    }

    .tool-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 7px;
    }
}

/* Tira de formatos, copiada do crieoferta (medida no editor deles em
   12/09/2026): em vez de botões de texto, uma MINIATURA na proporção real de
   cada folha, com o nome embaixo e o selecionado em verde.
   Números deles: miniatura de 50px de largura com a altura vindo da proporção
   (A4V 50x71, A4H 50x35, Stories 50x89, 1080 50x50, Feed 50x63, TV 50x28),
   borda 1,5px cinza que vira 2px roxa no selecionado, rótulo de 9px, e a opção
   com no mínimo 74px de altura. A proporção de cada miniatura está no HTML,
   como `aspect-ratio` com as dimensões reais do formato. */
.format-rail {
    flex: 0 0 76px;
    width: 76px;
    background: var(--editor-bg);
    /* A tira fica encostada no painel de edição, do lado direito da arte, como
       no crieoferta (lá ela também fica entre a folha e o painel). A borda vai
       na esquerda, que é o lado virado para a arte. */
    border-left: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.format-btn {
    width: 100%;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 6px 4px;
    color: #736d78;
    font-size: 9px;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.format-btn:hover {
    background: #f0edf2;
}

.format-btn.active {
    background: rgba(5, 133, 73, 0.12);
    color: var(--primary-color, var(--verde-700));
    font-weight: 700;
}

/* A silhueta: largura fixa, altura pelo `aspect-ratio` que o HTML declara com
   as dimensões reais da folha. É o que faz Stories parecer Stories e TV
   parecer TV sem precisar ler o rótulo. */
.format-thumb {
    width: 50px;
    flex: 0 0 auto;
    background: #9ca3af;
    border: 1.5px solid #9ca3af;
    border-radius: 3px;
}

.format-btn.active .format-thumb {
    border-color: var(--primary-color, var(--verde-700));
    border-width: 2px;
}

.format-nome {
    display: block;
}

/* Sub-aba de formato: existe só no celular, onde a tira lateral não cabe.
   Medida no crieoferta a 459px: cabeçalho `Formato: A4` com rótulo de 13px e
   o valor em verde, e ao abrir uma faixa horizontal que rola, com miniaturas
   de 44px e gap de 8px. */
.format-collapse {
    display: none;
}

/* Aba para recolher o painel inteiro. Só no desktop: no celular esse papel é
   da alça da folha de baixo (.painel-pega). */
.painel-flag {
    display: none;
}

@media (min-width: 861px) {
    /* A LINGUETA SAIU DO FLUXO.

       Era uma coluna de 20px entre a arte e o painel: `flex: 0 0 20px`. A aba
       em si tem 64px de altura e fica centrada, mas a COLUNA ia do topo ao
       rodapé, e o que se via era uma faixa clara de ponta a ponta com uma
       abinha no meio dela.

       O comentário antigo explicava por que ela estava no fluxo: `position:
       absolute; right: 380px` cobria os últimos 20px da tira de formatos e
       comia a borda das miniaturas. Essa razão não existe mais — a tira
       deixou de ser coluna e passou a morar dentro do menu suspenso de
       formato, lá em cima.

       Fora do fluxo, ela encosta na borda esquerda do painel e desliza junto
       quando ele recolhe. */
    .workspace-content {
        position: relative;
    }

    .painel-flag {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 380px;   /* a largura do painel */
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 64px;
        padding: 0;
        border: 1px solid #ccc;
        border-right: none;
        border-radius: 6px 0 0 6px;
        background: var(--editor-bg);
        color: #7a8494;
        font-size: 11px;
        cursor: pointer;
        z-index: 30;
        box-shadow: -2px 0 6px rgba(0, 0, 0, 0.08);
        transition: color 0.15s ease, right 0.25s ease;
    }

    /* Recolhido, o painel some e a lingueta vai junto até a borda da tela. Os
       0,25s são os mesmos da largura do painel, para os dois chegarem juntos:
       tempos diferentes deixariam a aba descolada do painel no meio do
       caminho. */
    body.painel-oculto .painel-flag {
        right: 0;
    }

    .painel-flag:hover {
        color: var(--primary-color, var(--verde-700));
    }

    body.painel-oculto .painel-flag i {
        transform: rotate(180deg);
    }

    /* Recolhido o painel some e a arte fica com a largura toda. O `flex-basis`
       precisa ir junto da `width`: sem ele o item flex mantém os 380px. */
    body.painel-oculto .editor-panel {
        width: 0;
        flex-basis: 0;
        border-left: none;
        overflow: hidden;
    }

    body.painel-oculto .format-rail {
        border-left: none;
        border-right: 1px solid #ccc;
    }

    .editor-panel {
        transition: width 0.25s ease;
    }
}

.mode-btn {
    background: white;
    color: var(--topbar-bg);
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
}

/* Workspace Content */
.workspace-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* Preview Panel */
.preview-panel {
    flex: 1;
    background: #555;
    padding: 60px; /* Aumentado para dar espaço para a logo flutuar */
    display: flex;
    flex-direction: column;
    /* `center` puro, num contêiner que rola, deixa o transbordo do lado
       ESQUERDO inalcançável: o navegador não cria área de rolagem antes do
       início do conteúdo. Com o zoom alto a folha ficava com a parte esquerda
       cortada e sem como chegar nela — o `flex: 0 0 auto` do palco resolveu a
       vertical, e esta é a horizontal.
       `safe center` centraliza enquanto cabe e volta a alinhar pelo início
       quando não cabe, que é exatamente o desejado. A linha de cima fica de
       reserva para quem não entender a palavra-chave. */
    align-items: center;
    align-items: safe center;
    overflow: auto; 
    scrollbar-gutter: stable both-edges;
    position: relative;
    min-height: 0;
}

.offer-stage {
    position: relative;
    overflow: visible;
    /* O painel da prévia é flex em coluna, e item flexível ENCOLHE por padrão.
       Com o zoom em 0,83 o palco pedia 1226px de altura e o flex o espremia em
       715 — a folha transbordava e a parte de baixo ficava fora de alcance,
       porque a área rolável não contava com o que não cabia. `flex: 0 0 auto`
       faz o palco manter a altura que o zoom pediu, e aí o painel rola. */
    flex: 0 0 auto;
}

.offer-container {
    background: #c62828; /* Fundo vermelho padrão para evitar linhas brancas de gap */
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible; 
    flex-shrink: 0; 
    --header-height: 220px;
    --header-pad-x: 40px;
    --folha-h: 1485px;
    --footer-inset: 11px;
    --footer-radius: 17px;
    --footer-fs: 18px;
    --footer-pad-y: 11px;
    --footer-pad-x: 15px;
    --products-pad-y: 14px;
    --products-pad-x: 26px;
}

/* Formatos Fixos - Dimensões reais para exportação */
.offer-container.a4-horizontal { width: 1485px; height: 1050px; min-width: 1485px; min-height: 1050px; }
.offer-container.a4-vertical { width: 1050px; height: 1485px; min-width: 1050px; min-height: 1485px; }
.offer-container.stories { width: 1080px; height: 1920px; min-width: 1080px; min-height: 1920px; }
.offer-container.instagram { width: 1080px; height: 1350px; min-width: 1080px; min-height: 1350px; }
.offer-container.tv { width: 3840px; height: 2160px; min-width: 3840px; min-height: 2160px; }

.offer-container.a4-horizontal {
    --header-height: 180px;
    --folha-h: 1050px;
    --products-pad-y: 12px;
    --products-pad-x: 22px;
    --header-pad-x: 36px;
    --footer-inset: 15px;
    --footer-radius: 24px;
    --footer-fs: 13px;
    --footer-pad-y: 8px;
    --footer-pad-x: 21px;
}

.offer-container.a4-vertical {
    --header-height: 240px;
    --folha-h: 1485px;
    --products-pad-y: 14px;
    --products-pad-x: 26px;
    --header-pad-x: 40px;
    --footer-inset: 11px;
    --footer-radius: 17px;
    --footer-fs: 18px;
    --footer-pad-y: 11px;
    --footer-pad-x: 15px;
}

.offer-container.stories {
    --header-height: 260px;
    --folha-h: 1920px;
    --products-pad-y: 18px;
    --products-pad-x: 34px;
    --header-pad-x: 44px;
    --footer-inset: 11px;
    --footer-radius: 17px;
    --footer-fs: 23px;
    --footer-pad-y: 14px;
    --footer-pad-x: 15px;
}

.offer-container.instagram {
    --header-height: 220px;
    --folha-h: 1350px;
    --products-pad-y: 15px;
    --products-pad-x: 28px;
    --header-pad-x: 40px;
    --footer-inset: 11px;
    --footer-radius: 17px;
    --footer-fs: 16px;
    --footer-pad-y: 10px;
    --footer-pad-x: 15px;
}

.offer-container.tv {
    --header-height: 320px;
    --folha-h: 2160px;
    --products-pad-y: 44px;
    --products-pad-x: 84px;
    --header-pad-x: 160px;
    --footer-inset: 38px;
    --footer-radius: 61px;
    --footer-fs: 26px;
    --footer-pad-y: 16px;
    --footer-pad-x: 54px;
}

/* Estilo Específico do Encarte (Super Rocha) */
.offer-header {
    height: var(--header-height);
    background: #c62828; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--header-pad-x);
    color: white;
    position: relative;
    flex-shrink: 0; /* Impede o header de encolher */
}

.badge-container {
    flex: 1;
}

.badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.small-label { 
    font-size: 20px; 
    font-weight: 900; 
    color: white;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    background: #ffc107;
    padding: 2px 10px;
    border-radius: 5px;
}

.big-label { 
    font-size: 40px; 
    font-weight: 900; 
    color: white;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.5);
}

.logo-container {
    width: 250px;
    height: 150px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: visible;
    position: relative;
    touch-action: none;
    z-index: 100; 
    cursor: move;
}

.logo-container:hover {
    outline: 2px dashed rgba(255,255,255,0.5); /* Borda pontilhada para a logo */
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Products Preview */
.products-container {
    flex: 1;
    padding: var(--products-pad-y) var(--products-pad-x);
    display: grid;
    gap: 15px;
    /* Transparente de proposito: a area de produtos cobria a folha inteira com
       #c62828 opaco, e por isso o fundo do encarte nunca aparecia — era o que
       mantinha o fundo preso no CSS, sem controle nenhum. Agora a cor (ou a
       imagem) escolhida no painel aparece por tras dos cartoes, como no
       crieoferta, onde a arte do tema e a propria folha. */
    background: transparent;
    align-content: stretch;
    /* minmax(0,...) no lugar de 1fr puro: "1fr" equivale a minmax(auto,1fr),
       e o "auto" impede a linha de encolher abaixo do conteúdo — era o que
       fazia os produtos excedentes caírem para fora da folha. */
    grid-auto-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: visible; /* Corrigido para evitar que o preço seja cortado */
    transition: all 0.3s ease;
    position: relative;
    /* Altura/largura reais da célula, definidas em updateGridLayout().
       Todo o interior do cartão é proporcional a elas. */
    --item-h: 280px;
    --item-w: 240px;
}

/* Footer Fixo */
.offer-footer {
    flex-shrink: 0; /* Impede o footer de encolher */
    /* Era `min-height: var(--footer-height)`, um PISO de 180px numa folha de
       1485 — 12% do encarte reservados mesmo com uma linha só de texto, e
       encostado nas bordas. O do crieoferta mede 67px (4,5%), fica recuado a
       98% da largura e tem canto arredondado. Aqui a altura passa a vir do
       conteúdo: uma linha ocupa pouco, três linhas crescem o necessário. */
    align-self: center;
    width: calc(100% - var(--footer-inset) * 2);
    margin-bottom: var(--footer-inset);
    border-radius: var(--footer-radius);
    background: #c62828; /* Cor padrão para não ficar branco */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--footer-pad-y) * 0.5);
    padding: var(--footer-pad-y) var(--footer-pad-x);
    color: white;
    font-size: var(--footer-fs);
    overflow: hidden;
}

.offer-footer.inactive {
    height: 0;
    min-height: 0;
    padding: 0;
    gap: 0;
    margin-bottom: 0;
    border-radius: 0;
    /* Os estilos Dark e Banner tem borda no topo: sem zerar aqui, o rodape
       "recolhido" ainda deixava 2px de risco na arte. */
    border: 0;
    overflow: hidden;
}

/* Recuo do cartão e tamanho do nome agora são proporcionais à célula
   (--item-h), sem override fixo por layout. */

.product-image-wrapper { 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
    min-height: 0;
}

/* Layouts de Grid Dinâmicos - Mais robustos */
.products-container.layout-1 { grid-template-columns: 1fr; }
.products-container.layout-2 { grid-template-columns: 1fr 1fr; }
.products-container.layout-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.products-container.layout-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.products-container.layout-5 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.products-container.layout-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.products-container.layout-7, .products-container.layout-8, .products-container.layout-9 { grid-template-columns: repeat(3, 1fr); }
.products-container.layout-10, .products-container.layout-11, .products-container.layout-12 { grid-template-columns: repeat(3, 1fr); }
.products-container.layout-13, .products-container.layout-14, .products-container.layout-15, .products-container.layout-16 { grid-template-columns: repeat(4, 1fr); }

/* Layout Especial para 1 Oferta - Ajuste Fino */
.products-container.layout-1 {
    padding: 30px;
}
/* Com 1 oferta o cartão já é enorme; o sistema proporcional dá o tamanho certo
   sem precisar de px fixo nem de transform: scale(). */

.product-item.transparent {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.product-item.transparent .product-image-wrapper {
    background: transparent;
}

/* Fim dos layouts densos */

/* Estilo do Item de Produto - Padronizado conforme modelo */
.product-item {
    background: #ffffff; /* Cartão branco: o preço amarelo precisa de contraste */
    border-radius: 30px; 
    padding: 15px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    transition: all 0.2s;
    height: 100%;
    min-height: 0;
    /* Recuo do cartão, medido contra o crieoferta numa célula de 515x561: lá a
       figura ocupa 501 de largura (recuo de 1,4% por lado) e a caixa de preço
       termina a 1,2% do fim. Com 3,5% em volta, a nossa figura parava em 92% da
       largura e sobrava uma faixa morta embaixo do preço.
       Os lados encolhem para 2%, e o de baixo para 1,2%: é a borda inferior que
       o preço encosta, e ela não precisa do mesmo respiro do topo, onde mora o
       nome. */
    padding: calc(var(--item-h) * 0.035) calc(var(--item-h) * 0.02) calc(var(--item-h) * 0.012);
    border-radius: calc(var(--item-h) * 0.022);
    gap: calc(var(--item-h) * 0.015);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.product-item:hover {
    z-index: 5;
}

.product-item.empty-placeholder {
    background: #f7f2e6 !important;
    border: 2px dashed rgba(0, 0, 0, 0.25);
    box-shadow: none;
}

/* O "NOME DO PRODUTO" some quando o convite está por cima.

   Era um fantasma a 12% de preto, pensado para ser discreto. Só que o convite
   "Adicione seus produtos" assenta em cima dele com um branco a 92% — e 12%
   de preto por baixo de 92% de branco não é discrição, é um borrão atrás do
   texto. Ficava escondido pela gaveta no celular; agora que o editor abre
   mostrando a folha, é a primeira coisa que se vê.

   `visibility` e não `display`: o nome continua a ocupar o seu lugar no
   cartão, então nada se mexe quando o primeiro produto de verdade entra. */
.product-item.empty-placeholder .product-name {
    visibility: hidden;
}

.product-item.empty-placeholder .product-image-wrapper {
    background: transparent;
}

.empty-product-cta {
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 2px dashed rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 30;
    cursor: pointer;
    user-select: none;
}

.empty-product-cta .cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.empty-product-cta .cta-plus {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.empty-product-cta .cta-text {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #000;
    text-transform: uppercase;
}

.pulse-attention {
    outline: 3px solid rgba(4, 103, 57, 0.75);
    box-shadow: 0 0 0 6px rgba(4, 103, 57, 0.2);
    animation: pulseAttention 0.9s ease-in-out infinite;
}

@keyframes pulseAttention {
    0% { box-shadow: 0 0 0 6px rgba(4, 103, 57, 0.18); }
    50% { box-shadow: 0 0 0 12px rgba(4, 103, 57, 0.08); }
    100% { box-shadow: 0 0 0 6px rgba(4, 103, 57, 0.18); }
}

.product-editor-empty {
    background: white;
    border-radius: 12px;
    border: 2px dashed rgba(0,0,0,0.25);
    padding: 22px;
    margin-bottom: 18px;
    display: none;
}

.product-editor-empty-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-editor-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #000;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.product-editor-empty-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.product-editor-empty-subtitle {
    font-size: 12px;
    color: #555;
    margin-top: 2px;
}

.product-item.editing {
    /* Marca de "estou editando este": só sombra, sem mexer na borda — a borda
       agora faz parte da arte e é pintada com a cor de destaque. */
    box-shadow: 0 0 0 calc(var(--item-h) * 0.006) rgba(25, 118, 210, 0.55), 0 0 18px rgba(0,0,0,0.28);
    z-index: 10;
}

.product-header {
    width: 100%;
    margin-bottom: calc(var(--item-h) * 0.01);
    flex-shrink: 0;
}

.product-name {
    font-size: calc(var(--item-h) * 0.062);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #000000;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    text-align: center; /* Descrição centralizada conforme solicitado */
    width: 100%;

    /* PALAVRA QUE NÃO CABE QUEBRA, EM VEZ DE SUMIR.

       O cartão tem overflow: hidden, e o padrão do navegador (overflow-wrap:
       normal) não parte palavra nenhuma: uma palavra mais larga que a caixa
       simplesmente transborda e é APARADA pelos dois lados, porque o texto é
       centralizado. Some sem aviso — o nome continua inteiro no campo do
       painel e no arquivo salvo, mas a folha mostra um pedaço.

       Medido num encarte de 16 produtos: caixa do nome de 220px e
       PAPELHIGIENICOFOLHADUPLA medindo 287px. Sessenta e sete pixels de
       descrição perdidos, e quatro dos dezesseis nomes cortados.

       QUEM RESOLVE ISTO É O JAVASCRIPT, e não esta regra: o caberONome mede o
       nome e DIMINUI a letra até ele caber inteiro, numa palavra só. É o que o
       cartaz já fazia, e é o que um encarte precisa — nome de produto se lê de
       longe, partido no meio não se lê.

       A primeira tentativa foi hifenizar (hyphens: auto). Parou o corte e ficou
       feio: a folha passou a mostrar ACHOCOLA-TADO, e hífen no meio do nome de
       um produto não é coisa de encarte.

       O break-word fica como última rede, para o caso de nem a menor letra
       permitida ser suficiente. Aí é melhor quebrar do que sumir — mas com o
       ajuste acima isso praticamente não acontece. */
    overflow-wrap: break-word;
}

.product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    /* Sem respiro embaixo: quem fecha a célula é a caixa de preço, e o que
       sobrava ali era a faixa morta que aparecia abaixo da oferta. */
    padding: 5px 0 0;
}

.img-transform-controls {
    background: #f1f8ff;
    padding: 12px;
    border-radius: 8px;
    margin: 5px 0 15px;
    border: 1px solid #d0e1fd;
}

.range-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px !important;
}

.range-row label {
    font-size: 11px !important;
    white-space: nowrap;
    width: 80px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.range-row input[type="range"] {
    flex: 1;
    height: 6px;
    background: #cbd5e1;
    border-radius: 5px;
    outline: none;
    -webkit-appearance: none;
}

.range-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.product-img-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 30px;
    min-height: 30px;
    touch-action: none;
    z-index: 1; 
}

/* `max-width/max-height` só LIMITAM: a figura era desenhada no tamanho natural
   dela e nunca crescia para ocupar a caixa. Medido numa célula de 477x574: a
   faixa tinha 437x345 e a figura aparecia com 160x160 — os 160px do arquivo.
   No crieoferta a figura ocupa 501 de 515 da largura da célula.
   Quem dá o tamanho agora é `ajustarFiguraDoProduto`, em pixel: `object-fit`
   resolveria na tela, mas o html2canvas o ignora e esticaria a figura no
   arquivo baixado. O `contain` fica como rede de segurança para o instante
   entre a imagem chegar e a medida ser aplicada. */
.product-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Alças de Redimensionamento Universais (Logo e Produtos) */
.product-item.editing .product-img-container.has-image::before,
.product-item.editing .product-img-container.has-image::after,
.product-item.editing .product-img-container.has-image .resize-handle,
.logo-container:hover::before,
.logo-container:hover::after,
.logo-container:hover .resize-handle {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    z-index: 150; /* Sempre acima de tudo */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    opacity: 0; 
    transition: opacity 0.2s ease-in-out;
    pointer-events: auto;
}

/* Mostra as alças no hover */
.product-item.editing .product-img-container.has-image:hover::before,
.product-item.editing .product-img-container.has-image:hover::after,
.product-item.editing .product-img-container.has-image:hover .resize-handle,
.logo-container:hover::before,
.logo-container:hover::after,
.logo-container:hover .resize-handle {
    opacity: 1;
}

/* Posicionamento dos Cantos (Top-Left e Top-Right) */
.product-img-container::before, .logo-container::before { top: -6px; left: -6px; cursor: nwse-resize; } 
.product-img-container::after, .logo-container::after { top: -6px; right: -6px; cursor: nesw-resize; } 

/* Alças extras via elemento real (Bottom-Left e Bottom-Right) */
.resize-handle-bl { bottom: -6px; left: -6px; cursor: nesw-resize; } 
.resize-handle-br { bottom: -6px; right: -6px; cursor: nwse-resize; } 

.product-item.editing .product-img-container.has-image {
    outline: 2px dashed transparent; /* Agora pontilhado como a logo */
    transition: outline 0.2s;
}

.product-item.editing .product-img-container.has-image:hover {
    outline-color: var(--primary-color);
}

/* Balão de Preço - Tamanho Fixo e Proporcional ao Modelo */
.product-price-box.trapezio {
    /* A forma vem do SVG filho; a div só posiciona. A sombra sai da div (ela
       desenharia um retângulo atrás do trapézio) e vai para o próprio SVG. */
    background: transparent !important;
    box-shadow: none;
    border: none;
    border-radius: 0;
    clip-path: none;
    overflow: visible;
    /* o trapézio é mais estreito na base: folga extra embaixo e nas laterais
       para o preço não encostar na diagonal */
    padding: calc(var(--item-h) * 0.020) calc(var(--item-h) * 0.10) calc(var(--item-h) * 0.030);
}

.price-shape {
    /* SEM SOMBRA ATRAS DO BALAO.

       Havia aqui um drop-shadow de 40% de preto. Na tela ja pesava; no arquivo
       exportado piorava: o html2canvas desenha o borrao do filtro com muito
       menos suavidade que o navegador, e o que saia embaixo do balao amarelo
       era uma faixa escura dura, e nao uma sombra. Medido no recorte da
       exportacao: 2% da arte inteira mudava por causa dela, com diferenca
       media de 79 e maxima de 189 por canal.

       O balao nao precisa de sombra para se destacar: ele e amarelo sobre
       vermelho ou sobre branco, que ja e o maior contraste da folha. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.product-price-box .price-content {
    position: relative;
    z-index: 1;
}

.product-price-box.arredondado {
    /* Modelo enviado: 110x52 com raio 10px 14px 14px 10px, ou seja 19% e 27%
       da altura da caixa. Convertido para proporção do cartão, porque aqui a
       caixa muda de tamanho conforme a quantidade de produtos e o formato. */
    border-radius: calc(var(--item-h) * 0.042) calc(var(--item-h) * 0.059)
                   calc(var(--item-h) * 0.059) calc(var(--item-h) * 0.042);
    position: relative;
    /* overflow:hidden não é repetido aqui: a regra base .product-price-box
       já tem, e medindo no navegador o preço fica com folga dentro da caixa. */
    clip-path: none;
    border: none;
}

.product-price-box.chanfrado {
    /* Modelo enviado por você: cantos chanfrados. O clip-path é em %, então
       acompanha qualquer tamanho de cartão; o raio virou proporção do cartão
       (no original era 7px/12px numa caixa de 110x52). */
    border-radius: calc(var(--item-h) * 0.013) calc(var(--item-h) * 0.023)
                   calc(var(--item-h) * 0.023) calc(var(--item-h) * 0.013);
    clip-path: polygon(
        7% 0,
        94% 0,
        100% 18%,
        100% 82%,
        94% 100%,
        7% 100%,
        0 82%,
        0 18%
    );
    border: none;
}

.product-price-box.limpo {
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
}

.product-price-box {
    background: linear-gradient(180deg, #e60000 0%, #b30000 100%);
    color: white;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding: calc(var(--item-h) * 0.018) calc(var(--item-h) * 0.09);
    border-radius: calc(var(--item-h) * 0.028);
    position: relative; 
    margin-top: calc(var(--item-h) * -0.045);
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 50; 
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255,255,255,0.4);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    flex-shrink: 0;
    overflow: hidden; /* Garante que o valor fique dentro da box */
}

.price-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    width: 100%;
    padding: 0 10px;
}

/* Tamanhos de Fonte Fixos dentro do Balão */
.price-integer { 
    font-size: calc(var(--item-h) * 0.235 * var(--fator-preco, 1));
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0;
    line-height: 0.78;
}

.price-decimal-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 8px;
    margin-left: 2px;
}

.price-decimal {
    font-size: calc(var(--item-h) * 0.094 * var(--fator-preco, 1));
    font-family: 'Bebas Neue', sans-serif;
    line-height: 0.8;
}

.price-prefix { 
    font-size: calc(var(--item-h) * 0.047 * var(--fator-preco, 1)); 
    font-family: 'Bebas Neue', sans-serif;
    margin-top: calc(var(--item-h) * 0.045);
    margin-right: calc(var(--item-h) * 0.010);
    font-weight: 400;
    letter-spacing: 0;
}

.price-unit {
    font-size: calc(var(--item-h) * 0.061 * var(--fator-preco, 1));
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    margin-top: calc(var(--item-h) * 0.006);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Ajustes de Escala para Layouts Densos - Mantendo Proporção */
.products-container.layout-9 .product-price-box,
.products-container.layout-12 .product-price-box { 
    transform: scale(0.8); 
    margin-top: -30px;
}

.products-container.layout-16 .product-price-box { 
    transform: scale(0.65); 
    margin-top: -20px;
}

/* Ajuste Stories */
.offer-container.stories .product-image-wrapper { height: 180px; }
.offer-container.stories .products-container.layout-9 .product-image-wrapper,
.offer-container.stories .products-container.layout-12 .product-image-wrapper { height: 100px; }

.price-footer-text {
    background: #000;
    color: #fff;
    font-size: 11px;
    padding: 2px 10px;
    margin-top: -2px;
    width: 100%;
    text-align: center;
    font-weight: 900;
}

.product-footer {
    width: 100%;
    flex-shrink: 0;
}

.product-obs {
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0 0;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
}

/* Modal de Download (Estilo da Imagem) */
/* ==========================================================================
   CRIAR ENCARTE POR LISTA
   A janela era de outro tempo do projeto: fundo cinza, botões azuis, borda
   azul-clara, raio 8 e um X vermelho quadrado grudado no canto. O painel
   inteiro fala outra língua — branco, raio 14-16, verde var(--verde-700), borda
   #ede6f7. Aqui ela passa a falar a mesma.
   ========================================================================== */
.modal-content.import-list-modal {
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 560px;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    animation: modalPop 0.22s ease-out;
}

.modal-content.import-list-modal .modal-header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pane-borda, #ede6f7);
    background: #fff;
}

.modal-content.import-list-modal .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #26222a;
}

.modal-content.import-list-modal .modal-header h2 i {
    color: var(--pane-verde, var(--verde-700));
}

.modal-content.import-list-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
}

/* Explicação antes do campo, não depois: é ela que diz como escrever a lista. */
.import-dica {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b6474;
}

.import-campo {
    display: block;
}

.import-campo-rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b8494;
}

.modal-content.import-list-modal textarea {
    width: 100%;
    min-height: 190px;
    padding: 12px 14px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 12px;
    background: #fff;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    color: #26222a;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal-content.import-list-modal textarea:focus {
    border-color: var(--pane-verde, var(--verde-700));
    box-shadow: 0 0 0 3px rgba(5, 133, 73, 0.14);
}

/* Contador do lado da ação: enquanto se digita, ele já diz quantos produtos
   vão entrar — é a conferência que antes só existia depois de gerar. */
.import-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.import-conta {
    font-size: 12px;
    font-weight: 700;
    color: #8b8494;
}

.import-conta.cheio {
    color: var(--pane-verde, var(--verde-700));
}

.import-acao-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.import-acao-principal:hover:not(:disabled) {
    transform: translateY(-1px);
}

.import-acao-principal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Os dois caminhos que ainda não existem ficam abaixo de uma linha e com a
   etiqueta dizendo o que são. Antes eram três botões azuis do mesmo tamanho,
   e dois deles não faziam nada ao serem clicados. */
.import-outros {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--pane-borda, #ede6f7);
}

.import-outro {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--pane-borda, #ede6f7);
    border-radius: 12px;
    background: #fff;
    color: #b0a9ba;
    font-size: 12px;
    font-weight: 700;
    cursor: not-allowed;
}

.import-outro em {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--pane-cabeca-bg, #faf7ff);
    color: var(--pane-verde, var(--verde-700));
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

@media (max-width: 860px) {
    .modal-content.import-list-modal {
        width: 96%;
        max-width: 96%;
    }

    /* Ação em cima do contador: no telefone o botão é o que importa. */
    .import-rodape {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }

    .import-conta {
        text-align: center;
    }

    .import-outros {
        flex-direction: column;
    }
}

.import-list-btn {
    background: #1976d2;
    margin-left: 10px;
}

/* Modal Recuperar Rascunho */

/* Fim Modal Importar Lista */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.active {
    display: flex;
}

.modal-content.download-options {
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    animation: modalPop 0.3s ease-out;
}

@keyframes modalPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-content.download-options .modal-header {
    background: var(--verde-800); /* Verde da imagem */
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-content.download-options .modal-header h2 {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

.btn-close-modal {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 28px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.btn-close-modal:hover {
    color: white;
}

.modal-content.download-options .modal-body {
    padding: 40px;
}

.modal-content.bg-editor-modal {
    background: white;
    width: 92%;
    max-width: 860px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    animation: modalPop 0.3s ease-out;
}

.modal-content.bg-editor-modal .modal-header {
    background: var(--verde-800);
    color: white;
    padding: 18px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.modal-content.bg-editor-modal .modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.modal-content.bg-editor-modal .modal-body {
    padding: 22px;
}

.bg-editor-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 22px;
    align-items: center;
}

.bg-editor-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bg-editor-canvas {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bg-editor-canvas img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    display: block;
}

.bg-editor-toggle {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
}

.bg-toggle-btn {
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    color: #334155;
}

.bg-toggle-btn.active {
    background: #111827;
    color: white;
}

.bg-editor-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bg-editor-status {
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.bg-editor-btn {
    border: none;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.4px;
    transition: transform 0.15s, filter 0.15s;
    background: #e2e8f0;
    color: #334155;
}

.bg-editor-local-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.bg-editor-local-controls label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    flex: 1;
    min-width: 140px;
}

.bg-editor-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.bg-editor-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(0.97);
}

.bg-editor-btn.primary {
    background: #1976d2;
    color: white;
}

.bg-editor-btn.success {
    background: #1ea64b;
    color: white;
}

.bg-editor-btn.ghost {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e5e7eb;
}

/* Ajustes finos: no computador ficam abertos (o `open` está no HTML); no
   celular o script os fecha ao abrir a janela, porque sozinhos ocupavam 128px
   dos 474px úteis de um Android de 640px de altura. */
.bg-editor-avancado > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--verde-800);
    padding: 6px 2px;
    list-style: none;
    user-select: none;
}

.bg-editor-avancado > summary::-webkit-details-marker { display: none; }

.bg-editor-avancado > summary::before {
    /* O triangulo. Estava gravado com um byte de controle no lugar do
       escape, e aparecia na tela como as letras B8 ao lado de 'Ajustes
       finos'. */
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.bg-editor-avancado[open] > summary::before { transform: rotate(90deg); }

/* SALVAR e CANCELAR dividem a linha: empilhados gastavam 94px de altura para
   duas ações que cabem lado a lado. */
.bg-editor-decisao {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 8px;
}

.bg-editor-decisao .bg-editor-btn { margin: 0; }

.bg-editor-hint {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .bg-editor-layout {
        grid-template-columns: 1fr;
    }
    .modal-content.bg-editor-modal .modal-body {
        padding: 18px;
    }
}

/* ==========================================================================
   JANELA DE BAIXAR
   Eram quatro quadrados azuis (#007bff — cor que não existe em nenhum outro
   lugar do editor, que é verde) numa grade de TRÊS colunas: o quarto botão caía
   sozinho na linha de baixo. Agora são quatro cartões iguais, 2x2, na mesma
   linguagem das outras janelas.
   ========================================================================== */
.modal-content.download-options {
    width: 92%;
    max-width: 460px;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    animation: modalPop 0.22s ease-out;
}

.modal-content.download-options .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pane-borda, #ede6f7);
    background: #fff;
}

.modal-content.download-options .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #26222a;
}

.modal-content.download-options .modal-header h2 i {
    color: var(--pane-verde, var(--verde-700));
}

.modal-content.download-options .modal-body {
    padding: 14px 16px 18px;
}

.download-dica {
    margin: 0 0 12px;
    font-size: 12px;
    color: #6b6474;
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.download-option-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 92px;
    padding: 12px 13px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.download-option-btn:hover:not(:disabled) {
    border-color: var(--pane-verde, var(--verde-700));
    box-shadow: 0 4px 14px rgba(5, 133, 73, 0.14);
    transform: translateY(-2px);
}

.download-option-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.download-option-icone {
    font-size: 17px;
    color: var(--pane-verde, var(--verde-700));
}

.download-option-btn .ext {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #26222a;
}

.download-option-hint {
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 600;
    color: #8b8494;
}

/* Numa tela estreita os quatro viram uma coluna: dois cartões lado a lado em
   375px deixariam a legenda em três linhas. */
@media (max-width: 420px) {
    .download-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .download-option-btn {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .download-option-hint {
        flex: 1 0 100%;
    }
}

/* Nada no painel lateral pode ultrapassar a largura dele. O input de arquivo
   e os selects têm largura intrínseca e criavam rolagem horizontal. */
.editor-panel .tab-content input,
.editor-panel .tab-content select,
.editor-panel .tab-content textarea,
.editor-panel .tab-content button,
.editor-panel .tab-content .field-row,
.editor-panel .tab-content .logo-controls {
    max-width: 100%;
    box-sizing: border-box;
}

.editor-panel .tab-content input[type="file"] {
    width: 100%;
    font-size: 12px;
}

/* ===== Editor de produto =====
   Antes eram 12 linhas "label: campo" empilhadas, todas sempre visíveis.
   Agora: rótulo em cima do campo (borda esquerda alinhada), os essenciais
   à vista e o resto atrás de "Mais opções". */
.product-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pe-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.pe-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #64748b;
}

.pe-label input[type="color"],
.pe-swatches input[type="color"] {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #d5dbe3;
    border-radius: 5px;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.pe-swatches {
    display: flex;
    gap: 5px;
}

.product-editor textarea,
.product-editor input[type="text"],
.product-editor input[type="number"],
.product-editor select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}

.product-editor textarea {
    resize: vertical;
    min-height: 46px;
    font-family: inherit;
}

.product-editor textarea:focus,
.product-editor input:focus,
.product-editor select:focus {
    outline: none;
    border-color: var(--primary-color, #1976d2);
}

.pe-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pe-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pe-inline .small-input {
    width: 70px;
    flex-shrink: 0;
}

.pe-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
    white-space: nowrap;
    cursor: pointer;
}

.pe-check input {
    width: auto;
}

/* Ações de imagem: fileira de chips neutros, sem cores brigando entre si */
.pe-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pe-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #d5dbe3;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.pe-chip:hover {
    background: #eef2f7;
    border-color: #b9c3cf;
}

.pe-chip.danger {
    color: #c0392b;
}

.pe-chip.danger:hover {
    background: #fdecea;
    border-color: #f0b7b1;
}

/* "Mais opções": tudo que não é essencial fica recolhido */
.pe-more {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fbfcfe;
}

.pe-more > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    list-style: none;
    user-select: none;
}

.pe-more > summary::-webkit-details-marker {
    display: none;
}

.pe-more > summary span {
    flex: 1;
}

.pe-more-arrow {
    transition: transform 0.2s;
    font-size: 11px;
}

.pe-more[open] .pe-more-arrow {
    transform: rotate(180deg);
}

.pe-more-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 12px 14px;
}

/* Botão de destaque do produto */
.pe-destaque {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed #d5a441;
    border-radius: 10px;
    background: #fffaf0;
    color: #9a6b12;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pe-destaque:hover {
    background: #fff3d9;
    border-color: #c8951f;
}

.pe-destaque[aria-pressed="true"] {
    background: #ffc107;
    border: 1px solid #c8951f;
    color: #4a3608;
}

/* O destaque não marca nada na arte: a estrela fica só na lista de produtos. */

/* Busca de figura dentro do editor de produto */
.figure-search {
    flex: 1;
    min-width: 0;
}

.figure-search-box {
    display: flex;
    gap: 6px;
}

.figure-search-box input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 13px;
}

.figure-search-box button {
    flex-shrink: 0;
    width: 38px;
    border: none;
    border-radius: 10px;
    background: var(--pane-verde, var(--verde-700));
    color: white;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.figure-search-box button:disabled {
    opacity: 0.6;
    cursor: default;
}

.figure-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.figure-results:empty {
    display: none;
}

.figure-results .figure-msg {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #666;
    padding: 4px 0;
}

.figure-item {
    border: 2px solid transparent;
    border-radius: 6px;
    background: #fff;
    padding: 2px;
    cursor: pointer;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.figure-item:hover {
    border-color: var(--primary-color, #1976d2);
}

/* ==========================================================================
   A IMAGEM NÃO PODE EMPURRAR A CÉLULA

   Relatado no iPhone: ao abrir "ver mais imagens", as figuras iam crescendo
   conforme carregavam. No Chrome não reproduz — a célula fica nos mesmos 87px
   do começo ao fim, medido com seis imagens de proporções extremas.

   O que muda no Safari são os dois apoios em que esta regra se equilibrava:

   - "max-height: 100%" num filho de caixa cujo tamanho vem de "aspect-ratio"
     é justamente a combinação em que o Safari já falhou em resolver a
     porcentagem; falhando, vale a altura natural da imagem — que numa foto de
     web é de mil e tantos pixels — e a célula cresce ao carregar;
   - "aspect-ratio" só existe a partir do iOS 15. Em aparelho mais antigo a
     célula não tem altura nenhuma reservada e é o conteúdo que a define.

   Os dois levam ao mesmo sintoma. A correção tira a imagem do fluxo: em
   posição absoluta ela não participa do cálculo de tamanho da célula, então
   não há valor natural que possa empurrá-la, resolva o Safari a porcentagem
   ou não. E um "::before" com "padding-top: 100%" garante o quadrado onde
   "aspect-ratio" não existe.
   ========================================================================== */

.figure-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 2px;
    box-sizing: border-box;
    object-fit: contain;
}

/* Reserva o quadrado sem depender de "aspect-ratio". Onde ele existe, este
   apoio sai de cena para não somar altura duas vezes. */
.figure-item::before {
    content: '';
    display: block;
    padding-top: 100%;
    flex: 0 0 auto;
}

@supports (aspect-ratio: 1) {
    .figure-item::before { display: none; }
}

/* Item de grade tem "min-width: auto" por padrão, e isso o impede de encolher
   abaixo do conteúdo: bastava uma imagem larga para a coluna empurrar a grade
   além da tela. Com a imagem fora do fluxo isso já não acontece, mas o zero
   explícito é o que garante. */
.figure-item {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.figure-item .figure-origem {
    position: absolute;
    right: 2px;
    bottom: 2px;
    font-size: 9px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(0,0,0,0.6);
    color: white;
}

/* Nome editável de cada imagem na galeria */
.gallery-item .gallery-name {
    width: 100%;
    margin-top: 4px;
    padding: 3px 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
}

.gallery-item .gallery-name:focus {
    border-color: var(--primary-color, #1976d2);
    outline: none;
}




/* Fim Modal Download */
/* Grid de Temas */
.themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.theme-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

.theme-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.theme-preview {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.theme-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255,255,255,0.2);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.3);
}

.theme-info {
    padding: 20px;
}

.theme-info h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.theme-info p {
    margin: 0 0 20px;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.use-theme-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.use-theme-btn:hover {
    background: var(--primary-hover);
}

/* Fim Temas */
.gallery-container h3 {
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.upload-area {
    margin-bottom: 20px;
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    background: #f9f9f9;
}

.upload-label:hover {
    border-color: var(--primary-color);
    background: #f0f4ff;
}

.upload-label i {
    font-size: 30px;
    color: #666;
    margin-bottom: 10px;
}

.upload-label span {
    font-weight: bold;
    font-size: 13px;
    color: #444;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 5px;
}

.gallery-item {
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    /* Coluna: miniatura em cima, campo de nome embaixo. Antes era um quadrado
       fixo com overflow:hidden, que cortava o campo de nome. */
    display: flex;
    flex-direction: column;
    padding: 4px;
}

.gallery-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    padding: 5px;
}

.empty-gallery {
    grid-column: span 3;
    text-align: center;
    font-size: 12px;
    color: #888;
    padding: 20px;
}

/* Dashboard Styles */
.dashboard-container {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    /* O `margin: 0 auto` desativa o `stretch` deste item flex, e sem largura
       declarada ele virava max-content (944px): numa tela estreita o
       `overflow-x: hidden` do .work-area cortava o texto em vez de rolar.
       Com width: 100% ele acompanha a área de trabalho e o max-width continua
       segurando o limite no desktop. */
    width: 100%;
}

.welcome-section {
    margin-bottom: 40px;
}

.welcome-section h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
}

.welcome-section p {
    color: #666;
    font-size: 16px;
}

.action-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.action-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eee;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

.action-card i {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.action-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.action-card p {
    color: #777;
    font-size: 14px;
}

.recent-offers {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.recent-offers h2 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-container.dashboard-v2 {
    max-width: 1240px;
}

/* ==========================================================================
   FAIXA DE SAUDAÇÃO

   Substitui o banner "Novidade / Cartazes temáticos", que ocupava a primeira
   tela inteira com texto de vitrine e uma barra de progresso contra um limite
   que o servidor não aplica.

   No lugar: quem é a pessoa, em que plano está, e o botão da única coisa que
   ela veio fazer. O verde da marca no fundo, e o amarelo — a segunda cor — no
   selo do plano, onde tem função de destacar um dado, não de enfeitar.
   ========================================================================== */

.saudacao {
    background: linear-gradient(135deg, var(--verde-800) 0%, var(--verde-700) 100%);
    color: #fff;
    border-radius: 18px;
    padding: 26px 28px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.saudacao-texto h1 {
    margin: 0 0 5px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.saudacao-texto p {
    margin: 0;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.84);
}

.saudacao-lado {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.selo-plano {
    background: var(--amarelo);
    color: var(--amarelo-texto);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 999px;
    white-space: nowrap;
}

.botao-principal {
    background: var(--branco);
    color: var(--verde-800);
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    transition: background-color 0.16s ease, transform 0.08s ease;
}

.botao-principal:hover {
    background: var(--verde-050);
}

.botao-principal:active {
    transform: translateY(1px);
}

.botao-principal:focus-visible {
    outline: 3px solid var(--amarelo);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .saudacao {
        padding: 20px;
        border-radius: 14px;
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .saudacao-texto h1 { font-size: 21px; }

    /* No telefone o botão ocupa a linha: é a ação da tela, e alvo largo é o
       que o dedo acerta sem mirar. */
    .saudacao-lado {
        justify-content: space-between;
    }

    .botao-principal {
        flex: 1;
        justify-content: center;
    }
}

/* Três números, não quatro cartões: o quarto era um atalho de "criar" que
   agora vive na faixa de saudação, onde a ação principal pertence.
   auto-fit em vez de contagem fixa — assim a grade se refaz sozinha se um
   dia entrar ou sair um indicador. */
.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.kpi-card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #edf0f5;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}

.kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(4, 103, 57, 0.12);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.kpi-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.kpi-value {
    font-size: 22px;
    font-weight: 900;
    color: #111827;
    margin-top: 2px;
}

.kpi-card.kpi-cta {
    cursor: pointer;
    background: linear-gradient(135deg, rgba(25,118,210,0.14) 0%, rgba(4, 103, 57,0.14) 60%, rgba(0,200,83,0.12) 100%);
    border: 1px solid rgba(4, 103, 57,0.18);
    justify-content: space-between;
}

.kpi-cta-title {
    font-size: 14px;
    font-weight: 900;
    color: #111827;
}

.kpi-cta-subtitle {
    font-size: 12px;
    color: #475569;
    margin-top: 4px;
    font-weight: 700;
}

.kpi-cta-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(17,24,39,0.9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-head {
    margin-bottom: 12px;
}

.section-head h2 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.section-sub {
    margin-top: 4px;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.quick-card {
    background: white;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
}

.quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: rgba(4, 103, 57,0.25);
}

.quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.quick-icon.teal { background: linear-gradient(135deg, #00bcd4 0%, #00c853 100%); }
.quick-icon.blue { background: linear-gradient(135deg, #1976d2 0%, #00b0ff 100%); }
.quick-icon.purple { background: linear-gradient(135deg, #6a1b9a 0%, #ab47bc 100%); }
.quick-icon.indigo { background: linear-gradient(135deg, #3949ab 0%, var(--verde-800) 100%); }

.quick-title {
    font-size: 14px;
    font-weight: 900;
    color: #111827;
}

.quick-desc {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    line-height: 1.35;
}

.dashboard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.panel {
    background: white;
    border-radius: 14px;
    border: 1px solid #edf0f5;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-head {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
}

.panel-head h3 {
    margin: 0;
    font-size: 14px;
    color: #111827;
    font-weight: 900;
}

.panel-link {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.panel-action {
    background: var(--verde-800);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
}

.panel-body {
    padding: 14px 16px;
    position: relative;
    min-height: 170px;
}

.panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 30px 20px;
    border-radius: 12px;
    border: 1px dashed rgba(100,116,139,0.35);
    color: #64748b;
    text-align: center;
    height: 100%;
}

.panel-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(4, 103, 57,0.12);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.panel-empty-title {
    font-weight: 900;
    color: #111827;
}

.panel-empty-sub {
    font-size: 12px;
    font-weight: 600;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recent-item {
    display: grid;
    grid-template-columns: 78px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #eef2f7;
    background: #fbfdff;
}

.recent-thumb {
    width: 78px;
    height: 54px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-title {
    font-weight: 900;
    color: #111827;
    font-size: 13px;
}

.recent-sub {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-top: 3px;
}

.recent-btn {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    color: #0d47a1;
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-weight: 800;
    font-size: 12px;
}

.tutorials-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}

.tutorial-card {
    background: white;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
    scroll-snap-align: start;
}

.tutorial-thumb {
    height: 120px;
    background: linear-gradient(135deg, rgba(4, 103, 57,0.18) 0%, rgba(25,118,210,0.12) 55%, rgba(0,200,83,0.10) 100%);
    position: relative;
}

.tutorial-play {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(17,24,39,0.9);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 12px;
    left: 12px;
}

.tutorial-title {
    padding: 12px;
    font-weight: 900;
    font-size: 13px;
    color: #111827;
    line-height: 1.25;
}

.cartazes-page {
    max-width: 1320px;
}

.cartazes-hero {
    background: white;
    border: 1px solid #edf0f5;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.cartazes-hero-title {
    font-weight: 900;
    color: #111827;
    font-size: 16px;
}

.cartazes-hero-subtitle {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
}

.cartazes-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.step-chip {
    background: #f1f5f9;
    border: 1px solid #e5e7eb;
    color: #334155;
    border-radius: 999px;
    padding: 10px 12px;
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
}

.step-chip.active {
    background: #111827;
    color: white;
    border-color: #111827;
}

.cartazes-layout {
    display: grid;
    grid-template-columns: 1.45fr 0.55fr;
    gap: 14px;
    align-items: start;
}

.wizard-step {
    display: none;
}

.wizard-step.active {
    display: block;
}

.wizard-card {
    background: white;
    border: 1px solid #edf0f5;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
    padding: 18px;
}

.wizard-head h2 {
    margin: 0;
    font-size: 16px;
    color: #111827;
    font-weight: 900;
}

.wizard-hint {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.wizard-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
    margin-top: 16px;
}

.wizard-block {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 14px;
    background: #fbfdff;
}

.block-title {
    font-weight: 900;
    font-size: 13px;
    color: #111827;
    margin-bottom: 10px;
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.template-item {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 14px;
    padding: 12px;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    text-align: left;
}

.template-item.active {
    border-color: rgba(4, 103, 57,0.35);
    box-shadow: 0 0 0 4px rgba(4, 103, 57,0.08);
}

.template-radio {
    color: var(--primary-color);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-title {
    font-weight: 900;
    font-size: 13px;
    color: #111827;
}

.template-sub {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
}

.template-chip {
    font-size: 11px;
    font-weight: 900;
    color: #0d47a1;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    padding: 7px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.size-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.size-item {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 14px;
    padding: 12px 10px;
    cursor: pointer;
    text-align: center;
}

.size-item.active {
    border-color: rgba(25,118,210,0.45);
    box-shadow: 0 0 0 4px rgba(25,118,210,0.10);
}

.size-label {
    font-weight: 1000;
    color: #111827;
}

.size-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    font-weight: 700;
}

.size-info {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(100,116,139,0.35);
    background: #ffffff;
}

.size-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.size-info-title {
    font-weight: 900;
    color: #111827;
}

.size-info-desc {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.wizard-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.wizard-actions.split {
    justify-content: space-between;
}

.wizard-btn {
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wizard-btn.primary {
    background: var(--verde-800);
    color: white;
}

.wizard-btn.ghost {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e5e7eb;
}

.wizard-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.wizard-textarea {
    width: 100%;
    height: 220px;
    resize: vertical;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    font-size: 14px;
}

.wizard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.wizard-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 800;
}

.inline-input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
}

.inline-file {
    display: inline-flex;
    border: 1px dashed rgba(25,118,210,0.55);
    color: #0d47a1;
    background: #e3f2fd;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 900;
    cursor: pointer;
    width: fit-content;
    gap: 10px;
    align-items: center;
}

.inline-file input {
    display: none;
}

.inline-pill {
    width: fit-content;
    background: #111827;
    color: white;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    font-size: 12px;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: #334155;
    font-size: 13px;
}

.review-table {
    margin-top: 14px;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    overflow: hidden;
}

.review-head, .review-row {
    display: grid;
    grid-template-columns: 0.9fr 1.4fr 1fr 1fr 0.8fr 0.45fr 44px;
    gap: 8px;
    align-items: center;
    padding: 12px;
}

.review-head {
    background: #f8fafc;
    font-weight: 900;
    font-size: 12px;
    color: #334155;
}

.review-row {
    background: white;
    border-top: 1px solid #f1f5f9;
}

.review-row .input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 10px;
    font-size: 13px;
}

.review-row .qty {
    text-align: center;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn.danger {
    background: #ffebee;
    border-color: rgba(183,28,28,0.35);
    color: #b71c1c;
}

.confirm-box {
    margin-top: 14px;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #fbfdff;
}

.confirm-count {
    font-weight: 900;
    color: #334155;
}

.generated-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 14px;
}

.generated-preview {
    margin-top: 16px;
}

.poster-page {
    display: grid;
    gap: 14px;
}

.poster-page.per-1 { grid-template-columns: 1fr; }
.poster-page.per-2 { grid-template-columns: 1fr 1fr; }
.poster-page.per-4 { grid-template-columns: 1fr 1fr; }
.poster-page.per-8 { grid-template-columns: repeat(4, 1fr); }

.preview-panel-card {
    background: white;
    border: 1px solid #edf0f5;
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.05);
    padding: 16px;
    position: sticky;
    top: 16px;
}

.preview-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.preview-title {
    font-weight: 900;
    color: #111827;
}

.preview-sub {
    font-size: 12px;
    color: #64748b;
    font-weight: 800;
}

.preview-stage {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.poster {
    --poster-bg: #ffffff;
    --poster-accent: #ffeb3b;
    --poster-ink: #111827;
    --poster-price: #e53935;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    border: 0;
    background: var(--poster-bg);
    color: var(--poster-ink);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 14px 12px;
}

.poster > * {
    position: relative;
}

.poster-tag {
    margin: 8px auto 0;
    font-family: Impact, "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(46px, 10.5vw, 74px);
    line-height: 1;
    color: var(--poster-price);
    letter-spacing: 1px;
    position: relative;
    padding: 10px 18px;
    transform: skew(-2deg);
    isolation: isolate;
}

.poster-tag::before {
    content: '';
    position: absolute;
    left: -18px;
    right: -18px;
    top: 58%;
    height: 70%;
    transform: translateY(-50%) rotate(-2deg);
    background: var(--poster-accent);
    clip-path: polygon(0 40%,4% 18%,14% 10%,28% 22%,40% 10%,52% 24%,66% 12%,78% 26%,90% 14%,100% 34%,98% 76%,90% 92%,72% 82%,56% 96%,42% 82%,30% 94%,16% 78%,6% 92%,0 72%);
    z-index: -1;
}

.poster-name {
    margin: 16px 14px 0;
    text-align: center;
    font-family: Impact, "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(44px, 10.5vw, 66px);
    line-height: 0.95;
    word-break: break-word;
}

.poster-brand, .poster-weight {
    margin-top: 12px;
    text-align: center;
    font-family: Impact, "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(30px, 7vw, 54px);
    line-height: 0.95;
}

.poster-price {
    margin-top: auto;
    margin: 12px 10px 6px;
    background: transparent;
    border: 0;
    border-radius: 16px;
    padding: 14px 10px 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    position: relative;
    isolation: isolate;
}

.poster-price::before {
    content: '';
    position: absolute;
    left: -12px;
    right: -12px;
    top: 10px;
    bottom: 0;
    background: var(--poster-accent);
    clip-path: polygon(0 28%,6% 8%,18% 18%,30% 6%,44% 20%,58% 10%,72% 22%,86% 8%,100% 26%,98% 84%,92% 98%,74% 90%,60% 100%,46% 88%,34% 98%,20% 86%,8% 100%,0 82%);
    z-index: -1;
}

.poster-currency {
    font-family: Impact, "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size: 20px;
}

.poster-value {
    font-family: Impact, "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(64px, 18vw, 110px);
    line-height: 0.9;
    color: var(--poster-price);
}

.poster-unit {
    font-family: Impact, "Arial Black", Arial, sans-serif;
    font-weight: 900;
    font-size: 16px;
}

.poster[data-template="padrao"] .poster-currency,
.poster[data-template="padrao"] .poster-unit {
    display: none;
}

.preview-foot {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.preview-btn {
    flex: 1;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 12px;
    cursor: pointer;
    font-weight: 900;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.preview-btn.primary {
    background: #111827;
    color: white;
    border-color: #111827;
}

@media (max-width: 1200px) {
    .cartazes-layout {
        grid-template-columns: 1fr;
    }
    .preview-panel-card {
        position: relative;
        top: auto;
    }
    .wizard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .wizard-row {
        grid-template-columns: 1fr;
    }
    .size-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .review-head, .review-row {
        grid-template-columns: 1fr;
    }
    .review-head {
        display: none;
    }
    .confirm-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .poster-page.per-8 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Admin Dashboard */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.stat-card i {
    font-size: 32px;
    color: var(--primary-color);
}

.stat-card h3 {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.stat-card p {
    margin: 5px 0 0;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.admin-charts-section h2 {
    font-size: 20px;
    margin-bottom: 15px;
}

.theme-usage-list {
    list-style: none;
    padding: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

.theme-usage-list li {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.theme-usage-list li:last-child {
    border-bottom: none;
}

.theme-usage-list .theme-name {
    font-weight: 500;
}

.theme-usage-list .theme-uses {
    font-weight: bold;
    color: var(--primary-color);
}

/* Fim Admin Dashboard */

/* Página de Planos */
.text-center {
    text-align: center;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
    align-items: stretch;
}

.plan-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    position: relative;
}

.plan-card.recommended {
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
}

.recommended-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.plan-header h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.plan-price {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.plan-price .price-period {
    font-size: 16px;
    font-weight: normal;
    color: #666;
}

.custom-price {
    font-size: 24px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    flex-grow: 1;
}

.plan-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-features li i {
    color: #28a745;
}

.select-plan-btn {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.plan-card:not(.recommended) .select-plan-btn {
    background: #333;
}

.select-plan-btn:hover {
    background: var(--primary-hover);
}

/* Fim Página de Planos */

.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.offer-item {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: background 0.2s;
}

.offer-item:hover {
    background: #f9f9f9;
}

.offer-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #f0f0f0;
}

.offer-item span {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #444;
}

.empty-offers {
    grid-column: span 3;
    text-align: center;
    padding: 40px;
    color: #999;
}

.upload-btn-mini {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px dashed #0d47a1;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    flex: 1;
    justify-content: center;
}

.upload-btn-mini:hover {
    background: #bbdefb;
    border-style: solid;
}

.upload-btn-mini i {
    font-size: 16px;
}

.upload-btn-mini.danger {
    background: #ffebee;
    color: #b71c1c;
    border: 1px dashed #b71c1c;
}

.upload-btn-mini.secondary {
    background: #f3e5f5;
    color: var(--verde-800);
    border: 1px dashed var(--verde-800);
}

.upload-btn-mini:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.product-list-hint {
    margin: 0 0 10px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #8a919e;
}

/* Sem rolagem própria: a lista dentro da aba dava duas áreas roláveis
   aninhadas e, com elas, duas barras lado a lado. Quem rola é a aba. */
.added-products-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Alça de arraste do cartão.
   `touch-action: none` só na alça: o dedo arrastando a alça reordena, e
   arrastando o resto do cartão ainda rola a lista. */
.pc-card .item-grip {
    flex: 0 0 auto;
    align-self: stretch;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c9c3d2;
    font-size: 13px;
    cursor: grab;
    touch-action: none;
    border-radius: 6px;
}

.pc-card .item-grip:hover {
    color: var(--pane-verde, var(--verde-700));
    background: rgba(5, 133, 73, 0.07);
}

.pc-card .item-grip:active {
    cursor: grabbing;
}

/* Destaque não se move: o alfinete substitui a alça e não reage ao ponteiro. */
.pc-card .item-grip.fixo {
    color: #e0a800;
    cursor: default;
    touch-action: auto;
}

.pc-card .item-grip.fixo:hover {
    color: #e0a800;
    background: none;
}

/* O CARTAO EM VIAGEM.

   Sai do fluxo e passa a seguir o ponteiro. Posicao fixa, e nao absoluta,
   porque a lista rola durante o arraste: presa ao documento, o cartao rolaria
   junto e descolaria do dedo.

   Levantado do papel -- sombra maior, inclinacao de meio grau, um fio de
   escala. E o que diz "isto esta na sua mao", e nao "isto esta na lista". */
.pc-card.arrastando {
    position: fixed;
    z-index: 300;
    margin: 0;
    pointer-events: none;
    border-color: var(--pane-verde, var(--verde-700));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
    transform: scale(1.02) rotate(-0.5deg);
    opacity: 0.97;
    /* Sem transicao: a posicao e escrita a cada movimento do ponteiro, e
       qualquer atraso faria o cartao vir arrastado atras do dedo. */
    transition: none;
}

/* O VAO DE DESTINO.

   Ocupa exatamente a altura do cartao levantado, para a lista nao encolher e
   mexer o alvo enquanto se mira. O pontilhado e o "Solte aqui" dizem o que o
   espaco vazio sozinho nao dizia: que e ALI que a oferta vai ficar. */
.pc-solte {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border: 2px dashed var(--pane-verde, var(--verde-700));
    border-radius: 14px;
    background: var(--verde-50, #eaf7f0);
    animation: solte-respira 1.1s ease-in-out infinite;
}

.pc-solte span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--verde-800, #046739);
}

/* A seta desce e volta: um vao parado passa por buraco no layout; um vao que
   respira passa por lugar reservado. */
@keyframes solte-respira {
    0%, 100% { opacity: .85; }
    50%      { opacity: 1; }
}

.pc-solte i { animation: solte-seta .9s ease-in-out infinite; }

@keyframes solte-seta {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(2px); }
}

/* Os vizinhos deslizam para abrir e fechar o vao, em vez de saltar. O salto
   e o que faz uma lista parecer que se reorganizou sozinha. */
.added-products-list.reordenando .pc-card:not(.arrastando) {
    transition: transform .18s ease;
}

/* Durante o arraste ninguém pisca no hover nem seleciona texto, senão o
   cartão que está indo embaixo do ponteiro parece clicável. */
.added-products-list.reordenando {
    user-select: none;
}

/* Profile Styles */
/* ==========================================================================
   FAIXA DO TOPO

   Era só um contêiner alinhado à direita com o avatar dentro. Agora carrega
   as duas âncoras da tela: o botão do menu no canto esquerdo e o perfil no
   direito — os dois cantos que a mão alcança sem pensar.
   ========================================================================== */

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
    background: var(--branco);
    border-bottom: 1px solid #e6eae8;
    position: relative;
    z-index: 30;
}

/* Botão único do menu: no computador recolhe a barra, no celular abre a
   gaveta. Antes eram dois botões diferentes, em cantos diferentes conforme a
   largura — a mesma tarefa mudava de lugar. */
.btn-menu-lateral {
    width: 42px;
    height: 42px;
    border: 1px solid #e6eae8;
    background: var(--branco);
    color: var(--verde-800);
    border-radius: 12px;
    font-size: 17px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.btn-menu-lateral:hover {
    background: var(--verde-050);
    border-color: var(--verde-100);
}

/* OS TRÊS TRAÇOS QUE MUDAM DE FORMA.

   Parado, é o hambúrguer de sempre. Passando o mouse, vira a seta do que o
   clique vai fazer: para a esquerda com a barra larga (recolher), para a
   direita com ela estreita (expandir). Na gaveta do celular, aberta, vira X.
   O traço de cima e o de baixo giram presos na ponta, e o do meio fica: é
   ele o corpo da seta. */
.icone-menu {
    position: relative;
    display: block;
    width: 18px;
    height: 14px;
}

.icone-menu > span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .22s ease, width .22s ease, top .22s ease,
                left .22s ease, opacity .16s ease;
}

.icone-menu > span:nth-child(1) { top: 0; }
.icone-menu > span:nth-child(2) { top: 6px; }
.icone-menu > span:nth-child(3) { top: 12px; }

/* Seta para a esquerda: recolher. */
.btn-menu-lateral[data-estado="aberto"]:hover .icone-menu > span:nth-child(1),
.btn-menu-lateral[data-estado="aberto"]:hover .icone-menu > span:nth-child(3) {
    top: 6px;
    width: 10px;
    transform-origin: 1px 50%;
}
.btn-menu-lateral[data-estado="aberto"]:hover .icone-menu > span:nth-child(1) { transform: rotate(-42deg); }
.btn-menu-lateral[data-estado="aberto"]:hover .icone-menu > span:nth-child(3) { transform: rotate(42deg); }

/* Seta para a direita: expandir. */
.btn-menu-lateral[data-estado="recolhido"]:hover .icone-menu > span:nth-child(1),
.btn-menu-lateral[data-estado="recolhido"]:hover .icone-menu > span:nth-child(3) {
    top: 6px;
    left: 8px;
    width: 10px;
    transform-origin: calc(100% - 1px) 50%;
}
.btn-menu-lateral[data-estado="recolhido"]:hover .icone-menu > span:nth-child(1) { transform: rotate(42deg); }
.btn-menu-lateral[data-estado="recolhido"]:hover .icone-menu > span:nth-child(3) { transform: rotate(-42deg); }

/* X: fechar a gaveta. */
.btn-menu-lateral[aria-expanded="true"] .icone-menu > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.btn-menu-lateral[aria-expanded="true"] .icone-menu > span:nth-child(2) { opacity: 0; }
.btn-menu-lateral[aria-expanded="true"] .icone-menu > span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .icone-menu > span { transition: none; }
}

.btn-menu-lateral:focus-visible {
    outline: 3px solid rgba(6, 167, 92, 0.4);
    outline-offset: 1px;
}

.top-header-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-trigger {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--verde-100);
    cursor: pointer;
    overflow: hidden;
    border: 2px solid var(--verde-700);
    transition: box-shadow 0.16s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Era "transform: scale(1.1)" no hover: o avatar crescia e empurrava a
   percepção da faixa inteira. Um anel cresce sem mover nada. */
.profile-trigger:hover {
    box-shadow: 0 0 0 4px var(--verde-100);
}

.profile-trigger:focus-visible {
    outline: 3px solid rgba(6, 167, 92, 0.4);
    outline-offset: 2px;
}

/* Na barra do editor o fundo é verde escuro e a barra tem 50px de altura: o
   anel verde-médio não separava do fundo, e o retrato de 42px quase encostava
   nas duas bordas. */
.top-toolbar .profile-trigger {
    width: 36px;
    height: 36px;
    border-color: rgba(255, 255, 255, 0.85);
}

.top-toolbar .profile-trigger:hover {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.profile-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-trigger i {
    font-size: 17px;
    color: var(--verde-800);
}

/* Modal de Perfil */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.active {
    display: flex;
}

.profile-modal {
    background: white;
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.modal-header h2 {
    margin: 0;
    font-size: 22px;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
}

.profile-form .form-group {
    margin-bottom: 20px;
}

.profile-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.profile-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
}

/* ==========================================================================
   JANELA DO PERFIL

   A foto saiu de "quadradinho + botão nativo Escolher arquivo" para uma
   miniatura redonda que é o próprio alvo do clique — o mesmo caminho que a
   logo já tinha tomado na aba Ajustes. O input continua na página, escondido:
   o botão nativo não aceita estilo, muda de texto conforme o idioma do
   sistema operacional e destoa de tudo em volta.
   ========================================================================== */

.perfil-foto {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #edf1ef;
}

.perfil-foto-alvo {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid var(--verde-100);
    background: var(--verde-050);
    cursor: pointer;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0;
    transition: border-color 0.16s ease;
}

.perfil-foto-alvo:hover { border-color: var(--verde-600); }

.perfil-foto-alvo:focus-visible {
    outline: 3px solid rgba(6, 167, 92, 0.4);
    outline-offset: 2px;
}

.perfil-foto-alvo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.perfil-foto-alvo > i {
    font-size: 27px;
    color: var(--verde-700);
}

/* A câmera diz que a foto é clicável. Sem ela a miniatura parece decoração, e
   a pessoa procura um botão que não existe mais. */
.perfil-foto-camera {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--verde-800);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    border: 2px solid #fff;
}

.perfil-foto-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.perfil-foto-texto strong { font-size: 14.5px; color: #1f2430; }
.perfil-foto-texto span { font-size: 12.5px; color: #6b7280; }

.perfil-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.perfil-logo-alvo {
    width: 62px;
    height: 62px;
    border: 1px solid #e3e8e5;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 6px;
    transition: border-color 0.16s ease;
}

.perfil-logo-alvo:hover { border-color: var(--verde-600); }

.perfil-logo-alvo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.perfil-logo-alvo > i { color: #c7cdc9; font-size: 20px; }

.perfil-logo-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.perfil-logo-texto span { font-size: 12.5px; color: #6b7280; }

.botao-secundario {
    background: var(--verde-050);
    color: var(--verde-800);
    border: 1px solid var(--verde-100);
    border-radius: 9px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.botao-secundario:hover { background: var(--verde-100); }

.campo-nota {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #8a9086;
}

/* Retorno do salvamento no lugar do alert(): o alerta do navegador para tudo,
   precisa ser fechado e some sem deixar rastro do que aconteceu. */
.perfil-aviso {
    display: none;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13.5px;
    margin-bottom: 14px;
}

.perfil-aviso.visivel { display: block; }

.perfil-aviso.bom {
    background: var(--verde-100);
    color: var(--verde-800);
    border: 1px solid #c9e8da;
}

.perfil-aviso.ruim {
    background: var(--vermelho-100);
    color: var(--vermelho);
    border: 1px solid #f2ccd3;
}

.btn-save-profile {
    width: 100%;
    padding: 14px;
    background: var(--verde-800);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.btn-save-profile:hover {
    background: var(--verde-900);
}

/* Auth Page Layouts */
body.login-page {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.login-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-card .brand-logo {
    font-size: 48px;
    color: #0d47a1;
    margin-bottom: 10px;
}

.login-card h1 {
    font-size: 24px;
    margin-bottom: 30px;
    color: #333;
}

.form-group {
    text-align: left;
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
}

.login-btn {
    width: 100%;
    padding: 14px;
    background: #0d47a1;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.login-btn:hover {
    background: #1565c0;
}

.login-footer {
    margin-top: 20px;
    font-size: 14px;
    color: #777;
}

.login-footer a {
    color: #0d47a1;
    text-decoration: none;
    font-weight: 600;
}
.config-options h3 {
    font-size: 14px;
    margin: 15px 0 10px;
    color: var(--primary-color);
    text-transform: uppercase;
}

.logo-config-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.logo-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logo-controls .field-row {
    margin-bottom: 0;
}

.apply-bg-btn {
    background-color: #28a745 !important;
}

.font-row label, .mass-row label {
    width: 120px !important;
    font-size: 13px;
    color: #444;
}

.mass-update-btn {
    background-color: #007bff !important;
    margin-top: 10px;
}

/* Elementos do Cartaz */
.disclaimer-text {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 8px;
    color: inherit;
    font-style: italic;
    pointer-events: none;
}
.footer-options h3 {
    font-size: 14px;
    margin: 15px 0 10px;
    color: var(--primary-color);
    text-transform: uppercase;
}

.checkbox-row {
    gap: 10px;
    font-size: 13px;
    color: #444;
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.social-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.social-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f9f9f9;
    padding: 5px 10px;
    border-radius: 4px;
}

.social-field i {
    width: 20px;
    text-align: center;
    font-size: 18px;
    color: #555;
}

.payment-selector {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.payment-icon-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 2px;
    transition: all 0.2s;
    background: white;
}

.payment-icon-item img {
    width: 100%;
    display: block;
}

.payment-icon-item.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

.footer-section {
    width: 100%;
}

/* Exceção: a faixa de redes tem fundo próprio e vira pílula centrada. */
.footer-section.socials-section {
    width: auto;
}

.validity-section {
    font-size: var(--footer-fs, 16px);
    text-align: center;
    font-weight: bold;
    line-height: 1.25;
}

.socials-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--footer-fs, 16px) * 0.85);
    padding: calc(var(--footer-fs, 16px) * 0.3) calc(var(--footer-fs, 16px) * 0.75);
    border-radius: 10px; /* Será controlado pelo checkbox de bordas arredondadas */
    /* Pílula que abraça o conteúdo, não barra de ponta a ponta: é assim que a
       faixa de redes aparece no crieoferta, e o rodapé fica mais leve. */
    width: auto;
    max-width: 100%;
}

.social-item-preview {
    display: flex;
    align-items: center;
    gap: calc(var(--footer-fs, 16px) * 0.4);
    font-size: calc(var(--footer-fs, 16px) * 0.88);
    font-weight: bold;
    white-space: nowrap;
}

.social-item-preview i {
    font-size: var(--footer-fs, 16px);
}

.payments-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--footer-fs, 16px) * 0.4);
}

.payment-img-preview {
    /* 1,7x a tipografia do rodapé: a mesma relação dos 31px sobre 17,9px
       medidos no crieoferta. */
    height: calc(var(--footer-fs, 16px) * 1.7);
    background: white;
    border-radius: 4px;
    padding: 2px;
}

hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 15px 0;
}
.editor-panel {
    width: 380px;
    background: var(--editor-bg);
    border-left: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.tabs-header {
    display: flex;
    background: #e1e8f0;
}

.tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 6px 9px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    color: #6b6675;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

.tab-btn:hover {
    color: var(--pane-verde, var(--verde-700));
    background: var(--pane-cabeca-bg, #faf7ff);
}

.tab-btn.active {
    background: white;
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}

.tab-content {
    --aba-respiro-x: 20px;
    --aba-respiro-b: 20px;
    display: none;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

/* A barra de rolagem daqui era escrita à mão: 6px, polegar lilás, verde no
   hover. Saiu para a BARRA DE ROLAGEM DO SITE, lá no topo do arquivo — é a
   mesma coisa, só que uma vez. Três painéis tinham a sua própria cópia, e
   as três já discordavam na largura (6, 6 e 10px) e na cor. */

.tab-content.active {
    display: block;
}

#tab-produtos.tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#tab-produtos .editor-actions {
    margin-top: auto;
}

.editor-group {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.field-row {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.field-row label {
    width: 60px;
    flex-shrink: 0;
    font-size: 13px;
    color: #666;
}

/* Texto de checkbox é frase, não rótulo de coluna: os 60px fixos acima
   espremiam "Marque aqui para exibir a validade no rodapé" em 4 linhas. */
.checkbox-row label {
    width: auto;
    flex: 1;
    line-height: 1.35;
    cursor: pointer;
}

textarea, input[type="text"], input[type="number"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

textarea { height: 60px; resize: none; }

.small-input { width: 60px; flex: none; }

.input-with-prefix {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    flex: 1;
}

.prefix-toggle {
    background: #666;
    color: white;
    border: none;
    padding: 0 15px;
    height: 38px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.prefix-toggle.active {
    background: var(--primary-color);
}

.prefix-toggle:not(.active) {
    background: #ccc;
    color: #666;
}

.input-with-prefix input {
    border: none !important;
    flex: 1;
    padding: 10px;
    outline: none;
}

.balloon-config {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f0f0f0;
    padding: 5px;
    border-radius: 4px;
    flex: 1;
}

.balloon-config select {
    font-size: 11px;
    padding: 4px;
    flex: 1;
}

/* Estilos de Balão */
.product-price-box.serrilhado {
    /* Serrilhado de cartaz: dente pontudo no topo e na base, como corte de
       tesoura de picotar. Três camadas somadas — faixa de dentes em cima,
       faixa de dentes embaixo e o miolo cheio.
       (Serrilhar os quatro lados exigiria mask-composite: intersect, e aí as
       faixas horizontais e verticais só se cruzam no meio: a caixa some.) */
    --dente: calc(var(--item-h) * 0.024);
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
            50% 0 / calc(2 * var(--dente)) var(--dente) repeat-x,
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
            50% 100% / calc(2 * var(--dente)) var(--dente) repeat-x,
        linear-gradient(#000 0 0) 50% 50% / 100% calc(100% - 2 * var(--dente)) no-repeat;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
            50% 0 / calc(2 * var(--dente)) var(--dente) repeat-x,
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
            50% 100% / calc(2 * var(--dente)) var(--dente) repeat-x,
        linear-gradient(#000 0 0) 50% 50% / 100% calc(100% - 2 * var(--dente)) no-repeat;
}

.product-price-box.splash {
    /* Estrela de 16 pontas — a "explosão" clássica de encarte. Antes era um
       border-radius amorfo que virava um borrão. */
    clip-path: polygon(
        50% 0%, 58% 9%, 68% 3%, 72% 14%, 84% 11%, 83% 23%, 96% 26%, 89% 36%,
        100% 45%, 89% 54%, 96% 64%, 83% 67%, 84% 79%, 72% 76%, 68% 87%, 58% 81%,
        50% 92%, 42% 81%, 32% 87%, 28% 76%, 16% 79%, 17% 67%, 4% 64%, 11% 54%,
        0% 45%, 11% 36%, 4% 26%, 17% 23%, 16% 11%, 28% 14%, 32% 3%, 42% 9%
    );
    padding: calc(var(--item-h) * 0.05) calc(var(--item-h) * 0.09);
    border: none;
}

.product-price-box.brush {
    /* Pincelada: bordas irregulares nas laterais, topo e base quase retos,
       para o preço não ficar torto. */
    clip-path: polygon(
        3% 8%, 12% 2%, 30% 6%, 50% 1%, 70% 6%, 88% 2%, 97% 9%,
        99% 30%, 97% 50%, 99% 72%, 96% 92%, 86% 98%, 68% 94%, 50% 99%,
        32% 94%, 14% 98%, 4% 91%, 1% 70%, 3% 50%, 1% 28%
    );
    padding: calc(var(--item-h) * 0.022) calc(var(--item-h) * 0.07);
    border: none;
}

.product-price-box.modern {
    /* Retângulo limpo com contorno interno. A regra antiga usava
       var(--bg-color), que não existe no projeto: o gradiente nunca aparecia. */
    border-radius: calc(var(--item-h) * 0.035);
    border: calc(var(--item-h) * 0.006) solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 calc(var(--item-h) * 0.012) calc(var(--item-h) * 0.03) rgba(0,0,0,0.35);
}

/* ===== Tipos de oferta com dois preços (DE/POR, CARTÃO/PIX, FARDO/UNIDADE...) =====
   Etiqueta preta em cima de cada caixa; a secundária menor, a principal maior. */
.price-box-multi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--item-h) * 0.018);
    position: relative;
    z-index: 50;
    /* a sobreposição na imagem vale para o conjunto, não para cada caixa */
    margin-top: calc(var(--item-h) * -0.045);
    flex-shrink: 0;
}

/* As regras .products-container.layout-N .product-price-box reimpõem margem
   negativa; aqui a sobreposição já é do conjunto, então cada caixa fica neutra. */
.products-container .price-box-multi .product-price-box,
.price-box-multi .product-price-box {
    margin-top: 0;
}

.price-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* "LEVE 3": caixa única, com a etiqueta do preço unitário no rodapé. */
.price-box-multi.caixa-unica .price-line {
    align-items: center;
}

/* Com algum produto em destaque, o FUNDO dos demais entra a 50% para o
   destaque saltar — só o fundo: imagem, nome e caixa de preço continuam
   sólidos, por isso não se usa `opacity` no cartão (ela cairia sobre os
   filhos também). O rgba é montado com os canais que o script guarda em
   --card-bg-rgb, o que também mantém o valor legível para o html2canvas na
   exportação. Sem nenhum destaque ninguém é atenuado — senão a arte inteira
   ficaria lavada. A classe fica no container, posta pelo updateGridLayout.
   Cartões transparentes e placeholders ficam de fora: já têm fundo próprio. */
.products-container.tem-destaque
.product-item:not(.destaque):not(.transparent):not(.empty-placeholder) {
    background-color: rgba(var(--card-bg-rgb, 255, 255, 255), 0.5) !important;
}

.price-tag-label.price-tag-rodape {
    margin-bottom: 0;
    margin-top: calc(var(--item-h) * -0.012);
    font-size: calc(var(--item-h) * 0.040);
}

.price-tag-label b {
    background: #fff;
    color: #111;
    border-radius: calc(var(--item-h) * 0.006);
    padding: 0 calc(var(--item-h) * 0.010);
    margin-left: calc(var(--item-h) * 0.006);
}

/* As duas cores vem do produto, com o preto-e-branco de sempre como padrao.
   Escritas fixas aqui, a etiqueta sumia no fundo de um tema escuro e ninguem
   tinha como alcanca-la -- e ela e a parte mais visivel do preco. */
.price-tag-label {
    background: var(--cor-etiqueta-fundo, #111);
    color: var(--cor-etiqueta-texto, #fff);
    font-family: 'Arial Black', sans-serif;
    font-size: calc(var(--item-h) * 0.048);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: calc(var(--item-h) * 0.005) calc(var(--item-h) * 0.026);
    border-radius: calc(var(--item-h) * 0.008);
    margin-bottom: calc(var(--item-h) * -0.012);
    position: relative;
    /* a caixa de preço tem z-index 50; sem isto a etiqueta fica atrás dela */
    z-index: 60;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Caixa secundária: mesma arte, 60% do tamanho */
.price-item-small {
    padding: calc(var(--item-h) * 0.008) calc(var(--item-h) * 0.032);
}

.price-item-small .price-integer { font-size: calc(var(--item-h) * 0.146); letter-spacing: -0.02em; }
.price-item-small .price-decimal { font-size: calc(var(--item-h) * 0.058); }
.price-item-small .price-prefix { font-size: calc(var(--item-h) * 0.029); margin-top: calc(var(--item-h) * 0.026); }
.price-item-small .price-unit { font-size: calc(var(--item-h) * 0.038); margin-top: calc(var(--item-h) * 0.006); }
.price-item-small .price-decimal-group { margin-top: calc(var(--item-h) * 0.006); }

/* A etiqueta de cima usava font-size fixo em px, que sobrescrevia a
   proporcional e a deixava minúscula nos cartões grandes. Agora só recua um
   pouco menos que a de baixo. */
.price-box-multi .price-line:first-child .price-tag-label {
    font-size: calc(var(--item-h) * 0.042);
}

.colors {
    justify-content: space-between;
}

/* PRODUTO e IMPORTAR LISTA ficam colados no rodapé do painel: são as duas
   ações que começam tudo, e desciam junto com a rolagem — com dez produtos na
   lista, era preciso rolar até o fim para adicionar o décimo primeiro.
   `sticky` e não `fixed`: assim continuam sendo o último item da aba Produtos
   (não aparecem nas outras) e reservam o próprio espaço no fim da rolagem. */
/* O respiro de baixo da aba é da faixa, não da aba: com ele, `bottom: 0`
   parava o respiro acima do fim do painel e sobrava um pedaço de cartão
   aparecendo embaixo da faixa. */
#tab-produtos {
    padding-bottom: 0;
}

.editor-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 10px;
    margin-top: 16px;
    /* O respiro negativo nas laterais e embaixo faz a faixa encostar nas
       bordas da aba, em vez de deixar o conteúdo passando pelos cantos. */
    margin-left: calc(-1 * var(--aba-respiro-x, 20px));
    margin-right: calc(-1 * var(--aba-respiro-x, 20px));
    padding: 12px var(--aba-respiro-x, 20px);
    border-top: 1px solid var(--pane-borda, #ede6f7);
    background: var(--editor-bg, #f4f2f8);
}

.action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background: black;
    color: white;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.generate-btn {
    margin: 20px;
    padding: 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}

.generate-btn:hover {
    filter: brightness(1.2);
}

/* Responsividade */
@media (max-width: 1200px) {
    .main-sidebar {
        width: 80px;
    }
    /* `.nav-text`, e nao `span`: a casa do icone tambem e um span, e
       escondendo todos ela sumia junto com o rotulo. */
    .brand-name, .nav-item .nav-text {
        display: none;
    }
    .nav-item {
        justify-content: center;
        padding: 15px 0;
    }
    .dashboard-hero-inner {
        grid-template-columns: 1fr;
    }
    .dashboard-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-row {
        grid-template-columns: 1fr;
    }
}

/* Este bloco empilhava o painel em 100% de largura até 900px — o jeito antigo
   de "responsivo", de antes da folha de baixo. O layout de celular hoje começa
   em 860px, então entre 861 e 900 nenhum dos dois valia: a coluna empilhava
   mas o painel não virava gaveta, e a arte ficava espremida numa faixa de
   poucos pixels no topo (medido a 880x598: arte com 40px de altura, painel com
   624px). Abaixo de 860 as regras daqui já eram todas sobrescritas pelo bloco
   do celular, então só restava o estrago na faixa do meio.
   `transform-origin: top center` também era letra morta: `.offer-container`
   é redeclarado logo abaixo, fora de media query, com `top left`. */
@media (max-width: 900px) {
    .preview-panel {
        padding: 20px;
    }
    .dashboard-container {
        padding: 18px;
    }
    .top-header {
        padding: 16px 18px;
    }
}

/* Fix para o Preview não sair do container no Zoom */
.preview-panel {
    position: relative;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

.offer-container {
    transform-origin: top left;
}

/* ==========================================================================
   CELULAR
   Abaixo de 860px o layout de três colunas (menu + arte + painel de 380px)
   não cabe: 240 + 380 já consomem 620px e não sobra nada para a arte. Então
   cada peça vira o equivalente móvel, sem perder função nenhuma.
   Modelado no crieoferta (conferido no editor deles em 12/09/2026): menu em
   gaveta pelo hambúrguer, arte ocupando a tela, painel de edição como folha
   de baixo com alça, abas em ícone + rótulo.
   ========================================================================== */

/* A variável --folga-ajuste saiu daqui. Ela dizia 80px enquanto o padding do
   painel dizia 60px de cada lado, e o "caber na tela" acreditava nela: a folha
   saía 40px maior do que o espaço, e o editor abria com barra de rolagem sem
   ter o que rolar. Agora o fitOfferToScreen lê o padding de verdade. */

/* O fundo escuro da gaveta só existe no celular — no computador a barra
   fica ao lado, sem nada por cima. O botão do menu, ao contrário, agora
   aparece em toda largura: é o mesmo controle nos dois casos. */
.nav-mobile-fundo,
.painel-pega {
    display: none;
}

/* Aba com ícone em cima e rótulo embaixo, como no crieoferta. */
.tab-btn i {
    display: block;
    font-size: 15px;
    line-height: 1;
}

@media (max-width: 860px) {
    :root {
        --gaveta-recolhida: 54px;
    }

    /* 100vh no celular inclui a barra de endereço que some ao rolar: a tela
       "mede" mais que a área útil e o rodapé fica inalcançável. */
    .app-layout {
        height: 100vh;
        height: 100dvh;
    }

    /* --- Menu lateral vira gaveta --- */
    .main-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(78vw, 280px);
        z-index: 120;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    body.nav-aberta .main-sidebar {
        transform: none;
    }

    /* Recolher só faz sentido no menu fixo do desktop. */
    .main-sidebar .btn-toggle-sidebar {
        display: none;
    }

    /* A gaveta mostra sempre o texto: ícone sozinho num menu que abre por cima
       da tela não ajuda ninguém. Desfaz o modo estreito do breakpoint de 1200. */
    /* `.nav-text`, e nao `span`.

       Esta era a regra que desalinhava os icones no celular: ela punha
       `display: inline` em todo span do item, e a casa do icone e um span.
       Como o item e flex, `inline` num filho vira `block` — e com `block` o
       `place-items: center` da casa deixa de valer. Todo glifo ficava colado
       na borda esquerda, com vinte pixels de vazio do lado direito. */
    .main-sidebar .brand-name,
    .main-sidebar .nav-item .nav-text {
        display: inline;
    }

    .main-sidebar .nav-item {
        justify-content: flex-start;
        padding: 14px 20px;
        font-size: 15px;
    }

    /* Sem botão de recolher na gaveta, não há coluna para reservar. */
    .main-sidebar .brand {
        padding: 0 20px 30px;
    }

    .nav-mobile-fundo {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 110;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    body.nav-aberta .nav-mobile-fundo {
        opacity: 1;
        visibility: visible;
    }

    /* No editor a faixa do topo é verde, então o botão inverte para se ler
       sobre ela. Nas demais telas o topo é branco e vale o estilo padrão. */
    .top-toolbar .btn-menu-lateral {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.24);
        color: #fff;
    }

    /* --- Barra superior do editor em duas linhas --- */
    /* Seis ferramentas e cinco formatos não cabem em 375px numa linha só. */
    .top-toolbar {
        height: auto;
        min-height: 48px;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 6px 8px;
        gap: 6px;
    }

    .toolbar-left {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .toolbar-left::-webkit-scrollbar {
        display: none;
    }

    /* Os formatos saem de perto da arte e vão para DENTRO do painel, como
       sub-aba acima das abas — é assim no crieoferta abaixo de 760px. Quem
       muda o elemento de container é o `acomodarTiraDeFormatos` no script;
       aqui é só a aparência. */
    .format-collapse {
        display: block;
        flex: 0 0 auto;
        border-bottom: 1px solid #dfe3ea;
    }

    .format-collapse-head {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 16px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 13px;
        color: #545c6b;
        text-align: left;
    }

    .format-collapse-icone {
        color: var(--primary-color, var(--verde-700));
        font-size: 14px;
    }

    .format-collapse-valor {
        color: var(--primary-color, var(--verde-700));
        font-weight: 800;
    }

    .format-collapse-seta {
        margin-left: auto;
        color: #7a8494;
        font-size: 12px;
        transition: transform 0.2s ease;
    }

    .format-collapse.is-open .format-collapse-seta {
        transform: rotate(180deg);
    }

    /* Fechada some por completo; aberta libera a altura da faixa. */
    .format-collapse-scroll {
        height: 0;
        overflow: hidden;
        transition: height 0.2s ease;
    }

    .format-collapse.is-open .format-collapse-scroll {
        height: 110px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .format-rail {
        flex: 0 0 auto;
        width: max-content;
        min-width: 100%;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
        border-right: none;
        background: transparent;
        gap: 8px;
        padding: 8px 16px 10px;
        overflow: visible;
    }

    .format-btn {
        width: auto;
        min-width: 52px;
        min-height: 0;
        gap: 4px;
        padding: 4px;
        font-size: 9px;
        white-space: nowrap;
    }

    .format-thumb {
        --caixa-l: 44px;
        --caixa-a: 44px;
    }

    /* Alvo de toque decente: o padding original dava 28px de altura. */
    .tool-btn {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
    }

    /* --- Área de trabalho: arte na tela, painel no rodapé --- */
    .workspace-content {
        display: flex;
        flex-direction: column;
        position: relative;
        /* Reserva a faixa da alça, para a arte nunca ficar escondida atrás
           dela quando o painel está recolhido. */
        padding-bottom: var(--gaveta-recolhida);
    }

    .preview-panel {
        width: 100%;
        flex: 1;
        min-height: 0;
        padding: 12px;
        /* A arte cabe pela largura e sobra altura: centralizar evita a faixa
           cinza grande embaixo. */
        justify-content: center;
    }

    /* 16px de alça é alvo de toque pequeno demais para o dedo — mas 30px
       roubavam do campo de preço. 26px com o cartão inteiro de altura ainda
       dão um alvo confortável. */
    .pc-card .item-grip {
        width: 26px;
        font-size: 15px;
    }

    /* --- Painel de edição como folha de baixo --- */
    .editor-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: 76vh;
        height: 76dvh;
        border-left: none;
        border-top: 1px solid #ccc;
        /* Cantos mais generosos: com 16px numa faixa de 375x54 a curva quase
           não aparecia e a gaveta lia como um retângulo colado na tela. */
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
        z-index: 60;
        transform: translateY(0);
        transition: transform 0.28s ease;
    }

    /* Recolhido, sobra exatamente a alça de fora. */
    body.painel-recolhido .editor-panel {
        transform: translateY(calc(76vh - var(--gaveta-recolhida)));
        transform: translateY(calc(76dvh - var(--gaveta-recolhida)));
    }

    .painel-pega {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
        height: var(--gaveta-recolhida);
        padding: 10px 16px 0;
        border: none;
        background: transparent;
        cursor: pointer;
        text-align: left;
        /* A alça acompanha a curva da gaveta: raio diferente deixaria um canto
           do fundo colorido escapando por fora da borda arredondada. */
        border-radius: 24px 24px 0 0;
    }

    .painel-pega-texto {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #545c6b;
    }

    .painel-pega-seta {
        margin-left: auto;
        color: #7a8494;
        transition: transform 0.25s ease;
    }

    body.painel-recolhido .painel-pega-seta {
        transform: rotate(180deg);
    }

    /* --- Abas em ícone + rótulo, para as quatro caberem em 360px --- */
    .tabs-header {
        flex: 0 0 auto;
    }

    .tab-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 54px;
        padding: 8px 4px 7px;
        font-size: 10.5px;
        line-height: 1.1;
    }

    .tab-btn i {
        display: block;
        font-size: 16px;
    }

    .tab-content {
        --aba-respiro-x: 10px;
        --aba-respiro-b: 14px;
        padding: 14px 10px;
    }

    /* --- Modais ocupam a tela, sem sobra inútil nas beiradas --- */
    .modal-content {
        width: 94%;
        max-width: 94%;
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto;
    }

    .download-grid {
        gap: 12px;
    }

    /* --- Telas de conteúdo (início, temas, planos, admin, cartazes) --- */
    .dashboard-container {
        padding: 14px;
    }

    .top-header {
        padding: 12px 14px;
    }

    .dashboard-kpis,
    .quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .cartazes-steps {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cartazes-steps::-webkit-scrollbar {
        display: none;
    }

    .step-chip {
        white-space: nowrap;
    }

    .generated-actions {
        flex-wrap: wrap;
    }

    .generated-actions .wizard-btn {
        flex: 1 1 46%;
    }

    /* Tabela larga rola na própria caixa em vez de esticar a página. */
    .admin-table-wrap,
    .table-responsive {
        overflow-x: auto;
    }
}

/* Telas bem estreitas: o que ainda estava largo encolhe mais. */
@media (max-width: 520px) {
    .dashboard-hero-inner {
        padding: 18px;
    }

    .size-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .generated-actions .wizard-btn {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   RODAPÉ — seis predefinições
   Copiado do crieoferta como FUNÇÃO (o `estiloRodape` deles tem os mesmos seis
   nomes e o mesmo efeito: trocar a cara do rodapé sem mexer em mais nada).
   O desenho de cada uma é nosso: vi renderizados só o Clássico e o Dark deles,
   e imagem/fonte deles é material licenciado que não entra aqui.
   A classe entra no #footer-preview pelo aplicarEstiloDoRodape().
   ========================================================================== */

/* Clássico: a barra preta da arte antiga, texto claro, sem arredondar. */
.offer-footer.rodape-classico {
    background: #111111;
    color: #ffffff;
    gap: 6px;
}

.offer-footer.rodape-classico .validity-section {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Dark: o padrão. Preto com uma linha de luz em cima, separando da arte. */
.offer-footer.rodape-dark {
    background: #0d0d0d;
    color: #ffffff;
    border-top: 2px solid rgba(255, 255, 255, 0.18);
}

/* Banner: faixa na cor do cabeçalho, para o rodapé fechar a arte em bloco.
   A cor vem da variável que o cabeçalho já escreve. */
.offer-footer.rodape-banner {
    background: var(--cor-cabecalho, #c62828);
    color: #ffffff;
    border-top: 3px solid rgba(0, 0, 0, 0.22);
}

/* Premium Dark / Light: rodapé com respiro, texto espaçado e a validade
   destacada numa faixa própria — a leitura fica mais calma que na barra cheia. */
.offer-footer.rodape-premium-dark,
.offer-footer.rodape-premium-light {
    gap: 8px;
    padding-top: calc(var(--footer-pad-y) * 1.35);
    padding-bottom: calc(var(--footer-pad-y) * 1.35);
}

.offer-footer.rodape-premium-dark {
    background: linear-gradient(180deg, #1b1b1f 0%, #000000 100%);
    color: #f2f2f2;
}

.offer-footer.rodape-premium-light {
    background: linear-gradient(180deg, #ffffff 0%, #eceff4 100%);
    color: #16181d;
}

.offer-footer.rodape-premium-dark .validity-section,
.offer-footer.rodape-premium-light .validity-section {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 800;
}

.offer-footer.rodape-premium-light .validity-section {
    color: #16181d;
}

/* No claro os ícones de rede precisam de contorno para não desaparecer. */
.offer-footer.rodape-premium-light .socials-section {
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Frase "Imagens meramente ilustrativas".
   Na primeira versão eu supus uma linha horizontal acima do rodapé. Errado:
   medindo o elemento dentro da arte do crieoferta ele é uma TARJA VERTICAL na
   borda esquerda — 28px de largura por 1485 de altura numa folha 1050x1485,
   `transform: rotate(-90deg)`, fonte 18,56px (1,25% da altura da folha),
   `letter-spacing` 4,455px (0,24em), peso 400, sem itálico, opacidade 1.
   Os números abaixo são essas proporções.

   A rotação é `transform` e não `writing-mode` de propósito: o html2canvas
   entende transform e não é confiável com writing-mode, e a arte precisa sair
   igual no download.

   Sendo `absolute`, a tarja não rouba altura da grade nem do rodapé.

   Construção: um bloco horizontal com a LARGURA igual à ALTURA da folha e uma
   linha de altura, girado -90° em torno do próprio centro — vira a coluna da
   altura da folha. O centro é posicionado em (recuo + linha/2, altura/2), que
   depois do giro põe a borda esquerda no recuo e o topo em 0.

   Minha primeira tentativa foi uma coluna estreita com o texto num `span`
   girado dentro, centrado por flex. Renderizava certo na tela e o html2canvas
   desenhava NADA: o span transborda a coluna antes de girar, e ele não dá
   conta disso. Aqui não há transbordo nem flex, e o export sai. */
.offer-illustrative {
    --ifs: calc(var(--folha-h, 1485px) * 0.0125);
    --ilinha: calc(var(--ifs) * 1.5);
    /* Os 5px de recuo da borda que medi neles, em proporção da folha. */
    --irecuo: calc(var(--folha-h, 1485px) * 0.0034);
    position: absolute;
    width: var(--folha-h, 1485px);
    height: var(--ilinha);
    left: calc(var(--irecuo) + var(--ilinha) / 2 - var(--folha-h, 1485px) / 2);
    top: calc(50% - var(--ilinha) / 2);
    transform: rotate(-90deg);
    text-align: center;
    white-space: nowrap;
    font-size: var(--ifs);
    line-height: var(--ilinha);
    letter-spacing: calc(var(--ifs) * 0.24);
    font-weight: 400;
    z-index: 3;
    pointer-events: none;
}

/* Dica embaixo de um campo. Vira aviso vermelho quando o valor não serve. */
.field-hint {
    font-size: 11.5px;
    line-height: 1.45;
    color: #7a8494;
    margin: -4px 0 10px;
}

.field-hint code {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 11px;
}

.field-hint.field-hint-erro {
    color: #c62828;
    font-weight: 700;
}

/* ==========================================================================
   IMPRESSÃO
   O botão de imprimir monta a arte como imagem em #area-impressao e liga
   body.imprimindo. Aqui o resto da tela sai de cena e só a folha vai ao papel.
   Sem janela nova de propósito: bloqueador de pop-up mataria a impressão.
   ========================================================================== */
.area-impressao {
    display: none;
}

@media print {
    body.imprimindo > *:not(.area-impressao) {
        display: none !important;
    }

    body.imprimindo .area-impressao {
        display: block;
        margin: 0;
        padding: 0;
    }

    body.imprimindo .area-impressao img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Sem margem a arte ocupa a folha inteira, que é como encarte se imprime. */
    @page {
        margin: 0;
    }
}

/* A orientação virou MEDIDA: o script escreve um @page com a folha exata
   (210x297mm, 841x1189mm...) antes de imprimir, porque A4 e A0 não são a mesma
   folha virada. O @page nomeado de antes só sabia dizer retrato ou paisagem. */



/* Linha de ações do fundo do encarte: escolher imagem e remover, lado a lado. */
.fundo-encarte-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Botão de excluir upload, no canto da miniatura da galeria.
   O item da galeria já é `display: flex` em coluna; o botão sai do fluxo com
   `position: absolute`, então precisa do `relative` no pai. */
.gallery-item {
    position: relative;
}

.gallery-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.62);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    /* Escondido até o ponteiro chegar, para não poluir a grade de miniaturas. */
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.gallery-item:hover .gallery-remove,
.gallery-remove:focus-visible {
    opacity: 1;
}

.gallery-remove:hover {
    background: #c62828;
}

.gallery-remove:disabled {
    cursor: default;
    opacity: 1;
    background: rgba(17, 17, 17, 0.62);
}

/* Em tela de toque não existe hover: ali o "x" fica sempre visível, senão não
   haveria como chegar nele. */
@media (hover: none) {
    .gallery-remove {
        opacity: 1;
    }
}

/* ==========================================================================
   BUSCA DE FIGURA
   Modelada na do crieoferta (medida no editor deles em 12/09/2026): grade de
   ladrilhos quadrados de 141px, 3 por linha, rolando numa caixa de ~250px, e
   embaixo a linha de "não encontrou? veja mais".
   Como o nosso painel tem 380px, o ladrilho sai por volta de 100px — o que
   manda é a proporção quadrada e as 3 colunas.
   ========================================================================== */
.figure-results {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: 260px;
}

/* Destaque de 1,6s quando a busca é chamada por "+ PRODUTO": sem isso o campo
   recebe foco lá embaixo e a pessoa não percebe que algo abriu. */
.figure-search-chamando .figure-search-box {
    box-shadow: 0 0 0 3px rgba(5, 133, 73, 0.35);
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

/* Rodapé "não encontrou? ver mais" — ocupa a linha inteira da grade. */
.figure-more {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding: 8px 4px 2px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #7a8494;
    text-align: center;
}

.figure-more-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--primary-color, var(--verde-700));
    text-decoration: underline;
    cursor: pointer;
}

/* Outra sobra do painel roxo, no mesmo estado escondido: o link so ficava
   #5b21b6 com o ponteiro em cima. */
.figure-more-link:hover {
    color: var(--verde-900);
}

/* Resultado vindo da base externa: etiqueta diferente da "minha"/"catálogo",
   para ficar claro que essa figura ainda vai ser trazida para dentro. */
/* Precisa casar a especificidade de `.figure-item .figure-origem` (0,2,0),
   senao a etiqueta continua com o cinza padrao. */
.figure-item .figure-origem-web {
    background: var(--verde-700);
    color: #fff;
}

/* Enquanto a figura é baixada e reprocessada pelo servidor. */
.figure-item-ocupado {
    opacity: 0.55;
    pointer-events: none;
    position: relative;
}

.figure-item-ocupado::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--primary-color, var(--verde-700));
    border-radius: 50%;
    animation: girar-figura 0.7s linear infinite;
}

@keyframes girar-figura {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   PAINEL DE EDIÇÃO — sub-camadas e linguagem de botões
   Medido no crieoferta (12/09/2026): cartão branco de raio 14px com borda
   #EDE6F7, cabeçalho #FAF7FF com padding 14/16 e altura 48px; botões em
   pílula (raio 999px) verdes var(--verde-700) de 12px/700 com padding 0 17px; selects
   também em pílula; seletor de cor circular com borda de 2px lilás.
   ========================================================================== */

.editor-panel {
    --pane-borda: #ede6f7;
    --pane-cabeca-bg: #faf7ff;
    --pane-verde: var(--verde-700);
    --pane-texto: #26222a;
}

/* --- Sub-camada --- */
.pane-bloco {
    background: #fff;
    border: 1px solid var(--pane-borda);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
}

.pane-cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: none;
    background: var(--pane-cabeca-bg);
    cursor: pointer;
    text-align: left;
}

.pane-cabeca:hover {
    background: #f3edff;
}

.pane-titulo {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--pane-texto);
    letter-spacing: 0.01em;
}

.pane-seta {
    color: #8b8494;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.pane-bloco.aberto .pane-seta {
    transform: rotate(180deg);
}

/* Fechado some por completo. Usei `display: none` e não animação de altura
   porque há listas com rolagem própria dentro (produtos adicionados, galeria),
   e animar a altura de um contêiner com scroll aninhado dá salto. */
.pane-corpo {
    display: none;
    padding: 14px 16px 16px;
}

.pane-bloco.aberto .pane-corpo {
    display: block;
}

/* O primeiro campo logo abaixo do cabeçalho não precisa do respiro de cima. */
.pane-corpo > .field-row:first-child {
    margin-top: 0;
}

/* --- Botões em pílula --- */
.editor-panel .action-btn,
.editor-panel .pe-chip,
.editor-panel .btn-figure-search,
.editor-panel .upload-label {
    border-radius: 999px;
}

.editor-panel .action-btn {
    padding: 11px 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.editor-panel .action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.editor-panel .action-btn:active {
    transform: none;
    box-shadow: none;
}

/* O "+ PRODUTO" é a ação principal da aba: ganha o verde da casa. */
.editor-panel .add-btn {
    background: var(--pane-verde);
}

/* BUG QUE ESTAVA AQUI: passar o mouse no "+ PRODUTO" o deixava ROXO.

   #6d28d9 é sobra de quando o painel era roxo. A cor saiu de todo o resto e
   ficou só aqui, num estado que só aparece com o ponteiro em cima — por isso
   sobreviveu à troca de paleta sem ninguém ver. */
.editor-panel .add-btn:hover {
    background: var(--verde-700);
}

.editor-panel .pe-chip {
    padding: 7px 14px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--pane-borda);
    background: #fff;
    color: #4b4552;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.editor-panel .pe-chip:hover {
    background: var(--pane-cabeca-bg);
    border-color: #d9c9f5;
}

/* --- Campos --- */
.editor-panel .tab-content select,
.editor-panel .tab-content input[type="text"],
.editor-panel .tab-content input[type="date"],
.editor-panel .tab-content input[type="number"] {
    border-radius: 999px;
    border: 1px solid var(--pane-borda);
    padding: 8px 14px;
    font-size: 12.5px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-panel .tab-content textarea {
    border-radius: 14px;
    border: 1px solid var(--pane-borda);
    padding: 10px 14px;
    font-size: 12.5px;
}

.editor-panel .tab-content select:focus,
.editor-panel .tab-content input[type="text"]:focus,
.editor-panel .tab-content input[type="date"]:focus,
.editor-panel .tab-content textarea:focus {
    outline: none;
    border-color: var(--pane-verde);
    box-shadow: 0 0 0 3px rgba(5, 133, 73, 0.14);
}

/* Seletor de cor vira bolinha, como no crieoferta. */
.editor-panel .tab-content input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid #e5d9f5;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.editor-panel .tab-content input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.editor-panel .tab-content input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

/* --- Abas --- */
.editor-panel .tab-btn.active {
    color: var(--pane-verde);
    border-bottom-color: var(--pane-verde);
}

/* Campo de arquivo: o botão nativo do navegador é o que mais destoava no
   painel. `::file-selector-button` estiliza sem precisar esconder o input e
   recriar o controle com label. */
.editor-panel .tab-content input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 7px 14px;
    border: 1px solid var(--pane-borda);
    border-radius: 999px;
    background: #fff;
    color: #4b4552;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.editor-panel .tab-content input[type="file"]::file-selector-button:hover {
    background: var(--pane-cabeca-bg);
    border-color: #d9c9f5;
}

/* Caixa de marcação alinhada com o resto: cantos suaves e o verde da casa. */
.editor-panel .tab-content input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--pane-verde);
    cursor: pointer;
}

/* Ícone do cabeçalho da sub-camada: verde, largura fixa para os títulos
   alinharem entre si mesmo com ícones de larguras diferentes. */
.pane-icone {
    width: 16px;
    text-align: center;
    color: var(--pane-verde, var(--verde-700));
    font-size: 13px;
    flex-shrink: 0;
}

/* ==========================================================================
   SELO +18
   Copiado do crieoferta como função e posição, não como arquivo: o selo deles
   é um PNG do acervo próprio (`selo_18.png`), medido em 113x113 num cartão de
   1004px — 11% da largura, encostado no canto inferior direito. O nosso é
   desenhado em CSS, então acompanha a escala do cartão e não pesa um request.
   Tudo proporcional a --item-w, como o resto do interior do cartão.
   ========================================================================== */
/* O selo é um container com a imagem dentro, no mesmo desenho da figura do
   produto: arrasta, redimensiona e tem alça nos cantos. Antes era um <img>
   solto — e em elemento vazio não cabe `::before`/`::after`, então não havia
   alça visível e o selo só se movia. */
.selo-18 {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    /* Tamanho legível: o selo tem dizeres dentro, e no tamanho do antigo
       (11% da largura) a frase virava um borrão. Um quinto da largura do
       cartão deixa a mão e o -18 claros sem cobrir o produto. */
    width: calc(var(--item-w, 300px) * 0.2);
    height: calc(var(--item-w, 300px) * 0.2);
    z-index: 40;
    cursor: move;
    /* Sem isto o dedo rola a página em vez de arrastar o selo. */
    touch-action: none;
}

.selo-18 img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* O alvo do ponteiro é o container; a imagem não pode roubar o evento
       das alças, que ficam por cima dela. */
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

.product-item.tem-selo-18 .selo-18 {
    /* flex, como o container da figura e o da logo: assim a alça vazia fora da
     * edição fica 0x0 em vez de esticar pela largura do selo. */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contorno e alças EXATAMENTE como os da figura do produto: pontilhado de 2px
   que nasce transparente e acende no ponteiro, e as quatro alças nos cantos —
   duas por pseudoelemento (em cima) e duas por elemento real (embaixo).
   Tudo condicionado ao produto em edição, como lá: fora da edição o encarte
   não mostra alça nenhuma, e a exportação sai limpa. */
.product-item.editing .selo-18 {
    outline: 2px dashed transparent;
    transition: outline 0.2s;
}

.product-item.editing .selo-18:hover {
    outline-color: var(--primary-color, var(--verde-800));
}

.product-item.editing .selo-18::before,
.product-item.editing .selo-18::after,
.product-item.editing .selo-18 .resize-handle {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid var(--primary-color, var(--verde-800));
    border-radius: 50%;
    z-index: 150;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: auto;
}

.product-item.editing .selo-18:hover::before,
.product-item.editing .selo-18:hover::after,
.product-item.editing .selo-18:hover .resize-handle {
    opacity: 1;
}

.selo-18::before { top: -6px; left: -6px; cursor: nwse-resize; }
.selo-18::after { top: -6px; right: -6px; cursor: nesw-resize; }

/* --- Interruptor do painel --- */
.pe-selo18,
.pe-chave {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-bottom: 10px;
    padding: 9px 14px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 999px;
    background: #fff;
    color: #4b4552;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pe-selo18 i,
.pe-chave i {
    color: #b0a9ba;
    transition: color 0.15s ease;
}

.pe-selo18-texto,
.pe-chave-texto {
    flex: 1;
    text-align: left;
}

.pe-selo18.ligado {
    border-color: #f2b8b8;
    background: #fff6f6;
    color: #a51c1c;
}

.pe-selo18.ligado i {
    color: #c62828;
}

/* Chavinha: fundo cinza que vira vermelho, com a bola deslizando. */
.pe-switch {
    flex-shrink: 0;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: #d8d4de;
    position: relative;
    transition: background 0.18s ease;
}

.pe-switch-bola {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}

.pe-selo18.ligado .pe-switch {
    background: #c62828;
}

.pe-selo18.ligado .pe-switch-bola {
    transform: translateX(15px);
}

/* ==========================================================================
   MINIATURA DA FIGURA APLICADA
   Antes o painel não dava sinal nenhum de que o produto já tinha imagem: os
   botões ficavam iguais com ou sem figura. A miniatura mostra o que está
   aplicado e abre as duas ações que fazem sentido ali.
   ========================================================================== */
.pe-figura-atual {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 14px;
    background: #fff;
}

.pe-figura-thumb {
    position: relative;
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    padding: 3px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 10px;
    /* Xadrez discreto: figura recortada tem fundo transparente, e sem isso ela
       parece flutuar no branco sem se saber se o fundo saiu mesmo. */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f0eef4 25%, transparent 25%, transparent 75%, #f0eef4 75%),
        linear-gradient(45deg, #f0eef4 25%, transparent 25%, transparent 75%, #f0eef4 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pe-figura-thumb:hover {
    border-color: var(--pane-verde, var(--verde-700));
    box-shadow: 0 0 0 3px rgba(5, 133, 73, 0.14);
}

.pe-figura-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Selinho de lápis no canto, dizendo que a miniatura é clicável. */
.pe-figura-lupa {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
    font-size: 9px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pe-figura-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pe-figura-titulo {
    font-size: 12px;
    font-weight: 700;
    color: #4b4552;
}

.pe-figura-dica {
    font-size: 10.5px;
    line-height: 1.35;
    color: #8b8494;
}

/* Menu que abre ao clicar na miniatura. */
.pe-figura-acoes {
    position: absolute;
    top: calc(100% - 4px);
    left: 11px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 168px;
    padding: 5px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.pe-figura-acao {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #4b4552;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pe-figura-acao:hover {
    background: var(--pane-cabeca-bg, #faf7ff);
}

.pe-figura-acao.perigo {
    color: #c62828;
}

.pe-figura-acao.perigo:hover {
    background: #fff1f1;
}

/* ==========================================================================
   O atributo `hidden` tem de ganhar de qualquer `display` nosso.
   `hidden` é só `display: none` vindo da folha do navegador, com a menor
   especificidade que existe — então QUALQUER regra nossa que declare `display`
   no mesmo elemento o derrota em silêncio. Foi exatamente o que aconteceu com
   a miniatura da figura: `.pe-figura-acoes { display: flex }` deixava o menu
   "Trocar imagem / Remover" visível sem ninguém clicar, porque o `hidden` que
   o script punha não tinha efeito.
   Com esta regra o atributo volta a ter a última palavra, e o mesmo engano não
   se repete no próximo componente que usar `hidden`.
   ========================================================================== */
[hidden] {
    display: none !important;
}

/* ==========================================================================
   REMOVEDOR DE FUNDO NO CELULAR
   O modal empilha tudo abaixo de 900px: prévia + status + 4 botões + 2
   controles + dica dão 834px de conteúdo. A caixa ficava limitada a ~493px
   com `overflow: hidden` (vem de `.modal-content.bg-editor-modal`, que tem
   especificidade maior que a regra genérica de modal do bloco de celular e a
   derrotava em silêncio). Resultado: os botões SALVAR e CANCELAR ficavam
   cortados fora da tela e não havia como concluir o recorte no telefone.
   Aqui o cabeçalho fica fixo, o corpo rola, e o SALVAR gruda no rodapé da
   rolagem — é a ação que conclui a tarefa e não pode ficar escondida.
   ========================================================================== */
@media (max-width: 860px) {
    .modal-content.bg-editor-modal {
        display: flex;
        flex-direction: column;
        width: 96%;
        max-width: 96%;
        max-height: 92vh;
        max-height: 92dvh;
        overflow: hidden;
    }

    .modal-content.bg-editor-modal .modal-header {
        flex: 0 0 auto;
    }

    /* `min-height: 0` é o que permite o item flex encolher e criar rolagem;
       sem ele o corpo cresce com o conteúdo e estoura de novo. */
    .modal-content.bg-editor-modal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px;
    }

    /* A prévia ocupava quase metade da rolagem. Mais baixa, sobra tela para
       os controles. */
    /* A prévia é o que mais consome altura. Em tela curta ela encolhe junto:
       34vh de um Android de 640px ainda dava 218px de prévia num corpo útil de
       474px — quase metade da janela para olhar, e o resto rolando. */
    .bg-editor-canvas {
        aspect-ratio: 4 / 3;
        max-height: min(28vh, 190px);
    }

    .bg-editor-layout {
        gap: 14px;
    }

    .bg-editor-actions {
        gap: 9px;
    }

    /* Alvo de toque decente nos botões e nos controles deslizantes. */
    .bg-editor-btn {
        min-height: 46px;
        font-size: 12.5px;
    }

    .bg-editor-local-controls input[type="range"] {
        width: 100%;
        height: 26px;
    }

    /* A dupla SALVAR/CANCELAR gruda no fim da rolagem: as duas ações que
       encerram a tarefa ficam sempre à mão. Antes o CANCELAR caía 126px abaixo
       do fim da janela num Android de 640px — não havia como desistir sem
       procurar por ele rolando. */
    .bg-editor-decisao {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding-top: 8px;
        background: linear-gradient(to top, #fff 72%, rgba(255,255,255,0));
    }

    /* A dica é a única coisa que pode sobrar abaixo da dobra sem atrapalhar. */
    .bg-editor-hint {
        font-size: 11px;
        margin-top: 2px;
    }

    .bg-editor-status {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* ==========================================================================
   CARTÃO DE PRODUTO NA LISTA
   A aba Produtos passou a abrir pela LISTA, e cada produto é um cartão com
   nome, preço e as duas cores editáveis na hora — sem abrir nada. A seta abre
   a sub-camada com o resto do formulário.
   Medido no crieoferta: cartão compacto de 359x103, cor de 24px com raio 6,
   nome em 14/700, rótulo PREÇO em 11/700 e campo de preço de 92x34 raio 10.
   ========================================================================== */
.pc-card {
    background: #fff;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 14px;
    margin-bottom: 9px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pc-card.ativo {
    border-color: var(--pane-verde, var(--verde-700));
    box-shadow: 0 0 0 3px rgba(5, 133, 73, 0.12);
}

/* Destaque continua marcado pela faixa dourada da esquerda. */
.pc-card.destacado {
    border-left: 3px solid #ffc107;
}

/* Nada aqui é posicionado por cima de nada: alça, campos, miniatura e ações
   são quatro colunas em fila, e só os campos esticam. A lixeira era
   `position: absolute` e obrigava a reservar 34px de vão à direita. */
.pc-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
}

/* Grade em vez de duas linhas soltas: a coluna da cor fixa e a do campo
   elástica fazem o nome e o preço começarem e terminarem no mesmo x — era o
   que faltava para o cartão ficar simétrico. `minmax(0, 1fr)` é o que permite
   a coluna encolher abaixo do tamanho natural do input; com `1fr` puro ela
   nunca encolhe e o conteúdo vaza para cima da miniatura. */
.pc-campos {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px 8px;
}

/* Seletor de cor quadradinho, como no deles — não o círculo do resto do
   painel: aqui ele fica colado no campo e o quadrado alinha melhor. */
.pc-card .pc-cor {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.pc-card .pc-cor::-webkit-color-swatch-wrapper { padding: 2px; }
.pc-card .pc-cor::-webkit-color-swatch { border: none; border-radius: 4px; }

.pc-card .pc-nome {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #26222a;
}

.pc-card .pc-nome:hover {
    border-color: var(--pane-borda, #ede6f7);
}

.pc-card .pc-nome:focus {
    outline: none;
    border-color: var(--pane-verde, var(--verde-700));
    background: #fff;
}

/* O rótulo PREÇO entrou para dentro do campo. Fora dele, ele empurrava o
   input para a direita e as duas linhas nunca alinhavam. */
.pc-preco-caixa {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 3px 8px 3px 4px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 10px;
    background: #fff;
}

.pc-preco-caixa:focus-within {
    border-color: var(--pane-verde, var(--verde-700));
    box-shadow: 0 0 0 3px rgba(5, 133, 73, 0.14);
}

.pc-rotulo {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* O campo era uma caixa com um numero dentro e nada dizendo o que era. O
   cifrao fica colado no numero (a etiqueta PRECO e rotulo da linha, nao do
   valor) e e o que sobra quando o cartao aperta e a etiqueta sai. */
.pc-moeda {
    flex-shrink: 0;
    margin-right: -3px;
    color: #8b8494;
    font-size: 12px;
    font-weight: 800;
}

.pc-card .pc-preco {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 3px 2px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: #26222a;
}

.pc-card .pc-preco:focus {
    outline: none;
}

/* Lixeira em cima, seta embaixo: a coluna de ações fica com a largura de um
   botão em vez dos 74px que a dupla miniatura+seta lado a lado ocupava. */
.pc-acoes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.pc-thumb {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

.pc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pc-thumb.vazia {
    color: #c9c3d2;
    font-size: 14px;
    border-style: dashed;
}

.pc-seta {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8b8494;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.15s ease;
}

.pc-seta:hover {
    background: var(--pane-cabeca-bg, #faf7ff);
    color: var(--pane-verde, var(--verde-700));
}

.pc-card.aberto .pc-seta {
    transform: rotate(180deg);
}

.pc-excluir {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #c9c3d2;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pc-excluir:hover {
    background: #fff1f1;
    color: #c62828;
}

/* Sub-camada: recebe o formulário único quando o cartão abre. */
.pc-corpo {
    border-top: 1px solid var(--pane-borda, #ede6f7);
    padding: 12px 12px 4px;
}

/* O formulário fora de qualquer cartão fica guardado. */
.product-editor.solto {
    display: none;
}

/* Dentro do cartão ele perde a moldura própria: a do cartão já basta. */
.pc-corpo .product-editor {
    padding: 0;
    border: none;
    background: transparent;
}

/* --- Cartão do produto no celular ---
   Este bloco fica no FIM do arquivo de propósito. As regras de base do cartão
   (`.pc-topo`, `.pc-thumb`) e do `.pane-corpo` são declaradas acima com a
   mesma especificidade; uma media query mais cedo no arquivo perde para elas
   em silêncio — foi o que aconteceu na primeira tentativa. */
@media (max-width: 860px) {
    /* O encadeamento aba -> bloco -> cartão comia 60px dos 375 só em respiro
       lateral. O cartão é o conteúdo mais apertado do painel; a largura
       devolvida aqui é a que faz o campo de preço caber. */
    .pane-corpo {
        padding: 12px 10px 14px;
    }

    .pc-topo {
        gap: 6px;
        padding: 10px 8px;
    }

    .pc-thumb {
        width: 38px;
        height: 38px;
    }

    /* Alvo de toque: 26px de botão são pequenos para o dedo, e aqui sobra
       altura (a coluna tem duas ações empilhadas). */
    .pc-excluir,
    .pc-seta {
        width: 30px;
        height: 30px;
    }
}

/* --- Rótulo do preço: encolhe pela largura do CARTÃO, não da tela ---
   Medi os dois lados antes de escolher: a 320px de tela o cartão tem 278px,
   mas no desktop, com o painel de largura fixa, ele tem 290px — ou seja, o
   desktop é quase tão apertado quanto o telefone pequeno. Uma media query de
   viewport resolveria o celular e deixaria o desktop errado. A consulta de
   contêiner pergunta o que interessa: quanto sobra para o cartão.
   Onde `@container` não existir, fica o rótulo por extenso — mais apertado,
   mas sem quebrar nada. */
.added-products-list {
    container-type: inline-size;
    container-name: lista-produtos;
}

/* Medido nos tres tamanhos reais: a lista tem 351px no celular comum, 335px no
   painel do desktop (que e o mais apertado) e 296px num celular pequeno. Com a
   etiqueta por extenso MAIS o cifrao, o campo do desktop caia para 63px. O
   corte em 340px tira a etiqueta so onde ela custa caro — o cifrao, que e o que
   diz do que se trata, fica sempre. */
@container lista-produtos (max-width: 340px) {
    .pc-rotulo {
        display: none;
    }
}

/* A lista deixou de ser sub-camada recolhível (item 3.54), então o respiro que
   vinha do `.pane-corpo` é dela agora — e menor, porque o cartão de produto é
   o conteúdo mais apertado do painel. */
.product-list-container {
    padding: 2px 2px 4px;
}

/* ==========================================================================
   JANELA DA FIGURA DO PRODUTO
   A edição de figura era a última seção da sub-camada do produto: para trocar
   a foto da Coca era preciso achar o produto na lista, abrir a sub-camada e
   rolar até o fim. Virou janela sobre a tela, aberta clicando na própria
   imagem — no cartaz ou na miniatura do cartão —, como no crieoferta.
   ========================================================================== */
.modal-content.figura-modal {
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 560px;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    animation: modalPop 0.22s ease-out;
}

.modal-content.figura-modal .modal-header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pane-borda, #ede6f7);
}

.modal-content.figura-modal .modal-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #26222a;
}

/* O corpo é quem rola: o cabeçalho tem de ficar sempre alcançável, que foi
   justamente o que faltou no editor de fundo (item 3.44). `min-height: 0` é o
   que permite o item flex encolher; sem ele a janela estoura a tela. */
.modal-content.figura-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
}

/* Qual produto está sendo editado — a janela cobre o cartaz, então sem isto
   não dá para conferir se o clique pegou o produto certo. */
.figura-modal-alvo {
    margin: 0 0 12px;
    font-size: 12px;
    color: #6b6474;
}

.figura-modal-alvo b {
    color: #26222a;
}

/* Na janela sobra largura: os ladrilhos da busca crescem em vez de ficarem
   nos 3 por linha apertados do painel. */
.figura-modal .figure-results {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    max-height: none;
    overflow: visible;
}

.figura-modal .pe-chips {
    margin-top: 14px;
}

@media (max-width: 860px) {
    /* No telefone a janela ocupa a tela: o conteúdo (miniatura + busca +
       resultados + 4 atalhos) não cabe em caixa pequena, e foi exatamente
       assim que o editor de fundo ficou inutilizável antes do item 3.44. */
    .modal-content.figura-modal {
        width: 96%;
        max-width: 96%;
        max-height: 92vh;
        max-height: 92dvh;
    }

    .figura-modal .figure-results {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Alvo de dedo nos atalhos. */
    .figura-modal .pe-chip {
        min-height: 42px;
    }
}

/* ==========================================================================
   REPLICAR ESTILO
   O crieoferta joga o estilo em todos os produtos de uma vez. Aqui a pessoa
   marca em quais — encarte de mercadinho costuma ter uma ou duas ofertas com
   cara própria, que não devem ser niveladas junto com o resto.
   ========================================================================== */
.pe-replicar {
    margin-bottom: 10px;
}

.pe-replicar-abrir {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 999px;
    background: #fff;
    color: #4b4552;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pe-replicar-abrir > span {
    flex: 1;
    text-align: left;
}

.pe-replicar-abrir i {
    color: #b0a9ba;
    transition: color 0.15s ease, transform 0.2s ease;
}

.pe-replicar-abrir:hover {
    border-color: var(--pane-verde, var(--verde-700));
    color: var(--pane-verde, var(--verde-700));
}

.pe-replicar-abrir:hover i {
    color: var(--pane-verde, var(--verde-700));
}

/* Aberto, o botão vira o cabeçalho do painel: perde o arredondado de baixo
   para os dois lerem como uma peça só. */
.pe-replicar-abrir.aberto {
    border-color: var(--pane-verde, var(--verde-700));
    border-bottom-color: transparent;
    border-radius: 14px 14px 0 0;
    background: var(--pane-cabeca-bg, #faf7ff);
    color: var(--pane-verde, var(--verde-700));
}

.pe-replicar-abrir.aberto i {
    color: var(--pane-verde, var(--verde-700));
}

.pe-replicar-abrir.aberto .pe-replicar-seta {
    transform: rotate(180deg);
}

.pe-replicar-painel {
    padding: 12px;
    border: 1px solid var(--pane-verde, var(--verde-700));
    border-top: none;
    border-radius: 0 0 14px 14px;
    background: #fff;
}

.pe-replicar-dica {
    margin: 0 0 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #6b6474;
}

.pe-replicar-dica b {
    color: #26222a;
}

.pe-replicar-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--pane-borda, #ede6f7);
}

.pe-replicar-conta {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: #8b8494;
}

/* Teto de rolagem aqui, e não na aba: a lista de marcação é um controle
   fechado em si; deixá-la crescer empurraria o botão de aplicar para longe. */
.pe-replicar-lista {
    max-height: 190px;
    overflow-y: auto;
    margin: 4px 0 10px;
}

/* Barra de rolagem: a da casa, no topo do arquivo. */

.pe-replicar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 4px;
    border-radius: 8px;
    font-size: 12px;
    color: #26222a;
    cursor: pointer;
}

.pe-replicar-item:hover {
    background: var(--pane-cabeca-bg, #faf7ff);
}

.pe-replicar-item input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--pane-verde, var(--verde-700));
    cursor: pointer;
}

.pe-replicar-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pe-replicar-vazio {
    margin: 10px 4px;
    font-size: 12px;
    color: #8b8494;
}

.pe-replicar-aplicar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 999px;
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.pe-replicar-aplicar:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 860px) {
    /* Alvo de dedo. */
    .pe-replicar-item {
        padding: 10px 4px;
    }

    .pe-replicar-item input {
        width: 20px;
        height: 20px;
    }
}

/* Aviso do que a importação faz sozinha: sem isto, ninguém espera que o botão
   vá buscar foto por foto — e a espera parece travamento. */
.import-modal-dica {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #6b6474;
}

/* Duplicar fica junto das outras ações do cartão. Ícone de cópia, e não o de
   clone — este último já é o "Replicar estilo", que faz outra coisa. */
.pc-duplicar {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #c9c3d2;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pc-duplicar:hover {
    background: var(--pane-cabeca-bg, #faf7ff);
    color: var(--pane-verde, var(--verde-700));
}

@media (max-width: 860px) {
    .pc-duplicar {
        width: 30px;
        height: 30px;
    }
}

/* A dica da lista vira aviso por alguns segundos depois de importar, para dizer
   quantos produtos vieram sem foto. Com a busca recusando figura que não bate
   com o produto, o "não achei" é resultado esperado — e precisa ser dito. */
.product-list-hint-aviso {
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--pane-cabeca-bg, #faf7ff);
    border: 1px solid var(--pane-verde, var(--verde-700));
    color: var(--pane-verde, var(--verde-700));
    font-weight: 600;
}

/* Aviso de recurso desligado dentro dos resultados de figura: o "ver mais"
   promete imagens da web, e sem chave entrega só as bases abertas. Sem dizer
   isso, o botão parece quebrado. */
.figure-msg-config {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    padding: 9px 11px;
    border: 1px solid var(--pane-verde, var(--verde-700));
    border-radius: 10px;
    background: var(--pane-cabeca-bg, #faf7ff);
    color: var(--pane-verde, var(--verde-700));
    font-size: 11.5px;
    line-height: 1.45;
}

/* ==========================================================================
   JANELA DA FIGURA NO CELULAR
   Dois defeitos que só apareciam no telefone:
   1. os resultados da busca cresciam ANTES dos atalhos e empurravam
      "Tirar foto / Escolher / Recortar fundo" para fora da tela — resolvido no
      HTML, movendo os resultados para depois deles;
   2. o menu "Trocar imagem / Remover" abria como balão `absolute` por cima do
      campo de busca. Numa janela que rola, balão flutuante fica no lugar
      errado assim que se rola um pixel.
   ========================================================================== */
.figura-modal .figure-results {
    margin-top: 14px;
}

@media (max-width: 860px) {
    /* O menu deixa de flutuar: empurra o conteúdo para baixo, que é previsível
       e continua certo depois de rolar. */
    .pe-figura-atual {
        flex-wrap: wrap;
    }

    .pe-figura-acoes {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 10px;
        box-shadow: none;
    }

    .pe-figura-acao {
        min-height: 42px;
    }

    /* Quatro atalhos em duas fileiras iguais. Soltos, o último (a lixeira)
       sobrava sozinho numa linha e parecia fora de ordem. */
    .figura-modal .pe-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .figura-modal .pe-chip {
        justify-content: center;
        min-height: 44px;
        padding: 6px 8px;
    }
}

/* ==========================================================================
   ALÇA DO PAINEL NO CELULAR E GRADE DE FIGURAS
   ========================================================================== */

/* A alça do painel no celular: UM controle, não dois.

   Antes havia a barrinha de arrastar em cima e o título com a seta embaixo.
   Na primeira tentativa eu só tirei o clique da barrinha — e não resolveu,
   porque o problema nunca foi o alvo: eram **dois desenhos** para a mesma
   ação, e o olho conta desenhos, não ouvintes de evento. A barrinha saiu.

   Recolhido, a faixa ganha cor: fio verde em cima, fundo lilás claro e o texto
   em verde. É o bastante para ler 'dá para abrir aqui' sem virar um botão
   gritando no meio da arte. Aberto, volta ao neutro — ali já se vê o painel
   inteiro, não precisa de convite. */
@media (max-width: 860px) {
    .painel-pega {
        justify-content: center;
        gap: 8px;
        padding: 14px 16px 0;
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .painel-pega-texto {
        flex: 0 0 auto;
        text-align: center;
        transition: color 0.2s ease;
    }

    .painel-pega-seta {
        flex: 0 0 auto;
        /* A regra antiga empurra a seta para a direita com `margin-left: auto`,
           e é ela que comia todo o espaço livre e desalinhava o título. */
        margin-left: 0;
        opacity: 0.65;
        transition: color 0.2s ease, opacity 0.2s ease;
    }

    body.painel-recolhido .painel-pega {
        background: var(--pane-cabeca-bg, #faf7ff);
        /* Fio no topo em vez de borda: borda mudaria a altura da faixa e
           empurraria o painel meio pixel a cada troca de estado. */
        box-shadow: inset 0 2px 0 var(--pane-verde, var(--verde-700));
    }

    body.painel-recolhido .painel-pega-texto {
        color: var(--pane-verde, var(--verde-700));
    }

    body.painel-recolhido .painel-pega-seta {
        color: var(--pane-verde, var(--verde-700));
        opacity: 1;
    }
}

/* Grade de figuras com colunas FIXAS e ladrilho quadrado: imagem da web vem em
   qualquer proporção, e sem caixa de tamanho fixo a grade fica serrilhada.
   O `contain` dentro do quadrado preserva a proporção de cada uma. */
.figura-modal .figure-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: none;
    overflow: visible;
}

.figura-modal .figure-item {
    aspect-ratio: 1;
    border-radius: 10px;
    border: 1px solid var(--pane-borda, #ede6f7);
    background: #fff;
}

.figura-modal .figure-item:hover {
    border-color: var(--pane-verde, var(--verde-700));
}

@media (max-width: 860px) {
    .figura-modal .figure-results {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   ALTERNATIVAS DA IMPORTAÇÃO NA JANELA DA FIGURA
   ========================================================================== */

/* Título de seção dentro da grade de figuras: ocupa a linha inteira, senão
   vira um ladrilho de texto no meio das fotos. */
.figure-secao {
    grid-column: 1 / -1;
    margin: 2px 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pane-verde, var(--verde-700));
}

/* Dica de como escrever o termo. Fica depois dos ladrilhos, com cara de
   recado e não de erro — o erro já tem o `.figure-msg-config` verde. */
.figure-results .figure-msg-dica {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f6f7f9;
    color: #5c6472;
    line-height: 1.45;
}

/* ==========================================================================
   RECUPERAR ENCARTE EM ANDAMENTO
   A janela antiga era de outro site: cabeçalho verde var(--verde-800), cantos de 8px e
   três botões chapados verde/amarelo/vermelho, do mesmo tamanho, embaixo de
   uma pergunta. Nada disso aparece em outro lugar do editor — e, pior, a
   janela não dizia NADA sobre o rascunho: a escolha entre recuperar e excluir
   era às cegas. Aqui ela usa a mesma linguagem das janelas de figura e de
   importar lista, mostra o que tem dentro e dá peso diferente a cada saída.
   ========================================================================== */

.modal-content.draft-recovery-modal {
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 460px;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    animation: modalPop 0.22s ease-out;
}

.modal-content.draft-recovery-modal .modal-header {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pane-borda, #ede6f7);
    background: #fff;
}

.modal-content.draft-recovery-modal .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    color: #26222a;
}

.modal-content.draft-recovery-modal .modal-header h2 i {
    color: var(--pane-verde, var(--verde-700));
}

.modal-content.draft-recovery-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
}

.draft-dica {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b6474;
}

/* Três números do mesmo tamanho: quantos produtos, que formato, de quando.
   É o que responde "é este o encarte que eu estava fazendo?". */
.draft-resumo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 8px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 12px;
    background: var(--pane-cabeca-bg, #faf7ff);
}

.draft-resumo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.draft-resumo-num {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--pane-verde, var(--verde-700));
    text-align: center;
    overflow-wrap: anywhere;
}

.draft-resumo-rotulo {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b8494;
}

/* Os primeiros nomes do encarte. Reconhecer "ARROZ TIO JOÃO" vale mais que
   qualquer contagem. */
.draft-itens {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: #4a4552;
}

.draft-itens li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--pane-borda, #ede6f7);
}

.draft-itens li:last-child {
    border-bottom: none;
}

.draft-item-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-item-preco {
    flex: 0 0 auto;
    font-weight: 800;
    color: #26222a;
}

.draft-item-resto {
    color: #8b8494;
    font-style: italic;
}

/* O recado de quando a recuperação falha. Fica acima dos botões porque é ali
   que o olho volta depois do clique que não fez nada. */
.draft-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid #f0c7cb;
    border-radius: 10px;
    background: #fdf2f3;
    font-size: 12px;
    line-height: 1.45;
    color: #8f3740;
}

.draft-aviso[hidden] {
    display: none;
}

.draft-aviso i {
    margin-top: 1px;
    flex: 0 0 auto;
}

/* Duas saídas com peso diferente: continuar é o caminho comum e leva a pílula
   roxa; começar um novo é contorno. Antes os três botões tinham exatamente o
   mesmo tamanho e gritavam igual. */
.draft-acoes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.draft-acao-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    border: none;
    border-radius: 999px;
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.15s ease;
}

.draft-acao-principal:hover {
    transform: translateY(-1px);
}

.draft-acao-secundaria {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 999px;
    background: #fff;
    color: #4a4552;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.draft-acao-secundaria:hover {
    border-color: var(--pane-verde, var(--verde-700));
    color: var(--pane-verde, var(--verde-700));
}

/* "Pular" arquivava o rascunho e ninguém sabia disso. Dizer isso é o que
   permite clicar sem medo. */
.draft-nota {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 10px 2px 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: #8b8494;
}

.draft-nota i {
    margin-top: 2px;
    color: var(--pane-verde, var(--verde-700));
    opacity: 0.7;
}

/* A prateleira dos arquivados. Cada um é um botão inteiro, com nome em cima e
   "3 produtos · ontem" embaixo: dá para escolher pelo que se lembra. */
.draft-outros {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--pane-borda, #ede6f7);
}

.draft-outros[hidden] {
    display: none;
}

.draft-outros-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b8494;
}

.draft-outros-titulo i {
    font-size: 11px;
    opacity: 0.8;
}

.draft-outros-lista {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.draft-outro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.draft-outro:hover {
    border-color: var(--pane-verde, var(--verde-700));
    background: var(--pane-cabeca-bg, #faf7ff);
}

.draft-outro-nome {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 700;
    color: #26222a;
}

.draft-outro-detalhe {
    font-size: 11px;
    color: #8b8494;
}

/* Descartar sai da fila das ações: fica abaixo de uma linha, discreto, do
   tamanho de um link. É o caminho sem volta — não pode competir de igual
   para igual com o de continuar. */
.draft-descartar {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--pane-borda, #ede6f7);
    text-align: center;
}

.draft-acao-descartar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #a8404a;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.draft-acao-descartar:hover {
    background: #fdf2f3;
}

/* ==========================================================================
   LOGO NA ABA AJUSTES
   Antes: um <input type="file"> cru, com o botão do sistema e o
   "Nenhum arquivo escolhido" do lado, e um quadrado xadrez de 100px de
   pré-visualização. Feio, e pior — não dizia se já havia logo: o quadrado
   ficava lá, vazio, de qualquer jeito.
   Agora são dois estados que se excluem: o convite para enviar, ou a
   miniatura redonda da logo que já está no encarte.
   ========================================================================== */

.logo-config-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

/* Estado SEM logo. */
.logo-enviar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border: 1px dashed var(--pane-borda, #ede6f7);
    border-radius: 14px;
    background: var(--pane-cabeca-bg, #faf7ff);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.logo-enviar:hover {
    border-color: var(--pane-verde, var(--verde-700));
    background: #fff;
}

.logo-enviar-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
    font-size: 15px;
}

.logo-enviar-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.logo-enviar-texto strong {
    font-size: 13px;
    font-weight: 800;
    color: #26222a;
}

.logo-enviar-texto small {
    font-size: 10.5px;
    line-height: 1.35;
    color: #8b8494;
}

/* Estado COM logo: a miniatura redonda pedida, com o selinho de lápis. */
.logo-atual {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 14px;
    background: #fff;
}

.logo-thumb {
    position: relative;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    padding: 4px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 50%;
    /* Xadrez discreto: logo recortada tem fundo transparente, e sem isso não
       dá para saber se o fundo saiu mesmo. */
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #f0eef4 25%, transparent 25%, transparent 75%, #f0eef4 75%),
        linear-gradient(45deg, #f0eef4 25%, transparent 25%, transparent 75%, #f0eef4 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.logo-thumb:hover {
    border-color: var(--pane-verde, var(--verde-700));
    box-shadow: 0 0 0 3px rgba(5, 133, 73, 0.14);
}

.logo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* O selinho fica DENTRO do círculo: com `overflow: hidden` no botão, um
   selo pendurado para fora seria cortado pela metade. */
.logo-thumb-lapis {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
    font-size: 8.5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.logo-atual-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.logo-atual-titulo {
    font-size: 12px;
    font-weight: 700;
    color: #4b4552;
}

.logo-atual-dica {
    font-size: 10.5px;
    line-height: 1.35;
    color: #8b8494;
}

/* Menu que abre ao clicar na logo. */
.logo-acoes {
    position: absolute;
    top: calc(100% - 4px);
    left: 12px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 168px;
    padding: 5px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.logo-acao {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #4b4552;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.logo-acao:hover {
    background: var(--pane-cabeca-bg, #faf7ff);
}

.logo-acao.perigo {
    color: #c62828;
}

.logo-acao.perigo:hover {
    background: #fff1f1;
}

/* Sem logo, o <img> vazio desenha o ícone de imagem quebrada mais o texto do
   alt ("Sua Logo") no meio do cabeçalho — e ia junto para a exportação. O
   caminho de restauração já removia o `src` quando não havia logo; o botão
   Remover só tornou fácil de encontrar. */
#logo-preview:not([src]),
#logo-preview[src=""] {
    display: none;
}

/* ==========================================================================
   PRODUTOS POR FOLHA
   Um encarte de 20 itens numa folha só sai com o produto do tamanho de um
   selo. Escolhendo o máximo por folha, o mesmo encarte vira N folhas com os
   produtos grandes.
   O desenho é o do crieoferta, conferido no navegador em 13/09/2026:
   uma barra acima da arte com "Máximo [select 1..30]  Pág. ① ② ③", uma
   pastilha por folha e a da folha atual acesa. Pastilha ganha de seta: vê-se
   quantas folhas existem e dá para pular direto para a quarta.
   A folha continua sendo UMA na tela — quem não é da folha atual fica
   escondido, em vez de empilhar N canvas.
   ========================================================================== */

/* `!important` porque a grade declara `display` nos itens, e o produto fora da
   folha não pode reaparecer por causa de uma regra de layout mais específica. */
.product-item.fora-da-pagina {
    display: none !important;
}

/* Linha de folhas no topo do painel de edição. Já foi pílula flutuando
   sobre o encarte e faixa na largura da tela; ambas atrapalhavam. Aqui é uma
   linha fina como qualquer outro controle do painel. */
.pagina-barra {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--pane-borda, #ede6f7);
    background: #fff;
}

.pagina-barra-rotulo {
    font-size: 10.5px;
    font-weight: 700;
    color: #8b8494;
    white-space: nowrap;
}

.pagina-barra-select {
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #26222a;
    cursor: pointer;
}

.pagina-barra-select:focus {
    outline: none;
    border-color: var(--pane-verde, var(--verde-700));
}

/* Muitas folhas: a fila rola sozinha em vez de esticar a linha. */
.pagina-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.pagina-pills::-webkit-scrollbar {
    display: none;
}

.pagina-pill {
    flex: 0 0 auto;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 999px;
    background: #fff;
    color: #6b6474;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.pagina-pill:hover {
    border-color: var(--pane-verde, var(--verde-700));
    color: var(--pane-verde, var(--verde-700));
}

.pagina-pill.ativo {
    border-color: var(--pane-verde, var(--verde-700));
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
}

.pagina-resumo {
    display: none;
}

/* Cada folha numa página de papel. */
@media print {
    body.imprimindo .area-impressao img + img {
        break-before: page;
        page-break-before: always;
    }
}


/* ==========================================================================
   QUAIS FOLHAS ENTRAM NO ARQUIVO
   Baixar e imprimir passaram a perguntar quando o encarte tem mais de uma
   folha. Com uma só não perguntam nada — seria um clique a mais em todo
   download, sem escolha a fazer.
   ========================================================================== */

.modal-content.folhas-modal {
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 420px;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    animation: modalPop 0.22s ease-out;
}

.modal-content.folhas-modal .modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--pane-borda, #ede6f7);
    background: #fff;
}

.modal-content.folhas-modal .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #26222a;
}

.modal-content.folhas-modal .modal-header h2 i {
    color: var(--pane-verde, var(--verde-700));
}

.modal-content.folhas-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px 18px;
}

.folhas-dica {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #6b6474;
}

.folhas-atalhos {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.folhas-atalho {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #4b4552;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.folhas-atalho:hover {
    border-color: var(--pane-verde, var(--verde-700));
    color: var(--pane-verde, var(--verde-700));
}

/* Uma caixinha por folha: é o "poder selecionar as páginas". A grade se
   ajusta sozinha, então 30 folhas não viram uma fila fora da tela. */
.folhas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
}

.folhas-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 10px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    color: #6b6474;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* A caixa de marcar some: o ladrilho inteiro é o alvo, que num celular é a
   diferença entre acertar e não acertar. */
.folhas-item input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.folhas-item:hover {
    border-color: var(--pane-verde, var(--verde-700));
}

.folhas-item:has(input:checked) {
    border-color: var(--pane-verde, var(--verde-700));
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
}

.folhas-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.folhas-conta {
    font-size: 12px;
    font-weight: 700;
    color: #8b8494;
}

.folhas-confirmar {
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.15s ease;
}

.folhas-confirmar:hover:not(:disabled) {
    transform: translateY(-1px);
}

.folhas-confirmar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Folhas extras na prévia do iPhone: lá o <a download> costuma não salvar, e
   esta prévia é o caminho de verdade — com quatro folhas, mostrar só a
   primeira perderia as outras três. */

/* ==========================================================================
   FOLHAS DE PAPEL NA IMPRESSÃO
   A área de impressão deixou de ser uma pilha de imagens e passou a ser uma
   pilha de FOLHAS, cada uma com a medida do papel escolhido. É o que permite
   "2 por folha" e o pôster espalhado por várias folhas.
   ========================================================================== */
.area-impressao .folha-impressa {
    display: grid;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
    break-after: page;
    page-break-after: always;
}

/* A última não força quebra: senão sai uma folha em branco no fim. */
.area-impressao .folha-impressa:last-child {
    break-after: auto;
    page-break-after: auto;
}

.area-impressao .folha-celula {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

/* Mais específico que `body.imprimindo .area-impressao img`, que manda a
   imagem ocupar 100% da largura — dentro de uma célula ela tem de caber
   inteira, sem deformar. */
body.imprimindo .area-impressao .folha-celula img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* Pôster: a arte é ampliada para o tamanho do conjunto de folhas e cada folha
   mostra o seu pedaço. O recorte é o `overflow: hidden` da folha. */
.area-impressao .folha-poster {
    position: relative;
    display: block;
}

body.imprimindo .area-impressao .folha-poster img {
    position: absolute;
    display: block;
    object-fit: fill;
}

/* ==========================================================================
   OPÇÕES DE IMPRESSÃO NA JANELA
   ========================================================================== */
.impressao-opcoes {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--pane-borda, #ede6f7);
}

.folhas-secao {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b8494;
}

.impressao-papeis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}

.impressao-papel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 4px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.impressao-papel strong {
    font-size: 12.5px;
    font-weight: 800;
    color: #26222a;
}

.impressao-papel small {
    font-size: 9px;
    color: #8b8494;
}

.impressao-papel:hover {
    border-color: var(--pane-verde, var(--verde-700));
}

.impressao-papel.ativo {
    border-color: var(--pane-verde, var(--verde-700));
    background: var(--pane-cabeca-bg, #faf7ff);
}

.impressao-papel.ativo strong {
    color: var(--pane-verde, var(--verde-700));
}

.impressao-tamanhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
}

.impressao-tamanho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 5px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.impressao-tamanho strong {
    font-size: 11px;
    font-weight: 800;
    color: #26222a;
}

.impressao-tamanho small {
    font-size: 9px;
    color: #8b8494;
}

.impressao-tamanho:hover {
    border-color: var(--pane-verde, var(--verde-700));
}

.impressao-tamanho.ativo {
    border-color: var(--pane-verde, var(--verde-700));
    background: var(--pane-cabeca-bg, #faf7ff);
}

.impressao-tamanho.ativo strong {
    color: var(--pane-verde, var(--verde-700));
}

/* A miniatura mostra a divisão da folha: é o que faz entender "Pôster 3×3"
   sem precisar ler a legenda. */
.impressao-mini {
    display: grid;
    gap: 1px;
    width: 26px;
    height: 30px;
}

.impressao-mini i {
    display: block;
    border: 1px solid #c9c2d6;
    border-radius: 1px;
    background: #fff;
}

.impressao-tamanho.ativo .impressao-mini i {
    border-color: var(--pane-verde, var(--verde-700));
    background: rgba(5, 133, 73, 0.12);
}

.impressao-extra {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 11.5px;
    color: #4b4552;
    cursor: pointer;
}

.impressao-extra input {
    width: 15px;
    height: 15px;
    accent-color: var(--pane-verde, var(--verde-700));
    cursor: pointer;
}

/* ==========================================================================
   FAIXA DO "DOBRE AQUI"
   Copiada do crieoferta: a arte desce 7% da própria altura e encolhe na mesma
   medida — não é recorte, é a arte inteira num espaço menor. Na faixa em
   branco que sobra em cima vai a palavra, centralizada, com fonte de um quarto
   da altura da faixa. Serve para dobrar o papel e pendurar na gôndola.
   ========================================================================== */
.area-impressao .arte-com-dobra {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.area-impressao .faixa-dobra {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.35em;
    font-weight: 700;
    color: #9aa0a6;
    background: #fff;
    /* A palavra é uma marca de corte, não parte da arte: não pode disputar
       atenção com o preço. */
    text-transform: uppercase;
    line-height: 1;
}

/* A arte divide o que sobra da célula, sem deformar. */
body.imprimindo .area-impressao .arte-com-dobra img {
    flex: 1 1 auto;
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* Pôster não aceita dobra: a arte é montada com folhas coladas, e uma faixa no
   alto de cada pedaço cortaria o desenho no meio. */
.impressao-extra.desligado {
    opacity: 0.45;
    cursor: not-allowed;
}

.impressao-extra small {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.3;
    color: #8b8494;
}

/* O atalho aceso mostra que o clique pegou — e diz qual é a escolha atual.
   Vem DEPOIS do `:hover` de propósito: com o mouse em cima do botão aceso, o
   texto tem de continuar branco. */
.folhas-atalho.ativo,
.folhas-atalho.ativo:hover {
    border-color: var(--pane-verde, var(--verde-700));
    background: var(--pane-verde, var(--verde-700));
    color: #fff;
}

.folhas-atalho:active {
    transform: translateY(1px);
}

/* ==========================================================================
   OLHO: MOSTRAR OU ESCONDER A FIGURA DO PRODUTO
   Fica SOBRE a miniatura do painel porque é dela que se fala. Um botão solto
   na linha de ações seria mais um ícone entre outros três, sem dizer a que
   imagem se refere.
   ========================================================================== */
.pc-figura {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}

.pc-olho {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 50%;
    background: #fff;
    color: var(--pane-verde, var(--verde-700));
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pc-olho:hover {
    background: var(--pane-verde, var(--verde-700));
    border-color: var(--pane-verde, var(--verde-700));
    color: #fff;
}

/* Escondida: o olho fecha e fica apagado, e a miniatura esmaece junto. Sem
   isso o painel diria "este produto tem foto" enquanto o encarte não a
   mostra — a lista tem de contar a mesma história que a arte. */
.pc-figura.oculta .pc-olho {
    background: #efedf3;
    border-color: #ded8e8;
    color: #8b8494;
}

.pc-figura.oculta .pc-olho:hover {
    background: var(--pane-verde, var(--verde-700));
    border-color: var(--pane-verde, var(--verde-700));
    color: #fff;
}

.pc-figura.oculta .pc-thumb {
    opacity: 0.4;
    filter: grayscale(1);
}

/* No encarte, a figura some. `display: none` e não `visibility`: o container
   é absoluto dentro do embrulho, então some sem mexer no layout do cartão, e
   de quebra deixa de ser um alvo invisível para o arrasto. */
.product-item.sem-figura .product-img-container {
    display: none;
}

/* No celular o ponteiro é o dedo: 20px é alvo pequeno demais. Cresce para 26,
   que é o mínimo confortável sem cobrir a miniatura de 42px. */
@media (max-width: 860px) {
    .pc-olho {
        width: 26px;
        height: 26px;
        right: -7px;
        bottom: -7px;
        font-size: 11px;
    }
}

/* ==========================================================================
   TEMAS DO CABEÇALHO

   O tema é a arte que ocupa a faixa do topo do encarte, no lugar do selo
   "SUPER OFERTAS". A logo da loja continua por cima e arrastável.

   Imagem de FUNDO, e não uma <img> dentro do cabeçalho, por causa da
   exportação: o html2canvas ignora `object-fit`, então uma <img> esticada
   para preencher sairia deformada no PNG. Com `background-size: cover` o
   recorte é o mesmo na tela e no arquivo.
   ========================================================================== */

.offer-header.com-tema {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Com tema, o "SUPER OFERTAS" escrito some: quem nomeia a peça agora é o selo
   do tema, e deixar os dois seria texto sobre texto.

   Quem some é o `.badge`, e não o `.badge-container`: o container tem `flex: 1`
   e é ele que empurra a logo para a direita. Escondendo o container, a logo
   saltava para a esquerda e cobria o título — visto na exportação de teste,
   com o "S" de "SEGUNDA" atrás da logo. E é dentro dele que o selo entra, no
   mesmo lugar que o badge ocupava. */
.offer-header.com-tema .badge {
    display: none;
}

/* O selo do tema: o letreiro, encostado na esquerda da faixa.

   Nada de `object-fit`: o html2canvas o ignora, e uma imagem esticada para
   caber numa caixa de outra proporção sairia deformada no PNG. Aqui as duas
   dimensões são `auto` e quem manda são os dois tetos — com isso a caixa nasce
   na proporção da imagem e não há o que deformar.

   O teto de altura sai de `--header-height`, e não de uma porcentagem: o pai
   (`.badge-container`) tem altura automática, e porcentagem contra altura
   automática resolve para `auto`. Escrito como `height: 70%`, a regra não valia
   nada — o selo ia até a largura do container e só. No A4 deitado, com o
   cabeçalho igual e o container muito mais largo, isso faria o letreiro
   transbordar a faixa pelo alto. */
.tema-selo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(var(--header-height) * 0.68);
}

/* A costura entre a arte e as ofertas.

   Fica FORA do cabeçalho, logo abaixo dele, e some por transparência: o que
   aparece embaixo é o próprio fundo do encarte, cor ou imagem. Por isso não
   precisa saber qual dos dois é, nem ser reajustada quando a cor do corpo
   muda. A cor de partida vem do pé da própria arte, calculada no envio. */
.tema-degrade {
    /* FORA DO FLUXO, sobreposta ao alto da área de ofertas.

       Era item de flex, com altura própria, e por isso comia 62px da área das
       ofertas no A4 em pé: escolher um tema encolhia o espaço dos produtos, e
       o mesmo encarte ficava mais apertado só por ganhar um tema. A emenda é
       enfeite — não pode disputar espaço com o conteúdo.

       A folha do encarte é position absolute, então é ela quem serve de
       referência para o top daqui. */
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-height);
    /* Proporcional ao cabeçalho, e não fixo em pixels: os formatos têm faixas
       de alturas diferentes (240px no A4 em pé, 180px no deitado), e uma tira
       de altura fixa ficaria grossa num e fina no outro. */
    /* A FORCA VEM DO TEMA.

       0,26 era o numero escrito fixo aqui, e continua sendo o padrao: tema
       antigo tem de ficar igual ao que era. Quem sobe o tema escolhe entre 0
       e 0,50 — em 0 a emenda some, o que serve para arte que ja termina numa
       borda desenhada, onde o degrade vira borrao. */
    /* A EMENDA CABE NO VAO, E NAO INVADE O CARTAO.

       Medido num A4 em pe com tema: o cabecalho termina onde a area de ofertas
       comeca, e entre ela e o primeiro cartao ha o recuo do container -- 40px.
       A emenda pedia 62 (26% de um cabecalho de 240), entao os ultimos 15
       caiam EM CIMA do cartao branco. Ali ela ja esta desbotada, mas a borda
       onde ela acaba e visivel: era a linha atravessando o topo das ofertas.

       Tentei antes dar espaco proprio a ela, empurrando as ofertas para baixo.
       Funcionou e ficou pior: o vao entre cabecalho e ofertas dobrava, e o
       encarte perdia area de produto para um enfeite.

       O teto e o proprio recuo do container, que e exatamente o espaco vazio
       que existe ali. Acima disso a emenda nao teria onde acontecer sem passar
       por cima de alguma coisa.

       CONSEQUENCIA, registrada para quem vier depois: os recuos foram
       apertados a pedido da loja (ofertas quase coladas no cabecalho), e a
       emenda encolheu junto -- 14px no A4 em pe. A barra de forca do tema
       continua indo ate 50%, mas so tem efeito visivel ate o recuo. Emenda
       grande e ofertas coladas sao os MESMOS pixels; nao da para ter os dois. */
    height: min(calc(var(--header-height) * var(--forca-degrade, .26)), var(--products-pad-y));
    margin-top: -1px;      /* cobre a fresta de arredondamento entre os dois */
    pointer-events: none;

    /* POR CIMA DOS CARTÕES, E NÃO POR BAIXO.

       Estava em `z-index: 0`, com o comentário dizendo que a emenda se lia
       "no vão entre o cabeçalho e a primeira linha de ofertas". Isso valia
       quando havia vão. No cartaz, e em qualquer encarte cujo primeiro cartão
       encoste no cabeçalho, não há vão nenhum: o cartão tem fundo próprio,
       vem DEPOIS no HTML e, com `z-index: auto`, pinta por cima. O degradê
       existia e ficava escondido debaixo dele — medido: emenda de 227 a 258,
       cartão começando em 228.

       Acima de 5, que é o `z-index` do cartão sob o mouse: senão passar o
       mouse por cima faria a emenda piscar durante a edição.

       Não cobre o cabeçalho porque começa exatamente onde ele termina, e não
       atrapalha clique nenhum por causa do `pointer-events: none` acima. */
    z-index: 6;
}

/* --------------------------------------------------- painel da aba Temas */

.temas-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.temas-busca {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--pane-borda, #e3e8e5);
    border-radius: 10px;
    padding: 0 11px;
}

.temas-busca i {
    color: #9aa3a9;
    font-size: 12.5px;
}

.temas-busca input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    padding: 10px 0;
    min-width: 0;
}

.temas-limpar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--vermelho-100);
    color: var(--vermelho);
    border: 1px solid #f2ccd3;
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.temas-limpar:hover { background: #f7dde1; }

.temas-grupo { margin-bottom: 18px; }

.temas-grupo h4 {
    margin: 0 0 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--verde-800);
}

/* Uma coluna: a arte é larga (mais de 4:1) e, em duas colunas dentro do
   painel, a miniatura ficaria com a altura de uma linha de texto — não daria
   para distinguir um tema do outro, que é justamente o que a pessoa precisa
   fazer aqui. */
.temas-grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.tema-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #f4f6f5;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    transition: border-color 0.16s ease;
}

/* A miniatura remonta o tema: fundo como imagem de fundo, selo por cima e à
   esquerda — a mesma leitura que a pessoa vai ver no encarte. */
.tema-item-arte {
    display: flex;
    align-items: center;
    aspect-ratio: 1200 / 280;
    background-size: cover;
    background-position: center;
    padding: 0 6%;
}

.tema-item-arte img {
    display: block;
    max-width: 84%;
    max-height: 70%;
    width: auto;
}

/* A legenda é escolhida por CLASSE, e não por `.tema-item span`.

   O cartão passou a ter dois filhos — a arte e o nome — e a regra por tipo de
   elemento pegava os dois: a arte virava `position: absolute` junto com a
   legenda, o cartão ficava sem nada em fluxo e a lista de temas desabava numa
   fileira de riscos. */
.tema-item-nome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 8px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
}

.tema-item:hover { border-color: var(--verde-600); }

.tema-item:focus-visible {
    outline: 3px solid rgba(6, 167, 92, 0.4);
    outline-offset: 1px;
}

/* O escolhido ganha borda verde e um visto: cor sozinha não responde "qual
   está no encarte" para quem não distingue verdes. */
.tema-item.escolhido {
    border-color: var(--verde-700);
}

.tema-item.escolhido::after {
    content: '\2713';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--verde-700);
    color: #fff;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    font-weight: 700;
}

.temas-aviso {
    padding: 14px 4px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* ==========================================================================
   TELA DE TEMAS — cadastro e catálogo

   É daqui que a aba Temas do editor se alimenta. O painel de envio fica
   recolhido porque quem entra nesta tela quase sempre vem OLHAR o catálogo, e
   não cadastrar: deixar o formulário aberto empurraria as artes para baixo da
   dobra em toda visita.
   ========================================================================== */

.envio-tema {
    background: #fff;
    border: 1px solid var(--verde-100);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 22px;
}

.envio-linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.envio-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3d4455;
}

/* O <select> entra na MESMA regra do <input>.

   Deixado de fora, ele fica com a aparencia padrao do navegador: medido nesta
   tela, 19px de altura e fonte 13.3px ao lado de campos de 43px e fonte 14 —
   parecia um controle de outro sistema colado no formulario. E fonte abaixo de
   16px faz o iPhone dar zoom ao focar, o que empurra a tela de lado. */
.envio-campo input,
.envio-campo select {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid #e3e8e5;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    background: #fcfcfe;
    color: inherit;
}

.envio-campo select { height: 43px; cursor: pointer; }

.envio-campo input:focus,
.envio-campo select:focus {
    outline: none;
    border-color: var(--verde-600);
    box-shadow: 0 0 0 3px rgba(6, 167, 92, 0.16);
}

/* O alvo de escolha É a prévia: depois de escolher, a arte ocupa o lugar do
   convite, que é a confirmação de que o arquivo certo entrou. */
.envio-alvo {
    display: block;
    width: 100%;
    border: 2px dashed var(--verde-100);
    border-radius: 12px;
    background: var(--verde-050);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

.envio-alvo:hover {
    border-color: var(--verde-600);
    background: var(--verde-100);
}

.envio-alvo img {
    display: block;
    width: 100%;
    height: auto;
}

.envio-alvo-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 26px 18px;
    text-align: center;
}

/* As duas peças lado a lado, na proporção em que existem: o fundo é a faixa
   inteira, o selo é só o pedaço da esquerda. Dar a mesma largura aos dois
   sugeriria que são equivalentes. */
.envio-pecas {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 720px) {
    .envio-pecas { grid-template-columns: 1fr; }
}

/* O selo é opcional, e precisa poder ser desfeito: sem o X, quem clicasse por
   engano ficaria com um arquivo escolhido sem caminho de volta. */
.envio-arquivo-selo { position: relative; }

.envio-alvo-selo {
    /* O xadrez mostra a transparência: um selo exportado com fundo branco
       aparece aqui como um retângulo chapado, antes de ir para o encarte. */
    background:
        linear-gradient(45deg, #eef2f0 25%, transparent 25%, transparent 75%, #eef2f0 75%),
        linear-gradient(45deg, #eef2f0 25%, transparent 25%, transparent 75%, #eef2f0 75%),
        var(--branco);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.envio-alvo-selo:hover { background-color: var(--verde-050); }

.envio-tirar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(2, 59, 33, 0.78);
    color: var(--branco);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.envio-tirar:hover { background: var(--vermelho); }

.envio-opcional {
    font-weight: 500;
    color: #6b7280;
    font-size: 12px;
}

.envio-alvo-vazio i { font-size: 22px; color: var(--verde-700); }
.envio-alvo-vazio b { font-size: 14px; color: var(--verde-800); }
.envio-alvo-vazio small { font-size: 12px; color: #6b7280; line-height: 1.45; max-width: 46ch; }

.envio-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.aviso-tema {
    display: none;
    margin-top: 12px;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13.5px;
}

.aviso-tema.visivel { display: block; }
.aviso-tema.bom { background: var(--verde-100); color: var(--verde-800); border: 1px solid #c9e8da; }
.aviso-tema.ruim { background: var(--vermelho-100); color: var(--vermelho); border: 1px solid #f2ccd3; }

/* A arte é bem larga (mais de 4:1). Duas colunas já deixam a miniatura alta o
   bastante para se distinguir uma da outra; três a espremeriam. */
.catalogo-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.catalogo-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f4f6f5;
    border: 1px solid #e8ecea;
    line-height: 0;
}

/* O cartão inteiro leva ao editor. O botão de apagar fica por cima dele, e
   por isso precisa de `z-index`: sem ele, o link cobriria a lixeira. */
.catalogo-abrir {
    display: block;
    text-decoration: none;
    color: inherit;
}

.catalogo-item:hover { border-color: var(--verde-600); }

.catalogo-item:focus-within {
    outline: 3px solid rgba(6, 167, 92, 0.4);
    outline-offset: 1px;
}

.catalogo-arte {
    position: relative;   /* âncora do selo de exclusivo */
    display: flex;
    align-items: center;
    aspect-ratio: 1200 / 280;
    background-size: cover;
    background-position: center;
    padding: 0 5%;
}

.catalogo-selo {
    display: block;
    max-width: 82%;
    max-height: 70%;
    width: auto;
}

.catalogo-nome {
    display: block;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2430;
    background: #fff;
}

.catalogo-apagar {
    position: absolute;
    z-index: 2;   /* acima do link que cobre o cartão inteiro */
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--vermelho);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    line-height: 1;
}

.catalogo-apagar:hover { background: var(--vermelho); color: #fff; }

@media (max-width: 720px) {
    .envio-linha { grid-template-columns: 1fr; }
    .catalogo-grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FORMATO DO ENCARTE — botão no topo

   Era uma tira vertical de miniaturas encostada no painel de edição, ocupando
   uma coluna inteira da área de trabalho o tempo todo — para uma escolha que
   se faz uma vez por encarte. Virou botão: mostra o formato atual e abre a
   lista só na hora de trocar.

   A MESMA tira entra aqui dentro (o script a move), então não há duas listas
   para divergirem. No celular ela continua indo para a sub-aba do painel.
   ========================================================================== */

.toolbar-formato {
    position: relative;
}

.tool-btn-seta {
    font-size: 9px;
    opacity: 0.7;
    margin-left: 1px;
}

.menu-formatos {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 13px;
    box-shadow: 0 14px 34px rgba(2, 59, 33, 0.22);
    padding: 12px;
    min-width: 268px;
}

.menu-formatos-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--verde-800);
    margin-bottom: 9px;
}

/* Dentro do menu a tira deixa de ser coluna e vira grade: cinco miniaturas
   empilhadas seriam um menu tão alto quanto a tira que saiu. */
.menu-formatos .format-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.menu-formatos .format-btn {
    width: 100%;
    margin: 0;
    padding: 9px 6px;
    border-radius: 10px;
    background: #f6f8f7;
    border: 2px solid transparent;
}

.menu-formatos .format-btn:hover {
    background: var(--verde-050);
    border-color: var(--verde-100);
}

.menu-formatos .format-btn.active {
    background: var(--verde-050);
    border-color: var(--verde-700);
}

/* A miniatura guarda a proporção real da folha — é o que diferencia A4 em pé
   de A4 deitado sem precisar ler o nome.

   O `width: 100%` com `max-height` que havia aqui era justamente o que tirava
   a proporção: dois limites em eixos separados. O tamanho agora vem da escala
   única calculada em `.format-thumb`; esta regra cuida só da aparência. */
.menu-formatos .format-thumb {
    background: #fff;
    border: 1px solid #d8dedb;
}

.menu-formatos .format-btn.active .format-thumb {
    border-color: var(--verde-700);
}

.menu-formatos .format-nome {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: #3d4455;
    line-height: 1.2;
}

.menu-formatos .format-btn.active .format-nome {
    color: var(--verde-800);
}

/* No celular o botão do topo some: lá a escolha vive na sub-aba do painel, que
   é onde a mão alcança sem esticar até a barra. */
@media (max-width: 860px) {
    .toolbar-formato { display: none; }
}

/* ===========================================================================
   PAINEL DO ADMINISTRADOR
   =========================================================================== */

.admin-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.kpi-icon-alerta {
    background: var(--vermelho-100);
    color: var(--vermelho);
}

/* --- Abas ---------------------------------------------------------------- */

.admin-abas {
    display: flex;
    gap: 4px;
    margin: 22px 0 16px;
    border-bottom: 2px solid #e6eae8;
    /* Só a horizontal rola. Com `overflow-x: auto` sozinho, o eixo vertical
       vira `auto` junto — e a margem negativa de -2px das abas deixava o
       conteúdo 2px mais alto que a caixa, o bastante para o Windows desenhar
       uma barra de rolagem vertical com setinhas no canto da faixa. */
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-aba {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: none;
    background: none;
    font: 600 14px inherit;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    /* A borda de baixo desenha a aba ativa. Ela existe sempre, transparente,
       senão a linha apareceria e o texto pularia 2px ao trocar de aba. */
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.admin-aba:hover { color: var(--verde-800); }

.admin-aba.ativa {
    color: var(--verde-800);
    border-bottom-color: var(--verde-700);
}

.admin-painel-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.admin-busca { max-width: 380px; flex: 1 1 260px; }

.admin-filtros { display: flex; gap: 16px; flex-wrap: wrap; }

.admin-filtro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #4b5563;
    cursor: pointer;
}

.admin-filtro input { accent-color: var(--verde-700); }

/* --- Cartão de formulário ------------------------------------------------ */

.admin-cartao {
    background: var(--branco);
    border: 1px solid #e8ecea;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.admin-cartao h3 {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--verde-900);
}

.cupom-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.envio-campo-acao { display: flex; align-items: flex-end; }

.campo-dica {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}

/* --- Tabela -------------------------------------------------------------- */

.admin-tabela-area {
    background: var(--branco);
    border: 1px solid #e8ecea;
    border-radius: 14px;
    /* A tabela rola sozinha na horizontal. Sem isto, no celular ela empurraria
       a página inteira e a barra lateral sairia de lugar. */
    overflow-x: auto;
}

.admin-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 720px;
}

.admin-tabela th {
    text-align: left;
    padding: 12px 14px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
    border-bottom: 1px solid #e8ecea;
    background: var(--verde-050);
    white-space: nowrap;
}

.admin-tabela td {
    padding: 11px 14px;
    border-bottom: 1px solid #f0f3f1;
    vertical-align: middle;
}

.admin-tabela tbody tr:last-child td { border-bottom: none; }
.admin-tabela tbody tr:hover { background: var(--verde-050); }

.admin-tabela .num { text-align: right; white-space: nowrap; }
.admin-tabela .acoes { text-align: right; white-space: nowrap; }

.admin-tabela td small { color: #6b7280; font-size: 12px; }

/* Bloqueado e desativado ficam apagados, mas legíveis: some da atenção sem
   sumir da tela, que é justamente onde o admin vai procurar para desfazer. */
.linha-bloqueada { opacity: 0.58; }

.codigo-cupom {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.5px;
    color: var(--verde-900);
}

.esgotado { color: var(--vermelho); font-weight: 600; }

/* --- Selos --------------------------------------------------------------- */

.selo-hier, .selo-estado {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.selo-cliente  { background: var(--verde-100); color: var(--verde-800); }
.selo-vendedor { background: #FFF4C2;          color: var(--amarelo-texto); }
.selo-rede     { background: #E5EEFB;          color: #1B4B8F; }

.selos-situacao { display: flex; gap: 6px; flex-wrap: wrap; }

.selo-emdia     { background: var(--verde-100);    color: var(--verde-800); }
.selo-devendo   { background: var(--vermelho-100); color: var(--vermelho); }
.selo-bloqueado { background: #E9EAEC;             color: #4b5563; }

/* Marcado à mão ganha uma borda tracejada: um "Em dia" com a data vencida,
   sem nenhum sinal, parece defeito do sistema em vez de decisão de alguém. */
.selo-namao { border: 1px dashed currentColor; }

/* --- Botões de linha ----------------------------------------------------- */

.botao-linha {
    width: 30px;
    height: 30px;
    border: 1px solid #e0e5e2;
    border-radius: 8px;
    background: var(--branco);
    color: var(--verde-800);
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.botao-linha + .botao-linha { margin-left: 6px; }

.botao-linha:hover {
    background: var(--verde-100);
    border-color: var(--verde-600);
}

.botao-linha-perigo:hover {
    background: var(--vermelho-100);
    border-color: var(--vermelho);
    color: var(--vermelho);
}

/* --- Ficha do usuário ---------------------------------------------------- */

.ficha-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--verde-050);
    border-radius: 12px;
}

.ficha-dados dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
    margin-bottom: 2px;
}

.ficha-dados dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2430;
    overflow-wrap: anywhere;
}

.ficha-bloqueio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 13px 15px;
    border: 1px solid var(--vermelho-100);
    background: #FEF7F8;
    border-radius: 12px;
    cursor: pointer;
}

.ficha-bloqueio input { margin-top: 3px; accent-color: var(--vermelho); }
.ficha-bloqueio b { display: block; font-size: 13.5px; color: var(--vermelho); }
.ficha-bloqueio small { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; line-height: 1.45; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 20px;
}

/* Selo de tema exclusivo, sobre a miniatura da arte. */
.selo-exclusivo {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(2, 59, 33, 0.82);
    color: var(--branco);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

/* Botão principal para fundo CLARO.
   
   O `.botao-principal` é branco com texto verde: ele nasceu para a faixa verde
   da saudação, e num cartão branco fica branco sobre branco — medido nesta
   tela, fundo rgb(255,255,255) sobre cartão rgb(255,255,255), visível só pelo
   texto. Onde o fundo é claro, o botão é que precisa ser o verde. */
.botao-solido {
    background: var(--verde-700);
    color: var(--branco);
    border: none;
    border-radius: 12px;
    padding: 13px 20px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    transition: background-color 0.16s ease, transform 0.08s ease;
}

.botao-solido:hover { background: var(--verde-800); }
.botao-solido:active { transform: translateY(1px); }

.botao-solido:focus-visible {
    outline: 3px solid var(--amarelo);
    outline-offset: 2px;
}

.botao-solido:disabled {
    background: #9fb5aa;
    cursor: progress;
}

/* A ficha do usuário é mais alta que o modal de perfil: tem os dados de
   leitura, quatro campos e o bloco de bloqueio. Ganha mais largura e um corpo
   que rola sozinho, senão em tela baixa o botão Salvar fica fora do alcance. */
.ficha-modal {
    max-width: 640px;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    padding: 26px 26px 0;
}

.ficha-modal .modal-body {
    overflow-y: auto;
    padding-bottom: 4px;
}

.ficha-modal .modal-footer {
    flex: 0 0 auto;
    padding: 16px 0 22px;
    border-top: 1px solid #eef1ef;
    margin-top: 16px;
}

/* ===========================================================================
   MODO CARTAZ
   =========================================================================== */

/* Oferta do Dia, de Eduardo Luiz Ramalho Sobreira (IFPE, 2014).
   Uso comercial liberado pelo autor; não pode ser vendida nem modificada —
   por isso o .ttf vai original, sem conversão para woff2. Ver
   public/fonts/LEIA-ME.txt.

   `font-display: block` e não `swap`: aqui a fonte É o desenho do cartaz.
   Piscar em Arial e trocar depois estragaria a única coisa que a peça tem. */
/* Motel Xenia Bold, de Emil Bertell (Fenotype). É a fonte do PREÇO no cartaz.

   Situação de licença DIFERENTE da Oferta do Dia: o arquivo não traz termo de
   uso nenhum, só "All rights reserved", e a Fenotype é fundição comercial.
   Servir a fonte aqui é distribuí-la. Ver public/fonts/LEIA-ME.txt. */
@font-face {
    font-family: 'Motel Xenia';
    src: url('fonts/motel-xenia-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Oferta do Dia';
    src: url('fonts/Oferta-do-Dia.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* --- A chave, no topo da aba Produtos ------------------------------------ */

.modo-peca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--verde-050);
    border: 1px solid var(--verde-100);
    border-radius: 12px;
}

.modo-chave { display: flex; align-items: center; gap: 10px; }

/* Os dois lados ficam escritos o tempo todo, e o aceso diz onde se está.
   Uma chave sozinha com um rótulo só ("Cartaz") obriga a deduzir o que o
   desligado significa. */
.modo-rotulo {
    font-size: 13px;
    font-weight: 700;
    color: #8a9691;
    transition: color 0.16s ease;
}

.modo-rotulo.ativo { color: var(--verde-800); }

.chave {
    position: relative;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #c9d3ce;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.chave[aria-checked="true"] { background: var(--verde-700); }

.chave-bolinha {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--branco);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease;
}

.chave[aria-checked="true"] .chave-bolinha { transform: translateX(20px); }

.chave:focus-visible {
    outline: 3px solid rgba(6, 167, 92, 0.4);
    outline-offset: 2px;
}

.modo-campo { display: flex; align-items: center; gap: 8px; }

.modo-campo > span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--verde-800);
}

.modo-campo select {
    padding: 7px 10px;
    border: 1.5px solid #e3e8e5;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    background: var(--branco);
    cursor: pointer;
}

.modo-recado {
    flex-basis: 100%;
    margin: 0;
    font-size: 12px;
    color: #5c6b65;
}

/* --- A folha em modo cartaz ---------------------------------------------- */

/* Um produto por folha, ocupando o que o cabeçalho e o rodapé deixam. O
   `layout-1` já existia e dava conta de um produto — o que o cartaz muda é a
   escala: aqui o produto não divide espaço com ninguém. */
.offer-container.modo-cartaz .product-item {
    padding: 2% 4%;
}

.offer-container.modo-cartaz .product-name {
    font-size: 64px;
    line-height: 1.05;
}

.offer-container.modo-cartaz .product-image-wrapper { flex: 1 1 auto; }

.offer-container.modo-cartaz .price-integer { font-size: 250px; }
.offer-container.modo-cartaz .price-decimal { font-size: 110px; }
.offer-container.modo-cartaz .price-prefix   { font-size: 76px; }
.offer-container.modo-cartaz .price-unit     { font-size: 44px; }


/* --- Cartazista -----------------------------------------------------------

   A disposição, na ordem em que se lê:

     OFERTA      vermelho sobre faixa amarela
     ARROZ       preto, uma palavra por linha
     CAMIL
     5KG         preto, pequeno
     ---------   filete
     24,99       vermelho sobre faixa amarela

   Folha branca, sem foto e sem o cabeçalho do encarte. É o cartaz de gôndola
   escrito à mão: o que faz o preço ser lido do outro lado do corredor é o
   vermelho contra o branco, e a faixa amarela atrás dele.

   Os TAMANHOS não estão aqui — são calculados no script a partir da altura
   real da folha, porque cada formato tem uma (1485 no A4 em pé, 1050 no
   deitado, 1920 no story) e pixel fixo no CSS só acerta num deles.
   -------------------------------------------------------------------- */

.offer-container.modo-cartazista .product-image-wrapper { display: none; }

/* No cartazista o cabeçalho do encarte sai: a folha começa na palavra OFERTA,
   que é do próprio cartaz. */
/* No cartaz, a folha e so do produto: cabecalho do encarte, emenda e rodape
   saem. Um cartaz de gondola nao carrega validade, redes sociais nem formas de
   pagamento — e, com o rodape fora, a area util passa a ser exatamente a folha
   menos o recuo da lista, que e o que torna o tamanho igual em toda tela. */
.offer-container.modo-cartazista .offer-header,
.offer-container.modo-cartazista .tema-degrade,
.offer-container.modo-cartazista .offer-illustrative,
.offer-container.modo-cartazista .offer-footer { display: none !important; }

.offer-container.modo-cartazista .products-container,
.offer-container.modo-cartazista .product-item {
    background: #ffffff !important;
    background-image: none !important;
}

/* OFERTA encostada no topo, preço encostado embaixo, e o que sobra vira
   respiro no meio. Centralizado, tudo se amontoava no miolo e deixava faixas
   de papel branco em cima e embaixo. */
.offer-container.modo-cartazista .product-item {
    justify-content: space-between;
    padding: 3% 4%;
}

/* O `.product-name` original continua no documento, invisível: a lista do
   painel, o formulário e a exportação leem aquele nó. O `.product-medida`
   também — ele é a fonte do texto, não o que se vê. */
.offer-container.modo-cartazista .product-name,
.offer-container.modo-cartazista .product-medida { display: none; }

.cartaz-topo, .cartaz-nome, .cartaz-medida, .cartaz-regua { display: none; }

/* O cabecalho ocupa TODO o espaco entre o topo e o preco, e dentro dele o
   miolo (nome, medida, filete) fica centrado. Antes o cabecalho encolhia ao
   tamanho do conteudo e tudo grudava embaixo da palavra OFERTA, deixando o
   vao inteiro entre o filete e o preco. */
.offer-container.modo-cartazista .product-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1 1 auto;
}

.offer-container.modo-cartazista .cartaz-miolo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cartaz-miolo { display: none; }

/* --- A faixa amarela ---
   
   É a cor de fundo do PRÓPRIO texto, com recuo, e não um retângulo desenhado
   atrás. Assim ela acompanha a palavra sozinha, sem ninguém ter de calcular
   onde ela começa e termina — e o html2canvas desenha cor de fundo sem
   discussão, ao contrário de pseudo-elemento, que ele só suporta em parte.
   
   A inclinação de meio grau é o que tira o ar de etiqueta impressa e deixa
   com cara de pincelada. */
.offer-container.modo-cartazista .cartaz-topo,
.offer-container.modo-cartazista .product-price-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    /* !important porque a caixa do preço nasce com a cor do balão escrita no
       atributo style — e estilo inline vence folha de estilo. */
    background: none !important;
    background-image: none !important;
    padding: 0.06em 0.5em;
    /* A inclinação de meio grau saiu com o retângulo: ela existia para
       DISFARÇAR de pincelada o que era uma etiqueta. Agora a borda irregular
       faz esse trabalho, e girar por cima só desalinharia o texto. */
    transform: none;
}

/* A faixa do preço sai pelo painel; a do OFERTA fica. */
.offer-container.modo-cartazista.sem-faixa-preco .product-price-box {
    background: none !important;
    padding: 0 !important;
    transform: none;
}

.offer-container.modo-cartazista .cartaz-palavra {
    font-family: 'Oferta do Dia', Impact, 'Arial Black', sans-serif;
    color: var(--cartaz-palavra, #E30613);
    line-height: 1;
    white-space: nowrap;
}

.offer-container.modo-cartazista .cartaz-nome {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-family: 'Oferta do Dia', Impact, 'Arial Black', sans-serif;
    color: var(--cartaz-nome, #000);
    line-height: 0.86;
    text-align: center;
    /* Palavra maior que a folha é cortada, não quebrada: "REFRIGERANTE"
       partido em duas linhas viraria outro produto. O script encolhe antes de
       chegar aqui; isto é a rede de segurança.

       O CORTE NÃO PODE PEGAR A ALTURA DA LETRA. Com a entrelinha de 0,86 o
       desenho das letras da primeira linha passa do topo da caixa, e o
       `overflow: hidden` raspava reto o alto do A, dos R e do Z de "ARROZ".
       Cortar só nos lados (`overflow-x: clip`) resolvia na tela, mas o
       html2canvas corta os dois eixos e o arquivo baixado saía raspado do
       mesmo jeito. Então a caixa ganha folga em cima e embaixo, devolvida
       pela margem negativa: o conteúdo não sai do lugar, e a área de corte
       passa a ter altura para a letra inteira. Em % (da largura), porque a
       letra é dimensionada pela folha e o corpo da caixa não diz nada. */
    white-space: nowrap;
    overflow: hidden;
    padding: 4% 0;
    margin: -4% 0;
}

.offer-container.modo-cartazista .cartaz-nome-linha { display: block; }

.offer-container.modo-cartazista .cartaz-medida {
    display: block;
    font-family: 'Oferta do Dia', Impact, 'Arial Black', sans-serif;
    color: var(--cartaz-nome, #000);
    line-height: 1.1;
    white-space: nowrap;
}

.offer-container.modo-cartazista .cartaz-medida[hidden] { display: none; }

/* O filete que separa a descrição do preço: fino e discreto, no fim do
   cabeçalho, logo acima do preço. A espessura e a margem vêm do script, em
   pixel da folha. */
.offer-container.modo-cartazista .cartaz-regua {
    display: block;
    flex: 0 0 auto;
    width: 82%;
    min-height: 2px;
    background: var(--cartaz-nome, #000);
    opacity: .7;
    border-radius: 999px;
}

.offer-container.modo-cartazista .product-body {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
}

/* O balão vermelho do encarte não existe aqui: a moldura do preço é a faixa
   amarela, e o número é o que se vê. */
.offer-container.modo-cartazista .product-price-box {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: auto;
    color: var(--cartaz-preco, #E30613);
}

/* Todo SVG filho da caixa de preco some no cartaz -- menos a pincelada, que
   agora E a forma da caixa. A regra foi escrita para o trapezio do balao, que
   e o unico svg que existia ali; sem a excecao ela apanhava a pincelada junto
   e o preco saia sem faixa nenhuma. */
.offer-container.modo-cartazista .product-price-box > svg:not(.cartaz-pincelada),
.offer-container.modo-cartazista .price-balloon { display: none !important; }

.offer-container.modo-cartazista .price-content {
    font-family: 'Oferta do Dia', Impact, 'Arial Black', sans-serif;
    /* flex-start, e nao baseline: e o grupo dos centavos que se estica ate a
       altura do numero, e com baseline ele nao teria altura para esticar. */
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    color: inherit;
    width: auto;
}

/* A fonte vai nos FILHOS, nao so no .price-content: o .price-integer e o
   .price-decimal tem font-family propria no CSS do encarte (Bebas Neue), e
   regra no filho vence regra no pai. */
.offer-container.modo-cartazista .price-prefix,
.offer-container.modo-cartazista .price-integer,
.offer-container.modo-cartazista .price-decimal,
.offer-container.modo-cartazista .price-unit {
    font-family: 'Motel Xenia', 'Oferta do Dia', Impact, 'Arial Black', sans-serif !important;
    color: inherit;
    text-shadow: none;
    line-height: 0.88;
}

/* Os centavos no ALTO e a unidade na BASE, nas duas pontas da altura do
   número — como no exemplo que você mandou: o "99" encostado no topo do
   "24" e o "CADA" descendo até a linha em que o "24" se apoia.

   O align-self stretch dá ao grupo a altura do número, que é o item mais alto
   da linha, e o space-between joga um para cada ponta. Só empilhados, os dois
   ficavam grudados logo abaixo do topo e sobrava um vão morto embaixo. */
.offer-container.modo-cartazista .price-decimal-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    margin-top: 0;
}

/* O "R$" fica na esquerda, no alto do número, e a unidade de venda (KG, UN,
   CADA) embaixo dos centavos. São coisas diferentes da linha do peso: "5KG" é
   o tamanho da embalagem, "KG" aqui é o preço POR quilo. */
.offer-container.modo-cartazista .price-prefix {
    align-self: flex-start;
    margin-right: 0.08em;
    line-height: 1;
}

.offer-container.modo-cartazista .price-unit {
    align-self: flex-start;
    line-height: 1;
}

.offer-container.modo-cartazista .product-obs {
    font-family: 'Oferta do Dia', Impact, 'Arial Black', sans-serif;
    color: var(--cartaz-nome, #000);
}

/* A chave Encarte/Cartaz na barra do editor, que é verde escura. */
.modo-chave-topo { gap: 8px; }

.modo-chave-topo .modo-rotulo {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

.modo-chave-topo .modo-rotulo.ativo { color: var(--branco); }

.modo-chave-topo .chave { background: rgba(255, 255, 255, 0.3); }
.modo-chave-topo .chave[aria-checked="true"] { background: var(--amarelo); }
.modo-chave-topo .chave[aria-checked="true"] .chave-bolinha { background: var(--verde-900); }

.modo-filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-basis: 100%;
    font-size: 12.5px;
    color: var(--verde-800);
    cursor: pointer;
}

.modo-filtro input { accent-color: var(--verde-700); }



/* A linha esticada cresce a partir do centro: a caixa continua com a largura
   de antes, então sem isto ela escaparia para um lado só. */
.offer-container.modo-cartazista .cartaz-nome-linha {
    transform-origin: center center;
}

/* No cartaz a lista não tem recuo próprio: quem afasta o conteúdo das bordas é
   o recuo do produto, que é dado em porcentagem da folha.

   O recuo da lista vem das classes layout-N, que só entram depois de o editor
   contar os produtos da folha — media 40px numa renderização e 30px na outra,
   e era isso que fazia o mesmo cartaz sair de tamanhos diferentes no celular e
   no computador. Zerado, a área útil passa a ser a folha, que é um número fixo
   por formato. */
.offer-container.modo-cartazista .products-container {
    /* Bloco, e nao grade.

       A lista do encarte e uma grade de 12 colunas, e o layout-1 da seis delas
       ao produto — metade da folha. No encarte isso faz sentido, porque a
       grade tambem serve a 8 produtos; no cartaz ha UM produto e ele e a folha
       inteira. Trocando de formato, o produto continuava com a largura da
       grade antiga e o cartaz ficava espremido num canto ate alguem recarregar
       a pagina. */
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
}

.offer-container.modo-cartazista .product-item {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

/* ===========================================================================
   FAIXAS DE TEMAS NA TELA INICIAL
   =========================================================================== */

.faixa-temas { margin-bottom: 26px; }

.faixa-cabeca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* O traço vertical antes do título, que separa uma faixa da outra sem
   precisar de linha divisória. */
.faixa-cabeca h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    color: var(--verde-900);
}

.faixa-cabeca h2::before {
    content: '';
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: var(--verde-700);
}

.faixa-tudo {
    font-size: 13px;
    font-weight: 600;
    color: var(--verde-700);
    text-decoration: none;
    white-space: nowrap;
}

.faixa-tudo:hover { text-decoration: underline; }

.faixa-corpo { position: relative; }

/* --- O trilho ------------------------------------------------------------ */

.faixa-trilho {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    /* Cada capa para no lugar depois da rolagem: sem isto, uma faixa que rola
       com o dedo termina sempre com meia capa cortada na borda. */
    scroll-snap-type: x proximity;
    padding: 2px 2px 8px;
    /* A barra some, mas a rolagem fica: no celular é o dedo que rola, e no
       computador são as setas. */
    scrollbar-width: none;
}

.faixa-trilho::-webkit-scrollbar { display: none; }

/* --- A capa de cada tema ------------------------------------------------- */

.capa-tema {
    flex: 0 0 auto;
    width: 250px;
    scroll-snap-align: start;
    border-radius: 14px;
    overflow: hidden;
    background: var(--branco);
    border: 1px solid #e8ecea;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease, transform 0.12s ease;
}

.capa-tema:hover {
    border-color: var(--verde-600);
    transform: translateY(-2px);
}

.capa-tema:focus-visible {
    outline: 3px solid rgba(6, 167, 92, 0.4);
    outline-offset: 2px;
}

.capa-arte {
    position: relative;
    display: flex;
    align-items: center;
    /* A mesma proporção da faixa do encarte: a capa mostra o tema como ele vai
       sair, não uma miniatura de outra forma. */
    aspect-ratio: 1200 / 280;
    background-size: cover;
    background-position: center;
    padding: 0 5%;
}

.capa-selo {
    display: block;
    max-width: 80%;
    max-height: 70%;
    width: auto;
}

.capa-nome {
    display: block;
    padding: 11px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2430;
    /* Nome comprido não pode empurrar a altura da capa e desalinhar a fileira. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.capa-novo, .capa-exclusivo {
    position: absolute;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1.6;
}

.capa-novo {
    right: 8px;
    background: var(--amarelo);
    color: var(--amarelo-texto);
}

.capa-exclusivo {
    left: 8px;
    background: rgba(2, 59, 33, 0.82);
    color: var(--branco);
}

/* --- As setas ------------------------------------------------------------ */

.faixa-seta {
    position: absolute;
    top: calc(50% - 22px);
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid #e0e5e2;
    border-radius: 50%;
    background: var(--branco);
    color: var(--verde-800);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.faixa-seta:hover { background: var(--verde-050); border-color: var(--verde-600); }

.faixa-seta-esq { left: -8px; }
.faixa-seta-dir { right: -8px; }

/* No celular a faixa rola com o dedo; as setas só atrapalhariam o alcance. */
@media (max-width: 760px) {
    .faixa-seta { display: none; }
    .capa-tema { width: 210px; }
}

/* A pergunta de guardar a figura na galeria, no removedor de fundo. */
.bg-editor-guardar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--verde-100);
    background: var(--verde-050);
    border-radius: 10px;
    cursor: pointer;
}

.bg-editor-guardar input { margin-top: 3px; accent-color: var(--verde-700); }
.bg-editor-guardar b { display: block; font-size: 13px; color: var(--verde-800); }
.bg-editor-guardar small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   O removedor de fundo no celular.

   Medido numa tela de 375x812 com a figura vinda da busca: o título ocupava
   170px em duas linhas de 20px, o palco era um retângulo 16:10 fixo que não
   acompanha a forma da figura — sobrava xadrez em volta —, e a explicação do
   rodapé saía cortada pela borda de baixo. Quase metade da janela gasta em
   moldura, com a figura pequena no meio.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .modal-content.bg-editor-modal {
        width: 96%;
        /* Sem isto o modal cresce com o conteúdo e o rodapé fica fora da tela. */
        max-height: 92dvh;
        display: flex;
        flex-direction: column;
    }

    .modal-content.bg-editor-modal .modal-header {
        padding: 12px 14px;
        flex: 0 0 auto;
    }

    .modal-content.bg-editor-modal .modal-header h2 {
        font-size: 15px;
        line-height: 1.25;
        /* Cabe numa linha e diz a mesma coisa. */
        max-width: 84%;
    }

    .modal-content.bg-editor-modal .modal-body {
        padding: 14px;
        overflow-y: auto;
        flex: 1 1 auto;
    }

    /* O palco passa a ser uma fatia da JANELA, e não uma proporção fixa: a
       figura pode ser alta ou larga, e quem manda no tamanho é a tela. */
    .bg-editor-canvas {
        aspect-ratio: auto;
        height: 26dvh;
        /* Piso baixo de proposito: quem manda na altura e o script, que a tira
           da forma da figura. Um piso alto devolvia o vazio que o calculo
           tinha acabado de tirar. */
        min-height: 90px;
        /* O teto de 190px vinha de quando aqui só se OLHAVA o recorte. Agora se
           desenha com o dedo, e 190px de palco é pouco para acertar a alça de
           uma sacola. O espaço a mais é figura, não vazio: o script dá à tela
           os dois lados de uma vez, então ela cresce sem esticar. */
        max-height: min(34dvh, 260px);
    }

    .bg-editor-canvas img {
        max-width: 96%;
        max-height: 96%;
    }

    .bg-editor-layout { gap: 14px; }
    .bg-editor-actions { gap: 10px; }

    /* A explicação é para quem está aprendendo a ferramenta; no celular ela
       empurrava os botões para fora da tela. Fica menor e por último. */
    .bg-editor-hint { font-size: 11px; line-height: 1.4; }
}

/* ===========================================================================
   REMOVEDOR DE FUNDO — a aba refeita

   Era uma pilha de botões soltos: dois métodos de recorte em linhas separadas,
   um bloco "Ajustes finos" com dois controles deslizantes que pediam entender
   "brilho mínimo" e "tolerância de cor", e um parágrafo no rodapé explicando
   os dois métodos de uma vez. Nada dizia em que ordem fazer as coisas.

   Agora são dois passos numerados: a máquina tenta, a mão corrige.
   =========================================================================== */

.bg-passo {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    border: 1px solid #e8ecea;
    border-radius: 12px;
    background: var(--branco);
}

.bg-passo-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--verde-900);
}

.bg-passo-num {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--verde-700);
    color: var(--branco);
    font-size: 11px;
    font-weight: 800;
}

/* --- Passo 1: os dois métodos, lado a lado ------------------------------- */

.bg-passo-opcoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Cada método diz o que é e quando usar, no próprio botão. A explicação
   estava num parágrafo no rodapé, longe da escolha que ela explica. */
.bg-metodo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 8px;
    border: 1.5px solid #e3e8e5;
    border-radius: 10px;
    background: var(--verde-050);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

.bg-metodo:hover:not(:disabled) { border-color: var(--verde-600); background: var(--verde-100); }
.bg-metodo:disabled { opacity: 0.6; cursor: progress; }
.bg-metodo i { font-size: 16px; color: var(--verde-700); }
.bg-metodo b { font-size: 13px; color: var(--verde-900); }
.bg-metodo small { font-size: 10.5px; color: #6b7280; line-height: 1.3; }

/* --- Passo 2: pincel e borracha ------------------------------------------ */

.bg-ferramentas {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
}

.bg-ferramenta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1.5px solid #e3e8e5;
    border-radius: 10px;
    background: var(--branco);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.bg-ferramenta:hover:not(:disabled) { border-color: var(--verde-600); }

/* A ferramenta escolhida fica CHEIA, não só com a borda grossa: passando a
   mão sobre a figura não dá para olhar duas vezes para saber se se está
   apagando ou trazendo de volta. */
.bg-ferramenta.ativa {
    background: var(--verde-700);
    border-color: var(--verde-700);
    color: var(--branco);
}

.bg-desfazer { grid-column: 3; padding: 9px 12px; }
.bg-desfazer span { display: none; }
.bg-desfazer:disabled { opacity: 0.45; cursor: default; }

.bg-espessura {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #4b5563;
}

.bg-espessura input { flex: 1; accent-color: var(--verde-700); }
.bg-espessura b { min-width: 26px; text-align: right; color: var(--verde-800); }

/* --- O palco vira área de desenho ---------------------------------------- */

#bg-editor-palco { position: relative; }

#bg-editor-tela {
    display: block;
    /* O cursor diz qual ferramenta está na mão antes de encostar na figura. */
    cursor: crosshair;
    /* Sem isto, arrastar o dedo sobre a figura rola a página em vez de riscar. */
    touch-action: none;
    /* Nenhum teto aqui: quem garante que a tela cabe no palco é o script, que
       calcula os dois lados de uma vez. Com max-width e max-height, o navegador
       encolhia um lado e deixava o outro, e a figura saía esticada. */
    max-width: none;
    max-height: none;
}

/* O círculo que mostra a espessura do traço enquanto se mexe no controle. */
.bg-bolha {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed var(--verde-800);
    border-radius: 50%;
    background: rgba(2, 59, 33, 0.12);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.bg-bolha.visivel { opacity: 1; }

/* ==========================================================================
   CADASTRO DO ACERVO (painel do administrador)

   A aba "Produtos" deixou de ser três campos de texto — nome, preço e um
   endereço de imagem colado à mão — e virou cadastro de verdade: descrição e
   até dez figuras, cada uma passando pelo mesmo removedor de fundo do editor.

   A lista de baixo também ganhou desenho. `admin-list`, `list-actions` e
   `btn-danger` estavam no HTML desde sempre sem regra nenhuma no CSS: eram
   marcadores de lista crus, com os botões em cima do texto.
   ========================================================================== */

.admin-nota {
    margin: -4px 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cinza-600, #5b6b63);
}

.campo-opcional {
    font-weight: 400;
    color: var(--cinza-600, #7b8a82);
}

/* --- De onde vem a figura ------------------------------------------------ */

.acervo-fontes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.acervo-busca {
    margin-bottom: 12px;
}

.acervo-busca .figure-results {
    margin-top: 10px;
    max-height: 260px;
    overflow-y: auto;
}

/* --- As figuras escolhidas ----------------------------------------------- */

.acervo-figuras {
    display: grid;
    /* Cinco por fileira no desktop, e as dez cabem em duas. */
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

.acervo-figura {
    position: relative;
    /* Em pé, e nao quadrada: figura de mercearia e garrafa, caixa, pacote —
       quase sempre mais alta que larga. Numa casa quadrada de 92px, uma
       garrafa de 332x1096 vira uma tira de 28px e nao da para julgar se a
       figura presta, que e justamente o que esta tela pede. */
    aspect-ratio: 3 / 4;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 10px;
    background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    overflow: hidden;
}

/* A capa é o que a busca mostra primeiro, então ela se anuncia. */
.acervo-figura.capa {
    border-color: var(--verde-700);
    box-shadow: 0 0 0 2px rgba(5, 133, 73, 0.18);
}

.acervo-figura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.acervo-capa-selo {
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--verde-700);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.acervo-figura-acao {
    position: absolute;
    top: 4px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    color: #fff;
    /* Fundo escuro translúcido: o ícone precisa aparecer tanto sobre uma
       figura clara quanto sobre o xadrez do transparente. */
    background: rgba(17, 24, 39, 0.62);
}

.acervo-figura-acao:hover { background: rgba(17, 24, 39, 0.85); }
.acervo-figura-acao.tirar { right: 4px; }
.acervo-figura-acao.promover { right: 32px; }

.acervo-vazio {
    grid-column: 1 / -1;
    margin: 0;
    padding: 18px 12px;
    border: 1px dashed var(--cinza-200, #e5e7eb);
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--cinza-600, #7b8a82);
}

.acervo-decisao {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

/* --- A lista do que já está cadastrado ----------------------------------- */

.admin-busca {
    margin-bottom: 12px;
}

.admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-list > li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.list-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.list-actions button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
}

.btn-danger {
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    cursor: pointer;
}

.btn-danger:hover { background: #fee2e2; }

/* As figuras do produto em fileira, para se ver de relance quantas ele tem
   e se alguma saiu torta do recorte. */
.acervo-item-figuras {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.acervo-item-figuras img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

.acervo-item-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.acervo-item-texto strong {
    font-size: 14px;
    color: var(--verde-900, #023b21);
    /* Nome comprido não empurra os botões para fora do cartão. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acervo-item-texto small {
    font-size: 12px;
    color: var(--cinza-600, #7b8a82);
}

@media (max-width: 760px) {
    /* No celular as miniaturas da lista roubavam a linha inteira e o nome
       ficava espremido num canto. Cada coisa na sua fileira. */
    .admin-list > li {
        flex-wrap: wrap;
    }

    .acervo-item-figuras {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .acervo-item-texto {
        flex: 1;
    }

    .acervo-figuras {
        grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    }
}

/* --- Automático ou manual ------------------------------------------------
   Os dois caminhos lado a lado, com o que os diferencia escrito embaixo — o
   mesmo desenho dos dois recortes no removedor de fundo. Um seletor solto
   ("modo: [automático ▾]") esconde justamente a informação que decide a
   escolha: quanto trabalho cada um dá.
   ------------------------------------------------------------------------ */

.acervo-modo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.acervo-modo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 8px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    color: var(--verde-900, #023b21);
    transition: border-color .15s, background .15s;
}

.acervo-modo-btn i { font-size: 15px; color: var(--verde-700); }
.acervo-modo-btn b { font-size: 13px; }
.acervo-modo-btn small { font-size: 11px; color: var(--cinza-600, #7b8a82); }
.acervo-modo-btn:hover { border-color: var(--verde-600); }

.acervo-modo-btn.ativo {
    border-color: var(--verde-700);
    background: var(--verde-050, #f2faf6);
    box-shadow: inset 0 0 0 1px var(--verde-700);
}

/* A figura que o recorte automático não deu conta.

   Vai escrito, e não só numa cor de borda: "esta tem fundo" é uma informação,
   e uma borda laranja obrigaria a decorar o que a cor quer dizer. */
.acervo-sem-fundo {
    position: absolute;
    left: 4px;
    top: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #b45309;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    pointer-events: none;
}

.acervo-figura-acao.refazer {
    top: auto;
    right: 4px;
    bottom: 4px;
}

/* A capa tem o selo no canto de baixo à esquerda; o lápis fica do outro lado,
   então os dois não se encostam. */
.acervo-figura.capa .acervo-figura-acao.refazer { right: 4px; }

@media (max-width: 480px) {
    /* Numa miniatura de 76px, três botões de 24px em cima da figura não deixam
       ver a figura. Empilham-se dois a dois. */
    .acervo-modo { grid-template-columns: 1fr; }
}

/* ==========================================================================
   JANELA DE PROJETOS

   Salvar o encarte de agora em cima, a lista do que já existe embaixo. São os
   dois lados da mesma pergunta — "qual encarte é este?" —, e separá-los em
   duas telas obrigaria a fechar uma para lembrar o nome da outra.
   ========================================================================== */

/* O cartao inteiro: neste projeto a classe .modal-content generica nao pinta
   fundo nenhum — cada janela desenha o proprio cartao. Sem isto a lista de
   projetos aparecia flutuando sobre a arte, sem fundo. */
.modal-content.projetos-modal {
    display: flex;
    flex-direction: column;
    width: 92%;
    max-width: 620px;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
    animation: modalPop 0.22s ease-out;
}

.modal-content.projetos-modal .modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--verde-800);
    color: #fff;
}

.modal-content.projetos-modal .modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* A janela inteira rola, e nao so a lista: num celular deitado o campo de
   nome tambem precisa caber. */
.modal-content.projetos-modal .modal-body {
    flex: 1 1 auto;
    padding: 18px 20px 20px;
    overflow-y: auto;
}

.projeto-salvar {
    padding: 14px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 12px;
    background: var(--verde-050, #f2faf6);
    margin-bottom: 18px;
}

.projeto-salvar > label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--verde-900, #023b21);
}

.projeto-salvar-linha {
    display: flex;
    gap: 8px;
}

.projeto-salvar-linha input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
}

.projeto-salvar-linha input:focus {
    outline: none;
    border-color: var(--verde-600);
    box-shadow: 0 0 0 3px rgba(6, 167, 92, 0.15);
}

.projeto-salvar .campo-nota {
    display: block;
    margin-top: 8px;
    line-height: 1.5;
}

.projeto-lista-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.projeto-lista-titulo h3 {
    margin: 0;
    font-size: 15px;
    color: var(--verde-900, #023b21);
}

.projeto-lista-titulo span {
    font-size: 12px;
    color: var(--cinza-600, #7b8a82);
}

.projeto-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
}

.projeto-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

/* O que está aberto agora se anuncia: sem isso, salvar de novo parecia criar
   um segundo projeto igual. */
.projeto-item.atual {
    border-color: var(--verde-700);
    box-shadow: inset 0 0 0 1px var(--verde-700);
}

.projeto-capa {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    overflow: hidden;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-700);
}

.projeto-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projeto-abrir {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 2px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.projeto-abrir strong {
    font-size: 14px;
    color: var(--verde-900, #023b21);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projeto-abrir small {
    font-size: 11px;
    color: var(--cinza-600, #7b8a82);
}

/* Os primeiros produtos dizem do que é o encarte melhor que a data. */
.projeto-amostra {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
}

.projeto-abrir:hover strong { color: var(--verde-700); }

.projeto-apagar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    cursor: pointer;
}

.projeto-apagar:hover { background: #fee2e2; }

.projeto-vazio {
    padding: 18px 12px;
    border: 1px dashed var(--cinza-200, #e5e7eb);
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cinza-600, #7b8a82);
}

/* Recado no alto da tela.

   Reabrir um projeto leva alguns segundos procurando as fotos. Sem dizer nada,
   a tela parece travada — e é justamente o momento em que a pessoa acabou de
   clicar e está esperando alguma coisa acontecer. */
.recado-do-editor {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translate(-50%, -12px);
    z-index: 900;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--verde-900, #023b21);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(2, 59, 33, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.recado-do-editor.visivel {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 560px) {
    .projeto-salvar-linha { flex-wrap: wrap; }
    .projeto-salvar-linha input { flex: 1 1 100%; }
    .projeto-salvar-linha button { flex: 1; justify-content: center; }
    .projeto-lista { max-height: 40vh; }
}

/* A lista da tela inicial quando ainda não há projeto salvo. Antes ela ficava
   simplesmente vazia, e um espaço em branco não diz o que fazer. */
.recent-vazio {
    margin: 0;
    padding: 20px 14px;
    border: 1px dashed var(--cinza-200, #e5e7eb);
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cinza-600, #7b8a82);
}

/* Sem arte de tema, a miniatura mostra um ícone em vez de imagem quebrada. */
.recent-thumb i {
    font-size: 20px;
    color: var(--verde-700);
}

/* Encarte salvo pelo botão antigo, que guardava outro retrato. Continua ali e
   continua abrindo — só não traz tudo de volta. A listra discreta na lateral
   diz isso sem transformar a linha num aviso. */
.projeto-item.projeto-antigo {
    border-left: 3px solid #d9a441;
}

/* ==========================================================================
   CARTÃO DE ABERTURA

   O antigo era um retângulo verde com "Olá, fulano" e um botão branco: o
   mesmo cartão de qualquer painel, que cumprimenta e não ajuda em nada.

   Este responde as duas perguntas de quem abre o site: que dia é, e por onde
   começo. As portas de entrada ficam lado a lado, cada uma dizendo o que faz
   — "vários produtos numa folha" contra "um produto por folha" —, porque
   escolher entre encarte e cartaz é a primeira decisão do trabalho e o nome
   sozinho não a resolve para quem chegou agora.
   ========================================================================== */

.abertura {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    margin-bottom: 24px;
    padding: 26px 28px 24px;
    color: #fff;
    /* Três paradas, não duas: o verde escuro no canto superior esquerdo dá
       profundidade, e o claro embaixo à direita puxa o olho para os botões. */
    background:
        radial-gradient(120% 140% at 0% 0%, var(--verde-900) 0%, transparent 55%),
        linear-gradient(135deg, var(--verde-800) 0%, var(--verde-700) 62%, var(--verde-600) 100%);
    box-shadow: 0 14px 34px rgba(2, 59, 33, 0.22);
}

/* A marca d'água: a mesma sacola do logotipo, gigante e quase invisível no
   canto. Dá textura ao verde chapado sem pedir nenhuma imagem nova. */
.abertura::after {
    content: '\f291';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -18px;
    bottom: -42px;
    font-size: 190px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.055);
    pointer-events: none;
}

.abertura-conteudo {
    position: relative;
    z-index: 1;
}

.abertura-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.abertura-dia {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.abertura-titulo {
    margin: 0 0 4px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.abertura-sub {
    margin: 0 0 20px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.82);
}

.abertura-acoes {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Cada porta é um cartão, não um botão de texto: o ícone e a explicação
   cabem, e o alvo de clique fica do tamanho de um dedo.

   Eles crescem até ocupar a faixa (com teto, para não virarem duas tiras
   de ponta a ponta numa tela larga). Antes tinham o tamanho do texto e
   deixavam o cartão verde com dois terços vazios. A seta no fim diz que é
   para clicar, e anda um pouco quando o mouse passa. */
.abertura-botao {
    flex: 1 1 260px;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 16px 16px;
    border-radius: 16px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.abertura-botao:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.abertura-botao:active { transform: translateY(0); }

.abertura-botao:focus-visible {
    outline: 2px solid var(--amarelo);
    outline-offset: 3px;
}

/* A principal é branca e sólida: entre duas portas, uma tem de parecer a
   porta da frente, senão a escolha custa um pensamento a cada visita. */
.abertura-botao.principal {
    background: #fff;
    border-color: #fff;
    color: var(--verde-800);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.abertura-botao.principal:hover {
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.abertura-botao-icone {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.18);
}

.abertura-botao.principal .abertura-botao-icone {
    background: var(--verde-800);
    color: #fff;
}

.abertura-botao-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

.abertura-botao-texto strong { font-size: 16.5px; font-weight: 800; }
.abertura-botao-texto small { font-size: 12.5px; opacity: 0.8; }

.abertura-botao-seta {
    flex-shrink: 0;
    font-size: 15px;
    opacity: 0.55;
    transition: transform .16s ease, opacity .16s ease;
}

.abertura-botao:hover .abertura-botao-seta {
    opacity: 1;
    transform: translateX(3px);
}

@media (max-width: 560px) {
    .abertura { padding: 20px 18px; border-radius: 18px; }
    .abertura-titulo { font-size: 22px; }
    .abertura::after { font-size: 140px; right: -26px; bottom: -34px; }
    /* Um embaixo do outro e ocupando a largura: lado a lado num telefone,
       cada porta fica com 140px e a explicação quebra em quatro linhas. */
    .abertura-acoes { flex-direction: column; }
    .abertura-botao { width: 100%; max-width: none; flex-basis: auto; }
}

/* ==========================================================================
   BARRA LATERAL

   O que havia antes: seis botões iguais numa coluna, hover só de cor, nenhum
   movimento, nenhuma separação. Um menu que não responde ao toque parece uma
   imagem de menu — e a pessoa fica sem saber se o clique pegou.

   O que mudou:
     · os itens entram em escada ao abrir a página;
     · cada ícone ganha uma casa própria, que acende no hover e no ativo;
     · o item ativo tem barra amarela que CRESCE, em vez de aparecer pronta;
     · o menu estreito mostra o nome numa dica ao lado;
     · tudo responde ao pressionar, não só ao passar por cima.
   ========================================================================== */

.main-sidebar {
    /* O degradê é de cima para baixo e quase imperceptível: tira o chapado da
       coluna sem virar enfeite. */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 220px);
    /* Animar `width` junto com `flex-basis` fazia o conteúdo tremer no meio da
       transição; a curva mais lenta no fim disfarça o resto. */
    transition: flex-basis 0.26s cubic-bezier(.4, 0, .2, 1), width 0.26s cubic-bezier(.4, 0, .2, 1);
}

/* --- A marca ------------------------------------------------------------- */

.brand-logo {
    transition: transform 0.28s cubic-bezier(.34, 1.4, .64, 1), box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(251, 222, 6, 0.25);
}

.main-sidebar:hover .brand-logo {
    transform: rotate(-8deg) scale(1.06);
}

/* --- O título de cada grupo ---------------------------------------------- */

.nav-grupo {
    padding: 16px 22px 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    white-space: nowrap;
    overflow: hidden;
}

/* Recolhido o título não cabe, e vira um traço: a separação continua ali sem
   texto cortado pela metade. */
.main-sidebar.collapsed .nav-grupo {
    padding: 12px 22px 10px;
    font-size: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 4px 16px 0;
}

/* --- Os itens ------------------------------------------------------------ */

.nav-item {
    gap: 11px;
    padding: 9px 12px;
    margin: 0 12px;
    width: calc(100% - 24px);
    overflow: hidden;
    /* A escada de entrada. `backwards` para o item já nascer invisível, senão
       ele pisca no lugar certo antes de começar. */
    animation: navEntra 0.3s cubic-bezier(.2, .7, .3, 1) backwards;
    animation-delay: calc(var(--ordem, 0) * 26ms);
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

@keyframes navEntra {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Quem prefere a tela parada não recebe a escada. Não é detalhe: movimento
   involuntário atrapalha de verdade quem tem enxaqueca ou vertigem. */
@media (prefers-reduced-motion: reduce) {
    .nav-item, .nav-grupo { animation: none; }
    .main-sidebar, .brand-logo, .nav-item, .nav-icone { transition: none; }
}

/* A casa do ícone. É ela que dá o "toque" ao passar o mouse: o quadradinho
   acende e cresce, e o item inteiro não precisa se mexer para responder. */
.nav-icone {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.07);
    transition: background-color .18s ease, transform .22s cubic-bezier(.34, 1.4, .64, 1), color .18s ease;
}

.nav-item i { width: auto; font-size: inherit; }

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.07);
    transform: translateX(2px);
}

.nav-item:hover .nav-icone {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.08);
}

/* Pressionar tem resposta própria: sem ela, num clique rápido a única
   diferença entre "cliquei" e "não cliquei" é a página trocar. */
.nav-item:active {
    transform: translateX(2px) scale(0.985);
}

.nav-item.active {
    background-color: rgba(5, 133, 73, 0.9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.nav-item.active .nav-icone {
    background: var(--amarelo);
    color: var(--verde-900);
}

/* A barra amarela CRESCE de dentro para fora, em vez de já estar lá. Meio
   segundo de animação na carga é o bastante para o olho registrar onde está. */
.nav-item.active::before {
    left: 0;
    width: 3.5px;
    height: 22px;
    animation: navMarca 0.42s cubic-bezier(.2, .8, .3, 1) 0.1s backwards;
}

@keyframes navMarca {
    from { transform: translateY(-50%) scaleY(0); opacity: 0; }
    to   { transform: translateY(-50%) scaleY(1); opacity: 1; }
}

/* --- A dica do menu estreito --------------------------------------------- */
/*
   Recolhido sobra só o ícone. Um desenho de varinha não diz "Temas" para quem
   chegou hoje, e abrir o menu para ler o nome desfaz a razão de tê-lo
   recolhido. A dica responde sem mexer no menu.
*/
.main-sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 9px 0;
    overflow: visible;
}

.main-sidebar.collapsed .nav-item::after {
    content: attr(data-rotulo);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    padding: 7px 12px;
    border-radius: 9px;
    background: var(--verde-900);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 200;
    transition: opacity .16s ease, transform .16s ease;
}

.main-sidebar.collapsed .nav-item:hover::after,
.main-sidebar.collapsed .nav-item:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Recolhida, a barra deixa de cortar a dica que sai dela. */
.main-sidebar.collapsed { overflow: visible; }

.main-sidebar.collapsed .nav-item:hover { transform: none; }
.main-sidebar.collapsed .nav-icone { width: 38px; height: 38px; font-size: 16px; }

/* --- Sair ---------------------------------------------------------------- */

.logout {
    margin: 10px 12px 0;
    width: calc(100% - 24px);
    padding: 11px 12px;
    border-radius: 12px;
    border-top: none;
    position: relative;
}

/* O traço que separava o "sair" do resto sai do botão e vira uma linha
   própria, para o botão poder ter cantos arredondados como os outros.

   Ela mora no PRÓPRIO botão, e não no fim da lista de itens. O "sair" fica
   num rodapé à parte, empurrado para o pé da barra; posta no fim da lista, a
   linha aparecia logo abaixo do último item e ficava boiando a duzentos
   pixels do que deveria separar. */
.logout::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logout:hover {
    background-color: rgba(165, 13, 38, 0.38);
    transform: translateX(2px);
}

.logout:hover .nav-icone { background: rgba(255, 255, 255, 0.18); }

/* A barra ESTREITA POR LARGURA — e so ela.

   Era `max-width: 1200px`, que tambem pega o celular. Como este bloco fica
   depois do bloco da gaveta na folha, ele vencia la: no telefone os itens
   apareciam centralizados enquanto a marca e os titulos de grupo ficavam
   encostados a esquerda, cada um num alinhamento. O piso de 861px e o que
   separa os dois estados — abaixo dele a barra vira gaveta e mostra tudo. */
@media (min-width: 861px) and (max-width: 1200px) {
    /* Só o rótulo some; a casa do ícone fica. */
    .brand-name, .nav-item .nav-text { display: none; }
    .nav-grupo { font-size: 0; padding: 12px 22px 10px; }

    /* Aqui a barra fica estreita SEM a classe .collapsed — ela encolhe pela
       largura da janela, não por escolha de ninguém. Era um vão de uso: entre
       861 e 1200px sobrava só o ícone e a dica não aparecia, porque estava
       presa ao .collapsed. Num notebook de 1366 isso é a tela inteira. */
    .main-sidebar { overflow: visible; }
    .main-sidebar .nav-item { justify-content: center; padding: 9px 0; overflow: visible; }
    .main-sidebar .nav-item:hover { transform: none; }
    .main-sidebar .nav-icone { width: 38px; height: 38px; font-size: 16px; }

    .main-sidebar .nav-item::after {
        content: attr(data-rotulo);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%) translateX(-6px);
        padding: 7px 12px;
        border-radius: 9px;
        background: var(--verde-900);
        color: #fff;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
        opacity: 0;
        pointer-events: none;
        z-index: 200;
        transition: opacity .16s ease, transform .16s ease;
    }

    .main-sidebar .nav-item:hover::after,
    .main-sidebar .nav-item:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* --- A gaveta do celular ------------------------------------------------

   Tudo comeca na MESMA regua: 20px da borda. Antes eram tres — a marca em
   20, o titulo de grupo em 22 e o icone dos itens em 32 — e tres alinhamentos
   numa coluna de 280px sao vistos de relance como desleixo, mesmo por quem
   nao saberia dizer o que esta errado.

   O icone dos itens cresce para 38px, do tamanho do simbolo da marca: e o que
   faz o texto dos itens cair na mesma coluna do nome ENCARTE X.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
    /* Na gaveta o menu aparece inteiro por cima da tela: nada de esconder
       texto nem de dica ao lado. */
    .main-sidebar .nav-text { display: inline; }
    .main-sidebar .nav-item::after { content: none; }

    .main-sidebar .brand { padding: 0 20px 22px; }

    .main-sidebar .nav-grupo {
        font-size: 10.5px;
        padding: 16px 20px 6px;
    }

    .main-sidebar .nav-item {
        margin: 0 8px;
        width: calc(100% - 16px);
        padding: 11px 12px;
        gap: 12px;
        font-size: 15px;
        justify-content: flex-start;
    }

    .main-sidebar .nav-icone {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .main-sidebar .logout {
        margin: 10px 8px 0;
        width: calc(100% - 16px);
    }

    .main-sidebar .logout::before { left: 12px; right: 12px; }
}

/* Sobrou um painel só na linha: "Encartes recentes" ocupa a largura inteira.
   Metade da largura com a outra metade vazia é pior do que uma coluna. */
.dashboard-row.uma-coluna {
    grid-template-columns: 1fr;
}

/* --- UMA RÉGUA SÓ, EM QUALQUER LARGURA -----------------------------------
   O mesmo desencontro da gaveta estava no computador: a marca começava em
   18px, o título de grupo em 22 e o ícone dos itens em 24. Três réguas numa
   coluna estreita são lidas de relance como desleixo, mesmo por quem não
   saberia dizer o que está errado.

   Tudo passa a começar em 20px, e o símbolo da marca e a casa do ícone têm o
   mesmo tamanho — é isso que faz o nome de cada item cair na mesma coluna do
   nome ENCARTE X.
   ------------------------------------------------------------------------ */

.brand {
    padding: 4px 20px 20px;
}

.nav-grupo {
    padding: 16px 20px 6px;
    /* O título entra na escada junto com os itens. Ele tem `--ordem` desde
       que a barra passou a contar a coluna inteira; sem esta regra aparecia
       pronto no meio de uma coluna que ainda estava chegando, e o olho lia
       isso como um salto. */
    animation: navEntra 0.3s cubic-bezier(.2, .7, .3, 1) backwards;
    animation-delay: calc(var(--ordem, 0) * 26ms);
}

.nav-item {
    margin: 0 8px;
    width: calc(100% - 16px);
    padding: 9px 12px;
    gap: 12px;
}

.nav-icone {
    width: 38px;
    height: 38px;
    font-size: 15px;
}

.logout {
    margin: 10px 8px 0;
    width: calc(100% - 16px);
    padding: 9px 12px;
}

/* Recolhida não há régua a seguir: sobra o ícone, e ele fica no meio. */
.main-sidebar.collapsed .nav-item,
.main-sidebar.collapsed .logout {
    margin: 0 8px;
    width: calc(100% - 16px);
    padding: 9px 0;
}

.main-sidebar.collapsed .brand {
    padding: 4px 0 20px;
}

/* --- Sair, em vermelho ---------------------------------------------------
   Antes o botão só ficava vermelho ao passar o mouse — e num celular não há
   passar o mouse. A única ação da barra que TIRA a pessoa de onde ela está
   ficava com a mesma cara das outras cinco, e ninguém olha duas vezes antes
   de tocar em algo que parece igual a tudo.

   O vermelho é o da marca (#D62828), em dose baixa: forte o bastante para
   marcar que a ação é de outra natureza, discreto o bastante para não gritar
   num menu que a pessoa vê o dia inteiro.
   ------------------------------------------------------------------------ */

.logout {
    color: rgba(255, 190, 190, 0.85);
}

.logout .nav-icone {
    background: rgba(165, 13, 38, 0.32);
    color: #ffc9c9;
}

.logout:hover {
    background-color: rgba(165, 13, 38, 0.42);
    color: #fff;
}

.logout:hover .nav-icone {
    background: var(--vermelho, #a50d26);
    color: #fff;
}

.logout:focus-visible {
    outline: 2px solid #ff8a8a;
    outline-offset: -2px;
}

/* ==========================================================================
   A GAVETA DO CELULAR, COM MOVIMENTO

   A escada de entrada dos itens existia desde o começo, mas no telefone
   ninguém a via: ela roda quando a PÁGINA carrega, e nessa hora a gaveta
   ainda está fora da tela. Quando a pessoa finalmente abre o menu, a
   animação já aconteceu — para uma plateia vazia.

   Aqui ela passa para a ABERTURA. A classe `nav-aberta` entra e sai do body,
   e uma animação declarada só nesse estado recomeça a cada vez: o menu ganha
   vida toda vez que é chamado, que é quando se está olhando para ele.
   ========================================================================== */

@media (max-width: 860px) {
    /* O painel desliza com curva de gaveta: sai rápido e chega devagar, como
       coisa pesada que para sozinha. `ease` puro chegava seco. */
    .main-sidebar {
        transition: transform 0.34s cubic-bezier(.32, .72, 0, 1);
    }

    /* Fechada, nada de animação: ela pertence à abertura. */
    .main-sidebar .nav-item,
    .main-sidebar .nav-grupo,
    .main-sidebar .brand {
        animation: none;
    }

    body.nav-aberta .main-sidebar .nav-item,
    body.nav-aberta .main-sidebar .nav-grupo {
        animation: navEntra 0.3s cubic-bezier(.2, .7, .3, 1) backwards;
        /* 70ms de espera: a escada começa quando o painel já está chegando,
           em vez de correr por baixo dele enquanto desliza.

           E 26ms entre um degrau e outro, não mais. `backwards` deixa o item
           INVISÍVEL até a vez dele: com degraus largos, quem abre a gaveta
           para tocar no "Sair" — que é o último — ficava meio segundo diante
           de um espaço vazio. Nove linhas fecham em 0,5s.
           Enfeite que faz esperar deixa de ser enfeite. */
        animation-delay: calc(70ms + var(--ordem, 0) * 26ms);
    }

    body.nav-aberta .main-sidebar .brand {
        animation: navMarcaEntra 0.4s cubic-bezier(.2, .7, .3, 1) backwards;
    }

    @keyframes navMarcaEntra {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* O fundo escurece um pouco mais devagar que o painel: assim a tela
       "afunda" antes de o menu pousar em cima dela. */
    .nav-mobile-fundo {
        transition: opacity 0.34s ease, visibility 0.34s ease;
    }

    /* O botão do menu diz que está aberto. Num telefone não há hover para
       revelar estado, e o hambúrguer sozinho parece sempre o mesmo. */
    .btn-menu-lateral {
        transition: background-color .2s ease, border-color .2s ease,
                    color .2s ease, transform .2s ease;
    }

    .btn-menu-lateral[aria-expanded="true"] {
        background: var(--verde-800);
        border-color: var(--verde-800);
        color: #fff;
    }

    .top-toolbar .btn-menu-lateral[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.28);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .btn-menu-lateral:active { transform: scale(0.92); }
}

/* --- O toque, onde não existe passar o mouse ------------------------------
   Metade do movimento da barra estava no hover, e num telefone hover não
   acontece — ou pior, fica GRUDADO depois do toque, deixando um item aceso
   que ninguém está apontando. Onde não há ponteiro fino, o movimento vai
   todo para o pressionar.
   ------------------------------------------------------------------------ */

@media (hover: none) {
    .nav-item:hover,
    .logout:hover {
        transform: none;
        background-color: transparent;
    }

    .nav-item.active:hover {
        background-color: rgba(5, 133, 73, 0.9);
    }

    .nav-item:hover .nav-icone {
        transform: none;
        background: rgba(255, 255, 255, 0.07);
    }

    .nav-item.active:hover .nav-icone {
        background: var(--amarelo);
    }

    .logout:hover .nav-icone {
        background: rgba(165, 13, 38, 0.32);
    }

    /* O retângulo cinza que o Android desenha por cima do toque some: o item
       já tem resposta própria, e as duas juntas viram sujeira. */
    .nav-item {
        -webkit-tap-highlight-color: transparent;
    }

    .nav-item:active {
        transform: scale(0.96);
        background-color: rgba(255, 255, 255, 0.12);
    }

    .nav-item:active .nav-icone {
        transform: scale(0.9);
    }

    .logout:active {
        background-color: rgba(165, 13, 38, 0.45);
    }

    .logout:active .nav-icone {
        background: var(--vermelho, #a50d26);
        color: #fff;
    }
}

/* Quem pede menos movimento continua sem nenhum: o menu aparece pronto. */
@media (prefers-reduced-motion: reduce) {
    body.nav-aberta .main-sidebar .nav-item,
    body.nav-aberta .main-sidebar .nav-grupo,
    body.nav-aberta .main-sidebar .brand {
        animation: none;
    }

    .main-sidebar,
    .nav-mobile-fundo,
    .btn-menu-lateral {
        transition: none;
    }
}

/* ==========================================================================
   O MENU DA CONTA

   O retrato no canto era só um botão redondo: no painel abria a ficha, nas
   outras telas apenas levava para o painel, e nada indicava que era clicável.
   Tudo o que é "da conta" estava espalhado — o plano no meio do menu lateral,
   o "Sair" no pé dele, a ficha atrás de uma viagem.

   Agora é um menu, como em qualquer site com conta. O retrato deixou de ser
   um círculo solto e virou uma pílula com a setinha: a forma diz que abre.
   ========================================================================== */

.conta-caixa {
    position: relative;
    flex-shrink: 0;
}

.profile-trigger {
    /* Pílula, não círculo: o círculo não tem onde pôr a seta, e sem a seta
       metade das pessoas nunca descobre que o retrato faz alguma coisa. */
    width: auto;
    height: 44px;
    padding: 0 10px 0 4px;
    gap: 7px;
    border-radius: 999px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    background: #fff;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.profile-trigger:hover {
    background: var(--verde-050, #f2faf6);
    border-color: var(--verde-100);
    box-shadow: 0 2px 10px rgba(2, 59, 33, 0.08);
}

.conta-caixa.aberto .profile-trigger {
    background: var(--verde-050, #f2faf6);
    border-color: var(--verde-700);
}

.profile-trigger img,
.profile-trigger > i:not(.conta-seta) {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.profile-trigger > i:not(.conta-seta) {
    display: grid;
    place-items: center;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-800);
    font-size: 14px;
}

.conta-seta {
    font-size: 10px;
    color: var(--cinza-600, #7b8a82);
    transition: transform .2s ease;
}

.conta-caixa.aberto .conta-seta {
    transform: rotate(180deg);
    color: var(--verde-700);
}

/* --- O painel ------------------------------------------------------------ */

.conta-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 300;
    width: 262px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--cinza-200, #e5e7eb);
    box-shadow: 0 16px 40px rgba(2, 59, 33, 0.18);
    animation: contaAbre .16s ease-out;
}

@keyframes contaAbre {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Quem está logado, no alto do menu. Numa conta de rede, com várias lojas,
   é a primeira coisa que se quer conferir antes de mexer em qualquer coisa. */
.conta-cabeca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--cinza-200, #e5e7eb);
}

.conta-cabeca-foto {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-800);
}

.conta-cabeca-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conta-cabeca-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.conta-cabeca-texto strong {
    font-size: 14px;
    color: var(--verde-900, #023b21);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conta-cabeca-texto small {
    font-size: 11.5px;
    color: var(--cinza-600, #7b8a82);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- As linhas ----------------------------------------------------------- */

.conta-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 11px;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--verde-900, #023b21);
    transition: background-color .14s ease;
}

.conta-item:hover { background: var(--verde-050, #f2faf6); }
.conta-item:active { background: var(--verde-100, #e5f5ee); }

.conta-item:focus-visible {
    outline: 2px solid var(--verde-600);
    outline-offset: -2px;
}

.conta-item-icone {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 13px;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-800);
}

.conta-item-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.conta-item-texto strong { font-size: 13.5px; font-weight: 600; }
.conta-item-texto small { font-size: 11px; color: var(--cinza-600, #7b8a82); }

.conta-risco {
    margin: 5px 10px;
    border-top: 1px solid var(--cinza-200, #e5e7eb);
}

/* Sair é a única linha que tira a pessoa de onde ela está: veste o vermelho
   do sistema, como o botão da barra lateral. */
.conta-item.perigo { color: #a50d26; }

.conta-item.perigo .conta-item-icone {
    background: #fef2f2;
    color: #b91c1c;
}

.conta-item.perigo:hover { background: #fef2f2; }

.conta-item.perigo:hover .conta-item-icone {
    background: var(--vermelho, #a50d26);
    color: #fff;
}

@media (max-width: 480px) {
    /* Num telefone a pílula inteira não cabe ao lado do título: fica só o
       retrato, e a seta some. O menu ocupa a largura útil. */
    .profile-trigger { padding: 0; width: 44px; }

    /* `.profile-trigger .conta-seta`, e nao `.conta-seta` sozinho.

       O Font Awesome e carregado DEPOIS do nosso CSS e traz
       `.fa-solid { display: var(--fa-display, inline-block) }`. Uma classe
       contra uma classe empata em especificidade, e o empate quem ganha e a
       folha que vem por ultimo — a deles. A seta continuava na tela com um
       `display: none` escrito e ignorado. Dois niveis resolvem. */
    .profile-trigger .conta-seta { display: none; }
    .conta-menu { width: min(80vw, 262px); }
}

/* ==========================================================================
   AS DUAS ABAS DA FICHA

   A ficha juntava coisas de naturezas diferentes numa lista só: a foto e o
   nome da PESSOA ao lado da logomarca e do nome da LOJA. O menu da conta tem
   uma entrada para cada um, e não faria sentido as duas abrirem a mesma
   parede de campos.
   ========================================================================== */

.perfil-abas {
    display: flex;
    gap: 6px;
    padding: 12px 22px 0;
    border-bottom: 1px solid var(--cinza-200, #e5e7eb);
}

.perfil-aba {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cinza-600, #7b8a82);
    border-bottom: 2px solid transparent;
    /* -2px para a linha da aba cair EM CIMA da linha do grupo, e não abaixo
       dela: duas linhas paralelas com um fio de distância parecem defeito. */
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.perfil-aba i { font-size: 13px; }
.perfil-aba:hover { color: var(--verde-700); }

.perfil-aba.ativa {
    color: var(--verde-800);
    border-bottom-color: var(--verde-700);
}

.perfil-aba:focus-visible {
    outline: 2px solid var(--verde-600);
    outline-offset: -2px;
    border-radius: 8px 8px 0 0;
}

/* ==========================================================================
   AS ABAS DO PAINEL DE EDIÇÃO

   O que havia: uma faixa azul-acinzentada (#e1e8f0) com rótulos num cinza
   arroxeado (#6b6675) e a aba ativa branca com um risco verde embaixo — o
   desenho padrão de aba de navegador, de cor emprestada de outro sistema.
   Nada ali pertencia à paleta do ENCARTE X, e por isso a barra parecia
   colada de outro lugar.

   Agora o ícone ganha casa própria, como na barra lateral: é a mesma
   linguagem no produto inteiro, e é a casa cheia — não um risco fino — que
   responde "em que aba eu estou" de relance.
   ========================================================================== */

.tabs-header {
    background: #fff;
    border-bottom: 1px solid var(--cinza-200);
    padding: 7px 6px 0;
    gap: 2px;
}

.tab-btn {
    position: relative;
    gap: 5px;
    padding: 6px 3px 10px;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--cinza-600);
    transition: color .16s ease;
    -webkit-tap-highlight-color: transparent;
}

/* `.tab-btn i` tem dois níveis de seletor, e o Font Awesome mira `.fa-solid`
   com um só: aqui o `display` que escrevemos ganha do que vem na folha
   deles, que é carregada depois. */
.tab-btn i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 14px;
    background: transparent;
    color: inherit;
    transition: background-color .16s ease, color .16s ease,
                transform .22s cubic-bezier(.34, 1.4, .64, 1);
}

.tab-btn:hover {
    background: transparent;
    color: var(--verde-700);
}

.tab-btn:hover i {
    background: var(--verde-050, #f2faf6);
    transform: translateY(-1px);
}

.tab-btn:active i { transform: scale(0.92); }

.tab-btn.active {
    background: transparent;
    color: var(--verde-800);
    font-weight: 700;
}

.tab-btn.active i {
    background: var(--verde-800);
    color: #fff;
}

/* A marca da aba ativa: curta e arredondada, e CRESCE do meio para fora em
   vez de já estar lá. Meio segundo é o bastante para o olho seguir a
   mudança, que num painel de cinco abas é fácil de perder. */
.tab-btn.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 26px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--verde-700);
    transform: translateX(-50%);
    animation: abaMarca .26s cubic-bezier(.2, .8, .3, 1);
}

@keyframes abaMarca {
    from { transform: translateX(-50%) scaleX(0); opacity: 0; }
    to   { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

.tab-btn:focus-visible {
    outline: 2px solid var(--verde-600);
    outline-offset: -3px;
    border-radius: 12px 12px 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .tab-btn i, .tab-btn.active::after { transition: none; animation: none; }
}

/* Numa tela estreita cinco rótulos de 11px não cabem lado a lado sem quebrar
   no meio da palavra. O rótulo encolhe junto com a casa do ícone. */
@media (max-width: 400px) {
    .tab-btn { font-size: 10px; padding: 5px 2px 9px; }
    .tab-btn i { width: 28px; height: 28px; font-size: 13px; }
}

/* ==========================================================================
   A FAIXA DE AÇÕES DO PAINEL

   "+ PRODUTO" e "IMPORTAR LISTA" eram dois retângulos PRETOS de canto 4px —
   o preto não existe na paleta, e 4px de canto destoa de tudo o que está em
   volta, que anda entre 10 e 16. Havia ainda uma regra deixando o segundo
   azul (#1976d2, azul do Material), morta desde que a regra preta passou a
   vir depois dela na folha.

   Duas ações no mesmo lugar pedem hierarquia: criar um produto é o que se
   faz o tempo todo; importar uma lista é o atalho de quem já tem a lista
   pronta. Uma cheia, outra de contorno.
   ========================================================================== */

.editor-actions {
    gap: 8px;
    background: #fff;
    border-top: 1px solid var(--cinza-200);
}

.action-btn {
    padding: 12px 14px;
    /* Pílula, como o resto do painel: o `.editor-panel .action-btn` já pedia
       999px com dois níveis de seletor, e um raio menor aqui só faria os dois
       botões da mesma faixa terem formatos diferentes. */
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    gap: 7px;
    background: var(--verde-800);
    color: #fff;
    border: 1px solid var(--verde-800);
    cursor: pointer;
    transition: background-color .16s ease, transform .14s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.action-btn i { font-size: 12px; }

.action-btn:hover {
    background: var(--verde-700);
    border-color: var(--verde-700);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(4, 103, 57, 0.22);
}

.action-btn:active {
    transform: translateY(0) scale(0.985);
    box-shadow: none;
}

.action-btn:focus-visible {
    outline: 2px solid var(--verde-600);
    outline-offset: 2px;
}

/* A segunda ação é de contorno: fica disponível sem disputar o olho com a
   primeira. */
.import-list-btn {
    margin-left: 0;
    background: #fff;
    color: var(--verde-800);
    border-color: var(--cinza-200);
}

.import-list-btn:hover {
    background: var(--verde-050, #f2faf6);
    border-color: var(--verde-600);
    color: var(--verde-800);
    box-shadow: 0 4px 12px rgba(2, 59, 33, 0.08);
}

/* --- O cartão de "comece por aqui" ---------------------------------------
   Primeira coisa que se vê no painel, e tinha um quadrado PRETO com o mais
   dentro, título #111 e texto #555 — três tons emprestados de nenhum lugar.
   O preto num painel verde chama mais atenção que o próprio botão que ele
   está mandando apertar.
   ------------------------------------------------------------------------ */

.product-editor-empty {
    border: 1px dashed var(--cinza-200);
    border-radius: 14px;
    background: #fff;
}

.product-editor-empty-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-800);
    font-size: 17px;
}

.product-editor-empty-title {
    color: var(--verde-900, #023b21);
    font-size: 13.5px;
    letter-spacing: 0.3px;
}

.product-editor-empty-subtitle {
    color: var(--cinza-600);
    line-height: 1.5;
}

/* A borda do painel acompanha o resto: #ccc é cinza puro e aparece como um
   risco duro ao lado de tudo o que está em volta. */
.editor-panel {
    border-left: 1px solid var(--cinza-200);
}

/* ==========================================================================
   O CONVITE NO MEIO DA FOLHA

   Ele é desenhado DENTRO do #offer-canvas, e o canvas inteiro é reduzido por
   um `transform: scale` — num A4 em pé o zoom padrão fica perto de 0,30. O
   quadrado de 54px que havia aqui chegava à tela com 16px, e o texto de 12px
   com menos de 4: uma legenda que ninguém lê num botão que ninguém vê.

   Por isso os números aqui são grandes: eles são medidos em pixels de FOLHA,
   não de tela. 140px de casa viram uns 42 na tela, que é o tamanho do mesmo
   cartão no painel de edição — e é o mesmo desenho, para as duas portas de
   entrada do encarte parecerem a mesma coisa.
   ========================================================================== */

.empty-product-cta {
    inset: 20px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.96);
    border: 3px dashed var(--cinza-200);
    transition: border-color .18s ease, background-color .18s ease;
}

.empty-product-cta:hover {
    border-color: var(--verde-600);
    background: #fff;
}

.empty-product-cta .cta-inner {
    gap: 26px;
    padding: 20px;
    text-align: center;
}

.empty-product-cta .cta-plus {
    width: 140px;
    height: 140px;
    border-radius: 38px;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-800);
    font-size: 62px;
    transition: background-color .18s ease, color .18s ease, transform .22s cubic-bezier(.34, 1.4, .64, 1);
}

.empty-product-cta:hover .cta-plus {
    background: var(--verde-800);
    color: #fff;
    transform: scale(1.05);
}

.empty-product-cta .cta-text {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.15;
    color: var(--verde-900, #023b21);
}

/* A segunda linha diz o que o clique faz. Sem ela o convite chama para uma
   ação sem dizer qual — e o que ele abre é a importação de lista, não um
   produto solto. */
.empty-product-cta .cta-nota {
    margin-top: -14px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cinza-600);
    text-transform: none;
    letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
    .empty-product-cta, .empty-product-cta .cta-plus { transition: none; }
    .empty-product-cta:hover .cta-plus { transform: none; }
}

/* O convite se desfaz da escala da folha.

   `--zoom-da-folha` é escrito pelo applyPreviewZoom a cada ajuste. Desfazendo
   a escala aqui, os números abaixo voltam a ser PIXELS DE TELA: o convite fica
   do mesmo tamanho num A4 em pé, num stories ou numa TV, e do mesmo tamanho
   com a janela grande ou pequena.

   É o que se espera de um controle. Encolher junto com a arte é o que se
   espera do conteúdo, e este bloco não é conteúdo — ele nem entra na imagem
   exportada. */
.empty-product-cta .cta-inner {
    transform: scale(var(--escala-do-convite, 1));
    transform-origin: center;
    gap: 14px;
    padding: 0;
}

.empty-product-cta .cta-plus {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 24px;
}

.empty-product-cta .cta-text {
    font-size: 14px;
    letter-spacing: 0.4px;
}

.empty-product-cta .cta-nota {
    margin-top: -8px;
    font-size: 12px;
    max-width: 210px;
}

/* ==========================================================================
   AS SILHUETAS DOS FORMATOS

   BUG QUE ESTAVA AQUI: "clico no botão de formatos e ele mostra só quadrados,
   sem a forma que são os formatos".

   A miniatura tinha `width: 100%` com um `max-height: 52px` por cima. Os dois
   limites agem em EIXOS SEPARADOS: o Stories pedia 1,78 de altura para a
   largura que recebeu, o teto cortava em 52px e a largura ficava onde estava.
   Resultado: todas as folhas saíam com quase o mesmo retângulo, e a única
   coisa que a miniatura tinha para dizer — a forma — era justamente o que ela
   perdia. É o mesmo erro que já tinha aparecido no palco do removedor de
   fundo: clampar um lado sem o outro não preserva proporção.

   Agora a proporção vem em dois números (--l e --a, a largura e a altura
   reais da folha) e uma ESCALA ÚNICA é calculada a partir dos dois tetos. Os
   dois lados saem da mesma conta, então a forma nunca se perde: a TV fica
   larga e baixa, o Stories fino e alto, e dá para escolher sem ler o nome.
   ========================================================================== */

.format-thumb {
    /* Cada contexto diz o tamanho da caixa; estes são os valores de reserva. */
    --caixa-l: 50px;
    --caixa-a: 50px;
    --escala: min(var(--caixa-l) / var(--l), var(--caixa-a) / var(--a));

    display: block;
    width: calc(var(--l) * var(--escala));
    height: calc(var(--a) * var(--escala));
    flex: 0 0 auto;
    background: #fff;
    border: 1.5px solid #c6cfca;
    border-radius: 3px;
    transition: border-color .16s ease, box-shadow .16s ease, transform .2s ease;
}

.format-btn.active .format-thumb {
    border-color: var(--verde-700);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(5, 133, 73, 0.2);
}

.format-btn:hover .format-thumb {
    border-color: var(--verde-600);
    transform: translateY(-1px);
}

/* No menu do topo a caixa é maior: é ali que a escolha acontece, e uma
   silhueta de 50px não mostra a diferença entre Instagram e A4 em pé. */
.menu-formatos .format-thumb {
    --caixa-l: 62px;
    --caixa-a: 56px;
    margin: 0 auto 7px;
}

/* A grade do menu passa a alinhar as silhuetas pela BASE, como folhas
   apoiadas numa mesa. Centralizadas, uma alta e uma baixa lado a lado davam
   a impressão de estarem flutuando em alturas diferentes. */
.menu-formatos .format-btn {
    justify-content: flex-end;
    min-height: 92px;
}

/* ==========================================================================
   A BARRA DO TOPO DO EDITOR

   Eram ícones brancos soltos sobre o verde, sem fundo e sem borda: sete
   controles boiando numa faixa, sem nada dizendo quais andam juntos nem qual
   é o principal. Um deles — o "Baixar", que é a razão de existir do editor —
   tinha 18% de branco atrás e sumia do mesmo jeito.

   Agora cada grupo ganha uma BANDEJA: um fundo translúcido que junta o que é
   do mesmo assunto e separa do resto sem precisar de traço. É o desenho de
   barra de ferramentas que já se espera, e resolve o agrupamento com forma em
   vez de espaçamento.
   ========================================================================== */

.toolbar-bandeja {
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tool-btn {
    border-radius: 9px;
    transition: background-color .16s ease, color .16s ease, transform .14s ease,
                box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.tool-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.tool-btn:active {
    transform: scale(0.94);
}

/* O BAIXAR.

   É a ação que fecha o trabalho, e estava com o mesmo peso de "imprimir".
   Branco sólido sobre o verde é o maior contraste que a barra tem — não há
   como confundir qual é o botão principal. */
.tool-btn-destaque {
    background: #fff;
    color: var(--verde-800);
    font-weight: 700;
    padding: 0 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.tool-btn-destaque:hover {
    background: #fff;
    color: var(--verde-900);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2);
}

.tool-btn-destaque:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}

/* O traço entre grupos some: as bandejas já separam, e um traço a mais vira
   ruído entre duas caixas que já estão separadas. */
.toolbar-divisor {
    display: none;
}

.toolbar-left {
    gap: 8px;
}

/* --- O botão de formato -------------------------------------------------- */

.toolbar-formato .tool-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0 11px;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
}

.toolbar-formato .tool-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.tool-btn-seta {
    font-size: 9px;
    opacity: 0.8;
    transition: transform .2s ease;
}

.toolbar-formato .tool-btn[aria-expanded="true"] {
    background: #fff;
    color: var(--verde-800);
    border-color: #fff;
}

/* `.toolbar-formato .tool-btn[...] .tool-btn-seta` e não `.tool-btn-seta`
   sozinho: o Font Awesome mira `.fa-solid` com uma classe e é carregado
   depois da nossa folha, então um seletor de um nível só empata e perde. */
.toolbar-formato .tool-btn[aria-expanded="true"] .tool-btn-seta {
    transform: rotate(180deg);
}

@media (max-width: 600px) {
    /* Na barra estreita a bandeja encolhe junto, senão ela rouba a largura
       que os botões precisam. */
    .toolbar-bandeja { padding: 2px; border-radius: 10px; }
    .toolbar-left { gap: 6px; }
    .tool-btn-destaque { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tool-btn, .tool-btn-seta { transition: none; }
    .tool-btn:active, .tool-btn-destaque:hover { transform: none; }
}

/* ==========================================================================
   TELA DE PLANOS

   Eram três cartões brancos iguais numa grade, com o preço no mesmo corpo do
   resto e uma lista de recursos sem hierarquia nenhuma. Quem chegava tinha de
   ler as três listas inteiras e comparar linha a linha para descobrir qual
   era o seu — e essa é uma tela em que a dúvida custa a assinatura.

   Agora cada cartão responde na ordem em que a pergunta aparece: de quem é
   este plano, quanto custa, o que fazer. A lista vem depois, para quem quer
   conferir, e não antes, para quem ainda está escolhendo.
   ========================================================================== */

.planos-topo {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 30px;
}

.planos-selo-topo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-800);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.planos-topo h1 {
    margin: 0 0 10px;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--verde-900, #023b21);
}

/* O amarelo da marca grifa a promessa, e não o título inteiro: grifo em tudo
   não grifa nada. */
.planos-topo h1 em {
    font-style: normal;
    background: linear-gradient(transparent 62%, var(--amarelo) 62%);
    padding: 0 3px;
}

.planos-topo p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--cinza-600);
}

/* --- O trilho ------------------------------------------------------------ */

.planos-trilho {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.plano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 22px 24px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--cinza-200);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.plano:hover {
    transform: translateY(-3px);
    border-color: var(--verde-600);
    box-shadow: 0 14px 34px rgba(2, 59, 33, 0.1);
}

/* O PLANO EM DESTAQUE.

   Invertido, como na referência: fundo escuro da marca e o amarelo fazendo o
   trabalho de chamar. Um cartão que só tem a borda mais grossa não se destaca
   de longe — e "mais escolhido" precisa ser visto de longe. */
.plano-destaque {
    background:
        radial-gradient(120% 120% at 100% 0%, var(--verde-800) 0%, transparent 60%),
        linear-gradient(160deg, var(--verde-900) 0%, var(--verde-800) 100%);
    border-color: var(--verde-900);
    color: #fff;
    box-shadow: 0 18px 44px rgba(2, 59, 33, 0.28);
}

.plano-destaque:hover {
    border-color: var(--amarelo);
    box-shadow: 0 22px 52px rgba(2, 59, 33, 0.34);
}

.plano-selo {
    position: absolute;
    top: -11px;
    left: 22px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--amarelo);
    color: var(--amarelo-texto);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.plano-nome {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--verde-900, #023b21);
}

.plano-destaque .plano-nome { color: #fff; }

/* "De quem é este plano" vem ANTES do preço. É a pergunta que a pessoa faz
   primeiro; o preço só interessa depois que ela se reconheceu na frase. */
.plano-paraquem {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--cinza-600);
    min-height: 39px;
}

.plano-destaque .plano-paraquem { color: rgba(255, 255, 255, 0.78); }

.plano-preco {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 18px;
    color: var(--verde-900, #023b21);
}

.plano-moeda {
    font-size: 17px;
    font-weight: 700;
    align-self: flex-start;
    margin-top: 6px;
}

.plano-valor {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.plano-periodo {
    font-size: 14px;
    font-weight: 600;
    color: var(--cinza-600);
}

/* "Sob consulta" não é número: com o corpo de um preço fica espremido e sem
   sentido nenhum. */
.plano-preco-texto {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.plano-destaque .plano-preco,
.plano-destaque .plano-valor,
.plano-destaque .plano-moeda { color: #fff; }

.plano-destaque .plano-periodo { color: rgba(255, 255, 255, 0.75); }

.plano-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 999px;
    background: var(--verde-800);
    color: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .16s ease, transform .14s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.plano-botao i { font-size: 12px; transition: transform .18s ease; }

.plano-botao:hover {
    background: var(--verde-700);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(4, 103, 57, 0.28);
}

.plano-botao:hover i { transform: translateX(3px); }
.plano-botao:active { transform: translateY(0) scale(0.985); box-shadow: none; }

.plano-botao:focus-visible {
    outline: 2px solid var(--verde-600);
    outline-offset: 3px;
}

/* No cartão escuro o botão inverte: amarelo sobre verde é o maior contraste
   que a marca tem, e é onde o olho deve parar. */
.plano-destaque .plano-botao {
    background: var(--amarelo);
    color: var(--amarelo-texto);
}

.plano-destaque .plano-botao:hover {
    background: #fff;
    color: var(--verde-800);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.plano-destaque .plano-botao:focus-visible { outline-color: #fff; }

.plano-risco {
    height: 1px;
    margin: 22px 0 16px;
    background: var(--cinza-200);
}

.plano-destaque .plano-risco { background: rgba(255, 255, 255, 0.18); }

.plano-lista-titulo {
    margin-bottom: 11px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cinza-600);
}

.plano-destaque .plano-lista-titulo { color: rgba(255, 255, 255, 0.6); }

.plano-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plano-lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--verde-900, #023b21);
}

.plano-destaque .plano-lista li { color: rgba(255, 255, 255, 0.92); }

/* O visto numa casa redonda, e não solto: solto ele some no meio do texto, e
   é ele que diz "isto está incluído". */
.plano-lista i {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 9px;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-800);
}

.plano-destaque .plano-lista i {
    background: rgba(251, 222, 6, 0.22);
    color: var(--amarelo);
}

/* --- As bolinhas e o rodapé ---------------------------------------------- */

/* AS SETAS E O PALCO SAÍRAM DAQUI.
   
   Houve uma grade de três colunas — seta, trilho, seta — com uma roda sem fim
   por trás. Saiu inteira: a cada seta apertada o realce escuro pulava de
   cartão, e no computador não havia para onde navegar, porque os três já
   estão lado a lado.
   
   No celular quem navega é o dedo, e o convite para arrastar não é um botão:
   é o cartão da beirada aparecendo pela metade, apagado e menor. É o que o
   crieoferta faz, e é o que está logo abaixo, no bloco do celular. */

.planos-bolinhas { display: none; }
}

.planos-rodape {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 10px;
    font-size: 13px;
    color: var(--cinza-600);
}

.planos-rodape i { color: var(--verde-700); }

.planos-erro {
    grid-column: 1 / -1;
    padding: 30px;
    text-align: center;
    color: var(--cinza-600);
}

/* ==========================================================================
   NO CELULAR: UMA FILEIRA QUE ESCORREGA

   Três cartões empilhados viram uma página de rolagem sem fim, e o terceiro
   plano fica a dois polegares de distância de quem nem sabe que ele existe.

   Viram uma fileira horizontal. O ponto: o cartão seguinte APARECE PELA
   BEIRADA. Um cartão ocupando a tela inteira esconde que há outros, e quem
   não sabe que há mais não arrasta — a beirada é o convite, e é ela que faz o
   gesto acontecer sem precisar de nenhuma instrução escrita.
   ========================================================================== */

@media (max-width: 900px) {
    .planos-trilho {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        /* O respiro negativo faz a fileira encostar nas bordas da tela: sem
           ele, o card da beirada seria cortado pelo recuo do container em vez
           de espiar por baixo dele. */
        margin-left: calc(-1 * var(--recuo-da-tela, 20px));
        margin-right: calc(-1 * var(--recuo-da-tela, 20px));

        /* O RECUO DAS PONTAS É O QUE DEIXA O PRIMEIRO E O ÚLTIMO CHEGAREM AO
           MEIO.

           Com um recuo fixo de 20px, o último cartão batia no fim da rolagem
           antes de alcançar o centro: ele ficava apagado para sempre e a
           terceira bolinha nunca acendia. Medido — arrastando até o fim, o
           "cartão do meio" continuava sendo o do meio da lista.

           A conta é a que falta para centrar: metade do trilho menos metade
           do cartão. O crieoferta resolve o mesmo problema com 9vw fixos, o
           que só funciona enquanto o cartão é uma fração da tela; aqui o
           cartão tem teto de 360px, e num tablet 9vw não bastaria. */
        --meia-carta: min(42vw, 180px);
        padding: 12px calc(50vw - var(--meia-carta)) 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .planos-trilho::-webkit-scrollbar { display: none; }

    .plano {
        /* 84% da tela: o que sobra é a beirada do próximo. Menos que isso
           aperta o cartão; mais, e a beirada some.

           Em `vw` e não em `%`: a porcentagem vale sobre a área INTERNA do
           trilho, que agora tem um recuo grande nas pontas — e o cartão
           encolheria junto com ele. O `vw` é da tela, que é o que interessa. */
        flex: 0 0 84vw;
        max-width: 360px;
        scroll-snap-align: center;
        /* Um cartão por arrasto. Sem isto, um empurrão forte passa dois de
           uma vez e a pessoa perde o do meio sem ter visto. */
        scroll-snap-stop: always;
    }

    .plano:hover { transform: none; }

    /* O CONVITE PARA ARRASTAR NÃO É UM BOTÃO.

       Aqui estavam duas setas, e elas saíram. O que faz a pessoa arrastar é
       ver que há mais coisa: o cartão da beirada aparecendo pela metade,
       apagado e menor, pedindo para ser trazido ao meio. É o que o crieoferta
       faz na tela de planos do celular — conferido no CSS deles, que usa
       opacidade 0,45 com escala 0,88 — e funciona sem nenhuma instrução
       escrita na tela.

       O `.no-meio` é posto pelo JavaScript a cada rolagem, no cartão que está
       mais perto do centro. */
    .planos-trilho .plano {
        opacity: .5;
        transform: scale(.92);
        transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
    }

    .planos-trilho .plano.no-meio {
        opacity: 1;
        transform: scale(1);
    }

    /* O realce escuro é do plano recomendado e não muda de lugar. Nas
       beiradas ele fica apagado como os outros, senão um cartão pela metade
       chamaria mais atenção que o que está sendo lido. */
    .plano-destaque { box-shadow: 0 10px 26px rgba(2, 59, 33, 0.20); }

    .planos-trilho .plano-destaque.no-meio {
        box-shadow: 0 18px 44px rgba(2, 59, 33, 0.28);
    }

    /* As bolinhas só existem aqui: no computador os três estão à vista e não
       há posição para indicar. */
    .planos-bolinhas {
        display: flex;
        justify-content: center;
        gap: 7px;
        margin: 4px 0 14px;
    }

    .planos-bolinha {
        width: 7px;
        height: 7px;
        padding: 0;
        border: none;
        border-radius: 999px;
        background: var(--cinza-200);
        cursor: pointer;
        transition: width .22s ease, background-color .22s ease;
    }

    /* A bolinha da vez vira um traço: dois pontos do mesmo tamanho em cores
       parecidas não dizem qual é o atual num relance. */
    .planos-bolinha.ativa {
        width: 22px;
        background: var(--verde-700);
    }

    .planos-topo { margin-bottom: 18px; }
    .plano-paraquem { min-height: 0; }
}

@media (max-width: 560px) {
    .plano { padding: 22px 18px 20px; }
    .plano-valor { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .plano, .plano-botao, .plano-botao i, .planos-bolinha { transition: none; }
    .plano:hover, .plano-botao:hover { transform: none; }
}

/* O recuo da tela, por faixa de largura.

   A fileira de planos precisa encostar nas bordas para o cartão da beirada
   espiar; para isso ela usa margem negativa do tamanho do recuo do container.
   O recuo muda por breakpoint (40 / 18 / 14), e um número chutado aqui deixaria
   a fileira desalinhada em duas das três larguras. */
.dashboard-container { --recuo-da-tela: 40px; }

@media (max-width: 900px) {
    .dashboard-container { --recuo-da-tela: 18px; }
}

@media (max-width: 860px) {
    .dashboard-container { --recuo-da-tela: 14px; }
}

/* O aviso do botão de assinar. Nasce escondido e só aparece depois do
   clique: um alerta permanente em cima de uma tela de vendas afunda a
   própria oferta. */
/* O aviso de "pagamento nao ligado" saiu junto com o motivo dele: o botao
   agora leva ao checkout de verdade. As regras ficariam sem dono. */

/* ==========================================================================
   PLANOS POR DURAÇÃO

   O mesmo produto em quatro prazos, e cada prazo com dois caminhos: pagar uma
   vez pelo período, ou deixar renovando em troca de desconto. Os dois ficam
   no MESMO cartão porque são o mesmo plano — separá-los daria oito cartões
   para dizer a mesma coisa, e a tela já é longa.

   O que separa os dois caminhos dentro do cartão é a forma, não um título: o
   de cima é liso, o de baixo tem moldura tracejada e o carimbo do desconto.
   A moldura diz "isto aqui é uma oferta" sem precisar escrever.
   ========================================================================== */

/* Tres prazos, tres colunas. Eram quatro ate o Anual sair. */
.planos-trilho {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.plano {
    padding: 22px 18px 20px;
}

.plano-nome {
    margin: 0 0 14px;
    font-size: 17px;
}

/* --- Cada caminho -------------------------------------------------------- */

.plano-via {
    position: relative;
}

.plano-etiqueta {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--verde-100, #e5f5ee);
    color: var(--verde-800);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plano-destaque .plano-etiqueta {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.plano-preco { margin-bottom: 6px; }
.plano-valor { font-size: 32px; }
.plano-preco-grande .plano-valor { font-size: 34px; }

/* A forma de pagamento em letra pequena, logo abaixo do número: é a ressalva
   do preço, e ressalva longe do preço não é lida. */
.plano-forma {
    margin: 0 0 12px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--cinza-600);
}

.plano-destaque .plano-forma { color: rgba(255, 255, 255, 0.72); }

/* O "ou" com a linha atravessando: é ele que diz que os dois preços acima e
   abaixo são alternativas, e não duas cobranças somadas. */
.plano-ou {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: var(--cinza-600);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.plano-ou::before,
.plano-ou::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cinza-200);
}

.plano-destaque .plano-ou { color: rgba(255, 255, 255, 0.6); }
.plano-destaque .plano-ou::before,
.plano-destaque .plano-ou::after { background: rgba(255, 255, 255, 0.2); }

/* A caixa da recorrência, tracejada como na referência. */
.plano-via-recorrencia {
    padding: 16px 14px 12px;
    border: 2px dashed var(--verde-600);
    border-radius: 14px;
    background: var(--verde-050, #f2faf6);
}

.plano-destaque .plano-via-recorrencia {
    border-color: rgba(251, 222, 6, 0.55);
    background: rgba(255, 255, 255, 0.07);
}

/* O carimbo do desconto, mordendo o canto da caixa. */
.plano-desconto {
    position: absolute;
    top: -11px;
    right: -6px;
    padding: 3px 10px;
    border-radius: 8px;
    background: var(--amarelo);
    color: var(--amarelo-texto);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}

.plano-cancelar {
    margin: 9px 0 0;
    font-size: 11px;
    text-align: center;
    color: var(--cinza-600);
}

.plano-destaque .plano-cancelar { color: rgba(255, 255, 255, 0.65); }

/* --- Os botões ----------------------------------------------------------- */

.plano-botao {
    padding: 12px 14px;
    font-size: 13.5px;
    gap: 7px;
}

.plano-botao i { font-size: 11px; opacity: 0.9; }
.plano-botao:hover i { transform: none; }

/* O pré-pago é o caminho sóbrio: escuro e sem brilho, para o verde do outro
   botão continuar sendo o que puxa o olho. */
.plano-botao-escuro {
    background: var(--verde-900, #023b21);
}

.plano-botao-escuro:hover {
    background: #011f11;
    box-shadow: 0 8px 20px rgba(2, 59, 33, 0.3);
}

.plano-destaque .plano-botao-escuro {
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
}

.plano-destaque .plano-botao-escuro:hover {
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
}

/* --- De quem é este prazo ------------------------------------------------ */

.plano-paraquem {
    margin: 18px 0 0;
    min-height: 0;
    font-size: inherit;
    color: inherit;
}

.plano-paraquem-titulo {
    margin-bottom: 9px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--verde-900, #023b21);
}

.plano-destaque .plano-paraquem-titulo { color: #fff; }

.plano-lista li { font-size: 12.5px; }

.plano-lista i { width: 17px; height: 17px; font-size: 8px; }

/* A lista longa de recursos com letra um pouco menor: ela é para CONFERIR,
   não para escolher — quem está escolhendo já decidiu no bloco de cima. */
.plano-lista-recursos li { font-size: 12px; }

.plano-lista-titulo { margin-top: 0; }

.plano-risco { margin: 18px 0 14px; }

/* ==========================================================================
   QUATRO PRAZOS NUMA TELA ESTREITA
   ========================================================================== */

/* Com tres cartoes e sem a caixa da recorrencia, a fileira cabe bem mais
   cedo: a quebra em duas colunas so e precisa abaixo de 900, onde o
   carrossel ja assume. */

@media (max-width: 900px) {
    .planos-trilho { grid-template-columns: none; }

    /* Com quatro cartões a beirada importa ainda mais: é ela que diz que a
       fileira não acabou no segundo. */
    .plano { flex: 0 0 86%; max-width: 340px; }
}

/* ==========================================================================
   A BUSCA NA WEB QUE DESCE

   O "ver mais imagens" trazia mais de cem figuras e a grade mostrava doze; as
   outras iam para o lixo. Agora o botão desce a busca, e a grade cresce sem
   apagar o que já está na tela — quem desceu cinco vezes não perde as de cima
   ao pedir a sexta.
   ========================================================================== */

/* A grade da web é um bloco dentro do resultado, e não os ladrilhos soltos:
   assim o rodapé com o botão fica FORA dela e não vira um ladrilho torto no
   meio das fotos. Por ser um filho só, precisa atravessar a linha inteira e
   refazer a grade por dentro. */
.figure-grade-web {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-content: start;
}

/* A caixa de resultados não precisa de teto próprio: ela vive dentro da
   janela da figura, e é o corpo da janela que rola. Medido com 76 figuras na
   grade: o corpo passa a rolar sozinho e o rodapé com o botão continua
   alcançável. */

.figura-modal .figure-grade-web {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

/* O rodapé do fundo da lista: a conta à esquerda, o botão à direita. A conta
   é o que diz que ainda há mais — sem ela o botão é uma aposta. */
.figure-more-fundo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cinza-200, #E5E7EB);
}

.figure-conta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cinza-600, #7B8A82);
}

.figure-fim {
    flex: 1;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--cinza-600, #7B8A82);
}

@media (max-width: 860px) {
    /* Três por linha no telefone já dá ladrilho de ~100px; mais que isso vira
       miniatura de selo e não dá para reconhecer a embalagem. */
    .figure-grade-web { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   A FIGURA QUE AINDA ESTÁ CHEGANDO

   Colar uma lista de trinta produtos deixava a janela aberta com o botão
   girando enquanto o servidor varria a web item por item. Agora o encarte
   sobe na hora — nome, preço e unidade vêm da lista colada — e o lugar da
   figura fica com este aviso enquanto a foto não chega.

   É um CÍRCULO, e sempre do mesmo tamanho. A primeira versão pintava a
   caixa inteira da figura com uma faixa clara atravessando: um retângulo
   grande, de tamanho diferente em cada produto, que no meio do encarte
   parecia parte da arte em vez de um aviso de espera. Um círculo girando
   de 44px é a forma que todo mundo já sabe ler, e não muda de produto para
   produto nem de formato para formato.
   ========================================================================== */

.product-img-container.figura-carregando {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}

/* A figura vazia não ocupa espaço nenhum; o círculo precisa de um palco com
   tamanho próprio, e por isso ele é desenhado no `::before` e não no fundo. */
.product-img-container.figura-carregando::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--roda-da-figura, 44px);
    height: var(--roda-da-figura, 44px);
    margin: calc(var(--roda-da-figura, 44px) / -2) 0 0 calc(var(--roda-da-figura, 44px) / -2);

    /* O anel: três quartos apagados e um quarto verde. É o quarto colorido
       que se vê girar — um anel inteiro girando não teria como mostrar que
       está girando. */
    border: 4px solid rgba(5, 133, 73, 0.15);
    border-top-color: var(--verde-700, #058549);
    border-radius: 50%;
    background: none;
    box-shadow: none;
    cursor: default;
    opacity: 1;
    animation: roda-da-figura 0.8s linear infinite;
    z-index: 2;
}

/* O ::after é uma das alças de redimensionar; aqui ele não tem o que fazer. */
.product-img-container.figura-carregando::after { content: none; }

@keyframes roda-da-figura {
    to { transform: rotate(360deg); }
}

/* O tamanho é em PIXELS DE TELA, e por isso desfaz a escala da folha: um
   A4 a 19% de zoom encolheria o círculo a 8px, e numa TV ele viraria uma
   bola no meio do cartaz. O `--zoom-da-folha` é escrito pelo applyPreviewZoom
   a cada ajuste, o mesmo que o convite do encarte vazio usa. */
.product-img-container.figura-carregando::before {
    --roda-da-figura: clamp(22px, calc(30px / var(--zoom-da-folha, 1)), 90px);
}

/* Quem pediu menos movimento recebe o anel parado, que ainda diz "aqui vai
   entrar uma foto" sem nada girando. */
@media (prefers-reduced-motion: reduce) {
    .product-img-container.figura-carregando::before { animation: none; }
}

/* Sem figura o container está em `display: none` (a regra do modo "figura
   oculta"). Enquanto a foto está a caminho ele precisa aparecer, senão não
   há onde o círculo girar. */
.product-item.sem-figura .product-img-container.figura-carregando {
    display: flex;
}

/* ==========================================================================
   GUARDAR NA GALERIA: A PERGUNTA QUE PASSAVA DESPERCEBIDA

   Era uma caixinha de marcar num retângulo verde-claro, do mesmo tom do resto
   do painel, encostada logo acima do SALVAR. A decisão que ela carrega não é
   pequena — é se a figura fica na galeria da loja ou some depois do encarte —
   e ela se parecia com uma nota de rodapé.

   Agora tem peso: moldura marcada, visto grande e o texto dizendo o que
   acontece em cada caso. Continua sendo a mesma caixa de marcar; o que mudou
   é ela parecer uma escolha.
   ========================================================================== */

.bg-editor-guardar {
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 2px solid var(--verde-600);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(5, 133, 73, 0.12);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.bg-editor-guardar:hover {
    border-color: var(--verde-800);
    box-shadow: 0 4px 14px rgba(5, 133, 73, 0.2);
}

/* A caixa de marcar de 13px era do tamanho do texto ao lado; num painel cheio
   de botões ela não se lia como controle. */
.bg-editor-guardar input {
    margin-top: 0;
    width: 22px;
    height: 22px;
    flex: none;
}

.bg-editor-guardar b {
    font-size: 14px;
    font-weight: 800;
}

/* Desmarcada, a moldura esfria: a cor confirma a escolha sem precisar olhar o
   quadradinho. `:has` cobre os navegadores atuais; onde não houver, a caixa
   continua marcada e verde, que é o padrão. */
.bg-editor-guardar:has(input:not(:checked)) {
    border-color: var(--cinza-200, #E5E7EB);
    background: #fff;
    box-shadow: none;
}

.bg-editor-guardar:has(input:not(:checked)) b {
    color: var(--cinza-600, #7B8A82);
}

/* ==========================================================================
   UNIDADE E BALÃO DO PREÇO

   A linha tem quatro controles de naturezas diferentes: um campo de texto
   curtíssimo ("Un", "Kg"), um menu com oito estilos de balão e dois seletores
   de cor. Medido no painel de 380px: o campo de unidade saía com 30px — não
   cabia nem "Un" — e as alturas vinham 32 / 34 / 32 / 32.

   Duas causas, e a segunda é a que fez a primeira tentativa de conserto
   falhar:

   1. O campo herda "flex: 1 1 0%" da regra geral de input de texto. Com a
      base do flex em zero, um "width" qualquer deixa de valer: o tamanho
      passa a ser só a sobra depois do menu, e o menu é largo.

   2. A regra .product-editor input[type=text] { width: 100% } tem
      especificidade (0,2,1) — duas classes MAIS um elemento, porque o
      seletor de atributo conta como classe e "input" conta como elemento.
      Um seletor de duas classes como .pe-inline .small-input é (0,2,0) e
      PERDE, por mais embaixo que esteja no arquivo. Foi exatamente o que
      aconteceu: a regra nova aplicava o flex e o min-width, e a largura
      continuava vindo do 100% da regra antiga.

   Por isso tudo aqui carrega .product-editor na frente: (0,3,0) ganha de
   (0,2,1), e aí cada um recebe o papel que tem — o campo é fixo, o menu é
   quem estica, e todos com a mesma altura.
   ========================================================================== */

.product-editor .pe-inline {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* A unidade é um campo de duas ou três letras: largura fixa, e explícita nos
   três eixos para não depender de qual regra genérica ganha o cascade. */
.product-editor .pe-inline .small-input {
    flex: 0 0 auto;
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    text-align: center;
    text-transform: uppercase;
}

/* O menu é quem toma a sobra.  porque um item de flex não
   encolhe abaixo do próprio conteúdo sem isso — e "Serrilhado" é largo. */
.product-editor .pe-inline select {
    flex: 1 1 110px;
    width: auto;
    min-width: 0;
}

/* Os seletores de cor são quadrados e não encolhem. */
.product-editor .pe-inline input[type="color"] {
    flex: 0 0 auto;
    width: 34px;
    min-width: 34px;
    padding: 2px;
    cursor: pointer;
}

/* Uma altura só para a linha inteira: 32 contra 34 é pouco para nomear, e o
   bastante para a linha parecer torta. */
.product-editor .pe-inline .small-input,
.product-editor .pe-inline select,
.product-editor .pe-inline input[type="color"] {
    height: 34px;
    box-sizing: border-box;
}

@media (max-width: 860px) {
    /* No telefone o painel é mais estreito ainda: o menu ganha a linha inteira
       em vez de espremer os outros três. */
    .product-editor .pe-inline select { flex: 1 1 100%; order: 3; }
    .product-editor .pe-inline .small-input { order: 1; }
    .product-editor .pe-inline input[type="color"] { order: 2; }
}

/* ==========================================================================
   O RODAPÉ RECOLHIDO NÃO DEIXA RISCO

   Sem rodapé, a folha ainda terminava com uma tira escura de 2px. A regra do
   `.offer-footer.inactive` já zerava a borda de propósito — o comentário lá em
   cima diz isso com todas as letras —, mas ela mora na linha 774 e os estilos
   de rodapé (dark, banner, premium) moram da 5619 em diante. Mesma
   especificidade, duas classes cada; quem está mais embaixo no arquivo ganha,
   e o `border-top: 2px` voltava.

   Conferido na folha: altura 2px, borda de 2px, fundo #0d0d0d — um risco preto
   atravessando o pé de um encarte que não pediu rodapé nenhum, e que saía
   também no arquivo exportado.

   Aqui embaixo de todos eles, a mesma regra finalmente vale. `!important` não
   é preciso: basta vir depois.
   ========================================================================== */

.offer-footer.inactive {
    border: 0;
    box-shadow: none;
}

/* ==========================================================================
   PLANOS PRÉ-PAGOS: DE, POR, QUANTO POR CENTO E QUANTO POR MÊS

   A tela tinha dois caminhos por cartão (pré-pago e recorrência). Sobrou um
   só, e no espaço que abriu entram as três informações que faltavam para
   alguém comparar os prazos: de quanto era, quanto por cento caiu, e quanto
   sai o mês dentro do pacote.

   O preço por mês é a comparação que a pessoa realmente faz. Sem ele o
   semestral é só o número maior da tela.
   ========================================================================== */

/* A linha do "de R$ 149,99" com o carimbo do desconto ao lado. Um diz de
   quanto caiu, o outro diz o quanto — juntos, um confirma o outro. */
.plano-de {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.plano-riscado {
    font-size: 14px;
    font-weight: 600;
    color: var(--cinza-600, #7B8A82);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.plano-destaque .plano-riscado { color: rgba(255, 255, 255, 0.62); }

/* O carimbo do desconto deixa de ser absoluto: aqui ele fica na linha, ao lado
   do preço riscado, que é onde se lê "caiu disto para aquilo". */
.plano-desconto {
    position: static;
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--amarelo);
    color: var(--amarelo-texto);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: none;
}

.plano-preco { margin-bottom: 2px; }

.plano-por-mes {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--cinza-600, #7B8A82);
}

.plano-por-mes b {
    font-weight: 800;
    color: var(--verde-900, #023b21);
}

.plano-destaque .plano-por-mes { color: rgba(255, 255, 255, 0.75); }
.plano-destaque .plano-por-mes b { color: #fff; }

.plano-botao i { transition: transform 0.15s ease; }
.plano-botao:hover i { transform: translateX(3px); }

/* ==========================================================================
   O CUPOM

   Fica antes dos cartões porque vale para os três. Discreto de propósito:
   quem não tem cupom não pode ser atrapalhado por ele, e o preço cheio
   continua sendo o que se lê primeiro.
   ========================================================================== */

.planos-cupom {
    max-width: 420px;
    margin: 0 auto 22px;
    padding: 14px 16px;
    border: 1px dashed var(--cinza-200, #E5E7EB);
    border-radius: 14px;
    background: #fff;
}

.planos-cupom-rotulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--verde-900, #023b21);
}

.planos-cupom-rotulo i { color: var(--verde-700, #058549); }

.planos-cupom-linha {
    display: flex;
    gap: 8px;
}

.planos-cupom-linha input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--cinza-200, #E5E7EB);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #fff;
}

.planos-cupom-linha input:focus {
    outline: none;
    border-color: var(--verde-600);
    box-shadow: 0 0 0 3px rgba(5, 133, 73, 0.14);
}

.planos-cupom-btn {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--verde-700, #058549);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease;
}

.planos-cupom-btn:hover:not(:disabled) { background: var(--verde-800); }
.planos-cupom-btn:disabled { opacity: 0.6; cursor: default; }

.planos-cupom-aviso {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    min-height: 0;
}

.planos-cupom-aviso.ok   { color: var(--verde-800); font-weight: 700; }
.planos-cupom-aviso.erro { color: #b3261e; font-weight: 600; }

/* A marca do cupom dentro do cartão, junto do preço riscado: é ali que se
   compara, e é ali que ela precisa aparecer. */
.plano-cupom-marca {
    padding: 3px 9px;
    border-radius: 7px;
    background: var(--verde-700, #058549);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}

.plano-destaque .plano-cupom-marca {
    background: #fff;
    color: var(--verde-900, #023b21);
}

@media (max-width: 900px) {
    .planos-cupom { margin-bottom: 18px; }
}

/* ==========================================================================
   A TELA DE PAGAMENTO

   Duas colunas: o que se está comprando, e como pagar. O resumo fica do LADO,
   e não em cima, porque ele precisa continuar à vista enquanto a pessoa digita
   o cartão — é ele que responde "quanto mesmo?" sem obrigar a rolar de volta.
   No celular ele volta para cima, que é o único lugar onde cabe.
   ========================================================================== */

.checkout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 920px;
    margin: 0 auto;
}

.checkout-resumo {
    position: sticky;
    top: 20px;
    padding: 24px 22px;
    border: 1px solid var(--cinza-200, #E5E7EB);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.checkout-titulo {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 800;
    color: var(--verde-900, #023b21);
}

.checkout-prazo {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cinza-600, #7B8A82);
}

.checkout-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 13.5px;
    border-top: 1px solid var(--cinza-200, #E5E7EB);
}

.checkout-linha-cupom b { color: var(--verde-700, #058549); }

.checkout-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 2px solid var(--verde-900, #023b21);
    font-size: 14px;
    font-weight: 700;
}

.checkout-total strong {
    font-size: 26px;
    font-weight: 800;
    color: var(--verde-900, #023b21);
}

.checkout-parcelas {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cinza-600, #7B8A82);
}

.checkout-voltar {
    display: inline-block;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--verde-700, #058549);
    text-decoration: none;
}

.checkout-voltar:hover { text-decoration: underline; }

.checkout-carregando,
.checkout-falha {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cinza-600, #7B8A82);
}

.checkout-falha { color: #b3261e; font-weight: 600; }

.checkout-pagamento {
    min-width: 0;
    padding: 6px;
}

/* O Brick chega de altura zero e cresce quando fica pronto. Sem a reserva, a
   página dá um pulo no meio do carregamento. */
#brick-pagamento { min-height: 320px; }

.checkout-aviso {
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.45;
}

.checkout-aviso-erro    { background: #fdecea; color: #b3261e; font-weight: 600; }
.checkout-aviso-aguarde { background: var(--verde-050, #f2faf6); color: var(--verde-800); }

/* --- O desfecho -----------------------------------------------------------

   Três caminhos com tempos muito diferentes, e a tela não pode tratá-los
   igual: o cartão responde na hora, o pix chega em minutos, o boleto em dias.
   A cor diz qual é antes de a pessoa ler. */

.checkout-desfecho {
    padding: 26px 22px;
    border: 1px solid var(--cinza-200, #E5E7EB);
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.checkout-desfecho p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cinza-600, #7B8A82);
}

.checkout-desfecho-cabeca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.checkout-desfecho-cabeca i { font-size: 38px; }
.checkout-desfecho-cabeca h2 { margin: 0; font-size: 20px; font-weight: 800; }

.checkout-desfecho-cabeca.aprovado i,
.checkout-desfecho-cabeca.aprovado h2 { color: var(--verde-700, #058549); }

.checkout-desfecho-cabeca.aguardando i,
.checkout-desfecho-cabeca.aguardando h2 { color: #b26a00; }

.checkout-desfecho-cabeca.recusado i,
.checkout-desfecho-cabeca.recusado h2 { color: #b3261e; }

.checkout-qr {
    display: block;
    width: 220px;
    height: 220px;
    margin: 0 auto 16px;
    border: 1px solid var(--cinza-200, #E5E7EB);
    border-radius: 12px;
}

/* O copia-e-cola do pix é um código de trezentos caracteres. O campo existe
   para ser copiado, não lido: uma linha só, e o botão ao lado. */
.checkout-copia {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.checkout-copia input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--cinza-200, #E5E7EB);
    border-radius: 10px;
    font-family: monospace;
    font-size: 12px;
    background: #fafafa;
    color: var(--cinza-600, #7B8A82);
}

.checkout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--verde-700, #058549);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.checkout-btn:hover { background: var(--verde-800); color: #fff; }

@media (max-width: 860px) {
    /* Uma coluna: o resumo sobe para cima do pagamento e para de grudar, que
       numa tela de telefone roubaria metade da altura útil. */
    .checkout { grid-template-columns: 1fr; gap: 16px; }
    .checkout-resumo { position: static; padding: 18px 16px; }
    .checkout-pagamento { padding: 0; }
    .checkout-qr { width: 190px; height: 190px; }
}

/* --- A fila de quem esqueceu a senha, no painel do admin ------------------
   Duas peças pequenas: o contador na aba, para um pedido não passar
   despercebido, e a caixa do link gerado. O link aparece uma vez só, então a
   caixa precisa chamar atenção sem parecer erro — daí o verde da marca, e não
   o vermelho de aviso. */
.admin-contador {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--vermelho, #D62828);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* O `li` da lista do admin é uma LINHA flex: nome à esquerda, ações à direita.
   A caixa do link, pendurada ali como terceiro filho, virava uma TERCEIRA
   COLUNA e espremia as outras duas — foi o que apareceu na tela, com o botão
   "Gerar outro link" quebrado em três linhas. Permitindo a quebra e dando a
   largura toda à caixa, ela desce para a linha de baixo, que é o lugar dela.
   O `:has` limita a mudança aos itens que têm link aberto. */
.admin-list > li:has(.senha-link) { flex-wrap: wrap; }

/* BOTÃO DE TEXTO NUMA LISTA FEITA PARA BOTÃO DE ÍCONE.

   `.list-actions button` é `width: 34px; height: 34px` — quadrado, porque nas
   outras listas do painel as ações são um lápis e uma lixeira. Aqui os botões
   dizem "Gerar link" e "Copiar o link": espremidos em 34px, o texto vazava
   para fora do cartão e abria uma barra de rolagem lateral.

   Medido: a caixa de ações ficava com 34px de largura para 94px de conteúdo.

   Só nesta aba, o botão volta a ter a largura do que está escrito nele. */
#painel-senhas .list-actions button,
#painel-senhas .list-actions a {
    width: auto;
    padding: 0 14px;
    white-space: nowrap;
}

/* E o bloco do nome cede o espaço. O `min-width: 0` é o que importa: sem ele,
   um filho flex se recusa a encolher abaixo do próprio conteúdo. */
#painel-senhas .admin-list > li > div:first-child {
    flex: 1;
    min-width: 0;
}

#painel-senhas .admin-nota { overflow-wrap: anywhere; }

.senha-link {
    flex: 1 0 100%;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--verde-600, #06A75C);
    border-radius: 8px;
    background: var(--verde-050, #F2FAF6);
}

.senha-link .admin-nota { margin: 0 0 8px; }

.senha-link input {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid var(--borda, #dfe3ea);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    background: #fff;
}

/* ==========================================================================
   A FOLHA SEM TEMA

   A faixa do topo é a arte do tema. Sem tema escolhido ela virava uma barra
   vermelha fixa, com "SUPER OFERTAS" escrito e a logo — sobra de quando o
   editor não tinha temas. Encarte novo nascia decorado por ninguém.

   Sem tema, a faixa some e a área de produtos, que é `flex: 1`, toma a folha
   inteira sem ninguém calcular altura.
   ========================================================================== */

.offer-container.sem-tema .offer-header,
.offer-container.sem-tema .tema-degrade {
    display: none;
}

/* SEM TEMA E SEM PRODUTO: o convite é a folha.

   Com a moldura, o branco ficava sendo uma caixa no meio de uma borda
   vermelha que não significa nada — o vermelho é só o fundo padrão da folha.
   Tirando o recuo da área e o vão do convite, o branco vai de borda a borda,
   e a folha vazia passa a ser um convite inteiro em vez de um enfeite. */
.offer-container.sem-tema.sem-produtos .products-container {
    padding: 0;
}

/* A folha fica branca por baixo. O `#c62828` de `.offer-container` existe
   para não aparecer linha branca nos vãos quando há tema; sem tema ele vira
   uma moldura vermelha decidida por ninguém, que escapava pelas beiradas. */
.offer-container.sem-tema.sem-produtos {
    background: #fff;
}

.offer-container.sem-tema.sem-produtos .empty-product-cta {
    inset: 0;
    border-radius: 0;
    background: #fff;
    /* O tracejado sai da borda e vira uma linha interna: encostado na beirada
       da folha ele lê como defeito de impressão, não como área clicável. */
    border: 0;
    box-shadow: inset 0 0 0 4px var(--cinza-200, #e5e7eb);
}

.offer-container.sem-tema.sem-produtos .empty-product-cta:hover {
    box-shadow: inset 0 0 0 4px var(--verde-600, #06A75C);
}
/* O CONVITE CRESCE — EM PIXELS DE TELA.

   Aqui mora a armadilha que me custou tres tentativas, e ela esta explicada
   mais acima neste arquivo: a regra .empty-product-cta .cta-inner DESFAZ a
   escala da folha, com transform: scale(var(--escala-do-convite)). O convite
   e um CONTROLE, e nao arte: fica do mesmo tamanho na tela em qualquer zoom,
   e nem entra na imagem exportada.

   O efeito e que os numeros daqui sao PIXELS DE TELA, e nao pixels da folha.
   Na primeira tentativa pus 46px no titulo achando que era tamanho de arte;
   com a contra-escala de 2,19x daquele zoom ele virou 100px na tela e saiu
   cortado nas duas pontas — lia-se "CIONE SEUS PRODU".

   E usar width: 100% no .cta-inner e pior ainda: os 100% valem sobre a folha
   NAO escalada, e a contra-escala multiplica tudo depois. Medido: o convite
   ficou com 1046px dentro de uma folha de 479px na tela.

   Entao nada de largura em porcentagem, e os tamanhos abaixo sao o que se le
   na tela. */
.offer-container.sem-tema.sem-produtos .empty-product-cta .cta-plus {
    width: 96px;
    height: 96px;
    border-radius: 26px;
    font-size: 46px;
    background: var(--verde-800, #046739);
    color: #fff;
    box-shadow: 0 12px 28px rgba(2, 59, 33, .22);
}

.offer-container.sem-tema.sem-produtos .empty-product-cta:hover .cta-plus {
    background: var(--verde-900, #023B21);
    color: #fff;
}

/* Teto em pixel, pelo mesmo motivo: com a contra-escala, porcentagem nao quer
   dizer o que parece. Daqui o titulo quebra em duas linhas em vez de vazar. */
.offer-container.sem-tema.sem-produtos .empty-product-cta .cta-inner {
    max-width: 340px;
}

.offer-container.sem-tema.sem-produtos .empty-product-cta .cta-text {
    font-size: 26px;
    line-height: 1.2;
}

.offer-container.sem-tema.sem-produtos .empty-product-cta .cta-nota {
    font-size: 15px;
}

/* ==========================================================================
   A BARRA FLUTUANTE DAS AÇÕES

   Os mesmos botões que moravam na barra de cima — salvar, baixar, imprimir,
   compartilhar e o zoom — numa coluna que flutua sobre a arte, à esquerda.
   Vale no celular E no computador: a barra de cima fica com o menu, o formato
   e a chave Encarte/Cartaz, que é o que decide a peça.

   O JavaScript move os grupos para cá uma vez, na abertura. Aqui só a
   aparência.
   ========================================================================== */

.acoes-da-arte {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Presa à área da arte, e não à tela: rolando a folha ela fica, mas
       dentro do quadro onde a arte vive — sobre a moldura cinza da esquerda,
       que não tem nada. */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    /* A coluna não intercepta o toque; os botões dentro dela sim. Sem isto
       ela viraria uma parede invisível sobre a arte, e arrastar a folha pela
       esquerda deixaria de funcionar. */
    pointer-events: none;
}

.acoes-da-arte .toolbar-bandeja {
    flex-direction: column;
    gap: 3px;
    padding: 4px;
    border-radius: 14px;
    /* Translúcida, e não branca chapada: a coluna fica EM CIMA da arte, e
       a 94% ela escondia o pedaço da folha que estava atrás — no celular,
       onde a folha ocupa a tela, isso era a borda do encarte inteira. O
       desfoque leve mantém os ícones legíveis sobre uma arte colorida sem
       apagar o que está embaixo. */
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
    pointer-events: auto;
}

@media (max-width: 860px) {
    .acoes-da-arte .toolbar-bandeja {
        background: rgba(255, 255, 255, .45);
        box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
    }
}

/* O TAMANHO FOI PARA BAIXO.
   
   A primeira versão usou 42px, que é a medida de um botão que o polegar
   procura numa barra. Só que estes não são botões de barra: são botões EM
   CIMA da arte, e a arte é o assunto da tela. Em 42px a coluna comia um
   pedaço visível da folha. Em 32px ela continua confortável de acertar e some
   do caminho. */
.acoes-da-arte .tool-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--verde-900, #023B21);
    font-size: 13px;
}

.acoes-da-arte .tool-btn-destaque {
    background: var(--verde-800, #046739);
    color: #fff;
}

/* DESFAZER E REFAZER SEM PARA ONDE IR.

   O botão continua no lugar, apagado, em vez de sumir: coluna que muda de
   tamanho sozinha faz os outros botões dançarem debaixo do dedo, e a pessoa
   erra o alvo que estava mirando. Apagado, ele também ENSINA — quem vê o par
   de setas sabe que existe desfazer antes de precisar dele.

   `cursor: default` e não `not-allowed`: não é proibição, é só nada para
   desfazer ainda. */
.tool-btn:disabled {
    opacity: .32;
    cursor: default;
}

.tool-btn:disabled:hover {
    background: none;
}

/* "Baixar" perde a palavra: numa coluna de 32px ela não cabe, e a seta para
   baixo já diz a mesma coisa. */
.acoes-da-arte .tool-btn-texto {
    display: none;
}

/* A alça passa a ser arrastável, e o navegador precisa saber disso.
   
   Sem `touch-action: none`, o gesto vertical que começa na alça é entendido
   como rolagem da página: o navegador assume o controle do dedo e os nossos
   `pointermove` param de chegar no meio do arrasto. */
@media (max-width: 860px) {
    .painel-pega {
        touch-action: none;
    }
}

/* ==========================================================================
   O MODO DA PEÇA: DE CHAVE PARA MENU

   Era uma chave com "Encarte" de um lado e "Cartaz" do outro. Chave serve
   para ligar e desligar UMA coisa; aqui não há ligado nem desligado, há duas
   peças diferentes. Com as duas palavras acesas ao mesmo tempo, saber qual
   valia dependia de reparar para que lado a bolinha tinha corrido.

   O menu escreve o estado, e tem espaço para a linha que a chave nunca teve:
   o que cada modo faz com a folha.
   ========================================================================== */

.modo-grupo {
    position: relative;
}

.modo-botao {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.modo-botao:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .38);
}

.modo-botao[aria-expanded="true"] {
    background: #fff;
    border-color: #fff;
    color: var(--verde-900, #023B21);
}

.modo-botao:focus-visible {
    outline: 2px solid var(--amarelo, #FFD600);
    outline-offset: 2px;
}

.modo-botao-icone {
    font-size: 14px;
}

.modo-botao-seta {
    font-size: 10px;
    opacity: .75;
    transition: transform .18s ease;
}

.modo-botao[aria-expanded="true"] .modo-botao-seta {
    transform: rotate(180deg);
}

/* --- O menu --- */

.menu-modo {
    position: absolute;
    top: calc(100% + 8px);
    /* Ancorado à DIREITA: o botão mora no canto direito da barra, e um menu
       alinhado à esquerda sairia da tela. */
    right: 0;
    /* ACIMA DA GAVETA, ABAIXO DO MENU LATERAL.

       Os dois estavam em 60, e a gaveta é `position: fixed` e vem depois no
       HTML — então ela ganhava o empate e cobria o menu pela metade no
       celular. 100 passa por cima dela; o menu lateral, em 120, continua
       cobrindo os dois, que é a ordem certa: ele é a navegação da casa. */
    z-index: 100;
    min-width: 290px;
    padding: 10px;
    border: 1px solid #e3e8e5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(2, 59, 33, .22);
}

.menu-modo-titulo {
    padding: 4px 8px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--verde-800, #046739);
}

.menu-modo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .14s ease;
}

.menu-modo-item:hover {
    background: var(--verde-050, #F2FAF6);
}

/* A casa do ícone é um <span>, e o glifo vai dentro dele. Era o próprio <i>
   com `display: grid`, mas a folha do Font Awesome carrega DEPOIS desta e o
   `.fa-solid { display: inline-block }` dela vencia: o grid sumia e o glifo
   colava no canto de cima da casa, cada um numa altura. */
.menu-modo-icone {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--verde-100, #E5F5EE);
    color: var(--verde-800, #046739);
    font-size: 15px;
}

.menu-modo-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Item flex não encolhe abaixo do conteúdo sem isto, e a descrição é
       longa: sem o `min-width: 0` ela empurraria o visto para fora do menu. */
    min-width: 0;
    flex: 1;
}

.menu-modo-nome {
    font-size: 14px;
    font-weight: 800;
    color: var(--verde-900, #023B21);
}

.menu-modo-desc {
    font-size: 12px;
    line-height: 1.3;
    color: #667085;
}

/* O visto só aparece no escolhido. Ele é o que responde "em qual eu estou?"
   sem a pessoa ter de comparar duas coisas parecidas. */
.menu-modo-marca {
    flex: 0 0 auto;
    color: var(--verde-700, #058549);
    font-size: 14px;
    opacity: 0;
}

.menu-modo-item.escolhido {
    background: var(--verde-050, #F2FAF6);
}

.menu-modo-item.escolhido .menu-modo-marca {
    opacity: 1;
}

.menu-modo-item.escolhido .menu-modo-icone {
    background: var(--verde-800, #046739);
    color: #fff;
}

@media (max-width: 860px) {
    /* No celular a barra é estreita: o rótulo sai e fica o ícone com a seta,
       que continua dizendo em que modo se está. */
    .modo-botao {
        height: 34px;
        padding: 0 10px;
    }

    .modo-botao-texto {
        display: none;
    }

    .menu-modo {
        min-width: 260px;
    }
}

/* ==========================================================================
   MINHA ASSINATURA

   A tela que faltava: "Assinatura", no menu, levava para a lista de preços, e
   quem já tinha comprado não tinha onde ver o que comprou.

   Desenhada depois de olhar a equivalente do crieoferta. O que veio de lá: o
   cartão com o resumo do plano e a tabela de pagamentos. O que não veio: os
   créditos de IA (não existem aqui), o painel de recorrência (a loja vende
   prazo fechado) e o histórico com as tentativas abandonadas misturadas às
   pagas, cada uma com um botão Pagar — lado a lado, parecem dívidas.
   ========================================================================== */

.assin-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.assin-topo h1 {
    margin: 0 0 4px;
    font-size: 24px;
    color: var(--verde-900, #023B21);
}

.assin-topo p {
    margin: 0;
    font-size: 14px;
    color: #667085;
}

.assin-botao-principal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    background: var(--verde-800, #046739);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.assin-botao-principal:hover { background: var(--verde-700, #058549); }

/* --- A faixa de aviso ---
   Só existe quando há o que avisar. Uma faixa verde dizendo "está tudo bem"
   em toda visita é ruído: o lugar de "está tudo bem" é o cartão do plano,
   dizendo até quando ele vale. */
.assin-faixa {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 16px;
    margin-bottom: 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.assin-faixa span { flex: 1; min-width: 200px; }

.assin-faixa-neutro {
    background: var(--verde-050, #F2FAF6);
    border: 1px solid var(--verde-100, #E5F5EE);
    color: var(--verde-900, #023B21);
}

.assin-faixa-atencao {
    background: #FFF8E1;
    border: 1px solid #F5E08C;
    color: #6E6202;
}

.assin-faixa-ruim {
    background: var(--vermelho-100, #FDECEC);
    border: 1px solid #F3C9D1;
    color: var(--vermelho, #D62828);
}

/* O BOTÃO SOMIU, E O TRUQUE FOI O CULPADO.

   A primeira versão era esperta demais: `background: currentColor` no botão,
   e depois uma regra por tom mudando o `color` dele para a cor de fundo da
   faixa. Só que `currentColor` é o `color` do PRÓPRIO elemento — mudá-lo
   mudou o fundo junto, e o botão ficou com texto e fundo da mesma cor.
   Medido na tela: rgb(255,248,225) sobre rgb(255,248,225).

   Três pares escritos à mão são três linhas a mais e zero surpresa. */
.assin-faixa-botao {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.assin-faixa-neutro .assin-faixa-botao {
    background: var(--verde-800, #046739);
    color: #fff;
}

.assin-faixa-atencao .assin-faixa-botao {
    background: #6E6202;
    color: #FFF8E1;
}

.assin-faixa-ruim .assin-faixa-botao {
    background: var(--vermelho, #D62828);
    color: #fff;
}

/* --- Os cartões --- */

.assin-cartao {
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 14px;
    background: #fff;
}

.assin-cartao-cabeca {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.assin-cartao-cabeca h2 {
    margin: 0;
    font-size: 19px;
    color: var(--verde-900, #023B21);
}

.assin-titulo-menor {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--verde-900, #023B21);
}

.assin-subtitulo {
    margin: 18px 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #667085;
}

.assin-selo {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.assin-selo-ok      { background: var(--verde-100, #E5F5EE); color: var(--verde-800, #046739); }
.assin-selo-atencao { background: #FFF8E1; color: #6E6202; }
.assin-selo-ruim    { background: var(--vermelho-100, #FDECEC); color: var(--vermelho, #D62828); }
.assin-selo-neutro  { background: #F1F3F6; color: #667085; }

/* Grade que se acomoda sozinha: quatro dados numa tela larga, dois numa
   estreita, um no celular. Sem media query para cada degrau. */
.assin-dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin: 0;
}

.assin-dado dt {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a93a3;
}

.assin-dado dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1f2430;
}

.assin-dado-forte dd {
    font-size: 19px;
    font-weight: 800;
    color: var(--verde-800, #046739);
}

.assin-nota {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #667085;
}

.assin-nota-ruim { color: var(--vermelho, #D62828); }

/* --- A tabela --- */

.assin-tabela-area { overflow-x: auto; }

.assin-tabela small { color: #8a93a3; }

/* --- As tentativas que não passaram ---
   Atrás de um clique. Precisam existir, para quem teve um cartão recusado
   poder conferir; não precisam ser a primeira coisa que se vê. */
.assin-recusados {
    padding: 14px 18px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 14px;
    background: #fafbfc;
}

.assin-recusados summary {
    font-size: 13px;
    font-weight: 700;
    color: #667085;
    cursor: pointer;
}

.assin-recusados summary:hover { color: var(--verde-800, #046739); }

/* ==========================================================================
   OS DOIS TIPOS DE CARTAZ

   A folha sempre teve duas classes para o cartaz — `modo-cartaz`, que faz o
   preço gigante, e `modo-cartazista`, que esconde a foto, o cabeçalho e o
   rodapé — e elas eram ligadas juntas. Metade do que o CSS já sabia desenhar
   nunca chegava à tela.

   Separadas, viram duas peças: o cartaz de gôndola e o cartaz com tema e
   foto. Este bloco é só a escolha entre os dois, no painel.
   ========================================================================== */

.modo-estilo-cartaz {
    display: block;
    margin-bottom: 10px;
}

.modo-estilo-titulo {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a93a3;
}

.modo-estilo-botoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.modo-estilo-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 8px;
    border: 2px solid var(--cinza-200, #e5e7eb);
    border-radius: 11px;
    background: #fff;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.modo-estilo-btn:hover { border-color: var(--verde-600, #06A75C); }

.modo-estilo-btn i {
    font-size: 16px;
    color: #8a93a3;
}

.modo-estilo-nome {
    font-size: 13px;
    font-weight: 800;
    color: #1f2430;
}

/* A segunda linha diz o que cada um FAZ. Dois nomes sozinhos — "Cartaz" e
   "Personalizado" — não distinguem nada para quem nunca viu os dois. */
.modo-estilo-desc {
    font-size: 10.5px;
    line-height: 1.25;
    color: #8a93a3;
}

.modo-estilo-btn.ativo {
    border-color: var(--verde-800, #046739);
    background: var(--verde-050, #F2FAF6);
}

.modo-estilo-btn.ativo i,
.modo-estilo-btn.ativo .modo-estilo-nome { color: var(--verde-800, #046739); }

/* ==========================================================================
   ONDE O SELO ASSENTA NA FAIXA

   A logo da loja fica sempre do outro lado da faixa, empurrada pelo `flex: 1`
   do `.badge-container`. Por isso a posição do selo importa: nos dois no mesmo
   canto, o encarte ganha uma pilha em vez de um cabeçalho.

   A classe vem do tema, e cai no cabeçalho quando ele é aplicado.
   ========================================================================== */

.offer-header.selo-centro .tema-selo   { margin-left: auto; margin-right: auto; }
.offer-header.selo-direita .tema-selo  { margin-left: auto; margin-right: 0; }
.offer-header.selo-esquerda .tema-selo { margin-left: 0; margin-right: auto; }

/* ==========================================================================
   A RECEITA DO TEMA, E A PRÉVIA DELA

   A tela de temas virou editor: quem sobe a arte escolhe também o balão do
   preço, as cores, onde o selo assenta e quanta emenda há entre a faixa e as
   ofertas. A prévia ao lado mostra o resultado ANTES de publicar — sem ela
   isto seria escolher no escuro e conferir depois montando um encarte de
   teste.
   ========================================================================== */

.receita-tema {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 14px;
    background: #fafbfc;
}

.receita-controles {
    display: grid;
    gap: 14px;
    align-content: start;
}

.receita-cores {
    display: flex;
    gap: 14px;
}

.receita-cor {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #667085;
}

.receita-cor input[type="color"] {
    width: 38px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 7px;
    background: none;
    cursor: pointer;
}

.receita-valor {
    float: right;
    color: var(--verde-800, #046739);
}

.receita-tema input[type="range"] { width: 100%; }

/* --- A PRÉVIA: UM ENCARTE DE VERDADE, EM ESCALA ---

   A folha é desenhada no TAMANHO REAL de cada formato — 1050×1485 no A4 em
   pé, 3840×2160 na TV — e encolhida por `transform: scale`, que o JavaScript
   calcula a partir da largura da coluna.

   Fazer assim, em vez de desenhar uma miniatura com medidas inventadas, é o
   que garante que a proporção entre a faixa e a área de ofertas seja a mesma
   do encarte. Todos os tamanhos daqui para baixo são pixels da FOLHA, não da
   tela: um nome de produto de 34px é 34px num encarte de 1050px de largura.
   ------------------------------------------------------------------------ */

.receita-previa {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.receita-previa-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.receita-previa-rotulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a93a3;
}

/* --- Os botões de formato --- */

.previa-formatos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.previa-formato {
    padding: 4px 9px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    color: #667085;
    cursor: pointer;
    white-space: nowrap;
}

.previa-formato:hover { border-color: var(--verde-600, #06A75C); }

.previa-formato.ativo {
    border-color: var(--verde-800, #046739);
    background: var(--verde-800, #046739);
    color: #fff;
}

/* --- O palco e a folha --- */

/* O palco reserva a altura. `transform` não ocupa espaço no layout: sem esta
   caixa, o que vem embaixo da prévia subiria por cima dela. A altura é posta
   pelo JavaScript, já multiplicada pela escala. */
.previa-palco {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    background: #fff;
}

.previa-folha {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    /* Do canto de cima à esquerda, e não do centro: assim a folha encolhida
       fica encostada no canto do palco, e a conta da altura fecha. */
    transform-origin: top left;
    background: #f4f4f4;
}

/* AS DUAS ESCALAS.

   A folha é desenhada no tamanho real e encolhida por `transform`, então uma
   medida escrita em pixels aqui encolhe junto. Numa TV de 3840px de largura a
   escala é 0,13: um preço de 72px sairia com 9px na tela, e a prévia diria
   que o encarte de TV é ilegível quando na verdade só a régua mudou.

   Por isso tudo que é tipografia vem multiplicado. `--fator-faixa` acompanha
   a largura da folha (o cabeçalho ocupa a folha inteira); `--fator` acompanha
   a largura de UM CARTÃO, que é o que decide o tamanho do texto de oferta —
   a TV é larga, mas divide a largura em quatro colunas. Os dois são postos
   pelo JavaScript, que conhece as medidas de cada formato. */
.previa-faixa {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(24px * var(--fator-faixa, 1));
    flex: 0 0 auto;
    background: #c62828 center / cover no-repeat;
}

/* As mesmas três posições do encarte, pelo mesmo mecanismo: o selo empurra,
   ou é empurrado, pela logo do outro lado. */
.previa-faixa.selo-esquerda .previa-selo-img { margin-right: auto; }
.previa-faixa.selo-centro .previa-selo-img   { margin: 0 auto; }
.previa-faixa.selo-direita .previa-selo-img  { margin-left: auto; order: 2; }
.previa-faixa.selo-direita .previa-logo      { order: 1; margin-right: auto; }

.previa-selo-img {
    max-height: 68%;
    max-width: 55%;
    object-fit: contain;
}

.previa-logo {
    margin-left: auto;
    padding: calc(14px * var(--fator-faixa, 1)) calc(24px * var(--fator-faixa, 1));
    border-radius: calc(14px * var(--fator-faixa, 1));
    background: rgba(255, 255, 255, .9);
    font-size: calc(26px * var(--fator-faixa, 1));
    font-weight: 800;
    letter-spacing: .06em;
    color: #333;
    white-space: nowrap;
}

/* A emenda: a cor do pé da faixa descendo até sumir sobre as ofertas. Aqui a
   cor é fixa porque a prévia não lê a arte enviada; o que ela mostra é a
   FORÇA, que é o que se escolhe. */
.previa-emenda {
    flex: 0 0 auto;
    background: linear-gradient(to bottom, rgba(198, 40, 40, .85), rgba(198, 40, 40, 0));
    /* Por cima dos cartões, como no encarte de verdade. */
    position: relative;
    z-index: 2;
    margin-bottom: -1px;
}

.previa-corpo {
    flex: 1;
    display: grid;
    align-content: start;
    min-height: 0;
}

.previa-produto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: calc(18px * var(--fator, 1));
    padding: calc(26px * var(--fator, 1)) calc(20px * var(--fator, 1));
    border-radius: calc(18px * var(--fator, 1));
    background: #fff;
    box-shadow: 0 calc(4px * var(--fator, 1)) calc(16px * var(--fator, 1)) rgba(0, 0, 0, .10);
}

.previa-nome {
    font-size: calc(34px * var(--fator, 1));
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    color: #1f2430;
}

/* O BALÃO DA PRÉVIA.

   Desenhado aqui, e não reaproveitado do encarte: lá ele é montado por
   JavaScript, com SVG para o trapézio. O que a prévia precisa mostrar é a
   FORMA, as CORES e a FONTE — e essas oito formas cabem em oito regras. */
.previa-balao {
    display: flex;
    align-items: baseline;
    gap: calc(2px * var(--fator, 1));
    padding: calc(14px * var(--fator, 1)) calc(30px * var(--fator, 1));
    background: var(--cor-balao, #ffe500);
    color: var(--cor-preco, #e30613);
    font-weight: 900;
    line-height: 1;
}

.previa-cifra    { font-size: calc(26px * var(--fator, 1)); }
.previa-numero   { font-size: calc(72px * var(--fator, 1)); }
.previa-centavos { font-size: calc(38px * var(--fator, 1)); }

.previa-balao.balao-trapezio    { clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); padding: calc(14px * var(--fator, 1)) calc(40px * var(--fator, 1)); }
.previa-balao.balao-arredondado { border-radius: 999px; }
.previa-balao.balao-chanfrado   { --canto: calc(22px * var(--fator, 1)); clip-path: polygon(var(--canto) 0, 100% 0, 100% calc(100% - var(--canto)), calc(100% - var(--canto)) 100%, 0 100%, 0 var(--canto)); }
.previa-balao.balao-serrilhado  { border-radius: calc(8px * var(--fator, 1)); outline: calc(5px * var(--fator, 1)) dashed rgba(0,0,0,.28); outline-offset: calc(-12px * var(--fator, 1)); }
.previa-balao.balao-splash      { border-radius: 42% 58% 55% 45% / 52% 45% 55% 48%; }
.previa-balao.balao-brush       { border-radius: calc(30px * var(--fator, 1)) calc(8px * var(--fator, 1)) calc(30px * var(--fator, 1)) calc(8px * var(--fator, 1)); transform: rotate(-1.5deg); }
.previa-balao.balao-modern      { border-radius: calc(8px * var(--fator, 1)) calc(30px * var(--fator, 1)) calc(8px * var(--fator, 1)) calc(30px * var(--fator, 1)); }

/* "Sem balão" é o preço solto sobre o cartão: nada de fundo, e a cor do
   número passa a ser a única coisa que o define. */
.previa-balao.balao-limpo {
    background: none;
    padding: 0;
}

@media (max-width: 860px) {
    /* Numa coluna só: lado a lado, cada metade fica estreita demais para a
       prévia dizer alguma coisa. */
    .receita-tema { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   OS TIPOS DE PRECO, MOSTRADOS EM VEZ DE ESCRITOS

   Era um <select> com sete linhas: "DE: / POR:", "FARDO / UNIDADE". Quem
   nunca montou encarte nao tem como saber o que sai de cada uma, e descobrir
   custava escolher, olhar a folha, voltar e trocar.

   As miniaturas sao a caixa de preco DE VERDADE, desenhada pelo mesmo codigo
   que monta a folha. Toda a medida dela sai de `--item-h`, entao trocar a
   altura no elemento redesenha a peca inteira no tamanho certo -- sem
   `transform: scale`, que borraria o texto.
   ========================================================================== */

.escolha-gatilho {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.escolha-gatilho:hover { border-color: var(--verde-600, #06A75C); }

/* O palco da miniatura do gatilho. Largura fixa para o nome ao lado nao
   dancar quando se troca de um tipo estreito para um alto. */
.escolha-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 62px;
    height: 44px;
    overflow: hidden;
    pointer-events: none;
}

.escolha-nome {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1f2430;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.escolha-gatilho i { color: #8a93a3; font-size: 12px; }

/* --- A grade dentro da janela --- */

.grade-de-escolhas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.escolha-cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--cinza-200, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}

.escolha-cartao:hover { border-color: var(--verde-600, #06A75C); }

.escolha-cartao.escolhido {
    border-color: var(--verde-800, #046739);
    box-shadow: 0 0 0 3px rgba(4, 103, 57, .12);
}

/* O palco reserva a altura e centraliza. Um "LEVE 3" e mais alto que um
   "SIMPLES"; sem altura fixa os cartoes ficariam de tamanhos diferentes e a
   grade viraria um degrau. */
.escolha-palco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 118px;
    overflow: hidden;
    pointer-events: none;
}

.escolha-rotulo {
    font-size: 12px;
    font-weight: 700;
    color: #545c6b;
    text-align: center;
}

/* DUAS COLUNAS TAMBEM NO CELULAR.

   A primeira versao caia para uma coluna abaixo de 420px, para o exemplo
   ficar grande. Medido em 375px: cartao de 353x166, um e meio na tela, e sete
   tipos viravam quatro telas de rolagem -- para uma escolha que existe
   justamente para ser comparada de relance. Em duas colunas cabem quatro de
   uma vez, e o desenho continua legivel porque ele encolhe pela altura que a
   caixa recebe (--item-h), e nao por escala, que borraria o texto.

   Uma coluna so fica para telas muito estreitas, onde duas nao caberiam. */
@media (max-width: 420px) {
    .grade-de-escolhas { gap: 8px; }
    .escolha-cartao { padding: 8px 6px; border-radius: 12px; }
    .escolha-palco { height: 96px; }
    .escolha-rotulo { font-size: 11.5px; }
}

@media (max-width: 330px) {
    .grade-de-escolhas { grid-template-columns: minmax(0, 1fr); }
}

/* A JANELA PRECISA DE TETO, PORQUE SAO SETE EXEMPLOS.

   Medido: com os sete cartoes ela chegava a 777px numa tela de 768 -- o
   titulo saia por cima e o "Leve 3" ficava cortado embaixo. As outras janelas
   do editor nunca bateram nisso porque tem menos conteudo, entao o teto fica
   so nesta, e nao na regra geral de `.modal-content`.

   `min-height: 0` no corpo nao e enfeite: item de flex nao encolhe abaixo do
   proprio conteudo sem isso, e a rolagem simplesmente nao apareceria. Terceira
   vez que esta pegadinha aparece neste projeto. */
.modal-escolhas {
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    max-height: 86dvh;
}

.modal-escolhas .modal-body {
    min-height: 0;
    overflow-y: auto;
}

/* ==========================================================================
   "MOSTRAR PRECO": DE BOTAO GRANDE A CHAVE

   Era um botao verde escrito "R$", do tamanho de um botao de acao -- e nao e
   acao nenhuma, e um sim/nao. Virou a mesma chave do "Selo +18" logo acima:
   mesma forma para o mesmo tipo de escolha, e uma linha em vez de um bloco.

   O verde aqui, e nao o vermelho do +18, porque os dois dizem coisas
   diferentes: o +18 e um AVISO (ligado chama atencao), e mostrar o preco e o
   estado NORMAL -- desligar e que e a excecao.
   ========================================================================== */

.pe-chave.active {
    border-color: #bfe6d0;
    background: #f3fbf6;
    color: var(--verde-900, #023B21);
}

.pe-chave.active i { color: var(--verde-800, #046739); }

.pe-chave.active .pe-switch { background: var(--verde-800, #046739); }

.pe-chave.active .pe-switch-bola { transform: translateX(15px); }

/* Desligado, o rotulo diz o que ESTA acontecendo, nao o que o botao faz.
   Sem isto a chave apagada continua lendo "Mostrar preco" e parece que o
   preco esta la -- quando ele acabou de sumir da folha. */
.pe-chave:not(.active) .pe-chave-texto::after {
    content: ' — oculto';
    font-weight: 600;
    color: #9aa1ad;
}

/* --- O GATILHO DO TIPO, AGORA EM LINHA INTEIRA ---

   Ele dividia a linha com o "mostrar preco", e em painel estreito sobravam
   uns 160px: a miniatura entrava e o nome virava "Si...". Sozinho na linha ha
   espaco para o desenho ficar legivel e para o nome inteiro. */
.pe-field-tipo { margin-bottom: 10px; }

.escolha-gatilho {
    gap: 12px;
    padding: 8px 12px;
    border-radius: 14px;
}

.escolha-mini {
    width: 76px;
    height: 46px;
}

.escolha-nome { font-size: 13.5px; }

/* "Trocar" e a palavra que falta: sem ela o gatilho parece um rotulo com uma
   figura, e nao um botao que abre alguma coisa. A seta sozinha e discreta
   demais no meio de um painel cheio de setas de secao. */
.escolha-trocar {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--verde-50, #eaf7f0);
    color: var(--verde-800, #046739);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

.escolha-gatilho:hover .escolha-trocar {
    background: var(--verde-800, #046739);
    color: #fff;
}

/* ==========================================================================
   A MINIATURA NAO PODE SAIR DO PROPRIO QUADRO

   A caixa de preco carrega `z-index: 50` -- ela precisa disso na folha, para
   ficar por cima da figura do produto. Fora da folha isso vira um problema:
   a barra fixa do "+ PRODUTO" tem `z-index: 2`, e as duas disputam no MESMO
   contexto de empilhamento. Resultado medido: rolando o painel ate o gatilho
   passar por baixo da barra, o balao amarelo aparecia desenhado EM CIMA do
   botao "+ PRODUTO".

   `isolation: isolate` resolve na origem: cria um contexto de empilhamento
   proprio, e o 50 de dentro passa a valer so dentro. Nao e o mesmo que subir
   o z-index da barra -- isso seria empurrar o problema para o proximo
   elemento que tambem precise ficar por cima.
   ========================================================================== */

.escolha-mini,
.escolha-palco {
    isolation: isolate;
}

/* --- A MINIATURA DO GATILHO ERA PEQUENA DEMAIS PARA DIZER ALGO ---

   Medido: desenhada com `--item-h: 52px`, a caixa saia com 45x18 pixels
   dentro de um espaco de 76x46. Nao estava cortada -- estava minuscula, e o
   "R$", o numero e o ",90 UN" viravam um borrao de tres tracos.

   Agora o quadro e maior e o desenho sai grande, encolhendo por escala SO se
   nao couber. Um "DE / POR" tem duas caixas empilhadas e ocupa o dobro da
   altura de um "Simples": sem esse ajuste, ou o quadro ficaria do tamanho do
   maior (e o menor nadaria nele), ou o maior seria cortado. */
.escolha-mini {
    width: 96px;
    height: 58px;
}

/* ==========================================================================
   PRECO COMPRIDO ENCOLHE A LETRA, EM VEZ DE ESTOURAR A CAIXA

   A caixa de preco cresce com o numero -- ate bater no `max-width: 100%` do
   cartao. Medido num A4 com dois por folha: o corpo do produto tem 243px, e
   "9,90" cabia em 156. Em "1999,99" a caixa chegava aos 243 e PARAVA, com a
   letra ainda no mesmo tamanho: o "R$", o numero e o ",99 UN" iam sendo
   espremidos uns contra os outros. Era o "fica estranho" de quem anuncia um
   eletrodomestico.

   A conta e por DIGITOS da parte inteira, e nao por largura medida: a largura
   depende da fonte escolhida no tema, e medir a cada tecla numa folha de
   trinta produtos seria trabalho a cada digito. O numero de digitos e sabido
   na hora de montar a caixa e vale para qualquer fonte.

   Os degraus foram escolhidos para a caixa caber no cartao de DOIS por folha,
   que e o mais apertado dos formatos comuns.
   ========================================================================== */

.product-price-box.preco-digitos-4 { --fator-preco: 0.80; }
.product-price-box.preco-digitos-5 { --fator-preco: 0.66; }
.product-price-box.preco-digitos-6 { --fator-preco: 0.55; }

/* ==========================================================================
   O SEGUNDO PRECO ABRE LOGO ABAIXO DO PRIMEIRO

   Ele morava na sub-camada, longe do principal: num "DE / POR" era preencher
   um no cartao, abrir a gaveta e preencher o outro noutro lugar. Numa lista
   de trinta ofertas, trinta gavetas.

   `.pc-campos` e uma grade de duas colunas -- amostra de cor e campo. O
   segundo preco ocupa a coluna do campo, sem amostra propria: a cor do preco
   vale para os dois, e um segundo quadradinho prometeria um controle que nao
   existe.
   ========================================================================== */

.pc-preco-segundo {
    grid-column: 2;
}

/* COM DOIS PRECOS, O ROTULO SOBE PARA CIMA DO CAMPO.

   Ha uma regra deliberada mais acima que ESCONDE o rotulo quando a lista fica
   abaixo de 340px -- e o painel do desktop tem 335. Ela fazia sentido enquanto
   o rotulo era decorativo: dizia "PRECO" ao lado de um cifrao que ja dizia o
   mesmo.

   Com dois campos empilhados, o rotulo passa a ser a UNICA coisa que distingue
   um do outro -- sem ele sao dois "R$ 0,00" iguais, e a pessoa preenche o DE
   no lugar do POR. Entao nos cartoes de dois precos ele volta, e vai para a
   propria linha: assim nao disputa largura com o campo, que era o motivo de
   te-lo escondido. */
.pc-card-dois-precos .pc-preco-caixa {
    flex-wrap: wrap;
    row-gap: 2px;
}

.pc-card-dois-precos .pc-rotulo {
    display: inline-block;
    flex-basis: 100%;
    width: fit-content;
}

/* Um pouco mais discreto que o de cima: o principal e o que a loja anuncia,
   o segundo e o apoio. */
.pc-preco-segundo .pc-rotulo {
    opacity: .78;
}

/* Com o rotulo ocupando a linha de cima, o cifrao e o campo tem de dividir a
   de baixo. Sem isto o campo achava que nao cabia e descia para uma TERCEIRA
   linha, deixando o "R$" sozinho no meio do cartao. */
.pc-card-dois-precos .pc-preco-caixa .pc-preco,
.pc-card-dois-precos .pc-preco-caixa .pc-preco2 {
    flex: 1 1 0;
    min-width: 0;
}

.pc-card-dois-precos .pc-preco-caixa .pc-moeda {
    flex: 0 0 auto;
}

/* ==========================================================================
   O PRECO SE MEDE PELA ALTURA DA CELULA -- MAS QUEM O CORTA E A LARGURA

   Com tres produtos o layout da ao primeiro a coluna da esquerda INTEIRA:
   meia largura, altura cheia. Medido num A4 em pe: `--item-h` 1485px contra
   `--item-w` 517px, uma celula 2,87x mais alta que larga, enquanto as outras
   duas ficam em 1,42.

   Como toda medida do preco sai de `--item-h`, a caixa do primeiro crescia
   pela altura e batia na largura: 119px de caixa numa celula de 121. Tres
   pixels de folga, contra 41 dos outros dois -- e ai o "R$", o numero e os
   centavos comecam a se espremer, que e o corte que aparece na arte. Acontece
   em qualquer formato onde a celula fique alta e estreita, e por isso so em
   alguns.

   A correcao nao mexe na altura da CELULA, que esta certa: o produto ocupa
   mesmo a coluna toda. Mexe na altura que o PRECO usa como regua, limitando-a
   pela largura disponivel. O 1,5 e a proporcao das celulas normais (1,42) com
   uma folga: onde a celula ja e larga o `min()` escolhe a altura e nada muda
   -- so o caso alto-e-estreito e afetado.
   ========================================================================== */

.product-item {
    --item-h-preco: min(var(--item-h), calc(var(--item-w, 99999px) * 1.5));
}

.product-item .price-box-multi,
.product-item .product-price-box {
    --item-h: var(--item-h-preco);
}


/* ==========================================================================
   A PINCELADA DO CARTAZ

   O vetor que a loja mandou, esticado ate o tamanho da caixa. Fica ATRAS do
   texto e transborda um pouco para os lados: um traco de pincel nao para onde
   a palavra para, ele passa dela -- e e esse excesso que faz parecer tinta em
   vez de etiqueta.

   `inset` negativo e nao `width/height` maiores: assim o desenho cresce para
   os quatro lados a partir do centro da caixa, sem empurrar o texto.
   ========================================================================== */

/* LARGURA E ALTURA EXPLICITAS, E NAO 'auto'.

   Um <svg> com viewBox tem PROPORCAO INTRINSECA -- aqui 650x235, ou 2,77 de
   largura para 1 de altura. Com 'width/height: auto', o navegador ignora o
   'inset' vertical e da ao desenho a altura que a proporcao pede. Medido:
   numa caixa de 81x52 a pincelada saia com 93x34 -- baixa demais, e por isso
   desencontrada do texto, que e o "torta e pequena".

   Com as duas medidas escritas, o preserveAspectRatio="none" pode fazer o seu
   trabalho: o desenho estica ate os cantos da caixa. */
.cartaz-pincelada {
    position: absolute;
    /* A sobra e maior na horizontal que na vertical, de proposito: um traco
       de pincel passa DOS LADOS da palavra, nao por cima e por baixo dela. Com
       sobra vertical grande, numa caixa quase quadrada como a do preco, o
       traco esticava e virava borrao em vez de pincelada. */
    left: -9%;
    top: -8%;
    width: 118%;
    height: 116%;
    z-index: 0;
    pointer-events: none;
    fill: var(--cartaz-faixa, #FFE500);
}

/* O texto fica POR CIMA do traco. Sem isto a pincelada cobriria a palavra:
   ela e o primeiro filho, mas os irmaos sem `z-index` proprio ficam na mesma
   camada e a ordem do HTML decidiria por pouco. */
.offer-container.modo-cartazista .cartaz-topo > *:not(.cartaz-pincelada),
.offer-container.modo-cartazista .product-price-box > *:not(.cartaz-pincelada) {
    position: relative;
    z-index: 1;
}

/* Sem faixa no preco, a pincelada do preco tambem sai -- a opcao existe para
   quem quer o numero solto sobre o cartaz. */
.offer-container.modo-cartazista.sem-faixa-preco .product-price-box .cartaz-pincelada {
    display: none;
}

/* ==========================================================================
   OS CINCO ARRANJOS DE RODAPE

   As mesmas pecas -- QR, telefone, endereco, redes, marca, aviso e bandeiras
   -- em cinco disposicoes. O que muda e onde cada uma fica.

   As medidas saem de `--item-h` do rodape, e nao de pixels fixos: a folha tem
   cinco formatos com alturas diferentes, e um rodape em pixel ficaria grosso
   num e fino noutro.
   ========================================================================== */

.rodape-arranjo {
    display: flex !important;
    flex-direction: column;
    gap: 0.5em;
    width: 100%;
    padding: 0.7em 0.9em;
    font-size: calc(var(--footer-fs, 18px) * 0.92);
    text-align: left;
}

.rodape-arranjo .rp-linha {
    display: flex;
    align-items: center;
    gap: 0.9em;
    width: 100%;
}

/* A linha fina e a de cima nos arranjos de marca: contato e rede, lado a
   lado, cada um na sua caixinha. */
.rodape-arranjo .rp-linha-fina { gap: 0.6em; }

.rodape-arranjo .rp-bloco {
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: wrap;
}

.rodape-arranjo .rp-coluna {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    flex: 1;
    min-width: 0;
}

.rodape-arranjo .rp-largo { flex: 1; min-width: 0; }

.rodape-arranjo .rp-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}

/* O endereco e o unico que pode quebrar linha: e o mais comprido, e corta-lo
   deixaria a loja sem numero ou sem bairro no material impresso. */
.rodape-arranjo .rp-addr { white-space: normal; }

.rodape-arranjo .rp-redes {
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: wrap;
}

.rodape-arranjo .rp-item i { font-size: 1.15em; }
.rodape-arranjo .rp-whats i { color: #25D366; }
.rodape-arranjo .rp-insta i { color: #E1306C; }
.rodape-arranjo .rp-addr i { color: #E30613; }

/* O QR e quadrado e nao encolhe: um codigo achatado nao le. */
.rodape-arranjo .rp-qr {
    flex: 0 0 auto;
    width: 4.6em;
    height: 4.6em;
}

.rodape-arranjo .rp-qr img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.rodape-arranjo .rp-marca {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    max-width: 30%;
}

.rodape-arranjo .rp-marca img {
    max-width: 100%;
    max-height: 3.2em;
    object-fit: contain;
}

/* O aviso legal: letra menor, ocupa o que sobra da linha. E texto de lei --
   precisa estar legivel, nao precisa competir com o preco. */
.rodape-arranjo .rp-aviso {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.72em;
    line-height: 1.25;
    text-align: justify;
}

.rodape-arranjo .rp-bandeiras {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35em;
    width: 100%;
}

.rodape-arranjo .rp-bandeiras img {
    height: 1.35em;
    width: auto;
    object-fit: contain;
}

/* --- A grade de tipos de rodape ---
   Uma coluna, porque um rodape e largo: em duas colunas cada exemplo ficaria
   estreito demais para se distinguir do vizinho, que e exatamente o que a
   grade existe para permitir. */
.grade-de-rodapes { grid-template-columns: minmax(0, 1fr) !important; }

.grade-de-rodapes .escolha-palco {
    height: auto;
    min-height: 62px;
    padding: 6px;
}

/* O palco do gatilho e mais largo que o dos outros tipos: o rodape e uma
   faixa, e numa caixa quadrada ele sairia ilegivel. */
.escolha-mini-rodape {
    width: 116px;
    height: 44px;
}

/* O palco do exemplo de rodape: reserva a altura que o `transform` nao ocupa,
   e corta o que passar. Sem ele os exemplos da janela se empilhariam uns
   sobre os outros, porque escala nao empurra o layout. */
.rodape-exemplo {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.rodape-exemplo .rodape-arranjo {
    position: absolute;
    left: 0;
    top: 0;
}

/* A janela dos rodapes e mais larga que as outras: um rodape e uma faixa, e
   nas 560px das outras janelas ele so caberia espremido -- o aviso legal
   quebrando em dez linhas, o arranjo deixando de parecer com ele mesmo. */
#modal-rodape .modal-content {
    max-width: 780px;
    width: 94vw;
}

/* QUEM DIVIDE A LINHA PRECISA DE PARTE DECLARADA.

   Medido no tipo "QR + redes + aviso": o bloco de contato tomava 645 dos 720
   da linha, sobrava zero para o aviso, e com `min-width: 0` o texto passava a
   quebrar UMA LETRA POR LINHA -- 0 de largura por 410 de altura. O exemplo
   virava uma coluna amarela vazia.

   Com a parte declarada, o aviso tem sempre cerca de um terço e o contato
   ocupa o que sobra, encolhendo o proprio texto em vez de empurrar o vizinho
   para fora da linha. */
.rodape-arranjo .rp-aviso {
    flex: 0 0 31%;
    max-width: 31%;
}

.rodape-arranjo .rp-contato {
    flex: 1 1 0;
    min-width: 0;
}
   O PAINEL DO PRODUTO, COMPACTO E COM O PREÇO NUM BLOCO SÓ

   Fica no fim do arquivo de propósito: as regras de base das peças (chave,
   destaque, replicar, gatilho de escolha) estão espalhadas acima com a mesma
   especificidade, e só vencendo pela ordem dá para mudar tudo de uma vez.

   Duas decisões:

   1. O preço vira uma SEÇÃO com fundo próprio. Tipo, unidade, texto,
      quantidade, cores e balão ficam juntos — antes estavam em cinco
      lugares do painel, dois deles dentro de "Mais opções".

   2. O resto vira LISTA: linhas de 40px separadas por um fio, em vez de uma
      caixa com borda e margem para cada sim/não. O painel encolheu para
      menos da metade da altura sem perder nenhuma opção.
   ========================================================================== */

.pc-corpo .product-editor {
    gap: 10px;
}

.pc-corpo {
    padding: 10px 10px 8px;
}

.product-editor .pe-secao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* --- O bloco do preço ---------------------------------------------------- */

.product-editor .pe-secao-preco {
    padding: 10px;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 12px;
    background: #fafbfc;
}

.product-editor .pe-secao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.product-editor .pe-secao-titulo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 800;
    color: #1f2430;
}

.product-editor .pe-secao-titulo i {
    color: var(--verde-800, #046739);
    font-size: 12px;
}

/* A chave "mostrar" no título do bloco: sem borda nem pílula, só o texto e
   o interruptor. Era um bloco de linha inteira para um sim/não. */
.product-editor .pe-chave.pe-chave-mini {
    width: auto;
    margin: 0;
    padding: 2px 0;
    gap: 7px;
    border: 0;
    background: transparent;
    font-size: 11.5px;
    font-weight: 600;
    color: #667085;
}

.product-editor .pe-chave.pe-chave-mini.active {
    background: transparent;
    color: var(--verde-800, #046739);
}

.product-editor .pe-field {
    gap: 4px;
}

.product-editor .pe-label {
    font-size: 10.5px;
    letter-spacing: .03em;
}

.product-editor .pe-field-tipo {
    margin-bottom: 0;
}

.product-editor .escolha-gatilho {
    gap: 10px;
    padding: 5px 10px 5px 6px;
    border-radius: 10px;
}

/* 54 de altura, e não menos: a etiqueta "DE:" do De/Por fica pendurada
   acima da caixa, fora da medida que a escala usa, e num quadro mais baixo
   ela é cortada em cima. */
.product-editor .escolha-mini {
    width: 76px;
    height: 54px;
}

.product-editor .escolha-nome {
    font-size: 13px;
}

/* Unidade e, quando o tipo pede, texto e quantidade: uma linha só. */
.product-editor .pe-linha-unidade {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.product-editor .pe-campo-unidade {
    flex: 0 0 76px;
}

.product-editor .pe-linha-unidade .pe-grid-2 {
    flex: 1;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 8px;
}

.product-editor .pe-linha-unidade input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
}

/* As cores com nome embaixo. */
.product-editor .pe-cores,
.product-editor .pe-cores-etiqueta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.product-editor .pe-cor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 56px;
    cursor: pointer;
}

.product-editor .pe-cor input[type="color"] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d8dde6;
    background: none;
    cursor: pointer;
}

.product-editor .pe-cor input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.product-editor .pe-cor input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.product-editor .pe-cor input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

.product-editor .pe-cor span {
    font-size: 10.5px;
    font-weight: 600;
    color: #667085;
    white-space: nowrap;
}

/* --- A lista do resto ---------------------------------------------------- */

.product-editor .pe-lista {
    gap: 0;
    border: 1px solid var(--pane-borda, #ede6f7);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.product-editor .pe-lista > .pe-destaque,
.product-editor .pe-lista > .pe-selo18,
.product-editor .pe-lista > .pe-replicar > .pe-replicar-abrir,
.product-editor .pe-lista > .pe-more > summary {
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #3b3f4a;
    font-size: 12.5px;
    font-weight: 600;
}

.product-editor .pe-lista > * + * {
    border-top: 1px solid #f0f1f4;
}

.product-editor .pe-lista > .pe-replicar {
    margin: 0;
}

.product-editor .pe-lista > .pe-more {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
}

.product-editor .pe-lista > .pe-destaque:hover,
.product-editor .pe-lista > .pe-selo18:hover,
.product-editor .pe-lista > .pe-replicar > .pe-replicar-abrir:hover,
.product-editor .pe-lista > .pe-more > summary:hover {
    background: #f7f8fa;
}

/* O destaque ligado continua dourado, mas como linha, não como botão. */
.product-editor .pe-lista > .pe-destaque i { color: #c8951f; }
.product-editor .pe-lista > .pe-destaque[aria-pressed="true"] {
    background: #fff6dc;
    color: #6b4a07;
}

.product-editor .pe-lista > .pe-selo18.ligado {
    background: #fff6f6;
    color: #a51c1c;
}

.product-editor .pe-lista > .pe-replicar > .pe-replicar-abrir.aberto {
    background: #f7f8fa;
}

.product-editor .pe-lista .pe-replicar-painel {
    margin: 0;
    padding: 4px 12px 12px;
    border: 0;
    border-radius: 0;
}

.product-editor .pe-lista .pe-more-body {
    padding: 2px 12px 12px;
    gap: 10px;
}

.product-editor .pe-lista i {
    width: 16px;
    text-align: center;
}

/* Desligada, a chave do título diz o estado numa palavra só. O "— oculto"
   pendurado depois de "Mostrar no encarte" não cabia no título do bloco. */
.product-editor .pe-chave-mini:not(.active) .pe-chave-texto {
    font-size: 0;
}

.product-editor .pe-chave-mini:not(.active) .pe-chave-texto::after {
    content: 'Oculto no encarte';
    font-size: 11.5px;
    color: #9aa1ad;
}

/* ==========================================================================
   A MOLDURA DE SELEÇÃO: QUATRO CANTOS EM "C"

   As alças antigas (bolinhas nos cantos da CAIXA, desenhadas dentro dela)
   ficavam longe da figura e sumiam quando ela chegava perto da borda do
   cartão, que corta o que passa. Agora quem desenha é uma moldura só, filha
   da folha, que o script põe em cima da parte visível do escolhido. Só os
   cantos aparecem, cada um um "C" (um "L" de canto arredondado).

   AS MEDIDAS SÃO DA TELA, NÃO DA FOLHA. A moldura vive dentro da folha, e a
   folha é mostrada encolhida pelo zoom (num A4 no celular, perto de 0,3).
   `--px` é um pixel de TELA medido dentro da folha: o applyPreviewZoom já
   escreve o `--zoom-da-folha`, e dividir por ele devolve o tamanho real.
   ========================================================================== */

#offer-canvas {
    --px: calc(1px / var(--zoom-da-folha, 1));
}

/* As alças antigas, desligadas: continuam no HTML dos rascunhos e dos
   modelos, mas quem redimensiona agora são os cantos da moldura. */
.product-img-container::before,
.product-img-container::after,
.logo-container::before,
.logo-container::after,
.selo-18::before,
.selo-18::after,
.product-img-container > .resize-handle,
.logo-container > .resize-handle,
.selo-18 > .resize-handle {
    display: none !important;
}

.product-item.editing .product-img-container.has-image,
.product-item.editing .product-img-container.has-image:hover,
.logo-container:hover,
.product-item.editing .selo-18:hover {
    outline: none;
}

.moldura-selecao {
    position: absolute;
    z-index: 400;
    /* A moldura não pega o toque: quem pega são só os cantos. O resto passa
       para a figura embaixo, que é quem se arrasta. */
    pointer-events: none;
    box-sizing: border-box;
}

.moldura-selecao[hidden] {
    display: none;
}

/* O pontilhado em volta: diz QUAL figura está escolhida mesmo de longe, e os
   cantos em cima dele dizem onde pegar. Verde da marca, com um fio branco
   por fora para não sumir sobre arte verde ou escura. */
.moldura-selecao::before {
    content: '';
    position: absolute;
    inset: 0;
    border: calc(1.5 * var(--px, 1px)) dashed var(--verde-600, #06A75C);
    box-shadow: 0 0 0 var(--px, 1px) rgba(255, 255, 255, .7);
    border-radius: calc(4 * var(--px, 1px));
    pointer-events: none;
}

.moldura-canto {
    position: absolute;
    width: calc(13 * var(--px, 1px));
    height: calc(13 * var(--px, 1px));
    border: 0 solid var(--verde-600, #06A75C);
    /* Contorno branco fino no "C": legível sobre fundo branco e sobre arte
       escura, sem desenhar um quadrado em volta. */
    filter: drop-shadow(0 0 var(--px, 1px) #fff)
            drop-shadow(0 var(--px, 1px) calc(2 * var(--px, 1px)) rgba(0, 0, 0, .25));
    pointer-events: auto;
    touch-action: none;
}

/* A área de pegar é maior que o desenho: no dedo, 13px de traço é pouco. */
.moldura-canto::after {
    content: '';
    position: absolute;
    inset: calc(-14 * var(--px, 1px));
}

.moldura-selecao.puxando .moldura-canto,
.moldura-canto:hover {
    border-color: var(--verde-800, #046739);
}

.moldura-tl {
    top: calc(-3 * var(--px, 1px));
    left: calc(-3 * var(--px, 1px));
    border-top-width: calc(3 * var(--px, 1px));
    border-left-width: calc(3 * var(--px, 1px));
    border-top-left-radius: calc(6 * var(--px, 1px));
    cursor: nwse-resize;
}

.moldura-tr {
    top: calc(-3 * var(--px, 1px));
    right: calc(-3 * var(--px, 1px));
    border-top-width: calc(3 * var(--px, 1px));
    border-right-width: calc(3 * var(--px, 1px));
    border-top-right-radius: calc(6 * var(--px, 1px));
    cursor: nesw-resize;
}

.moldura-bl {
    bottom: calc(-3 * var(--px, 1px));
    left: calc(-3 * var(--px, 1px));
    border-bottom-width: calc(3 * var(--px, 1px));
    border-left-width: calc(3 * var(--px, 1px));
    border-bottom-left-radius: calc(6 * var(--px, 1px));
    cursor: nesw-resize;
}

.moldura-br {
    bottom: calc(-3 * var(--px, 1px));
    right: calc(-3 * var(--px, 1px));
    border-bottom-width: calc(3 * var(--px, 1px));
    border-right-width: calc(3 * var(--px, 1px));
    border-bottom-right-radius: calc(6 * var(--px, 1px));
    cursor: nwse-resize;
}

/* No toque, o gesto só é do arrasto no escolhido: nos outros, o
   `touch-action` volta ao navegador, que rola e dá zoom. */
@media (pointer: coarse) {
    .product-img-container,
    .logo-container,
    .selo-18 {
        touch-action: manipulation;
    }
    .product-img-container.alvo-ativo,
    .logo-container.alvo-ativo,
    .selo-18.alvo-ativo {
        touch-action: none;
    }
}

/* ==========================================================================
   O LAYOUT DOS PRODUTOS

   A escolha fica no topo da aba Produtos: vale para a folha inteira. Na
   folha, cada layout é uma classe no #offer-canvas que transforma o cartão
   do produto em GRADE. O `.product-body` some da conta (display: contents)
   e a figura e o preço, que moram dentro dele, viram peças da mesma grade
   que o nome — é o que deixa pôr o nome AO LADO da figura sem mexer no
   HTML de nenhum produto.

   O cartaz tem desenho próprio: nenhum layout vale nele.
   ========================================================================== */

.layout-produto {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
}

.layout-produto[hidden] {
    display: none;
}

.layout-produto-rotulo {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
}

.layout-gatilho {
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--pane-borda, #e5e7eb);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}

.layout-gatilho .escolha-mini {
    width: 46px;
    height: 46px;
}

.layout-gatilho .escolha-nome {
    font-size: 13.5px;
    font-weight: 800;
}

/* A grade de layouts: quatro cartões, o desenho grande e uma linha
   dizendo o que muda. */
.grade-de-layouts .escolha-cartao {
    padding: 12px 10px 12px;
    gap: 6px;
}

.escolha-desc {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    color: #667085;
    text-align: center;
}

/* --- Na folha ------------------------------------------------------------ */

.offer-container:is(.layout-lateral, .layout-destaque, .layout-nome-embaixo):not(.modo-cartaz) .product-item {
    display: grid;
    align-items: stretch;
    justify-items: stretch;
    row-gap: calc(var(--item-h) * 0.012);
    column-gap: calc(var(--item-h) * 0.02);
}

.offer-container:is(.layout-lateral, .layout-destaque, .layout-nome-embaixo):not(.modo-cartaz) .product-body {
    display: contents;
}

.offer-container:is(.layout-lateral, .layout-destaque, .layout-nome-embaixo):not(.modo-cartaz) .product-image-wrapper {
    grid-area: fig;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.offer-container:is(.layout-lateral, .layout-destaque, .layout-nome-embaixo):not(.modo-cartaz) .product-header {
    grid-area: nome;
    min-width: 0;
    margin: 0;
}

.offer-container:is(.layout-lateral, .layout-destaque, .layout-nome-embaixo):not(.modo-cartaz) .product-body > :not(.product-image-wrapper) {
    grid-area: preco;
    margin: 0;
    max-width: 100%;
    /* O PREÇO NA MEDIDA DA SUA COLUNA.

       Toda a caixa de preço (número, centavos, "R$", balão, etiquetas) é
       medida em `--item-h`, a altura do cartão. No padrão ela tem a largura
       do cartão para ocupar; aqui, meia. Em vez de encolher por `transform`
       (que deixa a caixa ocupando o espaço do tamanho antigo na grade), ela
       recebe uma altura de referência menor, e tudo dentro diminui junto.

       Não dá para escrever `--item-h: calc(var(--item-h) * .6)`: a variável
       apontaria para si mesma. Por isso a conta é feita um andar acima, no
       cartão (`--item-h-preco`), e aqui só se usa o resultado.

       `--ajuste-preco` é o acerto fino, por produto, que o script escreve
       depois de MEDIR: o maior tamanho em que este preço, com os dígitos que
       tem, cabe na coluna. 9,99 cresce; 1.999,99 encolhe. */
    --item-h: calc(var(--item-h-preco) * var(--ajuste-preco, 1));
}

.offer-container.layout-lateral:not(.modo-cartaz) .product-item {
    --item-h-preco: var(--item-h);
}

.offer-container.layout-nome-embaixo:not(.modo-cartaz) .product-item {
    --item-h-preco: var(--item-h);
}

/* Na figura grande o preço é um selo no canto, não a faixa de baixo. */
.offer-container.layout-destaque:not(.modo-cartaz) .product-item {
    --item-h-preco: calc(var(--item-h) * .88);
}

.offer-container:is(.layout-lateral, .layout-destaque, .layout-nome-embaixo):not(.modo-cartaz) .product-footer {
    grid-area: obs;
}

/* Figura ao lado: figura à esquerda e nome à direita, lado a lado; o preço
   embaixo, com a largura do cartão inteiro.

   A primeira versão punha o preço na coluna da direita, embaixo do nome.
   Medido: um preço legível precisa de quase a largura do cartão, e meia
   coluna o deixava com 40% do tamanho do padrão — miúdo. Aqui ele é tão
   grande quanto no padrão. */
.offer-container.layout-lateral:not(.modo-cartaz) .product-item {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "fig nome"
        "preco preco"
        "obs obs";
}

.offer-container.layout-lateral:not(.modo-cartaz) .product-header {
    align-self: center;
}

.offer-container.layout-lateral:not(.modo-cartaz) .product-name {
    text-align: left;
}

.offer-container.layout-lateral:not(.modo-cartaz) .product-body > :not(.product-image-wrapper) {
    justify-self: center;
}

/* Figura grande: o nome em cima, alinhado à esquerda, e a figura com a
   folha toda embaixo. O preço fica POR CIMA da figura, no canto de baixo à
   direita — a mesma área da grade, alinhada ao fim. */
.offer-container.layout-destaque:not(.modo-cartaz) .product-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "nome"
        "fig"
        "obs";
}

.offer-container.layout-destaque:not(.modo-cartaz) .product-header {
    justify-self: start;
    max-width: 78%;
}

.offer-container.layout-destaque:not(.modo-cartaz) .product-name {
    text-align: left;
}

.offer-container.layout-destaque:not(.modo-cartaz) .product-body > :not(.product-image-wrapper) {
    grid-area: fig;
    align-self: end;
    justify-self: end;
    position: relative;
    z-index: 50;
}

/* Nome embaixo: a figura em cima com a largura toda; embaixo dela o nome,
   alinhado à esquerda, e o preço com a largura do cartão. (Nome e preço
   lado a lado deixavam o preço com meia largura — pequeno demais.) */
.offer-container.layout-nome-embaixo:not(.modo-cartaz) .product-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    grid-template-areas:
        "fig"
        "nome"
        "preco"
        "obs";
}

.offer-container.layout-nome-embaixo:not(.modo-cartaz) .product-name {
    text-align: left;
}

.offer-container.layout-nome-embaixo:not(.modo-cartaz) .product-body > :not(.product-image-wrapper) {
    justify-self: center;
}

/* ==========================================================================
   A JANELA DE ESCOLHA, REDESENHADA

   A mesma peça serve a três escolhas: tipo de preço, balão e layout. Ela
   nunca teve fundo próprio — herdava só o posicionamento de `.modal-content`
   —, então o título e a explicação ficavam soltos sobre o escurecido da
   tela, ilegíveis, e a rolagem era a barra cinza padrão do sistema.

   Agora:
     - uma folha branca de verdade, com cabeçalho FIXO (título, explicação e
       fechar) e só a grade rolando embaixo dele;
     - cartões com o desenho sobre um fundo claro próprio, nome e explicação
       legíveis, e um selo de "escolhido" no canto — o contorno verde
       sozinho era sutil demais para se achar numa grade de oito;
     - rolagem fina e discreta, com uma sombra no topo quando há conteúdo
       rolado por baixo do cabeçalho;
     - no celular, a janela sobe de baixo, como painel de aplicativo, com a
       alça de arrastar desenhada no topo.
   ========================================================================== */

.modal-overlay.overlay-escolhas {
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 24px;
}

.modal-content.modal-escolhas {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(760px, 88dvh);
    padding: 0;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .08);
    overflow: hidden;
    animation: escolhas-entra .2s ease-out;
}

@keyframes escolhas-entra {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.modal-escolhas .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 22px 22px 16px;
    border-bottom: 1px solid #eef0f4;
    background: #fff;
    flex-shrink: 0;
}

.modal-escolhas .escolhas-titulo {
    min-width: 0;
}

.modal-escolhas .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #111827;
}

.modal-escolhas .modal-header h2 i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--verde-050, #F2FAF6);
    color: var(--verde-800, #046739);
    font-size: 14px;
    flex-shrink: 0;
}

.modal-escolhas .escolhas-dica {
    margin: 6px 0 0 42px;
    font-size: 13px;
    line-height: 1.4;
    color: #667085;
}

.modal-escolhas .btn-close-modal {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f4f7;
    color: #475467;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.modal-escolhas .btn-close-modal:hover {
    background: #e4e7ec;
    color: #101828;
}

.modal-escolhas .btn-close-modal:focus-visible {
    outline: 3px solid rgba(6, 167, 92, .35);
    outline-offset: 2px;
}

/* Só a grade rola. A rolagem é fina, sem trilho, e o polegar só escurece
   quando o mouse passa. */
.modal-escolhas .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 22px 22px;
    background: #f8fafc;
}

/* A barra de rolagem daqui saiu, e a que estava escrita era LETRA MORTA: o
   `scrollbar-width: thin` ficava no mesmo elemento, e é exatamente isso que
   faz o Chrome ignorar os `::-webkit-scrollbar` dele. Os 10px de largura, a
   borda de 3px e a cor de hover nunca chegaram à tela de ninguém no Chrome —
   valia a barra fina do sistema. Agora vale a da casa, no topo do arquivo. */

/* --- A grade e os cartões --- */

.modal-escolhas .grade-de-escolhas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.modal-escolhas .grade-de-layouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-escolhas .escolha-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border: 1.5px solid #e4e7ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.modal-escolhas .escolha-cartao:hover {
    border-color: #b7dcc8;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .08);
    transform: translateY(-2px);
}

.modal-escolhas .escolha-cartao:focus-visible {
    outline: 3px solid rgba(6, 167, 92, .35);
    outline-offset: 2px;
}

/* O desenho mora num quadro claro próprio: separa o exemplo do texto e dá
   a todos os cartões a mesma "moldura", seja o desenho alto ou baixo. */
.modal-escolhas .escolha-palco {
    height: 128px;
    border-radius: 12px;
    background: #f2f4f7;
    padding: 10px;
    box-sizing: border-box;
}

.modal-escolhas .escolha-rotulo {
    margin: 10px 6px 0;
    font-size: 14px;
    font-weight: 800;
    color: #101828;
    text-align: left;
}

.modal-escolhas .escolha-desc {
    margin: 3px 6px 4px;
    font-size: 12.5px;
    line-height: 1.35;
    color: #667085;
    text-align: left;
}

.modal-escolhas .escolha-cartao:not(:has(.escolha-desc)) .escolha-rotulo {
    margin-bottom: 4px;
}

/* O escolhido: contorno verde, fundo levemente verde e o selo com o visto.
   O selo é o que se acha de relance numa grade de oito. */
.modal-escolhas .escolha-cartao.escolhido {
    border-color: var(--verde-700, #058549);
    background: #f3fbf6;
    box-shadow: 0 0 0 3px rgba(5, 133, 73, .12);
}

.modal-escolhas .escolha-cartao.escolhido .escolha-palco {
    background: #e6f4ec;
}

.modal-escolhas .escolha-cartao.escolhido::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--verde-700, #058549);
    color: #fff;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(5, 133, 73, .35);
}

/* --- No celular: sobe de baixo --- */
@media (max-width: 600px) {
    .modal-overlay.overlay-escolhas {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content.modal-escolhas {
        width: 100%;
        max-height: 88dvh;
        border-radius: 22px 22px 0 0;
        animation: escolhas-sobe .24s ease-out;
    }

    /* A alça: diz que é um painel que desce, e não uma página nova. */
    .modal-content.modal-escolhas::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 999px;
        background: #d0d5dd;
    }

    .modal-escolhas .modal-header {
        padding: 22px 16px 12px;
    }

    .modal-escolhas .modal-header h2 { font-size: 17px; }
    .modal-escolhas .escolhas-dica { margin-left: 0; font-size: 12.5px; }

    .modal-escolhas .modal-body {
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .modal-escolhas .grade-de-escolhas,
    .modal-escolhas .grade-de-layouts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .modal-escolhas .escolha-palco { height: 104px; padding: 8px; }
    .modal-escolhas .escolha-rotulo { font-size: 13px; margin-top: 8px; }
    .modal-escolhas .escolha-desc { font-size: 11.5px; }
    .modal-escolhas .escolha-cartao:hover { transform: none; }
}

@keyframes escolhas-sobe {
    from { transform: translateY(40px); opacity: .6; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-content.modal-escolhas { animation: none; }
    .modal-escolhas .escolha-cartao { transition: none; }
}

/* ==========================================================================
   O SININHO DE AVISOS

   Ao lado do retrato do perfil, no mesmo canto de todas as telas. O ponto
   vermelho e a unica coisa que pede atencao; o resto so aparece quando se
   clica, porque aviso que interrompe o trabalho deixa de ser aviso e vira
   estorvo.
   ========================================================================== */

.canto-avisos {
    position: relative;
    display: flex;
    align-items: center;
}

.avisos-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    color: var(--verde-900, #023B21);
    font-size: 15px;
    cursor: pointer;
    position: relative;
}

.avisos-botao:hover { border-color: var(--verde-600, #06A75C); }

.canto-avisos.aberto .avisos-botao {
    border-color: var(--verde-800, #046739);
    background: var(--verde-50, #eaf7f0);
}

/* O ponto so aparece quando ha aviso NOVO. Com numero quando ha mais de um --
   "tenho algo" e "tenho seis coisas" pedem reacoes diferentes. */
.avisos-ponto {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e30613;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.avisos-painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 24px);
    z-index: 200;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.avisos-topo {
    padding: 11px 14px;
    border-bottom: 1px solid var(--cinza-100, #f1f3f5);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a93a3;
}

/* Teto de altura: com muitos avisos o painel viraria uma coluna do tamanho da
   tela, e o de baixo ficaria fora do alcance do olho. */
.avisos-lista {
    max-height: 60vh;
    overflow-y: auto;
}

.aviso-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--cinza-100, #f1f3f5);
    color: inherit;
    text-decoration: none;
}

.aviso-item:last-child { border-bottom: none; }
.aviso-item:hover { background: var(--cinza-50, #f8f9fa); }

.aviso-item i { margin-top: 2px; font-size: 14px; }
.aviso-urgente i { color: #e30613; }
.aviso-atencao i { color: #b8860b; }
.aviso-bom i { color: var(--verde-700, #05874A); }

.aviso-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aviso-corpo strong { font-size: 13px; font-weight: 800; color: #1f2430; }
.aviso-corpo span { font-size: 12px; line-height: 1.3; color: #6b7280; }

/* Ja lido fica mais apagado -- continua ali para consulta, sem disputar a
   atencao com o que ainda nao foi visto. */
.aviso-item.lido strong { font-weight: 700; color: #6b7280; }
.aviso-item.lido i { opacity: .55; }

.avisos-vazio {
    margin: 0;
    padding: 20px 14px;
    font-size: 12.5px;
    text-align: center;
    color: #9aa1ad;
}

/* A pincelada só existe no cartazista. Se sobrar alguma numa caixa de preço
   (voltando do cartaz para o encarte antes de a limpeza rodar), ela não
   aparece: o balão do encarte é o que o encarte escolheu. */
.offer-container:not(.modo-cartazista) .product-price-box > .cartaz-pincelada {
    display: none !important;
}

/* --- O campo do QR com a miniatura do código --- */
.qr-campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qr-miniatura {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--pane-borda, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.qr-miniatura img {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 6px;
    background: #fff;
    image-rendering: pixelated;
}

.qr-miniatura-texto {
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
    color: #475467;
    overflow-wrap: anywhere;
}

/* Sem link: um quadrado tracejado no lugar do código. */
.qr-miniatura.vazia img {
    border: 2px dashed #d0d5dd;
    background: #f9fafb;
}

.qr-miniatura.vazia {
    background: #f9fafb;
}

.qr-miniatura.vazia .qr-miniatura-texto {
    color: #98a2b3;
}

/* O personalizado: os contatos quebram linha quando a faixa enche. */
.rodape-arranjo .rp-personalizado .rp-bloco {
    gap: 0.5em 1em;
}

/* ==========================================================================
   OS LAYOUTS MAIS JUNTOS

   Os três layouts novos deixavam as peças soltas no cartão: a figura
   centrada na sua área, com um vão até o nome ou o preço, e na "figura ao
   lado" uma coluna estreita que deixava a imagem pequena e o nome boiando.

   Aqui as peças se encostam: a figura desce até o que vem embaixo dela, o
   preço sobe um pouco sobre ela como no padrão, e a coluna da figura fica
   mais larga que a do nome.
   ========================================================================== */

.offer-container:is(.layout-lateral, .layout-destaque, .layout-nome-embaixo):not(.modo-cartaz) .product-item {
    row-gap: calc(var(--item-h) * 0.006);
    column-gap: calc(var(--item-h) * 0.014);
}

/* A figura apoiada embaixo da sua área: encosta no nome (nome embaixo) ou
   no preço (figura ao lado, figura grande) em vez de ficar no meio. */
.offer-container:is(.layout-destaque, .layout-nome-embaixo):not(.modo-cartaz) .product-img-container {
    align-items: flex-end;
}

/* O preço sobe sobre a figura, como no padrão (-0,045 da altura lá). No
   "nome embaixo" não: lá o que está em cima do preço é o nome. */
.offer-container.layout-lateral:not(.modo-cartaz) .product-body > :not(.product-image-wrapper) {
    margin-top: calc(var(--item-h) * -0.03);
    position: relative;
    z-index: 50;
}

/* Figura ao lado: a figura com a maior parte da largura; figura e nome
   continuam centrados na altura (apoiados embaixo, o vão ia todo para o
   topo do cartão). */
.offer-container.layout-lateral:not(.modo-cartaz) .product-item {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

/* Nome embaixo: o nome colado na figura. */
.offer-container.layout-nome-embaixo:not(.modo-cartaz) .product-header {
    margin-top: calc(var(--item-h) * 0.004);
}

/* --- O EDITOR DE TEMAS EM GRUPOS ---

   A receita cresceu (layout, cores do cartão, etiqueta, rodapé) e em uma
   coluna só de campos ela passava da altura da tela. Cada grupo agora é um
   cartão com título, na ordem em que se olha o encarte. */
.receita-controles {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.receita-grupo {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
    margin: 0;
    padding: 12px 14px 14px;
    border: 1px solid var(--cinza-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.receita-grupo legend {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px;
    margin-left: -4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--verde-800, #046739);
}

.receita-grupo legend i { font-size: 12px; color: var(--verde-600, #06a75c); }

.receita-cores { flex-wrap: wrap; gap: 8px 12px; }

/* A cor opcional: conta-gotas, nome e a caixinha "definir". Desmarcada, o
   conta-gotas fica apagado — o tema não mexe naquilo. */
.receita-cor.opcional {
    padding: 3px 8px 3px 3px;
    border: 1px dashed #d0d5dd;
    border-radius: 9px;
    background: #fafbfc;
}

.receita-cor.opcional:has(.receita-definir:checked) {
    border-style: solid;
    border-color: var(--verde-600, #06a75c);
    background: var(--verde-100, #e8f7ef);
    color: var(--verde-800, #046739);
}

.receita-cor input[type="color"]:disabled { opacity: .3; cursor: not-allowed; }
.receita-cor.apagada { opacity: .45; }

.receita-definir {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--verde-600, #06a75c);
    cursor: pointer;
}

.receita-check {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 12.5px;
    color: #475467;
    cursor: pointer;
}

.receita-check input { accent-color: var(--verde-600, #06a75c); }

/* A prévia acompanha o layout escolhido. */
.previa-corpo[data-layout="lateral"] .previa-produto {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
}
.previa-corpo[data-layout="lateral"] .previa-nome { text-align: left; }
.previa-corpo[data-layout="nome-embaixo"] .previa-produto { flex-direction: column-reverse; }
.previa-corpo[data-layout="destaque"] .previa-nome { font-size: calc(28px * var(--fator, 1)); }

/* O rodapé da prévia: só aparece quando o tema mexe nele. */
.previa-rodape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: calc(110px * var(--fator-faixa, 1));
    font: 700 calc(30px * var(--fator-faixa, 1)) / 1 'Montserrat', sans-serif;
    background: #ffc107;
    color: #000;
}
.previa-rodape[hidden] { display: none; }
.previa-rodape.estilo-dark,
.previa-rodape.estilo-premium-dark { background: #111; color: #fff; }
.previa-rodape.estilo-premium-light { background: #fff; color: #111; border-top: 3px solid #e5e7eb; }
.previa-rodape.estilo-banner { clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }

/* Novo tema x editando: o rótulo diz em qual dos dois se está, para não
   salvar por cima de um tema achando que publicava outro. */
.envio-acoes { align-items: center; }
.envio-modo {
    margin-right: auto;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    background: #f2f4f7;
    color: #475467;
}
.envio-modo.editando { background: #fff4e5; color: #b54708; }

/* O lápis de editar, ao lado da lixeira. */
.catalogo-editar {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 46px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--verde-800, #046739);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    line-height: 1;
}
.catalogo-editar:hover { background: var(--verde-600, #06a75c); color: #fff; }

/* As caixinhas não herdam a largura cheia dos campos do formulário. */
.receita-grupo .receita-cor,
.receita-grupo .receita-check {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-bottom: 0;
    font-weight: 600;
}
.receita-grupo .receita-check { display: flex; white-space: normal; }
.receita-grupo input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
}
.receita-grupo .receita-cor input[type="color"] { flex: 0 0 auto; width: 34px; height: 28px; }

/* --- O PAINEL ADMIN EM CAMADAS NO MENU ---

   Os subitens penduram numa linha vertical que sai do ícone do pai, como
   galhos: dá para ver de relance que pertencem a ele, sem precisar de outra
   caixa em volta. */
.nav-item.nav-pai { position: relative; }
.nav-seta {
    margin-left: auto;
    font-size: 11px !important;
    opacity: .6;
    transition: transform .2s ease;
}
.nav-item.nav-pai[aria-expanded="true"] .nav-seta { transform: rotate(180deg); }

.nav-sub {
    position: relative;
    display: grid;
    gap: 2px;
    margin: 4px 12px 6px 40px;
    padding-left: 12px;
    animation: navSubAbre .22s ease;
}
.nav-sub[hidden] { display: none; }
.nav-sub::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 14px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.16);
}

@keyframes navSubAbre {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.nav-subitem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.nav-subitem i { width: 16px; text-align: center; font-size: 12.5px; opacity: .8; }
/* O galho: um traço curto da linha vertical até o item. */
.nav-subitem::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 8px;
    border-top: 1.5px solid rgba(255, 255, 255, 0.16);
}
.nav-subitem:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-subitem:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 1px; }
.nav-subitem.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.nav-subitem.active i { color: var(--amarelo); opacity: 1; }
.nav-subitem.active::before { border-color: var(--amarelo); }

/* No admin, o pai não disputa o destaque com o filho escolhido. */
.nav-item.nav-pai.active { background-color: rgba(5, 133, 73, 0.45); }

/* Barra estreita: sem espaço para os galhos. */
.main-sidebar.collapsed .nav-sub,
.main-sidebar.collapsed .nav-seta { display: none; }
@media (min-width: 861px) and (max-width: 1200px) {
    .nav-sub, .nav-seta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-sub { animation: none; }
}

/* =====================================================================
   PAINEL ADMIN — DASHBOARD, CLIENTES E CUPONS
   ===================================================================== */

.admin-cabeca {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 18px;
}
.admin-cabeca h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--verde-900);
}
.admin-cabeca p { margin: 4px 0 0; font-size: 14px; color: #667085; }

/* As abas da página só aparecem quando os subitens do menu não cabem. */
.admin-abas { display: none; margin-top: 0; }
.main-sidebar.collapsed ~ .work-area .admin-abas { display: flex; }
@media (min-width: 861px) and (max-width: 1200px) {
    .admin-abas { display: flex; }
}

.nav-sub-contador {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--amarelo);
    color: var(--verde-900);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}
.nav-sub-contador[hidden] { display: none; }

.admin-filtro-conta { color: #98a2b3; font-weight: 600; }

/* --- Os números ---------------------------------------------------------- */
.adm-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.adm-kpi {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    background: #fff;
    border: 1px solid #e8ecea;
    border-radius: 14px;
}
.adm-kpi-icone {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--verde-100);
    color: var(--verde-800);
    font-size: 15px;
}
.adm-kpi-rotulo { font-size: 12.5px; font-weight: 600; color: #667085; }
.adm-kpi-valor {
    margin-top: 2px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #101828;
    font-variant-numeric: tabular-nums;
}
.adm-kpi-nota { margin-top: 3px; font-size: 12px; color: #667085; line-height: 1.35; }
.adm-kpi-nota .sobe { color: var(--verde-700); }
.adm-kpi-nota .desce { color: var(--vermelho); }
.adm-kpi-destaque {
    background: linear-gradient(135deg, var(--verde-800), var(--verde-700));
    border-color: transparent;
}
.adm-kpi-destaque .adm-kpi-icone { background: var(--amarelo); color: var(--verde-900); }
.adm-kpi-destaque .adm-kpi-rotulo,
.adm-kpi-destaque .adm-kpi-nota { color: rgba(255, 255, 255, .8); }
.adm-kpi-destaque .adm-kpi-valor { color: #fff; }
.adm-kpi-destaque .adm-kpi-nota .sobe { color: var(--amarelo); }
.adm-kpi-destaque .adm-kpi-nota .desce { color: #ffd1d8; }
.adm-kpi-alerta .adm-kpi-icone { background: #fff4e5; color: #b54708; }

/* --- O que pede ação ----------------------------------------------------- */
.adm-alertas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.adm-alertas[hidden] { display: none; }
.adm-alerta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid #fedf89;
    border-radius: 999px;
    background: #fffaeb;
    color: #93370d;
    font: 600 13px inherit;
    cursor: pointer;
}
.adm-alerta:hover { background: #fef0c7; }
.adm-alerta-seta { font-size: 11px; opacity: .7; }

/* --- Os cartões ---------------------------------------------------------- */
.adm-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.adm-card {
    min-width: 0;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e8ecea;
    border-radius: 14px;
}
.adm-card-largo { grid-column: span 2; }
.adm-card header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.adm-card h3 { margin: 0; font-size: 14.5px; font-weight: 700; color: #101828; }
.adm-card-nota { font-size: 12px; color: #98a2b3; white-space: nowrap; }
.adm-card-link { font-size: 12.5px; font-weight: 700; color: var(--verde-700); text-decoration: none; }
.adm-card-link:hover { text-decoration: underline; }
.adm-vazio { margin: 6px 0 0; font-size: 13px; color: #98a2b3; }

@media (max-width: 1100px) {
    .adm-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .adm-grade { grid-template-columns: minmax(0, 1fr); }
    .adm-card-largo { grid-column: auto; }
    .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .adm-kpi { padding: 12px; gap: 9px; flex-direction: column; }
    .adm-kpi-valor { font-size: 19px; }
    .admin-cabeca h1 { font-size: 22px; }
}

/* --- Barras em pé -------------------------------------------------------- */
.adm-barras {
    display: grid;
    grid-template-columns: repeat(var(--colunas, 6), minmax(0, 1fr));
    gap: 6px;
    height: 190px;
    padding-top: 22px;
    /* A linha de base, discreta: ancora as barras sem virar grade. */
    background: linear-gradient(#eaecf0, #eaecf0) bottom 20px left 0 / 100% 1px no-repeat;
}
.adm-grafico-baixo .adm-barras { height: 150px; }
.adm-barra-col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    outline: none;
    cursor: default;
}
.adm-barra {
    position: relative;
    width: min(100%, 44px);
    border-radius: 4px 4px 0 0;
    background: #a6d9bf;
    transition: background-color .15s ease;
}
.adm-barra.atual { background: var(--verde-700); }
.adm-barra-col:hover .adm-barra,
.adm-barra-col:focus-visible .adm-barra { background: var(--verde-800); }
.adm-barra-num {
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: #344054;
    white-space: nowrap;
}
.adm-barra-leg {
    height: 20px;
    padding-top: 5px;
    font-size: 11px;
    color: #667085;
    white-space: nowrap;
}
/* A dica com o valor exato, no mouse e no foco do teclado/toque. */
.adm-barra-col::after {
    content: attr(data-dica);
    position: absolute;
    bottom: calc(100% - 14px);
    left: 50%;
    transform: translate(-50%, 4px);
    padding: 6px 9px;
    border-radius: 8px;
    background: #101828;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 3;
}
.adm-barra-col:hover::after,
.adm-barra-col:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.adm-barra-col:first-child::after { left: 0; transform: translate(0, 4px); }
.adm-barra-col:first-child:hover::after,
.adm-barra-col:first-child:focus-visible::after { transform: translate(0, 0); }
.adm-barra-col:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
.adm-barra-col:last-child:hover::after,
.adm-barra-col:last-child:focus-visible::after { transform: translate(0, 0); }
.adm-barras.vazio { height: 90px; }

/* --- Barras deitadas (vendas por plano) --------------------------------- */
.adm-hbarras { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.adm-hbarra-topo {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: #344054;
}
.adm-hbarra-topo b { font-variant-numeric: tabular-nums; color: #101828; }
.adm-hbarra-trilho { height: 8px; margin: 5px 0 3px; border-radius: 4px; background: #f2f4f7; }
.adm-hbarra { height: 100%; border-radius: 4px; background: var(--verde-700); }
.adm-hbarras small { font-size: 11.5px; color: #98a2b3; }

/* --- Listas curtas ------------------------------------------------------- */
.adm-lista { list-style: none; margin: 0; padding: 0; }
.adm-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f2f4f7;
}
.adm-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.adm-lista li > div { min-width: 0; }
.adm-lista b { display: block; font-size: 13.5px; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-lista small { display: block; font-size: 12px; color: #667085; margin-top: 1px; }
.adm-lista-lado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-size: 13px;
    color: #475467;
    font-variant-numeric: tabular-nums;
}
.adm-whats {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #e7f8ee;
    color: #128c4a;
    font-size: 16px;
    text-decoration: none;
}
.adm-whats:hover { background: #25d366; color: #fff; }
.adm-tag {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--verde-100);
    color: var(--verde-800);
    font-size: 11px;
    font-weight: 700;
}

/* --- Cupons -------------------------------------------------------------- */
.adm-kpis-cupom { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cupom-novo h3 { display: flex; align-items: center; gap: 8px; }
.cupom-novo h3 i { font-size: 12px; color: var(--verde-700); }
.cupom-novo .cupom-form { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: start; }
.cupom-novo .envio-campo-acao { align-self: stretch; padding-top: 22px; }
.cupom-novo .envio-campo-acao .botao-solido { width: 100%; justify-content: center; height: 43px; }
.admin-tabela td.cupom-descontado b { color: #b54708; }

/* Seis números em 3×2 — com auto-fill sobravam dois cartões sozinhos numa
   linha de quatro. */
#dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
    #dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-kpi { gap: 6px; }
    .adm-kpi-icone { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
    .adm-card header { flex-wrap: wrap; row-gap: 2px; }
    .adm-card-nota { white-space: normal; }
    .adm-alerta { font-size: 12.5px; padding: 8px 12px; }
}
@media (max-width: 720px) {
    .adm-kpis-cupom { grid-template-columns: minmax(0, 1fr); }
    .adm-kpis-cupom .adm-kpi { flex-direction: row; align-items: center; gap: 12px; }
    .adm-kpis-cupom .adm-kpi-icone { width: 38px; height: 38px; font-size: 15px; }
}

/* =====================================================================
   TELA INICIAL — FORMATOS, AVISOS, PRIMEIROS PASSOS, CONTINUAR, TEMA DO
   DIA E DATAS CHEGANDO
   ===================================================================== */

/* --- Criar direto no formato, dentro do verde da abertura -------------- */
.abertura-formatos {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}
.abertura-formatos-rotulo {
    margin-right: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
}
.abertura-formatos a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.abertura-formatos a:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
.abertura-formatos a:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.abertura-formatos a i { font-size: 12px; opacity: .85; }

/* --- Avisos curtos ------------------------------------------------------ */
.inicio-avisos { display: grid; gap: 8px; margin: -8px 0 18px; }
.inicio-avisos:not(:has(.inicio-aviso:not([hidden]))) { display: none; }
.inicio-aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
}
.inicio-aviso[hidden] { display: none; }
.inicio-aviso-icone {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 14px;
}
.inicio-aviso-texto { flex: 1; min-width: 0; }
.aviso-vencendo { background: #fffaeb; border: 1px solid #fedf89; color: #7a2e0e; }
.aviso-vencendo .inicio-aviso-icone { background: #fef0c7; color: #b54708; }
.inicio-aviso-acao {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 10px;
    background: #b54708;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}
.inicio-aviso-acao:hover { background: #93370d; }
.aviso-novidade { background: #fff; border: 1px solid #e3ebe7; color: #344054; }
.aviso-novidade .inicio-aviso-icone { background: var(--amarelo); color: var(--verde-900); }
.aviso-novidade b { color: var(--verde-900); }
.inicio-aviso-fechar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #98a2b3;
    cursor: pointer;
}
.inicio-aviso-fechar:hover { background: #f2f4f7; color: #344054; }

/* --- Primeiros passos ---------------------------------------------------- */
.passos {
    margin-bottom: 22px;
    padding: 18px 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e3ebe7;
}
.passos-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.passos-cabeca h2 { margin: 0; font-size: 17px; color: var(--verde-900); }
.passos-cabeca p { margin: 2px 0 0; font-size: 12.5px; color: #667085; }
.passos-fechar {
    width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: transparent; color: #98a2b3; cursor: pointer;
}
.passos-fechar:hover { background: #f2f4f7; color: #344054; }
.passos-barra { height: 6px; margin: 12px 0 14px; border-radius: 3px; background: #eef2f0; overflow: hidden; }
.passos-barra span { display: block; height: 100%; border-radius: 3px; background: var(--verde-700); transition: width .4s ease; }
.passos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.passo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--verde-050);
    border: 1px solid #e3ebe7;
}
.passo-marca {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--verde-700);
    color: var(--verde-800);
    font-size: 13px;
    font-weight: 800;
}
.passo.feito { background: #fff; }
.passo.feito .passo-marca { background: var(--verde-700); color: #fff; border-color: var(--verde-700); }
.passo.feito b { color: #98a2b3; text-decoration: line-through; }
.passo-texto b { display: block; font-size: 14px; color: #101828; }
.passo-texto small { display: block; margin-top: 3px; font-size: 12.5px; color: #667085; line-height: 1.4; }
.passo-acao {
    align-self: flex-start;
    margin-top: auto;
    padding: 8px 13px;
    border: 0;
    border-radius: 10px;
    background: var(--verde-800);
    color: #fff;
    font: 700 13px inherit;
    cursor: pointer;
}
.passo-acao:hover { background: var(--verde-900); }

/* --- Continuar + tema do dia --------------------------------------------- */
.inicio-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.inicio-grade.so-um { grid-template-columns: minmax(0, 1fr); }
.inicio-grade[hidden] { display: none; }
.inicio-sobretitulo {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--verde-700);
}

.continuar {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e3ebe7;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .04);
}
.continuar[hidden] { display: none; }
.continuar-capa {
    aspect-ratio: 1050 / 1485;
    max-height: 190px;
    width: 100%;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--verde-050);
    background-size: cover;
    background-position: top center;
    color: var(--verde-700);
    font-size: 34px;
    border: 1px solid #e3ebe7;
}
.continuar-capa.com-arte { aspect-ratio: 1200 / 520; }
.continuar-nome { margin: 4px 0 2px; font-size: 20px; font-weight: 800; color: #101828; line-height: 1.25; }
.continuar-meta { margin: 0 0 14px; font-size: 13px; color: #667085; }
.continuar-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.continuar-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 11px;
    border: 1.5px solid #d0d5dd;
    background: #fff;
    color: #344054;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.continuar-botao:hover { border-color: var(--verde-700); color: var(--verde-800); }
.continuar-botao.principal { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }
.continuar-botao.principal:hover { background: var(--verde-900); color: #fff; }
.continuar-botao.destaque { border-color: var(--amarelo); background: #fffbe0; color: var(--verde-900); }

.tema-dia {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e3ebe7;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .04);
}
.tema-dia[hidden] { display: none; }
.tema-dia-capa {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 1200 / 280;
    padding: 0 5%;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tema-dia-capa:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .14); }
.tema-dia-capa img { max-width: 70%; max-height: 80%; }
.tema-dia-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tema-dia-rodape b { font-size: 14px; color: #101828; }
.tema-dia-usar { font-size: 13px; font-weight: 700; color: var(--verde-700); text-decoration: none; white-space: nowrap; }
.tema-dia-usar:hover { text-decoration: underline; }

/* --- Datas chegando ------------------------------------------------------ */
.datas { margin-bottom: 26px; }
.datas[hidden] { display: none; }
.datas-nota { font-size: 12.5px; color: #98a2b3; }
.datas-grade {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.data-cartao {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 15px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e3ebe7;
}
.data-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.data-icone {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--verde-100);
    color: var(--verde-800);
    font-size: 15px;
}
.data-falta {
    padding: 3px 9px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.data-cartao.perto .data-falta { background: #fef0c7; color: #93370d; }
.data-nome { margin: 0; font-size: 15.5px; font-weight: 800; color: #101828; }
.data-dia { margin: 0; font-size: 12.5px; color: #667085; }
.data-acao {
    margin-top: auto;
    padding-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--verde-700);
    text-decoration: none;
}
.data-acao:hover { text-decoration: underline; }
.data-acao i { font-size: 11px; }

/* A data mais próxima é o cartão grande, verde, com os temas dela. */
.data-cartao.principal {
    background: linear-gradient(135deg, var(--verde-900), var(--verde-800));
    border-color: transparent;
    color: #fff;
}
.data-cartao.principal .data-icone { background: var(--amarelo); color: var(--verde-900); }
.data-cartao.principal .data-falta { background: rgba(255, 255, 255, .14); color: #fff; }
.data-cartao.principal.perto .data-falta { background: var(--amarelo); color: var(--verde-900); }
.data-cartao.principal .data-nome { color: #fff; font-size: 19px; }
.data-cartao.principal .data-dia { color: rgba(255, 255, 255, .75); }
.data-cartao.principal .data-acao { color: var(--amarelo); }
.data-temas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}
.data-temas[hidden] { display: none; }
.data-tema {
    display: flex;
    align-items: center;
    aspect-ratio: 1200 / 280;
    padding: 0 6%;
    border-radius: 7px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    outline: 1px solid rgba(255, 255, 255, .18);
    transition: transform .15s ease;
}
.data-tema:hover { transform: scale(1.04); }
.data-tema img { max-width: 72%; max-height: 80%; }

@media (max-width: 1100px) {
    .datas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .inicio-grade { grid-template-columns: minmax(0, 1fr); }
    .passos-lista { grid-template-columns: minmax(0, 1fr); }
    .passo { flex-direction: row; align-items: center; }
    .passo-texto { flex: 1; min-width: 0; }
    .passo-acao { margin-top: 0; align-self: center; }
}
@media (max-width: 560px) {
    .continuar { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .continuar-nome { font-size: 16px; }
    .continuar-meta { margin-bottom: 10px; }
    .continuar-acoes { grid-column: 1 / -1; }
    .continuar-botao { flex: 1 1 auto; justify-content: center; }
    .datas-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    .data-cartao.principal { grid-column: 1 / -1; }
    .data-cartao { padding: 12px; }
    .abertura-formatos-rotulo { width: 100%; }
    .inicio-aviso { flex-wrap: wrap; }
}

/* --- Os contatos da loja, na ficha de Configurações --------------------- */
.perfil-contato {
    margin: 4px 0 0;
    padding: 14px;
    border: 1px solid #e3ebe7;
    border-radius: 12px;
}
.perfil-contato legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--verde-900); }
.perfil-contato .campo-nota { display: block; margin: -2px 0 10px; }
.perfil-contato-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.perfil-contato-grade .form-group > span { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #344054; }
.perfil-contato-grade .form-group > span i { color: var(--verde-700); width: 14px; text-align: center; }
.perfil-contato-largo { grid-column: 1 / -1; }
@media (max-width: 560px) {
    .perfil-contato-grade { grid-template-columns: 1fr; }
}
.datas-grade { grid-template-columns: minmax(0, 1.6fr) repeat(var(--outras, 3), minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .datas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .data-cartao.principal { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .datas-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Sem o "continuar" ao lado, o tema do dia não pode virar uma faixa de
   1100px de largura: fica ao lado do texto, no tamanho de uma capa. */
.inicio-grade.so-um .tema-dia {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
}
.inicio-grade.so-um .tema-dia .inicio-sobretitulo { grid-column: 1 / -1; }
.inicio-grade.so-um .tema-dia-rodape { flex-direction: column; align-items: flex-start; }
.inicio-grade.so-um .tema-dia-rodape b { font-size: 17px; }
@media (max-width: 700px) {
    .inicio-grade.so-um .tema-dia { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
    .inicio-grade.so-um .tema-dia-rodape { flex-direction: row; align-items: center; }
}
.continuar-capa.com-arte { background-position: left center; }
@media (max-width: 560px) {
    /* No celular, três datas: a grande e duas lado a lado — a quarta ficava
       sozinha numa linha. */
    .datas-grade .data-cartao:nth-child(4) { display: none; }
    .datas-nota { display: none; }
}
/* Os cinco campos iguais — o type="tel" herdava outra regra, mais alta. */
.perfil-contato-grade input {
    width: 100%;
    height: 38px;
    padding: 8px 11px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    color: #101828;
    box-sizing: border-box;
}
.perfil-contato-grade input:focus {
    outline: none;
    border-color: var(--verde-700);
    box-shadow: 0 0 0 3px rgba(6, 167, 92, .15);
}
.perfil-contato-grade .form-group { margin-bottom: 10px; }

/* =====================================================================
   EDITOR — A BARRA DE CIMA COM AS AÇÕES NOMEADAS
   ===================================================================== */
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.toolbar-acoes { display: flex; align-items: center; gap: 6px; }
.acao-topo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
.acao-topo:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); }
.acao-topo:active { transform: translateY(1px); }
.acao-topo:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.acao-topo.acao-icone { width: 36px; padding: 0; background: transparent; border-color: transparent; }
.acao-topo.acao-icone:hover { background: rgba(255, 255, 255, .14); }
/* O Baixar é a razão de estar aqui: amarelo, o único da tela. */
.acao-topo.acao-principal {
    background: var(--amarelo);
    border-color: var(--amarelo);
    color: var(--verde-900);
    padding: 0 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.acao-topo.acao-principal:hover { background: #ffe933; border-color: #ffe933; }
.acao-topo:disabled { opacity: .6; cursor: progress; }

/* O botão de formato no topo, com o nome por extenso. */
#btn-formato .tool-btn-texto { display: inline; }

/* --- O menu de formatos: cartões com a proporção, o nome e o uso ------- */
.menu-formatos { min-width: 340px; padding: 14px; }
.menu-formatos .format-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menu-formatos .format-btn {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
    min-height: 118px;
    padding: 12px 6px 10px;
}
.menu-formatos .format-thumb { margin-bottom: 4px; }
.menu-formatos .format-nome { font-size: 12.5px; font-weight: 800; color: #1f2430; }
.format-uso {
    display: block;
    font-size: 10.5px;
    line-height: 1.25;
    color: #667085;
    text-align: center;
}
.menu-formatos .format-btn.active .format-uso { color: var(--verde-800); }
/* Na tira do celular o uso não cabe: fica só o nome. */
.format-collapse .format-uso { display: none; }

/* --- A coluna sobre a arte: só desfazer e zoom ------------------------- */
.acoes-da-arte { gap: 6px; }

/* --- Celular: a barra de cima fica com menu, Salvar, Baixar e o modo --- */
@media (max-width: 860px) {
    .toolbar-right { gap: 6px; }
    .toolbar-acoes { gap: 4px; }
    .acao-topo.acao-icone { display: none; }
    .acao-topo { height: 38px; padding: 0 11px; }
    #btn-save .acao-topo-texto { display: none; }
    .acao-topo.acao-principal { padding: 0 14px; }
}
@media (max-width: 380px) {
    .acao-topo.acao-principal .acao-topo-texto { display: none; }
}

/* --- Painel: estado vazio e botões de baixo ----------------------------- */
.product-editor-empty-subtitle { text-transform: none; letter-spacing: 0; line-height: 1.45; }
.product-editor-empty-subtitle b { color: var(--verde-800); }
.editor-actions .action-btn { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* O vazio do painel: vertical e centrado. Em duas colunas o título
   espremido quebrava em quatro linhas de maiúsculas ao lado do texto. */
.product-editor-empty { padding: 26px 20px !important; }
.product-editor-empty-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 8px !important;
    display: flex !important;
}
.product-editor-empty-title {
    text-transform: none !important;
    font-size: 15.5px !important;
    font-weight: 800;
    letter-spacing: 0 !important;
}
.product-editor-empty-subtitle { max-width: 30ch; font-size: 13px; }

/* O menu no editor: translúcido como os outros botões da barra verde, e não
   o quadrado branco que parecia de outra tela. */
.top-toolbar .btn-menu-lateral {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.top-toolbar .btn-menu-lateral .icone-menu > span { background: #fff !important; }
.top-toolbar .btn-menu-lateral:hover { background: rgba(255, 255, 255, .2) !important; }

/* =====================================================================
   A LOJA DE TEMAS — abre por cima do editor ao criar um encarte
   ===================================================================== */
.loja-temas {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 20, 12, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .18s ease;
}
.loja-temas[hidden] { display: none; }
.loja-temas.aberta { opacity: 1; }
.loja-temas-caixa {
    display: flex;
    flex-direction: column;
    width: min(1120px, 100%);
    max-height: min(860px, 100%);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    overflow: hidden;
    transform: translateY(10px) scale(.985);
    transition: transform .2s ease;
}
.loja-temas.aberta .loja-temas-caixa { transform: none; }
.loja-temas-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px 8px;
}
.loja-temas-topo h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--verde-900); letter-spacing: -.01em; }
.loja-temas-topo p { margin: 4px 0 0; font-size: 13.5px; color: #667085; }
.loja-temas-fechar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #f2f4f7;
    color: #344054;
    font-size: 18px;
    cursor: pointer;
}
.loja-temas-fechar:hover { background: #e4e7ec; }
.loja-temas-filtros { padding: 10px 24px 14px; display: grid; gap: 10px; border-bottom: 1px solid #eef0f3; }
.loja-temas-busca {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    border: 1.5px solid #e3e8e5;
    border-radius: 12px;
    background: #fcfcfd;
    color: #98a2b3;
}
.loja-temas-busca:focus-within { border-color: var(--verde-700); box-shadow: 0 0 0 3px rgba(6, 167, 92, .15); }
.loja-temas-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: #101828; }
.loja-temas-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.loja-temas-chips::-webkit-scrollbar { display: none; }
.loja-chip {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid #e4e7ec;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font: 600 13px inherit;
    cursor: pointer;
    white-space: nowrap;
}
.loja-chip:hover { border-color: var(--verde-700); color: var(--verde-800); }
.loja-chip.ativo { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }
.loja-temas-grade {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    align-content: start;
    gap: 14px;
    padding: 18px 24px;
    background: #f7f8f9;
}
.loja-temas-grade .temas-aviso { grid-column: 1 / -1; }
.loja-tema {
    display: grid;
    gap: 2px;
    padding: 0 0 10px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.loja-tema:hover, .loja-tema:focus-visible {
    transform: translateY(-3px);
    border-color: var(--verde-700);
    box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
    outline: none;
}
.loja-tema-arte {
    display: flex;
    align-items: center;
    aspect-ratio: 1200 / 280;
    padding: 0 5%;
    margin-bottom: 8px;
    background-size: cover;
    background-position: center;
}
.loja-tema-arte img { max-width: 72%; max-height: 80%; }
.loja-tema-nome { padding: 0 12px; font-size: 13.5px; font-weight: 700; color: #101828; }
.loja-tema-cat { padding: 0 12px; font-size: 12px; color: #98a2b3; }
.loja-temas-rodape {
    display: flex;
    justify-content: flex-end;
    padding: 12px 24px;
    border-top: 1px solid #eef0f3;
}
.loja-temas-sem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid #d0d5dd;
    border-radius: 11px;
    background: #fff;
    color: #344054;
    font: 700 14px inherit;
    cursor: pointer;
}
.loja-temas-sem:hover { border-color: var(--verde-700); color: var(--verde-800); }

.btn-abrir-loja-temas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 12px;
    padding: 10px;
    border: 1.5px dashed var(--verde-600);
    border-radius: 11px;
    background: var(--verde-050);
    color: var(--verde-800);
    font: 700 13px inherit;
    cursor: pointer;
}
.btn-abrir-loja-temas:hover { background: var(--verde-100); }

@media (max-width: 700px) {
    .loja-temas { padding: 0; align-items: stretch; }
    .loja-temas-caixa { max-height: none; height: 100%; border-radius: 0; }
    .loja-temas-topo { padding: 16px 16px 4px; }
    .loja-temas-topo h2 { font-size: 19px; }
    .loja-temas-topo p { display: none; }
    .loja-temas-filtros { padding: 8px 16px 12px; }
    .loja-temas-grade { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; gap: 10px; }
    .loja-temas-rodape { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .loja-temas-sem { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .loja-temas, .loja-temas-caixa, .loja-tema { transition: none; }
}
/* Linhas do tamanho do cartão. Com `overflow: hidden` o mínimo automático
   de cada cartão vira zero, e a grade espremia todos para caber na caixa. */
.loja-temas-grade { grid-auto-rows: max-content; }
/* Cartões de formato iguais: a miniatura numa caixa de altura fixa e o
   texto sempre na mesma linha, qualquer que seja a proporção da folha. */
.menu-formatos .format-rail { align-items: stretch !important; }
.menu-formatos .format-btn {
    grid-template-rows: 58px auto auto;
    height: 128px !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    align-self: stretch;
}
.menu-formatos .format-thumb {
    align-self: center;
    justify-self: center;
    max-height: 54px;
    margin: 0 !important;
}
.aviso-novidade i { color: #7a5af8; }

/* A dica de arrastar só faz sentido com dois produtos ou mais: com um só não
   há ordem para mudar, e o texto era ruído logo acima do único cartão. */
.product-list-container:not(:has(#added-products-list > :nth-child(2))) .product-list-hint { display: none; }
.product-list-hint { margin: 0 0 8px; font-size: 12px; color: #98a2b3; }

/* A barra de folhas: rótulo e escolha na mesma linha, sem o tamanho de
   cabeçalho que ela tinha. */
.pagina-barra { gap: 8px; padding: 8px 16px; }
.pagina-barra-rotulo { font-size: 12px; color: #667085; font-weight: 600; }

/* Imprimir e compartilhar também no celular: compartilhar é justamente o
   gesto mais comum lá (mandar no WhatsApp). Botões mais estreitos para caber
   tudo na barra. */
@media (max-width: 860px) {
    .acao-topo.acao-icone { display: inline-flex; width: 34px; height: 38px; }
    .toolbar-acoes { gap: 2px; }
}
@media (max-width: 400px) {
    .acao-topo.acao-principal { padding: 0 11px; gap: 6px; }
    .toolbar-right { gap: 4px; }
}
@media (max-width: 360px) {
    .acao-topo.acao-principal .acao-topo-texto { display: none; }
}

/* =====================================================================
   A JANELA DA CONTA — Perfil e Minha loja
   ===================================================================== */
.profile-modal.conta-janela {
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 32px));
    max-width: none;
    max-height: min(760px, calc(100dvh - 48px));
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
}
.conta-janela-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 22px 14px;
}
.conta-janela-quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.conta-janela-quem > div { min-width: 0; }
.conta-janela-retrato {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--verde-100);
    color: var(--verde-800);
    font-size: 18px;
    overflow: hidden;
}
.conta-janela-retrato img { width: 100%; height: 100%; object-fit: cover; }
.conta-janela-topo h2 { margin: 0; font-size: 19px; font-weight: 800; color: #101828; }
.conta-janela-topo p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #667085;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conta-janela-fechar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px !important;
    background: #f2f4f7 !important;
    color: #475467 !important;
    font-size: 17px !important;
    display: grid;
    place-items: center;
}
.conta-janela-fechar:hover { background: #e4e7ec !important; }

/* As abas como controle segmentado: duas metades de um mesmo botão, a ativa
   em branco. Diz de relance que são duas partes da mesma coisa. */
.conta-janela .perfil-abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 22px 4px;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: #f2f4f7;
}
.conta-janela .perfil-aba {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #475467;
    font: 700 14px inherit;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.conta-janela .perfil-aba::after { display: none !important; }
.conta-janela .perfil-aba:hover { color: var(--verde-800); }
.conta-janela .perfil-aba.ativa {
    background: #fff;
    color: var(--verde-800);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
    border: 0;
}

/* O corpo rola por dentro; cabeçalho, abas e o pé ficam no lugar. */
.conta-janela-corpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 22px 18px;
}
.conta-bloco {
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    background: #fff;
}
.conta-bloco:last-child { margin-bottom: 0; }
.conta-bloco-titulo {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--verde-700);
}
.conta-bloco-nota { margin: -6px 0 12px; font-size: 12.5px; color: #667085; }
.conta-janela .form-group { margin-bottom: 14px; }
.conta-janela .form-group:last-child { margin-bottom: 0; }
.conta-janela .perfil-contato-grade .form-group { margin-bottom: 12px; }
.conta-janela .perfil-contato-grade .form-group:last-child { margin-bottom: 0; }
.conta-janela label { font-size: 13px; }
.conta-janela-corpo input[type="text"],
.conta-janela-corpo input[type="email"],
.conta-janela-corpo input[type="tel"] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid #e4e7ec;
    border-radius: 10px;
    background: #fcfcfd;
    font: inherit;
    font-size: 15px;
    color: #101828;
    box-sizing: border-box;
}
.conta-janela-corpo input:focus {
    outline: none;
    border-color: var(--verde-700);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(6, 167, 92, .15);
}
.conta-campo-travado { position: relative; }
.conta-campo-travado i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #98a2b3;
}
.conta-campo-travado input { padding-left: 32px !important; background: #f2f4f7 !important; color: #475467 !important; }
.conta-janela .campo-nota { display: block; margin-top: 6px; font-size: 12px; color: #98a2b3; }
.conta-janela .perfil-foto { margin: 0; }

.conta-atalho {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #eaecf0;
    border-radius: 14px;
    color: #344054;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.conta-atalho:hover { border-color: var(--verde-700); background: var(--verde-050); }
.conta-atalho-icone {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--verde-100);
    color: var(--verde-800);
}
.conta-atalho-texto { flex: 1; display: grid; }
.conta-atalho-texto b { font-size: 14px; color: #101828; }
.conta-atalho-texto small { font-size: 12.5px; color: #667085; }
.conta-atalho > i { color: #98a2b3; font-size: 12px; }

.conta-janela-pe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 22px;
    border-top: 1px solid #eaecf0;
    background: #fcfcfd;
}
.conta-janela-pe .perfil-aviso { flex: 1 1 100%; margin: 0; }
.conta-janela-pe .perfil-aviso:not(.visivel) { display: none; }
.conta-cancelar {
    height: 42px;
    padding: 0 16px;
    border: 1.5px solid #d0d5dd;
    border-radius: 11px;
    background: #fff;
    color: #344054;
    font: 700 14px inherit;
    cursor: pointer;
}
.conta-cancelar:hover { border-color: #98a2b3; }
.conta-janela .btn-save-profile {
    width: auto !important;
    height: 42px;
    margin: 0 !important;
    padding: 0 20px !important;
    border-radius: 11px;
}

/* Celular: folha que sobe de baixo, com a altura da tela e o pé preso
   acima da barra do sistema. */
@media (max-width: 600px) {
    #profile-modal-overlay { align-items: flex-end; }
    .profile-modal.conta-janela {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 20px 20px 0 0;
        animation: contaSobe .22s ease;
    }
    .conta-janela-topo { padding: 16px 16px 12px; }
    .conta-janela .perfil-abas { margin: 0 16px 4px; }
    .conta-janela-corpo { padding: 12px 16px 16px; }
    .conta-bloco { padding: 14px; }
    .conta-janela-pe { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .conta-cancelar { display: none; }
    .conta-janela .btn-save-profile { flex: 1; }
}
@keyframes contaSobe { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .profile-modal.conta-janela { animation: none; } }
.conta-janela .perfil-foto { border: 0 !important; padding: 0 !important; }
.conta-janela .perfil-foto-alvo { overflow: visible; }

/* O SELINHO DE EDITAR FICA NA BORDA, NÃO DENTRO DO CÍRCULO.

   A foto (e a logo no editor) era um círculo com `overflow: hidden`, e o
   selinho da câmera/lápis ficava dentro dele — cortado pela metade na foto e
   tapando a logo no editor. Agora quem corta é a própria imagem, redonda, e o
   botão deixa o selo sair pela borda, com um anel branco que o separa. */
.perfil-foto-alvo { overflow: visible !important; }
.perfil-foto-alvo img { border-radius: 50%; }
.perfil-foto-camera {
    right: -4px !important;
    bottom: -2px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.perfil-foto-texto { align-items: flex-start; }
.perfil-foto-trocar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 7px 12px;
    font-size: 13px;
}

.logo-thumb { overflow: visible !important; }
.logo-thumb img { border-radius: 50%; }
.logo-thumb-lapis {
    right: -5px !important;
    bottom: -3px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 9.5px !important;
    border: 2px solid #fff;
}

/* A CAPA DO TEMA MONTADA DO JEITO QUE O SAFARI ENTENDE.

   No iPhone a altura vinda de `aspect-ratio` não serve de base para o
   `max-height: 80%` do selo, e o selo aparecia no tamanho natural — enorme e
   cortado. Aqui a proporção vem do `padding-top` (funciona em qualquer
   navegador) e o selo é posicionado por cima, com altura em relação à caixa. */
.loja-tema { display: flex !important; flex-direction: column; }
.loja-tema-arte {
    position: relative;
    display: block !important;
    height: 0;
    padding: 23.34% 0 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden;
}
.loja-tema-arte .loja-tema-selo {
    position: absolute;
    top: 10%;
    height: 80%;
    width: auto;
    max-width: 60%;
    max-height: none !important;
    object-fit: contain;
}
.loja-tema-selo.selo-esquerda { left: 5%; }
.loja-tema-selo.selo-direita { right: 5%; }
.loja-tema-selo.selo-centro { left: 50%; transform: translateX(-50%); }
.loja-tema-nome { margin-top: 8px; }
/* As outras capas de tema (tela inicial, catálogo, datas, tema do dia): o
   mesmo selo posicionado por cima, com altura relativa à capa, pelo mesmo
   motivo do Safari. */
.capa-arte, .catalogo-arte, .data-tema, .tema-dia-capa { position: relative; overflow: hidden; }
.capa-arte .capa-selo,
.catalogo-arte .catalogo-selo,
.data-tema img,
.tema-dia-capa img {
    position: absolute;
    left: 5%;
    top: 12%;
    height: 76%;
    width: auto;
    max-width: 65%;
    max-height: none;
    object-fit: contain;
}

/* O SELO NA POSIÇÃO LIVRE DO TEMA.

   Posição e tamanho em pixels, calculados pelo script a partir das frações
   que o tema guarda (ver posicionarSeloLivre). Aqui só o que tira o selo do
   fluxo e o põe abaixo da logo — a logo da loja nunca fica escondida. */
.offer-header.selo-livre .tema-selo {
    position: absolute;
    margin: 0 !important;
    max-width: none;
    max-height: none;
    object-fit: contain;
    z-index: 1;
}
.offer-header .logo-container { z-index: 2; }
/* A tira antiga debaixo do cabeçalho saiu: a emenda agora é do fundo dele. */
.tema-degrade { display: none !important; }

/* O SELO SOLTO NA PRÉVIA: posição e tamanho vêm do script, e ele se arrasta
   com o dedo ou o mouse. A logo fica do lado oposto ao selo. */
.previa-faixa .previa-selo-img {
    position: absolute;
    max-width: none;
    max-height: none;
    margin: 0 !important;
    object-fit: contain;
    cursor: grab;
    touch-action: none;
    z-index: 2;
    outline: calc(3px / var(--escala-previa, .3)) dashed transparent;
    transition: outline-color .15s ease;
}
.previa-faixa .previa-selo-img:hover,
.previa-faixa .previa-selo-img.arrastando { outline-color: rgba(255, 255, 255, .85); }
.previa-faixa .previa-selo-img.arrastando { cursor: grabbing; }
.previa-faixa .previa-logo { position: relative; z-index: 1; margin-left: auto; margin-right: 0; order: 0; }
.previa-faixa.selo-direita .previa-logo { margin-left: 0; margin-right: auto; }

.selo-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.selo-atalho {
    height: 36px;
    border: 1.5px solid #e4e7ec;
    border-radius: 9px;
    background: #fff;
    color: #344054;
    font: 600 13px inherit;
    cursor: pointer;
}
.selo-atalho:hover { border-color: var(--verde-700); color: var(--verde-800); }
.selo-atalho.ativo { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }

/* O RODAPÉ PERSONALIZADO: uma linha por peça ligada, centradas, e o rodapé
   do tamanho delas. O aviso aqui ocupa a largura toda — a regra que o prende
   num terço é dos arranjos lado a lado, não deste. */
.rodape-arranjo .rp-p {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0.35em 0.9em;
    width: 100%;
}
.rodape-arranjo .rp-p.com-qr { grid-template-columns: auto minmax(0, 1fr); }
.rodape-arranjo .rp-p.com-qr .rp-qr { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
.rodape-arranjo .rp-p .rp-p-linha {
    grid-column: -2 / -1;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35em 1.1em;
    text-align: center;
}
.rodape-arranjo .rp-p .rp-aviso {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    font-size: 0.8em;
    text-align: center;
}
.rodape-arranjo .rp-p .rp-addr { white-space: normal; text-align: center; }
.rodape-arranjo .rp-p .rp-bandeiras { width: auto; }

/* O RODAPÉ SEM A CAIXA DE FORA.

   O "Estilo visual" pintava o próprio rodapé — branco no Premium Light,
   preto no Dark — e isso aparecia como uma segunda caixa em volta das caixas
   das informações. Saiu: quem tem cor são as caixas. */
.offer-footer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.offer-footer::before, .offer-footer::after { display: none !important; }

/* PERSONALIZADO: UMA CAIXA POR INFORMAÇÃO, empilhadas e centradas, cada uma
   do tamanho do que tem dentro. */
.rodape-arranjo[data-tipo="personalizado"] { padding: 0 !important; background: transparent !important; }
.rodape-arranjo .rp-p { gap: 0.4em 0.6em; justify-items: center; }
.rodape-arranjo .rp-p .rp-p-linha {
    width: auto;
    max-width: 100%;
    padding: 0.4em 1em;
    border-radius: var(--rp-raio, 0.7em);
    background: var(--rp-caixa, #ffc107);
    color: var(--rp-texto, #000);
    box-sizing: border-box;
}
.rodape-arranjo .rp-p .rp-p-pagamentos { padding: 0.35em 0.8em; }
.rodape-arranjo .rp-p.com-qr .rp-qr {
    padding: 0.3em;
    border-radius: var(--rp-raio, 0.7em);
    background: #fff;
    width: 5em;
    height: 5em;
}
.rodape-arranjo .rp-p .rp-aviso { margin: 0; }

/* A aba Configurações do admin. */
.config-cabeca { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.config-cartao + .config-cartao { margin-top: 18px; }
.config-cartao:has(.config-chave input:not(:checked)) .config-form { opacity: .55; }
.config-cabeca h3 { margin: 0 0 4px; }
.config-cabeca .admin-nota { margin: 0; }
.config-icone {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e7f8ee;
    color: #128C4A;
    font-size: 22px;
}
.config-chave { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 600; color: #344054; }
.config-chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.config-chave-trilho { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #d0d5dd; transition: background-color .15s ease; }
.config-chave-trilho span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.config-chave input:checked + .config-chave-trilho { background: #25D366; }
.config-chave input:checked + .config-chave-trilho span { transform: translateX(18px); }
.config-chave input:focus-visible + .config-chave-trilho { outline: 3px solid rgba(37, 211, 102, .4); outline-offset: 2px; }
.config-form { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
.config-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid #e3e8e5;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}
.config-testar { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.config-testar.desligado { opacity: .5; pointer-events: none; }
@media (max-width: 720px) {
    .config-form { grid-template-columns: minmax(0, 1fr); }
    .config-cabeca { flex-wrap: wrap; }
    .config-chave { margin-left: 0; }
}

/* --- A MOLDURA DO QR ------------------------------------------------------
   O código fica sempre sobre branco (é o que o celular lê melhor); a moldura
   é o que vem em volta: borda na cor das caixas, ou a caixa inteira com a
   frase embaixo ou em cima. */
.rodape-arranjo .rp-qr[class*="moldura-"] {
    width: auto !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    padding: 0.3em;
    border-radius: var(--rp-raio, 0.6em);
    background: #fff;
    box-sizing: border-box;
}
.rodape-arranjo .rp-qr[class*="moldura-"] img { width: 4.6em; height: 4.6em; display: block; }
.rodape-arranjo .rp-qr.moldura-borda { border: 0.3em solid var(--rp-caixa, #ffc107); }
.rodape-arranjo .rp-qr.moldura-etiqueta,
.rodape-arranjo .rp-qr.moldura-etiqueta-cima {
    background: var(--rp-caixa, #ffc107);
    padding: 0.35em;
}
.rodape-arranjo .rp-qr.moldura-etiqueta img,
.rodape-arranjo .rp-qr.moldura-etiqueta-cima img {
    padding: 0.2em;
    border-radius: calc(var(--rp-raio, 0.6em) * 0.6);
    background: #fff;
    box-sizing: content-box;
}
.rodape-arranjo .rp-qr-frase {
    max-width: 6em;
    color: var(--rp-texto, #000);
    font-size: 0.62em;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

/* --- ONDE O QR FICA NO PERSONALIZADO -------------------------------------- */
.rodape-arranjo .rp-p.com-qr .rp-qr {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
}
.rodape-arranjo .rp-p.com-qr .rp-qr.moldura-nenhuma { padding: 0.25em; background: #fff; }
.rodape-arranjo .rp-p.qr-esquerda { grid-template-columns: auto minmax(0, 1fr); }
.rodape-arranjo .rp-p.qr-esquerda .rp-qr { grid-column: 1; grid-row: 1 / span 4; }
.rodape-arranjo .rp-p.qr-esquerda .rp-p-linha { grid-column: 2; }
.rodape-arranjo .rp-p.qr-direita { grid-template-columns: minmax(0, 1fr) auto; }
.rodape-arranjo .rp-p.qr-direita .rp-qr { grid-column: 2; grid-row: 1 / span 4; }
.rodape-arranjo .rp-p.qr-direita .rp-p-linha { grid-column: 1; }
.rodape-arranjo .rp-p.qr-centro { grid-template-columns: minmax(0, 1fr); }
.rodape-arranjo .rp-p.qr-centro .rp-p-linha { grid-column: 1; }
.rodape-arranjo .rp-p.qr-centro .rp-qr { grid-column: 1; grid-row: 99; justify-self: center; }

/* --- Os controles no painel ---------------------------------------------- */
.qr-opcoes { display: grid; gap: 8px; margin-top: 10px; }
.qr-opcoes .field-row[hidden] { display: none; }
.qr-posicoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.qr-posicao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border: 1.5px solid #e4e7ec;
    border-radius: 9px;
    background: #fff;
    color: #344054;
    font: 600 12.5px inherit;
    cursor: pointer;
}
.qr-posicao:hover { border-color: var(--verde-700); color: var(--verde-800); }
.qr-posicao.ativo { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }
/* Correções da moldura e do centro:
   - no personalizado a regra "fundo transparente" do QR vencia a da
     moldura; aqui a moldura ganha por especificidade;
   - no centro, a grade abria dezenas de linhas vazias até a do QR. Vira
     coluna flexível, com o QR por último. */
.rodape-arranjo .rp-p.com-qr .rp-qr.moldura-etiqueta,
.rodape-arranjo .rp-p.com-qr .rp-qr.moldura-etiqueta-cima { background: var(--rp-caixa, #ffc107); padding: 0.35em; }
.rodape-arranjo .rp-p.com-qr .rp-qr.moldura-borda { background: #fff; padding: 0.3em; }
.rodape-arranjo .rp-p.com-qr .rp-qr.moldura-nenhuma { background: #fff; padding: 0.25em; }
.rodape-arranjo .rp-p.qr-centro { display: flex; flex-direction: column; align-items: center; }
.rodape-arranjo .rp-p.qr-centro .rp-qr { order: 9; grid-row: auto; }
.qr-opcoes .field-row { flex-direction: column; align-items: stretch; gap: 6px; }
.qr-opcoes .field-row > label { width: auto; font-size: 13px; font-weight: 600; }
.qr-opcoes select, .qr-opcoes input[type="text"] { width: 100%; }

/* --- CAIXAS DE PONTA A PONTA (só no personalizado) -----------------------
   Cada informação vira uma faixa da largura do rodapé. Com QR ao lado, ele
   fica por cima da ponta das faixas, e o texto delas abre espaço para ele. */
#linha-caixas-cheias[hidden] { display: none; }
.rodape-arranjo .rp-p.cheio {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: relative;
}
.rodape-arranjo .rp-p.cheio .rp-p-linha { width: 100%; max-width: none; }
.rodape-arranjo .rp-p.cheio.com-qr:not(.qr-centro) { min-height: 7.4em; }
.rodape-arranjo .rp-p.cheio.qr-esquerda .rp-qr,
.rodape-arranjo .rp-p.cheio.qr-direita .rp-qr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    box-shadow: 0 0.25em 0.8em rgba(0, 0, 0, 0.28);
}
.rodape-arranjo .rp-p.cheio.qr-esquerda .rp-qr { left: 0.8em; }
.rodape-arranjo .rp-p.cheio.qr-direita .rp-qr { right: 0.8em; }
.rodape-arranjo .rp-p.cheio.qr-esquerda .rp-p-linha { padding-left: 7.4em; }
.rodape-arranjo .rp-p.cheio.qr-direita .rp-p-linha { padding-right: 7.4em; }
.rodape-arranjo .rp-p.cheio.qr-centro { align-items: stretch; }
.rodape-arranjo .rp-p.cheio.qr-centro .rp-qr { align-self: center; }
/* De ponta a ponta de verdade: a seção do rodapé tomava a largura do texto
   (regra antiga da seção de redes), e o rodapé ainda recuava as laterais. */
.offer-footer:has(.rp-p.cheio) { padding-left: 0 !important; padding-right: 0 !important; }
#footer-socials-preview:has(.rp-p.cheio) { width: 100% !important; max-width: none !important; align-self: stretch !important; }
.rodape-arranjo .rp-p.cheio { width: 100%; }
/* Os exemplos da janela de tipos: a caixa colorida nos arranjos (o rodapé de
   verdade a pinta na seção de dentro; aqui o exemplo é uma peça só). */
.rodape-exemplo .offer-footer.rodape-arranjo:not([data-tipo="personalizado"]) {
    background: var(--rp-caixa, #ffc107) !important;
    border-radius: var(--rp-raio, 0.7em);
}

/* ==========================================================================
   A FOTO A CAMINHO — DE VOLTA, E MAIS BONITA

   O anel sumiu quando as alças de redimensionar ganharam os cantos em "C":
   a regra delas esconde o `::before` da caixa da figura, e era nele que o
   anel girava. Aqui ele volta por cima dessa regra.

   E ganhou forma: um disco branco com sombra leve, um arco verde que gira
   com a ponta se desfazendo (em vez do quarto de anel duro), e no meio o
   ícone de imagem pulsando devagar — diz "aqui vem uma FOTO", e não só
   "espere". Tudo em pixels de tela, pelo `--zoom-da-folha`, como antes.
   ========================================================================== */
.product-img-container.figura-carregando::before {
    display: block !important;
    content: '' !important;
    --roda-da-figura: clamp(30px, calc(46px / var(--zoom-da-folha, 1)), 130px);
    width: var(--roda-da-figura);
    height: var(--roda-da-figura);
    margin: calc(var(--roda-da-figura) / -2) 0 0 calc(var(--roda-da-figura) / -2);
    border: 0 !important;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, #fff 76%, transparent 78% 100%),
        conic-gradient(from 0deg, rgba(5, 133, 73, 0) 0deg, rgba(5, 133, 73, .15) 90deg, var(--verde-700, #058549) 300deg, rgba(5, 133, 73, 0) 360deg) !important;
    box-shadow: 0 calc(var(--roda-da-figura) * .08) calc(var(--roda-da-figura) * .3) rgba(16, 24, 40, .16) !important;
    animation: roda-da-figura .9s linear infinite !important;
    opacity: 1 !important;
    z-index: 3;
}
.product-img-container.figura-carregando::after {
    display: grid !important;
    place-items: center;
    content: '\f03e' !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--roda-da-figura, 46px);
    height: var(--roda-da-figura, 46px);
    --roda-da-figura: clamp(30px, calc(46px / var(--zoom-da-folha, 1)), 130px);
    margin: calc(var(--roda-da-figura) / -2) 0 0 calc(var(--roda-da-figura) / -2);
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: calc(var(--roda-da-figura) * .34);
    line-height: 1;
    color: var(--verde-700, #058549);
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    animation: pulsa-da-figura 1.4s ease-in-out infinite;
    z-index: 4;
    pointer-events: none;
}
@keyframes pulsa-da-figura {
    0%, 100% { opacity: .45; transform: scale(.92); }
    50%      { opacity: 1;   transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .product-img-container.figura-carregando::before,
    .product-img-container.figura-carregando::after { animation: none !important; }
}
/* A miniatura no painel, enquanto a foto vem: o mesmo arco, pequeno. */
.pc-thumb.carregando { position: relative; }
.pc-thumb.carregando > i { opacity: .35; }
.pc-thumb.carregando::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, transparent 72%, transparent 74%),
        conic-gradient(from 0deg, rgba(5, 133, 73, 0) 0deg, var(--verde-700, #058549) 300deg, rgba(5, 133, 73, 0) 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 72%);
            mask: radial-gradient(closest-side, transparent 70%, #000 72%);
    animation: roda-da-figura .9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .pc-thumb.carregando::after { animation: none; } }


/* ==========================================================================
   A LOGO NOVA NO MENU LATERAL
   O símbolo (a etiqueta com o play) entra no lugar do ícone de etiqueta, e o
   logotipo em curvas no lugar do nome escrito. A caixa amarela e a sombra do
   ícone antigo saem: a etiqueta já tem a cor e a luz dela.
   ========================================================================== */
/* Símbolo CHAPADO: o manual pede a versão sem sombra abaixo de 48px — a
   sombra do Material, nesse tamanho, só borrava a borda da etiqueta. */
img.brand-logo {
    background: none;
    box-shadow: none;
    border-radius: 0;
    width: 48px;
    height: auto;
    object-fit: contain;
}
.brand { min-height: 48px; gap: 10px; justify-content: center; }

/* A ANIMAÇÃO DA LOGO.
   Na chegada, a etiqueta cai no lugar balançando, pendurada pelo furo (o
   eixo do giro fica no furo, à direita), e o logotipo entra deslizando.
   Ao passar o mouse na marca, a etiqueta balança de novo. Quem pediu menos
   movimento no sistema não vê nada disso. */
.main-sidebar img.brand-logo {
    transform-origin: 78% 42%;
    animation: logoChega 0.9s cubic-bezier(.3, 1.5, .5, 1) both;
    transition: none;
    box-shadow: none;
}
.main-sidebar .brand-logotipo {
    animation: logotipoChega 0.6s 0.15s cubic-bezier(.2, .8, .3, 1) both;
}
.main-sidebar .brand:hover img.brand-logo,
.main-sidebar:hover .brand:hover img.brand-logo {
    animation: logoBalanca 0.9s ease-in-out;
}
/* O efeito antigo (girar e crescer ao passar pela barra inteira) sai:
   agora a etiqueta balança só quando o mouse está na marca. */
.main-sidebar:hover img.brand-logo { transform: none; }
@keyframes logoChega {
    0%   { opacity: 0; transform: translateY(-14px) rotate(-28deg) scale(.7); }
    55%  { opacity: 1; transform: translateY(0) rotate(10deg) scale(1.04); }
    75%  { transform: rotate(-5deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes logoBalanca {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg); }
    45% { transform: rotate(8deg); }
    70% { transform: rotate(-4deg); }
    85% { transform: rotate(2deg); }
}
@keyframes logotipoChega {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .main-sidebar img.brand-logo, .main-sidebar .brand-logotipo,
    .main-sidebar .brand:hover img.brand-logo { animation: none; }
}
.brand-name { display: flex; align-items: center; }
.brand-logotipo { display: block; height: 40px; width: auto; }
/* Recolhido, só o símbolo, centralizado na coluna estreita. */
.main-sidebar.collapsed img.brand-logo { width: 42px; }

/* ==========================================================================
   MANUAL DE MARCA — a camada que põe o site inteiro na mesma voz
   (kit-de-marca/Manual-de-marca-MIDIA-PRICE.pdf)

   · Cores: as variáveis do :root já são as do manual (verde #046739,
     amarelo da etiqueta #FFD600, vermelho do PRICE #D62828).
   · Letras: Montserrat em toda a interface (títulos em 800/900, texto em
     400–600) e Bebas Neue nos preços e números de destaque — a mesma dupla
     do MÍDIA / PRICE da logo.
   · Superfícies: o estilo Material do símbolo — cartões planos, sombra de
     elevação suave e cantos arredondados, sem contorno pesado.

   A ARTE DO ENCARTE NÃO MUDA: a folha (#offer-canvas) guarda a letra que
   sempre teve. Trocar a fonte herdada ali mexeria em cada encarte já feito.
   ========================================================================== */
:root {
    --fonte-texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --fonte-destaque: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    --sombra-1: 0 1px 2px rgba(16, 24, 40, .10), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-2: 0 2px 4px rgba(16, 24, 40, .08), 0 6px 16px rgba(16, 24, 40, .08);
    --sombra-3: 0 4px 8px rgba(16, 24, 40, .10), 0 16px 36px rgba(16, 24, 40, .14);
}

body, html,
button, input, select, textarea {
    font-family: var(--fonte-texto);
}

/* A folha do encarte e as miniaturas dela ficam com a letra de sempre. */
.offer-container, #offer-canvas {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Títulos da interface: fortes e fechados, como o MÍDIA da logo. */
.work-area h1, .work-area h2, .modal-header h2, .admin-cartao h3 {
    letter-spacing: -0.015em;
}

/* Seleção e foco com as cores da marca. */
::selection { background: var(--amarelo); color: var(--verde-900); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(6, 167, 92, .45);
    outline-offset: 2px;
}

/* Preços e números de destaque em Bebas Neue, como o PRICE da logo.
   A Bebas é estreita: os tamanhos sobem para manter o mesmo peso visual. */
.plano-valor {
    font-family: var(--fonte-destaque);
    font-weight: 400;
    letter-spacing: 0.01em;
    font-size: 44px;
}
.plano-preco-grande .plano-valor { font-size: 48px; }
.checkout-total strong {
    font-family: var(--fonte-destaque);
    font-weight: 400;
    font-size: 34px;
    letter-spacing: 0.02em;
}
.adm-kpi-valor {
    font-family: var(--fonte-destaque);
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0.02em;
}
.plan-price { font-family: var(--fonte-destaque); font-weight: 400; font-size: 44px; }
@media (max-width: 560px) {
    .plano-valor { font-size: 40px; }
    .adm-kpi-valor { font-size: 25px; }
}

/* ==========================================================================
   VITRINE DE TEMAS (vitrine-temas.js)
   Fileiras por categoria que rolam de lado, e grade densa em "Ver tudo" e na
   busca. A capa põe o SELO em destaque, grande e no meio; o fundo fica atrás,
   um pouco escurecido — é o selo que diferencia um tema do outro.
   ========================================================================== */
.vt { --vt-capa: 220px; --vt-gap: 14px; display: flex; flex-direction: column; min-width: 0; }
.vt-compacto { --vt-capa: 150px; --vt-gap: 10px; }

.vt-barra { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vt-busca { position: relative; display: flex; align-items: center; }
.vt-busca > i { position: absolute; left: 14px; color: #98a2b3; font-size: 14px; pointer-events: none; }
.vt-busca input {
    width: 100%; height: 44px; padding: 0 40px 0 40px; border: 1.5px solid #e4e7ec; border-radius: 12px;
    background: #fff; font: 500 14.5px var(--fonte-texto); color: #101828; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vt-busca input:focus { border-color: var(--verde-700); box-shadow: 0 0 0 4px rgba(6, 167, 92, .14); }
.vt-busca input::-webkit-search-cancel-button { display: none; }
.vt-busca-limpar { position: absolute; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: #f2f4f7; color: #475467; cursor: pointer; }
.vt-compacto .vt-busca input { height: 40px; font-size: 13.5px; }

.vt-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 -2px; padding-left: 2px; }
.vt-chips::-webkit-scrollbar { display: none; }
.vt-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    border: 1.5px solid #e4e7ec; border-radius: 999px; background: #fff; color: #344054;
    font: 600 13px var(--fonte-texto); cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vt-chip small { font-size: 11px; font-weight: 700; color: #98a2b3; }
.vt-chip:hover { border-color: var(--verde-700); color: var(--verde-800); }
.vt-chip.ativo { background: var(--verde-800); border-color: var(--verde-800); color: #fff; }
.vt-chip.ativo small { color: var(--amarelo); }
.vt-compacto .vt-chip { height: 30px; font-size: 12px; padding: 0 10px; }

.vt-corpo { display: flex; flex-direction: column; gap: 22px; padding-top: 18px; min-width: 0; }
.vt-compacto .vt-corpo { gap: 16px; padding-top: 14px; }
.vt-aviso { padding: 26px 8px; color: #667085; font-size: 14px; text-align: center; }

/* --- fileira ------------------------------------------------------------- */
.vt-fileira { min-width: 0; }
.vt-fileira-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vt-fileira-cab h3 {
    margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0;
    font: 800 17px/1.2 var(--fonte-texto); color: var(--verde-900); letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-fileira-cab h3::before { content: ''; flex: 0 0 auto; width: 4px; height: 18px; border-radius: 2px; background: var(--amarelo); }
.vt-fileira-cab h3 i { color: var(--verde-700); font-size: 14px; }
.vt-fileira-cab h3:has(i)::before { display: none; }
.vt-compacto .vt-fileira-cab h3 { font-size: 14.5px; }
.vt-ver-tudo {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer;
    font: 700 13px var(--fonte-texto); color: var(--verde-700); padding: 4px 2px; white-space: nowrap;
}
.vt-ver-tudo span { font-weight: 600; color: #98a2b3; }
.vt-ver-tudo span::after { content: '·'; margin-left: 6px; }
.vt-ver-tudo i { font-size: 11px; }
.vt-ver-tudo:hover { color: var(--verde-900); }
.vt-compacto .vt-ver-tudo span { display: none; }

.vt-trilho { position: relative; }
.vt-faixa {
    display: flex; gap: var(--vt-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px;
    scrollbar-width: none; padding: 4px 2px 8px; margin: -4px -2px -8px;
}
.vt-faixa::-webkit-scrollbar { display: none; }
.vt-faixa > * { flex: 0 0 var(--vt-capa); scroll-snap-align: start; }
.vt-mais {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    aspect-ratio: 16 / 10; align-self: flex-start; border: 2px dashed #d0d5dd; border-radius: 14px; background: #fff;
    cursor: pointer; color: var(--verde-800); font-family: var(--fonte-texto);
}
.vt-mais b { font: 400 30px/1 var(--fonte-destaque); letter-spacing: .02em; }
.vt-mais span { font-size: 12.5px; font-weight: 700; }
.vt-mais:hover { border-color: var(--verde-700); background: var(--verde-050); }
.vt-seta {
    position: absolute; top: calc(var(--vt-capa) * 0.3125 - 20px); z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: #fff; color: var(--verde-900); box-shadow: var(--sombra-2); cursor: pointer; display: none;
    transition: opacity .15s ease, transform .15s ease;
}
.vt-seta-esq { left: -12px; } .vt-seta-dir { right: -12px; }
.vt-seta:hover { transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) { .vt-seta { display: grid; place-items: center; } }
.vt-trilho.no-inicio .vt-seta-esq, .vt-trilho.no-fim .vt-seta-dir { opacity: 0; pointer-events: none; }
.vt-compacto .vt-seta { width: 32px; height: 32px; top: calc(var(--vt-capa) * 0.3125 - 16px); }
.vt-compacto .vt-seta-esq { left: -6px; } .vt-compacto .vt-seta-dir { right: -6px; }

/* --- a capa -------------------------------------------------------------- */
.vt-cartao { display: flex; flex-direction: column; gap: 7px; min-width: 0; text-decoration: none; color: inherit; cursor: pointer; outline: none; }
.vt-arte {
    position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
    background: #d0d5dd; box-shadow: var(--sombra-1);
    transition: transform .18s ease, box-shadow .18s ease;
}
.vt-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt-arte.tem-selo .vt-fundo { filter: brightness(.82) saturate(1.05); transform: scale(1.04); }
.vt-arte.tem-selo::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .28) 100%);
}
.vt-selo {
    position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: 86%; max-height: 80%; width: auto; height: auto; object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
    transition: transform .22s cubic-bezier(.3, 1.4, .6, 1);
}
.vt-marcas { position: absolute; z-index: 2; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; }
.vt-novo, .vt-exclusivo {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
    font: 800 10.5px/1.2 var(--fonte-texto); letter-spacing: .06em; text-transform: uppercase;
}
.vt-novo { background: var(--vermelho); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.vt-exclusivo { margin-left: auto; background: rgba(16, 24, 40, .72); color: #fff; }
.vt-usar {
    position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translate(-50%, 8px); opacity: 0;
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
    background: var(--amarelo); color: var(--verde-900); font: 800 12px var(--fonte-texto); box-shadow: var(--sombra-2);
    transition: opacity .16s ease, transform .16s ease;
}
.vt-check {
    position: absolute; z-index: 3; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
    display: none; place-items: center; background: var(--verde-700); color: #fff; font-size: 12px;
    box-shadow: 0 0 0 3px #fff;
}
.vt-nome {
    font: 700 13.5px/1.25 var(--fonte-texto); color: #1d2939; padding: 0 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vt-compacto .vt-nome { font-size: 12px; }
.vt-compacto .vt-usar { display: none; }

@media (hover: hover) {
    .vt-cartao:hover .vt-arte { transform: translateY(-3px); box-shadow: var(--sombra-3); }
    .vt-cartao:hover .vt-selo { transform: translate(-50%, -50%) scale(1.06); }
    .vt-cartao:hover .vt-usar { opacity: 1; transform: translate(-50%, 0); }
}
.vt-cartao:focus-visible .vt-arte { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--verde-600); }
.vt-cartao.escolhido .vt-arte { box-shadow: 0 0 0 3px var(--verde-700), var(--sombra-2); }
.vt-cartao.escolhido .vt-check { display: grid; }
.vt-cartao.escolhido .vt-exclusivo { margin-right: 30px; }
.vt-cartao.escolhido .vt-nome { color: var(--verde-800); }

/* --- grade (Ver tudo / busca) ------------------------------------------- */
.vt-lista-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 14px; }
.vt-lista-cab h3 { margin: 0; font: 800 19px/1.2 var(--fonte-texto); color: var(--verde-900); letter-spacing: -.01em; }
.vt-conta { font-size: 13px; font-weight: 600; color: #98a2b3; }
.vt-voltar {
    flex-basis: 100%; display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 4px 0;
    border: 0; background: none; cursor: pointer; font: 700 13px var(--fonte-texto); color: var(--verde-700);
}
.vt-voltar:hover { color: var(--verde-900); }
.vt-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px var(--vt-gap); }
.vt-compacto .vt-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.vt-sentinela { height: 1px; }
@media (max-width: 640px) {
    .vt { --vt-capa: 150px; --vt-gap: 10px; }
    .vt-nome { font-size: 12.5px; }
    .vt-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .vt-fileira-cab h3 { font-size: 15.5px; }
    .vt-ver-tudo span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .vt-arte, .vt-selo, .vt-usar { transition: none; }
}
/* Os botões do admin na capa (editar, remover). */
.vt-acoes { position: absolute; z-index: 4; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.vt-acao {
    width: 26px; height: 26px; border: 0; border-radius: 7px; display: grid; place-items: center; cursor: pointer;
    background: rgba(255, 255, 255, .94); color: #344054; font-size: 11px; box-shadow: var(--sombra-1);
}
.vt-acoes { right: 6px; bottom: 6px; gap: 4px; }
/* Com mouse, os botões do admin só aparecem ao passar sobre a capa: o selo
   fica limpo para ser visto. No toque ficam sempre, pequenos, no canto. */
@media (hover: hover) and (pointer: fine) {
    .vt-acoes { opacity: 0; transition: opacity .15s ease; }
    .vt-cartao:hover .vt-acoes, .vt-cartao:focus-within .vt-acoes { opacity: 1; }
}
.vt-acao:hover { background: #fff; color: var(--verde-800); }
.vt-acao-apagar:hover { color: var(--vermelho); }
.vt-cartao:has(.vt-acoes) .vt-usar { left: 8px; bottom: 8px; transform: translate(0, 8px); padding: 5px 10px; font-size: 11px; }
@media (hover: hover) { .vt-cartao:has(.vt-acoes):hover .vt-usar { transform: none; } }
/* A vitrine dentro da loja do editor: rola por dentro, com a busca e as
   categorias presas no alto. */
.loja-temas-vitrine { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 24px 22px; overscroll-behavior: contain; }
.loja-temas-vitrine .vt-barra { position: sticky; top: 0; z-index: 5; background: #fff; padding: 6px 0 12px; border-bottom: 1px solid #eef0f3; margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.loja-temas-caixa { height: min(860px, 100%); }
@media (max-width: 640px) {
    .loja-temas-vitrine { padding: 0 16px 18px; }
    .loja-temas-vitrine .vt-barra { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}
/* No painel de edição, a vitrine ocupa a coluna inteira. */
#temas-lista.vt { padding: 0; }

/* ==========================================================================
   INÍCIO: os temas logo abaixo de Criar
   ========================================================================== */
.inicio-temas {
    margin-top: 22px; padding: 22px 22px 26px; border-radius: 20px; background: #fff;
    box-shadow: var(--sombra-1); border: 1px solid #eef0f3; min-width: 0;
}
.inicio-secao-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.inicio-secao-cab h2 { margin: 0; font: 800 21px/1.2 var(--fonte-texto); color: var(--verde-900); letter-spacing: -.015em; }
.inicio-secao-cab p { margin: 4px 0 0; font-size: 13.5px; color: #667085; }
.inicio-secao-link {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
    font: 700 13px var(--fonte-texto); color: var(--verde-800); text-decoration: none; background: var(--verde-050);
}
.inicio-secao-link:hover { background: var(--verde-100); }
.inicio-temas .vt-busca input { background: #f9fafb; }
/* Espaço uniforme entre os blocos do início. */
.dashboard-v2 > .inicio-grade, .dashboard-v2 > .datas, .dashboard-v2 > .passos, .dashboard-v2 > .dashboard-row { margin-top: 22px; }
@media (max-width: 640px) {
    .inicio-temas { margin-top: 16px; padding: 16px 14px 18px; border-radius: 16px; }
    .inicio-secao-cab h2 { font-size: 18px; }
    .inicio-secao-cab p { display: none; }
    .inicio-secao-link { padding: 6px 10px; font-size: 12px; }
}
/* No celular a abertura encolhe para os temas aparecerem logo: os dois
   botões lado a lado, sem a data e sem os atalhos de formato (que também
   estão no editor). */
@media (max-width: 640px) {
    .dashboard-v2 .abertura { padding: 18px 16px 16px; }
    .dashboard-v2 .abertura-topo, .dashboard-v2 .abertura-formatos { display: none; }
    .dashboard-v2 .abertura-titulo { font-size: 22px; }
    .dashboard-v2 .abertura-sub { margin-bottom: 12px; }
    .dashboard-v2 .abertura-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .dashboard-v2 .abertura-botao { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-height: 0; }
    .dashboard-v2 .abertura-botao small, .dashboard-v2 .abertura-botao-seta { display: none; }
    .dashboard-v2 .abertura-botao strong { font-size: 14.5px; }
    .dashboard-v2 .abertura-botao-icone { width: 36px; height: 36px; font-size: 16px; }
}
/* Resumo da vitrine (início): o detalhe da data e o convite para o catálogo. */
.vt-detalhe { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: #fff4d6; color: #b54708; font: 700 11.5px var(--fonte-texto); letter-spacing: 0; }
.vt-convite {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; border-radius: 14px; background: var(--verde-050); border: 1px dashed #b7dfc8;
    font: 600 14px var(--fonte-texto); color: #344054;
}
.vt-convite-botao {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 10px;
    background: var(--verde-800); color: #fff; font: 700 13.5px var(--fonte-texto); cursor: pointer;
}
.vt-convite-botao:hover { background: var(--verde-900); }
@media (max-width: 640px) {
    .vt-fileira-cab h3 { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
    .vt-detalhe { font-size: 11px; }
}