/**
 * VIS-1 — personalização visual ReleasePOS (zero core).
 * Injetado em todas as páginas pelo listener de RenderHeaderEvent do
 * módulo (layout._header-injection, presente no layout.base e no
 * layout.dashboard).
 *
 * As cores do tema são tokens do Tailwind v4 (@theme → variáveis em
 * :root, dentro de `@layer theme`) — resources/css/light/_colors.css e
 * dark/_colors.css. Uma regra FORA de camada vence a camada sem
 * !important, mesmo carregando antes do CSS do tema.
 */

/**
 * VIS-4 (10/10/2026, aprovado pelo Gustavo no estudo de interface) — o
 * tema claro da Release: fundo lilás-acinzentado, cartões brancos, texto
 * quase-preto puxado para o roxo e o roxo da marca como cor de ação.
 * Só no tema CLARO (o que a loja usa): o escuro segue o do core com a
 * barra roxa da VIS-1, mais abaixo. `html.light` é o POS
 * (dashboard-blank põe o tema como classe, sem data-theme).
 * Contraste conferido no branco: texto 15,8:1, texto suave 5,9:1,
 * branco sobre o roxo 13,4:1.
 */
:root[data-theme="light"],
html.light {
    --color-typography: #24142A;
    --color-fontcolor: #2F2235;
    --color-fontcolor-soft: #6E6274;
    --color-fontcolor-hard: #4E4253;

    --color-surface: #F6F4F7;
    --color-surface-soft: #EFEBF0;
    --color-surface-hard: #FFFFFF;
    --color-popup-surface: #FFFFFF;

    --color-box-background: #FFFFFF;
    --color-box-edge: #ECE7EE;
    --color-box-elevation-background: #FBFAFC;
    --color-box-elevation-edge: #ECE7EE;
    --color-box-elevation-hover: #F1E4F3;

    --color-input-background: #FBFAFC;
    --color-input-edge: #D9D1DC;
    --color-input-disabled: #CFC6D2;
    --color-input-button: #F6F4F7;
    --color-input-button-hover: #F1E4F3;
    --color-input-button-active: #E3CDE6;
    --color-input-option-hover: #6E6274;
    --color-option-hover: #6E6274;

    --color-crud-button-edge: #ECE7EE;
    --color-crud-input-background: #FBFAFC;
    --color-pos-button-edge: #ECE7EE;

    --color-table-th: #FBFAFC;
    --color-table-th-edge: #ECE7EE;
    --color-tab-table-th: #FBFAFC;
    --color-tab-table-th-edge: #ECE7EE;
    --color-tab-active: #FFFFFF;
    --color-tab-active-border: #ECE7EE;
    --color-tab-inactive: #EFEBF0;

    --color-floating-menu: #FFFFFF;
    --color-floating-menu-hover: #F6F4F7;
    --color-floating-menu-selected: #F1E4F3;
    --color-floating-menu-edge: #ECE7EE;

    --color-numpad-background: #EFEBF0;
    --color-numpad-typography: #24142A;
    --color-numpad-edge: #ECE7EE;
    --color-numpad-hover: #F1E4F3;
    --color-numpad-hover-edge: #E3CDE6;

    --color-scroll-thumb: #CFC6D2;
    --color-scroll-track: #F6F4F7;
    --color-scroll-popup-thumb: #CFC6D2;

    /* a marca: ação principal, hover e o tom mais fundo */
    --color-primary: #490D4D;
    --color-secondary: #5E1663;
    --color-tertiary: #3A0A3E;

    /* estados: -primary = fundo claro, -secondary = médio, -tertiary = sólido com texto branco */
    --color-success-primary: #E3F4EA;
    --color-success-secondary: #2E9A63;
    --color-success-tertiary: #1F7A4D;
    --color-error-primary: #FBE6E8;
    --color-error-secondary: #B42335;
    --color-error-tertiary: #8E1A29;
    --color-warning-primary: #FBF0DA;
    --color-warning-secondary: #C98A1A;
    --color-warning-tertiary: #8A5800;
    --color-info-primary: #E6EEFA;
    --color-info-secondary: #2D5DA8;
    --color-info-tertiary: #224A87;
    --color-default-primary: #F1EDF2;
    --color-default-secondary: #E3DCE6;
    --color-default-tertiary: #CFC6D2;

    /* barra lateral clara (a roxa da VIS-1 ficou para o tema escuro) */
    --color-aside-background: #FFFFFF;
    --color-aside-color: #3B2E40;
    --color-aside-menu-background: #FFFFFF;
    --color-aside-menu-background-hover: #F6F4F7;
    --color-aside-submenu-background: #FFFFFF;
    --color-aside-submenu-background-hover: #F6F4F7;

    /* cantos: cartão 14 px, campo 10 px (o core usava 8 e 6) */
    --radius-lg: .875rem;
    --radius-md: .625rem;
}

