/* =====================================================================================================
   Sistema visual do PDV de varejo.

   Servido pelo RCL em _content/Sis.Presentation.Erp.Components/pdv.css — o host só precisa do <link>.
   Funciona igual no BlazorWebView (StaticWebAssets compõe o _content/ na saída) e no WASM.

   Por que CSS à mão e não MudBlazor: esta tela é um painel de instrumentos, não um formulário. O que ela
   pede — total legível a dois metros, alvo de toque grande, zero cromo supérfluo — é o oposto do que um
   design system de propósito geral entrega por padrão, e dobrar o MudBlazor até lá custa mais override do
   que escrever o layout. O MudBlazor continua no módulo pro que ele faz bem e que não vale reconstruir:
   diálogo, snackbar e o catálogo de ícones.

   ⚠️ MUDANÇA DE 2026-07-25 — NENHUMA COR É CRAVADA AQUI.

   A versão anterior duplicava à mão a paleta azul-marinho do extinto preset `SisThemes.Pdv` (--pdv-navy
   #1F2A7A, --pdv-blue #4F5FC7 e companhia). Isso tinha duas consequências, as duas reportadas pelo dono:

     1. o PDV era a única tela do sis que NÃO acompanhava o toggle claro/escuro — as cores estavam no CSS,
        não no tema, então trocar o tema não mudava nada aqui;
     2. o azul dominava a tela inteira (faixa de topo, total, painel de resumo do fechamento, TODOS os
        botões de ação), enquanto o resto do sistema usa verde de ação sobre superfícies neutras.

   Agora todo valor vem das custom properties que o MudThemeProvider publica (--mud-palette-*), exatamente
   como o sis-theme.css das telas de escritório faz. Consequência prática: o PDV segue o tema ATIVO — os
   dois canônicos (SisThemes.Light / SisThemes.Dark) — sem uma linha de cor duplicada, e a cor de ação é a
   primária do sistema (verde), não um azul só dele.

   Os tons "soft" abaixo são tingimentos da paleta ativa via --mud-palette-*-rgb (mesma técnica da linha
   selecionada do SisDataGrid, em sis-theme.css). São a única forma de ter um "container tonal" no estilo
   Material sem cravar hexadecimal — e, por serem derivados, funcionam nos dois modos.
   ===================================================================================================== */

/* 🔑 (2026-08-20) Os TOKENS valem em `.pdv` E em `.pdv-preview`; o LAYOUT do terminal fica só no `.pdv`.
   A separação nasceu da prévia do botão na tela de Opções de Venda: sem os tokens, `--pdv-surface` e
   `--pdv-line` não resolvem fora do terminal e o botão de amostra sai SEM fundo e SEM borda — a cor
   escolhida some justamente na tela em que se escolhe a cor. ⛔ Reaproveitar `.pdv` ali não serve: ele é
   `position: fixed; inset: 0`, e a prévia viraria um overlay de tela cheia por cima da configuração. */
.pdv,
.pdv-preview {
    /* --- Superfícies e texto (tudo do tema ativo) --------------------------------------------- */
    --pdv-bg: var(--mud-palette-background);
    --pdv-surface: var(--mud-palette-surface);
    --pdv-surface-2: var(--mud-palette-gray-light);   /* camada tonal neutra: campos, botões tonais */
    --pdv-line: var(--mud-palette-lines-default);
    --pdv-text: var(--mud-palette-text-primary);
    --pdv-text-dim: var(--mud-palette-text-secondary);

    /* --- Acentos ------------------------------------------------------------------------------- */
    --pdv-accent: var(--mud-palette-primary);         /* verde de ação do sis */
    --pdv-accent-text: var(--mud-palette-primary-text);
    --pdv-danger: var(--mud-palette-error);
    --pdv-warn: var(--mud-palette-warning);
    --pdv-ok: var(--mud-palette-success);
    --pdv-info: var(--mud-palette-info);

    /* Containers tonais (Material 3): a cor semântica diluída sobre a superfície. 16% é o ponto em que o
       tingimento é inequívoco no claro sem virar bloco chapado no escuro. */
    --pdv-accent-soft: rgba(var(--mud-palette-primary-rgb), 0.16);
    --pdv-danger-soft: rgba(var(--mud-palette-error-rgb), 0.16);
    --pdv-warn-soft: rgba(var(--mud-palette-warning-rgb), 0.18);
    --pdv-ok-soft: rgba(var(--mud-palette-success-rgb), 0.16);
    --pdv-info-soft: rgba(var(--mud-palette-info-rgb), 0.16);

    /* Camada de estado (hover/press), no estilo "state layer" do Material. Tingida com a PRIMÁRIA, e não com
       um cinza neutro, por um motivo prático: a paleta do MudBlazor não publica rgb de superfície/texto, e o
       único neutro com rgb (--mud-palette-dark-rgb) é escuro nos DOIS temas — sobre a superfície escura ele
       seria invisível, ou seja, o hover sumiria justo no tema escuro. A primária é vívida nos dois. */
    --pdv-state-hover: rgba(var(--mud-palette-primary-rgb), 0.10);
    --pdv-state-press: rgba(var(--mud-palette-primary-rgb), 0.18);

    /* Versões OPACAS dos mesmos tingimentos, para o rodapé (totais e botões de ação).
       Motivo (dono, 2026-08-18): os tons acima são rgba, e por baixo do rodapé passa a marca d'água
       configurável (`.pdv-background`, 20%) — o logotipo aparecia ATRAVÉS do total e dos botões, que são
       justamente o que o operador lê a dois metros e o que o cliente confere. Aqui o mesmo 16/18% é
       resolvido CONTRA a superfície pelo `color-mix`, então a cor final é idêntica no olho e sem canal
       alfa nenhum. ⚠️ A linha `background: var(--pdv-surface)` que precede cada uso NÃO é redundante: em
       motor sem `color-mix` a declaração seguinte é descartada e o elemento cai numa superfície SÓLIDA —
       nunca de volta na transparência. */
    --pdv-accent-solid: color-mix(in srgb, var(--pdv-accent) 16%, var(--pdv-surface));
    --pdv-danger-solid: color-mix(in srgb, var(--pdv-danger) 16%, var(--pdv-surface));
    --pdv-warn-solid: color-mix(in srgb, var(--pdv-warn) 18%, var(--pdv-surface));
    /* Os dois que faltavam para o rodapé configurável (2026-08-20): mesma receita, mesma percentagem — a
       cor do botão é PAPEL, e o operador escolhe entre papéis, nunca entre valores de cor. Um hex gravado
       pela loja ficaria ilegível num dos dois temas, sem nada acusando. */
    --pdv-ok-solid: color-mix(in srgb, var(--pdv-ok) 16%, var(--pdv-surface));
    --pdv-info-solid: color-mix(in srgb, var(--pdv-info) 16%, var(--pdv-surface));
    --pdv-state-hover-solid: color-mix(in srgb, var(--pdv-accent) 10%, var(--pdv-surface));
    --pdv-state-press-solid: color-mix(in srgb, var(--pdv-accent) 18%, var(--pdv-surface));

    /* --- Métrica ------------------------------------------------------------------------------ */
    --pdv-radius: 14px;
    --pdv-radius-sm: 10px;
    --pdv-gap: clamp(8px, 0.9vw, 14px);
    --pdv-pad: clamp(12px, 1.2vw, 20px);
    --pdv-elev: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* O terminal em si — tela cheia. ⛔ Nada disto alcança a prévia da tela de configuração. */
.pdv {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--pdv-bg);
    color: var(--pdv-text);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;

    /* Nada pode vazar da viewport: o terminal não tem barra de rolagem de página, e um elemento que
       transborda aqui simplesmente some da tela (foi o sintoma dos "ícones fora da tela"). */
    overflow: hidden;

    /* O operador nunca deve selecionar texto sem querer ao tocar na tela — num terminal touch a seleção
       acidental é ruído puro, e não há nada aqui pra copiar. */
    user-select: none;

    /* O wrapper tem tabindex pra capturar as teclas de função. O anel de foco do browser em volta da tela
       inteira seria só sujeira visual. */
    outline: none;
}

