/* ==========================================================================
   VozLocutor — sistema de design do painel
   --------------------------------------------------------------------------
   White-label: a cor de destaque (--pri) é injetada por cada página a partir
   da loja. Tudo aqui deriva dela, então uma loja azul e uma vermelha ficam
   igualmente harmônicas sem tocar neste arquivo.
   ========================================================================== */

:root {
    /* Sobrescritos em tempo de execução pela loja */
    --pri: #dc3545;
    --pri-suave: rgba(220, 53, 69, .08);
    --pri-txt: #c62232;
    --fundo: #f4f6f9;
    --texto: #111827;

    --card: #ffffff;
    --linha: #e5e7eb;
    /* Texto "firme" de navegacao e valores: mais escuro que --dim, mais leve
       que --texto. E o text-2 do template. */
    --texto2: #374151;
    /* Roxo do "Produzida". Nao e a cor da loja: e o par fixo do Voz-Off em
       toda a interface, entao nao entra no calculo white-label do --pri. */
    --prod: #7c3aed;
    --prod-suave: #ede9fe;
    --prod-txt: #6d28d9;
    /* Dois cinzas de apoio, ambos legiveis em texto pequeno sobre o cartao:
       --dim e o cinza medio do template (#6b7280, 4,8:1 no branco); --fraco
       fica logo acima do limite de 4,5:1 — o #9ca3af que o template usa em
       micro-rotulos reprova (2,6:1) e nao entra. */
    --dim: #6b7280;
    --fraco: #6f7787;
    /* Dois preenchimentos cinza, os mesmos do template:
       --sutil (#f9fafb) para faixas e hovers, quase branco;
       --chip  (#f3f4f6) para botoezinhos e paginas inativas, um tom abaixo.
       Sao fixos, nao derivam do --fundo da loja: e o que mantem o painel
       "neutro profissional" mesmo numa loja de fundo colorido. */
    --sutil: #f9fafb;
    --chip: #f3f4f6;
    --ok: #10b981;
    --ok-suave: rgba(16, 185, 129, .12);
    --alerta: #f59e0b;
    --alerta-suave: rgba(245, 158, 11, .12);
    --erro: #ef4444;
    --erro-suave: rgba(239, 68, 68, .10);

    /* ─── Compatibilidade com o style.css legado ───────────────────────────
       Mesmos nomes e valores do :root do style.css — só para as classes de
       status/alerta que comum/render_pedidos.php ainda gera (portadas mais
       abaixo, seção "CLASSES PORTADAS DO STYLE.CSS"). Prefixo --legado-
       de propósito: não são tokens do sistema de design, é ponte 1:1 com o
       arquivo antigo para a aparência não mudar nesta migração. Onde o
       style.css não redefinia no escuro (--danger, --danger-light,
       --gradient-primary), a cor fica igual nos dois temas aqui também —
       é o comportamento de hoje, não uma correção. Ver [[vozlocutor-pendencias]]
       para o próximo passo (revisão de contraste destas classes). */
    --legado-text-primary: #1e293b;
    --legado-text-secondary: #64748b;
    --legado-text-muted: #94a3b8;
    --legado-border-color: #e2e8f0;
    --legado-bg-main: #f8f9fc;
    --legado-bg-white: #ffffff;
    --legado-primary: #dc3545;
    --legado-primary-ultra-light: #fff5f6;
    --legado-info: #3b82f6;
    --legado-info-light: #dbeafe;
    --legado-success: #10b981;
    --legado-success-light: #d1fae5;
    --legado-warning: #f59e0b;
    --legado-warning-light: #fef3c7;
    --legado-danger: #dc2626;
    --legado-danger-light: #fee2e2;
    --legado-purple: #8b5cf6;
    --legado-purple-light: #ede9fe;
    --legado-gradient-primary: linear-gradient(135deg, #dc3545 0%, #ff6b7a 100%);
    --legado-shadow-lg: 0 10px 25px rgba(0, 0, 0, .1);

    --r: 12px;
    --r-sm: 8px;
    /* Elevacao discreta: o cartao agora tem borda em todo tema, entao a sombra
       so precisa dar o descolamento minimo do fundo. */
    --sombra: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --sombra-alta: 0 4px 12px rgba(16, 24, 40, .08), 0 20px 60px rgba(16, 24, 40, .14);
    --menu-larg: 240px;
    --topo-alt: 52px;

    /* Sem isto, navegadores com "forçar tema escuro no conteúdo web" (comum
       no Chrome/Android) não sabem que a página já tem tema escuro PRÓPRIO —
       e tentam escurecer por cima de novo, na base da heurística. O resultado
       é um card que já é escuro ficando com pedaços trocados/claros, tipo
       remendo, porque a heurística erra em elementos com gradiente/oklch/
       variável CSS. Isto diz ao navegador "eu já cuido dos dois temas",
       então ele para de tentar. */
    color-scheme: light;
}

/* ─── Tema escuro ────────────────────────────────────────────────────────────
   Só os tokens mudam: como todo componente daqui consome --card, --fundo,
   --linha e --texto, trocar os quatro vira a tela inteira. A chave é
   `data-theme`, a mesma que o style.css das telas herdadas já usa — assim uma
   troca só acende as duas metades do painel.

   --pri fica de fora de propósito: é a cor da loja e não deve mudar com o tema.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    /* :root[data-theme] e nao so [data-theme]: as cores da loja sao injetadas
       num <style>:root{} inline que vem DEPOIS deste arquivo. Com a mesma
       especificidade, o inline vencia e --fundo/--texto continuavam claros no
       tema escuro. Um seletor a mais resolve sem !important. */
    --card: #232940;
    --fundo: #1a1a2e;
    --linha: rgba(255, 255, 255, .10);
    --texto: #f2f4f8;
    --pri-txt: #e7727d;
    --texto2: #cbd3e1;
    --dim: #a8b2d1;
    --fraco: #8892a8;
    --sutil: rgba(255, 255, 255, .05);
    --chip: rgba(255, 255, 255, .09);
    --prod-suave: rgba(139, 92, 246, .18);
    --prod-txt: #c4b5fd;
    --ok: #34d399;
    --ok-txt: #6ee7b7;
    --ok-suave: rgba(16, 185, 129, .18);
    --alerta-suave: rgba(245, 158, 11, .20);
    --erro-suave: rgba(239, 68, 68, .18);
    --sombra: 0 1px 3px rgba(0, 0, 0, .30), 0 1px 2px rgba(0, 0, 0, .24);
    --sombra-alta: 0 4px 12px rgba(0, 0, 0, .35), 0 20px 60px rgba(0, 0, 0, .45);

    /* --legado-* que o style.css redefinia no [data-theme="dark"] dele.
       --legado-danger, --legado-danger-light, --legado-primary-ultra-light*
       e --legado-gradient-primary NÃO aparecem aqui de propósito — o
       style.css também não os redefinia, então ficam com o valor claro
       nos dois temas, igual ao comportamento de hoje.
       *--legado-primary-ultra-light É redefinido (rgba, ver abaixo). */
    --legado-bg-main: #1a1a2e;
    --legado-bg-white: #232940;
    --legado-text-primary: #ffffff;
    --legado-text-secondary: #a8b2d1;
    --legado-text-muted: #8892a8;
    --legado-border-color: rgba(255, 255, 255, .1);
    --legado-primary-ultra-light: rgba(220, 53, 69, .1);
    --legado-info-light: rgba(59, 130, 246, .2);
    --legado-success-light: rgba(16, 185, 129, .2);
    --legado-warning-light: rgba(245, 158, 11, .2);
    --legado-purple-light: rgba(139, 92, 246, .2);
    --legado-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* O bloco acima define --fundo; esta regra garante a virada de cor no body
   (o --fundo claro injetado pela loja tem a mesma especificidade do bloco
   escuro em telas sem tema ainda aplicado). O degradê em si não mora mais
   aqui — foi pra body::before (ver "Respiro" logo abaixo) — então só
   repetimos o --fundo chapado; o brilho escuro tem sua própria regra. */
:root[data-theme="dark"] body {
    background: var(--fundo);
    color: var(--texto);
}

:root[data-theme="dark"] body::before {
    background: radial-gradient(1100px 560px at 50% -10%, var(--pri-suave), transparent 70%);
}

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

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

/* `html body`, não só `body`: em gravar.php, editar_pedido.php e
   correcao_pedido.php o style.css herdado carrega DEPOIS deste arquivo e
   também define `body{background:...}` liso — mesmo empate de
   especificidade que já dava dor de cabeça com font-family nessas telas
   (ver comentário local em cada uma). Um seletor a mais garante que o fundo
   daqui vence sempre, em qualquer ordem de carregamento. */
html body {
    position: relative;
    z-index: 0;
    font-family: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--fundo);
    color: var(--texto);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ─── Respiro ────────────────────────────────────────────────────────────────
   O brilho "Aurora" (aprovado em mockup) mora numa camada própria — não mais
   dentro do background{} do body — só assim dá pra animar o brilho (opacity)
   sem esmaecer o texto/cartões junto.
   position:relative + z-index:0 no body (acima) faz do body seu próprio
   contexto de empilhamento: sem isso, o z-index:-1 abaixo pintaria atrás do
   PRÓPRIO fundo opaco do body e o brilho sumiria por completo.
   Pulsação lenta e de baixa amplitude de propósito — remete à respiração/fala
   sem desenhar nada literal (sem onda, sem barra). Aprovado em mockup (ver
   artifact "Degradê VozLocutor", opção Respiro).
   Roda mesmo com prefers-reduced-motion: só anima opacity, sem deslocamento/
   zoom/parallax — o tipo de movimento que essa preferência existe pra evitar
   não se aplica aqui. Decisão consciente, não esquecimento. */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(1100px 560px at 50% -10%, var(--pri-suave), transparent 70%);
    animation: vozRespirar 7s ease-in-out infinite;
}

