/* =====================================================================
   PRIME ERP — sistema de design do PDV
   =====================================================================

   ─────────────────────────────────────────────────────────────────────
   A IDENTIDADE É A DO ERP. ELA NÃO SE NEGOCIA AQUI.
   ─────────────────────────────────────────────────────────────────────
   O PDV tinha a própria paleta: cinzas azulados e âmbar como cor de
   ação. O painel usa cinzas neutros e o vermelho da marca. Quem passa
   de uma tela para a outra sentia que trocou de programa.

   Tudo abaixo vem de `painel/src/tema/tema.ts` e
   `painel/src/tema/global.css`. Quando um tom mudar lá, muda aqui.

   ─────────────────────────────────────────────────────────────────────
   OS DOIS PAPÉIS DO VERMELHO — a regra do ERP, valendo também aqui
   ─────────────────────────────────────────────────────────────────────
     PREENCHIDO   a ação que conclui — concluir venda, registrar
                  pagamento. UM POR TELA.
     CONTORNADO   destruir — cancelar venda, remover item. Nunca
                  preenchido: o contorno é o que faz o olho parar
                  antes de clicar.
     EM TEXTO     número ruim — falta na gaveta, prejuízo.

   E o TOTAL FICA NO TOM DO TEXTO. Colorir o valor principal o faria
   competir com o alerta, e no balcão o total precisa ser a coisa mais
   fácil de achar — o que o destaca é o tamanho, não a cor.

   ─────────────────────────────────────────────────────────────────────
   O QUE CONTINUA DIFERENTE DO PAINEL, E POR QUÊ
   ─────────────────────────────────────────────────────────────────────
   • ALVOS MAIORES — o balcão é operado em pé, às vezes com a mão
     ocupada. 52px de altura mínima contra os 36 do painel.
   • O TOTAL EM 52px — o painel não tem um número que precise ser lido
     de um metro de distância. Aqui tem.
   • A FONTE VEM DO DISCO — a Figtree é a mesma do ERP, mas servida da
     pasta do PDV, não do build do painel: o nome do arquivo lá muda a
     cada `npm run build` e levaria o PDV junto.
   ===================================================================== */

/* A mesma fonte do painel, hospedada aqui. Loja com internet ruim não
   espera o Google Fonts para o vendedor conseguir bipar. */
@font-face {
    font-family: "Figtree Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("../fontes/figtree.woff2") format("woff2-variations");
}

