/* Paleta oficial WH Sistemas — identidade "PDV Plus" (Fase 8, redesign visual completo, 23/07/2026).
   Substitui oficialmente a paleta laranja/terracota anterior por decisão do usuário. */
:root {
    --cinza-chumbo: #17171c;
    --cinza-texto-secundario: #767674;
    --cinza-fundo: #f2f1ee;
    --cinza-card: #ffffff;
    --cinza-borda: #e8e7e3;

    --sucesso: #2f9e44;
    --alerta: #d4a017;
    --erro: #c0392b;
    --destaque-neutro: #a3161f; /* vermelho escuro */

    --accent-nicho: #e6483f; /* sobrescrito por empresa, aplicado só no cabeçalho */

    --raio: 16px;
    --sombra: 0 4px 18px rgba(20, 20, 20, 0.06);
}

* { box-sizing: border-box; }

body {
    background: var(--cinza-fundo);
    color: var(--cinza-chumbo);
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
}

a { color: var(--cinza-chumbo); }

/* Menu lateral único do sistema (header.php / header-admin.php) */
/* Fase 8 (correção de fidelidade ao mockup, 23/07/2026): 224px é a largura real do mockup — 240px
   deixava o menu visivelmente maior/mais largo que a referência. */
:root { --wh-sidebar-w: 224px; }

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

.wh-sidebar {
    width: var(--wh-sidebar-w);
    /* !important necessário: o Bootstrap 5.3 força background-color:transparent!important no
       .offcanvas-md a partir de 768px (pra virar barra lateral fixa sem overlay) — sem isso o
       menu lateral fica transparente em telas largas.
       Sidebar escura (identidade "PDV Plus", Fase 8) — mesma em todo o sistema (empresa e admin). */
    background: linear-gradient(180deg, #17171c, #101014) !important;
    color: #fff;
    border-right: none;
    display: flex;
    flex-direction: column;
    padding: 0;
}
@media (min-width: 768px) {
    .wh-sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 1030; }
    .wh-conteudo { margin-left: var(--wh-sidebar-w); }
}

.wh-sidebar-cabecalho {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.wh-sidebar-cabecalho .btn-close { position: absolute; right: 16px; }
.wh-sidebar-cabecalho-logo { justify-content: center; padding: 14px 16px; }
/* Botão "fechar" do menu no mobile (offcanvas) — o X padrão do Bootstrap é escuro, some no fundo
   escuro da sidebar (Fase 8); invertido pra ficar branco. */
.wh-sidebar .btn-close { filter: invert(1); }
.wh-sidebar-logo-img { height: 76px; width: auto; }

.wh-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}

.wh-marca .wh-marca-nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.wh-marca .wh-marca-icone {
    width: 80px;
    height: 80px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}
.wh-marca .wh-marca-icone.wh-marca-icone-inicial { background: var(--destaque-neutro); border-radius: 18px; overflow: hidden; }

.wh-marca .wh-marca-icone img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: transparent; }

.wh-sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }

.wh-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a9a9ac;
    text-decoration: none;
    padding: 10px 12px;
    margin: 1px 10px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 13.5px;
    transition: background .15s, color .15s;
}

.wh-sidebar-nav a:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.wh-sidebar-nav a.ativo {
    background: linear-gradient(135deg, #e6483f, var(--destaque-neutro));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(163, 22, 31, .35);
}
.wh-sidebar-nav a.ativo:hover { background: linear-gradient(135deg, #e6483f, var(--destaque-neutro)); color: #fff; }

/* Empresa vencida: cadeado nas opções do menu, exceto Assinatura e Suporte (únicas acessíveis) — o
   bloqueio de verdade acontece no servidor (Autenticacao::exigirEmpresaEmDia), isso aqui é só a
   sinalização visual. Cadeado é um SVG inline via mask (não emoji, igual aos outros ícones do menu),
   com uma pulsação sutil pra chamar atenção sem ser irritante. */
.wh-nav-vencido a:not([href="/assinatura"]):not([href="/suporte"]) {
    opacity: .45;
    cursor: not-allowed;
}
.wh-nav-vencido a:not([href="/assinatura"]):not([href="/suporte"]):hover {
    background: rgba(255, 255, 255, .06);
    color: #a9a9ac;
}
.wh-nav-vencido a:not([href="/assinatura"]):not([href="/suporte"])::after {
    content: "";
    margin-left: auto;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-color: var(--destaque-neutro);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation: wh-cadeado-pulso 2.2s ease-in-out infinite;
}
@keyframes wh-cadeado-pulso {
    0%, 100% { opacity: .7; transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
    50% { opacity: 1; transform: scale(1.18); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--destaque-neutro) 65%, transparent)); }
}


/* Ícone da sidebar — SVG inline (identidade "PDV Plus", Fase 8), stroke:currentColor herda a cor
   do link (cinza claro normal / branco quando ativo/hover), sem precisar de classe extra por estado. */
.wh-sidebar-icone { width: 17px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; opacity: .85; }
.wh-sidebar-icone svg { width: 17px; height: 17px; }
.wh-sidebar-nav a.ativo .wh-sidebar-icone { opacity: 1; }
.wh-sidebar-contador { margin-left: auto; background: var(--destaque-neutro); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }

.wh-sidebar-secao {
    padding: 18px 20px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: rgba(255, 255, 255, .32);
}
.wh-sidebar-secao:first-child { padding-top: 8px; }

.wh-sidebar-rodape { padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .08); }
.wh-sidebar-rodape a { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .55); text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 10px; padding: 8px 6px; transition: background .15s, color .15s; }
.wh-sidebar-rodape a:hover { color: #fff; background: rgba(255, 255, 255, .06); }

/* Avatar + nome do usuário logado (dono/funcionário), acima do botão Sair — mesma cor vermelha
   fixa do sistema já usada no avatar de cliente, só menor pra caber na sidebar. */
.wh-sidebar-usuario { display: flex; align-items: center; gap: 10px; padding: 6px; margin-bottom: 6px; }
.wh-sidebar-usuario-avatar { width: 28px; height: 28px; font-size: 11px; }
.wh-sidebar-usuario-nome { color: rgba(255, 255, 255, .85); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wh-conteudo { flex: 1; min-width: 0; }

.wh-topbar-mobile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--cinza-borda);
    position: sticky;
    top: 0;
    z-index: 20;
}
.wh-marca-mobile { font-weight: 700; font-size: 15px; color: var(--cinza-chumbo); }

.wh-container { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }

.wh-logo-topo { display: flex; justify-content: center; margin: 16px 0 -52px; }
.wh-logo-topo img { height: 168px; width: auto; }

.wh-card {
    background: var(--cinza-card);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    border: 1px solid var(--cinza-borda);
    padding: 28px;
}
/* Faixa vermelha da marca no topo -- só nos cards principais da página, não nos "wh-stat-card"
   (os quadradinhos pequenos de estatística, repetidos em grade -- com a faixa em cada um ficava
   poluído/repetitivo). Mesmo vermelho fixo do btn-wh-primario (#e6483f, literal, não usa
   --accent-nicho porque é identidade da marca, igual pra toda empresa). Acompanha o border-radius
   do card automaticamente (arredonda nos cantos de cima). */
.wh-card:not(.wh-stat-card) {
    border-top: 4px solid #e6483f;
}
/* Card específico que não deve ter a faixa (ex: Lembretes no Dashboard) -- volta pro contorno
   cinza normal, igual aos outros 3 lados. */
.wh-card.wh-card-sem-faixa {
    border-top: 1px solid var(--cinza-borda);
}

.wh-card-estreito { max-width: 440px; margin: 48px auto; }

.wh-titulo { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.wh-subtitulo { color: var(--cinza-texto-secundario); margin-bottom: 24px; font-size: 14px; }

.form-label { font-weight: 600; font-size: 14px; color: var(--cinza-chumbo); }

.form-control, .form-select {
    border-radius: 9px;
    border: 1px solid var(--cinza-borda);
    padding: 10px 14px;
    font-size: 15px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cinza-chumbo);
    box-shadow: 0 0 0 3px rgba(43, 43, 40, 0.08);
}