/* Ícone do MudBlazor dentro do PDV nunca encolhe nem estica: `flex: 0 0 auto` é o que impede o ícone de ser
   espremido a zero (ou empurrado pra fora do botão) quando o rótulo ao lado é maior que o espaço. Era a
   causa direta dos ícones desalinhados/cortados nos botões de ação em telas estreitas. */
.pdv .mud-icon-root,
.pdv-preview .mud-icon-root {
    flex: 0 0 auto;
}

/* Imagem de fundo configurável (/config/logotipo). `position: absolute` tira do fluxo flex do `.pdv` (senão
   viraria item de layout, disputando espaço com a topbar/colunas); `z-index: -1` garante que ela pinta ENTRE
   o background sólido do `.pdv` e o conteúdo — sem isso um elemento posicionado pintaria por cima dos irmãos
   não posicionados, mesmo vindo primeiro no DOM (regra de stacking do CSS, não de ordem de documento). A
   opacidade é FIXA em 20%, não escolha do operador — é o que garante que o fundo nunca compete com os
   campos por cima. */
.pdv-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.2;
    pointer-events: none;
}

/* =====================================================================================================
   Card — a unidade de superfície da tela. Antes cada bloco repetia fundo/borda/raio na mão.
   ===================================================================================================== */

.pdv-card {
    background: var(--pdv-surface);
    border: 1px solid var(--pdv-line);
    border-radius: var(--pdv-radius);
    box-shadow: var(--pdv-elev);
    min-height: 0;
}

/* =====================================================================================================
   Faixa de topo — superfície neutra, não mais uma barra azul-marinho chapada.
   ===================================================================================================== */

.pdv-topbar {
    display: flex;
    align-items: center;
    gap: var(--pdv-gap);
    padding: clamp(6px, 0.8vh, 12px) var(--pdv-pad);
    background: var(--pdv-surface);
    border-bottom: 1px solid var(--pdv-line);
    color: var(--pdv-text);
    flex: 0 0 auto;

    /* A faixa é uma linha só e o conteúdo dela é variável (razão social longa, nome de operador longo).
       Sem o overflow + os min-width abaixo, o excedente empurrava o badge de status e o botão de tema
       PRA FORA da tela — sem barra de rolagem, portanto sem nenhuma pista de que sumiram. */
    overflow: hidden;

    /* Âncora do logo centralizado (abaixo) — sem isto o absolute dele mediria contra o .pdv inteiro. */
    position: relative;
}

/* Logomarca no CENTRO DA FAIXA — o mesmo tratamento da barra do ERP (.sis-shell-logo): a marca do produto,
   fixa, centralizada na LARGURA DA FAIXA (não no espaço que sobra, que muda com o nome da empresa e faria o
   logo dançar entre um terminal e outro). Absoluto + pointer-events none: nunca participa do fluxo nem
   rouba clique dos chips; a altura é travada porque o arquivo é 1317×620 e a faixa tem uma linha só. */
.pdv-topbar__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* A faixa mede ~63px (chip de duas linhas + o padding vertical dela), e o logo é ABSOLUTO: crescer aqui
       não empurra nada — o limite é o `overflow: hidden` da faixa, que corta o que passar. 46px deixa ~8px
       de folga de cada lado. Era clamp(22px, 3.2vh, 34px) e o dono mediu como pequeno demais (2026-08-18);
       ⛔ não passe de 46px sem antes subir o padding da faixa, ou a marca sai cortada em cima e embaixo. */
    height: clamp(30px, 4.6vh, 46px);
    width: auto;
    pointer-events: none;
}

