/* Kros Komercio — a linguagem visual do KROS (R:\DEV\KROS\webasp), portada.

   Não é "inspirado em": são os mesmos tokens. Quem migrar do KROS para o
   SaaS tem que reconhecer o produto na primeira tela, e o comerciante que
   usa os dois no mesmo dia não pode sentir que trocou de sistema.

   O que veio de lá, e por quê:

     - navegação em gradiente navy→roxo, item ativo como pílula clara;
     - cabeçalho de página como "hero": ícone + título + ações, num cartão
       de fundo azulado que separa o assunto do conteúdo;
     - cartões de indicador com círculo colorido à esquerda do número;
     - tabela dentro de uma casca arredondada, com faixa de cabeçalho
       azulada e linhas altas — listas de comércio são lidas de relance;
     - raios grandes (22px) e sombras difusas, em vez de borda fina.

   Continua sem framework CSS. São ~30 telas de formulário, tabela e PDV;
   o que elas precisam cabe aqui e não custa 200kB de Bootstrap. */

:root {
  /* Navegação — o gradiente é a assinatura do KROS. */
  --navy: #0f1f4a;
  --navy-fim: #2d0f43;

  --fundo: #f7f9fc;
  --superficie: #ffffff;
  --borda: #eef1f6;
  --borda-forte: #dfe5ef;

  --texto: #2f3545;
  --texto-suave: #6b7280;
  --texto-fraco: #8a93a3;

  --azul: #4f86f7;
  --azul-escuro: #386fd8;
  --azul-suave: #e8f0ff;
  --azul-tinta: #4a7df0;
  --azul-faixa: #eef2fb;

  --verde: #41b88f;
  --verde-forte: #1f7a4d;
  --verde-suave: #e6f7f1;

  --vermelho: #b42318;
  --vermelho-claro: #e27d88;
  --vermelho-suave: #fdecec;

  --ambar: #a16207;
  --ambar-suave: #fff4db;

  --roxo-suave: #f1ebff;
  --roxo: #6d4aad;

  --raio: 22px;
  --raio-hero: 24px;
  --raio-botao: 18px;
  --raio-campo: 14px;
  --sombra: 0 6px 18px rgba(15, 23, 42, .05);
  --sombra-alta: 0 10px 26px rgba(15, 23, 42, .09);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}

/* --- estrutura --- */

.app { display: flex; min-height: 100vh; }

.barra-lateral {
  flex: 0 0 250px;
  width: 250px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-fim) 100%);
  color: #cfd8ea;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-shadow: 4px 0 16px rgba(15, 23, 42, .08);
  z-index: 40;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 8px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
}

.marca .simbolo {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.grupo-menu {
  padding: 16px 20px 8px;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
  font-weight: 700;
}

/* O item de menu é uma pílula com folga dos dois lados: o ativo precisa
   parecer selecionado sem depender de uma borda de 3px que some no fundo
   escuro. */
.barra-lateral a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 4px 14px;
  padding: 0 14px;
  border-radius: 12px;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}

.barra-lateral a:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.barra-lateral a.ativo {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.barra-lateral a .icone {
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

.rodape-lateral { padding: 16px; margin-top: auto; }

/* Especificidade de propósito: o botão do rodapé usa .secundario para não
   competir com a ação principal da tela, mas ali dentro ele é vidro sobre
   o navy — branco sólido no fim do menu viraria o elemento mais gritante
   da página, para a ação menos importante que existe. */
.rodape-lateral button.secundario {
  width: 100%;
  background: rgba(255, 255, 255, .08);
  color: #d7deee;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 10px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: none;
}

.rodape-lateral button.secundario:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: none; }

.conteudo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 24px 40px;
  max-width: 1320px;
  animation: entrada .25s ease;
}

@keyframes entrada {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* --- cabeçalho de página (hero) ---

   O ícone à esquerda não é enfeite: com o menu colapsado no celular, é o
   que diz em que tela você está. O título encolhe por container query
   porque a barra lateral come uma largura que não é proporcional ao
   viewport — medir em vw erraria. */

.cabecalho-pagina {
  background: linear-gradient(180deg, #f5f7ff 0%, #eef2fb 100%);
  border: 1px solid var(--borda);
  border-radius: var(--raio-hero);
  padding: 26px 30px;
  box-shadow: 0 8px 24px rgba(31, 41, 55, .06);
  margin-bottom: 22px;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 2.5cqw, 20px);
}

.cabecalho-pagina .assunto {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.5cqw, 20px);
  flex: 1 1 auto;
  min-width: 0;
}

.cabecalho-pagina .simbolo {
  width: clamp(40px, 6cqw, 56px);
  height: clamp(40px, 6cqw, 56px);
  border-radius: 18px;
  background: #e9efff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.1rem, 2.6cqw, 1.5rem);
  flex-shrink: 0;
}

.cabecalho-pagina h1 {
  margin: 0;
  font-size: clamp(1.15rem, 3.4cqw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.4px;
}

.cabecalho-pagina p {
  margin: 4px 0 0;
  color: var(--texto-suave);
  font-size: clamp(.78rem, 1.5cqw, 1rem);
}

.cabecalho-pagina .acoes { display: flex; gap: 8px; flex: 0 0 auto; }

.cabecalho-pagina .botao,
.cabecalho-pagina button {
  height: clamp(34px, 6cqw, 46px);
  padding: 0 clamp(12px, 2cqw, 20px);
  font-size: clamp(.75rem, 1.3cqw, .88rem);
}

@container (max-width: 460px) {
  .cabecalho-pagina { flex-wrap: wrap; }
  .cabecalho-pagina .acoes { flex: 1 1 100%; }
  .cabecalho-pagina .acoes > * { flex: 1 1 auto; }
}

/* --- cartões, indicadores e tabelas --- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px 24px;
  margin-bottom: 18px;
}

.cartao h2 { margin: 0 0 14px; font-size: 16px; font-weight: 700; }

.grade {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* O ícone é opcional: onde ele existe, o indicador vira duas colunas e o
   texto todo (rótulo, valor e qualquer nota abaixo) ocupa a segunda. Onde
   não existe — o PDV, por exemplo, onde três números lado a lado já são
   claros — o mesmo bloco continua valendo, sem markup extra. */
.indicador {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr;
  /* O ícone de 58px é mais alto que as duas linhas de texto. Sem isto as
     linhas esticam para preencher e o rótulo descola do número. */
  grid-auto-rows: min-content;
  align-content: center;
}

.indicador:has(> .simbolo) { grid-template-columns: auto 1fr; column-gap: 16px; }
/* span 99 e não "1 / -1": sem linhas explícitas, -1 resolve para o fim da
   grade explícita (que não existe) e o ícone ficaria preso na primeira
   linha, esticando-a até 58px e afastando o rótulo do número. */
.indicador > .simbolo { grid-row: 1 / span 99; grid-column: 1; align-self: center; }
.indicador:has(> .simbolo) > :not(.simbolo) { grid-column: 2; }

.indicador .simbolo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  background: var(--azul-suave);
}