@keyframes vozRespirar {

    0%,
    100% {
        opacity: .55
    }

    50% {
        opacity: 1
    }
}

a {
    color: inherit
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
/* 1400px e não 1080: com o menu lateral de 252px, um teto de 1080 deixava um
   vão morto à direita em tela cheia — a mesma sensação de aperto que o
   assistente de gravação tinha. */
/* 1640px (era 1400) em 27/09/2026: em tela de 1920 sobravam ~170px vazios
   de cada lado, enquanto o Solicitar Gravação (casca antiga, largura toda)
   ocupava a tela. Agora as telas do cliente ficam com a mesma largura dele.
   Abaixo de ~1700px de tela nada muda: o limite nem é alcançado. */
.voz-container {
    max-width: 1640px;
    margin: 0 auto;
    padding: 26px 28px 64px
}

.voz-container.estreito {
    max-width: 520px
}

@media(max-width:760px) {
    .voz-container {
        padding: 20px 16px 48px
    }
}

/* Telas centradas (login, cadastro, seletor) */
.voz-centro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px
}

.voz-centro .voz-caixa {
    width: 100%;
    max-width: 430px
}

/* ─── Menu lateral ───────────────────────────────────────────────────────────
   Fixo no desktop, gaveta no celular. O recuo do conteúdo é injetado por
   vozBarraTopo(), não daqui: só as telas com menu podem recebê-lo, e login,
   cadastro e seletor de loja usam o mesmo voz.css sem menu nenhum.
   ------------------------------------------------------------------------- */
.voz-lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--menu-larg);
    z-index: 950;
    background: var(--card);
    border-right: 1px solid var(--linha);
    display: flex;
    flex-direction: column;
    transition: transform .22s ease;
}

/* ── Marca ── */
.voz-lateral .voz-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 20px;
    border-bottom: 1px solid var(--linha);
}

/* Logo de loja quase sempre é faixa larga (uns 3,5:1). Limitando só a altura,
   ela fica estreita demais para os 240px do menu — por isso a altura sobe até
   caber a largura útil. */
.voz-lateral .voz-marca img {
    max-height: 44px;
    max-width: 100%;
    object-fit: contain;
    display: block
}

.voz-lateral .voz-marca .sigla {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--pri);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}

.voz-lateral .voz-marca .txt {
    min-width: 0
}

/* Cor explicita: .txt e .marca sao nomes genericos que o style.css herdado
   tambem usa, e sem declarar aqui o valor dele passava a valer. */
.voz-lateral .voz-marca .txt b {
    display: block;
    color: var(--texto);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voz-lateral .voz-marca .txt small {
    display: block;
    color: var(--fraco);
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Navegação ── */
.voz-menu {
    flex: 1;
    overflow-y: auto;
    padding: 12px
}

.voz-menu .grupo {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fraco);
    padding: 0 8px 6px;
}

.voz-menu .grupo+a {
    margin-top: 0
}

.voz-menu .grupo:not(:first-child) {
    padding-top: 16px
}

.voz-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 2px;
    color: var(--texto2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background .12s, color .12s;
}

.voz-menu a i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    color: var(--dim)
}

.voz-menu a.ativo i,
.voz-menu a:hover i {
    color: inherit
}

.voz-menu a span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.voz-menu a:hover {
    background: var(--sutil);
    color: var(--texto)
}

.voz-menu a.ativo {
    background: var(--pri-suave);
    color: var(--pri-txt);
    font-weight: 600
}

/* Contador opcional ao lado do item (ex.: pedidos em aberto). Só aparece se a
   página passar o número — o menu não faz consulta por conta própria. */
.voz-menu a .conta {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--pri-suave);
    color: var(--pri-txt);
}

/* ── Caixa de créditos ── */
/* A caixa inteira leva a borda e o fundo, e o rotulo fica DENTRO dela — no
   template o "SEUS CREDITOS" faz parte do quadro, nao e um titulo solto. */
.voz-saldo-menu {
    margin: 0 12px 12px;
    padding: 12px;
    border-radius: var(--r-sm);
    background: var(--sutil);
    border: 1px solid var(--linha);
}

.voz-saldo-menu .rotulo {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 8px;
}

.voz-saldo-menu .par {
    display: flex;
    align-items: center;
    gap: 12px
}

.voz-saldo-menu .cred {
    min-width: 0
}

.voz-saldo-menu .risco {
    width: 1px;
    height: 32px;
    background: var(--linha);
    flex: none
}

.voz-saldo-menu b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.3px;
    color: var(--texto);
}

.voz-saldo-menu b.prod {
    color: var(--prod)
}

[data-theme="dark"] .voz-saldo-menu b.prod {
    color: var(--prod-txt)
}

.voz-saldo-menu span {
    display: block;
    font-size: 10px;
    color: var(--dim);
    margin-top: 1px
}

.voz-saldo-menu .mais {
    margin-left: auto;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chip);
    border: none;
    color: var(--texto2);
    font-size: 11px;
    text-decoration: none;
    transition: background .12s;
}

.voz-saldo-menu .mais:hover {
    background: var(--linha)
}

/* ── Rodapé: quem está logado ── */
.voz-rodape-menu {
    border-top: 1px solid var(--linha);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.voz-rodape-menu .av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pri);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.voz-rodape-menu .quem {
    flex: 1;
    min-width: 0
}

.voz-rodape-menu .quem b {
    display: block;
    color: var(--texto);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voz-rodape-menu .quem small {
    display: block;
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O avatar e o nome agora levam a "Meus dados". Sem retorno visual o clique
   não se anuncia — e um bloco que navega sem parecer clicável é pior que não
   ser clicável. */
a.av,
a.quem {
    text-decoration: none;
    transition: opacity .14s
}

.voz-rodape-menu a.av:hover {
    opacity: .85
}

/* Com foto o círculo vira moldura: sem o overflow a imagem escapa do raio, e
   sem zerar o fundo a cor da loja aparece nas bordas de foto não quadrada. */
.voz-rodape-menu .av.com-foto {
    background: transparent;
    overflow: hidden;
    padding: 0
}

.voz-rodape-menu .av.com-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.voz-rodape-menu a.quem:hover b {
    color: var(--pri-txt)
}

.voz-rodape-menu a.av:focus-visible,
.voz-rodape-menu a.quem:focus-visible {
    outline: 2px solid var(--pri);
    outline-offset: 2px;
    border-radius: 6px
}

.voz-rodape-menu .acoes {
    display: flex;
    gap: 2px;
    flex-shrink: 0
}

.voz-rodape-menu .acoes a,
.voz-rodape-menu .acoes button {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dim);
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    transition: all .12s;
}

.voz-rodape-menu .acoes a:hover,
.voz-rodape-menu .acoes button:hover {
    background: var(--sutil);
    color: var(--texto)
}

.voz-rodape-menu .acoes a.sair:hover {
    color: var(--erro)
}

/* ─── Barra de topo ──────────────────────────────────────────────────────────
   Uma peça só para os dois tamanhos: no desktop mostra a trilha e quem está
   logado; no celular vira o cabeçalho com o botão da gaveta e a marca. Antes
   eram dois elementos (.voz-barra só no celular) com marcação duplicada.
   ------------------------------------------------------------------------- */
.voz-topo {
    position: fixed;
    top: 0;
    left: var(--menu-larg);
    right: 0;
    height: var(--topo-alt);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 28px;
    background: var(--card);
    border-bottom: 1px solid var(--linha);
}

.voz-topo .abrir {
    display: none
}

.voz-topo .marca-mob {
    display: none
}

.voz-caminho {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    color: var(--dim);
}

.voz-caminho i {
    font-size: 10px;
    color: var(--fraco);
    flex: none
}

.voz-caminho .atual {
    font-weight: 600;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voz-topo-quem {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none
}

.voz-topo-quem .nome {
    font-size: 13px;
    color: var(--dim)
}

.voz-topo-quem .av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pri);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

/* Alternador de tema: no rodapé do menu e na barra de topo. */
.voz-tema {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    flex: none;
    border: none;
    background: none;
    color: var(--dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all .12s;
}

.voz-tema:hover {
    background: var(--chip);
    color: var(--texto)
}

/* Véu da gaveta: sem efeito no desktop */
.voz-veu {
    display: none
}

/* ─── Botão flutuante do WhatsApp ─────────────────────────────────────────────
   Fica na casca (vozBarraTopo), então toda tela com menu ganha o botão sem
   precisar declarar nada. z-index acima de tudo (inclusive o rodapé fixo do
   assistente de gravação, que tem z-index:80).
   -------------------------------------------------------------------------- */
.voz-zap-flutuante {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 150;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* #128c7e (o teal da barra do app) e não o #25d366 do balão de mensagem:
       o ícone branco sobre #25d366 dá 1,98:1 — bem abaixo do 3:1 mínimo para
       ícone. #128c7e mantém a identidade "WhatsApp" e passa em 4,14:1. */
    background: #128c7e;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    transition: transform .15s, box-shadow .15s;
}

.voz-zap-flutuante:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    color: #fff
}

/* gravar.php é a única tela com .voz-assistente: lá o botão atrapalha o
   rodapé fixo do assistente de gravação (Próximo/Voltar), então some. */
body:has(.voz-assistente) .voz-zap-flutuante {
    display: none
}

/* meus_pedidos.php e historicoPedidos.php têm um botão "Solicitar Gravação"
   fixo centralizado no celular; quando o menu de ações de uma linha abre,
   ambos os flutuantes somem — ver initDropdowns() nessas telas. */
body.dropdown-aberto .voz-zap-flutuante {
    display: none
}

@media(max-width:640px) {
    .voz-zap-flutuante {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
        font-size: 21px
    }
}

@media(max-width:980px) {
    .voz-lateral {
        transform: translateX(-100%);
        box-shadow: var(--sombra-alta)
    }

    .voz-lateral.aberto {
        transform: translateX(0)
    }

    .voz-veu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 940;
        background: rgba(15, 23, 42, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }

    .voz-veu.aberto {
        opacity: 1;
        pointer-events: auto
    }

    .voz-topo {
        left: 0;
        padding: 0 14px;
        gap: 10px
    }

    .voz-topo .abrir {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid var(--linha);
        background: var(--card);
        color: var(--texto);
        font-size: 15px;
        cursor: pointer;
    }

    /* A trilha some: no celular o título da página já está logo abaixo, e o
       espaço vai para a marca. */
    .voz-caminho {
        display: none
    }

    .voz-topo .marca-mob {
        display: block;
        flex: 1;
        min-width: 0;
        text-decoration: none;
        color: var(--texto);
        font-weight: 700;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .voz-topo .marca-mob img {
        max-height: 28px;
        max-width: 130px;
        object-fit: contain;
        display: block
    }

    .voz-topo-quem .nome {
        display: none
    }
}

/* ─── Saudação / cabeçalho de página ─────────────────────────────────────── */
/* Mesma tipografia do cabeçalho do assistente de gravação, para as telas não
   parecerem de sistemas diferentes ao trocar de página. */
.voz-ola {
    margin-bottom: 20px
}

.voz-ola h1 {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 2px
}

.voz-ola p {
    color: var(--dim);
    font-size: 14.5px
}

/* ─── Cartões de indicador ───────────────────────────────────────────────── */
.voz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 15px;
    margin-bottom: 22px
}

.voz-card {
    background: var(--card);
    border-radius: var(--r);
    padding: 20px;
    box-shadow: var(--sombra);
    border: 1px solid transparent;
    transition: transform .18s, box-shadow .18s;
}

.voz-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-alta)
}

