/* Casca comum das telas do sistema da loja: barra do topo, links, faixa de simulação e janelas.
   Toda tela de sistema/ usa este arquivo para ficarem iguais. Requer tokens.css e base.css. */
[hidden] { display: none !important; }
::selection { background: var(--cor-ok-fundo); color: var(--cor-texto); }

/* barra do topo: logo + título da tela + botões à direita */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 24px; background: var(--cor-superficie); }
.barra img { width: 48px; height: 48px; display: block; flex: none; }
.barra h1, .barra > p { font: 600 22px/1.2 var(--fonte-texto); letter-spacing: 0; margin-right: auto; }
.barra .botao { background: var(--cor-fundo); }
.barra .botao:hover { background: var(--cor-superficie-escura); }

/* link com cara de link, alvo do tamanho de botão */
.link { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: 600 1em/1.2 var(--fonte-texto); color: var(--cor-principal); text-decoration: underline; text-underline-offset: 5px; }
.link:hover { color: var(--cor-principal-escura); }
.link--perigo { color: var(--cor-erro); }
.link--perigo:hover { color: var(--cor-erro); text-decoration-thickness: 2px; }

/* bloco grande de opção (menu inicial, origem da entrada): título grande + explicação */
.opcao { min-height: 200px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px;
  padding: 24px 28px; border-radius: var(--raio); text-align: left; }
.opcao b { font: 700 40px/1.05 var(--fonte-titulo); letter-spacing: -.02em; }
.opcao span { font-weight: 500; color: var(--cor-texto-suave); }
.opcao.botao--principal span { color: #fff; }

/* faixa dos botões de simulação (só no protótipo) */
.simulacao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 24px; border-top: 2px dashed var(--cor-borda); }
.simulacao p { font-size: 16px; font-weight: 600; color: var(--cor-texto-suave); margin-right: 4px; }
.simulacao .botao { font-size: 18px; padding-inline: 18px; }

/* janelas (<dialog>) */
dialog.janela { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 28px 32px; border: 0; border-radius: var(--raio);
  background: var(--cor-fundo); color: var(--cor-texto); box-shadow: 0 24px 64px rgba(30, 37, 48, .28); overflow: auto; }
dialog.janela::backdrop { background: rgba(30, 37, 48, .62); }
dialog.estreita { width: min(560px, calc(100vw - 32px)); }
dialog.larga { width: min(1120px, calc(100vw - 32px)); }
.janela h2 { margin-bottom: 6px; }
.janela .sub { color: var(--cor-texto-suave); margin-bottom: 20px; }
.rodape { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.rodape .botao--grande { flex: 1; }

@media (max-width: 700px) {
  .barra, .simulacao { padding-inline: 16px; }
  dialog.janela { padding: 20px; }
}

/* campo de dinheiro: "R$" fixo dentro do campo, à esquerda. Uso: <span class="reais"><input …></span> */
.reais { position: relative; display: block; }
.reais::before { content: "R$"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 700 var(--reais-tam, 20px)/1 var(--fonte-titulo); color: var(--cor-texto-suave); }
.reais input { padding-left: calc(var(--reais-tam, 20px) * 2 + 16px) !important; }
.valor-grande .reais, .contagem .reais { --reais-tam: 28px; }

/* desconto rápido na hora de receber: Sem desconto · 7% · 10% · 13% (caixa e pedidos) */
.descontos { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 10px; margin-top: 8px; }
.descontos .chip { border-radius: 16px; min-height: 64px; }
.desc-conta { margin-top: 8px; font-weight: 600; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }

/* aviso de fim de estoque */
.janela-estoque ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.janela-estoque li { background: var(--cor-superficie); border-radius: 12px; padding: 12px 16px; font-size: 20px; }
.janela-estoque small { color: var(--cor-texto-suave); font-size: 16px; }
.janela-estoque .acabou { color: var(--cor-erro); font-weight: 700; }
.janela-estoque h3 { font: 700 20px/1.3 var(--fonte-titulo); margin: 18px 0 2px; }
.janela-estoque { overflow-x: hidden; }

/* selo da sincronização (fase 3) e aviso de relógio */
.selo-sync { font-weight: 700; font-size: 16px; padding: 6px 12px; border-radius: var(--raio-pilula); white-space: nowrap; }
.selo-sync--ok { color: var(--cor-ok-escura); background: var(--cor-ok-fundo); }
.selo-sync--atencao { color: var(--cor-texto); background: var(--cor-atencao-fundo); }
.faixa-relogio { margin: 0; padding: 10px 24px; background: var(--cor-atencao-fundo); font-weight: 700; }