:root {
  --tinta: #14181f;
  --texto-muted: #6b7280;
  --papel: #f6f7f9;
  --borda: #e2e5ea;
  --azul: #2563eb;
  --azul-escuro: #1d4ed8;
  --verde: #16a34a;
  --verde-bg: #e7f8ed;
  --vermelho: #dc2626;
  --vermelho-bg: #fdecec;
  --amarelo: #b45309;
  --amarelo-bg: #fdf3e3;
  --cinza-bg: #eef0f3;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(20, 24, 31, .04), 0 1px 8px rgba(20, 24, 31, .04);
  --sidebar-bg: #0f2a54;
  --sidebar-hover: rgba(255, 255, 255, .1);
  --sidebar-largura: 230px;
  --pdv-destaque: #3730a3;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.45;
}

h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 .75rem; }

/* --- Menu lateral -------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
  width: var(--sidebar-largura); flex-shrink: 0; background: var(--sidebar-bg); color: #fff;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 10;
}
.sidebar-topo { padding: 1.2rem 1.1rem; }
.sidebar-marca { font-weight: 700; font-size: 1.05rem; color: #fff; }
.sidebar-menu { flex: 1; display: flex; flex-direction: column; gap: .15rem; padding: 0 .6rem; }

.sidebar-item {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .7rem .9rem; border-radius: 8px; border: none; background: transparent;
  color: rgba(255, 255, 255, .92); font-size: .9rem; font-weight: 600; text-align: left;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.sidebar-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.sidebar-item:hover { background: var(--sidebar-hover); }
.sidebar-item.ativo { background: #fff; color: var(--sidebar-bg); }

.sidebar-item-grupo { position: relative; }
.sidebar-submenu {
  display: none;
  position: absolute; left: 100%; top: 0; background: #fff; color: var(--tinta);
  border-radius: 10px; box-shadow: var(--sombra); padding: .4rem 0; min-width: 210px; z-index: 60;
  max-height: calc(100vh - 1rem); overflow-y: auto;
}
.sidebar-item-grupo:hover .sidebar-submenu { display: block; }
/* "Configurações" é o último item do menu (perto do rodapé) e tem a lista
   mais longa — abrindo pra baixo (padrão) o fim da lista (ex.: "Terminais")
   ficava cortado abaixo da borda da janela em telas mais baixas, sem
   scroll nenhum pra alcançar. Abre pra cima em vez de pra baixo. */
.sidebar-submenu-config { top: auto; bottom: 0; }
.sidebar-submenu a {
  display: block; padding: .55rem 1.1rem; color: var(--tinta); text-decoration: none; font-size: .89rem;
}
.sidebar-submenu a:hover { background: var(--borda); }