/* Em tela estreita os chips e os avisos ocupam a faixa inteira — o logo some antes de ser coberto,
   como o d-none d-sm-flex faz na barra do ERP. */
@media (max-width: 1100px) {
    .pdv-topbar__logo {
        display: none;
    }
}

/* Pílula de estado do caixa: tonal, com um ponto de cor. Substitui o texto gigante em caixa-alta que
   ocupava um terço da faixa. */
.pdv-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--pdv-accent-soft);
    color: var(--pdv-text);
}

.pdv-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pdv-accent);
    flex: 0 0 auto;
}

.pdv-status--selling {
    background: var(--pdv-info-soft);
}

.pdv-status--selling .pdv-status__dot {
    background: var(--pdv-info);
}

.pdv-status--blocked,
.pdv-status--closed {
    background: var(--pdv-danger-soft);
}

.pdv-status--blocked .pdv-status__dot,
.pdv-status--closed .pdv-status__dot {
    background: var(--pdv-danger);
}

/* Grupo do meio: os chips de identificação. `min-width: 0` na cadeia inteira é o que permite o ellipsis
   funcionar em vez de o texto empurrar a faixa. */
.pdv-topbar__info {
    display: flex;
    align-items: center;
    gap: var(--pdv-gap);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.pdv-topbar__end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.pdv-chip {
    border-radius: var(--pdv-radius-sm);
    padding: 5px 12px;
    line-height: 1.25;
    background: var(--pdv-surface-2);
    min-width: 0;
    flex: 0 1 auto;
}

.pdv-chip__label {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--pdv-text-dim);
}

.pdv-chip__value {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22rem;
}

/* Badge do SEFAZ: tonal + ponto, mesma linguagem da pílula de estado. */
.pdv-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
}

.pdv-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.pdv-badge--online {
    background: var(--pdv-ok-soft);
    color: var(--pdv-ok);
}

.pdv-badge--offline {
    background: var(--pdv-danger-soft);
    color: var(--pdv-danger);
}

/* Frescor do catálogo: mesma pílula, mas CLICÁVEL — na rota online do ERP é o único gesto de sincronizar
   que existe. A cor é semântica e fixa (não é alternador). */
.pdv-badge--freshness {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter 120ms ease;
}

.pdv-badge--freshness:hover:not(:disabled) {
    filter: brightness(1.08);
}

.pdv-badge--freshness:disabled {
    cursor: default;
    opacity: 0.65;
}

/* Atualizado é o estado NORMAL, e por isso é o mais discreto da faixa: pintá-lo de verde competiria com o
   badge da SEFAZ ao lado, onde verde significa outra coisa. */
.pdv-badge--freshness-ok {
    background: var(--pdv-surface-2);
    color: var(--pdv-text-dim);
}

.pdv-badge--freshness-pending {
    background: var(--pdv-info-soft);
    color: var(--pdv-info);
}

.pdv-badge--freshness-stale,
.pdv-badge--freshness-missing {
    background: var(--pdv-warn-soft);
    color: var(--pdv-warn);
}

/* Botão de ícone neutro (tema, fechar overlay). */
.pdv-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--pdv-text-dim);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    transition: background 0.12s ease, color 0.12s ease;
}

.pdv-icon-btn:hover {
    background: var(--pdv-state-hover);
    color: var(--pdv-text);
}

.pdv-icon-btn:active {
    background: var(--pdv-state-press);
}

/* =====================================================================================================
   Corpo: entrada à esquerda, cupom à direita
   ===================================================================================================== */

.pdv-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pdv-gap);
    padding: var(--pdv-gap);
    min-height: 0; /* sem isto o grid recusa encolher e o cupom nunca rola */
}

.pdv-col {
    display: flex;
    flex-direction: column;
    gap: var(--pdv-gap);
    min-height: 0;
}

/* --- Painel de entrada ------------------------------------------------------------------------ */

.pdv-entry {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--pdv-gap);
    padding: var(--pdv-pad);
    overflow: hidden;
}

.pdv-field__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pdv-text-dim);
    margin-bottom: 6px;
}

/* Campo "filled" do Material: fundo tonal, borda fina, e a barra de acento aparecendo no foco. */
.pdv-field__input {
    width: 100%;
    background: var(--pdv-surface-2);
    border: 1px solid var(--pdv-line);
    border-radius: var(--pdv-radius-sm);
    padding: 12px 16px;
    font-family: inherit;
    font-size: clamp(1.1rem, 1.4vw, 1.5rem);
    font-weight: 700;
    color: var(--pdv-text);
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pdv-field__input:focus {
    border-color: var(--pdv-accent);
    box-shadow: 0 0 0 3px var(--pdv-accent-soft);
}

.pdv-field__input:disabled {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-disabled);
}

.pdv-field__input--code {
    height: clamp(58px, 7vh, 76px);
    font-size: clamp(1.3rem, 1.9vw, 1.9rem);
    letter-spacing: 0.02em;
}

.pdv-field__input--readonly {
    text-align: right;
    background: transparent;
    border-style: dashed;
    color: var(--pdv-text);
}

.pdv-field__input--qty {
    text-align: center;
}

.pdv-entry__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pdv-gap);
}

/* Nome do produto resolvido — LABEL GRANDE, de propósito: é a descrição do item que está sendo lançado,
   a primeira coisa que operador e cliente conferem antes de confirmar (pedido do dono, 2026-08-08). Ocupa
   espaço mesmo vazio (min-height): sem isso a linha aparece e some, e o painel inteiro pula de altura a cada
   código digitado. */
.pdv-entry__product {
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: var(--pdv-radius-sm);
    background: var(--pdv-accent-soft);
    border: 1px solid var(--pdv-accent);
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--pdv-text);
    overflow: hidden;
}

.pdv-entry__product .mud-icon-root {
    flex-shrink: 0;
}

.pdv-entry__product--empty {
    background: transparent;
    border-color: var(--pdv-line);
    color: var(--pdv-text-dim);
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 400;
    font-style: italic;
}