.voz-card.saldo {
    position: relative;
    overflow: hidden
}

.voz-card.saldo::after {
    content: '';
    position: absolute;
    right: -18px;
    top: -18px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--ok-suave);
}

.voz-card .rotulo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--fraco);
    font-weight: 700;
    margin-bottom: 7px;
}

.voz-card .numero {
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1
}

.voz-card .numero.verde {
    color: var(--ok)
}

.voz-card .nota {
    font-size: 12.5px;
    color: var(--fraco);
    margin-top: 5px
}

/* ─── Botões ─────────────────────────────────────────────────────────────── */
.voz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--linha);
    background: var(--card);
    color: var(--texto);
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.voz-btn:hover {
    border-color: var(--pri);
    color: var(--pri-txt)
}

.voz-btn.pri {
    background: var(--pri);
    color: #fff;
    border-color: var(--pri)
}

.voz-btn.pri:hover {
    color: #fff;
    opacity: .88
}

.voz-btn.bloco {
    width: 100%
}

.voz-btn.grande {
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 700
}

.voz-btn.pequeno {
    padding: 7px 12px;
    font-size: 12.5px
}

.voz-btn:disabled,
.voz-btn.inativo {
    opacity: .45;
    cursor: not-allowed;
    transform: none
}

.voz-acoes {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 28px
}

/* ─── Superfície: o cartão branco ─────────────────────────────────────────────
   Uma definição só. Antes eram quatro (.voz-bloco, .cp-bloco, .fin-bloco,
   .voz-painel), com raios e elevações diferentes — e o olho lia como telas de
   sistemas diferentes ao trocar de página.

   Borda + sombra leve nos DOIS temas: a elevação só por sombra deixava o
   cartão vago sobre um fundo quase branco, e no escuro a sombra some de vez.
   -------------------------------------------------------------------------- */
.voz-bloco {
    background: var(--card);
    border: 1px solid var(--linha);
    border-radius: var(--r);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 16px;
}

.voz-bloco>h2 {
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.voz-bloco>h2 i {
    color: var(--pri-txt);
    font-size: 15px
}

.voz-bloco>h2 .aux {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dim)
}

/* Linha de apoio abaixo do título do bloco. */
.voz-sub {
    font-size: 13.5px;
    color: var(--dim);
    line-height: 1.6;
    margin-bottom: 18px
}

/* Conteúdo que precisa sangrar até a borda do cartão (listas, tabelas largas).
   O bloco tem padding; estes cancelam nas laterais, em vez de o bloco perder o
   padding para todo mundo. */
.voz-bloco>.voz-lista {
    margin: 14px -22px -22px
}

.voz-rolagem {
    overflow-x: auto;
    margin: 0 -22px;
    padding: 0 22px
}

/* ─── Cabeçalho de página ────────────────────────────────────────────────────
   Era .voz-ola no Início, .fin-cabecalho no Financeiro e .voz-cabeca na
   gravação: três jeitos de escrever a mesma primeira linha da tela.
   -------------------------------------------------------------------------- */
/* .voz-cabecalho e uma LINHA: titulo a esquerda, acao a direita. Exige que o
   titulo e a descricao venham dentro de uma <div>, senao viram duas colunas.
   O .voz-ola do Inicio nao tem essa <div> e continua empilhado. */
.voz-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.voz-ola {
    margin-bottom: 24px
}

.voz-cabecalho h1,
.voz-ola h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.3px
}

.voz-cabecalho p,
.voz-ola p {
    color: var(--dim);
    font-size: 14px;
    margin-top: 2px
}

/* ─── Abas ───────────────────────────────────────────────────────────────── */
.voz-abas {
    display: flex;
    gap: 4px;
    overflow-x: visible;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--linha)
}

.voz-aba {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    padding: 13px 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

.voz-aba:hover {
    color: var(--pri-txt)
}

.voz-aba.ativa {
    color: var(--pri-txt);
    border-bottom-color: var(--pri);
    font-weight: 700
}

.voz-aba i {
    font-size: 15px
}

@media(max-width:600px) {
    .voz-aba {
        padding: 12px 13px;
        font-size: 13.5px
    }

    .voz-aba span {
        display: none
    }

    .voz-aba.ativa span {
        display: inline
    }

    .voz-aba i {
        font-size: 17px
    }
}

/* ─── Listas de itens ────────────────────────────────────────────────────── */
.voz-lista {
    list-style: none
}

.voz-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--linha);
    text-decoration: none;
    color: inherit;
    transition: background .14s;
}

.voz-item:last-child {
    border-bottom: none
}

.voz-item:hover {
    background: var(--fundo)
}

.voz-item .info {
    flex: 1;
    min-width: 0
}

.voz-item .titulo {
    font-weight: 600;
    font-size: 14.5px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.voz-item .meta {
    font-size: 12.5px;
    color: var(--fraco)
}

/* Pilha de itens em caixinha (histórico de compras, extrato). */
.voz-linhas {
    display: flex;
    flex-direction: column
}

/* Item em caixinha própria. Era .cp-item e .fin-linha — iguais nos dois. */
.voz-linha-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 15px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: 12px;
}

.voz-linha-item+.voz-linha-item {
    margin-top: 9px
}

.voz-linha-item .oque {
    flex: 1;
    min-width: 0
}

.voz-linha-item .oque b {
    display: block;
    font-size: 14.5px;
    font-weight: 600
}

.voz-linha-item .oque small {
    display: block;
    font-size: 12.5px;
    color: var(--dim);
    margin-top: 2px
}

.voz-linha-item .oque em {
    display: block;
    font-size: 12.5px;
    color: #92400e;
    font-style: normal;
    margin-top: 5px
}

[data-theme="dark"] .voz-linha-item .oque em {
    color: #fbbf24
}

/* ─── Selo de situação ───────────────────────────────────────────────────────
   Nomes pelo SIGNIFICADO e não pela cor: "ok" continua fazendo sentido se um
   dia o verde virar outro tom. Antes eram três componentes (.voz-tag,
   .cp-selo, .fin-selo) com as mesmas quatro variantes.

   A bolinha não é enfeite: cor sozinha não distingue para quem enxerga cor de
   outro jeito.
   -------------------------------------------------------------------------- */
.voz-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--pri-suave);
    color: var(--pri-txt);
}

.voz-selo::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none
}

.voz-selo.sem-ponto::before {
    display: none
}

.voz-selo.ok {
    background: var(--ok-suave);
    color: var(--ok-txt)
}

.voz-selo.info {
    background: rgba(59, 130, 246, .14);
    color: #1d4ed8
}