.sidebar-rodape {
  padding: 1rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-direction: column; gap: .3rem;
}
.sidebar-usuario { font-size: .85rem; color: rgba(255, 255, 255, .8); }
.sidebar-rodape a { color: #fff; font-size: .88rem; font-weight: 600; text-decoration: none; }
.sidebar-rodape a:hover { text-decoration: underline; }

.app-conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-conteudo .messages { margin: 1.1rem 1.5rem 0; }

@media (max-width: 860px) {
  :root { --sidebar-largura: 68px; }
  .sidebar-marca, .sidebar-item span, .sidebar-usuario { display: none; }
  .sidebar-item { justify-content: center; padding: .7rem; }
  .sidebar-rodape { align-items: center; }
  .sidebar-submenu { left: 100%; }
}

main { padding: 1.5rem; max-width: 1400px; margin: 0 auto; width: 100%; }

/* --- Cartão de conteúdo -------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem 1.4rem;
}

/* --- Barra de busca (padrão pra listagens — ver MEMORIA_PROJETO.md) ------ */
.busca-barra {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .5rem .5rem 1rem; margin-bottom: 1rem;
}
.busca-barra form { flex: 1; display: flex; align-items: center; }
.busca-input {
  flex: 1; border: none; outline: none; font-size: .95rem;
  padding: .5rem 0; background: transparent; color: var(--tinta);
}
.busca-input::placeholder { color: #9aa1ad; }
.busca-acoes { display: flex; align-items: center; gap: .2rem; }

/* --- Paginação (regra geral: toda listagem, "Por página" + intervalo +
   setas), template compartilhado em templates/_paginacao.html — fica no
   TOPO da listagem, acima dos registros. --------------------------- */
.paginacao {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.1rem;
  padding: 0 0 .8rem; margin-bottom: .8rem; border-bottom: 1px solid var(--borda);
  font-size: .84rem; color: var(--texto-muted);
}
.paginacao-por-pagina { display: flex; align-items: center; gap: .5rem; }
.paginacao-por-pagina select {
  padding: .3rem .5rem; border: 1px solid var(--borda); border-radius: 6px;
  font-size: .84rem; color: var(--tinta); background: #fff;
}
.paginacao-intervalo { white-space: nowrap; }
.paginacao-setas { display: flex; align-items: center; gap: .2rem; }
.paginacao-setas .icone-btn { width: 1.8rem; height: 1.8rem; }
.paginacao-setas .icone-btn svg { width: 16px; height: 16px; }
.paginacao-setas .desabilitado { opacity: .35; cursor: default; }
.icone-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; border: none;
  background: transparent; color: var(--texto-muted); cursor: pointer;
  padding: 0; transition: background .12s ease, color .12s ease;
}
.icone-btn:hover { background: var(--papel); color: var(--tinta); }
.icone-btn.ativo { background: #e6f0ff; color: var(--azul); }
.icone-btn svg { width: 18px; height: 18px; }
.busca-filtros {
  padding: 0 1.4rem 1rem; margin-top: -.4rem; display: flex; align-items: center; gap: .6rem;
}
.busca-filtros select {
  padding: .4rem .6rem; border: 1px solid var(--borda); border-radius: 6px; font-size: .88rem;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.page-header h1 { margin: 0; }

/* --- Tabela --------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; background: #fff; font-size: .92rem; }
table th, table td { padding: .55rem .7rem; text-align: left; vertical-align: middle; }
table th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-muted);
  border-bottom: 2px solid var(--borda);
  white-space: nowrap;
}
table td { border-bottom: 1px solid var(--borda); }
table tbody tr:hover { background: var(--papel); }
table tbody tr:last-child td { border-bottom: none; }
.tabela-scroll { overflow-x: auto; border-radius: var(--raio); }
.num { font-variant-numeric: tabular-nums; }
/* Campo numérico compacto dentro de linha de tabela (ex.: quantidade,
   custo unitário item a item) — mesmo padrão sem spinner/com vírgula dos
   outros campos numéricos do sistema, só que sem o rótulo/moldura do
   .campo-underline (não cabe dentro de uma célula de tabela). */
.input-tabela {
  width: 100%; min-width: 4.5rem; border: none; border-bottom: 1px solid var(--borda);
  background: transparent; font-size: inherit; color: inherit; padding: .2rem 0; text-align: right;
}
.input-tabela:focus { outline: none; border-bottom-color: var(--azul); }
.mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: .82rem; color: var(--texto-muted); }

/* --- Lista de registros (padrão PADRÃO de listagem — ver MEMORIA_PROJETO.md) */
/* Um "registro" por linha (nome em destaque + linha de metadados em itálico
   + selo de situação), em vez de tabela densa com muitas colunas. Zebra
   sutil entre registros, sem bordas verticais. */
.lista-registros { display: flex; flex-direction: column; }

/* Resultado de busca flutuante (ex.: PDV) — fica por cima do resto da
   tela em vez de empurrar o layout; o que estiver embaixo continua visível
   ao redor. */
/* Layout principal do PDV: 2 colunas (Produtos/Carrinho à esquerda,
   Administrativo/logo/Total à direita) — quebra pra empilhado sozinho via
   flex-wrap quando não cabem lado a lado. Ver media query mais abaixo pra
   monitores/janelas pequenas (o app assume janela maximizada por padrão —
   ver launcher.py — então precisa compactar em vez de só empilhar, senão
   os botões de Cancelar/Pagamento ficam fora da área visível). */
.pdv-tela-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; width: 100%; }
.pdv-coluna-esquerda { flex: 0 1 600px; max-width: 600px; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.pdv-coluna-direita { flex: 1 1 380px; min-width: 280px; display: flex; flex-direction: column; gap: 1rem; }
.pdv-logo-card { text-align: center; min-height: 260px; display: flex; align-items: center; justify-content: center; }
.pdv-logo-icone { width: 80px; height: 80px; }

.pdv-resultado-flutuante {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 80;
  background: #fff; border-radius: var(--raio); border: 1px solid var(--borda);
  box-shadow: 0 8px 24px rgba(20, 24, 31, .16), 0 2px 6px rgba(20, 24, 31, .08);
  max-height: 360px; overflow-y: auto; padding: .3rem;
}

/* Carrinho do PDV (lista numerada, item mais recente destacado em azul) */
.pdv-carrinho-lista {
  display: flex; flex-direction: column;
  max-height: 394px; overflow-y: auto;
}
.registro-item.resultado-selecionado { background: #eaeef4; }
.registro-desabilitado { opacity: .45; pointer-events: none; }
.registro-removido { opacity: .5; text-decoration: line-through; }
.pdv-carrinho-item {
  display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem;
  border-radius: 8px; cursor: pointer;
}
.pdv-carrinho-item:nth-child(even) { background: var(--papel); }
.pdv-carrinho-item:hover { background: #eaeef4; }
.pdv-carrinho-item.selecionado { outline: 2px solid #03243E; outline-offset: -2px; }
.pdv-carrinho-num { flex-shrink: 0; width: 1.5rem; text-align:center; font-weight: 700; color: var(--texto-muted); }
.pdv-carrinho-info { flex: 1; min-width: 0; }
.pdv-carrinho-total { flex-shrink: 0; font-weight: 700; }
.pdv-carrinho-qtd {
  width: 3rem; border: none; border-bottom: 1px solid var(--borda); background: transparent;
  font-style: italic; font-size: inherit; color: inherit; padding: 0; text-align: center;
}
.pdv-carrinho-qtd:focus { outline: none; border-bottom-color: var(--azul); }

/* Faixa em destaque no topo do PDV — mesmo padrão do sistema de
   referência: mostra o nome do último item incluído durante a venda, e
   troca pra "Troco: R$ X" assim que uma venda é finalizada (volta a
   mostrar o item assim que o próximo item é incluído). */
.pdv-info-topo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--sidebar-bg); border-radius: var(--raio);
  padding: .8rem 1.5rem; margin-bottom: 1rem;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
}

/* Coluna direita do PDV (Cliente + Pagamento/Total) — card com o total
   em destaque, cor de acento própria (não é nem o azul nem o vermelho do
   resto do sistema, pedido explícito a partir de screenshot de referência). */
.pdv-pagamento-titulo { font-weight: 700; color: var(--pdv-destaque); margin: 0 0 1rem; }
.pdv-total-box {
  border-radius: var(--raio); padding: 1rem 1.2rem;
  text-align: right; margin-top: 1rem;
}
.pdv-modo-venda-tag {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: .4rem;
}
.pdv-modo-nfce { background: var(--verde-bg); color: #15803d; }
.pdv-modo-pdv { background: #fff3cd; color: #92620a; }
.pdv-total-rotulo { display: block; font-size: 2.6rem; font-weight: 700; color: var(--pdv-destaque); }
.pdv-total-valor { display: block; font-size: 3.6rem; font-weight: 700; color: var(--pdv-destaque); }
.pdv-pagamentos-resumo { font-size: .88rem; color: var(--texto-muted); }
.pdv-pagamentos-resumo p { margin: .25rem 0; }

/* Janela pequena (PDV off numa janela não-maximizada, monitor menor) — o
   app inteiro foi feito assumindo maximizado (ver comentário em
   launcher.py); em vez de só empilhar as colunas (o que empurra Cancelar/
   Pagamento pra fora da área visível sem o usuário perceber que dá pra
   rolar), compacta o essencial pra sobrar altura: encolhe a faixa do topo,
   os paddings dos cards, o total em destaque e o cartão de logomarca (que
   é só decorativo) — a estrutura de 2 colunas continua igual. */
@media (max-height: 720px) {
  main { padding: .75rem; }
  .card { padding: .8rem 1rem; }
  .pdv-info-topo { padding: .4rem 1rem; margin-bottom: .6rem; font-size: 1.1rem; }
  .pdv-logo-card { min-height: 0; padding-top: .8rem; padding-bottom: .8rem; }
  .pdv-logo-icone { width: 40px; height: 40px; }
  .pdv-total-rotulo { font-size: 1.5rem; }
  .pdv-total-valor { font-size: 2.1rem; }
  .pdv-carrinho-lista { max-height: 200px; }
  .pdv-resultado-flutuante { max-height: 220px; }
}

@media (max-width: 900px) {
  .pdv-coluna-esquerda { flex-basis: 100%; max-width: 100%; }
  .pdv-coluna-direita { flex-basis: 100%; }
}

/* --- Popup de pagamento (F10) — "tela de finalização de cupom" --------- */
.pdv-modal-fundo {
  position: fixed; inset: 0; background: rgba(15, 18, 25, .55);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1rem;
}
.pdv-modal {
  background: #fff; border-radius: var(--raio); box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  width: 100%; max-width: 960px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.pdv-modal-cabecalho {
  background: var(--pdv-destaque); color: #fff; text-align: center; font-weight: 700;
  font-size: 1.3rem; letter-spacing: .03em; padding: 1rem;
}
.pdv-modal-corpo { display: flex; gap: 0; flex: 1; min-height: 0; overflow: hidden; }
.pdv-modal-formas { flex: 1.3; overflow-y: auto; padding: 1rem; border-right: 1px solid var(--borda); }
.pdv-modal-formas-titulo {
  display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .8rem; align-items: center;
  padding: 0 .6rem .6rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-muted); border-bottom: 2px solid var(--borda);
}
.pdv-forma-item {
  display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .8rem; align-items: center;
  padding: .7rem .6rem; border-radius: 8px; cursor: pointer; font-weight: 600;
}
.pdv-forma-item:hover { background: var(--papel); }
.pdv-forma-item.selecionada { background: #dbe6fe; }
.pdv-forma-icone {
  width: 2.4rem; height: 2.4rem; border-radius: 8px; background: var(--papel);
  display: flex; align-items: center; justify-content: center; color: var(--pdv-destaque);
}
.pdv-forma-icone svg { width: 20px; height: 20px; }
.pdv-modal-resumo { flex: 1; min-width: 260px; max-width: 320px; padding: 1.2rem; overflow-y: auto; }
.pdv-modal-rotulo { display: block; font-weight: 700; font-size: .95rem; margin: 0 0 .3rem; }
.pdv-modal-caixa {
  border: 1px solid var(--borda); border-radius: 8px; padding: .55rem .8rem;
  font-size: 1.1rem; margin-bottom: 1rem; background: var(--papel);
}
.pdv-modal-valor {
  width: 100%; border: 1px solid var(--borda); border-radius: 8px; padding: .6rem .8rem;
  font-size: 1.6rem; font-weight: 700; color: var(--pdv-destaque);
}
.pdv-modal-valor:focus { outline: none; border-color: var(--pdv-destaque); }
.pdv-modal-rodape {
  background: var(--sidebar-bg); color: rgba(255, 255, 255, .85); font-size: .82rem;
  padding: .7rem 1.2rem; display: flex; gap: 1.5rem; flex-wrap: wrap;
}
/* --- Confirmação estilo Delphi ("Atenção" / Sim (ENTER) / Não (ESC)) --- */
.pdv-confirmacao-fundo {
  position: fixed; inset: 0; background: rgba(15, 18, 25, .55);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: 1rem;
}
.pdv-confirmacao {
  background: #fff; border-radius: var(--raio); box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  width: 100%; max-width: 440px; overflow: hidden;
}
.pdv-confirmacao-cabecalho {
  background: var(--azul); color: #fff; font-weight: 700; font-size: 1rem;
  letter-spacing: .03em; padding: .7rem 1rem;
}
.pdv-confirmacao-corpo {
  display: flex; align-items: center; gap: 1rem; padding: 1.6rem 1.4rem;
}
.pdv-confirmacao-icone {
  flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 10px;
  background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center;
}
.pdv-confirmacao-icone svg { width: 1.7rem; height: 1.7rem; }
.pdv-confirmacao-corpo p { margin: 0; font-size: .96rem; line-height: 1.4; }
.pdv-confirmacao-rodape {
  display: flex; justify-content: space-between; gap: .8rem;
  padding: .9rem 1.4rem; border-top: 1px solid var(--borda);
}
.pdv-confirmacao-rodape button { flex: 1; justify-content: center; }

/* --- Alterar preço do item (Home) — popup estilo "Desconto na Venda" --- */
.pdv-preco-fundo {
  position: fixed; inset: 0; background: rgba(15, 18, 25, .55);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: 1rem;
}
.pdv-preco-modal {
  background: #fff; border-radius: var(--raio); box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  width: 100%; max-width: 380px; overflow: hidden;
}
.pdv-preco-cabecalho {
  background: var(--pdv-destaque); color: #fff; text-align: center; font-weight: 700;
  font-size: 1.1rem; letter-spacing: .03em; padding: .9rem;
}
.pdv-preco-corpo { padding: 1.3rem 1.4rem; }
.pdv-preco-produto { margin: 0 0 .3rem; font-weight: 700; font-size: .92rem; }
.pdv-preco-atual { margin: 0 0 1.2rem; color: var(--texto-muted); text-align: center; }
.pdv-preco-rotulo { display: block; font-weight: 700; font-size: .82rem; margin: 0 0 .4rem; }
.pdv-preco-valor {
  width: 100%; border: 1px solid var(--borda); border-radius: 8px; padding: .6rem .5rem;
  font-size: 1.3rem; font-weight: 700; color: var(--pdv-destaque); text-align: center;
}
.pdv-preco-valor:focus { outline: none; border-color: var(--pdv-destaque); }
.pdv-preco-linha { display: flex; align-items: flex-end; gap: .7rem; }
.pdv-preco-campo { flex: 1; min-width: 0; }
.pdv-preco-ou { padding-bottom: .75rem; color: var(--texto-muted); font-size: .85rem; }
.pdv-preco-tipo {
  margin-top: 1rem; border: 1px solid var(--borda); border-radius: 8px; padding: .6rem .8rem;
}
.pdv-preco-tipo-titulo { display: block; font-size: .78rem; color: var(--texto-muted); margin-bottom: .3rem; }
.pdv-preco-tipo-opcao { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1.2rem; font-size: .9rem; cursor: pointer; }
.pdv-preco-rodape {
  background: var(--sidebar-bg); color: rgba(255, 255, 255, .85); font-size: .86rem;
  padding: .8rem 1.2rem; display: flex; align-items: center; justify-content: space-between;
}
.pdv-preco-sair { cursor: pointer; }
.pdv-preco-sair:hover { color: #fff; }

/* --- Popup genérico reaproveitável (mesmo estilo visual dos popups do
   PDV: cabeçalho escuro, corpo em card, rodapé com Confirmar/Sair) --- */
.popup-fundo {
  position: fixed; inset: 0; background: rgba(15, 18, 25, .55);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: 1rem;
}
.popup-modal {
  background: #fff; border-radius: var(--raio); box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  width: 100%; max-width: 440px; overflow: hidden;
}
.popup-cabecalho {
  background: var(--pdv-destaque); color: #fff; font-weight: 700; font-size: 1.05rem;
  letter-spacing: .03em; padding: .9rem 1.1rem;
}
.popup-corpo { padding: 1.3rem 1.4rem; }
.popup-rodape {
  background: var(--sidebar-bg); color: rgba(255, 255, 255, .85); font-size: .86rem;
  padding: .8rem 1.2rem; display: flex; align-items: center; justify-content: space-between;
}
.popup-sair { cursor: pointer; }
.popup-sair:hover { color: #fff; }

.registro-item { position: relative; padding: .85rem 3rem .85rem 1rem; border-radius: 8px; }
.registro-item:nth-child(even) { background: var(--papel); }
.registro-item:hover, .registro-item.menu-aberto { background: #eaeef4; }
.registro-item[data-href] { cursor: pointer; }
.registro-titulo { font-weight: 700; font-size: .95rem; margin: 0 0 .15rem; }
.registro-titulo a { color: inherit; text-decoration: none; }
.registro-titulo a:hover { color: var(--azul); }
.registro-meta { font-style: italic; color: #374151; font-size: .86rem; margin: 0 0 .4rem; }
.registro-meta strong { font-style: italic; }
.registro-acoes { font-size: .82rem; }
.registro-acoes a { margin-right: .6rem; }

/* Menu de ações (⋮) por registro — só aparece no hover do registro (ou
   enquanto o próprio menu estiver aberto, pra não sumir o botão embaixo
   do cursor ao clicar). */
.registro-menu { position: absolute; top: .6rem; right: .6rem; }
.registro-menu-btn {
  background: transparent; border: none; color: var(--texto-muted);
  width: 2rem; height: 2rem; border-radius: 999px; cursor: pointer;
  opacity: 0; transition: opacity .12s ease, background .12s ease;
  display: flex; align-items: center; justify-content: center; padding: 0;
  font-size: 1.2rem; line-height: 1; letter-spacing: -1px;
}
.registro-item:hover .registro-menu-btn, .registro-menu-btn.aberto { opacity: 1; }
.registro-menu-btn:hover { background: rgba(20, 24, 31, .08); }
.registro-menu-dropdown {
  position: absolute; top: 2.3rem; right: 0; background: #fff;
  border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra);
  min-width: 170px; z-index: 20; overflow: hidden; padding: .3rem 0;
}
.registro-menu-dropdown a, .registro-menu-dropdown button {
  display: block; width: 100%; text-align: left; padding: .5rem .9rem;
  font-size: .86rem; font-weight: 400; background: none; border: none;
  border-radius: 0; color: var(--tinta); cursor: pointer; text-decoration: none;
}
.registro-menu-dropdown a:hover, .registro-menu-dropdown button:hover { background: var(--papel); }
.registro-menu-dropdown button.perigo { color: var(--vermelho); }

[x-cloak] { display: none !important; }

/* --- Selos de situação ----------------------------------------------------- */
.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-cinza { background: var(--cinza-bg); color: var(--texto-muted); }
.badge-verde { background: var(--verde-bg); color: #15803d; }
.badge-vermelho { background: var(--vermelho-bg); color: #b91c1c; }
.badge-amarelo { background: var(--amarelo-bg); color: var(--amarelo); }
.legenda-secundaria { display: block; color: var(--texto-muted); font-size: .78rem; margin-top: .15rem; }

/* --- Mensagens flash -------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.messages li { padding: .6rem .9rem; border-radius: 8px; font-size: .9rem; }
.messages .success { background: var(--verde-bg); color: #15803d; }
.messages .error { background: var(--vermelho-bg); color: #b91c1c; }
.messages .info { background: #e6f0ff; color: #1d4ed8; }
.messages .warning { background: var(--amarelo-bg); color: var(--amarelo); }

/* --- Formulários ------------------------------------------------------------ */
form.form-vertical label { display: block; margin-top: .9rem; margin-bottom: .3rem; font-weight: 600; font-size: .88rem; }
form.form-vertical input, form.form-vertical select, form.form-vertical textarea {
  width: 100%; max-width: 460px; padding: .45rem .6rem;
  border: 1px solid var(--borda); border-radius: 6px; font-size: .92rem;
  background: #fff; color: var(--tinta);
}
form.form-vertical input:focus, form.form-vertical select:focus, form.form-vertical textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
form p { margin: .9rem 0; }
form p label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .88rem; }
form p input, form p select, form p textarea {
  padding: .45rem .6rem; border: 1px solid var(--borda); border-radius: 6px; font-size: .92rem;
}

/* Padrão do sistema pra valores numéricos (peso/quantidade, alíquota, dinheiro):
   sem spinner nativo — ver MEMORIA_PROJETO.md, "Padrão de campos numéricos". */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Campo de valor compacto, inline (ex.: "Pagar" no menu de ações de uma parcela) */
.campo-valor-inline {
  width: 90px; padding: .35rem 0; border: none; border-bottom: 1px solid var(--borda);
  border-radius: 0; background: transparent; color: var(--tinta); font-size: .92rem;
}
.campo-valor-inline:focus { outline: none; border-bottom-color: var(--azul); }

/* --- Formulário em abas (ex.: Nota fiscal) ---------------------------------- */
.abas-formulario { display: flex; gap: .2rem; border-bottom: 1px solid var(--borda); margin-bottom: 1.2rem; flex-wrap: wrap; }
.abas-formulario button {
  background: transparent; color: var(--texto-muted); border: none; border-bottom: 3px solid transparent;
  border-radius: 0; padding: .7rem 1.1rem; font-weight: 600; font-size: .88rem; cursor: pointer;
}
.abas-formulario button:hover { background: var(--papel); color: var(--tinta); }
.abas-formulario button.ativa { color: var(--azul); border-bottom-color: var(--azul); }

.cliente-info-card { background: var(--papel); border-radius: 8px; padding: .9rem 1.1rem; margin-top: .9rem; font-size: .88rem; }
.cliente-info-card p { margin: .2rem 0; }
.cliente-info-nome { font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }

/* --- Botões ----------------------------------------------------------------- */
button, .btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem 1rem; border: none; border-radius: 7px;
  background: var(--azul); color: #fff; font-size: .88rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background .12s ease;
}
button:hover, .btn:hover { background: var(--azul-escuro); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary, .btn.secondary { background: #fff; color: var(--tinta); border: 1px solid var(--borda); }
button.secondary:hover, .btn.secondary:hover { background: var(--papel); }
button.danger, .btn.danger { background: var(--vermelho); }
button.danger:hover, .btn.danger:hover { background: #b91c1c; }

a { color: var(--azul); }

/* --- Dashboard (Início) ------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .9rem;
  margin-bottom: 1.4rem;
}
.kpi-card { display: flex; flex-direction: column; gap: .25rem; }
.kpi-rotulo {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-muted); font-weight: 600;
}
.kpi-valor { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.kpi-valor.alerta { color: var(--vermelho); }
.kpi-valor.sucesso { color: var(--verde); }
.kpi-sub { font-size: .82rem; color: var(--texto-muted); }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}
.dashboard-grid h2 { margin: 0 0 1rem; }

/* Gráfico de barras simples em CSS pros últimos 7 dias */
.barras-chart { display: flex; align-items: flex-end; gap: .7rem; height: 140px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .4rem; }
.barra { width: 100%; max-width: 34px; background: var(--azul); border-radius: 5px 5px 0 0; min-height: 3px; transition: background .12s ease; }
.barra-col:hover .barra { background: var(--azul-escuro); }
.barra-valor { font-size: .72rem; color: var(--texto-muted); white-space: nowrap; }
.barra-rotulo { font-size: .74rem; color: var(--texto-muted); margin-top: .3rem; }

/* Ranking (top produtos) com barra de proporção */
.ranking-lista { display: flex; flex-direction: column; gap: .7rem; }
.ranking-item { display: flex; align-items: center; gap: .7rem; }
.ranking-pos {
  width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--papel);
  color: var(--texto-muted); font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ranking-corpo { flex: 1; min-width: 0; }
.ranking-nome { font-size: .88rem; font-weight: 600; margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-barra-trilha { background: var(--papel); border-radius: 999px; height: 6px; overflow: hidden; }
.ranking-barra-preenchida { background: var(--azul); height: 100%; border-radius: 999px; }
.ranking-qtd { font-size: .8rem; color: var(--texto-muted); flex-shrink: 0; }

/* --- Formulário de produto (cadastro em duas colunas, campos com linha embaixo) */
.card > h2:first-child { margin-top: 0; }
.produto-form-grid {
  display: grid; grid-template-columns: 1fr 280px; gap: 1.2rem; align-items: start;
}
.produto-form-coluna { display: flex; flex-direction: column; gap: 1.2rem; }
.produto-form-principal { display: flex; flex-direction: column; gap: 1.4rem; }
.produto-form-lateral { display: flex; flex-direction: column; gap: 1.2rem; }

.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
/* 5 colunas — card "Cálculo do imposto" da NF-e avulsa, mesmo layout do
   sistema de referência (linha inteira de campos curtos lado a lado). */
.campo-linha-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.3rem; }
/* Barra de inserção estilo "grid de entrada" (busca + campos fixos +
   botão Inserir numa linha só) — usada na NF-e avulsa pra adicionar
   item. Campos com largura fixa (flex-basis) ficam lado a lado sem
   depender do grid de 2 colunas do .campo-linha normal. */
.campo-linha-toolbar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.campo-linha-toolbar input[readonly], .campo-linha-toolbar select[disabled] {
  background: var(--papel); color: var(--texto-muted);
}
.campo-underline { position: relative; display: flex; flex-direction: column; }
.campo-underline label { font-size: .82rem; color: var(--texto-muted); margin-bottom: .35rem; }
.campo-underline input, .campo-underline select, .campo-underline textarea {
  border: none; border-bottom: 1px solid var(--borda); border-radius: 0;
  padding: .4rem 0; font-size: .95rem; background: transparent; color: var(--tinta); width: 100%;
}
.campo-underline input:focus, .campo-underline select:focus, .campo-underline textarea:focus {
  outline: none; border-bottom-color: var(--azul);
}
.contador-caracteres { position: absolute; right: 0; top: 0; font-size: .72rem; color: var(--texto-muted); }
.campo-erro { display: block; color: var(--vermelho); font-size: .78rem; margin: .3rem 0 0; }
.campo-info { display: block; color: var(--verde); font-size: .78rem; margin: .3rem 0 0; min-height: 1.1em; }

.campo-com-botao { display: flex; align-items: center; gap: .3rem; }
.campo-com-botao input { flex: 1; width: auto; }
.campo-com-botao .icone-btn { flex-shrink: 0; margin-bottom: .15rem; }
.campo-com-botao .icone-btn:disabled { opacity: .45; cursor: not-allowed; }
.produto-form-acoes { display: flex; gap: .6rem; margin-top: .3rem; }

.foto-upload { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.foto-preview {
  width: 120px; height: 120px; border-radius: 50%; background: var(--papel);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: #c3c8d1; border: 1px solid var(--borda); flex-shrink: 0;
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.foto-preview svg { width: 56px; height: 56px; }
.foto-botoes { display: flex; gap: .5rem; }
.foto-input-oculto { display: none; }

.checkbox-lista { display: flex; flex-direction: column; border-top: 1px solid var(--borda); padding-top: 1rem; }
.checkbox-item { display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .4rem 0; font-size: .92rem; }
.checkbox-item input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 1.3rem; height: 1.3rem; flex-shrink: 0;
  border-radius: 6px; border: 2px solid var(--borda); cursor: pointer; position: relative; background: #fff;
}
.checkbox-item input[type="checkbox"]:checked { background: var(--vermelho); border-color: var(--vermelho); }
.checkbox-item input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 3px; top: -1px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

@media (max-width: 800px) {
  .produto-form-grid { grid-template-columns: 1fr; }
  .campo-linha { grid-template-columns: 1fr; }
  .campo-linha-5 { grid-template-columns: 1fr 1fr; }
}

/* --- Oficina SaaS: variante grande do popup genérico (formulario de Nova
   Entrada, mais longo que os popups de confirmacao do PDV) -- mesmo
   cabecalho/rodape escuro, corpo com scroll proprio pra nao esticar alem
   da tela. --------------------------------------------------------------- */
.popup-modal-lg { max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; }
.popup-modal-lg .popup-corpo { overflow-y: auto; flex: 1; min-height: 0; }
.popup-rodape-acoes { display: flex; gap: .6rem; justify-content: flex-end; }

/* Quadro Tecnico: cards de resumo por status, clicaveis (reaproveita
   .kpi-card como base visual) */
.quadro-resumo-link { text-decoration: none; color: inherit; display: block; }
.quadro-resumo-link .kpi-card.ativo { outline: 2px solid var(--azul); outline-offset: -2px; }
.quadro-resumo-link .kpi-valor { font-size: 1.9rem; }
.kpi-card.arrastando-sobre { outline: 2px dashed var(--azul); outline-offset: -2px; background: var(--papel); }

.registro-item[draggable] { cursor: grab; }
.registro-item[draggable]:active { cursor: grabbing; }

.registro-item .badge { margin-left: .5rem; }
.registro-item form { display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.registro-item form select { padding: .3rem .5rem; border: 1px solid var(--borda); border-radius: 6px; font-size: .82rem; }

.oculto { display: none !important; }

/* --- Agenda: alternancia Lista/Calendario e grade mensal ------------------ */
.agenda-toggle { display: flex; gap: .4rem; margin-bottom: 1rem; }
.agenda-toggle a {
    padding: .4rem .9rem; border-radius: 7px; font-size: .85rem; font-weight: 600;
    text-decoration: none; color: var(--texto-muted); border: 1px solid var(--borda); background: #fff;
}
.agenda-toggle a.ativo { background: var(--azul); color: #fff; border-color: var(--azul); }

.calendario-nav { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.calendario-nav h2 { margin: 0; min-width: 160px; text-align: center; }

.calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--borda); gap: 1px; }
.calendario-cabecalho {
    background: var(--papel); padding: .5rem; text-align: center; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--texto-muted);
}
.calendario-dia { min-height: 108px; padding: .35rem; background: #fff; }
.calendario-dia.fora-mes { background: var(--papel); }
.calendario-dia.fora-mes .calendario-dia-numero { color: var(--texto-muted); }
.calendario-dia-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.calendario-dia-numero {
    display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
    font-size: .78rem; font-weight: 700; border-radius: 50%;
}
.calendario-dia.hoje .calendario-dia-numero { background: var(--azul); color: #fff; }
.calendario-dia-add {
    display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem;
    border-radius: 50%; background: var(--papel); color: var(--texto-muted); text-decoration: none;
    font-size: .9rem; font-weight: 700; line-height: 1; opacity: 0; transition: opacity .12s ease, background .12s ease;
}
.calendario-dia:hover .calendario-dia-add { opacity: 1; }
.calendario-dia-add:hover { background: var(--azul); color: #fff; }
@media (hover: none) {
    .calendario-dia-add { opacity: 1; }
}
.calendario-evento {
    display: block; font-size: .68rem; line-height: 1.3; padding: .15rem .4rem; margin-bottom: .2rem;
    border-radius: 5px; background: #e6f0ff; color: #1d4ed8; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calendario-evento:hover { background: var(--azul); color: #fff; }
.calendario-evento.evento-hoje { background: var(--vermelho-bg); color: #b91c1c; }

@media (max-width: 900px) {
    .calendario-dia { min-height: 70px; }
    .calendario-cabecalho { font-size: .62rem; padding: .3rem; }
}

/* --- Fotos do equipamento (popup Nova Entrada / Editar OS) ---------------- */
.foto-thumb {
    position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--borda); background: var(--papel); flex-shrink: 0;
}
.foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-thumb-remover {
    position: absolute; top: 2px; right: 2px; width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: rgba(20, 24, 31, .65); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .85rem; line-height: 1; padding: 0;
}
.foto-thumb-remover:hover { background: var(--vermelho); }
.foto-thumb-nova { border: 1px dashed var(--azul); }
.foto-thumb-nova::after {
    content: "nova"; position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
    background: var(--azul); color: #fff; font-size: .6rem; padding: 1px 0;
}

/* --- Relatorios: Ranking de Atendimento por Operador ---------------------- */
.relatorio-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.2rem; }
.relatorio-nav { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; }
.relatorio-icone {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--papel);
    color: var(--roxo, #7c3aed); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.relatorio-icone svg { width: 20px; height: 20px; }

.ranking-atendimento-cabecalho {
    display: grid; grid-template-columns: 1fr 4rem 4rem; gap: .8rem; align-items: center;
    padding: 0 .2rem .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-muted); border-bottom: 2px solid var(--borda);
}
.ranking-atendimento-cabecalho span:not(:first-child) { text-align: right; }

.ranking-atendimento-item {
    display: grid; grid-template-columns: 1.6rem 1fr 4rem 4rem; gap: .8rem; align-items: center;
    padding: .7rem .2rem;
}
.ranking-atendimento-item:not(:last-child) { border-bottom: 1px solid var(--borda); }
.ranking-atendimento-pos { font-size: .8rem; font-weight: 700; color: var(--texto-muted); text-align: center; }
.ranking-atendimento-corpo { min-width: 0; }
.ranking-atendimento-nome { font-size: .92rem; font-weight: 600; margin-bottom: .35rem; }
.ranking-atendimento-barra-trilha { background: var(--papel); border-radius: 999px; height: 6px; overflow: hidden; }
.ranking-atendimento-barra-preenchida { background: #7c3aed; height: 100%; border-radius: 999px; }
.ranking-atendimento-mes { text-align: right; font-weight: 700; color: #7c3aed; }
.ranking-atendimento-total { text-align: right; color: var(--texto-muted); }

/* --- Comunicacao interna da OS (mural de observacoes, tipo comentarios) -- */
.comunicacao-item { display: flex; gap: .6rem; padding: .6rem 0; }
.comunicacao-item:not(:last-child) { border-bottom: 1px solid var(--borda); }
.comunicacao-avatar {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--azul); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
    flex-shrink: 0;
}
.comunicacao-corpo { flex: 1; min-width: 0; }
.comunicacao-cabecalho { font-size: .82rem; margin-bottom: .2rem; display: flex; align-items: baseline; }
.comunicacao-autor { font-weight: 700; }
.comunicacao-data { color: var(--texto-muted); margin-left: .3rem; }
.comunicacao-texto { font-size: .88rem; white-space: pre-wrap; word-break: break-word; }
.comunicacao-acoes { margin-left: auto; display: flex; gap: .6rem; }
.comunicacao-acoes button {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    font-size: .76rem; color: var(--texto-muted); font-weight: 600;
}
.comunicacao-acoes button:hover { color: var(--azul); text-decoration: underline; }
.comunicacao-acoes button.perigo:hover { color: var(--vermelho); }
.comunicacao-editar-textarea {
    width: 100%; border: 1px solid var(--borda); border-radius: 6px; padding: .4rem .5rem;
    font-size: .88rem; font-family: inherit; margin-bottom: .3rem;
}

/* --- Seletor rapido de tecnico/prioridade nos cards da OS ----------------- */
.picker { position: relative; display: inline-block; }
.picker-trigger {
    display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem;
    border: 1px solid var(--borda); border-radius: 999px; background: #fff; color: var(--tinta);
    font-size: .78rem; font-weight: 600; cursor: pointer;
}
.picker-trigger:hover { background: var(--papel); }
.avatar-mini {
    width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--azul); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: .64rem; font-weight: 700;
    flex-shrink: 0;
}
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar-mini { border: 2px solid #fff; margin-left: -.35rem; }
.avatar-stack .avatar-mini:first-child { margin-left: 0; }
.picker-dropdown {
    position: absolute; top: calc(100% + .3rem); left: 0; z-index: 60; width: 220px;
    background: #fff; border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra);
    padding: .4rem; max-height: 260px; overflow-y: auto;
}
.picker-busca {
    width: 100%; border: 1px solid var(--borda); border-radius: 6px; padding: .3rem .5rem;
    font-size: .82rem; margin-bottom: .3rem;
}
.picker-opcao {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
    padding: .4rem .5rem; border: none; background: none; border-radius: 6px; cursor: pointer;
    font-size: .84rem; color: var(--tinta);
}
.picker-opcao:hover { background: var(--papel); }
.picker-opcao .check { margin-left: auto; color: var(--azul); font-weight: 700; }
.picker-tag-cor { width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0; }