.pdv-entry__hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--pdv-text-dim);
    font-size: 0.8rem;
}

/* Marca d'água. É o respiro da coluna esquerda — e é a primeira coisa a sumir quando a altura aperta
   (ver a media query de altura no fim do arquivo), porque é o único elemento sem função. */
.pdv-watermark {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 3.5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--pdv-text-dim);
    opacity: 0.18;
    pointer-events: none;
    min-height: 0;
    overflow: hidden;
}

/* Logotipo configurado (/config/logotipo) no lugar do texto — mesma opacidade discreta do texto padrão.

   90% e não 70% (dono, 2026-08-18): a coluna esquerda é estreita, e a 70% da largura dela a marca do cliente
   virava um selo no meio de um vazio. `max-height: 100%` continua sendo o freio real — o contêiner é
   `flex: 1 1 auto` e some inteiro abaixo de 800px de altura, então crescer aqui nunca rouba espaço dos
   campos. */
.pdv-watermark__img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
}

/* =====================================================================================================
   Cupom
   ===================================================================================================== */

.pdv-receipt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pdv-receipt__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--pdv-pad);
    border-bottom: 1px solid var(--pdv-line);
    flex: 0 0 auto;
}

.pdv-receipt__title {
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-right: auto;
}

.pdv-receipt__count {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 12px;
    background: var(--pdv-surface-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pdv-text-dim);
    white-space: nowrap;
}

.pdv-receipt__count strong {
    font-size: 1rem;
    color: var(--pdv-text);
}

.pdv-receipt__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.pdv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(0.8rem, 0.95vw, 0.92rem);
}

.pdv-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--pdv-surface);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pdv-text-dim);
    padding: 10px 12px;
    border-bottom: 2px solid var(--pdv-line);
}

.pdv-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SEM zebra, de propósito — mesma regra do SisDataGrid (o listrado saiu de lá em 2026-07-25). Com a linha de
   separação legível, zebra e separador guiam o olho pela MESMA linha, e o Material pede um dos dois, não os
   dois. O fundo uniforme é o que devolve destaque a quem carrega informação de estado: o hover e, sobretudo,
   a linha do último item lançado — que num PDV é a linha que o operador confere a cada bipada. */

.pdv-table tbody tr:hover td {
    background: var(--mud-palette-table-hover);
}

/* A última linha lançada é a que o operador confere. Destacá-la é o que dispensa procurar onde caiu o item
   que acabou de bipar — e é o que faz o scroll automático ter para onde apontar. A faixa de acento à
   esquerda é a mesma linguagem da linha selecionada do SisDataGrid (sis-theme.css). */
.pdv-table tbody tr.is-last td {
    background: var(--pdv-accent-soft);
    font-weight: 600;
}

.pdv-table tbody tr.is-last td:first-child {
    box-shadow: inset 4px 0 0 0 var(--pdv-accent);
}

.pdv-table tbody tr.is-cancelled td {
    color: var(--mud-palette-text-disabled);
    text-decoration: line-through;
}

.pdv-table .col-seq {
    width: 3rem;
    color: var(--pdv-text-dim);
}

.pdv-table .col-code {
    width: 7rem;
}

.pdv-table .col-desc {
    max-width: 0; /* deixa o ellipsis funcionar: a coluna cede o espaço que as fixas não usam */
    width: 100%;
}

.pdv-table .col-qty {
    width: 4rem;
    text-align: right;
}

.pdv-table .col-unit {
    width: 6.5rem;
    text-align: right;
}

.pdv-table .col-total {
    width: 7rem;
    text-align: right;
    font-weight: 700;
}

.pdv-table .col-actions {
    width: 3rem;
    text-align: center;
}

.pdv-receipt__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    color: var(--pdv-text-dim);
    font-size: 0.95rem;
}

/* Ajuste da LINHA, abaixo da descrição. Não é coluna própria: o cupom já tem 7 colunas num terminal de
   balcão, e a oitava espremeria a descrição — que é o que o cliente confere em voz alta. */
.pdv-receipt__adjust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* As MESMAS cores dos totais do rodapé (vermelho abate, âmbar cobra) — o operador lê o mesmo sinal nos dois
   lugares. Âmbar e não verde pelo motivo escrito em .pdv-total--surcharge. */
.pdv-receipt__adjust--discount {
    color: var(--pdv-danger);
}

.pdv-receipt__adjust--surcharge {
    color: var(--mud-palette-warning-darken);
}

/* Cliente e CPF da venda, no PÉ do card do cupom (2026-08-29). É onde o operador confere com o cliente
   antes de fechar — logo acima do total, que fica no rodapé da tela.

   ⚠️ `flex: 0 0 auto` é o que impede a faixa de ser comida pelo `.pdv-receipt__scroll`, que é o irmão
      elástico dela: sem isto ela sumiria justamente na venda com muitos itens. */
.pdv-receipt__cliente {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    flex: 0 0 auto;
    padding: 8px var(--pdv-pad);
    border-top: 1px solid var(--pdv-line);
    background: var(--pdv-surface-2);
}

.pdv-receipt__cliente-campo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.pdv-receipt__cliente-rotulo {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pdv-text-dim);
    white-space: nowrap;
}