.voz-selo.alerta {
    background: var(--alerta-suave);
    color: #92400e
}

.voz-selo.erro {
    background: var(--erro-suave);
    color: #b91c1c
}

.voz-selo.neutro {
    background: var(--fundo);
    color: var(--dim)
}

[data-theme="dark"] .voz-selo.info {
    color: #93c5fd
}

[data-theme="dark"] .voz-selo.alerta {
    color: #fbbf24
}

[data-theme="dark"] .voz-selo.erro {
    color: #fca5a5
}

/* ─── Tabela ─────────────────────────────────────────────────────────────── */
.voz-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px
}

/* Faixa cinza no cabecalho, como no template: separa a tabela do resto do
   cartao sem precisar de um titulo em cima. */
.voz-tabela thead {
    background: var(--sutil)
}

.voz-tabela th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dim);
    padding: 12px 20px;
    white-space: nowrap;
    border: 0;
}

.voz-tabela td {
    padding: 14px 20px;
    border-top: 1px solid var(--linha);
    vertical-align: middle
}

.voz-tabela tbody tr:hover {
    background: var(--sutil)
}

.voz-tabela th.num,
.voz-tabela td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.voz-tabela td b {
    display: block;
    font-size: 14px;
    font-weight: 600
}

.voz-tabela td small {
    display: block;
    font-size: 12px;
    color: var(--dim);
    margin-top: 2px
}

.voz-tabela td.cinza {
    color: var(--dim)
}

.voz-tabela td.forte {
    font-weight: 800
}

.voz-tabela td.mais {
    color: var(--ok-txt);
    font-weight: 700
}

.voz-tabela td.menos {
    color: #b91c1c;
    font-weight: 700
}

[data-theme="dark"] .voz-tabela td.menos {
    color: #fca5a5
}

/* ─── Etiqueta de tipo (Voz-Off / Produzida) ─────────────────────────────────
   O par Off/Produzida aparece na tabela, nos cartões do celular e no assistente
   de gravação. Off puxa a cor da loja; Produzida usa o roxo fixo do --prod.
   -------------------------------------------------------------------------- */
.voz-tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--sutil);
    color: var(--dim);
}

.voz-tipo i {
    font-size: 9px
}

.voz-tipo.off {
    background: var(--pri-suave);
    color: var(--pri-txt)
}

.voz-tipo.prod {
    background: var(--prod-suave);
    color: var(--prod-txt)
}

/* ─── Botão só de ícone (ações de linha) ─────────────────────────────────── */
.voz-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: none;
    color: var(--dim);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: all .12s;
}

.voz-icone:hover {
    background: var(--chip);
    color: var(--texto)
}

.voz-icone.perigo:hover {
    color: var(--erro)
}

.voz-acoes-linha {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end
}

/* ─── Campo de busca com lupa ────────────────────────────────────────────── */
.voz-busca {
    position: relative;
    flex: 1;
    min-width: 224px
}

.voz-busca>i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fraco);
    font-size: 13px;
    pointer-events: none;
}

.voz-busca input {
    width: 100%;
    padding: 8px 14px 8px 34px;
    border: 1px solid var(--linha);
    border-radius: var(--r-sm);
    background: var(--sutil);
    color: var(--texto);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s;
}

.voz-busca input:focus {
    border-color: var(--pri);
    background: var(--card)
}

.voz-busca input::placeholder {
    color: var(--fraco)
}

/* Barra de filtros: a busca e as pílulas na mesma linha, dentro do cartão. */
.voz-barra-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.voz-filtro-icone {
    color: var(--fraco);
    font-size: 12px;
    flex: none
}

.voz-barra-filtros .voz-filtros {
    margin: 0
}

/* ─── Cartão que é só tabela ─────────────────────────────────────────────────
   Sem padding: a faixa do <thead> e as linhas encostam na borda do cartão, e o
   respiro vem do padding das células.
   -------------------------------------------------------------------------- */
.voz-bloco.tabela {
    padding: 0;
    overflow: hidden
}

.voz-bloco.tabela .voz-tabela tbody tr:first-child td {
    border-top: 0
}

/* Rodapé da tabela: contagem à esquerda, paginação à direita. */
.voz-pe-tabela {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid var(--linha);
}

.voz-pe-tabela .conta {
    font-size: 12px;
    color: var(--dim)
}

.voz-paginas {
    display: flex;
    align-items: center;
    gap: 4px
}

.voz-paginas a,
.voz-paginas button,
.voz-paginas span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    background: var(--chip);
    color: var(--texto2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .12s;
}

.voz-paginas a:hover,
.voz-paginas button:hover {
    color: var(--texto)
}

.voz-paginas .atual,
.voz-paginas .atual:hover {
    background: var(--pri-suave);
    color: var(--pri-txt)
}

.voz-paginas .inativa,
.voz-paginas .inativa:hover {
    opacity: .4;
    cursor: default;
    color: var(--dim)
}

/* ─── Janela modal ───────────────────────────────────────────────────────── */
.voz-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(3px);
}

/* flex-start + margin:auto na caixa, e NAO align-items:center.
   Com `center`, uma caixa mais alta que a tela transborda os dois lados por
   igual — e a metade de cima fica inalcancavel, porque nao se rola para antes
   do inicio da area de rolagem (o .voz-modal e quem tem overflow-y:auto).
   Com margin:auto a caixa segue centralizada quando cabe e encosta no topo
   quando nao cabe. Mesmo defeito e mesma correcao do painel do revendedor
   (revendedor/comum/layout.php). */
.voz-modal.aberto {
    display: flex;
    align-items: flex-start;
    justify-content: center
}

.voz-modal .caixa {
    background: var(--card);
    border-radius: 18px;
    padding: 26px;
    width: 100%;
    max-width: 470px;
    margin: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.voz-modal h2 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 9px
}

.voz-modal h2 i {
    color: var(--pri-txt)
}

.voz-modal .ajuda {
    font-size: 13.5px;
    color: var(--dim);
    line-height: 1.6;
    margin-bottom: 6px
}

.voz-modal label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    margin: 15px 0 6px
}

.voz-modal select,
.voz-modal textarea,
.voz-modal input[type=text] {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--linha);
    border-radius: 11px;
    font-family: inherit;
    font-size: 14px;
    background: var(--card);
    color: var(--texto);
}

.voz-modal select:focus,
.voz-modal textarea:focus,
.voz-modal input:focus {
    outline: none;
    border-color: var(--pri)
}

.voz-modal .acoes {
    display: flex;
    gap: 11px;
    margin-top: 22px
}

.voz-modal .acoes .voz-btn {
    flex: 1;
    justify-content: center
}

/* ─── Modais carregados por AJAX ─────────────────────────────────────────────
   Casca dos modais de meus_pedidos.php e historicoPedidos.php (visualizar,
   avaliar, cancelar, pagar). O conteúdo vem por AJAX de ajax/*.php e é injetado
   dentro de #modal-container.

   Estas regras moram aqui, e não no style.css herdado, para essas duas telas
   poderem largar aquele arquivo. Ele é a origem confirmada de três defeitos que
   custaram uma rodada cada — cabeçalho e rodapé de cartão brancos no tema
   escuro, o botão PIX em verde-água e o layout do modal com rolagem horizontal
   — e não está na cópia local do projeto, só no servidor, então não dá para ler
   o que ele faz. Trazer para cá o pouco que ainda era usado dele (a casca do
   modal e o spinner) elimina a dependência em vez de tentar adivinhá-la.

   Nomes de classe preservados de propósito: são os que o openModal() e os
   arquivos de ajax/ já usam, e renomear obrigaria a mexer em cinco arquivos
   sem ganho nenhum.
   -------------------------------------------------------------------------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(3px);
}

/* openModal() liga pela classe .active */
.modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-container {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    background: var(--card);
    color: var(--texto);
    border: 1px solid var(--linha);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--linha);
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--texto);
}

.modal-title i {
    color: var(--pri-txt)
}

.modal-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sutil);
    border: 1px solid var(--linha);
    color: var(--dim);
    font-size: 14px;
    cursor: pointer;
    transition: color .14s, border-color .14s;
}

.modal-close:hover {
    color: var(--texto);
    border-color: var(--fraco)
}

.modal-body {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-top: 1px solid var(--linha);
    background: var(--sutil);
}

/* Enquanto o conteúdo do modal não chegou */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 20px
}

.spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--linha);
    border-top-color: var(--pri);
    animation: vozGirar .8s linear infinite;
}

@keyframes vozGirar {
    to {
        transform: rotate(360deg)
    }
}

@media(prefers-reduced-motion:reduce) {
    .spinner {
        animation-duration: 2.4s
    }
}

@media(max-width:640px) {
    .modal-overlay {
        padding: 12px
    }

    .modal-body {
        padding: 16px;
        max-height: 64vh
    }

    .modal-header,
    .modal-footer {
        padding: 14px 16px
    }

    .modal-footer .voz-btn,
    .modal-footer button,
    .modal-footer a {
        flex: 1;
        justify-content: center
    }
}

/* Formulário que envolve um botão de desistir (precisa de <form> por causa do
   POST, mas visualmente é só o link centralizado). */
.voz-desistir-form {
    margin-top: 14px;
    text-align: center
}

.voz-desistir-form button {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--dim);
    text-decoration: underline;
    cursor: pointer;
}