/**
 * VIS-4 — a barra lateral clara. Os itens viram pílulas (sem a borda
 * esquerda de 8 px do core) e o ativo é lilás com texto roxo. Os ids no
 * seletor vencem os aninhados do tema (#dashboard-aside > div … = 1,2,0)
 * em qualquer ordem de carga.
 */
:root[data-theme="light"] #dashboard-aside > div {
    border-right: 1px solid var(--color-box-edge);
}

:root[data-theme="light"] #sign-in-box img {
    /* VIS-4b: o logo do login é BRANCO com fundo transparente — no fundo
       claro do tema ele sumia. Ganha o bloco roxo da marca, como na barra. */
    background-color: #490D4D;
    padding: .875rem;
    border-radius: 1.25rem;
}

:root[data-theme="light"] #dashboard-aside .logo img {
    width: auto;
    max-width: 88%;
    max-height: 4.5rem;
    border-radius: .875rem;
}

:root[data-theme="light"] #dashboard-aside > div ul#aside-menu .ns-aside-menu {
    border-left-width: 0;
    border-radius: .625rem;
    margin: 1px 0 1px .625rem;
    padding: .5rem .75rem;
    font-weight: 500;
}

:root[data-theme="light"] #dashboard-aside > div ul#aside-menu .ns-aside-menu.toggled {
    background-color: #F1E4F3;
    color: #490D4D;
    font-weight: 600;
}

:root[data-theme="light"] #dashboard-aside > div ul#aside-menu .ns-aside-submenu {
    margin-left: 1.75rem;
    padding: .375rem .75rem;
    border-left: 1px solid var(--color-box-edge);
    border-radius: 0 .5rem .5rem 0;
    background-color: transparent;
}

:root[data-theme="light"] #dashboard-aside > div ul#aside-menu .ns-aside-submenu.normal {
    color: #4E4253;
}

:root[data-theme="light"] #dashboard-aside > div ul#aside-menu .ns-aside-submenu.active {
    color: #490D4D;
    border-left: 2px solid #490D4D;
}

:root[data-theme="light"] #dashboard-aside > div ul#aside-menu .ns-aside-submenu:hover {
    background-color: #F6F4F7;
}

/**
 * VIS-4 — botões: o "default" do core pintava com --color-secondary
 * (agora roxo sólido); no tema da Release ele é o botão lilás (ação
 * secundária), e todo botão ganha o canto de 10 px.
 */
:root[data-theme="light"] .ns-button button,
:root[data-theme="light"] .ns-button a {
    border-radius: .625rem;
}

:root[data-theme="light"] .ns-button.default button,
:root[data-theme="light"] .ns-button.default a,
:root[data-theme="light"] .ns-button.hover-default:hover button,
:root[data-theme="light"] .ns-button.hover-default:hover a {
    background-color: #F1E4F3;
    color: #490D4D;
}

/**
 * VIS-4 — os cartões-resumo do painel do core (Pedidos incompletos,
 * Despesas, Receita) vêm com degradê verde/azul/violeta fixo no
 * componente (bg-gradient-to-br from-*). No tema da Release são cartões
 * brancos como os do resto; o .card-widget h1… { text-white } do core
 * (0,1,1) perde para o seletor abaixo.
 */
:root[data-theme="light"] .card-widget {
    background-image: none;
    background-color: var(--color-box-background);
    border: 1px solid var(--color-box-edge);
    box-shadow: none;
    color: var(--color-fontcolor);
}

:root[data-theme="light"] .card-widget :is(h1, h2, h3, h4, h5, h6, i) {
    color: var(--color-fontcolor);
}

:root[data-theme="light"] .card-widget h6 {
    color: var(--color-fontcolor-soft);
    font-weight: 500;
}

:root[data-theme="light"] .card-widget h3 {
    font-weight: 500;
}