.btn-wh-primario {
    /* Botão primário — gradiente vermelho fixo da marca (identidade "PDV Plus", Fase 8), mesmo
       padrão visual do botão "Finalizar venda" do mockup. Cor literal (não usa --accent-nicho,
       que é só a customização por empresa no cabeçalho — o botão é da marca, igual pra todo mundo).
       Sobrescreve as variáveis do Bootstrap — sem isso o fundo cai pro padrão claro no hover
       enquanto o texto continua branco, ficando ilegível. */
    --bs-btn-bg: #e6483f;
    --bs-btn-hover-bg: #e6483f;
    --bs-btn-active-bg: #e6483f;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    background: linear-gradient(135deg, #e6483f, var(--destaque-neutro));
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 18px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(163, 22, 31, .3);
    transition: opacity .15s;
}
.btn-wh-primario:hover, .btn-wh-primario:focus, .btn-wh-primario:active {
    opacity: .88;
    color: #fff;
    background: linear-gradient(135deg, #e6483f, var(--destaque-neutro));
}

.btn-wh-secundario {
    /* Fundo branco (--cinza-card) em vez de transparente — em barras que ficam direto sobre o fundo
       da página (--cinza-fundo), o botão "transparente" só mostrava a mesma cor do fundo atrás dele
       e não parecia um botão de verdade. Borda usa --cinza-texto-secundario (mais escura que
       --cinza-borda) pra ficar visível nos dois casos (sobre --cinza-fundo ou dentro de um wh-card). */
    --bs-btn-bg: var(--cinza-card);
    --bs-btn-hover-bg: var(--cinza-fundo);
    --bs-btn-active-bg: var(--cinza-fundo);
    --bs-btn-border-color: var(--cinza-texto-secundario);
    --bs-btn-hover-border-color: var(--cinza-texto-secundario);
    --bs-btn-active-border-color: var(--cinza-texto-secundario);
    --bs-btn-color: var(--cinza-chumbo);
    --bs-btn-hover-color: var(--cinza-chumbo);
    --bs-btn-active-color: var(--cinza-chumbo);
    background: var(--cinza-card);
    color: var(--cinza-chumbo);
    border: 1px solid var(--cinza-texto-secundario);
    border-radius: 9px;
    padding: 11px 18px;
    font-weight: 600;
}
/* .btn-wh-secundario define padding fixo (11px 18px) que sobrescreve o .btn-sm do Bootstrap
   (mesma especificidade, carregado depois) — sem isso, um botão "pequeno" continuava do
   tamanho normal. Essa regra devolve o tamanho compacto quando as duas classes se combinam. */
.btn-wh-secundario.btn-sm {
    padding: 4px 10px;
    font-size: .8125rem;
}
/* Faltava o equivalente pro primário — sem isso, um botão primário .btn-sm ficava com o padding
   grande do botão normal (11px) enquanto o secundário .btn-sm ao lado usava o padding reduzido
   (4px), esticando os dois pra alturas diferentes quando dividiam o mesmo container flex (ex: os
   filtros Todas/A pagar/A receber de /contas — o botão ativo, sempre primário, ficava maior que
   os outros dois, que aí esticavam sem centralizar o texto). */
.btn-wh-primario.btn-sm {
    padding: 4px 10px;
    font-size: .8125rem;
}

/* Botão verde (aceitar/confirmar) e vermelho (recusar/rejeitar) — mesmo padrão visual dos outros
   botões wh- (raio de borda, padding, peso de fonte), só trocando a cor pra dar sinal claro de
   ação positiva/negativa (ex: Aceitar Pedido / Recusar em /pedido-visualizar). */
.btn-wh-sucesso {
    --bs-btn-bg: var(--sucesso);
    --bs-btn-hover-bg: var(--sucesso);
    --bs-btn-active-bg: var(--sucesso);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    background: var(--sucesso);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 18px;
    font-weight: 700;
    transition: opacity .15s;
}
.btn-wh-sucesso:hover, .btn-wh-sucesso:focus, .btn-wh-sucesso:active {
    opacity: .88;
    color: #fff;
    background: var(--sucesso);
}
.btn-wh-sucesso.btn-sm { padding: 4px 10px; font-size: .8125rem; }

.btn-wh-perigo {
    --bs-btn-bg: var(--erro);
    --bs-btn-hover-bg: var(--erro);
    --bs-btn-active-bg: var(--erro);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    background: var(--erro);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 18px;
    font-weight: 700;
    transition: opacity .15s;
}
.btn-wh-perigo:hover, .btn-wh-perigo:focus, .btn-wh-perigo:active {
    opacity: .88;
    color: #fff;
    background: var(--erro);
}
.btn-wh-perigo.btn-sm { padding: 4px 10px; font-size: .8125rem; }

/* Botoes de acao da lista de caixas (Salvar/Desativar/Excluir) com largura minima igual,
   pra nao ficar um maior que o outro so por causa do tamanho do texto. */
.wh-btn-acao-caixa { min-width: 116px; }
@media (min-width: 641px) {
    .wh-caixas-acoes .wh-btn-acao-caixa { padding: 10px 14px !important; font-size: 15px !important; }
}
.btn-wh-secundario:hover, .btn-wh-secundario:focus, .btn-wh-secundario:active {
    color: var(--cinza-chumbo);
    background: var(--cinza-fundo);
}

/* Barra de progresso animada (ex: dias restantes do trial em /assinatura) — cresce suavemente até o
   percentual real ao carregar a página (em vez de aparecer já cheia, estático) e tem um brilho
   deslizando por cima em loop, dando um acabamento premium. Marcação:
   <div class="wh-barra-trilha"><div class="wh-barra-preenchimento" style="--cor-barra:...; --percentual:XX%;"></div></div> */
.wh-barra-trilha {
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-borda);
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
}
.wh-barra-preenchimento {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--cor-barra, var(--sucesso));
    overflow: hidden;
    animation: wh-barra-crescer 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .15s;
}
.wh-barra-preenchimento::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: wh-barra-brilho 2.4s ease-in-out .8s infinite;
}
@keyframes wh-barra-crescer {
    from { width: 0; }
    to { width: var(--percentual, 0%); }
}
@keyframes wh-barra-brilho {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.wh-barra-critica { animation: wh-barra-crescer 1.1s cubic-bezier(.22, 1, .36, 1) forwards, wh-barra-pulsar 1.4s ease-in-out .3s infinite; }
@keyframes wh-barra-pulsar {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

/* Grid de informações somente-leitura (ex: Dados da empresa em /configuracoes) — rótulo pequeno em
   maiúsculas acima, valor em destaque abaixo, com uma linha sutil separando cada campo. Marcação:
   <div class="wh-info-grid"><div class="wh-info-item"><span class="wh-info-label">Rótulo</span>
   <span class="wh-info-valor">Valor</span></div>...</div> */
.wh-estoque-mov-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    min-width: 170px;
}

.wh-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 28px;
}
@media (max-width: 640px) {
    .wh-info-grid { grid-template-columns: 1fr; }
    /* Títulos de página (h1.wh-titulo) mais compridos (ex: "CRM — Relacionamento com clientes")
       quebravam em 2 linhas nas telas de celular mais estreitas — reduz um pouco só no mobile. */
    .wh-titulo { font-size: 19px; }
}
.wh-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wh-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cinza-texto-secundario);
    font-weight: 700;
}
.wh-info-valor {
    font-size: 14.5px;
    color: var(--cinza-chumbo);
    font-weight: 500;
}

/* Abas tipo pílula (Fase 8, identidade "PDV Plus") — componente genérico reaproveitável em
   qualquer grupo de opções clicáveis (não só forma de pagamento). Marcação: <div class="wh-tabs">
   <div class="wh-tab (ativo)"><span class="wh-tab-icone">💵</span>Dinheiro</div>...</div> */