:root {
    /* ── SUPERFÍCIES ─────────────────────────────────────────────
       Do `global.css` do painel, modo escuro. A hierarquia sobe: o
       cartão é mais CLARO que o fundo, e o menu sobe mais que o
       cartão. Inverter isso deixa o cartão parecendo um buraco.

       Cinzas NEUTROS. O PDV usava azulados (#262B38) e era metade do
       motivo de a tela parecer outro sistema. */
    --carvao:    #131418;  /* fundo da tela        (--prime-fundo)     */
    --grafite:   #1D1F25;  /* cartões, painéis     (--prime-painel)    */
    --ardosia:   #2E3038;  /* campo, hover, chip   (--prime-hover)     */
    --flutuante: #23252C;  /* menu e modal         (--prime-flutuante) */
    --fumaca:    #32343C;  /* bordas               (--prime-borda)     */
    --fumaca-forte: #4E4C48;

    /* ── TEXTO ───────────────────────────────────────────────────
       Nunca #FFF: branco puro em fundo escuro vibra e cansa. */
    --giz:       #C9C7C2;
    --giz-suave: #A9A6A0;
    --giz-fraco: #6C6963;

    /* ── A MARCA ─────────────────────────────────────────────────
       #ED1C24 é o vermelho do logo. Sobre o cartão escuro ele dá
       3,76:1 e some — por isso o vermelho de TEXTO no escuro é o
       #F55B5F, que dá 5,14:1 e continua sendo a mesma cor.

       O botão preenchido usa #D4161D nos dois modos: com texto
       branco dá 5,34:1 e passa AA. Clarear no escuro só derrubaria
       o contraste, porque o texto continua branco. */
    --marca:        #ED1C24;
    --acento:       #F55B5F;   /* vermelho de texto, foco, ativo */
    --acento-fundo: rgba(245, 91, 95, 0.13);
    --acao:         #D4161D;   /* o botão que conclui */
    --acao-forte:   #B71217;

    /* ── PERIGO ──────────────────────────────────────────────────
       Mais escuro e menos saturado que a marca, de propósito: ele
       aparece CONTORNADO, e um tom vivo em contorno fino some. */
    --brasa:       #DC6666;
    --brasa-fundo: rgba(220, 102, 102, 0.13);

    /* ── SINAL ───────────────────────────────────────────────────
       Jade confirma (pago, leitor pronto). Âmbar avisa (caixa
       esquecido aberto, venda sem vendedor) — e só avisa: deixou de
       ser a cor de ação quando o vermelho da marca assumiu esse
       papel. */
    --jade:        #76BC96;
    --jade-forte:  #369B66;
    --jade-fundo:  rgba(54, 155, 102, 0.15);

    --ambar:       #E4AE4C;
    --ambar-fundo: rgba(220, 151, 28, 0.14);

    /* ── NÃO HÁ AZUL ──
       A paleta do ERP tem cinco cores: marca, perigo, pedra, jade e
       âmbar. O PDV tinha um azul (#5B8DEF) para "informação", e era a
       cor mais visivelmente estranha da tela — nada no painel usa azul.

       Informação neutra passou a ser o próprio cinza, que é o que o
       painel faz: o que destaca um selo ali é o fundo levantado, não
       uma cor nova. */
    --neutro:       var(--giz-suave);
    --neutro-fundo: rgba(169, 166, 160, 0.14);

    /* ── TIPOGRAFIA ──────────────────────────────────────────────
       A Figtree do ERP. A pilha do sistema fica de reserva para o
       primeiro carregamento não mostrar texto invisível. */
    --fonte: "Figtree Variable", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Valores em monoespaçada de verdade: numeral tabular sozinho não
       resolve a leitura de coluna quando há R$ e vírgula no meio. */
    --fonte-valor: ui-monospace, "SF Mono", "Cascadia Mono", Menlo,
                   "DejaVu Sans Mono", monospace;

    /* Escala em passos grandes: PDV não tem meio-termo — ou é rótulo
       minúsculo, ou é número que se lê de longe. */
    --t-micro:  0.6875rem;  /* 11px — teclas de atalho */
    --t-mini:   0.75rem;    /* 12px — rótulos */
    --t-base:   0.9375rem;  /* 15px — corpo */
    --t-medio:  1.125rem;   /* 18px — item da lista */
    --t-grande: 1.75rem;    /* 28px — subtotal, código */
    --t-total:  3.25rem;    /* 52px — o total, e só ele */

    /* ── ESPAÇO ─────────────────────────────────────────────────── */
    --e1: 0.25rem;
    --e2: 0.5rem;
    --e3: 0.75rem;
    --e4: 1rem;
    --e5: 1.5rem;
    --e6: 2rem;
    --e7: 3rem;

    /* ── FORMA ───────────────────────────────────────────────────
       Os raios do painel: sm 4, md 8, lg 12. O PDV usava 6 e 10 —
       perto o bastante para ninguém notar de propósito, longe o
       bastante para os cantos não baterem lado a lado. */
    --raio:       4px;
    --raio-medio: 8px;
    --raio-forte: 12px;

    /* ── ALVO DE TOQUE ───────────────────────────────────────────
       52px porque o vendedor toca com o polegar, em pé, muitas vezes
       com o leitor na outra mão. 44px (o mínimo da Apple) erra demais
       nessa condição — é a única medida em que o PDV se afasta do
       painel de propósito. */
    --alvo: 52px;

    /* Sombra em fundo escuro não aparece: vira mancha. O que separa
       uma superfície da outra é o TOM e a BORDA — a mesma decisão do
       painel, que desligou a sombra do cartão no modo escuro. */
    --sombra:       none;
    --sombra-forte: 0 8px 28px rgba(0, 0, 0, 0.45);

    --transicao: 120ms ease-out;
}