/* a lista de pedidos recentes: a borda verde-escura entre linhas vira a borda dos cartões */
:root[data-theme="light"] #ns-orders-summary .paid-order,
:root[data-theme="light"] #ns-orders-summary .single-order,
:root[data-theme="light"] #ns-orders-summary .other-order {
    border-color: var(--color-box-edge);
}

/**
 * VIS-4c — links de tabela (nº do pedido, protocolo, peça) na cor da
 * marca: sublinhado ao passar o mouse diz que é clicável. Os botões e
 * links das telas do módulo usavam --color-info-primary, que é o tom
 * CLARO da família (fundo de aviso) — azul-claro com texto branco.
 */
a.text-primary:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/**
 * NAV-2 — a loja na barra superior (Release::cabecalho). <details>
 * nativo: abre sem JS e fecha ao trocar de página.
 */
.release-loja {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .875rem;
    border-radius: 9999px;
    border: 1px solid var(--color-box-edge);
    background-color: var(--color-box-background);
    color: var(--color-fontcolor);
    white-space: nowrap;
}

details.release-loja > summary {
    display: flex;
    align-items: center;
    gap: .375rem;
    list-style: none;
    cursor: pointer;
}

details.release-loja > summary::-webkit-details-marker {
    display: none;
}

span.release-loja i,
details.release-loja > summary i {
    margin-right: .25rem;
}

details.release-loja > ul {
    position: absolute;
    top: calc(100% + .375rem);
    right: 0;
    z-index: 30;
    min-width: 100%;
    padding: .25rem;
    border-radius: .75rem;
    border: 1px solid var(--color-box-edge);
    background-color: var(--color-popup-surface);
    box-shadow: 0 8px 24px rgba(36, 20, 42, .12);
}

details.release-loja > ul a {
    display: block;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: var(--color-fontcolor);
}

details.release-loja > ul a:hover {
    background-color: var(--color-floating-menu-hover);
}

details.release-loja > ul a[aria-current] {
    background-color: var(--color-floating-menu-selected);
    font-weight: 600;
}

/**
 * VIS-1 — no tema ESCURO a barra continua roxa. :root[data-theme]
 * (0,2,0) vence o :root do @theme (0,1,0) sem !important.
 */
:root[data-theme="dark"] {
    --color-aside-background: #490D4D;
    --color-aside-color: #ffffff;
    --color-aside-menu-background: #490D4D;
    --color-aside-menu-background-hover: #5e1663; /* mesma matiz, +8% de luz — branco 9,8:1 (AA) */
    --color-aside-submenu-background: #3a0a3e;    /* mesma matiz, mais escura que o fundo */
    --color-aside-submenu-background-hover: #5e1663;
}

/**
 * O item ATIVO (.toggled) e a borda dos submenus usam --color-secondary
 * (teal no escuro), que pinta botões no app inteiro — override escopado
 * ao aside. Branco sobre #641969: 11,1:1 (AA).
 */
:root[data-theme="dark"] #dashboard-aside > div ul#aside-menu .ns-aside-menu.toggled {
    background-color: #641969;
    border-color: #d9a0de;
}

:root[data-theme="dark"] #dashboard-aside > div ul#aside-menu .ns-aside-submenu {
    border-color: #d9a0de;
}

/**
 * NAV-1 — os títulos de seção do menu (Operação, Acervo, Gestão) são
 * itens sem link (identifier release-secao-*; o core põe id="menu-…" no
 * <li>) pintados como rótulo. pointer-events: um clique num item sem
 * href fecharia o grupo aberto (ns-menu.toggleEmit).
 */
:root[data-theme] #dashboard-aside #aside-menu li[id^="menu-release-secao-"] > a.ns-aside-menu {
    pointer-events: none;
    background: transparent;
    border-left-color: transparent;
    padding-top: 1rem;
    padding-bottom: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .75;
}

:root[data-theme="light"] #dashboard-aside #aside-menu li[id^="menu-release-secao-"] > a.ns-aside-menu {
    color: #75697A;
    opacity: 1;
}

:root[data-theme] #dashboard-aside #aside-menu li[id^="menu-release-secao-"] > a.ns-aside-menu i {
    display: none;
}

/**
 * Logo quadrado no login: o blade do sign-in renderiza o logo custom SEM
 * classe de tamanho (<img src="{{ ns_store_square_logo }}">) — um PNG de
 * 1080×1080 sairia em tamanho natural. Teto do mesmo tamanho do SVG
 * padrão (w-32 = 8rem).
 */