.indicador .simbolo.verde { background: var(--verde-suave); }
.indicador .simbolo.vermelho { background: var(--vermelho-suave); }
.indicador .simbolo.ambar { background: var(--ambar-suave); }
.indicador .simbolo.roxo { background: var(--roxo-suave); }

.indicador .rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraco);
  font-weight: 700;
}

.indicador .valor {
  font-size: 26px;
  font-weight: 700;
  margin-top: 2px;
  line-height: 1.1;
  letter-spacing: -.5px;
}

.indicador .valor.negativo { color: var(--vermelho); }
.indicador .valor.positivo { color: var(--verde-forte); }

/* A tabela mora numa casca arredondada. Dentro de um .cartao ela usa a
   borda do próprio cartão; solta na página, vira .casca-tabela. */
.casca-tabela {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  background: var(--superficie);
  overflow: hidden;
  margin-bottom: 18px;
}

table { width: 100%; border-collapse: collapse; }

thead tr { background: var(--azul-faixa); }

th {
  text-align: left;
  padding: 15px 16px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4b5565;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: none;
}

td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fbfcfe; }

/* O cartão já tem padding; a tabela dentro dele encosta nas bordas para a
   faixa de cabeçalho ir de ponta a ponta, como no KROS.

   Só quando é o último elemento do cartão: a margem inferior negativa que
   come o padding de baixo passaria por cima do que viesse depois — e no PDV
   vem, a tabela de pagamentos é seguida do desconto e do cliente. */
.cartao > table:last-child { margin: 4px -24px -22px; width: calc(100% + 48px); }
.cartao > table:last-child thead th:first-child,
.cartao > table:last-child tbody td:first-child { padding-left: 24px; }
.cartao > table:last-child thead th:last-child,
.cartao > table:last-child tbody td:last-child { padding-right: 24px; }

/* Identidade de linha: círculo com as iniciais. Numa lista de 2000
   produtos é o que dá âncora visual para percorrer com o olho. */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6ea0ff 0%, #4177e8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(65, 119, 232, .25);
  flex-shrink: 0;
}

.linha-identidade { display: flex; align-items: center; gap: 14px; }
.linha-titulo { font-size: 15px; font-weight: 700; margin: 0; }
.linha-sub { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }

.vazio { padding: 34px 24px; text-align: center; color: var(--texto-suave); }

.vazio .simbolo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f4f8;
  font-size: 1.6rem;
}

/* --- formulários --- */

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo .dica { font-size: 12px; color: var(--texto-suave); margin-top: 5px; }

/* `input:not([type])` está aqui porque um input sem type é text, mas não
   casa com input[type=text] — e metade dos campos do PDV e do diálogo de
   pagamento é criada assim, em JavaScript. Sem esta linha eles caem no
   tamanho padrão do navegador e ficam espremidos ao lado dos outros. */
input:not([type]), input[type=text], input[type=password], input[type=email],
input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-campo);
  font: inherit;
  background: #fff;
  color: var(--texto);
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(79, 134, 247, .18);
}

.linha { display: flex; gap: 14px; }
.linha > * { flex: 1; }

button, .botao {
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: var(--raio-botao);
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 10px 24px rgba(56, 111, 216, .28);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

button:hover, .botao:hover { transform: translateY(-2px); text-decoration: none; }
button:active, .botao:active { transform: translateY(0); }

button.secundario, .botao.secundario {
  background: #fff;
  border: 1px solid var(--borda-forte);
  color: #3e4a5d;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .04);
}

button.secundario:hover, .botao.secundario:hover { background: #f4f6fb; }

button.perigo, .botao.perigo {
  background: linear-gradient(90deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 10px 24px rgba(220, 38, 38, .25);
}

button:disabled, button.secundario:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.botoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Botão só de ícone, para ações de linha de tabela. */
.acao {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--borda-forte);
  color: #4b5565;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .05);
}

.acao:hover { background: #f4f6fb; transform: none; }

/* --- diálogo ---

   O KROS abre formulário curto em modal, aberto pela linha da tabela: a
   lista continua sendo a página, e cadastrar ou dar entrada não empurra o
   que se veio ver para baixo da dobra.

   Aqui é o <dialog> nativo, não um modal de framework. Ele já traz backdrop,
   Esc para fechar e prisão de foco — três coisas que a gente escreveria pior
   à mão, e a razão de não haver Bootstrap neste projeto continua valendo. */

dialog {
  border: none;
  border-radius: var(--raio);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(8, 20, 45, .3);
  color: var(--texto);
}

dialog::backdrop { background: rgba(9, 14, 33, .45); }

dialog .topo-dialogo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 0;
}

dialog h2 { margin: 0; font-size: 17px; font-weight: 700; }
dialog .corpo-dialogo { padding: 18px 24px 0; }
dialog .rodape-dialogo { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 24px 22px; }

dialog .fecha {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 11px;
  background: #f1f2f5;
  color: var(--texto-suave);
  border: none;
  box-shadow: none;
  font-size: 16px;
}

dialog .fecha:hover { background: #e6e9f0; transform: none; }

/* A identidade do que está sendo alterado fica no topo do corpo: sem isso
   o operador digita quantidade e custo sem certeza de em qual produto. */
.alvo-dialogo {
  background: var(--azul-faixa);
  border-radius: var(--raio-campo);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.alvo-dialogo .nome { font-weight: 700; }
.alvo-dialogo .detalhe { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }

/* --- gráfico de barras da análise ---

   Sem biblioteca: são no máximo trinta barras, e barra é uma div com
   altura. Trezentos kB de JavaScript para desenhar isso seria pagar caro
   por nada, e o projeto inteiro não tem framework nenhum. */

.grafico-barras {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 200px;
  padding-top: 20px;
  overflow-x: auto;
}

.barra {
  flex: 1 1 0;
  min-width: 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  text-align: center;
}

.barra__corpo {
  background: linear-gradient(180deg, var(--azul) 0%, var(--azul-escuro) 100%);
  border-radius: 8px 8px 0 0;
  min-height: 3px;
  transition: opacity .15s ease;
}

.barra:hover .barra__corpo { opacity: .82; }
.barra__valor { font-size: 10.5px; color: var(--texto-fraco); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.barra__rotulo { font-size: 11px; color: var(--texto-suave); margin-top: 6px; white-space: nowrap; }

/* Barra horizontal de participação, para "como o dinheiro entrou". */
.forma-linha { margin-bottom: 14px; }
.forma-linha__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.forma-linha__topo span { text-transform: capitalize; }

.forma-linha__trilho {
  height: 8px;
  border-radius: 99px;
  background: #eef1f6;
  margin: 6px 0 4px;
  overflow: hidden;
}

.forma-linha__preenchido {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--azul) 0%, var(--azul-escuro) 100%);
}

/* --- caderneta ---

   O extrato é acordeão de <details>: cada conta abre mostrando os itens da
   venda. Nativo, sem JavaScript — o navegador já sabe abrir e fechar, e a
   busca do Ctrl+F encontra o conteúdo fechado. */

.caderneta { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }

.barra-filtro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  background: #fbfcfe;
}

.barra-filtro .botao { height: 38px; padding: 0 14px; font-size: 13px; }
.barra-filtro .contagem { font-size: 13px; color: var(--texto-fraco); font-weight: 600; }

.conta-extrato {
  border: 1px solid var(--borda);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}

.conta-extrato summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: #fbfcfe;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.conta-extrato summary::-webkit-details-marker { display: none; }
.conta-extrato[open] summary { border-bottom: 1px solid var(--borda); }
.conta-extrato__corpo { padding: 16px 18px; }

.itens-conta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }

.item-conta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #fbfcfe;
  font-size: 14px;
}