.pdv-receipt__cliente-valor {
    font-size: clamp(0.82rem, 0.95vw, 0.95rem);
    font-weight: 600;
    color: var(--pdv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "não informado" é informação, não valor: fica esmaecido para o olho achar primeiro o que foi preenchido. */
.pdv-receipt__cliente-valor.is-vazio {
    font-weight: 500;
    font-style: italic;
    color: var(--pdv-text-dim);
}

/* Escolha entre caminhos, dentro de diálogo (identificar o comprador, o que fazer com o CPF).
   Botões GRANDES em coluna: o terminal é operado por toque e sob fila, e a escolha entre dois ou três
   caminhos se faz com o dedo — um combo ainda precisaria ser aberto antes de mostrar as opções. */
.pdv-escolha {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdv-escolha__btn {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.pdv-escolha__btn:hover,
.pdv-escolha__btn:focus-visible {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-primary);
}

.pdv-escolha__btn .mud-icon-root {
    grid-row: 1 / span 2;
    color: var(--mud-palette-primary);
}

.pdv-escolha__titulo {
    font-size: 1rem;
    font-weight: 700;
}

.pdv-escolha__desc {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

/* =====================================================================================================
   Rodapé: totais à esquerda, ações à direita
   ===================================================================================================== */

.pdv-footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pdv-gap);
    padding: 0 var(--pdv-gap) var(--pdv-gap);
}

.pdv-totals {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: var(--pdv-gap);
    min-width: 0;
}

.pdv-total {
    border-radius: var(--pdv-radius);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.pdv-total__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pdv-text-dim);
    white-space: nowrap;
}

.pdv-total__value {
    font-size: clamp(1.1rem, 1.7vw, 1.6rem);
    font-weight: 800;
    white-space: nowrap;
}

.pdv-total--discount {
    background: var(--pdv-surface);
    background: var(--pdv-danger-solid);
}

.pdv-total--discount .pdv-total__value {
    color: var(--pdv-danger);
}

/* Acréscimo em âmbar, não em verde: com a primária do sis sendo verde, um acréscimo verde ficaria com a
   mesma cor do botão que FECHA a venda — duas coisas diferentes com o mesmo sinal. */
.pdv-total--surcharge {
    background: var(--pdv-surface);
    background: var(--pdv-warn-solid);
}

.pdv-total--surcharge .pdv-total__value {
    color: var(--mud-palette-warning-darken);
}

/* O total é o número que o cliente confere. Container tonal da primária (não bloco chapado) com o valor no
   texto de alto contraste: destaca sem competir com o ÚNICO botão sólido da tela, que é o de fechar. */
.pdv-total--grand {
    background: var(--pdv-surface);
    background: var(--pdv-accent-solid);
    align-items: flex-end;
    padding: 10px 22px;
    box-shadow: inset 4px 0 0 0 var(--pdv-accent);
}

.pdv-total--grand .pdv-total__label {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    color: var(--pdv-text-dim);
}

.pdv-total--grand .pdv-total__value {
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.05;
    color: var(--pdv-text);
}

/* --- Grade de ações --------------------------------------------------------------------------- */

.pdv-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

/* Botão TONAL é o default (Material: ênfase média) — superfície neutra com borda fina. Só o que confirma
   a venda é sólido. Antes TODOS eram azuis sólidos, o que deixava a tela sem hierarquia nenhuma: oito
   botões gritando igual. */
.pdv-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--pdv-line);
    border-radius: var(--pdv-radius-sm);
    background: var(--pdv-surface);
    color: var(--pdv-text);
    font-family: inherit;
    font-size: clamp(0.6rem, 0.72vw, 0.74rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    padding: 8px 4px;
    min-height: clamp(52px, 6.5vh, 66px);
    min-width: 0;

    /* O botão é pequeno e o rótulo é variável ("PRODUTOS (F8)"): sem overflow: hidden o texto vaza pra fora
       da borda e, na última coluna, pra fora da tela. */
    overflow: hidden;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.pdv-action .mud-icon-root {
    color: var(--pdv-text-dim);
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
}

.pdv-action:hover:not(:disabled) {
    background: var(--pdv-surface);
    background: var(--pdv-state-hover-solid);
    border-color: var(--pdv-accent);
}

.pdv-action:active:not(:disabled) {
    background: var(--pdv-surface);
    background: var(--pdv-state-press-solid);
    transform: translateY(1px);
}

/* Desabilitado SEM `opacity`: opacidade deixaria a marca d'água atravessar o botão. O rebaixamento é
   feito com cores opacas — superfície neutra do tema e texto/ícone secundários. */
.pdv-action:disabled {
    background: var(--mud-palette-action-disabled-background);
    border-color: var(--pdv-line);
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

.pdv-action:disabled .mud-icon-root {
    color: var(--mud-palette-text-disabled);
}

/* O único botão sólido da tela: é o que encerra a venda, e precisa ser encontrável sem leitura — é o alvo
   mais usado do turno. */
.pdv-action--confirm {
    background: var(--pdv-accent);
    border-color: var(--pdv-accent);
    color: var(--pdv-accent-text);
}

.pdv-action--confirm .mud-icon-root {
    color: var(--pdv-accent-text);
}

.pdv-action--confirm:hover:not(:disabled) {
    background: var(--mud-palette-primary-darken);
    border-color: var(--mud-palette-primary-darken);
}

/* Ação que altera o valor da venda (desconto): tonal âmbar, pra não se confundir com as neutras. */
.pdv-action--accent {
    background: var(--pdv-surface);
    background: var(--pdv-warn-solid);
    border-color: transparent;
}

.pdv-action--accent .mud-icon-root {
    color: var(--mud-palette-warning-darken);
}

/* Tonal VERDE: confirma sem encerrar. */
.pdv-action--sucesso {
    background: var(--pdv-surface);
    background: var(--pdv-ok-solid);
    border-color: transparent;
}

.pdv-action--sucesso .mud-icon-root {
    color: var(--mud-palette-success-darken);
}

/* Tonal VERMELHO: desfaz ou descarta (cancelar venda, devolução). */
.pdv-action--perigo {
    background: var(--pdv-surface);
    background: var(--pdv-danger-solid);
    border-color: transparent;
}

.pdv-action--perigo .mud-icon-root {
    color: var(--mud-palette-error-darken);
}

/* Tonal AZUL: consulta, não muda nada. */
.pdv-action--info {
    background: var(--pdv-surface);
    background: var(--pdv-info-solid);
    border-color: transparent;
}

.pdv-action--info .mud-icon-root {
    color: var(--mud-palette-info-darken);
}

/* Posição VAZIA do rodapé: ocupa a célula da grade e não desenha nada. Sem ela, remover um botão faria os
   seguintes ANDAREM de lugar — e o rodapé é justamente o que o operador decora por posição. */
.pdv-action-slot {
    min-height: clamp(52px, 6.5vh, 66px);
    min-width: 0;
}

/* =====================================================================================================
   Overlay (fechamento e funções entram por cima da venda, preservando o estado dela)
   ===================================================================================================== */

.pdv-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: var(--pdv-bg);
    overflow: hidden;
}

/* Barra de título comum aos dois overlays (fechamento e opções). Superfície neutra + borda, igual à faixa
   de topo — as três barras da tela passam a ser a mesma coisa em vez de três azuis diferentes. */
.pdv-overlay__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(8px, 1vh, 14px) var(--pdv-pad);
    background: var(--pdv-surface);
    border-bottom: 1px solid var(--pdv-line);
    flex: 0 0 auto;
    overflow: hidden;
}