.wh-tabs { display: grid; gap: 8px; }
.wh-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: 10px;
    border: 1.5px solid var(--cinza-borda);
    background: var(--cinza-fundo);
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--cinza-texto-secundario);
    text-align: center;
    text-decoration: none;
    line-height: 1.15;
    transition: background .15s, border-color .15s, color .15s;
}
.wh-tab .wh-tab-icone { font-size: 16px; }
.wh-tab.ativo {
    background: linear-gradient(135deg, #fff, #fff1f1);
    border-color: var(--destaque-neutro);
    color: var(--destaque-neutro);
    box-shadow: 0 4px 14px rgba(163, 22, 31, .18);
}

/* Variante do .wh-tabs pra dentro de um <form> comum (ex: configurações) — usa radio nativo
   escondido em vez de JS, então funciona só com CSS (input:checked + label). */
.wh-tabs-radio { position: relative; display: grid; gap: 8px; margin-top: 4px; }
.wh-tabs-radio input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wh-tabs-radio label.wh-tab { cursor: pointer; margin: 0; }
.wh-tabs-radio input[type="radio"]:checked + label.wh-tab {
    background: linear-gradient(135deg, #fff, #fff1f1);
    border-color: var(--destaque-neutro);
    color: var(--destaque-neutro);
    box-shadow: 0 4px 14px rgba(163, 22, 31, .18);
}
.wh-tabs-radio input[type="radio"]:focus-visible + label.wh-tab { outline: 2px solid var(--destaque-neutro); outline-offset: 2px; }

/* Stepper de quantidade (± clicável), Fase 8 — o campo real (input de texto/número) continua
   existindo por baixo com o mesmo nome/id de sempre; o stepper só chama JS pra incrementar/
   decrementar esse valor, sem mudar o que é validado/enviado no formulário. */
.wh-stepper { display: inline-flex; align-items: center; border: 1px solid var(--cinza-borda); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.wh-stepper button { border: none; background: var(--cinza-fundo); width: 26px; height: 26px; cursor: pointer; font-weight: 700; color: var(--cinza-chumbo); font-size: 14px; line-height: 1; }
.wh-stepper button:hover { background: var(--cinza-borda); }
.wh-stepper span { width: 32px; text-align: center; font-size: 13px; display: inline-block; font-weight: 600; }
/* Variante com campo real editável (PDV) em vez do <span> só de exibição acima — mesma aparência,
   mas o usuário também pode digitar a quantidade direto, além de usar os botões ±. */
.wh-stepper input { width: 36px; height: 26px; border: none; border-left: 1px solid var(--cinza-borda); border-right: 1px solid var(--cinza-borda); text-align: center; font-size: 13px; font-weight: 600; padding: 0; border-radius: 0; }
.wh-stepper input:focus { outline: none; box-shadow: none; border-color: var(--cinza-borda); }

.wh-campo-senha { position: relative; }
.wh-alternar-senha {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--cinza-texto-secundario);
    cursor: pointer;
    padding: 4px;
    display: flex;
}

.wh-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.wh-badge-sucesso { background: rgba(47,158,68,.12); color: var(--sucesso); }
.wh-badge-alerta { background: rgba(212,160,23,.14); color: var(--alerta); }
.wh-badge-erro { background: rgba(192,57,43,.12); color: var(--erro); }
.wh-badge-neutro { background: rgba(193,98,45,.12); color: var(--destaque-neutro); }
.wh-badge-cinza { background: rgba(118,118,116,.12); color: var(--cinza-texto-secundario); }

/* Cartões de KPI (resumo numérico no topo de listagens) — antes só existiam dentro de .wh-admin,
   deixando páginas normais da empresa (Estoque, Pedidos etc.) que já usavam essas classes sem
   nenhum estilo (só texto solto). Agora funcionam em qualquer tela. */
.wh-stat-valor { font-size: 1.7rem; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.wh-stat-rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-texto-secundario); margin-top: 8px; }
.wh-stat-card { transition: transform .15s ease, box-shadow .15s ease; height: 100%; }
.wh-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.wh-stat-card-icone { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; margin-bottom: 10px; }

/* Filtro em formato de pílula colorida (ex: status de pedido) — a cor vem de --cor (definida inline
   por quem usa), então um único bloco de CSS serve pra qualquer cor sem precisar duplicar regras. */
.wh-filtro-pill {
    --cor: var(--accent-nicho);
    display: inline-block; padding: .34rem .9rem; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: color-mix(in srgb, var(--cor) 14%, white);
    color: var(--cor);
    border: 1px solid color-mix(in srgb, var(--cor) 35%, white);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.wh-filtro-pill:hover {
    background: color-mix(in srgb, var(--cor) 28%, white);
    color: var(--cor);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--cor) 25%, transparent);
}
.wh-filtro-pill.ativo { background: var(--cor); border-color: var(--cor); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--cor) 40%, transparent); }
.wh-filtro-pill.ativo:hover { background: color-mix(in srgb, var(--cor) 85%, black); color: #fff; }
/* No celular, os filtros de status (Todos/Orçamento/Confirmado/...) quebravam em várias linhas de
   forma irregular (3+2+1), deixando o último pill sozinho numa linha com um vão vazio do lado —
   ficava com cara de bagunçado. Vira uma fileira só que rola de lado, sem quebra nenhuma. */
@media (max-width: 640px) {
    /* .flex-wrap do Bootstrap usa !important — só um "flex-wrap: nowrap" normal não vence. */
    .wh-filtros-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .wh-filtros-pills .wh-filtro-pill {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

.wh-link-whatsapp { display: inline-flex; align-items: center; vertical-align: middle; color: var(--sucesso); text-decoration: none; margin-left: 5px; opacity: .8; transition: opacity .15s ease; }
.wh-link-whatsapp:hover { opacity: 1; }
.wh-link-whatsapp svg { flex-shrink: 0; }

.wh-cliente-dados > div { font-size: 14px; }
.wh-cliente-dados .text-secondary { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }

.wh-avatar-cliente {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--destaque-neutro) 16%, white);
    color: var(--destaque-neutro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.wh-alerta-caixa { border-radius: 9px; padding: 12px 16px; font-size: 14px; margin-bottom: 18px; }
.wh-alerta-erro { background: rgba(192,57,43,.08); color: var(--erro); border: 1px solid rgba(192,57,43,.2); }
.wh-alerta-sucesso { background: rgba(47,158,68,.08); color: var(--sucesso); border: 1px solid rgba(47,158,68,.2); }

/* Avisos de vencimento (trial/cobrança) — flutuantes por cima do conteúdo, em vez de empurrar a
   página pra baixo como um alerta de bloco normal. */
.wh-flutuante-aviso {
    position: fixed; right: 20px; bottom: 20px; z-index: 1040;
    display: flex; align-items: flex-start; gap: 12px;
    max-width: 340px; padding: 16px 34px 16px 16px;
    background: var(--cinza-card); border: 1px solid rgba(192,57,43,.25); border-left: 4px solid var(--erro);
    border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
    animation: wh-flutuante-aviso-entrar .35s ease;
}
.wh-flutuante-aviso-icone { color: var(--erro); flex-shrink: 0; margin-top: 1px; }
.wh-flutuante-aviso-texto { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.wh-flutuante-aviso-texto strong { font-size: 14px; color: var(--erro); }
.wh-flutuante-aviso-texto span { font-size: 13px; color: var(--cinza-texto-secundario); }
.wh-flutuante-aviso-botao {
    align-self: flex-start; margin-top: 2px; background: var(--erro); color: #fff; padding: 6px 14px;
    border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.wh-flutuante-aviso-botao:hover { opacity: .88; color: #fff; }
.wh-flutuante-aviso-botao-empilhado { margin-top: 8px; }
.wh-flutuante-aviso-fechar {
    position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 18px;
    line-height: 1; color: var(--cinza-texto-secundario); cursor: pointer; padding: 0;
}
@keyframes wh-flutuante-aviso-entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 576px) {
    .wh-flutuante-aviso { left: 16px; right: 16px; bottom: 16px; max-width: none; flex-wrap: wrap; }
    .wh-flutuante-aviso-botao { margin-left: 32px; }
}

.wh-rodape-auth { text-align: center; margin-top: 18px; font-size: 14px; color: var(--cinza-texto-secundario); }

.wh-autocomplete-lista { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--cinza-card); border: 1px solid var(--cinza-borda); border-radius: 9px; max-height: 220px; overflow-y: auto; box-shadow: var(--sombra); }
.wh-autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.wh-autocomplete-item:hover { background: var(--cinza-fundo); }

/* Resultado de busca de produto enriquecido (identidade "PDV Plus", Fase 8) — nome/código + selo
   de estoque (só quando o produto tem item de estoque vinculado) + preço alinhado à direita. */
/* Thumb decorativo (identidade "PDV Plus", Fase 8) — mesmo emoji genérico do mockup, já que não
   existe ícone específico por produto/cliente cadastrado no sistema. Usado nos resultados de
   busca e na linha do item no carrinho (desktop). */
.wh-pdv-item-thumb { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: var(--cinza-fundo); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.wh-pdv-item-thumb svg { width: 15px; height: 15px; color: var(--cinza-texto-secundario); }

.wh-pdv-resultado-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wh-pdv-resultado-cliente { display: flex; align-items: center; gap: 10px; }
.wh-pdv-resultado-corpo { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wh-pdv-resultado-nome { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-pdv-resultado-linha2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.wh-pdv-resultado-sublinha { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--cinza-texto-secundario); }
.wh-pdv-resultado-preco { flex-shrink: 0; font-weight: 700; color: var(--destaque-neutro); }
.wh-pdv-selo-estoque { display: inline-block; padding: 1px 7px; border-radius: 20px; background: var(--cinza-fundo); color: var(--cinza-texto-secundario); font-size: 11px; font-weight: 600; }

/* Resultado "vender sem cadastro" na busca do PDV -- bloco (uma linha embaixo da outra), diferente do layout em linha do resultado de produto normal, que nao cabe um texto de apoio embaixo. */
.wh-pdv-resultado-personalizado { display: block; }
.wh-pdv-resultado-personalizado-titulo { font-weight: 600; color: var(--destaque-neutro); }
.wh-pdv-resultado-personalizado-sub { font-size: 12px; color: var(--cinza-texto-secundario); margin-top: 2px; }

/* Calendário de produção */
.wh-calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.wh-calendario-cabecalho {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--cinza-texto-secundario);
    text-transform: uppercase;
    padding-bottom: 6px;
}
.wh-calendario-dia {
    height: 100px;
    overflow: hidden;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--cinza-card);
    transition: transform .15s ease, box-shadow .15s ease;
}
.wh-calendario-dia:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.07); }
.wh-calendario-fora { background: var(--cinza-fundo); opacity: .5; }
.wh-calendario-fora:hover { transform: none; box-shadow: none; }
.wh-calendario-hoje { border-color: var(--accent-nicho); border-width: 2px; }
/* Cor de fundo por capacidade do dia: livre (verde) → alguns pedidos (laranja) → dia cheio (vermelho).
   Mesmas variáveis de cor já usadas nos badges do resto do sistema, só em opacidade bem baixa pra
   não brigar com o texto/itens por cima. */
.wh-calendario-livre { background: rgba(47,158,68,.32); }
.wh-calendario-leve { background: rgba(212,160,23,.10); }
.wh-calendario-cheio { background: rgba(192,57,43,.07); border-color: #8b1e14; border-width: 2px; }
.wh-calendario-fim-semana:not(.wh-calendario-fora) { border-top: 2px solid var(--cinza-borda); }
.wh-calendario-numero { font-weight: 700; font-size: 13px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.wh-calendario-etiqueta-hoje { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--accent-nicho); }
.wh-calendario-item {
    display: block;
    text-decoration: none;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.wh-calendario-dia .wh-calendario-item,
.wh-calendario-dia > span.text-secondary { display: none; }
.wh-calendario-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--cinza-texto-secundario); margin-bottom: 14px; }
.wh-calendario-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.wh-calendario-legenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

@media (max-width: 640px) {
    .wh-calendario { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
    /* Altura fixa (igual ao padrão da tela cheia) em vez de aspect-ratio — o Grid ("align-items"
       padrão é "stretch") ainda esticava cada célula até a altura da linha mais alta mesmo com
       aspect-ratio, porque isso só define uma proporção mínima, não trava o "stretch" do Grid. */
    .wh-calendario-dia { height: 64px; padding: 3px 2px; font-size: 10px; }
    .wh-calendario-cabecalho { font-size: 9px; }
    /* "Hoje" ao lado do número (flex-direction padrão: row) não cabia numa coluna estreita e
       estourava pra célula vizinha — empilha embaixo do número em vez de do lado. Centralizado
       (número, etiqueta "Hoje" e a bolinha/pin) em vez de alinhado à esquerda. */
    .wh-calendario-numero { flex-direction: column; align-items: center; gap: 0; font-size: 12px; width: 100%; text-align: center; }
    .wh-calendario-etiqueta-hoje { font-size: 7px; }
    /* O badge de contagem de pedidos usa o padding/font-size padrão do .wh-badge (pensado pra
       telas normais) — dentro da coluna estreita do número do dia, isso sozinho já empurrava a
       célula pra fora da altura disponível. Encolhido só aqui, no contexto do calendário mobile. */
    .wh-calendario-numero .wh-badge { padding: 0 5px; font-size: 9px; line-height: 1.6; }
}

/* Captcha de slider — "arraste até o fim para confirmar" */
.wh-slider { margin-bottom: 18px; -webkit-user-select: none; user-select: none; }
.wh-slider-trilha {
    position: relative;
    height: 46px;
    background: var(--cinza-fundo);
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    overflow: hidden;
}
.wh-slider-preenchido {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0;
    background: rgba(47, 158, 68, .16);
}
.wh-slider-texto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cinza-texto-secundario);
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
}
.wh-slider-alca {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    box-shadow: var(--sombra);
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    padding: 0;
}
.wh-slider-alca::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--cinza-texto-secundario);
    border-right: 2px solid var(--cinza-texto-secundario);
    transform: rotate(45deg) translateX(-2px);
}
.wh-slider-alca:active { cursor: grabbing; }
.wh-slider.wh-slider-completo .wh-slider-preenchido { background: rgba(47, 158, 68, .28); }
.wh-slider.wh-slider-completo .wh-slider-texto { color: var(--sucesso); font-weight: 600; }
.wh-slider.wh-slider-completo .wh-slider-alca { border-color: var(--sucesso); }
.wh-slider.wh-slider-completo .wh-slider-alca::before { border-color: var(--sucesso); }

@media (max-width: 640px) {
    .wh-container { padding: 20px 14px; }
    .wh-card { padding: 20px; }
}

.wh-botoes-produto { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
    .wh-botoes-produto { flex-direction: column; }
    .wh-botoes-produto .btn { width: 100%; }
}

/* Acabamento premium do painel admin master — escopado em body.wh-admin (header-admin.php).
   Fase 8: a sidebar escura + estado ativo em gradiente vermelho agora são as mesmas regras
   compartilhadas em .wh-sidebar-nav acima (unificado com o painel da empresa) — as 3 regras
   que existiam aqui sobrescrevendo pra um visual claro só do admin foram removidas. */
.wh-admin { background: var(--cinza-fundo); }