/* ── MODO CLARO ─────────────────────────────────────────────────────
   Para a loja com vitrine voltada para o sol, onde a tela escura vira
   espelho. Mesma estrutura, superfícies invertidas. */
[data-tema="claro"] {
    /* Do `global.css`, modo claro. O fundo é quase branco quente e o
       que separa o cartão é a BORDA, não a diferença de tom: fundo
       cinza demais fazia cada cartão virar uma mancha. */
    --carvao:    #F3F1EC;
    --grafite:   #FFFFFF;
    --ardosia:   #EDEAE3;
    --flutuante: #FFFFFF;
    --fumaca:    #DFDBD2;
    --fumaca-forte: #D2CDC2;

    --giz:       #171512;
    --giz-suave: #6E6A63;
    --giz-fraco: #A9A49A;

    /* Sobre fundo claro o vermelho da marca funciona como texto — não
       precisa do tom clareado do escuro. */
    --marca:        #ED1C24;
    --acento:       #D4161D;
    --acento-fundo: #FDECEC;
    --acao:         #D4161D;
    --acao-forte:   #B71217;

    --brasa:       #BD3636;
    --brasa-fundo: rgba(189, 54, 54, 0.10);

    --jade:        #2F7D4F;
    --jade-forte:  #369B66;
    --jade-fundo:  rgba(54, 155, 102, 0.12);

    --ambar:       #B4770E;
    --ambar-fundo: rgba(220, 151, 28, 0.14);

    --neutro:       var(--giz-suave);
    --neutro-fundo: rgba(110, 106, 99, 0.12);

    /* No claro a sombra volta, mínima: é a terceira coisa que separa
       o cartão do fundo, junto do tom e da borda. */
    --sombra:       0 1px 2px rgba(23, 21, 18, 0.04);
    --sombra-forte: 0 8px 28px rgba(23, 21, 18, 0.14);
}


/* =====================================================================
   BASE
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--carvao);
    color: var(--giz);
    font-family: var(--fonte);
    font-size: var(--t-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    /* O balcão não rola. A tela inteira cabe, sempre. */
    overflow: hidden;

    /* Toque duplo no iPad não pode dar zoom no meio de uma venda. */
    touch-action: manipulation;
}

/* Foco visível SEMPRE. Este sistema é operado por teclado — esconder o
   foco aqui seria como tirar o cursor do editor de texto. */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button { cursor: pointer; }

/* Todo valor monetário usa isto. Sem `tabular-nums`, a coluna da
   direita balança a cada item novo e o olho perde o lugar. */
.valor {
    font-family: var(--fonte-valor);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}


/* =====================================================================
   COMPONENTES
   ===================================================================== */

/* ── BOTÃO ──────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);

    min-height: var(--alvo);
    padding: 0 var(--e5);

    background: var(--ardosia);
    color: var(--giz);
    border: 1px solid var(--fumaca);
    border-radius: var(--raio);

    font-size: var(--t-base);
    font-weight: 600;

    transition: background var(--transicao), transform var(--transicao);
    user-select: none;
}

.btn:hover:not(:disabled) { background: var(--fumaca); }

/* O afundar confirma o toque numa tela sem retorno tátil. */
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── O ÚNICO PREENCHIDO DA TELA ──
   O vermelho da marca, igual ao do painel. Era âmbar aqui e vermelho
   lá, para o mesmo papel: a ação que conclui.

   #D4161D com texto branco dá 5,34:1 e passa AA. Numa tela de loja com
   reflexo, ficar abaixo do mínimo quer dizer que o vendedor aperta os
   olhos. */