.pdv-overlay__bar .mud-icon-root {
    color: var(--pdv-accent);
}

.pdv-overlay__title {
    font-size: clamp(1rem, 1.3vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* =====================================================================================================
   Fechamento
   ===================================================================================================== */

.pdv-checkout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pdv-gap);
    padding: var(--pdv-gap);
    min-height: 0;
}

.pdv-checkout__left {
    display: flex;
    flex-direction: column;
    gap: var(--pdv-gap);
    min-height: 0;
}

.pdv-tender {
    padding: var(--pdv-pad);
    flex: 0 0 auto;
}

.pdv-tender__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pdv-text-dim);
    margin-bottom: 4px;
}

.pdv-tender__input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--pdv-line);
    padding: 4px 2px;
    font-family: inherit;
    font-size: clamp(2rem, 3.4vw, 3.2rem);
    font-weight: 800;
    color: var(--pdv-text);
    outline: none;
    transition: border-color 0.12s ease;
}

.pdv-tender__input:focus {
    border-bottom-color: var(--pdv-accent);
}

.pdv-tender__input::selection {
    background: var(--pdv-accent-soft);
}

.pdv-tender__hint {
    display: block;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--pdv-text-dim);
}

.pdv-methods {
    padding: var(--pdv-pad);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.pdv-methods__title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pdv-text-dim);
    text-transform: uppercase;
    margin: 0 0 14px;
}

.pdv-methods__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.pdv-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: clamp(96px, 13vh, 128px);
    padding: 14px 10px;
    background: var(--pdv-surface);
    border: 1px solid var(--pdv-line);
    border-radius: var(--pdv-radius);
    color: var(--pdv-text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.pdv-method:hover:not(:disabled) {
    background: var(--pdv-state-hover);
    border-color: var(--pdv-accent);
}

.pdv-method:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Forma ARMADA (2026-08-29) ------------------------------------------------------------------
   O clique na forma passou a SELECIONAR em vez de lançar (padronização do fechamento), e sem marca
   visual o operador não teria como saber em que forma o botão LANÇAR vai jogar o dinheiro.

   🔑 Faixa de acento + fundo tonal, o idioma do card de estado do resto do sis — ⛔ não fundo chapado
   saturado, que reprova contraste e some com o ícone. A cor entra por variável do tema do PDV. */
.pdv-method--selected {
    border-color: var(--pdv-accent);
    box-shadow: inset 0 0 0 2px var(--pdv-accent);
    background: var(--pdv-state-hover);
}

/* --- Distintivo de tecla dos cards (2026-08-20) -------------------------------------------------
   Todo card do PDV passou a ter atalho, e a tecla vem ESCRITA nele. ⛔ A numeração é FIXA (não se
   configura, ao contrário do rodapé da venda) e por POSIÇÃO — ver PdvAtalhos.DoCard.

   `position: absolute` sobre um card `position: relative`: o distintivo não pode entrar no fluxo do
   flex-column, senão empurra ícone e rótulo e muda a altura de todos os cards da grade. */
.pdv-fn-card,
.pdv-method {
    position: relative;
}

.pdv-fn-card__key,
.pdv-method__key {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 1px 6px;
    border: 1px solid var(--pdv-line);
    border-radius: 6px;
    background: var(--pdv-state-hover-solid);
    color: var(--pdv-text-dim);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;

    /* O distintivo é referência, não alvo: um clique nele tem de valer como clique no card. */
    pointer-events: none;
}


/* Ícone dentro de um círculo tonal — o "avatar" de card do Material. */
.pdv-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pdv-accent-soft);
    flex: 0 0 auto;
}

.pdv-method__icon .mud-icon-root {
    color: var(--pdv-accent);
}

/* --- Resumo financeiro ------------------------------------------------------------------------ */

.pdv-summary {
    padding: var(--pdv-pad);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pdv-summary__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex: 0 0 auto;
}

.pdv-summary__head .mud-icon-root {
    color: var(--pdv-accent);
}

.pdv-summary__title {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.pdv-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: var(--pdv-radius-sm);
    padding: 12px 18px;
    margin-bottom: 10px;
    flex: 0 0 auto;
    overflow: hidden;
}

.pdv-summary__row--total {
    background: var(--pdv-surface-2);
}

.pdv-summary__row--change {
    background: var(--pdv-ok-soft);
}

.pdv-summary__row--change .pdv-summary__row-value {
    color: var(--pdv-ok);
}

.pdv-summary__row--remaining {
    background: var(--pdv-danger-soft);
}

.pdv-summary__row--remaining .pdv-summary__row-value {
    color: var(--pdv-danger);
}

.pdv-summary__row-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pdv-text-dim);
    white-space: nowrap;
}

.pdv-summary__row-value {
    font-size: clamp(1.2rem, 1.8vw, 1.7rem);
    font-weight: 800;
    white-space: nowrap;
}