@media (max-width: 1000px) {
  .caderneta { grid-template-columns: 1fr; }
}

/* --- lista com detalhe ao lado ---

   O histórico do KROS não navega para outra tela ao abrir uma venda: o
   detalhe aparece à direita, e a lista continua ali. Quem confere o dia
   passa por dez vendas seguidas, e voltar da tela de detalhe dez vezes é
   onde a conferência vira suplício. */

.mestre-detalhe { display: grid; grid-template-columns: 1fr 460px; gap: 18px; align-items: start; }
.painel-detalhe { position: sticky; top: 20px; }

.item-venda {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.item-venda:hover { border-color: #cdd9f0; box-shadow: var(--sombra); transform: translateY(-1px); }

.item-venda.selecionada {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(79, 134, 247, .16);
  background: #fbfcff;
}

.item-venda__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.item-venda__total { font-size: 17px; font-weight: 800; white-space: nowrap; }
.item-venda__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.item-venda__meta .meta { font-size: 13px; color: var(--texto-suave); }

.detalhe-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.detalhe-numero { font-size: 20px; font-weight: 800; }

.quadros-detalhe { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 10px; }

.quadro {
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fbfcfe;
}

.quadro .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco); font-weight: 700; }
.quadro .valor { font-weight: 700; margin-top: 2px; }
.quadro.destaque { background: #f0fdf4; border-color: #bbf7d0; }
.quadro.destaque .rotulo { color: #166534; }
.quadro.destaque .valor { color: var(--verde-forte); }

.item-detalhe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}

.item-detalhe:last-of-type { border-bottom: none; }
.forma-devolucao { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.forma-devolucao input { width: 68px; text-align: center; padding: 8px; }
.forma-devolucao button { height: 38px; padding: 0 14px; font-size: 13px; }

@media (max-width: 1100px) {
  .mestre-detalhe { grid-template-columns: 1fr; }
  .painel-detalhe { position: static; }
}

/* --- PDV ---

   Duas colunas, como no KROS: carrinho e fechamento à esquerda, catálogo à
   direita. O carrinho fica grudado no topo ao rolar o catálogo — numa loja
   com trezentos produtos, perder o total de vista ao procurar o próximo
   item é o que faz o operador rolar para cima e para baixo o dia todo. */

.pdv { display: grid; grid-template-columns: 380px 1fr; gap: 18px; align-items: start; }
.pdv-carrinho { position: sticky; top: 20px; }

.titulo-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.titulo-secao h2 { margin: 0; }

.item-carrinho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}

.item-carrinho:last-child { border-bottom: none; }
.item-carrinho__nome { font-weight: 700; font-size: 14px; }
.item-carrinho__meta { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.item-carrinho__direita { display: flex; align-items: center; gap: 6px; }
.item-carrinho__subtotal { font-weight: 700; margin-right: 4px; white-space: nowrap; }
.item-carrinho__direita .acao { width: 32px; height: 32px; border-radius: 10px; }

.totais-pdv {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--raio-campo);
  background: var(--azul-faixa);
}

.totais-pdv > div { display: flex; justify-content: space-between; padding: 3px 0; }
.totais-pdv span { color: var(--texto-suave); }
.totais-pdv .total { border-top: 1px solid #dbe3f5; margin-top: 6px; padding-top: 8px; }
.totais-pdv .total span { color: var(--texto); font-weight: 700; }
.totais-pdv .total b { font-size: 20px; }

/* Os dois campos ocupam a largura toda, empilhados, com o mesmo desenho do
   resto dos formulários. Lado a lado eles ficavam com 180px cada quando o
   catálogo estreita, e um campo de código de barras que não mostra o código
   inteiro é um campo que não serve. */
.busca-pdv { margin-bottom: 18px; }

.busca-pdv #leitor {
  font-size: 17px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  padding: 14px 16px;
}

.cards-produto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}

.card-produto {
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.card-produto:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.card-produto.sem-estoque { opacity: .65; }
.card-produto__nome { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.card-produto__codigo { font-size: 12px; color: var(--texto-fraco); }
.card-produto__preco { font-size: 20px; font-weight: 800; margin-top: 4px; }
.card-produto__estoque { font-size: 12.5px; font-weight: 700; }
.card-produto__estoque.tem { color: var(--verde-forte); }
.card-produto__estoque.zerado { color: var(--vermelho); }

.card-produto__acoes { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.card-produto__acoes .botao { flex: 1; height: 38px; font-size: 13.5px; }
.card-produto__acoes .acao { width: 38px; height: 38px; flex: 0 0 auto; }

@media (max-width: 1100px) {
  .pdv { grid-template-columns: 1fr; }
  .pdv-carrinho { position: static; }
}

/* Uma linha de pagamento do PDV: forma, valor, vencimento (só no fiado) e
   remover. Editável no lugar — trocar dinheiro por pix não deve obrigar a
   apagar a linha e montar outra. */
.linha-pagamento {
  display: grid;
  grid-template-columns: 1fr 150px auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-campo);
  background: #fbfcfe;
}

.linha-pagamento:has(.vencimento) { grid-template-columns: 1fr 150px 96px auto; }

.campo-linha label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--texto-fraco);
  margin-bottom: 5px;
}

.linha-pagamento .vencimento { text-align: center; }
.linha-pagamento > .acao { margin-bottom: 1px; }

/* O "R$" fica dentro do campo, colado ao valor: sem ele, três caixas com
   números soltos numa linha não dizem qual é dinheiro e qual é dia. */
.campo-moeda { position: relative; }

.campo-moeda span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-fraco);
  pointer-events: none;
}