#sign-in-box img {
    max-width: 8rem;
    height: auto;
}

/**
 * LOG-1 (pedido de 09/10/2026) — login em tela BAIXA (notebook, zoom
 * 100%): o core centra o bloco na vertical (items-center) e, quando ele
 * não cabe, o topo some e o "Entrar" fica fora da tela, sem rolagem que
 * alcance. Em tela baixa o bloco encosta no topo, a página rola e o logo
 * encolhe. !important porque este CSS entra ANTES do Tailwind do core.
 */
@media (max-height: 700px) {
    #page-container {
        align-items: flex-start !important;
        padding-top: 0.75rem;
    }

    #sign-in-box img {
        max-width: 5rem;
    }

    #sign-in-box > .py-6 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/**
 * FIN-2 — o risco do lançamento de crédito EXPIRADO no acervo do
 * fornecedor. O Tailwind do core é compilado só sobre os arquivos do
 * CORE: classe que o core nunca usou (line-through) não existe no CSS
 * do build, mesmo válida — visto na tela (classe no td, decoração
 * none). O módulo a define aqui, servida em toda página pela VIS-1.
 */
.line-through {
    text-decoration-line: line-through;
}

/* SEL-1 — linha selecionada fixada no topo da grade de peças (fixar-selecionadas.js) */
tr.release-fixada td {
    background-color: rgba(73, 13, 77, 0.10);
}

/**
 * MEL-1 — o número da etiqueta na linha do carrinho do POS (injetado
 * pelo pos-sku.js). Cor herdada de propósito: o POS tem tema claro e
 * escuro, e um valor fixo aqui sumiria em um dos dois. Monoespaçado
 * porque é um código a conferir contra o papel, não texto.
 */
.release-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

/**
 * CRD-3 — a faixa do crédito de fornecedora no topo do POS (injetada
 * pelo pos-credito.js, só para quem tem release.ver.credito.fornecedora).
 *
 * LINHA PRÓPRIA, logo abaixo da barra de botões: `width: fit-content` +
 * `margin-left: auto` a encostam à direita sem disputar largura com
 * nada. A 1ª versão morava DENTRO da barra e o smoke com papel de caixa
 * mediu o estrago — o scroller dos botões caiu de 1145 para 542 px e a
 * operadora passou a precisar rolar para achar "Redefinir".
 *
 * Cor herdada: o POS tem tema claro e escuro, e valor fixo sumiria em
 * um dos dois — só o fundo é tingido, com a cor da marca em transparência.
 */
#release-credito-fornecedora,
#release-credito-cliente {
    width: fit-content;
    max-width: 100%;
    margin: 0 0.5rem 0.25rem auto;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(73, 13, 77, 0.35);
    background-color: rgba(73, 13, 77, 0.08);
    /* CRD-4 (14/10/2026): a cor herdada saía BRANCA no POS claro — ilegível.
       O token do tema resolve nos dois: quase-preto no claro, claro no escuro */
    color: var(--color-fontcolor);
    font-size: 0.85rem;
    font-weight: 600;
}

/* o "vence em" é informação de apoio: menor e mais discreto que o saldo */
#release-credito-fornecedora .release-credito-vencimento {
    margin-left: 0.5rem;
    font-weight: 400;
    font-size: 0.78rem;
    opacity: 0.85;
}

/**
 * VEN-1 — o select da vendedora no POS.
 *
 * Mesma linha própria e mesmo motivo da faixa de crédito acima: dentro
 * da barra de botões ele disputaria largura com "Painel/Pedidos/Tipo de
 * pedido/Clientes/Redefinir", e o balcão passaria a rolar horizontal
 * para achar botão (o estrago que a CRD-3 mediu no smoke com papel de
 * caixa).
 *
 * À ESQUERDA, ao contrário do crédito: são duas linhas irmãs, e encostar
 * as duas à direita as empilharia na mesma coluna estreita. Alvo de
 * toque de 40 px — é um select operado com uma mão só, em pé.
 */