.voz-desistir-form button:hover {
    color: var(--pri-txt)
}

/* Botão discreto de desistir, dentro ou fora de modal. */
.voz-desistir {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--dim);
    cursor: pointer;
    text-decoration: underline;
    text-align: center;
}

.voz-desistir:hover {
    color: var(--pri-txt)
}

/* ─── Recado curto dentro de um bloco ────────────────────────────────────── */
.voz-msg {
    display: none;
    padding: 11px 14px;
    border-radius: 11px;
    font-size: 13.5px;
    margin-bottom: 14px
}

.voz-msg.erro {
    display: block;
    background: var(--erro-suave);
    color: #b91c1c
}

.voz-msg.ok {
    display: block;
    background: var(--ok-suave);
    color: var(--ok-txt)
}

[data-theme="dark"] .voz-msg.erro {
    color: #fca5a5
}

/* ─── Filtros em pílula (Meus pedidos, listas) ───────────────────────────── */
.voz-filtros {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px
}

.voz-pilula {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--linha);
    background: var(--card);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--dim);
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
}

.voz-pilula:hover {
    border-color: var(--fraco);
    color: var(--texto)
}

.voz-pilula.ativa {
    background: var(--pri-suave);
    border-color: var(--pri);
    color: var(--pri-txt);
    font-weight: 600
}

.voz-pilula .ct {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--sutil);
    color: var(--dim)
}

.voz-pilula.ativa .ct {
    background: var(--pri);
    color: #fff
}

/* ─── Filtros em chip com ícone colorido (Gravar áudio, Locutores) ───────────
   Diferente de .voz-pilula (que acende com a cor da loja): aqui cada filtro
   tem sua própria cor fixa — mesmo padrão em toda tela que filtra locutor,
   pra sexo/online/rápido/favoritos serem reconhecíveis de relance nas duas
   telas. Nasceu em gravar.php; promovido pra cá quando locutores.php passou
   a usar os mesmos filtros. */
.voz-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--linha);
    background: var(--card);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--dim);
    cursor: pointer;
    white-space: nowrap;
    transition: all .12s;
}

.voz-pill:hover {
    border-color: var(--fraco);
    color: var(--texto)
}

.voz-pill .ic {
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff
}

.voz-pill .ct {
    font-weight: 700;
    opacity: .9
}

.voz-pill.onl .ic {
    background: #10b981;
    width: 9px;
    height: 9px
}

.voz-pill.rap .ic {
    background: #f59e0b
}

.voz-pill.fav .ic {
    background: #ef4444
}

.voz-pill.masc .ic {
    background: #3b82f6
}

.voz-pill.fem .ic {
    background: #ec4899
}

.voz-pill.onl.ativo {
    background: rgba(16, 185, 129, .12);
    border-color: #10b981;
    color: #047857
}

.voz-pill.rap.ativo {
    background: rgba(245, 158, 11, .14);
    border-color: #f59e0b;
    color: #92400e
}

.voz-pill.fav.ativo {
    background: rgba(239, 68, 68, .10);
    border-color: #ef4444;
    color: #b91c1c
}

.voz-pill.masc.ativo {
    background: rgba(59, 130, 246, .12);
    border-color: #3b82f6;
    color: #1d4ed8
}

.voz-pill.fem.ativo {
    background: rgba(236, 72, 153, .12);
    border-color: #ec4899;
    color: #9d174d
}

[data-theme="dark"] .voz-pill {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    color: #a8b2d1
}

/* ─── Estado vazio ───────────────────────────────────────────────────────── */
.voz-vazio {
    padding: 56px 20px;
    text-align: center
}

.voz-vazio .icone {
    width: 56px;
    height: 56px;
    border-radius: var(--r);
    background: var(--sutil);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 22px;
    color: var(--fraco);
}

.voz-vazio h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px
}

.voz-vazio p {
    color: var(--dim);
    font-size: 14px;
    max-width: 320px;
    margin: 0 auto 18px
}

/* ─── Formulários ────────────────────────────────────────────────────────── */
.voz-form-card {
    background: var(--card);
    border-radius: var(--r);
    padding: 28px;
    box-shadow: var(--sombra)
}

.voz-campo {
    margin-bottom: 16px
}

.voz-campo label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dim);
    margin-bottom: 7px
}

.voz-campo input,
.voz-campo select,
.voz-campo textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--linha);
    border-radius: var(--r-sm);
    font-size: 15px;
    font-family: inherit;
    color: var(--texto);
    background: var(--card);
    transition: border-color .15s, box-shadow .15s;
}

.voz-campo input:focus,
.voz-campo select:focus,
.voz-campo textarea:focus {
    outline: none;
    border-color: var(--pri);
    box-shadow: 0 0 0 4px var(--pri-suave);
}

.voz-campo .ajuda {
    font-size: 12.5px;
    color: var(--fraco);
    margin-top: 6px;
    line-height: 1.5
}

.voz-dupla {
    display: flex;
    gap: 12px
}

.voz-dupla .voz-campo {
    flex: 1
}

@media(max-width:480px) {
    .voz-dupla {
        flex-direction: column;
        gap: 0
    }
}

.voz-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--dim);
    cursor: pointer;
    margin-bottom: 20px
}

.voz-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--pri);
    cursor: pointer
}

/* "Esqueci minha senha", entre o "manter conectado" e o botao de entrar.
   O .voz-check ja empurra 20px embaixo; aqui o recuo negativo aproxima o link
   do campo de senha, que e o contexto dele, sem colar no botao. */
.voz-esqueci {
    margin: -12px 0 18px;
    text-align: right;
    font-size: 13.5px
}

.voz-esqueci a {
    color: var(--dim);
    text-decoration: underline
}

.voz-esqueci a:hover {
    color: var(--pri-txt, var(--pri))
}

/* ─── Avisos ─────────────────────────────────────────────────────────────── */
.voz-aviso {
    padding: 13px 16px;
    border-radius: var(--r-sm);
    font-size: 13.8px;
    line-height: 1.55;
    margin-bottom: 18px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.voz-aviso i {
    margin-top: 2px;
    flex-shrink: 0
}

.voz-aviso.erro {
    background: var(--erro-suave);
    color: #b91c1c
}

.voz-aviso.ok {
    background: var(--ok-suave);
    color: #047857
}

/* --pri-txt e nao --pri: a marca crua nao passa 4,5:1 sobre o proprio
   --pri-suave. Ver vozCorTexto()/vozMistura() no comum/layout.php. */
.voz-aviso.info {
    background: var(--pri-suave);
    color: var(--pri-txt)
}

.voz-aviso.alerta {
    background: var(--alerta-suave);
    color: #92400e
}

/* No escuro os tons queimados de #b91c1c/#047857/#92400e somem no fundo do
   aviso — mesmas cores claras que os selos ja usam. */
[data-theme="dark"] .voz-aviso.erro {
    color: #fca5a5
}

[data-theme="dark"] .voz-aviso.ok {
    color: var(--ok-txt)
}

[data-theme="dark"] .voz-aviso.alerta {
    color: #fbbf24
}

/* ─── Marca nas telas centradas ──────────────────────────────────────────── */
.voz-brand {
    text-align: center;
    margin-bottom: 26px
}

.voz-brand img {
    max-width: 172px;
    max-height: 80px;
    object-fit: contain;
    margin: 0 auto 14px;
    display: block
}

.voz-brand .sigla {
    width: 66px;
    height: 66px;
    border-radius: 19px;
    background: var(--pri);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 14px;
    box-shadow: 0 10px 26px var(--pri-suave);
}

.voz-brand h1 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    margin-bottom: 6px
}

.voz-brand p {
    font-size: 14px;
    color: var(--dim);
    line-height: 1.55
}

/* ─── Chip claro atrás da logo do revendedor (tema escuro) ───────────────────
   A logo é uma imagem que o revendedor envia — não dá pra recolorir por CSS.
   Uma logo de tinta escura sumiria contra a sidebar/barra/página escura, e um
   chip branco atrás resolve isso para qualquer arquivo, sem pedir upload novo.
   Mas só entra em quem PRECISA: a classe vem do vozLogoPrecisaChip() (ver
   comum/layout.php), que analisa a imagem uma vez e decide — logo já clara ou
   colorida aparece limpa, sem retângulo nenhum.
   box-shadow em vez de padding: não muda o box do <img> (max-height/max-width
   já calibrados por local), só pinta a folga que cada contexto já reserva. */
:root[data-theme="dark"] .voz-lateral .voz-marca img.logo-chip,
:root[data-theme="dark"] .voz-brand img.logo-chip {
    background: #fff;
    border-radius: var(--r-sm);
    box-shadow: 0 0 0 8px #fff;
}

:root[data-theme="dark"] .voz-topo .marca-mob img.logo-chip {
    background: #fff;
    border-radius: var(--r-sm);
    box-shadow: 0 0 0 6px #fff;
}