.wh-admin .wh-card {
    border: none;
    box-shadow: 0 1px 2px rgba(43, 43, 40, .04), 0 10px 28px rgba(43, 43, 40, .07);
    border-radius: 16px;
    padding: 32px;
}

.wh-admin .wh-titulo { letter-spacing: -.3px; }

.wh-admin table.table { border-collapse: separate; border-spacing: 0; }
.wh-admin table.table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .5px;
    font-weight: 700;
    color: var(--cinza-texto-secundario);
    border-bottom: 2px solid var(--cinza-borda);
    padding: 0 12px 12px;
}
.wh-admin table.table td { border-color: var(--cinza-borda); padding: 14px 12px; vertical-align: middle; }
.wh-admin table.table tbody tr { transition: background .12s ease; }
.wh-admin table.table tbody tr:hover { background: var(--cinza-fundo); }

.wh-admin .wh-badge { padding: 5px 14px; font-weight: 700; letter-spacing: .2px; }

.wh-admin .wh-stat-valor { font-size: 1.7rem; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.wh-admin .wh-stat-rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-texto-secundario); margin-top: 8px; }

@media (max-width: 640px) {
    .wh-admin .wh-card { padding: 22px; }
}

/* Abas simples (ex: tickets empresa/vendedor) */
.wh-abas { display: flex; gap: 4px; border-bottom: 2px solid var(--cinza-borda); margin-bottom: 20px; flex-wrap: wrap; }
.wh-abas a { padding: 10px 16px; color: var(--cinza-texto-secundario); font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.wh-abas a.ativo { color: var(--cinza-chumbo); border-bottom-color: var(--destaque-neutro); }
/* Ao clicar numa aba (link com #wh-abas-topo) a página abre já com a barra de abas no topo da tela, sem rolar até ela (em
   Configurações ela fica depois de vários blocos). scroll-margin deixa uma folga e desvia da barra fixa do celular. */
#wh-abas-topo { scroll-margin-top: 16px; }
html:has(#wh-abas-topo:target), html:has(#wh-dados-empresa:target), html:has(#wh-meus-dados:target) { scroll-behavior: auto; }
#wh-dados-empresa, #wh-meus-dados { scroll-margin-top: 48px; }
@media (max-width: 767px) {
    #wh-abas-topo { scroll-margin-top: 72px; }
    #wh-dados-empresa, #wh-meus-dados { scroll-margin-top: 104px; }
}
@media (max-width: 640px) {
    .wh-abas a { padding: 8px 8px; font-size: 13.5px; }
}


/* ============================================================
   PDV — layout tipo "PDV de mercado" (referência de imagem do
   usuário): coluna estreita à esquerda (código de barras + valor
   unitário/total do item em destaque) e lista de produtos ocupando
   a maior parte da tela à direita, com subtotal grande embaixo.
   Só consome as variáveis de cor já existentes no topo deste
   arquivo (regra fixa: paleta nunca muda sem combinar). Ver roadmap.md.
   ============================================================ */

/* Fase 8 (correção de fidelidade ao mockup, 23/07/2026): o mockup usa um "status-row" CLARO
   (fundo branco, igual aos outros cards) pra essa barra — não a caixa escura que estava aqui. */
.wh-pdv-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 13px 20px;
    margin-bottom: 12px;
}
.wh-pdv-topo-info { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wh-pdv-topo-item { font-size: 13px; color: var(--cinza-texto-secundario); font-weight: 600; }
.wh-pdv-topo-item b { color: var(--cinza-chumbo); }
.wh-pdv-topo-acoes { display: flex; gap: 8px; }

.wh-pdv-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) {
    .wh-pdv-layout { grid-template-columns: 260px 1fr; align-items: stretch; }
}

/* --- Coluna esquerda: scanner + números do item atual + atalhos ---
   Fase 8 (correção de fidelidade ao mockup, 23/07/2026): o mockup agrupa tudo em só 2 cards
   (card 1 = qtd+busca+produto+valores; card 2 = desconto+funções), não em 6 caixinhas separadas
   como estava. Reestruturado pra bater exatamente com isso. */
.wh-pdv-coluna-esquerda { display: flex; flex-direction: column; gap: 16px; }

.wh-pdv-card {
    background: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 18px;
}

.wh-pdv-caixa-rotulo { display: block; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-texto-secundario); margin-bottom: 8px; }
.wh-pdv-caixa-rotulo-dica { font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; }

.wh-pdv-quantidade-rapida { width: 100%; font-size: 24px; font-weight: 700; text-align: center; border: 1.5px solid var(--cinza-borda); border-radius: 11px; padding: 8px 0; margin-bottom: 16px; }

/* Campo de busca com ícone dentro (identidade "PDV Plus", Fase 8) — substitui o antigo par
   input+botão de lupa; a lupa vira só um ícone decorativo posicionado dentro do próprio campo,
   sem abrir modal (busca é inline, resultado aparece embaixo em .wh-autocomplete-lista). */
.wh-pdv-busca-campo { position: relative; }
.wh-pdv-busca-icone { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .55; pointer-events: none; }
.wh-pdv-busca-icone-svg { display: inline-flex; align-items: center; justify-content: center; }
.wh-pdv-busca-input { width: 100%; font-size: 13px; padding: 10px 14px 10px 36px; border: 1.5px solid var(--cinza-borda); border-radius: 11px; }
.wh-pdv-busca-input:focus { border-color: var(--accent-nicho); box-shadow: 0 0 0 4px rgba(230, 72, 63, .12); }
#wh-scanner-resultados { top: 100%; margin-top: 2px; }
.wh-pdv-scanner-erro {
    margin-top: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(192, 57, 43, .1);
    color: var(--erro);
    font-size: 13px;
    font-weight: 600;
}

.wh-pdv-divisor { height: 1px; background: var(--cinza-borda); margin: 14px 0; }
.wh-pdv-produto-nome { font-size: 13.5px; font-weight: 600; margin-bottom: 12px; }
.wh-pdv-linha-preco { display: flex; justify-content: space-between; align-items: center; }
.wh-pdv-linha-preco .wh-pdv-caixa-rotulo { margin-bottom: 0; }
.wh-pdv-preco { font-size: 20px; font-weight: 700; color: var(--destaque-neutro); }

.wh-pdv-desconto-linha-campos { display: flex; gap: 8px; }
.wh-pdv-desconto-valor { flex: 1; font-size: 14px; }
.wh-pdv-desconto-valor:disabled { background: var(--cinza-fundo); color: var(--cinza-texto-secundario); }
.wh-pdv-desconto-tipo { flex: 0 0 84px; width: 84px; }