.btn--principal {
    background: var(--acao);
    color: #FFFFFF;
    border-color: var(--acao);
    font-weight: 600;
}

.btn--principal:hover:not(:disabled) { background: var(--acao-forte); }

/* Destruir é sempre CONTORNADO. O contorno é o que faz o olho parar
   antes de clicar — preenchido, ele viraria só mais um botão vermelho
   na mesma tela do que conclui. */
.btn--perigo {
    background: transparent;
    color: var(--brasa);
    border-color: var(--brasa);
}

.btn--perigo:hover:not(:disabled) {
    background: var(--brasa-fundo);
}

.btn--fantasma {
    background: transparent;
    border-color: transparent;
    color: var(--giz-suave);
}

.btn--fantasma:hover:not(:disabled) {
    background: var(--ardosia);
    color: var(--giz);
}

.btn--grande {
    min-height: 68px;
    font-size: var(--t-medio);
}

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

/* ── CAMPO ──────────────────────────────────────────────────────── */

.campo {
    display: block;
    width: 100%;
    min-height: var(--alvo);
    padding: 0 var(--e4);

    background: var(--carvao);
    color: var(--giz);
    border: 1px solid var(--fumaca);
    border-radius: var(--raio-medio);

    transition: border-color var(--transicao);
}

.campo:focus {
    border-color: var(--acento);
    outline: none;
}

.campo::placeholder { color: var(--giz-fraco); }

.rotulo {
    display: block;
    margin-bottom: var(--e2);

    font-size: var(--t-mini);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--giz-suave);
}

/* ── ETIQUETA ───────────────────────────────────────────────────── */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);

    padding: 2px var(--e2);

    border-radius: 4px;

    font-size: var(--t-mini);
    font-weight: 600;
}

.etiqueta--jade  { background: var(--jade-fundo);  color: var(--jade); }
.etiqueta--brasa { background: var(--brasa-fundo); color: var(--brasa); }
.etiqueta--neutra { background: var(--neutro-fundo); color: var(--neutro); }
.etiqueta--ambar { background: var(--ambar-fundo); color: var(--ambar); }

/* ── AVISO ──────────────────────────────────────────────────────── */
/*
   Aparece no alto, some sozinho. Nunca bloqueia — o vendedor não pode
   precisar de um clique para continuar bipando.
*/

#avisos {
    position: fixed;
    top: var(--e4);
    left: 50%;
    transform: translateX(-50%);

    /* ── ACIMA DE TUDO, INCLUSIVE DO MODAL ──
       O aviso ficava em 900 e o modal em 1000: "CPF inválido" nascia
       ATRÁS da janela que pediu o CPF. O erro chegava, sumia sozinho em
       5 segundos, e o vendedor só via o botão não fazer nada.

       Aviso é a camada mais alta que existe: ele comenta o que está na
       tela, então precisa estar por cima do que quer que seja. */
    z-index: 2000;

    display: flex;
    flex-direction: column;
    gap: var(--e2);

    width: min(560px, calc(100vw - 2rem));

    pointer-events: none;
}

.aviso {
    display: flex;
    align-items: center;
    gap: var(--e3);

    padding: var(--e3) var(--e4);

    background: var(--grafite);
    border: 1px solid var(--fumaca);
    border-left: 4px solid var(--giz-suave);
    border-radius: var(--raio);
    box-shadow: var(--sombra-forte);

    animation: entrar 160ms ease-out;
}

.aviso--ok    { border-left-color: var(--jade); }
.aviso--erro  { border-left-color: var(--brasa); }
.aviso--info  { border-left-color: var(--giz-fraco); }
.aviso--atencao { border-left-color: var(--ambar); }

.aviso__texto { flex: 1; }

.aviso__titulo { font-weight: 600; }