/* ─── Tela de entrada (login/cadastro) — painel de marca + formulário ────────
   Duas colunas a partir de 960px: a esquerda é a marca da loja (grande, na
   cor dela), a direita é sempre o cartão de formulário — mesmo em telas sem
   loja identificada (ex.: cadastro com link quebrado). Abaixo de 960px vira
   uma coluna só: o painel de marca some e o .voz-brand tradicional (dentro
   de .voz-caixa) volta a ser a única marca visível — nenhuma duplicação para
   quem usa celular.

   color-mix() em vez de uma variável --pri-escura calculada no servidor: fica
   contido nestas duas telas, sem mexer no cálculo de cor que todo o resto do
   painel usa (vozAbrirPagina, comum/layout.php). Suporte a color-mix() é de
   2023 em diante nos navegadores relevantes.

   max-width trava o total (mesma decisão do .voz-container, que já limita a
   1000px o resto do painel): sem isso, num monitor bem largo a coluna da
   marca (1fr) esticava sozinha e o conteúdo — preso a max-width, alinhado à
   esquerda — sobrava longe do formulário, com um vão vazio enorme no meio da
   tela. Centralizar o conteúdo do painel (align-items:center logo abaixo)
   é o complemento: mesmo dentro do teto de 1000px a coluna ainda pode ficar
   bem maior que o conteúdo, e centralizado o vazio se reparte dos dois
   lados em vez de empurrar tudo para a esquerda. */
.voz-entrada {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1000px;
    margin: 0 auto
}

@media(min-width:960px) {
    .voz-entrada {
        grid-template-columns: minmax(0, 1fr) 468px
    }
}

.voz-entrada-marca {
    display: none;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 52px;
    padding: 60px 54px;
    color: #fff;
    background: linear-gradient(165deg,
            color-mix(in srgb, var(--pri) 86%, #fff 14%) 0%,
            color-mix(in srgb, var(--pri) 100%, #000 0%) 55%,
            color-mix(in srgb, var(--pri) 74%, #000 26%) 100%);
}

@media(min-width:960px) {
    .voz-entrada-marca {
        display: flex
    }
}

/* Anéis concêntricos: remete a "onda sonora"/sinal sem desenhar uma forma de
   onda literal — mesma decisão de design do respiro do body::before (ver
   acima), agora numa superfície colorida em vez de um brilho radial. */
.voz-entrada-anel {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    pointer-events: none
}

.voz-entrada-anel-1 {
    width: 620px;
    height: 620px;
    right: -240px;
    top: -280px
}

.voz-entrada-anel-2 {
    width: 420px;
    height: 420px;
    right: -140px;
    top: -140px;
    border-color: rgba(255, 255, 255, .10)
}

.voz-entrada-anel-3 {
    width: 340px;
    height: 340px;
    left: -160px;
    bottom: -160px;
    border-color: rgba(255, 255, 255, .10)
}

/* justify-content:center (não mais space-between) — a coluna já ficou mais
   estreita com o teto de 1400px, e com align-items:center no pai o bloco
   deixou de precisar ocupar do topo ao rodapé para não parecer solto. */
.voz-entrada-topo {
    position: relative;
    z-index: 1;
    max-width: 420px;
    text-align: center
}

.voz-marca-logo {
    justify-content: center
}

.voz-marca-logo {
    display: inline-flex;
    margin-bottom: 26px
}

.voz-marca-logo img {
    max-width: 170px;
    max-height: 64px;
    object-fit: contain;
    background: #fff;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.voz-marca-logo .sigla {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: 800;
    color: #fff;
}

.voz-entrada-topo h1 {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.25;
    margin-bottom: 12px;
    text-wrap: balance;
}

.voz-entrada-topo p {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82)
}

.voz-entrada-lista {
    list-style: none;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 15px
}

.voz-entrada-lista li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .94)
}

.voz-entrada-lista li i {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    font-size: 14px;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Trilha de barrinhas — um aceno discreto ao produto (áudio) só aqui, na
   marca; o resto do painel não usa forma de onda em lugar nenhum. */
.voz-entrada-onda {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 28px;
    opacity: .5
}

.voz-entrada-onda span {
    width: 3px;
    border-radius: 2px;
    background: #fff;
    display: block
}

.voz-entrada-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    background: var(--fundo);
}

.voz-entrada-form .voz-caixa {
    width: 100%;
    max-width: 400px
}

@media(max-width:959px) {
    .voz-entrada-form {
        min-height: 100vh
    }
}

/* ─── Botão de pagar do pedido avulso ────────────────────────────────────────
   Mora aqui, e não no <style> de meus_pedidos.php/historicoPedidos.php, por
   dois motivos: as duas telas mostram o mesmo botão (vem do render_pedidos.php
   compartilhado) e este arquivo é o que garantidamente está atualizado no
   servidor — em produção o botão aparecia como uma faixa verde-água larga que
   não existe em nenhum CSS desta pasta, sobra de alguma versão antiga.

   `html` na frente dá a especificidade para vencer essa herança sem
   !important. A cor é a da loja (--pri), não um verde fixo: é uma ação
   primária de uma loja white-label, e verde chapado brigava com a marca de
   quem não é verde. Largura pelo conteúdo, não 100%: dentro da célula da
   tabela a faixa inteira roubava a atenção da linha toda. */
/* O seletor inclui .opcoes-pagamento e usa !important porque é assim que a
   regra concorrente do style.css herdado está escrita:

     .opcoes-pagamento .btn-pix { background:linear-gradient(...#00b4b4...)
                                  !important; width:100% !important; ... }

   Uma versão anterior desta regra usava só `html .btn-pix` sem !important e
   perdia em produção — eu a validei contra uma reprodução da regra antiga
   feita SEM o !important, porque o style.css não estava na cópia local, e
   conclui que funcionava. Só com o arquivo real em mãos deu para acertar. */
html .btn-pix,
html .opcoes-pagamento .btn-pix {
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 8px;
    width: auto !important;
    max-width: 100%;
    margin-top: 8px;
    padding: 9px 16px !important;
    background: var(--pri) !important;
    border: 1px solid var(--pri);
    border-radius: var(--r-sm) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08) !important;
    transition: filter .12s, box-shadow .12s;
}

html .btn-pix:hover,
html .opcoes-pagamento .btn-pix:hover {
    filter: brightness(1.07);
    box-shadow: 0 3px 8px rgba(16, 24, 40, .16) !important;
    color: #fff !important;
}

html .btn-pix:active {
    filter: brightness(.96)
}

html .btn-pix:focus-visible {
    outline: 2px solid var(--pri);
    outline-offset: 2px
}

html .btn-pix svg {
    flex: none;
    width: 15px;
    height: 15px
}

/* ─── Ações de um pedido recusado ────────────────────────────────────────────
   "Trocar de locutor(a)", "Editar Pedido", "Cancelar Pedido" e "Responder"
   aparecem juntos na coluna de status (montados por comum/render_pedidos.php).

   No style.css herdado cada um tem um gradiente próprio — azul, cinza, verde e
   vermelho — e o resultado é uma fileira de botões brigando entre si, cada um
   pedindo a atenção primeiro. Aqui os três viram o mesmo objeto neutro, e a
   diferença fica onde importa: cancelar é a única ação sem volta, então ganha
   texto e contorno vermelhos. Distingue sem gritar, e a hierarquia passa a ser
   legível — hoje o vermelho preenchido puxa o olho justamente para a ação que
   ninguém quer que seja clicada por engano.

   `html` na frente e !important porque as regras concorrentes são de classe
   simples com gradiente, e algumas do style.css já vêm com !important. */
html .btn-acao-recusa {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    padding: 8px 14px !important;
    background: var(--card) !important;
    border: 1px solid var(--linha) !important;
    border-radius: var(--r-sm) !important;
    color: var(--texto2) !important;
    font-family: inherit;
    font-size: 12.5px !important;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .14s, color .14s, background .14s;
}

html .btn-acao-recusa:hover {
    background: var(--sutil) !important;
    border-color: var(--fraco) !important;
    color: var(--texto) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* A única irreversível: some o crédito e o pedido sai do ar. */
html .btn-acao-recusa.btn-cancelar {
    color: var(--erro) !important;
    border-color: color-mix(in srgb, var(--erro) 42%, var(--linha)) !important;
}

html .btn-acao-recusa.btn-cancelar:hover {
    background: var(--erro-suave) !important;
    border-color: var(--erro) !important;
    color: var(--erro) !important;
}

html .btn-acao-recusa i {
    font-size: 12px;
    flex: none
}

/* ─── Cartões de pedido no celular: manter o miolo transparente ──────────────
   Os cartões (.pedido-card) são de meus_pedidos.php e historicoPedidos.php,
   não deste arquivo — só o .pedido-card pinta fundo (var(--card)); cabeçalho,
   corpo e rodapé são estruturais e nunca deveriam ter fundo próprio.

   Em produção eles apareciam com cabeçalho e rodapé BRANCOS no tema escuro,
   engolindo o título (texto claro sobre branco). Não reproduz na cópia local,
   então a regra que pinta esse branco está em algo que só existe no servidor
   — provavelmente uma versão antiga de style.css ou do próprio <style> do
   meus_pedidos.php. Como não dá pra editar o que não se enxerga, a defesa vem
   daqui: este arquivo é o que sabidamente está atualizado lá, e a
   especificidade (0,0,3,0) vence qualquer regra de classe simples,
   independentemente da ordem de carregamento.

   Vale só no escuro: no claro esses fundos brancos são inofensivos (o cartão
   já é branco) e mexer neles seria arriscar um layout que está bom. */
:root[data-theme="dark"] .pedido-card-header,
:root[data-theme="dark"] .pedido-card-body,
:root[data-theme="dark"] .pedido-card-footer,
:root[data-theme="dark"] .pedido-card-titulo,
:root[data-theme="dark"] .pedido-card-status-area,
:root[data-theme="dark"] .pedido-card .voz-acoes-linha {
    background: transparent;
}

/* O cartão em si continua sendo a única superfície pintada. */
:root[data-theme="dark"] .pedido-card {
    background: var(--card);
}

.voz-rodape {
    text-align: center;
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--dim)
}