#release-vendedora,
#release-atalhos {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
    padding: 0.25rem 0.75rem;
    width: fit-content;
    max-width: 100%;
    border-radius: 9999px;
    border: 1px solid rgba(73, 13, 77, 0.35);
    /**
     * VEN-1b — fundo e cor PRÓPRIOS, não herdados. O fundo translúcido
     * com `color: inherit` deixava o texto branco (a cor do tema do POS)
     * sobre branco: ilegível na tela, visto pelo proprietário. Um chip
     * sólido é legível nos dois temas do POS, que é o mesmo motivo de o
     * select abaixo ter cor própria.
     */
    background-color: #ffffff;
    color: #1f2937;
    font-size: 0.85rem;
    font-weight: 600;
}

#release-vendedora select,
#release-atalhos select {
    min-height: 40px;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(73, 13, 77, 0.35);
    background-color: #ffffff;
    color: #1f2937;
    font-weight: 600;
}

/**
 * O dropdown nativo é renderizado pelo SISTEMA, com fundo claro próprio —
 * `color: inherit` fazia a lista abrir com texto branco sobre branco. As
 * opções levam cor explícita pelo mesmo motivo do chip acima.
 */
#release-vendedora select option,
#release-atalhos select option {
    background-color: #ffffff;
    color: #1f2937;
}

/**
 * PAG-1 / DESC-1 — parcelas e descontos prontos usam o MESMO chip sólido
 * da vendedora (a primeira versão herdava a cor do tema e saiu branco
 * sobre cinza, com a lista de parcelas branca sobre branco — a mesma
 * lição da VEN-1b, paga de novo). Botão ligado = preenchido.
 */
#release-atalhos label {
    font-weight: 600;
}

#release-atalhos button {
    min-height: 40px;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(73, 13, 77, 0.35);
    background-color: #ffffff;
    color: #1f2937;
    font-weight: 600;
    white-space: nowrap;
}

#release-atalhos button[aria-pressed="true"] {
    background-color: #490d4d;
    border-color: #490d4d;
    color: #ffffff;
}

/**
 * CUR-1 — as pastilhas do select múltiplo (nsReleaseSelecaoMultipla).
 * Escrito à mão e não em utilitários do Tailwind pela lição paga na
 * FIN-2: o build do core só compila as classes que o CORE usa, então
 * classe nova de blade/JS do módulo não existiria no CSS final. As cores
 * saem dos tokens do tema — a pastilha acompanha claro e escuro.
 */