.campo-moeda input {
  padding-left: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.resumo-pagamento {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

.resumo-pagamento > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
}

.resumo-pagamento span { color: var(--texto-suave); }
.resumo-pagamento b { font-size: 16px; }
.resumo-pagamento b.falta { color: var(--vermelho); }
.resumo-pagamento b.quitado { color: var(--verde-forte); }

.acoes-linha { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }

/* Verde discreto: dar entrada é a ação positiva da linha, e ela precisa se
   distinguir das outras num aperto de olho. */
.acao.entrada { border-color: #d8f1e0; background: #eefaf2; color: var(--verde-forte); }
.acao.entrada:hover { background: #e2f5ea; }

/* --- avisos e etiquetas --- */

.aviso {
  padding: 14px 18px;
  border-radius: var(--raio-campo);
  margin-bottom: 18px;
  border: 1px solid;
  font-size: 14.5px;
}

.aviso.erro { background: #fdf0ef; border-color: #f6cfcb; color: #b42318; }
.aviso.sucesso { background: #ecfdf5; border-color: #bfe6cc; color: #16a34a; }
.aviso.atencao { background: #fdf6e8; border-color: #f0dcae; color: var(--ambar); }

.etiqueta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: #f1f2f5;
  color: #5c6170;
}

.etiqueta.ok { background: var(--verde); color: #fff; }
.etiqueta.alerta { background: var(--ambar-suave); color: var(--ambar); }
.etiqueta.parada { background: var(--vermelho-claro); color: #fff; }
.etiqueta.neutra { background: #f1f2f5; color: #5c6170; }
.etiqueta.info { background: var(--azul-suave); color: var(--azul-tinta); }

/* --- painel (home) ---

   O KROS abre com relógio, estado do caixa e os números do dia antes de
   qualquer navegação: quem abre a loja de manhã quer saber se o caixa está
   aberto e quanto vendeu, não escolher um menu. */

.topo-painel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.topo-painel .identidade { display: flex; align-items: center; gap: 12px; }

.topo-painel .simbolo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--azul-suave);
  color: var(--azul-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
}

.topo-painel .nome { font-size: 1.3rem; font-weight: 700; }
.topo-painel .quando { text-align: right; }
.topo-painel .data { font-size: 13px; color: var(--texto-fraco); text-transform: capitalize; }
.topo-painel .hora { font-size: 1.2rem; font-weight: 700; }

.faixa-caixa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-radius: var(--raio-campo);
  margin-bottom: 20px;
  font-weight: 700;
}

.faixa-caixa.aberto { background: #ecfdf5; color: #16a34a; }
.faixa-caixa.fechado { background: #fef2f2; color: #dc2626; }

/* Os sete dias da jornada numa linha só: a escala da semana se lê de
   relance, e empilhar sete campos faria o diálogo passar da tela. */
.grade-jornada { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.grade-jornada label { font-size: 11px; text-align: center; color: var(--texto-fraco); }
.grade-jornada input { text-align: center; padding: 10px 4px; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .grade-jornada { grid-template-columns: repeat(4, 1fr); }
}

/* A faixa de ponto na home. Mesma linguagem da faixa de caixa: o estado é a
   cor, e a ação fica do lado direito. Verde é "você está trabalhando". */
.faixa-ponto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--raio-campo);
  margin-bottom: 20px;
  border: 1px solid;
}

.faixa-ponto.dentro { background: #ecfdf5; border-color: #bfe6cc; }
.faixa-ponto.fora { background: #f4f6fb; border-color: var(--borda-forte); }
.faixa-ponto__estado { font-weight: 700; font-size: 13px; letter-spacing: .05em; }
.faixa-ponto.dentro .faixa-ponto__estado { color: #16a34a; }
.faixa-ponto.fora .faixa-ponto__estado { color: var(--texto-suave); }
.faixa-ponto__detalhe { font-size: 14px; color: var(--texto-suave); margin-top: 2px; }

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.kpi {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 18px;
  box-shadow: var(--sombra);
  padding: 18px 20px;
}

.kpi .rotulo { font-size: 12px; font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .05em; }
.kpi .valor { font-size: 1.6rem; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; }
.kpi .sub { font-size: 13px; color: var(--texto-suave); }

.acoes-rapidas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.acoes-rapidas .botao { width: 100%; height: 56px; border-radius: 18px; font-size: 15px; }
.acoes-rapidas .botao.principal { transform: scale(1.02); }
.acoes-rapidas .botao.principal:hover { transform: scale(1.02) translateY(-2px); }

.painel-corpo { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }

/* --- tela de entrada --- */

.tela-centro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #06214f 0%, #0a2f7a 60%, #123a94 100%);
  padding: 24px;
}

.caixa-entrada {
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.caixa-entrada.larga { max-width: 580px; }
.caixa-entrada h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; }
.caixa-entrada .subtitulo { color: var(--texto-suave); font-size: .92rem; margin: 0 0 24px; }
.caixa-entrada button { width: 100%; margin-top: 8px; }
.rodape-entrada { margin-top: 20px; text-align: center; font-size: 14px; color: var(--texto-suave); }
.rodape-entrada a { color: var(--azul-tinta); font-weight: 600; text-decoration: none; }

a { color: var(--azul-tinta); }
.dinheiro { font-variant-numeric: tabular-nums; }

/* --- menu no celular ---

   Abaixo de 961px a barra lateral de 250px espremia o conteúdo e não dava
   para navegar. Vira gaveta: escondida fora da tela, aberta pelo botão
   fixo, com fundo escurecido para fechar tocando fora. */

.abre-menu, .fundo-menu { display: none; }

@media (max-width: 960px) {
  .conteudo { padding: 76px 14px 32px; }
  .cabecalho-pagina { padding: 22px 18px; }
  .kpis, .acoes-rapidas { grid-template-columns: repeat(2, 1fr); }
  .painel-corpo { grid-template-columns: 1fr; }

  .barra-lateral {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 110;
  }

  .barra-lateral.aberta { transform: translateX(0); box-shadow: 12px 0 40px rgba(0, 0, 0, .35); }

  .abre-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 14px;
    left: 14px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--navy);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
    z-index: 90;
  }

  .fundo-menu.visivel {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(9, 14, 33, .45);
    z-index: 100;
  }

  .linha { flex-wrap: wrap; }
  .linha > * { flex: 1 1 220px; }
}

@media (max-width: 560px) {
  .kpis, .acoes-rapidas { grid-template-columns: 1fr; }
  .cartao { padding: 18px; }
  .cartao > table:last-child { margin: 4px -18px -18px; width: calc(100% + 36px); }
  .cartao > table:last-child thead th:first-child,
  .cartao > table:last-child tbody td:first-child { padding-left: 18px; }
}

/* Item já comprado na lista: riscado e apagado, como quem risca no papel.
   Continua clicável para desmarcar — engano no mercado é comum. */
.item-detalhe.riscado .linha-titulo { text-decoration: line-through; color: var(--texto-fraco); }
.item-detalhe.riscado { opacity: .65; }

/* Cupom em texto puro (fechamento de caixa, venda).
   Fonte monoespaçada porque o alinhamento das colunas é feito com espaços,
   do jeito que a bobina de 80mm imprime — em fonte proporcional as colunas
   de valor desandam. */
.cupom {
    margin: 0;
    padding: 14px 16px;
    background: #fbfbfc;
    border: 1px solid var(--borda, #e3e6ea);
    border-radius: 10px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.45;
    color: #1a1d21;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 420px;
    overflow-y: auto;
}

/* ==========================================================================
   Porta de entrada pública (Pages/Index)

   Mesmos tokens do sistema — quem se cadastra aqui reconhece o produto na
   primeira tela de dentro. O gradiente navy→roxo, que no sistema é a barra
   lateral, aqui é a capa: é a assinatura visual do KROS, e ela é a primeira
   coisa que a pessoa vê.
   ========================================================================== */

body.publico {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.publico .dentro {
    width: min(1080px, calc(100% - 48px));
    margin: 0 auto;
}

.topo-publico {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(1080px, calc(100% - 48px));
    margin: 0 auto;
    padding: 22px 0;
}

.marca-publica {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--texto);
    text-decoration: none;
}

.marca-publica .simbolo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--navy), var(--navy-fim));
    color: #fff;
    font-weight: 700;
}

/* O botão da área restrita é discreto de propósito: quem chega aqui pela
   primeira vez está decidindo se quer o produto, e o cliente que veio pelo
   endereço puro sabe exatamente onde procurar. */
.botao-restrito {
    padding: 10px 18px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-botao);
    background: var(--superficie);
    color: var(--navy);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.botao-restrito:hover { background: var(--azul-suave); border-color: var(--azul); }

.capa {
    background: linear-gradient(140deg, var(--navy), var(--navy-fim));
    color: #fff;
    padding: 72px 0 80px;
    margin-bottom: 56px;
    border-radius: 0 0 var(--raio-hero) var(--raio-hero);
}

.capa .tarja {
    display: inline-block;
    margin: 0 0 18px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.capa h1 {
    margin: 0 0 16px;
    max-width: 18ch;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.12;
    font-weight: 700;
}

.capa .chamada {
    margin: 0 0 30px;
    max-width: 62ch;
    font-size: 1.06rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
}

.acoes-capa { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.capa .miudo { margin: 22px 0 0; font-size: .88rem; color: rgba(255, 255, 255, .62); }
.capa .vinculo { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

body.publico .botao.grande { padding: 15px 30px; font-size: 1rem; }

body.publico .bloco { margin-bottom: 60px; }
body.publico .bloco h2 { margin: 0 0 6px; font-size: 1.55rem; font-weight: 700; }
body.publico .subtitulo-bloco { margin: 0 0 26px; color: var(--texto-suave); max-width: 66ch; }

.grade-recursos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.grade-recursos.tres { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.grade-recursos article {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
}

.grade-recursos h3 { margin: 14px 0 8px; font-size: 1.05rem; font-weight: 700; }
.grade-recursos p { margin: 0; color: var(--texto-suave); font-size: .94rem; line-height: 1.6; }

.grade-recursos .simbolo {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--azul-suave);
    font-size: 1.25rem;
}

.grade-recursos .simbolo.verde { background: var(--verde-suave); }
.grade-recursos .simbolo.roxo  { background: var(--roxo-suave); }

.grade-precos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-bottom: 46px;
}

.cartao-preco {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cartao-preco.destaque { box-shadow: var(--sombra-alta); border: 2px solid var(--azul); }
.cartao-preco h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.cartao-preco .valor { font-size: 2.1rem; font-weight: 700; color: var(--navy); }
.cartao-preco .valor span { font-size: .95rem; font-weight: 600; color: var(--texto-suave); }
.cartao-preco p { margin: 0; color: var(--texto-suave); font-size: .94rem; line-height: 1.6; }
.cartao-preco .botao, .cartao-preco .vinculo { margin-top: auto; }
.cartao-preco .vinculo { color: var(--azul-tinta); font-weight: 600; text-decoration: none; }

.titulo-addons { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; }

.grade-addons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.grade-addons article {
    background: var(--superficie);
    border-radius: var(--raio-campo);
    border: 1px solid var(--borda);
    padding: 18px 20px;
}

.grade-addons .cabeca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.grade-addons h4 { margin: 0; font-size: 1rem; font-weight: 700; }
.grade-addons .preco { font-weight: 700; color: var(--navy); white-space: nowrap; }
.grade-addons .preco small { font-weight: 600; color: var(--texto-suave); }
.grade-addons p { margin: 0; color: var(--texto-suave); font-size: .9rem; line-height: 1.55; }

.chamada-final {
    background: var(--azul-faixa);
    padding: 60px 0;
    text-align: center;
}

.chamada-final h2 { margin: 0 0 10px; font-size: 1.7rem; font-weight: 700; }
.chamada-final p { margin: 0 auto 26px; max-width: 54ch; color: var(--texto-suave); }

.rodape-publico {
    background: var(--navy);
    color: rgba(255, 255, 255, .78);
    padding: 34px 0;
}

.rodape-publico .dentro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.rodape-publico strong { color: #fff; font-size: 1.02rem; }
.rodape-publico p { margin: 4px 0 0; font-size: .9rem; }
.rodape-publico .acoes { display: flex; align-items: center; gap: 18px; }
.rodape-publico .vinculo { color: #fff; font-weight: 600; text-decoration: none; }

@media (max-width: 560px) {
    .capa { padding: 52px 0 58px; }
    .acoes-capa { flex-direction: column; align-items: stretch; }
    .acoes-capa .botao, .acoes-capa .vinculo { text-align: center; }
    .rodape-publico .dentro { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   CAMADA DE ACABAMENTO

   Revisão de design system feita por cima do que já existia, e não no lugar
   dele: os tokens do KROS continuam sendo a identidade — gradiente navy,
   hero com ícone, pílula do menu, casca arredondada da tabela. O que muda é
   o acabamento, que é onde um sistema parece profissional ou parece um
   protótipo: profundidade em camadas, movimento com propósito, foco visível,
   números que não dançam.

   Regra que vale para tudo aqui: movimento só onde ele informa. Nada anima
   por enfeite, porque num sistema que a pessoa usa oito horas por dia
   animação gratuita cansa antes do fim do primeiro dia. E tudo desliga em
   prefers-reduced-motion, no fim do arquivo.
   ========================================================================== */

:root {
  /* Sombra em camadas: uma linha de contato curta e fechada, outra ampla e
     difusa. Uma sombra só, grande, deixa o elemento boiando; duas dão a
     mesma profundidade sem borrar a borda. */
  --sombra-1: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04);
  --sombra-2: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 20px rgba(15, 23, 42, .07);
  --sombra-3: 0 4px 8px rgba(15, 23, 42, .06), 0 16px 36px rgba(15, 23, 42, .10);

  /* Curva única para o sistema inteiro. Saída rápida, chegada macia — é o
     que dá a sensação de resposta imediata sem parecer que travou. */
  --curva: cubic-bezier(.2, .7, .3, 1);
  --rapido: .14s;
  --normal: .22s;

  --anel-foco: 0 0 0 3px rgba(79, 134, 247, .32);
}

/* Tipografia: nada de fonte externa (o sistema roda em loja com internet
   ruim e o primeiro paint não pode esperar um download). O ganho vem do
   ajuste: suavização, títulos um pouco mais fechados e — o que mais importa
   num sistema de comércio — algarismos de largura fixa. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .cartao h2, .cabecalho-pagina h1 { letter-spacing: -.014em; }

/* Dinheiro, quantidade e relógio com largura fixa por dígito: sem isto a
   coluna de valores "dança" a cada linha e conferir de relance fica mais
   lento — que é exatamente o que se faz numa lista de vendas. */
.dinheiro, .numero, .valor, .kpi .valor, .indicador .valor, .totais-pdv,
.item-carrinho__subtotal, .resumo-pagamento, .topo-painel .hora, td.numero,
.cupom, .barra__valor, .preco {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- foco visível ---
   Um sistema operado no teclado (o caixa é) precisa mostrar onde está o
   foco. :focus-visible e não :focus para o anel não aparecer no clique de
   mouse, onde ele só polui. */
a:focus-visible,
button:focus-visible,
.botao:focus-visible,
.acao:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
  border-radius: var(--raio-botao);
}

.barra-lateral a:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }

/* --- botões ---
   O press é o que dá sensação de botão de verdade: desce 1px e a sombra
   encolhe junto, como se ele encostasse na superfície. */
button, .botao {
  box-shadow: 0 6px 16px rgba(56, 111, 216, .22);
  transition: transform var(--rapido) var(--curva),
              box-shadow var(--rapido) var(--curva),
              filter var(--rapido) var(--curva);
}

button:hover, .botao:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(56, 111, 216, .28); }
button:active, .botao:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(56, 111, 216, .24); }

button.secundario, .botao.secundario { box-shadow: var(--sombra-1); }
button.secundario:hover, .botao.secundario:hover { box-shadow: var(--sombra-2); border-color: var(--borda-forte); }
button.secundario:active, .botao.secundario:active { transform: translateY(1px); box-shadow: none; }

button.perigo:hover, .botao.perigo:hover { box-shadow: 0 10px 22px rgba(220, 38, 38, .3); }

.acao { transition: background-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), color var(--rapido) var(--curva); }
.acao:hover { box-shadow: var(--sombra-2); }
.acao:active { transform: translateY(1px); box-shadow: none; }

/* Botão ocupado: some o texto e gira um anel no lugar, mantendo a largura.
   Sem manter a largura o formulário inteiro salta no momento em que a pessoa
   clica, que é justamente quando ela está olhando para lá. Ver site.js. */
button.carregando, .botao.carregando {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}

button.carregando::after, .botao.carregando::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girando .6s linear infinite;
}

button.secundario.carregando::after {
  border-color: rgba(62, 74, 93, .3);
  border-top-color: #3e4a5d;
}

@keyframes girando { to { transform: rotate(360deg); } }

/* --- superfícies ---
   Profundidade em camadas no lugar da sombra única e chapada. */
.cartao, .indicador, .casca-tabela, .kpi { box-shadow: var(--sombra-1); }

/* Cartões não são clicáveis: eles não reagem ao mouse. Quem reage é o que
   leva a algum lugar — produto no PDV, venda no histórico, ação de linha. */
.card-produto, .item-venda {
  transition: transform var(--normal) var(--curva),
              box-shadow var(--normal) var(--curva),
              border-color var(--normal) var(--curva);
}

.card-produto:hover, .item-venda:hover { box-shadow: var(--sombra-2); }
.card-produto:active { transform: translateY(0) scale(.995); }

/* --- tabelas --- */
tbody tr td { transition: background-color var(--rapido) linear; }
tbody tr:hover td { background: var(--azul-faixa); }

/* Cabeçalho que acompanha a rolagem: em lista longa de produto ou de venda,
   perder o nome da coluna no meio da página é perder a referência do que se
   está lendo. */
.casca-tabela { position: relative; }
.casca-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--azul-faixa);
  box-shadow: inset 0 -1px 0 var(--borda-forte);
}

/* --- campos ---
   O anel de foco fica um pouco mais forte que o anterior e passa a valer
   também para o campo desabilitado ter aparência de desabilitado (hoje ele
   parece editável e a pessoa clica em cima esperando digitar). */
input:not([type]), input[type=text], input[type=password], input[type=email],
input[type=number], input[type=date], input[type=search], select, textarea {
  transition: border-color var(--rapido) var(--curva),
              box-shadow var(--rapido) var(--curva),
              background-color var(--rapido) var(--curva);
}

input:hover:not(:focus):not(:disabled), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: #c9d3e4;
}

input:focus, select:focus, textarea:focus { box-shadow: var(--anel-foco); }

input:disabled, select:disabled, textarea:disabled {
  background: #f5f6f9;
  color: var(--texto-fraco);
  cursor: not-allowed;
}

::placeholder { color: #a8b0be; }

/* --- avisos ---
   Entram deslizando de cima: a mensagem aparece depois de uma ação, e o
   movimento é o que faz o olho ir até ela em vez de ela surgir já lida. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: var(--sombra-1);
  animation: aviso-entra var(--normal) var(--curva);
}

.aviso::before {
  font-size: 15px;
  line-height: 1.45;
  flex-shrink: 0;
}

.aviso.erro::before { content: "\26A0"; }
.aviso.sucesso::before { content: "\2713"; }
.aviso.atencao::before { content: "\1F6C8"; }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- entrada escalonada ---
   Os blocos da página não aparecem todos no mesmo quadro: entram em
   sequência curta, de cima para baixo, na ordem em que se lê. São 40ms de
   diferença — o suficiente para o olho seguir, longe o bastante de parecer
   apresentação de slides. O escalonamento para no sexto: além disso, a
   espera passaria a ser sentida como lentidão. */
.grade > *, .kpis > *, .acoes-rapidas > *, .cards-produto > * {
  animation: entrada var(--normal) var(--curva) backwards;
}

.grade > :nth-child(1), .kpis > :nth-child(1) { animation-delay: 0ms; }
.grade > :nth-child(2), .kpis > :nth-child(2) { animation-delay: 40ms; }
.grade > :nth-child(3), .kpis > :nth-child(3) { animation-delay: 80ms; }
.grade > :nth-child(4), .kpis > :nth-child(4) { animation-delay: 120ms; }
.grade > :nth-child(5), .kpis > :nth-child(5) { animation-delay: 160ms; }
.grade > :nth-child(n+6), .kpis > :nth-child(n+6) { animation-delay: 200ms; }

/* --- diálogo ---
   Abre crescendo do centro, com o fundo desfocando. É o gesto que diz "isto
   está por cima daquilo" sem precisar de sombra maior ainda. */
dialog[open] {
  animation: dialogo-entra var(--normal) var(--curva);
  box-shadow: var(--sombra-3), 0 24px 60px rgba(8, 20, 45, .24);
}

dialog[open]::backdrop {
  animation: fundo-entra var(--normal) ease;
  backdrop-filter: blur(3px);
}

@keyframes dialogo-entra {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }

/* --- barra lateral ---
   O item ativo ganha um marcador à esquerda, que é o que se lê de relance
   quando o menu tem doze itens. O ícone do item sob o mouse avança um fio:
   é resposta, não decoração. */
.barra-lateral a.ativo::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: #fff;
}

.barra-lateral a .icone { transition: transform var(--rapido) var(--curva); }
.barra-lateral a:hover .icone { transform: translateX(1px); }

/* Barra de rolagem discreta: a do sistema operacional, larga e cinza, corta
   o gradiente do menu ao meio. */
.barra-lateral { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.barra-lateral::-webkit-scrollbar { width: 8px; }
.barra-lateral::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 8px; }
.barra-lateral::-webkit-scrollbar-track { background: transparent; }

body { scrollbar-width: thin; scrollbar-color: #cdd5e3 transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #cdd5e3; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b6c0d3; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

::selection { background: rgba(79, 134, 247, .22); }

/* --- etiquetas ---
   Ponto colorido antes do texto: a cor sozinha não serve a quem não a
   distingue, e a bolinha dá a mesma leitura de "estado" que o KROS tem nos
   indicadores. */
.etiqueta { gap: 7px; box-shadow: var(--sombra-1); }

.etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
  flex-shrink: 0;
}

/* --- vazio ---
   O estado vazio é a primeira tela de todo cliente novo. Ele respira mais e
   o ícone pulsa uma vez ao aparecer, para não parecer erro de carregamento. */
.vazio { animation: entrada var(--normal) var(--curva); }
.vazio .simbolo { box-shadow: var(--sombra-1); }

/* --- landing --- */
.grade-recursos article, .cartao-preco, .grade-addons article {
  transition: transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva);
}

.grade-recursos article:hover, .grade-addons article:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.cartao-preco:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.botao-restrito { transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva); }
.botao-restrito:hover { box-shadow: var(--sombra-1); }

/* --- movimento reduzido ---
   Vestibular, enxaqueca, ou só preferência: quem pediu ao sistema operacional
   para reduzir movimento não deve receber nada disto. Some tudo — o sistema
   continua inteiro, só para de se mexer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  button:hover, .botao:hover, .card-produto:hover, .item-venda:hover,
  .grade-recursos article:hover, .cartao-preco:hover, .grade-addons article:hover {
    transform: none;
  }
}

/* --- correções apanhadas olhando as telas rodando --- */

/* "Domingo, 30 De Agosto": text-transform: capitalize sobe a inicial de toda
   palavra, e em português "de" fica no meio da data. Minúsculas com a
   primeira letra maiúscula é a forma certa. */
.topo-painel .data { text-transform: lowercase; }
.topo-painel .data::first-letter { text-transform: uppercase; }

/* O ponto colorido diz "estado". Numa etiqueta que é só um número — a
   quantidade em estoque — ele vira ruído: "• 6" não significa nada. */
.etiqueta.contagem { min-width: 52px; }
.etiqueta.contagem::before { display: none; }

/* Caixa fechado não é erro, é estado: às oito da manhã todo caixa está
   fechado, e abrir a primeira tela do dia com uma tarja vermelha ensina o
   operador a ignorar vermelho — que é a cor que precisa funcionar quando a
   venda falhar de verdade. Âmbar é o tom de "falta fazer isto". */
.faixa-caixa.fechado { background: var(--ambar-suave); color: var(--ambar); }

/* A barra de rolagem do menu cortava o gradiente ao meio. Some enquanto o
   mouse não está lá — a rolagem continua funcionando igual. */
.barra-lateral::-webkit-scrollbar-thumb { background: transparent; }
.barra-lateral:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
.barra-lateral { scrollbar-color: transparent transparent; }
.barra-lateral:hover { scrollbar-color: rgba(255,255,255,.22) transparent; }

/* --- prévia do painel na capa ---
   A capa tinha metade da largura vazia, que num site de produto lê como
   página inacabada. O que preenche é a própria tela do sistema: quem está
   decidindo quer ver o que vai receber, e mostrar é mais convincente do que
   escrever "painel completo". */
.capa .dentro { position: relative; }

@media (min-width: 1040px) {
    /* Duas colunas com o TEXTO agrupado num contêiner. A primeira tentativa
       pôs cada parágrafo como item da grade — e aí cada um virou uma linha,
       a tarja esticou de ponta a ponta e o bloco desandou. */
    .capa .dentro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
        align-items: center;
        gap: 52px;
    }
}