.voz-rodape a {
    color: var(--pri);
    font-weight: 600;
    text-decoration: none
}

.voz-rodape a:hover {
    text-decoration: underline
}

/* ─── Seletor de loja ────────────────────────────────────────────────────── */
.voz-loja {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    background: var(--card);
    border: 1.5px solid transparent;
    border-radius: var(--r);
    padding: 17px 19px;
    margin-bottom: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    box-shadow: var(--sombra);
    transition: all .17s;
}

.voz-loja:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-alta)
}

.voz-loja .simbolo {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
}

.voz-loja .dados {
    flex: 1;
    min-width: 0
}

.voz-loja .dados .n {
    font-weight: 700;
    font-size: 15.5px;
    margin-bottom: 2px
}

.voz-loja .dados .u {
    font-size: 12.5px;
    color: var(--fraco)
}

.voz-loja .seta {
    color: var(--fraco);
    transition: transform .17s
}

.voz-loja:hover .seta {
    transform: translateX(3px);
    color: var(--pri-txt)
}

/* ─── Utilitários ────────────────────────────────────────────────────────── */
.voz-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--dim);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.voz-voltar:hover {
    color: var(--pri-txt)
}

/* ==========================================================================
   CLASSES PORTADAS DO STYLE.CSS — status e alertas da lista de pedidos
   --------------------------------------------------------------------------
   comum/render_pedidos.php monta este HTML em PHP para meus_pedidos.php e
   historicoPedidos.php (tabela desktop E cards mobile — é o mesmo HTML nos
   dois formatos, só o CSS muda por media query). Migração 1:1 do style.css:
   mesma aparência de hoje, incluindo os pares de cor que já reprovam
   contraste — ver [[vozlocutor-pendencias]] para o próximo passo.
   Os tokens --legado-* estão no :root/:root[data-theme="dark"] no topo
   deste arquivo. Breakpoints iguais aos do style.css (992/768/480px).
   ========================================================================== */

/* ─── Botões de ação (recusa, correção, aprovação) ─────────────────────── */
.botoes-acao-recusa {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.btn-editar {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #fff
}

.btn-editar:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 85, 99, .3);
    color: #fff
}

.btn-responder {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff
}

.btn-responder:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, .3);
    color: #fff
}

.btn-trocar-locutor {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff
}

.btn-trocar-locutor:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
    color: #fff
}

.btn-ver-comprovante {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #7c4dff 0%, #651fff 100%);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease
}

.btn-ver-comprovante:hover {
    background: linear-gradient(135deg, #651fff 0%, #6200ea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 77, 255, .35);
    color: #fff
}

/* #25d366 (verde WhatsApp claro) com texto branco dava 1,98:1 nos dois
   temas — fundo fixo, nao muda com tema. Solido no tom escuro que ja
   aparecia no fim do gradiente do hover original. */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #075e54;
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease
}

.btn-whatsapp:hover {
    background: #054c43;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(7, 94, 84, .35);
    color: #fff
}

.btn-pedidos-antigos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--legado-warning);
    color: #3d2600;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all .3s
}

.btn-pedidos-antigos:hover {
    background: #d97706;
    transform: translateY(-2px)
}

.link-pedidos-antigos {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px
}

.comprovante-anexado {
    margin-top: 10px
}

/* ─── Alerta "ação necessária" (recusado) ───────────────────────────────── */
.acao-necessaria {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid var(--legado-warning);
    border-radius: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #92400e
}

.acao-necessaria i {
    color: var(--legado-warning);
    font-size: 14px
}

.acao-necessaria strong {
    font-weight: 700
}

/* ─── Alerta correção offline / locutor indisponível ────────────────────── */
.alert-correcao-offline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 4px solid #2196f3;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 13px;
    color: #1565c0
}

.alert-correcao-offline .btn-perfil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1976d2;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-left: auto
}

.alert-locutor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-left: 4px solid #ffc107;
    padding: 12px 14px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 13px;
    color: #ff8f00;
    box-shadow: 0 2px 8px rgba(255, 193, 7, .15)
}

.alert-locutor i {
    color: #ffc107
}

/* #2196f3 com texto branco dava 3,12:1. Fundo no tom que ja era o hover
   (4,60:1); hover recua mais um degrau para manter o feedback visual. */
.alert-locutor .btn-trocar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1976d2;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    margin-left: auto
}

.alert-locutor .btn-trocar:hover {
    background: #1565c0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(21, 101, 192, .3)
}

.observacao-historico {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 4px solid #2196f3;
    padding: 10px 14px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: #1565c0;
    line-height: 1.4
}

.verificando-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 10px;
    padding: 14px;
    margin-top: 10px;
    color: #1565c0;
    font-size: 13px
}

.verificando-info i {
    color: #2196f3;
    font-size: 18px
}

@media(min-width:992px) {

    .status-badge,
    .status-text,
    .observacao-historico {
        max-width: 420px
    }
}

/* ─── Auto-liberação ─────────────────────────────────────────────────────── */
.auto-liberacao {
    margin: 10px 0
}

.auto-liberacao .btn-enviando {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    animation: pulse-button 1.5s infinite
}

@keyframes pulse-button {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .75
    }
}

/* ─── Botão flutuante "Novo pedido" (mobile) ────────────────────────────── */
.btn-gravar-mobile {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 30%;
    transform: translateX(-13%);
    z-index: 100;
    padding: 14px 28px;
    background: var(--legado-gradient-primary);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(220, 53, 69, .4);
    animation: pulse-btn-mobile 2s infinite
}

@keyframes pulse-btn-mobile {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .85
    }
}

body.dropdown-aberto .btn-gravar-mobile {
    display: none !important
}

/* ─── Tem créditos (liberar pedido pago com saldo) ──────────────────────── */
.tem-creditos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 10px;
    padding: 14px;
    margin: 10px 0
}

.tem-creditos .creditos-msg {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2e7d32;
    font-size: 14px;
    font-weight: 600
}

.tem-creditos .btn-liberar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    border: none;
    cursor: pointer
}

.tem-creditos .btn-liberar:hover {
    background: linear-gradient(135deg, #43a047 0%, #2e7d32 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, .35)
}

.tem-creditos .desconto-info {
    font-size: 12px;
    color: #558b2f
}

/* ─── Já pagou (aviso de comprovante enviado por WhatsApp) ──────────────── */
.ja-pagou {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 10px;
    padding: 14px;
    margin-top: 10px
}

.ja-pagou span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 8px
}

/* ─── Tipo de gravação e mensagem do locutor ─────────────────────────────── */
.tipo-gravacao {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    padding: 6px 0
}

.tipo-gravacao i {
    color: #dc3545
}

.mensagem-locutor {
    display: block;
    padding: 10px 14px;
    background: var(--legado-bg-main);
    border: 1px solid var(--legado-border-color);
    border-radius: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--legado-text-secondary);
    line-height: 1.5
}

.mensagem-locutor i {
    color: var(--legado-info);
    margin-right: 6px
}

.mensagem-locutor strong {
    color: var(--legado-text-primary);
    font-weight: 600
}

/* ─── Dropdown de opções (cartão mobile e tabela) ────────────────────────── */
.dropdown-opcoes {
    position: relative;
    display: inline-block
}

/* --legado-info (#3b82f6) com texto branco dava 3,68:1. */
.btn-opcoes {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s
}

.btn-opcoes:hover {
    background: #2563eb;
    transform: translateY(-1px)
}

/* #9CD1EB com texto branco dava 1,65:1 — quase invisivel. Verde: alem de
   passar no contraste, distingue melhor do azul do estado normal (baixado
   = concluido). */
.btn-opcoes.downloaded {
    background: #047857
}

.dropdown-menu-opcoes {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--legado-bg-white);
    border: 1px solid var(--legado-border-color);
    border-radius: 12px;
    min-width: 200px;
    padding: 8px;
    z-index: 1000;
    box-shadow: var(--legado-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all .2s ease
}

.dropdown-opcoes.active .dropdown-menu-opcoes {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px)
}

.dropdown-item-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--legado-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    transition: all .2s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left
}

/* --legado-primary (fixo) sobre --legado-primary-ultra-light: 4,24:1 no
   claro (raspando), 2,97:1 no escuro. */
.dropdown-item-opcao:hover {
    background: var(--legado-primary-ultra-light);
    color: #b91c1c
}

[data-theme="dark"] .dropdown-item-opcao:hover {
    color: #fca5a5
}

.dropdown-item-opcao i {
    width: 18px;
    color: var(--legado-primary)
}

/* #dc2626 sobre o cartao: 4,83:1 no claro (ok), 2,97:1 no escuro. */
.dropdown-item-opcao.danger {
    color: #b91c1c
}

.dropdown-item-opcao.danger i {
    color: #b91c1c
}

[data-theme="dark"] .dropdown-item-opcao.danger,
[data-theme="dark"] .dropdown-item-opcao.danger i {
    color: #fca5a5
}