.release-pastilha {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    background-color: var(--color-info-tertiary, #490D4D);
    color: #ffffff;
}

/**
 * Correção (pedido do cliente, 2026-09-01): o branco morava só no
 * elemento pai e o texto dentro do chip saía ESCURO sobre o fundo
 * escuro. Primeira tentativa (.release-pastilha span) consertou o
 * ícone mas NÃO o rótulo — print do cliente: o chip vive dentro do
 * `.placeholder` do `.ns-select` DO CORE, cuja regra de span vence
 * (0,2,1) contra (0,1,1). O !important é deliberado e fica: brigar de
 * especificidade com o core é corrida que se perde no próximo rebase.
 */
.release-pastilha span,
.release-pastilha button,
.release-pastilha i {
    color: #ffffff !important;
    /**
     * CUR-2 — visto na tela: na célula estreita da grade o rótulo
     * QUEBRAVA no espaço ("Gola V" virava duas linhas dentro da bolha) e
     * a pastilha ficava ilegível. Nome comprido agora alarga a célula
     * (a tabela já rola no eixo x) em vez de embolar.
     */
    white-space: nowrap;
}

.release-pastilha button {
    display: inline-flex;
    align-items: center;
    opacity: 0.75;
}

.release-pastilha button:hover {
    opacity: 1;
}

/**
 * CUR-5 — o slider da % de sugestão na grade do lote. Controle NATIVO
 * (<input type="range">): a grade é blade + Vue inline sem build, e o
 * navegador já tem o componente — trazer biblioteca aqui exigiria Vite.
 * A classe mora neste arquivo pela lição da FIN-2: o Tailwind do core
 * só compila as classes que o CORE usa, então utilitário novo de blade
 * do módulo não existiria no CSS final. `accent-color` pinta a trilha e
 * o polegar do controle nativo com a cor da marca, nos dois temas.
 */
.release-slider-pct {
    width: 5rem;
    accent-color: #490D4D;
    cursor: pointer;
    vertical-align: middle;
}

/**
 * CUR-5 — o valor sugerido não quebra em duas linhas dentro da célula.
 * ⚠️ MEDIDO na tela: `.whitespace-nowrap` NÃO EXISTE no CSS compilado do
 * core (o Tailwind dele só compila as classes que o CORE usa — a lição
 * da FIN-2), então os usos da classe nesta grade sempre foram inertes;
 * as colunas curtas não quebravam por largura, não por regra. O botão
 * "Usar R$ 120,00" é o primeiro texto longo o bastante para expor isso.
 */
.release-sugestao-valor {
    white-space: nowrap;
}

/**
 * CUR-6 — a lista de peças da proposta (o que a fornecedora confere
 * contra o maço de etiquetas). Duas regras, e as duas existem porque as
 * utilitárias equivalentes do Tailwind NÃO estão no CSS compilado do
 * core (`align-top` e `whitespace-nowrap` — a lição da FIN-2, medida de
 * novo na CUR-5): o número alinha com a PRIMEIRA linha da peça (a
 * célula ao lado tem duas: nome e atributos) e nunca quebra no hífen
 * das prefixadas `014-`, que é justamente onde o papel diverge do sku.
 */
.release-proposta-lista td {
    vertical-align: top;
}

.release-proposta-lista .release-etiqueta {
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* PRO-1: a célula de valores por peça (escondida até o "Exibir valores")
   não quebra o número e encosta à direita, como coluna de dinheiro */
.release-proposta-lista .release-valor {
    white-space: nowrap;
    text-align: right;
}

/**
 * CUR-7 — o botão "Enviar no WhatsApp" e o popup de pré-cadastro.
 *
 * Escritos à mão pela lição já paga três vezes (FIN-2, CUR-5, CUR-6): o
 * Tailwind do core compila só as classes que o CORE usa, então nem
 * `bg-[#25D366]` nem os utilitários do <dialog> existiriam no CSS final
 * — a classe ficaria inerte e ninguém veria, porque a tela continua
 * funcionando feia.
 *
 * Verde do WhatsApp de propósito, e não a cor da marca: é o único botão
 * da tela que leva para FORA do sistema, e a operadora o reconhece antes
 * de ler. Texto quase-preto sobre #25D366 dá 11,4:1 (AAA) — branco
 * sobre esse verde daria 1,9:1 e seria ilegível.
 */
.release-botao-whatsapp {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background-color: #25D366;
    color: #10231a;
    font-weight: 600;
    cursor: pointer;
}

.release-botao-whatsapp:hover {
    background-color: #1da851;
}

/**
 * O <dialog> nativo vem com padding e borda do agente do usuário, e o
 * cartão de dentro já é um `ns-box` com os tokens do tema — sem zerar,
 * a caixa ganharia uma moldura branca em volta no tema escuro.
 */
.release-dialogo {
    padding: 0;
    border: none;
    background: transparent;
    width: min(28rem, 92vw);
    color: inherit;
}

.release-dialogo::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

/*
 * REC-2 — o cupom não fiscal (Resources/Views/cupom-nao-fiscal.blade.php).
 * Mora AQUI, e não só no <style> da view: na variante com o painel o
 * recibo fica dentro da raiz do Vue do core, e o Vue descarta <style> ao
 * montar — o cupom "piscava" formatado e perdia o estilo. O @page de
 * 80 mm continua só na view (aqui afetaria toda impressão do sistema).
 */
.cupom { width: 80mm; margin: 0 auto; padding: 3mm 4mm 12mm; background: #fff; color: #000; font-family: 'Courier New', Courier, monospace; font-size: 9pt; line-height: 1.3; }
.cupom .c { text-align: center; }
.cupom .b { font-weight: bold; }
.cupom .g { font-size: 12pt; }
.cupom .p { font-size: 8pt; }
.cupom .tr { border-top: 1px dashed #000; margin: 2mm 0; }
.cupom .l { display: flex; justify-content: space-between; gap: 2mm; }
.cupom .l span:last-child { text-align: right; white-space: nowrap; }
.cupom .item { margin: 1mm 0; }
@media print {
    body:has(.cupom) * { visibility: hidden; }
    body:has(.cupom) .cupom, body:has(.cupom) .cupom * { visibility: visible; }
    body:has(.cupom) .cupom { position: absolute; left: 0; top: 0; }
}

/**
 * PAG-5 — a janela de pagamento do PDV (pos-pagamento.js). Cores pelos
 * tokens do tema (claro e escuro); classes próprias porque o Tailwind do
 * core só compila o que o CORE usa (lição da FIN-2). Áreas de altura fixa
 * (contexto, erro): a tela não pula quando algo é lançado — o botão que
 * estava sob o dedo continua ali.
 */
#ns-payment-popup:has(#release-pagamento) .ns-payment-footer,
#ns-payment-popup:has(#release-pagamento) .ns-payment-list,
#ns-payment-popup:has(#release-pagamento) .ns-payment-buttons .ns-submit-button,
#ns-payment-popup:has(#release-pagamento) .ns-payment-buttons .ns-layaway-button,
#ns-payment-popup:has(#release-pagamento) .ns-payment-buttons .ns-payment-button {
    display: none !important;
}

.rp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 8px 12px 12px;
    color: var(--color-fontcolor);
    font-size: 16px;
}

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

.rp-cartao {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--color-box-edge);
    border-radius: 12px;
    background: var(--color-box-background);
}

.rp-cartao span {
    font-size: 14px;
    color: var(--color-fontcolor-soft);
}

.rp-cartao strong {
    font-size: 28px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rp-falta { border-color: var(--color-warning-secondary); background: var(--color-warning-primary); }
.rp-troco { border-color: var(--color-info-secondary); background: var(--color-info-primary); }
.rp-quitado { border-color: var(--color-success-secondary); background: var(--color-success-primary); }
.rp-falta span, .rp-troco span, .rp-quitado span,
.rp-falta strong, .rp-troco strong, .rp-quitado strong { color: #1f2937; }

.rp-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .rp-corpo { grid-template-columns: minmax(0, 1fr); }
}

.rp-entrada, .rp-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-box-edge);
    border-radius: 12px;
    background: var(--color-box-background);
}

