/* ============================================================
   Identidade visual — Perfumaria
   Paleta calma de boutique: linho + sálvia profunda + âmbar suave.
   ============================================================ */
:root {
  --bg:        #F3F1EC;   /* linho */
  --surface:   #FFFFFF;
  --surface-2: #FBFAF7;
  --ink:       #23221E;   /* quase-preto quente */
  --muted:     #6E6A61;
  --line:      #E7E3DA;
  --sage:      #3E5C55;   /* sálvia profunda (primária) */
  --sage-dark: #32493F;
  --sage-soft: #EAF0ED;
  --amber:     #C8975A;   /* âmbar (destaque) */
  --amber-soft:#F6ECDD;
  --danger:    #B4544B;
  --danger-soft:#F7E7E4;
  --ok:        #4B7A5A;
  --ok-soft:   #E6F1E9;
  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(35,34,30,.04), 0 8px 24px rgba(35,34,30,.06);
  --shadow-sm: 0 1px 2px rgba(35,34,30,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, .brand {
  font-family: "Fraunces", "Georgia", serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

a { color: var(--sage); text-decoration: none; }
a:hover { color: var(--sage-dark); }

/* ---- Layout ------------------------------------------------ */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 244px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 26px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand {
  font-size: 21px;
  padding: 0 10px 22px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-soft);
}
.nav-group { margin-bottom: 20px; }
.nav-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); padding: 0 12px 6px; font-weight: 600;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--ink); font-size: 14px; margin-bottom: 2px;
  transition: background .12s ease;
}
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--sage-soft); color: var(--sage-dark); font-weight: 600; }
.nav a .ico { width: 18px; text-align: center; opacity: .8; }

.main { flex: 1; padding: 30px 40px 60px; max-width: 1180px; }

.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.topbar h1 { font-size: 27px; margin: 0; }
.topbar .sub { color: var(--muted); font-size: 14px; }

/* ---- Cards / painéis --------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 18px; }
.card-pad { padding: 22px 24px; }

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

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.stat .k { font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600; }
.stat .v { font-family: "Fraunces", serif; font-size: 30px; margin-top: 6px; }
.stat.accent .v { color: var(--sage); }
.stat.warn   .v { color: var(--amber); }
.stat.alert  .v { color: var(--danger); }

/* ---- Tabelas ----------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
tfoot td { padding: 13px 16px; border-top: 1px solid var(--line); }
tbody tr:hover { background: var(--surface-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* Colunas derivadas de atributo do segmento (categoria, tamanho, cor...)
   sao texto LIVRE - um valor comprido (ex.: "Blusas > Manga longa >
   Teste") sem limite deixava a coluna crescer e empurrava a linha
   inteira pra baixo quando quebrava. Trunca com "..." e mostra o valor
   completo no title (hover) - nunca estica a tabela, em nenhuma
   largura de tela. .table-wrap ja rola na horizontal se precisar.
   PRECISA do "display" aqui: max-width sozinho num <td> nao trunca -
   table-layout e "auto" por padrao (table, acima), e o algoritmo de
   coluna automatica ignora max-width do td pra decidir a largura.
   Um elemento de bloco DENTRO da celula, com o proprio max-width, e
   quem realmente limita - truque padrao pra ellipsis em tabela sem
   mudar o table-layout inteiro (isso afetaria todas as outras telas
   que usam a mesma classe "table"). */
.col-extra {
  display: inline-block; max-width: 160px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
@media (max-width: 640px) {
  .col-extra { max-width: 90px; }
}

/* ---- Selos de status --------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px;
}
.tag.aberta { background: var(--amber-soft); color: #96631f; }
.tag.vencida { background: var(--danger-soft); color: var(--danger); }
.tag.pago { background: var(--ok-soft); color: var(--ok); }
.tag.baixo { background: var(--danger-soft); color: var(--danger); }
.tag.venda  { background: var(--line); color: var(--muted); }
.tag.brinde { background: var(--amber-soft); color: #96631f; }
.tag.perda  { background: var(--danger-soft); color: var(--danger); }

/* ---- Botões ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: filter .12s ease, background .12s ease;
}
.btn-primary { background: var(--sage); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); color: #fff; }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-link { background: none; border: none; color: var(--sage); cursor: pointer;
  font-weight: 600; padding: 4px 8px; font-size: 13px; }
.btn-danger-link { color: var(--danger); }
.form-excluir { display: inline; }
.btn-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }

/* ---- Formulários ------------------------------------------- */
.form-grid { display: grid; gap: 16px 18px; grid-template-columns: repeat(2, 1fr); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 12px; color: var(--muted); }
input, select, textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--sage-soft); background: #fff;
}
textarea { resize: vertical; min-height: 70px; }
.form-actions { display: flex; gap: 10px; margin-top: 22px; }