/* Fundo do hover (#fee2e2) e fixo, nao muda de tema — a tinta do hover
   tambem precisa ser fixa (nao pode usar o #fca5a5 do escuro, que sobre
   rosa claro ia sumir). */
.dropdown-item-opcao.danger:hover {
    background: #fee2e2;
    color: #b91c1c
}

.dropdown-item-opcao.danger:hover i {
    color: #b91c1c
}

.dropdown-divider {
    height: 1px;
    background: var(--legado-border-color);
    margin: 8px 0
}

/* ─── Status badge (bolinha colorida da tabela/card) ─────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: var(--status-color, #e5e7eb);
    color: #fff
}

/* --legado-success sobre --legado-success-light: 2,24:1 no claro, 4,06:1
   no escuro — os dois abaixo do minimo. */
.status-badge.success {
    background: var(--legado-success-light);
    color: #047857
}

[data-theme="dark"] .status-badge.success {
    color: #6ee7b7
}

/* --legado-warning sobre --legado-warning-light: 1,93:1 no claro (o
   escuro ja passava, 4,66:1 — so o claro precisa de tinta propria). */
.status-badge.warning {
    background: var(--legado-warning-light);
    color: #8a5a0a
}

[data-theme="dark"] .status-badge.warning {
    color: var(--legado-warning)
}

/* --legado-danger sobre --legado-danger-light: 3,95:1 nos dois temas
   (--legado-danger nao muda de tema, igual ao style.css original). */
.status-badge.danger {
    background: var(--legado-danger-light);
    color: #b91c1c
}

/* --legado-info sobre --legado-info-light: 3,01:1 nos dois temas. */
.status-badge.info {
    background: var(--legado-info-light);
    color: #1d4ed8
}

[data-theme="dark"] .status-badge.info {
    color: #93c5fd
}

.status-badge.purple {
    background: var(--prod-suave);
    color: var(--prod-txt)
}

.status-icon {
    font-size: 8px;
    flex-shrink: 0
}

.status-text {
    line-height: 1.4;
    white-space: nowrap
}

.status-text-wrap {
    white-space: normal;
    word-break: break-word;
    max-width: 280px
}

/* ─── Avaliação (estrelas) ────────────────────────────────────────────────── */
.rating-stars {
    display: flex;
    gap: 2px
}

.rating-stars i {
    font-size: 14px;
    color: #e5e7eb
}

.rating-stars i.filled {
    color: #fbbf24
}

/* ─── Paginação do DataTables ────────────────────────────────────────────── */
.dataTables_paginate .paginate_button {
    padding: 8px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--legado-border-color) !important;
    background: var(--legado-bg-white) !important;
    color: var(--legado-text-primary) !important;
    margin: 0 3px !important;
    transition: all .2s !important
}

.dataTables_paginate .paginate_button:hover,
.dataTables_paginate .paginate_button.current {
    background: var(--legado-primary) !important;
    color: #fff !important;
    border-color: var(--legado-primary) !important
}

/* ─── Cards mobile (linhas da tabela viram cartão abaixo de 992px) ─────────
   .pedido-card-label/-row/-value só existiam dentro do @media(max-width:992px)
   no style.css original — sem declaração fora dele. Ficam só lá embaixo,
   dentro do bloco 992px, para não inventar uma regra "sempre ativa" que o
   legado nunca teve (inofensivo hoje, já que .pedidos-cards fica display:none
   em desktop, mas não é fiel à migração). */
.pedidos-cards {
    display: none
}

/* ─── Responsivo — 992px: troca tabela por cards, empilha alertas ───────── */
@media(max-width:992px) {

    .table-responsive,
    #tabela-pedidos_wrapper .dataTables_scroll {
        display: none !important
    }

    .pedidos-cards {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        padding: 0
    }

    .alert-correcao-offline,
    .alert-locutor,
    .observacao-historico {
        width: 100% !important;
        margin: 0 !important;
        font-size: 12px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .alert-correcao-offline .btn-perfil,
    .alert-locutor .btn-trocar {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 8px !important;
        justify-content: center !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    .verificando-info {
        width: 100% !important;
        padding: 14px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        display: flex;
        align-items: center;
        gap: 10px;
        background: #e3f2fd;
        border: 1px solid #90caf9;
        color: #1565c0;
    }

    .comprovante-anexado {
        width: 100% !important
    }

    .botoes-acao-recusa {
        flex-direction: column
    }

    .auto-liberacao {
        width: 100% !important
    }

    .auto-liberacao .btn-enviando {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important
    }

    .btn-gravar-mobile {
        display: inline-flex;
        align-items: center;
        gap: 8px
    }

    body.dropdown-aberto .btn-gravar-mobile {
        display: none !important
    }

    .tem-creditos {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 16px !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
        border: 1px solid #a5d6a7 !important;
    }

    .tem-creditos .creditos-msg {
        font-size: 14px !important;
        font-weight: 600;
        color: #2e7d32;
        display: flex;
        align-items: center;
        gap: 8px
    }

    .tem-creditos .btn-liberar {
        width: 100% !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: #fff !important;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(16, 185, 129, .3);
    }

    .tem-creditos .desconto-info {
        font-size: 12px !important;
        color: #558b2f;
        text-align: center;
        margin-top: -4px
    }

    .opcoes-pagamento .ja-pagou {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
        border-radius: 10px !important;
        background: #e8f5e9 !important;
        border: 1px solid #a5d6a7 !important;
    }

    .opcoes-pagamento .ja-pagou span {
        font-size: 14px;
        font-weight: 600;
        color: #2e7d32
    }

    .opcoes-pagamento .tipo-gravacao {
        font-size: 12px;
        padding: 6px 0;
        color: var(--legado-text-secondary);
        display: flex;
        align-items: center;
        gap: 6px
    }

    .opcoes-pagamento .btn-whatsapp {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #075e54 !important;
        color: #fff !important;
        text-decoration: none;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(7, 94, 84, .3);
    }

    .btn-ver-comprovante {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px
    }

    .dataTables_paginate .paginate_button {
        padding: 10px 16px !important;
        min-width: 44px;
        font-size: 14px
    }

    .pedido-card-footer .dropdown-opcoes {
        width: 100%
    }

    .pedido-card-footer .btn-opcoes {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 13px
    }

    .pedido-card-footer .dropdown-divider {
        margin: 10px 0
    }

    .pedido-card-footer .dropdown-item-opcao {
        padding: 14px 16px;
        font-size: 15px;
        border-radius: 10px;
        margin-bottom: 4px
    }

    .pedido-card-footer .dropdown-item-opcao i {
        width: 24px;
        font-size: 16px
    }

    .pedido-card-footer .dropdown-menu-opcoes {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        padding: 20px 16px 100px;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
        z-index: 10001;
    }

    .pedido-card-footer .dropdown-menu-opcoes::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 2px;
        margin: 0 auto 16px
    }

    .pedido-card-status-area .status-badge {
        font-size: 11px !important;
        padding: 5px 10px !important;
        border-radius: 6px !important;
        width: fit-content;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .pedido-card-header .status-badge {
        width: 100%;
        justify-content: center
    }

    .pedido-card-label {
        font-size: 11px;
        color: var(--legado-text-muted);
        font-weight: 500
    }

    .pedido-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        border-bottom: none
    }

    .pedido-card-value {
        font-size: 12px;
        color: var(--legado-text-primary);
        font-weight: 600;
        text-align: right
    }

    .pedido-card-value .rating-stars {
        display: flex;
        gap: 1px
    }

    .pedido-card-value .rating-stars i {
        font-size: 12px
    }
}

/* ─── Responsivo — 768px: alertas mais compactos, empilhar botão-troca ──── */
@media(max-width:768px) {

    .alert-correcao-offline,
    .alert-locutor {
        padding: 10px 12px;
        font-size: 12px
    }

    .alert-locutor {
        flex-direction: column;
        align-items: flex-start
    }

    .alert-locutor .btn-trocar {
        margin-left: 0;
        margin-top: 8px
    }
}

/* ─── Responsivo — 480px: card ainda mais compacto ───────────────────────── */
@media(max-width:480px) {
    .pedido-card-footer .btn-opcoes {
        padding: 10px 16px;
        font-size: 13px
    }

    .pedido-card-value {
        text-align: left
    }
}

/* ============================================================================
   BOTÕES DE RODAPÉ DE MODAL

   `.btn-voltar` e `.btn-confirmar` eram usados por modal_produzir.php e
   modal_cancelar.php, mas SÓ o cancelar os definia — no <style> dele mesmo. O
   produzir herdou os nomes sem o CSS, e o rodapé dele aparecia como texto puro.

   Definidos aqui uma vez, na cor primária. O modal_cancelar continua pintando
   o dele de vermelho pelo <style> próprio: mesma especificidade, e o bloco
   inline vem depois da folha, então ele vence. Nada muda lá.
   ========================================================================= */
.btn-voltar,
.btn-confirmar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, border-color .15s, color .15s, box-shadow .15s;
}

.btn-voltar {
    background: var(--card);
    color: var(--texto2, var(--dim));
    border: 1px solid var(--linha);
}
.btn-voltar:hover {
    border-color: var(--pri);
    color: var(--pri-txt);
}

.btn-confirmar {
    background: var(--pri);
    color: #fff;
    border: none;
}
.btn-confirmar:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px var(--pri-suave);
    color: #fff;
}