.previa { display: none; }

@media (min-width: 1040px) {
    .previa { display: block; animation: previa-entra .5s var(--curva) backwards .12s; }
}

@keyframes previa-entra {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.previa-janela {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(4, 10, 30, .45);
    overflow: hidden;
    /* Uma inclinação de menos de um grau: o suficiente para a peça parecer
       apoiada na página em vez de colada nela. */
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
    transition: transform .4s var(--curva);
}

.previa-janela:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }

.previa-barra {
    display: flex;
    gap: 6px;
    padding: 11px 14px;
    background: #f2f4f8;
    border-bottom: 1px solid #e6eaf2;
}

.previa-barra span { width: 9px; height: 9px; border-radius: 50%; background: #d3d9e6; }

.previa-corpo { padding: 18px; color: var(--texto); }

.previa-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.previa-loja { display: flex; align-items: center; gap: 10px; }

.previa-loja .ponto {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--azul-suave);
    color: var(--azul-tinta);
    font-weight: 700;
    font-size: .9rem;
}

.previa-loja strong { display: block; font-size: .88rem; }
.previa-loja small { color: var(--texto-fraco); font-size: .75rem; }

.previa-etiqueta {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--verde-suave);
    color: var(--verde-forte);
    font-size: .72rem;
    font-weight: 700;
}