.pdv-summary__caption {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pdv-text-dim);
    margin-bottom: 6px;
    flex: 0 0 auto;
}

/* O que está sendo pago — sem isto o fechamento vira um número sem contexto (o cupom fica por baixo do
   overlay, e nem operador nem cliente conferem os itens sem sair da tela). Altura TETO, não flex: a lista de
   pagamentos é o que precisa do espaço flexível — os itens têm prioridade menor e rolam por conta própria. */
.pdv-summary__items {
    flex: 0 1 auto;
    max-height: 30%;
    overflow-y: auto;
    min-height: 0;
    margin-bottom: 10px;
}

.pdv-checkout-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 2px;
    font-size: 0.85rem;
    color: var(--pdv-text-dim);
}

.pdv-checkout-item__qty {
    flex: 0 0 auto;
    font-weight: 700;
}

.pdv-checkout-item__desc {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pdv-text);
}

.pdv-checkout-item__total {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--pdv-text);
}

.pdv-summary__payments {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    margin-bottom: 14px;
}

.pdv-payment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.pdv-payment__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdv-payment__amount {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.pdv-summary__foot {
    flex: 0 0 auto;
}

.pdv-summary__final {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pdv-summary__final-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pdv-text-dim);
}

.pdv-summary__final-value {
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    font-weight: 800;
    white-space: nowrap;
}

/* --- LANÇAR PAGAMENTO (2026-08-29) --------------------------------------------------------------
   O botão que confirma o lançamento na forma armada. É TONAL, ⛔ nunca sólido: o único sólido desta
   tela é FINALIZAR VENDA, e dois sólidos concorrentes fariam o operador encerrar a venda quando
   queria lançar mais uma forma — com o cliente esperando. */
.pdv-launch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--pdv-accent);
    border-radius: var(--pdv-radius-sm);
    background: var(--pdv-state-hover);
    color: var(--pdv-accent);
    font-family: inherit;
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 14px;
    cursor: pointer;
    transition: background 0.12s ease, opacity 0.12s ease;
}

.pdv-launch .mud-icon-root {
    color: currentColor;
}

.pdv-launch:hover:not(:disabled) {
    background: var(--pdv-accent);
    color: var(--pdv-accent-text);
}

.pdv-launch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pdv-finalize {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: none;
    border-radius: var(--pdv-radius-sm);
    background: var(--pdv-accent);
    color: var(--pdv-accent-text);
    font-family: inherit;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 16px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.pdv-finalize .mud-icon-root {
    color: currentColor;
}

.pdv-finalize:hover:not(:disabled) {
    background: var(--mud-palette-primary-darken);
}

.pdv-finalize:disabled {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-action-disabled);
    cursor: not-allowed;
}

/* VOLTAR do fechamento — TONAL, a mesma linguagem dos sete botões não-sólidos do rodapé da venda.

   Era um link apagado (`.pdv-cancel`: texto esmaecido sobre transparente) e o dono mediu que ele não parecia
   clicável num terminal de toque: quem não tem teclado ficava sem caminho de volta visível, porque o ESC do
   rótulo não existe ali. Tonal resolve os dois lados — é achável sem leitura e continua PERDENDO para o
   `.pdv-finalize`, que é o único sólido da tela e precisa continuar sendo o alvo óbvio.

   ⛔ Cor de erro aqui seria pior que o link: voltar não desfaz nada (a venda e os pagamentos ficam), e pintar
   de vermelho o botão que só fecha o overlay ensina o operador a ter medo do caminho de volta. */
.pdv-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--pdv-line);
    background: var(--pdv-surface);
    color: var(--pdv-text);
    font-family: inherit;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 14px;
    border-radius: var(--pdv-radius-sm);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.pdv-back .mud-icon-root {
    color: currentColor;
}

.pdv-back:hover:not(:disabled) {
    /* Os MESMOS dois passos do `.pdv-action`: superfície sólida primeiro, tingimento por `color-mix`
       depois — em motor sem `color-mix` a segunda linha é descartada e o botão cai numa cor opaca, nunca
       de volta na transparência. */
    background: var(--pdv-surface);
    background: var(--pdv-state-hover-solid);
    border-color: var(--pdv-accent);
}

.pdv-back:disabled {
    color: var(--mud-palette-action-disabled);
    cursor: not-allowed;
}

/* =====================================================================================================
   Funções (menu de opções / configuração do terminal)
   ===================================================================================================== */

.pdv-fn__body {
    flex: 1 1 auto;
    padding: var(--pdv-pad);
    overflow-y: auto;
    min-height: 0;
}

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

.pdv-fn-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: clamp(140px, 20vh, 178px);
    padding: 18px 14px;
    background: var(--pdv-surface);
    border: 1px solid var(--pdv-line);
    border-radius: var(--pdv-radius);
    box-shadow: var(--pdv-elev);
    color: var(--pdv-text);
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.pdv-fn-card:hover:not(:disabled),
.pdv-fn-card.is-focused:not(:disabled) {
    background: var(--pdv-state-hover);
    border-color: var(--pdv-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.pdv-fn-card:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pdv-fn-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--pdv-accent-soft);
    margin-bottom: 6px;
    flex: 0 0 auto;
}

.pdv-fn-card__icon .mud-icon-root {
    color: var(--pdv-accent);
}

.pdv-fn-card__title {
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    font-weight: 700;
}

.pdv-fn-card__desc {
    font-size: 0.8rem;
    color: var(--pdv-text-dim);
}

.pdv-fn-card__reason {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pdv-danger);
}

.pdv-fn__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--pdv-line);
    color: var(--pdv-text-dim);
    font-size: 0.82rem;
    flex: 0 0 auto;
}