.aviso__detalhe {
    font-size: var(--t-mini);
    color: var(--giz-suave);
}

@keyframes entrar {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aviso--saindo {
    animation: sair 160ms ease-in forwards;
}

@keyframes sair {
    to { opacity: 0; transform: translateY(-8px); }
}

/* ── MODAL ──────────────────────────────────────────────────────── */

.modal-fundo {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--e4);

    background: rgba(0, 0, 0, 0.7);

    animation: aparecer 120ms ease-out;
}

@keyframes aparecer {
    from { opacity: 0; }
}

.modal {
    width: min(520px, 100%);
    max-height: 90vh;
    overflow-y: auto;

    /* Sobe mais que o cartão — é a regra de superfície do painel: o
       menu e o modal flutuam acima do conteúdo, e no escuro isso se
       diz com TOM, não com sombra. */
    background: var(--flutuante);
    border: 1px solid var(--fumaca);
    border-radius: var(--raio-forte);
    box-shadow: var(--sombra-forte);
}

.modal__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: var(--e4) var(--e5);
    border-bottom: 1px solid var(--ardosia);
}

.modal__titulo {
    margin: 0;
    font-size: var(--t-medio);
    font-weight: 600;
}

.modal__corpo { padding: var(--e5); }

.modal__rodape {
    display: flex;
    gap: var(--e3);
    justify-content: flex-end;

    padding: var(--e4) var(--e5);
    border-top: 1px solid var(--ardosia);
}

/* ── UTILITÁRIOS ────────────────────────────────────────────────── */

.oculto { display: none !important; }

.pilha {
    display: flex;
    flex-direction: column;
    gap: var(--e3);
}

.linha {
    display: flex;
    align-items: center;
    gap: var(--e3);
}

.entre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
}

.crescer { flex: 1; }

.mini {
    font-size: var(--t-mini);
    color: var(--giz-suave);
}

/* Quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   LISTA DE ESCOLHA
   ═══════════════════════════════════════════════════════════════════

   Usada pelo kit: escolher qual kit, e quais peças dentro dele.

   ── ALVO GRANDE, SEMPRE ──
   O balcão é de pé, às vezes com o cliente esperando. Item de lista
   com 32px obriga a mirar — e mirar com o cliente olhando é o que faz
   o vendedor errar e ter que desfazer.

   `--alvo` é o mesmo mínimo dos botões do PDV.

   ── SEGUE O TEMA ESCURO ──
   O PDV inteiro é escuro: `--carvao` de fundo, `--giz` de texto. Uma
   lista clara aqui piscaria branco no meio da tela toda vez que o
   vendedor abrisse o kit — em balcão com luz baixa, é o suficiente
   para incomodar a vista o dia inteiro. */

.lista-escolha {
    display: flex;
    flex-direction: column;
    gap: 6px;

    /* Rola dentro do modal em vez de esticá-lo: com 40 kits, o modal
       passaria da tela e o botão de confirmar sairia de vista. */
    max-height: 46vh;
    overflow-y: auto;
}

.escolha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    min-height: var(--alvo);
    padding: 10px 14px;

    background: var(--carvao);
    border: 1px solid var(--fumaca);
    border-radius: var(--raio);

    font-size: var(--t-medio);
    text-align: left;
    color: var(--giz);
    cursor: pointer;

    transition: border-color var(--transicao);
}

.escolha:hover:not(:disabled) {
    border-color: var(--fumaca-forte);
}

/* A escolhida não depende só de cor: a borda engrossa e o fundo tinge.
   Em tela de balcão com brilho alto, cor sozinha não aparece.

   O vermelho da marca porque é o que diz "este é o ativo" no menu do
   ERP — era âmbar aqui, que lá quer dizer aviso. */
.escolha--ativa {
    border-color: var(--acento);
    border-width: 2px;
    background: var(--acento-fundo);
}

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

.escolha-titulo {
    font-weight: 600;
    line-height: 1.3;
}