.previa-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }

.previa-kpis div {
    background: var(--fundo);
    border-radius: 12px;
    padding: 11px 12px;
}

.previa-kpis small { display: block; color: var(--texto-fraco); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.previa-kpis b { font-size: .96rem; font-variant-numeric: tabular-nums; }

.previa-linhas { border-top: 1px solid var(--borda); }

.previa-linhas div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--borda);
    font-size: .8rem;
}

.previa-linhas div:last-child { border-bottom: none; }
.previa-linhas span { color: var(--texto-suave); }
.previa-linhas b { font-variant-numeric: tabular-nums; }
.previa-linhas b.saida { color: var(--vermelho); }

/* ==========================================================================
   Frente de caixa em tela cheia

   A venda deixou de ser uma página do sistema e virou um modo: sem menu, com
   o total e o botão de fechar fixos no rodapé. O motivo é o balcão — durante
   a venda o operador não vai a lugar nenhum, e um menu de doze itens ao lado
   do carrinho é doze chances de errar o clique com a fila esperando.
   ========================================================================== */

body.tela-pdv {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fundo);
}

.topo-pdv {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: linear-gradient(90deg, var(--navy), var(--navy-fim));
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
}

.topo-pdv h1 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }

.sair-pdv {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
    transition: background-color var(--rapido) var(--curva);
}

