/* =====================================================================================================
   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.
   ===================================================================================================== */

.pdv {
    /* --- 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);

    /* --- 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);

    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 {
    flex: 0 0 auto;
}

/* =====================================================================================================
   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;
}

/* 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);
}

/* 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. 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: 2.75rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: var(--pdv-radius-sm);
    background: var(--pdv-accent-soft);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    font-weight: 600;
    color: var(--pdv-text);
    overflow: hidden;
}

.pdv-entry__product--empty {
    background: transparent;
    color: var(--pdv-text-dim);
    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;
}

/* =====================================================================================================
   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;
}

/* =====================================================================================================
   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-danger-soft);
}

.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-warn-soft);
}

.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-accent-soft);
    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-state-hover);
    border-color: var(--pdv-accent);
}

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

.pdv-action:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

/* 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-warn-soft);
    border-color: transparent;
}

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

/* =====================================================================================================
   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;
}

/* Í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;
}

.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;
}

.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;
}

.pdv-cancel {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: none;
    background: transparent;
    color: var(--pdv-text-dim);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 10px;
    border-radius: var(--pdv-radius-sm);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

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

/* =====================================================================================================
   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);
    }
}

/* 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);
}