.rp-contexto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 60px;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--color-surface-soft, rgba(0, 0, 0, .04));
}

.rp-contexto.rp-aviso {
    background: #fef3c7;
    color: #1f2937;
    border: 1px solid #c98a1a;
}

.rp-contexto-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.rp-select {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--color-input-edge);
    border-radius: 8px;
    background: #fff;
    color: #1f2937;
    font-size: 16px;
}

.rp-visor {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 2px solid #490D4D;
    border-radius: 12px;
    background: #fff;
    color: #1f2937;
}

.rp-visor strong {
    font-size: 40px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rp-visor.rp-vazio { border-color: var(--color-input-edge); }
.rp-visor.rp-vazio strong { color: #6b7280; }

.rp-erro {
    min-height: 22px;
    margin: 0;
    color: var(--color-error-secondary, #b42335);
    font-weight: 600;
}

.rp-teclado {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.rp-teclado button {
    min-height: 56px;
    border: 1px solid var(--color-box-edge);
    border-radius: 10px;
    background: var(--color-input-button, #f4f4f5);
    color: var(--color-fontcolor);
    font-size: 24px;
    font-weight: 500;
}

.rp-teclado button:hover { background: var(--color-input-button-hover, #e4e4e7); }

.rp-acoes { display: flex; flex-direction: column; gap: 8px; }

.rp-botao {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--color-box-edge);
    border-radius: 10px;
    background: var(--color-box-background);
    color: var(--color-fontcolor);
    font-weight: 600;
    cursor: pointer;
}

.rp-botao:disabled { opacity: .5; cursor: not-allowed; }
.rp-botao.rp-forte { background: #F1E4F3; border-color: #E3CDE6; color: #490D4D; }

.rp-botao.rp-lancar,
.rp-botao.rp-finalizar {
    min-height: 56px;
    border: none;
    background: #490D4D;
    color: #fff;
    font-size: 18px;
}

.rp-botao.rp-finalizar:not(:disabled) { background: #1F7A4D; }

.rp-lista h4 { margin: 0; font-size: 16px; font-weight: 600; }
.rp-lista ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; min-height: 120px; }

.rp-lista li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 36px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--color-surface-soft, rgba(0, 0, 0, .04));
}

.rp-lista li.rp-nada { display: block; color: var(--color-fontcolor-soft); background: transparent; }
.rp-lista small { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #F1E4F3; color: #490D4D; font-weight: 600; }
.rp-valor { font-weight: 600; font-variant-numeric: tabular-nums; }

.rp-remover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-error-secondary, #b42335);
    font-size: 18px;
}