.wh-pdv-funcoes-legenda { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cinza-borda); }
.wh-pdv-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.wh-pdv-keys button, .wh-pdv-keys a {
    display: block;
    padding: 12px 8px;
    border-radius: 11px;
    border: 1px solid var(--cinza-borda);
    background: var(--cinza-fundo);
    font-size: 12px;
    font-weight: 600;
    color: var(--cinza-chumbo);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
.wh-pdv-keys button:hover, .wh-pdv-keys a:hover { background: var(--cinza-borda); }
.wh-pdv-keys .wh-pdv-key-perigo { color: var(--erro); }

/* --- Coluna direita: lista de produtos (tipo cupom) + subtotal --- */
.wh-pdv-coluna-direita {
    background: var(--cinza-card);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.wh-pdv-lista-titulo {
    background: var(--cinza-chumbo);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Lista de itens em formato de "cupom": no desktop cada item é uma linha só, compacta,
   numerada, com os campos discretos (sem borda/fundo até o usuário clicar pra editar) —
   igual uma tabela de recibo de verdade. No mobile empilha em 2 linhas com campos maiores. */
.wh-pdv-itens-cabecalho {
    display: none;
    color: var(--cinza-texto-secundario);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 0 8px 6px;
    border-bottom: 1px solid var(--cinza-borda);
    margin-bottom: 6px;
}

.wh-pdv-itens { counter-reset: wh-pdv-item; }

/* Linha inicial escondida enquanto vazia (sem produto nem descrição) — evita mostrar um item
   "fantasma" (Personalizado/Qtd 1/R$0,00) antes do usuário escanear/pesquisar/escolher algo de
   verdade. display:none tira a linha da contagem do counter() também, então o próximo item real
   já nasce numerado "1" certinho. */
.wh-pdv-itens .wh-item-linha.wh-item-vazio { display: none !important; }
.wh-pdv-itens-vazio { padding: 24px 8px; text-align: center; color: var(--cinza-texto-secundario); font-size: 13px; }

/* Botão de remover item: no HTML/JS compartilhado com o Orçamento o texto real é "Remover" (ou "✕"
   na linha estática) — aqui no PDV, só o "✕" deve aparecer visualmente, então o texto real fica
   escondido (font-size:0) e um "✕" próprio é desenhado por cima via ::before, sem tocar app.js. */
.wh-pdv-itens .wh-item-remover { font-size: 0; }
.wh-pdv-itens .wh-item-remover::before { content: '✕'; font-size: 14px; }

@media (min-width: 768px) {
    /* Fase 8 (correção de fidelidade ao mockup, 23/07/2026): o mockup não tem coluna "Descrição"
       separada — nome do produto (com thumb) e descrição ficam empilhados numa única célula.
       Produto e Descrição (nth-child 1 e 2) passam a dividir a MESMA coluna (2), um em cada
       grid-row; as outras colunas usam grid-row:1/span 2 pra ficar centralizadas ao lado das duas. */
    .wh-pdv-itens-cabecalho {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 96px 75px 82px 28px;
        column-gap: 8px;
    }

    .wh-pdv-itens .wh-item-linha {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) 96px 75px 82px 28px;
        grid-template-rows: auto auto;
        column-gap: 8px;
        align-items: center;
        background: none;
        border: none;
        border-bottom: 1px solid var(--cinza-borda);
        border-radius: 0;
        padding: 7px 8px;
        margin: 0 !important;
        position: relative;
        counter-increment: wh-pdv-item;
    }
    .wh-pdv-itens .wh-item-linha::before {
        content: counter(wh-pdv-item);
        grid-column: 1;
        grid-row: 1 / span 2;
        text-align: center;
        font-size: 11px;
        color: var(--cinza-texto-secundario);
        align-self: center;
    }
    .wh-pdv-itens .wh-item-linha > div { width: auto !important; max-width: 100% !important; flex: none !important; margin: 0 !important; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(1) { grid-column: 2; grid-row: 1; display: flex !important; align-items: center; gap: 8px; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(2) { grid-column: 2; grid-row: 2; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(4) { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(6) { grid-column: 6; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; }
    .wh-pdv-itens .wh-item-observacao-col { display: none; }

    /* Rótulo de cada campo já vira o cabeçalho acima — não repete por linha. Campo em si fica
       "quieto" (sem borda/fundo) até ganhar foco, pra parecer texto de recibo, não formulário. */
    .wh-pdv-itens .wh-item-linha label { display: none; }
    .wh-pdv-itens .wh-item-linha select,
    .wh-pdv-itens .wh-item-linha input:not([type="hidden"]) {
        font-size: 13px;
        padding: 5px 6px;
        height: 32px;
        border-color: transparent;
        background: transparent;
    }
    /* Descrição vira subtítulo pequeno embaixo do nome (igual ".prod-cell .desc" do mockup). */
    .wh-pdv-itens .wh-item-linha > div:nth-child(2) input {
        font-size: 10.5px;
        color: var(--cinza-texto-secundario);
        height: 18px;
        padding: 0 0 0 34px;
    }
    .wh-pdv-itens .wh-item-linha select:hover,
    .wh-pdv-itens .wh-item-linha input:not([type="hidden"]):hover,
    .wh-pdv-itens .wh-item-linha select:focus,
    .wh-pdv-itens .wh-item-linha input:not([type="hidden"]):focus {
        border-color: var(--cinza-borda);
        background: var(--cinza-card);
    }
    .wh-pdv-itens .wh-item-linha .wh-item-remover {
        height: 28px;
        width: 28px;
        padding: 0;
        line-height: 1;
    }

    .wh-item-total-badge { grid-column: 5; grid-row: 1 / span 2; text-align: right; font-size: 13px; font-weight: 700; color: var(--destaque-neutro); align-self: center; white-space: nowrap; }
}

.wh-pdv-linha-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--cinza-borda);
}
.wh-pdv-linha-extra > div { flex: 1 1 200px; }
.wh-pdv-linha-extra .wh-pdv-cliente { flex: 1 1 260px; }
/* Fase 8 (correção de fidelidade ao mockup, 23/07/2026): a partir de 768px vira grid com as
   mesmas proporções do ".row3" do mockup (1.3fr cliente / 1fr vincular pedido / 1.5fr forma de
   pagamento) — sem isso a aba de pagamento (única sem largura própria) esticava pra ocupar todo
   o espaço sobrando na linha, ficando alta/esticada demais. */
@media (min-width: 768px) {
    .wh-pdv-linha-extra { display: grid; grid-template-columns: 1.3fr 1fr 1.5fr; align-items: start; }
    .wh-pdv-linha-extra > div, .wh-pdv-linha-extra .wh-pdv-cliente { flex: none; }
}
/* Rótulo "Cliente" vira "Cliente: {nome}" no lugar, sem linha extra embaixo — a barra de busca e a
   lupa continuam sempre visíveis (pra trocar de cliente é só buscar de novo). Nome comprido é
   cortado com "..." (o nome completo continua acessível no title, ao passar o mouse). */
#wh-cliente-rotulo-texto { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* Dica "tem pedido pendente" — some/aparece junto com a seleção de cliente, clicável pra vincular
   direto (1 pedido) ou abrir o modal já buscando pelo nome do cliente (mais de 1 pedido). */
.wh-pdv-pedido-dica { font-size: 12px; font-weight: 600; color: var(--destaque-neutro); cursor: pointer; margin-top: 4px; }
.wh-pdv-pedido-dica:hover { text-decoration: underline; }

/* Botão "Vincular pedido" + estado vinculado — no lugar do antigo <select> visível de
   "Pedido com saldo pendente" (que continua existindo escondido, só que sem <select> aparecendo mais). */
.wh-pdv-pedido-vinculado { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 6px 10px; background: var(--cinza-fundo); border-radius: 8px; font-size: 13px; }
.wh-pdv-pedido-desvincular { flex-shrink: 0; border: none; background: none; color: var(--cinza-texto-secundario); font-size: 14px; cursor: pointer; padding: 0 4px; }
.wh-pdv-pedido-desvincular:hover { color: var(--erro); }

/* Área rolável da lista de itens — altura fixa de ~4 linhas (não em vh, pra não depender do
   tamanho da tela): com 5 itens ou mais a lista já não cabe inteira e passa a rolar por dentro,
   em vez de esticar a página. */
.wh-pdv-itens-rolagem { flex: 1 1 auto; min-height: 140px; max-height: 178px; overflow-y: auto; overflow-x: hidden; margin-bottom: 10px; }

/* Fase 8 (correção de fidelidade ao mockup, 23/07/2026): no mockup o Subtotal é uma linha CLARA
   e discreta (".total-line.sub"), só o "Total a pagar" logo abaixo é que é escuro/em destaque. */
.wh-pdv-subtotal-barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cinza-fundo);
    border-radius: 10px;
    padding: 10px 16px;
    margin-top: auto;
    margin-bottom: 6px;
}
.wh-pdv-subtotal-rotulo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-texto-secundario); }
.wh-pdv-subtotal-valor { font-size: 13px; font-weight: 700; color: var(--cinza-texto-secundario); line-height: 1; }

.wh-pdv-desconto-linha-resumo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 16px 8px;
    color: var(--erro);
    font-size: 13px;
    font-weight: 700;
}

/* "Total a pagar" — o número que o caixa realmente cobra (subtotal já com desconto aplicado).
   Um pouco mais em destaque que o Subtotal (é o valor que importa na hora de cobrar), mas sem
   ocupar tanto espaço vertical quanto antes. */
.wh-pdv-total-pagar-barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cinza-chumbo);
    border-radius: var(--raio);
    padding: 8px 16px;
    margin-bottom: 10px;
}
.wh-pdv-total-pagar-rotulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #fff; }
/* Valor em destaque na cor de marca (igual ".total-line.grand span:last-child" do mockup) —
   não em branco, pra saltar mais aos olhos contra o fundo escuro. */
.wh-pdv-total-pagar-valor { font-size: 20px; font-weight: 700; color: var(--destaque-neutro); line-height: 1; }

.wh-pdv-recebido-troco { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.wh-pdv-recebido-troco input { font-size: 16px; font-weight: 700; }

.wh-pdv-finalizar-linha { display: flex; gap: 10px; }
.wh-pdv-finalizar-linha .wh-pdv-btn-finalizar { flex: 1; font-size: 16px; padding: 14px; }

/* --- Modais de busca (produto e cliente): tela cheia de overlay em vez da listinha inline,
   pra achar item num catálogo/carteira de clientes grande sem digitar o nome/código exato --- */
.wh-pdv-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px;
}
.wh-pdv-modal-caixa {
    background: var(--cinza-card);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    width: min(560px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 16px;
}
.wh-modal-alerta-caixa { border-top: 4px solid var(--erro); }
.wh-pdv-modal-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}
.wh-pdv-modal-fechar {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--cinza-texto-secundario);
    padding: 4px 8px;
}
.wh-pdv-modal-fechar:hover { color: var(--erro); }
.wh-pdv-modal-caixa > input { margin-bottom: 10px; font-size: 16px; padding: 10px 12px; }
.wh-pdv-modal-lista { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; max-height: 420px; border-top: 1px solid var(--cinza-borda); }
.wh-pdv-modal-lista .wh-autocomplete-item { padding: 10px 8px; border-bottom: 1px solid var(--cinza-borda); font-size: 14px; }
.wh-pdv-modal-lista .wh-autocomplete-item:hover { background: var(--cinza-fundo); }
.wh-pdv-modal-vazio { padding: 20px 8px; text-align: center; color: var(--cinza-texto-secundario); font-size: 14px; }

/* Modal de decisão do crediário: 2 botões grandes lado a lado (empilham no mobile) + bloco de
   quantidade de parcelas que só aparece depois de escolher sim/não. */
.wh-pdv-modal-crediario { width: min(420px, 100%); }
.wh-pdv-crediario-opcoes { display: flex; flex-direction: column; gap: 8px; }
.wh-pdv-crediario-opcoes .btn { padding: 12px; font-size: 15px; }

/* Modal "venda registrada, imprimir?" (Fase 8) — substitui a antiga config fixa
   "abrir_cupom_apos_venda": em vez de decidir sozinho, pergunta na hora com o mesmo acabamento
   premium dos outros modais do PDV (ícone grande + título + 2 ações). */
.wh-pdv-modal-venda-sucesso { width: min(380px, 100%); text-align: center; }
.wh-pdv-venda-sucesso-icone { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.wh-pdv-venda-sucesso-titulo { font-size: 17px; font-weight: 700; color: var(--cinza-chumbo); margin-bottom: 6px; }
.wh-pdv-venda-sucesso-subtitulo { color: var(--cinza-texto-secundario); font-size: 13.5px; margin-bottom: 16px; }

/* Impressão do cupom direto na janela do PDV (Fase 8) — sem segunda janela nem iframe: o pdv.js
   injeta o conteúdo do cupom (buscado via fetch) dentro de #wh-print-cupom-area, escondido da tela
   normal; na hora de imprimir, esconde todo o resto da página e mostra só esse conteúdo — técnica
   padrão de "imprimir só uma parte da página", igual a maioria dos sites faz.
   Histórico: a versão anterior usava visibility:hidden + height:0 + overflow:hidden nos irmãos do
   body, com #wh-print-cupom-area em position:fixed pra escapar do clipping. Isso ainda saía em
   branco/com papel correndo sem parar no Chrome. Causa real: @page { size: Xmm auto } calcula a
   altura da página a partir do FLUXO NORMAL do documento — e position:fixed tira o elemento desse
   fluxo. Com a única "página" de conteúdo fora do fluxo, a altura medida ficava perto de zero, e
   elementos fixed são conhecidos por se repetirem em cada página impressa (comportamento
   documentado, inconsistente entre navegadores) — o Chrome tratava isso gerando páginas extras
   vazias sem nunca fechar a impressão. Corrigido trocando tudo por display:none/display:block: um
   elemento com display:none não gera caixa nenhuma (não precisa zerar height/min-height à parte,
   nem existe o que "clipar"), e display:block na impressão devolve o cupom ao fluxo normal como um
   elemento estático comum — a altura que o @page mede passa a ser a altura real do cupom, uma
   página só, sem repetição. */
#wh-print-cupom-area { display: none; }
@media print {
    /* body:has(#wh-print-cupom-area) restringe essa regra só às páginas que realmente têm esse
       elemento (o PDV) — sem isso, ela era global (carregada em toda página via este estilo.css) e
       escondia o conteúdo inteiro de QUALQUER outra página na hora de imprimir, inclusive /cupom
       aberta direto (que não tem #wh-print-cupom-area). */
    body:has(#wh-print-cupom-area) > *:not(#wh-print-cupom-area) { display: none !important; }
    #wh-print-cupom-area {
        display: block;
        width: 100%;
    }
}

/* Modal de "Receber Crediário": lista de parcelas do cliente selecionado com checkbox, valor e
   selo de status — mesma paleta de cores do carnê (pendente cinza, atrasada vermelha) pra ficar
   consistente entre as duas telas. */
.wh-pdv-modal-receber { width: min(480px, 100%); }
.wh-pdv-receber-parcela {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--cinza-borda);
    cursor: pointer;
}
.wh-pdv-receber-parcela input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.wh-pdv-receber-parcela-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wh-pdv-receber-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 8px 0; border-top: 1px dashed var(--cinza-borda); font-size: 15px; }
.wh-carne-status { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: .75em; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }

/* Modal "Anotações do dia": clicar no resumo (📌 N anotações) de um dia do calendário abre esse
   modal em vez de empilhar cada anotação dentro da célula — é o que causava a célula "vazando"
   texto pra fora no celular. O conteúdo vem de um <template> escondido por dia (calendario.php e
   painel.php), clonado pelo assets/js/calendario-anotacoes.js. */
/* Ícone de anotação junto do número do dia (em vez de linha inteira dentro da célula) — só
   sinaliza "tem anotação aqui", clique abre o modal com o conteúdo completo. */
.wh-abrir-anotacoes { border: none; background: none; padding: 0; margin: 0; line-height: 1; font-size: inherit; cursor: pointer; }
.wh-modal-anotacoes-caixa { width: min(420px, 100%); }
.wh-anotacoes-modal-corpo { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.wh-anotacao-modal-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--cinza-fundo); border-radius: 8px; }
.wh-anotacao-modal-texto { font-size: 14px; line-height: 1.4; word-break: break-word; }
.wh-anotacao-modal-excluir { border: none; background: none; color: var(--cinza-texto-secundario); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.wh-anotacao-modal-excluir:hover { color: var(--erro); }
.wh-anotacao-modal-link { display: block; text-align: center; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--accent-nicho); text-decoration: none; }
.wh-anotacao-modal-link:hover { text-decoration: underline; }
/* "Ver todos os agendamentos" pedido pra ficar em vermelho, pra chamar mais atenção — tanto o botão
   fixo no topo do calendário quanto o link dentro do modal do dia (mas não o "Editar no calendário
   completo", que usa a mesma classe base .wh-anotacao-modal-link com a cor padrão). */
.wh-abrir-agendamentos-mes-do-dia { color: var(--erro); font-weight: 700; }
#wh-abrir-agendamentos-mes, #wh-abrir-lembretes-completo { color: var(--erro); font-weight: 700; border-color: var(--erro); }
.wh-anotacao-modal-item-link { text-decoration: none; color: inherit; }
.wh-anotacao-modal-item-link:hover { background: var(--cinza-borda); }
button.wh-anotacao-modal-link { border: none; background: none; width: 100%; cursor: pointer; font: inherit; }
.wh-carne-status-pendente { background: #eef1f4; color: #3a3f47; }
.wh-carne-status-paga { background: #dff5e6; color: #17803d; }
.wh-carne-status-atrasada { background: #fde3e1; color: #b3261e; }

/* --- Modo tela cheia: some com o menu lateral e usa a tela toda --- */
body.wh-pdv-tela-cheia-ativa .wh-sidebar { display: none !important; }
body.wh-pdv-tela-cheia-ativa .wh-conteudo { margin-left: 0 !important; }
body.wh-pdv-tela-cheia-ativa .wh-topbar-mobile { display: none !important; }
body.wh-pdv-tela-cheia-ativa .wh-container { max-width: 100%; padding: 12px; }

@media (max-width: 767px) {
    .wh-pdv-keys button, .wh-pdv-keys a { min-height: 44px; }
    /* No mobile a página já rola inteira — não faz sentido ter uma 2ª rolagem aninhada só
       da lista, então deixa crescer naturalmente aqui. */
    .wh-pdv-itens-rolagem { max-height: none; overflow-y: visible; flex: none; }
    /* Correção de layout mobile (06/09/2026): a grade antiga usava colunas fixas em px
       (100px/90px/40px) que sobravam quase nada pro 1fr da Descrição em telas estreitas
       (ficava espremida a uns 31px de largura) e não posicionava a coluna de Observação
       (5º campo) em lugar nenhum do grid, deixando-a cair num local aleatório. Agora cada
       campo ocupa a linha inteira (empilhado), Qtd. e Valor dividem uma linha 50/50, e o
       botão de remover sai do fluxo do grid (fica fixo no canto superior direito do
       cartão) — assim nenhuma coluna depende de largura fixa em px. */
    .wh-pdv-itens .wh-item-linha {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
        column-gap: 10px;
        align-items: end;
        background: var(--cinza-fundo);
        border: 1px solid var(--cinza-borda);
        border-radius: 9px;
        padding: 14px;
        padding-right: 42px;
        margin-bottom: 8px !important;
        position: relative;
    }
    .wh-pdv-itens .wh-item-linha > div { width: auto !important; max-width: 100% !important; flex: none !important; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(1) { grid-column: 1 / -1; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(2) { grid-column: 1 / -1; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(3) { grid-column: 1; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(4) { grid-column: 2; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(5) { grid-column: 1 / -1; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(6) { position: absolute; top: 10px; right: 10px; width: auto; }
    .wh-pdv-itens .wh-item-linha > div:nth-child(6) .wh-item-remover { width: 28px; height: 28px; padding: 0; }
    .wh-item-total-badge { grid-column: 1 / -1; text-align: right; font-size: 14px; font-weight: 700; color: var(--destaque-neutro); white-space: nowrap; }
    .wh-pdv-recebido-troco { grid-template-columns: 1fr; }
    .wh-pdv-finalizar-linha { flex-direction: column; }

    /* Correção de layout mobile (06/09/2026): a barra de ações do topo do PDV (Receber
       Crediário / Devolução-Troca / Tela cheia / Ir para o Caixa) usava só display:flex sem
       quebra de linha — 4 botões espremidos numa tela estreita faziam o texto "Ir para o
       Caixa" quebrar em 3 linhas dentro do próprio botão. Agora quebra em 2 colunas por linha. */
    .wh-pdv-topo-acoes { flex-wrap: wrap; width: 100%; }
    .wh-pdv-topo-acoes button, .wh-pdv-topo-acoes a { flex: 1 1 calc(50% - 4px); text-align: center; }
}

/* Tela de configurações do cupom (Fase 8, 23/07/2026) — antes era um único card com tudo
   corrido; agora é uma seção por assunto (fiado / cupom térmico / orçamento A4), espaçadas,
   com título+subtítulo próprios, igual ao resto do sistema redesenhado. */
.wh-config-cupom-pagina { max-width: 640px; margin: 0 auto; }
.wh-config-secao { margin-bottom: 20px; }
.wh-config-secao-titulo { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.wh-config-secao-sub { font-size: 13px; color: var(--cinza-texto-secundario); margin-bottom: 18px; }
.wh-config-divisor { height: 1px; background: var(--cinza-borda); margin: 16px 0; }
.wh-config-secao .form-check.form-switch { margin-bottom: 10px; padding-left: 2.75em; }
.wh-config-secao .form-check-input { width: 2.25em; cursor: pointer; }
.wh-config-secao .form-check-label { font-size: 14px; cursor: pointer; }

/* Checkbox/switch marcado usa a cor de destaque do sistema (vermelho), em vez do azul/laranja
   padrao do Bootstrap -- vale pra qualquer checkbox, inclusive os de Perfis de acesso. */
.form-check-input:checked {
    background-color: var(--destaque-neutro);
    border-color: var(--destaque-neutro);
}
.form-check-input:focus {
    border-color: var(--destaque-neutro);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--destaque-neutro) 25%, transparent);
}

/* Toggle "No cardápio" (meu-cardapio.php): aqui a cor tem significado (ligado/desligado),
   entao foge da regra geral acima -- vermelho quando desativado, verde quando ativado. */
.wh-toggle-cardapio .form-check-input { background-color: var(--erro); border-color: var(--erro); width: 2.6em; accent-color: var(--erro); }
.wh-toggle-cardapio .form-check-input:checked { background-color: var(--sucesso); border-color: var(--sucesso); accent-color: var(--sucesso); }
.wh-toggle-cardapio .form-check-input:focus {
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--erro) 25%, transparent);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.wh-toggle-cardapio .form-check-input:checked:focus { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--sucesso) 25%, transparent); }

/* Abas "Cartão"/"Pix" da tela de assinatura (/assinatura) — antes eram o nav-tabs cru do
   Bootstrap, sem nenhum acabamento do sistema, destoando do resto (visual "amador"). Reaproveita
   o mesmo tratamento visual do .wh-tab (PDV), só que em cima das classes/JS de aba do próprio
   Bootstrap (nav-link + data-bs-toggle="tab"), que continuam funcionando sem nenhuma mudança —
   .active é a classe que o Bootstrap já alterna sozinho ao trocar de aba. */
#wh-pagamento-area .nav-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; border-bottom: none; max-width: 420px; }
#wh-pagamento-area .nav-tabs .nav-item { width: 100%; }
#wh-pagamento-area .nav-tabs .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 4px;
    border-radius: 10px;
    border: 1.5px solid var(--cinza-borda);
    background: var(--cinza-fundo);
    color: var(--cinza-texto-secundario);
    font-weight: 600;
    font-size: 13.5px;
    transition: background .15s, border-color .15s, color .15s;
}
#wh-pagamento-area .nav-tabs .nav-link:hover { color: var(--cinza-chumbo); }
#wh-pagamento-area .nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #fff, #fff1f1);
    border-color: var(--destaque-neutro);
    color: var(--destaque-neutro);
    box-shadow: 0 4px 14px rgba(163, 22, 31, .18);
}
/* Campos do cartão (mantidos como <div> puros — o SDK do Mercado Pago monta um iframe próprio
   dentro deles, não dá pra virar <input> normal) usavam borda cinza genérica (#ccc), destoando da
   paleta do resto do sistema. Só a cor da borda muda; altura/padding/estrutura continuam iguais,
   já que o SDK depende do tamanho do container pra desenhar o campo dele por dentro. */
/* Destaque do plano escolhido em /assinatura — antes não existia nenhum indicativo visual
   permanente de qual plano estava selecionado (só o texto "Pagar [Nome]" lá embaixo, fácil de não
   notar); o usuário reportou que parecia "voltar pro primeiro plano" ao trocar de escolha. */
.wh-plano-card.wh-plano-selecionado {
    border-color: var(--destaque-neutro) !important;
    border-width: 2px !important;
    box-shadow: 0 6px 20px rgba(163, 22, 31, .15) !important;
}
#wh-pagamento-area #form-checkout__cardNumber,
#wh-pagamento-area #form-checkout__expirationDate,
#wh-pagamento-area #form-checkout__securityCode {
    border-color: var(--cinza-borda) !important;
    background: #fff;
}

/* Tabelas largas (várias colunas) no celular: em vez de rolar de lado mostrando só uma fatia de
   cada vez ("tudo amontoado"), viram uma lista de cards empilhados — cada <td> com seu rótulo (via
   data-label) ao lado do valor, sem precisar de HTML duplicado pra desktop/mobile. Genérico —
   qualquer tabela pode usar (classe .wh-tabela-cards na <table>, data-label em cada <td>, e opcionalmente
   .wh-tabela-cards-titulo no <td> que deve aparecer em destaque no topo do card, sem rótulo). */
@media (max-width: 640px) {
    .wh-tabela-cards thead { display: none; }
    .wh-tabela-cards, .wh-tabela-cards tbody, .wh-tabela-cards tr, .wh-tabela-cards td {
        display: block;
        width: 100%;
    }
    /* tr vira flex (não só block) pra permitir usar "order" no td-título — assim ele pode aparecer
       em destaque no topo do card no mobile mesmo quando não é o primeiro <td> no HTML/desktop
       (ex: financeiro.php lista Data primeiro no desktop, mas Descrição em destaque no card). CSS
       "order" não tem efeito nenhum no desktop, onde os <td> continuam como células de tabela normais. */
    .wh-tabela-cards tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        border: 1px solid var(--cinza-borda);
        border-radius: 10px;
        padding: 10px 12px;
        border-left-width: 3px !important;
    }
    .wh-tabela-cards td {
        border: none;
        padding: 6px 0;
        text-align: right;
    }
    .wh-tabela-cards td[data-label]::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        font-size: 12px;
        color: var(--cinza-texto-secundario);
    }
    .wh-tabela-cards td.wh-tabela-cards-titulo {
        order: -1;
        text-align: left;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--cinza-borda);
        margin-bottom: 6px;
        font-weight: 600;
    }
    .wh-tabela-cards td.wh-tabela-cards-foto { display: none; }
    .wh-tabela-cards-acao { padding-top: 8px; }
    .wh-tabela-cards-acao .btn { width: 100%; }
    .wh-tabela-cards-toolbar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-top: 8px; }
    .wh-tabela-cards-toolbar form { display: inline-flex; }

    /* Ações de /caixas especificamente (campo de nome + Salvar/Desativar/Excluir) -- campo em
       cima ocupando a linha toda, botões empilhados embaixo dele, todos do mesmo tamanho. Classe
       própria (não mexe em wh-tabela-cards-toolbar, usada em várias outras telas). */
    .wh-caixas-acoes { clear: both; text-align: left; }
    .wh-caixas-acoes > div { flex-direction: column; align-items: stretch; width: 100%; }
    .wh-caixas-acoes form { width: 100%; }
    .wh-caixas-acoes form.d-flex { flex-direction: column; align-items: stretch; }
    .wh-caixas-acoes input[type="text"] { width: 100%; max-width: none !important; }
    .wh-caixas-acoes .btn { width: 100%; }
}