.sair-pdv:hover { background: rgba(255, 255, 255, .24); }
.sair-pdv:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); }

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

.acoes-topo-pdv .acao {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
    box-shadow: none;
}

.acoes-topo-pdv .acao:hover { background: rgba(255, 255, 255, .24); box-shadow: none; }
.acoes-topo-pdv .acao[aria-pressed="true"] { background: #fff; color: var(--navy); }

/* Painel de preferências: ancorado no botão, não um diálogo. Trocar o fluxo
   de digitação é ajuste de meio segundo, não uma decisão que mereça modal. */
.menu-pdv { position: relative; }

.painel-preferencias {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(340px, calc(100vw - 32px));
    background: var(--superficie);
    color: var(--texto);
    border-radius: var(--raio-campo);
    box-shadow: var(--sombra-3);
    padding: 16px;
    z-index: 40;
    animation: entrada var(--normal) var(--curva);
}

.titulo-preferencia {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.painel-preferencias label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color var(--rapido) var(--curva);
}

.painel-preferencias label:hover { background: var(--azul-faixa); }
.painel-preferencias input { margin-top: 3px; flex-shrink: 0; width: auto; }
.painel-preferencias span { display: block; font-size: 13.5px; color: var(--texto-suave); line-height: 1.45; }
.painel-preferencias strong { display: block; color: var(--texto); font-size: 14px; font-weight: 600; }

.corpo-pdv {
    flex: 1 1 auto;
    padding: 20px 20px 96px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* Rodapé fixo com o total e o fechamento. */
.rodape-pdv {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    background: var(--superficie);
    border-top: 1px solid var(--borda-forte);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .07);
    z-index: 25;
}

.rodape-pdv button {
    height: 52px;
    padding: 0 34px;
    font-size: 15.5px;
}

.total-pdv { margin-left: auto; display: flex; align-items: baseline; gap: 14px; }
.total-pdv span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }

.total-pdv b {
    font-size: clamp(1.8rem, 3.4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

/* Quantidade na linha do carrinho e ao lado do leitor. */
.qtd-item {
    width: 58px;
    padding: 7px 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--borda-forte);
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
}

.campo-quantidade { flex: 0 0 96px; margin: 0; }
.campo-quantidade input { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Valores escondidos: some o número, fica a marca de que existe algo ali.
   Reaparece ao passar o mouse, para o operador conferir sem desligar. */
body.valores-ocultos .dinheiro,
body.valores-ocultos .total-pdv b {
    color: transparent;
    text-shadow: 0 0 9px rgba(47, 53, 69, .55);
    transition: none;
}

body.valores-ocultos .dinheiro:hover,
body.valores-ocultos .total-pdv b:hover {
    color: inherit;
    text-shadow: none;
}

body.valores-ocultos .total-pdv b:hover { color: var(--navy); }

/* Contagem ao lado do título da seção — "Carrinho (3)" sem virar etiqueta. */
.contagem {
    font-weight: 600;
    color: var(--texto-fraco);
    font-variant-numeric: tabular-nums;
}

.contagem::before { content: "("; }
.contagem::after { content: ")"; }

/* Estado vazio com ação: a primeira tela de todo cliente novo não pode ser
   só um aviso do que falta — tem que oferecer o caminho. */
.vazio strong { display: block; font-size: 15px; color: var(--texto); margin-bottom: 4px; }
.vazio p { margin: 0 0 14px; font-size: 14px; }
.vazio .botao { margin-top: 4px; }

@media (max-width: 720px) {
    .corpo-pdv { padding: 14px 14px 92px; }
    .rodape-pdv { gap: 12px; padding: 12px 14px; }
    .rodape-pdv button { flex: 1; padding: 0 18px; }
    .total-pdv b { font-size: 1.5rem; }
}

/* O leitor e a quantidade dividem a mesma faixa quando o fluxo é
   "quantidade, depois produto": a mão vai de um ao outro sem procurar, e a
   quantidade fica estreita porque nela se digita 2, não 200. */
.busca-pdv:has(#campoQuantidade:not([hidden])) {
    display: grid;
    grid-template-columns: 1fr 108px;
    gap: 14px;
    align-items: start;
}

.busca-pdv:has(#campoQuantidade:not([hidden])) .campo:last-child {
    grid-column: 1 / -1;
}

.busca-pdv #quantidadePdv {
    font-size: 17px;
    padding: 14px 10px;
}

/* Especificidade: "input:not([type])" do bloco de formulários vale (0,1,1) e
   vence a classe sozinha, esticando a quantidade para 100% da linha. Prefixar
   com o container resolve sem !important. */
.item-carrinho .qtd-item {
    width: 56px;
    flex: 0 0 56px;
    padding: 7px 6px;
}

.item-carrinho__direita { gap: 8px; align-items: center; }
.item-carrinho__nome { line-height: 1.3; }

/* Atalho impresso no próprio botão: é assim que se ensina atalho sem manual.
   Discreto de propósito — quem não usa teclado não deve nem reparar. */
kbd {
    display: inline-block;
    margin-left: 2px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .28);
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
}

.botao.secundario kbd, button.secundario kbd {
    background: var(--azul-faixa);
    border-color: var(--borda-forte);
    color: var(--texto-suave);
}

/* Linha de totais no rodapé da tabela: a conferência de uma lista de
   produtos ou de vendas termina numa soma, e hoje ela era feita de cabeça. */
tfoot td {
    border-top: 2px solid var(--borda-forte);
    border-bottom: none;
    background: var(--azul-faixa);
    font-weight: 700;
    color: var(--texto);
}

tfoot td:first-child {
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
}