/* ---- Toolbar de listas ------------------------------------- */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px;
  flex-wrap: wrap; }
.toolbar .search { flex: 1; max-width: 320px; }
.filters { display: flex; gap: 6px; }
.filters a {
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.filters a.active { background: var(--sage); color: #fff; border-color: var(--sage); }

/* ---- Flash ------------------------------------------------- */
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px;
  font-size: 14px; font-weight: 500; }
.flash.sucesso { background: var(--ok-soft); color: var(--ok); }
.flash.erro { background: var(--danger-soft); color: var(--danger); }
.flash.success { background: var(--ok-soft); color: var(--ok); }
.flash.error { background: var(--danger-soft); color: var(--danger); }
.flash.warning { background: #FBF3E2; color: #7A5A17; }
.flash.info { background: var(--sage-soft); color: var(--sage-dark); }

/* ---- Estado vazio ------------------------------------------ */
.empty { text-align: center; padding: 54px 20px; color: var(--muted); }
.empty .big { font-family: "Fraunces", serif; font-size: 20px; color: var(--ink);
  margin-bottom: 6px; }

/* ---- Venda: itens dinâmicos -------------------------------- */
.item-row { display: grid; grid-template-columns: 1fr 90px 130px 130px 40px;
  gap: 10px; align-items: end; margin-bottom: 10px; }
.item-row .rm { background: var(--danger-soft); color: var(--danger); border: none;
  border-radius: var(--radius-sm); height: 40px; cursor: pointer; font-size: 18px; }
.totais { display: flex; justify-content: flex-end; gap: 40px; margin-top: 8px;
  align-items: center; font-size: 15px; }
.totais .big { font-family: "Fraunces", serif; font-size: 24px; color: var(--sage); }

.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .main { padding: 22px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .form-grid { grid-template-columns: 1fr; }
  .item-row { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Autocomplete (busca por digitação) -------------------- */
.autocomplete { position: relative; }
.autocomplete .ac-input { width: 100%; }
.ac-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  z-index: 40; max-height: 260px; overflow-y: auto; display: none;
}
.ac-item { padding: 9px 12px; cursor: pointer; font-size: 14px; }
.ac-item .ac-sub { color: var(--muted); font-size: 12px; }
.ac-item:hover, .ac-item.ativo { background: var(--sage-soft); }
.ac-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }

/* input desabilitado (ex.: parcelas em pagamento à vista) */
input:disabled { background: #F0EEE8; color: var(--muted); cursor: not-allowed; }

/* resumo do parcelamento */
.parcela-info {
  margin-top: 4px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--sage-soft); color: var(--sage-dark);
  font-size: 14px; font-weight: 600; display: inline-block;
}

/* ---- Parcelas editáveis (venda) ---------------------------- */
.parcela-row {
  display: grid; grid-template-columns: 48px 220px 150px 40px;
  justify-content: start;
  gap: 10px; align-items: center; margin-bottom: 8px;
}
.parcela-row .parcela-num {
  font-weight: 600; color: var(--muted); font-size: 13px; text-align: center;
}
.parcela-row .rm-parcela {
  background: var(--danger-soft); color: var(--danger); border: none;
  border-radius: var(--radius-sm); height: 40px; cursor: pointer; font-size: 18px;
}
.parcelas-head {
  display: grid; grid-template-columns: 48px 220px 150px 40px;
  justify-content: start;
  gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; margin-bottom: 8px;
}
.parcelas-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
.conferidor { font-size: 14px; font-weight: 600; }
.conferidor.ok  { color: var(--ok); }
.conferidor.dif { color: var(--danger); }

@media (max-width: 860px) {
  .parcela-row, .parcelas-head { grid-template-columns: 40px 1fr 110px 36px; }
}

/* ---- Impressão --------------------------------------------- */
.print-title { display: none; }
@media print {
  .sidebar, .no-print, .topbar .btn, .flash { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; max-width: 100%; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  body { background: #fff; }
  .topbar { display: none !important; }
  .print-title {
    display: block; margin-bottom: 16px;
  }
  .print-title h2 { font-size: 20px; margin: 0 0 4px; }
  .print-title div { color: #555; font-size: 13px; }
  thead th { border-bottom: 1px solid #999; }
  tbody td { border-bottom: 1px solid #eee; }
}

/* ---- Botão de situação Ativo/Inativo (form de produto) ----- */
.toggle-situacao {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  font-family: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.toggle-situacao .dot { width: 10px; height: 10px; border-radius: 50%; }
.toggle-situacao.ativo   { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.toggle-situacao.ativo   .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.toggle-situacao.inativo { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.toggle-situacao.inativo .dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* ---- Entrada de estoque: itens (qtd | produto | custo | subtotal) --- */
.entrada-row {
  display: grid; grid-template-columns: 90px 1fr 140px 140px 40px;
  gap: 10px; align-items: end; margin-bottom: 10px;
}
.entrada-head {
  display: grid; grid-template-columns: 90px 1fr 140px 140px 40px; gap: 10px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; margin-bottom: 8px;
}
.entrada-row .rm {
  background: var(--danger-soft); color: var(--danger); border: none;
  border-radius: var(--radius-sm); height: 40px; cursor: pointer; font-size: 18px;
}
@media (max-width: 860px) {
  .entrada-row, .entrada-head { grid-template-columns: 70px 1fr 100px 40px; }
  .entrada-row .subtotal-cell, .entrada-head :nth-child(4) { display: none; }
}

/* ---- Grade de formulário com 3 colunas --------------------- */
.form-grid-3 { display: grid; gap: 16px 18px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .form-grid-3 { grid-template-columns: 1fr; }
  .form-grid-3[style] { grid-template-columns: 1fr !important; }
}

/* ---- Gráfico de barras do painel --------------------------- */
.chart-legend { display: flex; gap: 18px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart { display: flex; align-items: flex-end; gap: 12px; height: 210px; padding-top: 6px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end;
  justify-content: center; gap: 6px; }
.chart-bars .bar { width: 26px; min-height: 3px; border-radius: 6px 6px 0 0; }
.chart-bars .bar-vendas { background: var(--sage); }
.chart-bars .bar-compras { background: var(--amber); }
.chart-label { margin-top: 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
  .grid-2[style] { grid-template-columns: 1fr !important; }
  .chart-bars .bar { width: 16px; }
}

/* ---- Gráfico de pizza (mais vendidos) ---------------------- */
.pie {
  width: 170px; height: 170px; border-radius: 50%; flex: none;
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%);
          mask: radial-gradient(circle, transparent 46%, #000 47%);
}
.pie-leg { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.pie-leg .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.pie-leg .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-leg .val { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Painel: gráficos com a mesma altura -------------------- */
.dash-graficos { align-items: stretch; }
.dash-graficos > .card { height: 100%; display: flex; flex-direction: column; margin-top: 0; }
/* zera a margem herdada de ".card + .card", que empurrava a pizza para baixo
   e desalinhava os dois blocos */
.dash-graficos > .card + .card { margin-top: 0; }
.dash-graficos > .card > .card-pad { flex: 1; display: flex; flex-direction: column; }
/* a área do gráfico ocupa todo o espaço restante e as barras
   ficam ancoradas na base (rodapé) do bloco */
.dash-graficos .chart { flex: 1; height: auto; min-height: 180px; }

/* ---- Aviso de brinde/perda na venda ------------------------ */
.aviso-tipo {
  margin: 0 0 16px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--amber-soft); color: #8a5b1c; font-size: 14px;
}
#bloco-pagamento.bloqueado .form-grid-3 { opacity: .5; }

/* ---- Modal (registrar recebimento) ------------------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(35, 34, 30, .45);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal-overlay.aberto { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; width: 100%; max-width: 420px;
  animation: modal-in .14s ease;
}
@keyframes modal-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal .modal-sub { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.modal .field { display: flex; flex-direction: column; gap: 6px; }
.modal .form-actions { margin-top: 20px; }

/* ---- Bolinhas de campo de busca (produtos: produto/marca/país) ---- */
.busca-campos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.busca-campos label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; user-select: none;
}
.busca-campos input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; padding: 0;
  border: 2px solid var(--line); border-radius: 50%;
  background: var(--surface); cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
  display: inline-grid; place-content: center;
}
.busca-campos input[type="radio"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  transform: scale(0); transition: transform .12s;
  background: var(--sage);
}
.busca-campos input[type="radio"]:checked {
  border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-soft);
}
.busca-campos input[type="radio"]:checked::before { transform: scale(1); }
.busca-campos label:has(input:checked) { color: var(--sage-dark); }

/* ---- Rodapé do menu (Configuração fixa embaixo) ---- */
.sidebar { display: flex; flex-direction: column; }
.nav-rodape { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }

/* ---- Tela de Configurações: opções selecionáveis ---- */
.opcao-config {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 12px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.opcao-config:hover { border-color: var(--sage); }
.opcao-config:has(input:checked) { border-color: var(--sage); background: var(--sage-soft); }
.opcao-config input[type="radio"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--sage); }
.opcao-titulo { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.opcao-desc { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ---- Configurações: página inicial com blocos ---- */
.config-blocos { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.config-bloco {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
  text-decoration: none; color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.config-bloco:hover {
  border-color: var(--sage); box-shadow: var(--shadow); transform: translateY(-1px);
}
.config-bloco-icone {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--sage-soft); color: var(--sage-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; flex-shrink: 0;
}
.config-bloco-titulo { font-weight: 700; font-size: 16px; margin-bottom: 3px; }
.config-bloco-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.config-bloco-seta { margin-left: auto; color: var(--muted); font-size: 18px; }

.voltar-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  background: var(--sage-soft); color: var(--sage-dark);
  border: 1px solid transparent; text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1;
}
.voltar-link:hover {
  background: var(--surface); border-color: var(--sage);
  color: var(--sage-dark); text-decoration: none;
}

/* ---- Campo de porcentagem com "%" visual dentro do input ---- */
.campo-porc { position: relative; display: inline-block; width: 100%; }
.campo-porc input { width: 100%; padding-right: 26px; text-align: right; }
.campo-porc .sufixo-porc {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 13px; font-weight: 600; pointer-events: none;
}

/* ---- Relatório de Estoque: colunas mais compactas ---- */
.nowrap { white-space: nowrap; }
.col-marca {
  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Login / troca de senha -------------------------------- */
.login-body { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; }
.login-wrap { width: 100%; max-width: 380px; }
.login-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; }

/* ---- Caixa de usuário no menu ------------------------------ */
.user-box { margin-top: 10px; padding: 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); }
.user-info { margin-bottom: 8px; }
.user-nome { font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.2; }
.user-papel { font-size: 12px; color: var(--muted); }
.user-acoes { display: flex; gap: 12px; }
.user-acoes a,
.user-acoes button { font-size: 13px; color: var(--sage); font-weight: 500; }
.user-acoes button { background: none; border: 0; padding: 0;
                     cursor: pointer; font-family: inherit; }

/* ---- Etiqueta de administrador ----------------------------- */
.tag.admin { background: var(--sage-soft); color: var(--sage-dark); }

/* ---- Checkbox em linha / permissões ------------------------ */
.check-inline { display: flex; align-items: center; gap: 9px; font-size: 14px;
  color: var(--ink); cursor: pointer; }
.check-inline input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--sage); }
.perms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; }
#bloco-permissoes.desabilitado { opacity: .55; }

/* ---- Dias da semana (backup) ------------------------------- */
.dias-semana { display: flex; gap: 6px; flex-wrap: wrap; }
.dia-check { position: relative; cursor: pointer; }
.dia-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dia-check span { display: inline-block; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 13px; font-weight: 600; }
.dia-check input:checked + span { background: var(--sage); color: #fff; border-color: var(--sage); }

/* ---- Card de restauração (alerta) -------------------------- */
.restore-card { border-color: var(--danger-soft); }
.restore-card { box-shadow: 0 0 0 1px var(--danger-soft); }

/* ---- Responsivo ---- */
@media (max-width: 620px) {
  .perms-grid { grid-template-columns: 1fr; }
}

/* ---- Valor do estoque na barra de filtro (Relatório de Estoque) ---- */
.filtro-valor {
  margin-left: auto;
  text-align: right;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 6px 16px;
}
.filtro-valor-k { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; white-space: nowrap; }
.filtro-valor-v { font-family: "Fraunces", serif; font-size: 21px; color: var(--sage);
  line-height: 1.1; margin-top: 1px; }
@media (max-width: 620px) {
  .filtro-valor { margin-left: 0; text-align: left; width: 100%; }
}

/* ---- Quadro de valor total (Venda / Entrada), no estilo do estoque ---- */
.totais-sub { color: var(--muted); font-size: 14px; }
.valor-box {
  display: inline-flex; flex-direction: column; text-align: right;
  border: 1px solid var(--line); background: var(--surface-2);
  border-radius: var(--radius-sm); padding: 8px 18px;
}
.valor-box-k { font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; white-space: nowrap; }
.valor-box-v { font-family: "Fraunces", serif; font-size: 24px; color: var(--sage);
  line-height: 1.1; margin-top: 2px; }

/* ---- Opções avançadas (recolhível) no backup ---- */
.opcoes-avancadas { margin-bottom: 16px; }
.opcoes-avancadas > summary {
  cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0; user-select: none;
}
.opcoes-avancadas > summary::before { content: "▸"; font-size: 11px; }
.opcoes-avancadas[open] > summary::before { content: "▾"; }
.opcoes-avancadas > summary::-webkit-details-marker { display: none; }

/* ============================================================
   Painel SaaS — itens de menu ainda não portados ("em breve").
   Bloco adicionado no porte; não altera a identidade original.
   ============================================================ */
.nav .soon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  opacity: .55;
  cursor: default;
  user-select: none;
}
.nav .soon .ico { width: 18px; text-align: center; opacity: .8; }
.nav .soon em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 999px;
}

/* ============================================================
   Botão de confirmação inline (ex.: "ok" da taxa) — mesmo
   tratamento visual da tag "ativo", para ficar visivelmente
   clicável. Adicionado no Bloco 8.
   ============================================================ */
.btn-ok {
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid var(--ok);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s;
}
.btn-ok:hover { filter: brightness(.95); }

/* Aviso neutro (nem sucesso, nem erro): usado quando a tela aplica um
   filtro por conta própria e precisa dizer isso em voz alta.
   Ex.: o piso de 90 dias da aba "Pagas" no Financeiro. */
.flash.aviso { background: #FBF3E2; color: #7A5A17; }

/* ---- Venda: itens (qtd | produto | preço | subtotal | remover) ---- */
.venda-row {
  display: grid; grid-template-columns: 90px 1fr 140px 140px 40px;
  gap: 10px; align-items: end; margin-bottom: 10px;
}
.venda-head {
  display: grid; grid-template-columns: 90px 1fr 140px 140px 40px; gap: 10px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; margin-bottom: 8px;
}
.venda-row .rm {
  background: var(--danger-soft); color: var(--danger); border: none;
  border-radius: var(--radius-sm); height: 40px; cursor: pointer; font-size: 18px;
}
.linha-aviso {
  grid-column: 1 / -1; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: var(--amber-soft); color: #96631f;
}
.linha-aviso.perda { background: var(--danger-soft); color: var(--danger); }
.venda-row.alerta-margem { background: var(--amber-soft); border-radius: var(--radius-sm); }
.venda-row.alerta-estoque { background: var(--danger-soft); border-radius: var(--radius-sm); }
@media (max-width: 860px) {
  .venda-row, .venda-head { grid-template-columns: 70px 1fr 100px 40px; }
  .venda-row .subtotal-cell, .venda-head :nth-child(4) { display: none; }
}