/* Accordion premium da tela "Equipe > Perfis de acesso" -- sobrescreve o visual cru padrão do
   Bootstrap pra ficar consistente com o resto do sistema (cores da empresa, cantos arredondados,
   espaçamento maior). */
.wh-permissoes-accordion { border-radius: 12px; overflow: hidden; }
.wh-permissoes-accordion .accordion-item { border: 1px solid var(--cinza-borda); border-radius: 10px !important; overflow: hidden; margin-bottom: 10px; }
.wh-permissoes-accordion .accordion-item:last-child { margin-bottom: 0; }
.wh-permissoes-accordion .accordion-button { display: flex; align-items: center; font-weight: 600; font-size: 0.95rem; padding: 14px 18px; background: var(--cinza-fundo, #f8f7f5); }
.wh-permissoes-accordion .accordion-button:not(.collapsed) { color: var(--destaque-neutro); background: color-mix(in srgb, var(--destaque-neutro) 8%, white); box-shadow: none; }
.wh-permissoes-accordion .accordion-button:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--destaque-neutro) 20%, transparent); }
.wh-permissoes-accordion .wh-permissoes-cat-nome { flex: 1 1 auto; text-align: left; }
.wh-permissoes-accordion .accordion-button .wh-badge { flex-shrink: 0; }
.wh-permissoes-accordion .accordion-body { padding: 18px; }
.wh-permissoes-subgrupo { border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; background: #fff; }
.wh-permissoes-subgrupo:last-child { margin-bottom: 0; }
.wh-permissoes-subgrupo-titulo { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--destaque-neutro); margin-bottom: 8px; }


/* --- Tela de Suporte (ticket): conversa em bolhas premium, com rolagem depois de ~3 mensagens no
   desktop e ~2 no mobile, badges de status coloridos por estado, e avaliacao em estrelas. --- */
.wh-ticket-cabecalho { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.wh-ticket-acoes-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.wh-ticket-acoes-topo .input-group { width: auto; }
.wh-ticket-acoes-topo select.form-select-sm { min-width: 140px; }
.wh-ticket-acao-mini { display: flex; align-items: center; gap: 8px; }
.wh-ticket-acao-rotulo { font-size: 12px; font-weight: 700; color: var(--cinza-texto-secundario); white-space: nowrap; }
.wh-ticket-acoes-topo .btn { background: #fff; border: 1px solid var(--cinza-borda); color: var(--destaque-neutro); }
.wh-ticket-acoes-topo .btn:hover, .wh-ticket-acoes-topo .btn:focus { background: var(--destaque-neutro); color: #fff; border-color: var(--destaque-neutro); }
.wh-ticket-voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--cinza-texto-secundario); font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 10px; }
.wh-ticket-voltar:hover { color: var(--destaque-neutro); }
.wh-ticket-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; color: var(--cinza-texto-secundario); font-size: 13px; }

.wh-ticket-conversa { display: flex; flex-direction: column; gap: 14px; max-height: 175px; overflow-y: auto; padding: 6px 10px 6px 2px; margin: 18px 0; scroll-behavior: smooth; }
@media (max-width: 767px) { .wh-ticket-conversa { max-height: 95px; } }

.wh-ticket-msg { max-width: 82%; padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; backdrop-filter: blur(2px); }
.wh-ticket-msg-eu { align-self: flex-end; background: rgba(163, 22, 31, .09); border-color: rgba(163, 22, 31, .22); border-bottom-right-radius: 4px; }
.wh-ticket-msg-outro { align-self: flex-start; background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .2); border-bottom-left-radius: 4px; }
.wh-ticket-msg-topo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wh-ticket-msg-autor { font-weight: 700; font-size: 13px; }
.wh-ticket-msg-hora { font-size: 11px; color: var(--cinza-texto-secundario); }
.wh-ticket-msg-texto { white-space: pre-wrap; margin: 6px 0 0; font-size: 14px; line-height: 1.5; word-break: break-word; }
.wh-ticket-msg-anexo { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; margin-top: 8px; font-weight: 600; color: var(--destaque-neutro); text-decoration: none; }
.wh-ticket-msg-anexo:hover { text-decoration: underline; }