/* =====================================================================================================
   Adaptação a telas pequenas.

   O PDV é desenhado pra 1366×768+, mas roda em terminal antigo. As regras abaixo existem pra que NADA saia
   da tela nesses casos — a queixa original era literalmente "ícones fora da tela".

   ⚠️ **A ESTRUTURA é a última coisa a ceder, não a primeira.** Ordem de sacrifício: chips de identificação
   (informação de conferência, não de operação) → marca d'água → densidade das ações → e só abaixo de 900px o
   layout de duas colunas. Corrigido em 2026-07-25, depois de duas conferências em captura de 1024×768: a
   versão anterior empilhava cedo demais e (a) RECORTAVA o painel de entrada — trocando "sai da tela" por "é
   cortado", igualmente ruim pra quem confere o preço — e (b) mudava o menu de ações de lugar entre um
   terminal e outro, que é o que o operador decora. Ver o comentário do bloco de 1180px.
   ===================================================================================================== */

@media (max-width: 1400px) {
    .pdv-chip--version {
        display: none;
    }
}

/* Até 900px NADA de estrutura muda: corpo em duas colunas (entrada | cupom) e rodapé em duas colunas
   (totais | menu de ações). O que cede primeiro é só informação de conferência — os chips.

   As duas razões, e as duas foram medidas em captura de 1024×768:

   1. **O menu não pode mudar de lugar.** O operador decora a posição do botão, não o rótulo: FECHAR (F9) tem
      de estar no mesmo quadrante — inferior direito — em qualquer terminal da loja. Empilhar o rodapé em
      telas menores jogava o menu pra faixa de baixo e mudava a posição de TODOS os oito botões. (Decisão do
      dono, 2026-07-25.)
   2. **Num PDV o recurso escasso é a ALTURA, não a largura.** 1024×768 tem largura de sobra pra duas colunas
      de ~500px; vertical é que não sobra. Empilhar troca o recurso abundante pelo escasso: somava as alturas
      dos dois painéis, o `overflow: hidden` do card recortava a linha QUANTIDADE / VALOR UNITÁRIO / TOTAL
      ITEM (os números que o operador confere antes de confirmar) e o cupom perdia metade das linhas visíveis. */
@media (max-width: 1180px) {
    .pdv-chip--company {
        display: none;
    }

    /* Só o fechamento empilha aqui: ele é duas colunas de CONTEÚDO (formas de pagamento | resumo), e os
       cartões de forma de pagamento têm largura mínima própria (150px) que não cabe em meia tela. */
    .pdv-checkout {
        grid-template-columns: minmax(0, 1fr);

        /* 🩸 EMPILHADO, A SOMA DAS DUAS LINHAS PASSA DA ALTURA DA TELA — e sem rolagem o rodapé do resumo
           (FINALIZAR VENDA e VOLTAR) fica FORA da tela. Medido em captura de 1024×768, que é a resolução do
           terminal antigo que este bloco existe para atender: o operador via "FALTA RECEBER" e não tinha
           como concluir nem como voltar. Num terminal de TOQUE isso não tem saída — não há teclado para o F6
           nem para o ESC, e o "x" do cabeçalho é o único gesto que sobrava.

           `align-content: start` junto: sem ele o grid distribui o espaço que sobra entre as linhas e a
           rolagem nasce com um vão entre os dois cards. */
        overflow-y: auto;
        align-content: start;
    }

    /* Empilhados, os dois cards param de disputar altura: cada um mede o próprio conteúdo e quem rola é o
       contêiner acima. Sem isto o `min-height: 0` de duas colunas continua valendo e o resumo é ESPREMIDO —
       a lista de pagamentos some antes do rodapé aparecer. */
    .pdv-checkout__left,
    .pdv-checkout > .pdv-summary {
        min-height: auto;
    }
}

/* Abaixo de 900px a largura passa a ser o recurso escasso de verdade (meia coluna daria ~440px pro cupom, que
   tem sete colunas): aí sim tudo empilha, e o menu vai pra faixa de baixo em 2×4. É o único ponto em que a
   posição do menu muda — e é uma tela em que o layout de duas colunas simplesmente não existe. */
@media (max-width: 900px) {
    .pdv-chip--operator,
    .pdv-chip--terminal {
        display: none;
    }

    .pdv-body,
    .pdv-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .pdv-totals {
        grid-template-columns: 1fr 1fr;
    }

    .pdv-total--grand {
        grid-column: 1 / -1;
    }

    .pdv-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }
}

/* Altura curta (terminal 1024×768, ou janela restaurada): some o que é só respiro e comprime o resto. */
@media (max-height: 800px) {
    .pdv-watermark {
        display: none;
    }

    .pdv-total--grand .pdv-total__value {
        font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    }

    .pdv-action {
        min-height: 46px;
    }
}

/* =====================================================================================================
   Diálogo "Produtos (F8)" — PdvProductSearchDialog.

   Renderiza dentro do MudDialogProvider, que é IRMÃO do `.pdv` na árvore de DOM (os dois são filhos diretos
   do SisThemeProvider de PdvRouteLayout — ver o remarks de lá). As custom properties --pdv-* só existem
   dentro de `.pdv`, então nada aqui pode depender delas — variável de propriedade CSS herda pela árvore do
   DOM, não por nome de classe. Usa --mud-palette-* direto, que o MudThemeProvider publica globalmente.
   ===================================================================================================== */
.pdv-product-search-list {
    max-height: 55vh;
    overflow-y: auto;
}

.pdv-dialog-text-dim {
    color: var(--mud-palette-text-secondary);
}

.pdv-dialog-empty {
    display: flex;
    justify-content: center;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* Toggle Desconto/Acréscimo do AdjustmentDialog — botão HTML puro (não MudButton), pelo mesmo motivo dos
   outros elementos desta seção: mora fora de `.pdv`, então usa --mud-palette-* direto. */
.pdv-adjustment-mode {
    display: flex;
    gap: 8px;
}

.pdv-adjustment-mode__btn {
    flex: 1;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.pdv-adjustment-mode__btn.is-active {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}