.wh-ticket-avaliacao { margin-top: 14px; padding: 16px; border: 1px solid var(--cinza-borda); border-radius: 12px; background: var(--cinza-fundo, #f8f7f5); }
.wh-estrelas-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.wh-estrelas-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.wh-estrelas-input label { font-size: 30px; line-height: 1; color: #d8d8d5; cursor: pointer; transition: color .1s ease; }
.wh-estrelas-input input:checked ~ label,
.wh-estrelas-input label:hover,
.wh-estrelas-input label:hover ~ label { color: #f0ad0e; }
.wh-estrelas-exibir { font-size: 22px; line-height: 1; color: #d8d8d5; }
.wh-estrelas-exibir span.wh-estrela-cheia { color: #f0ad0e; }

/* Assistente de ajuda (chat "tipo IA" sem IA de verdade) -- botao flutuante + painel de conversa. */
.wh-assistente-botao {
    position: fixed; bottom: 24px; right: 24px; z-index: 1900;
    width: 56px; height: 56px; border-radius: 50%; border: none;
    background: var(--erro, #c0392b); color: #fff; font-size: 26px;
    box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease;
}
.wh-assistente-botao:hover { transform: scale(1.06); }
.wh-assistente-painel {
    position: fixed; bottom: 92px; right: 24px; z-index: 1900;
    width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 140px);
    background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.22);
    display: none; flex-direction: column; overflow: hidden;
}
.wh-assistente-painel.wh-assistente-aberto { display: flex; }
.wh-assistente-cabecalho {
    background: var(--erro, #c0392b); color: #fff; padding: 14px 16px;
    font-weight: 700; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.wh-assistente-fechar { background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
.wh-assistente-corpo { flex: 1 1 auto; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f6f4; }
.wh-assistente-msg { padding: 8px 12px; border-radius: 12px; font-size: .875rem; line-height: 1.4; white-space: pre-line; }
.wh-assistente-msg-usuario { align-self: flex-end; max-width: 85%; background: var(--erro, #c0392b); color: #fff; border-bottom-right-radius: 3px; }
.wh-assistente-msg-assistente { align-self: stretch; background: #fff; color: #2b2b28; border: 1px solid var(--cinza-borda, #e4e2dd); border-bottom-left-radius: 3px; }
.wh-assistente-rodape { flex-shrink: 0; display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--cinza-borda, #e4e2dd); background: #fff; }
.wh-assistente-input { flex: 1 1 auto; border: 1px solid var(--cinza-borda, #e4e2dd); border-radius: 20px; padding: 8px 14px; font-size: .875rem; outline: none; }
.wh-assistente-input:focus { border-color: var(--erro, #c0392b); }
.wh-assistente-enviar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--erro, #c0392b); color: #fff; cursor: pointer; font-size: 16px; }
@media (max-width: 480px) {
    .wh-assistente-painel { right: 16px; left: 16px; width: auto; bottom: 84px; }
    .wh-assistente-botao { right: 16px; bottom: 16px; }
}
.wh-assistente-destaque { color: var(--erro, #c0392b); font-weight: 700; }
.wh-assistente-numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: var(--erro, #c0392b); color: #fff; font-weight: 700; font-size: 12px;
    margin-right: 2px;
}

/* Paginação — a página ativa usa o vermelho da marca (mesmo degradê do botão primário) em vez do azul padrão do Bootstrap.
   Sobrescreve as variáveis do componente .pagination, então vale de uma vez para toda tela que tem paginação
   (Clientes, Pedidos, Estoque, Financeiro, Suporte, Logs do admin etc.). Fundo e borda dos itens continuam como estavam. */
.pagination {
    --bs-pagination-color: var(--cinza-chumbo);
    --bs-pagination-hover-color: var(--destaque-neutro);
    --bs-pagination-focus-color: var(--destaque-neutro);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(230, 72, 63, .25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #e6483f;
    --bs-pagination-active-border-color: #e6483f;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #e6483f, var(--destaque-neutro));
    border-color: transparent;
    font-weight: 700;
}

/* Suporte remoto (suporte-remoto.php) — página explicativa com o passo a passo para baixar o AnyDesk. Só cores da paleta do sistema. */
.wh-btn-icone { vertical-align: -3px; margin-right: 8px; }
.wh-link-marca { color: var(--destaque-neutro); font-weight: 600; text-decoration: none; }
.wh-link-marca:hover { color: var(--destaque-neutro); text-decoration: underline; }
.wh-sr-voltar { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--cinza-texto-secundario); text-decoration: none; }
.wh-sr-voltar:hover { color: var(--destaque-neutro); }
.wh-sr-topo { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.wh-sr-topo-texto { flex: 1 1 380px; min-width: 0; }
.wh-sr-topo-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 26px 32px; background: var(--cinza-fundo); border: 1px solid var(--cinza-borda); border-radius: var(--raio); }
.wh-sr-topo-logo img { display: block; width: 200px; max-width: 100%; height: auto; }
.wh-sr-selo { display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--destaque-neutro); }
.wh-sr-lead { font-size: 15px; line-height: 1.6; color: var(--cinza-chumbo); margin: 6px 0 18px; max-width: 62ch; }
.wh-sr-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.wh-sr-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--cinza-texto-secundario); max-width: 62ch; }
.wh-sr-secao-titulo { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.wh-sr-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; counter-reset: passo; }
.wh-sr-passos li { counter-increment: passo; padding: 16px; border: 1px solid var(--cinza-borda); border-radius: 12px; background: var(--cinza-card); }
.wh-sr-passos li::before { content: counter(passo); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: linear-gradient(135deg, #e6483f, var(--destaque-neutro)); color: #fff; font-size: 14px; font-weight: 700; }
.wh-sr-passos strong { display: block; margin-bottom: 4px; font-size: 14px; }
.wh-sr-passos span { display: block; font-size: 13px; line-height: 1.5; color: var(--cinza-texto-secundario); }
.wh-sr-duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.wh-sr-texto { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--cinza-chumbo); }
.wh-sr-lista { list-style: none; margin: 0; padding: 0; }
.wh-sr-lista li { position: relative; margin-bottom: 10px; padding-left: 26px; font-size: 14px; line-height: 1.55; }
.wh-sr-lista li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--sucesso); }
.wh-sr-rodape { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--cinza-texto-secundario); }
@media (max-width: 640px) {
    .wh-sr-topo-logo { order: -1; width: 100%; padding: 18px; }
    .wh-sr-acoes .btn { width: 100%; }
}

/* Avisos flutuantes — o botão fica EMBAIXO do texto (teste acabando, caixa aberto de antes da mudança de plano...): em linha própria e na
   largura toda do aviso, para o texto usar o espaço em vez de ficar espremido ao lado do botão. As linhas ganham mais respiro e o aviso sobe
   acima do botão redondo do assistente, para os dois não se sobreporem. O :has() só liga o "sobe" quando o assistente existe na página;
   navegador sem :has() mantém o aviso embaixo, como antes. */
.wh-flutuante-aviso { flex-wrap: wrap; row-gap: 12px; }
.wh-flutuante-aviso-texto { gap: 6px; }
.wh-flutuante-aviso-texto strong { line-height: 1.35; }
.wh-flutuante-aviso-texto span { line-height: 1.45; }
.wh-flutuante-aviso-botao-empilhado { flex: 0 0 100%; box-sizing: border-box; margin: 0; padding: 9px 14px; text-align: center; font-size: 14px; }
.wh-flutuante-aviso:has(.wh-flutuante-aviso-botao-empilhado) { padding-right: 16px; }
.wh-flutuante-aviso:has(.wh-flutuante-aviso-botao-empilhado) .wh-flutuante-aviso-texto { padding-right: 20px; }
body:has(.wh-assistente-botao) .wh-flutuante-aviso { bottom: 92px; }

/* Top 10 produtos do mês (painel.php) — cada produto ganha uma barra proporcional ao faturamento dele (o 1º fecha 100%), no lugar da lista
   com preço. Nome em uma linha só (reticências se for longo; o nome completo e o valor ficam no title). Só cores da paleta do sistema. */
.wh-top-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.wh-top-item { min-width: 0; }
.wh-top-linha { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.wh-top-pos { flex: 0 0 18px; font-size: 12px; font-weight: 700; color: var(--cinza-texto-secundario); font-variant-numeric: tabular-nums; }
.wh-top-item:first-child .wh-top-pos { color: var(--destaque-neutro); }
.wh-top-nome { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--cinza-chumbo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-top-barra { position: relative; height: 6px; margin-left: 28px; border-radius: 999px; background: var(--cinza-fundo); overflow: hidden; }
.wh-top-barra-preench { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e6483f, var(--destaque-neutro)); transform-origin: left center; animation: wh-top-barra-entrar .7s ease-out both; }
@keyframes wh-top-barra-entrar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wh-top-barra-preench { animation: none; } }
/* Do tablet para cima (cartão ao lado do gráfico) a lista mostra 5 produtos e os outros 5 rolam dentro do cartão, com barra fina — assim o cartão
   não fica maior que o gráfico. No celular o cartão ocupa a largura toda e a lista mostra os 10, sem rolagem dentro de rolagem. */
@media (min-width: 768px) {
    .wh-top-lista { max-height: 208px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--cinza-borda) transparent; }
    .wh-top-lista::-webkit-scrollbar { width: 6px; }
    .wh-top-lista::-webkit-scrollbar-track { background: transparent; }
    .wh-top-lista::-webkit-scrollbar-thumb { background: var(--cinza-borda); border-radius: 999px; }
}

/* Legenda dos gráficos do Fluxo de caixa: quadradinho colorido + texto (a cor vem de --cor, inline); o item tracejado representa a linha da média. */
.wh-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--cinza-texto-secundario); }
.wh-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.wh-legenda-item::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cor, currentColor); }
.wh-legenda-tracejada::before { width: 16px; height: 0; border-top: 2px dashed var(--cinza-texto-secundario); border-radius: 0; background: none; }

/* Gráfico do Fluxo de caixa: abaixo de 1200 px ele fica embaixo do resumo, em largura total; a altura máxima evita um gráfico enorme (ele se centraliza). */
.wh-grafico-fluxo svg { max-height: 380px; }

/* Gráficos com versão para celular (Graficos::comVersaoCelular): abaixo de 576 px aparece a versão estreita, com textos maiores. */
.wh-grafico-celular { display: none; }
@media (max-width: 575.98px) {
    .wh-grafico-padrao { display: none; }
    .wh-grafico-celular { display: block; }
}

/* Admin > Financeiro > "MRR por plano": mostra até 5 planos e o resto numa barra de rolagem, com o cabeçalho da tabela fixo no alto. */
.wh-mrr-rolagem { max-height: 240px; overflow-y: auto; }
.wh-mrr-rolagem thead th { position: sticky; top: 0; z-index: 1; background: var(--cinza-card); box-shadow: inset 0 -1px 0 var(--cinza-borda); }
.wh-mrr-rolagem tbody tr[hidden] { display: none; }
.wh-admin .wh-mrr-rolagem table.table td, .wh-admin .wh-mrr-rolagem table.table th { padding-top: 8px; padding-bottom: 8px; white-space: nowrap; }
.wh-admin .wh-mrr-rolagem table.table td.wh-mrr-plano { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* "MRR por plano": coluna "% do MRR" = barra fina (mesmo visual do Top 10) + percentual. No celular a barra encolhe. */
.wh-mrr-part-conteudo { display: flex; align-items: center; gap: 6px; }
.wh-admin .wh-mrr-rolagem .wh-mrr-barra { flex: 0 0 56px; margin-left: 0; }
.wh-mrr-pct { min-width: 34px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.wh-admin .wh-mrr-rolagem table.table td, .wh-admin .wh-mrr-rolagem table.table th { padding-left: 8px; padding-right: 8px; }
@media (max-width: 575.98px) {
    .wh-admin .wh-mrr-rolagem .wh-mrr-barra { flex-basis: 32px; }
    .wh-mrr-pct { min-width: 32px; }
    .wh-mrr-part-conteudo { gap: 6px; }
}

/* Cadastro: caixa do ramo (nome do ramo + botão "Trocar"), no alto do formulário. */
.wh-ramo-caixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; padding: 10px 12px 10px 16px; border: 1px solid var(--cinza-borda); border-left: 3px solid var(--destaque-neutro); border-radius: 12px; background: var(--cinza-fundo); }
.wh-ramo-info { display: flex; flex-direction: column; min-width: 0; }
.wh-ramo-rotulo { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--cinza-texto-secundario); }
.wh-ramo-nome { font-weight: 600; color: var(--cinza-chumbo); overflow-wrap: anywhere; }
.wh-ramo-acoes { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
@media (max-width: 575.98px) { .wh-ramo-acoes .btn { min-height: 38px; padding-left: 16px; padding-right: 16px; } }