/* ============================================================
   PAINEL — visual próprio (admin), mas usa os tokens de ../tema.css
   Protótipo de visualização. Dados reais vêm de ../dados-iniciais/*.csv
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo-alt);
  color: var(--marca-escura);
  font-family: var(--fonte-corpo);
}

a { color: inherit; }

.painel-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* --- Sidebar ------------------------------------------------ */
.painel-lateral {
  background: var(--marca-escura);
  color: var(--fundo);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
}

.painel-marca {
  padding: 0 24px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 16px;
}

.painel-marca strong {
  font-family: var(--fonte-logo);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--marca-primaria-alt);
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Assinatura da marca: flor + nome. A flor herda o dourado do texto. */
.painel-flor { width: 26px; height: 26px; flex: none; }

.painel-marca span {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}

/* Indicador "em operação": pisca devagar para dizer, sem texto
   extra, que o painel está lendo dado ao vivo. Especificidade extra
   (.painel-marca .painel-operacao) para vencer ".painel-marca span"
   acima — o span genérico é display:block, e aqui precisa ser linha. */
.painel-marca .painel-operacao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Verde do painel (#3E6B47) clareado: sobre o marrom da lateral o tom original
   praticamente desaparece. */
.painel-pulso {
  width: 7px; height: 7px; border-radius: 50%; background: #6FA97E; flex: none;
  animation: painel-pulso 2.4s var(--curva) infinite;
}
@keyframes painel-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111,169,126,.55); }
  70%      { box-shadow: 0 0 0 7px rgba(111,169,126,0); }
}

.painel-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

.painel-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--raio-md);
  text-decoration: none;
  /* Mesmo corpo do titulo do grupo (pedido de 18/09): o menu nao
     disputa atencao com a tela. */
  font-size: 10.5px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.78);
}

.painel-nav a:hover,
.painel-nav a.ativo {
  background: rgba(255,255,255,.08);
  color: var(--marca-primaria-alt);
}

/* Visão geral: fora dos três módulos, sempre um clique. Peso maior e
   um traço embaixo separam ela do que é módulo — ela não é um quarto
   módulo, é o hub. */
.painel-nav-fixo {
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.painel-nav-fixo-icone {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--marca-primaria-alt);
}

.painel-nav-fixo:not(.ativo) .painel-nav-fixo-icone { opacity: .85; }

/* Selo de contagem em "Pedidos" (painel.js: atualizarSelos). 11.5px
   e selo numerico, nao texto de leitura — mesmo tamanho de .kpi-cartao .rotulo. */
.painel-selo-nav {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--marca-primaria);
  color: var(--marca-escura);
  font-family: var(--fonte-numero);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.painel-nav-rodape {
  margin-top: auto;
  padding: 16px 24px 0;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* Bloco de perfil decorativo no rodapé da lateral — sem leitura de
   sessão, só assina o painel para quem está de frente pra tela. */
.painel-perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.painel-perfil-iniciais {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(183,130,117,.45);
  font-family: var(--fonte-titulo);
  font-size: 12px;
  color: var(--marca-primaria-alt);
}

.painel-perfil-nome {
  font-size: 12px;
  color: rgba(255,255,255,.82);
}

.painel-perfil-nome small {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.5);
}

.painel-nav-rodape a {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
}

.painel-nav-rodape a:hover { color: var(--marca-primaria-alt); }

/* --- Conteúdo ------------------------------------------------ */
.painel-conteudo {
  padding: 20px 24px 24px;
}

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

.painel-migalha {
  font-size: 11.5px;
  color: var(--marca-suave);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.painel-topo h1 {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  margin: 4px 0 0;
}

.painel-periodo {
  font-size: 12px;
  background: var(--superficie);
  border: 1px solid rgba(33,30,28,.14);
  border-radius: var(--raio-md);
  padding: 8px 14px;
  color: var(--marca-media);
}

section.painel-secao {
  margin-bottom: 48px;
  scroll-margin-top: 20px;
}

section.painel-secao h2 {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  margin: 0 0 4px;
}

.painel-secao-legenda {
  font-size: 11.5px;
  color: var(--marca-suave);
  margin: 0 0 16px;
}

/* --- KPI cards ------------------------------------------------ */
.kpi-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.kpi-cartao {
  background: var(--superficie);
  border: 1px solid rgba(33,30,28,.10);
  border-radius: var(--raio-lg);
  padding: 14px 16px;
}

.kpi-cartao .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--marca-suave);
}

.kpi-cartao .valor {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  margin-top: 6px;
  color: var(--marca-escura);
}

.kpi-cartao .valor.positivo { color: #3E6B47; }
.kpi-cartao .valor.negativo { color: #A8402C; }

.kpi-cartao .nota {
  font-size: 11.5px;
  color: var(--marca-suave);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(33,30,28,.08);
}

/* Seta de variação vs. mês anterior na DRE (painel.js: variacao()). */
.kpi-var {
  font-family: var(--fonte-numero);
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 4px;
}
.kpi-var span { font-weight: 400; color: var(--marca-suave); }
.kpi-var.positivo { color: #3E6B47; }
.kpi-var.negativo { color: #A8402C; }

/* --- Tabelas ------------------------------------------------ */
.painel-tabela-wrap {
  background: var(--superficie);
  border: 1px solid rgba(33,30,28,.10);
  border-radius: var(--raio-lg);
  overflow-x: auto;
}

table.painel-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 560px;
}

table.painel-tabela th {
  text-align: center;
  font-family: var(--fonte-ui);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  /* --marca-suave daria ~3.7:1 sobre o sand, e etiqueta de 10.5px
     precisa de 4.5:1 (WCAG 1.4.3). */
  color: var(--marca-media);
  padding: var(--pl-cel-y) var(--pl-cel-x);
  border-bottom: 1px solid var(--borda-quente);
  white-space: nowrap;
}

table.painel-tabela td {
  padding: var(--pl-cel-y) var(--pl-cel-x);
  border-bottom: 1px solid var(--borda-quente);
  white-space: nowrap;
  /* Alinhamento pela natureza da coluna, como na grade: .num à
     direita, .pl-esq (texto) à esquerda, o resto centralizado. */
  text-align: center;
}
table.painel-tabela td.pl-esq { text-align: left; }

table.painel-tabela tr:last-child td { border-bottom: none; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

.selo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}

.selo-ok    { background: #E3EEE4; color: #3E6B47; }
.selo-alerta{ background: #F6E9D9; color: #8A5A20; }
.selo-neg   { background: #F5E1DC; color: #A8402C; }
.selo-neutro{ background: var(--fundo-alt); color: var(--marca-media); }

.painel-aviso {
  font-size: 11px;
  color: var(--marca-suave);
  background: var(--fundo-alt);
  border: 1px dashed rgba(33,30,28,.25);
  border-radius: var(--raio-md);
  padding: 10px 14px;
  margin-top: 10px;
}

@media (max-width: 860px) {
  .painel-shell { grid-template-columns: 1fr; }
  .painel-lateral {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: 12px;
  }
  .painel-marca { border: none; padding: 0 14px 0 4px; margin: 0; }
  .painel-nav { flex-direction: row; padding: 0; }
  .painel-nav-rodape { display: none; }
  .painel-conteudo { padding: 16px 14px 40px; }
}

/* ============================================================
   NÚMEROS — correção de tipografia
   ------------------------------------------------------------
   Georgia usa algarismos old-style (3, 4, 7, 9 descem abaixo da
   linha de base) — em tabela financeira isso fica torto e as
   colunas não alinham. Todo número do painel passa a usar Inter
   com figura alinhada e largura fixa (tnum).
   ============================================================ */

:root {
  --fonte-numero: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-painel: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Uma escala de célula para TODA tabela do painel (18/09/2026):
     grade editável, relatório, DRE e as tabelas de Vendas. Antes cada
     uma tinha o seu (7×10, 8×10, 10×14, 11×14) e as telas pareciam
     de sistemas diferentes. Cabeçalho, total e grupo usam os mesmos. */
  --pl-cel-x: 12px;
  --pl-cel-y: 8px;

  /* 16/09/2026: o override local de --fonte-titulo foi REMOVIDO. Ele
     segurava o painel em Georgia/Cormorant enquanto a loja mudava de
     tipografia; com o Warm Luxury a regra passou a ser o contrario —
     painel e loja herdam os MESMOS tokens de tema.css, sem paleta nem
     tipografia propria. O titulo do painel agora e Bodoni Moda, igual
     ao da loja. Nao reintroduzir. */
}

body { font-family: var(--fonte-painel); }

.num,
.kpi-cartao .valor,
table.painel-tabela .num,
.pl-tabela .num,
.pl-in.num {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.005em;
}

.kpi-cartao .valor {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.painel-topo h1,
section.painel-secao h2 {
  font-family: var(--fonte-titulo);
}

.pl-neg { color: #A8402C; }
.pl-forte td { font-weight: 600; background: rgba(183,130,117,.07); }
.pl-vencedor { background: var(--fundo-alt); }

.pl-vazio {
  padding: 22px 14px;
  color: var(--marca-suave);
  font-size: 11.5px;
  text-align: center;
}

/* ============================================================
   PLANILHA EDITÁVEL
   ============================================================ */

.pl-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pl-espaco { flex: 1 1 auto; }

.pl-estado {
  font-size: 11px;
  color: var(--marca-suave);
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
}

.pl-bt {
  font: inherit;
  font-size: 11.5px;
  padding: 7px 13px;
  border: 1px solid rgba(33,30,28,.18);
  background: var(--superficie);
  color: var(--marca-media);
  border-radius: var(--raio-md);
  cursor: pointer;
  line-height: 1.3;
}

.pl-bt:hover { border-color: var(--marca-primaria); color: var(--marca-escura); }

.pl-bt-forte {
  background: var(--marca-escura);
  border-color: var(--marca-escura);
  color: var(--marca-primaria-alt);
  font-weight: 600;
}

/* Mesmo motivo do .btn-solido:hover da loja: o hover pinta o fundo de
   terracota, e blush sobre terracota e 1.7:1. Carbon da 5.1:1. */
.pl-bt-forte:hover { background: var(--marca-escura-hover); color: var(--marca-escura); }
.pl-bt-risco { color: #A8402C; border-color: rgba(168,64,44,.28); }
.pl-bt-risco:hover { background: #F5E1DC; border-color: #A8402C; color: #A8402C; }

.pl-wrap {
  background: var(--superficie);
  border: 1px solid rgba(33,30,28,.14);
  border-radius: var(--raio-lg);
  overflow: auto;
  overscroll-behavior: contain;
  /* O cabecalho da tabela e sticky: ao rolar ate uma linha por
     script ou Tab, ela para abaixo dele, nao escondida. */
  scroll-padding-top: 40px;
  /* Rolagem de lado com o dedo, no tablet, sem trancos. */
  -webkit-overflow-scrolling: touch;
}

table.pl-tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.pl-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--fundo-alt);
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--marca-media);
  padding: var(--pl-cel-y) var(--pl-cel-x);
  border-bottom: 1px solid rgba(33,30,28,.18);
  border-right: 1px solid rgba(33,30,28,.07);
  white-space: nowrap;
}

/* Toda tabela abre com a mesma faixa escura. Em Pedidos e Produtos
   quem faz esse papel e a linha de grupos; nas demais, que nao tem
   grupo, e a propria linha de titulos das colunas. Assim as sete
   telas tem o mesmo topo. */
.pl-tabela thead tr:first-child th {
  background: var(--marca-escura);
  color: var(--marca-primaria-alt);
  border-bottom: none;
  border-right: 1px solid rgba(255,255,255,.14);
}

/* O "fx" das colunas calculadas precisa clarear junto. */
.pl-tabela thead tr:first-child .pl-fx {
  color: var(--marca-primaria-alt);
  border-color: rgba(255,255,255,.35);
}

.pl-tabela thead tr.pl-grupos th {
  top: 0;
  z-index: 4;
  background: var(--marca-escura);
  color: var(--marca-primaria-alt);
  font-size: 9.5px;
  line-height: 10px;   /* 8 + 10 + 8 = 26px: o top da 2ª linha depende disto */
  letter-spacing: .12em;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.14);
  border-bottom: none;
}

.pl-tabela thead tr.pl-grupos + tr th { top: 26px; }

.pl-fx {
  display: inline-block;
  margin-left: 5px;
  font-size: 9px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--marca-primaria);
  border: 1px solid rgba(183,130,117,.5);
  border-radius: var(--raio-sm);
  padding: 0 3px;
}

.pl-tabela td {
  padding: 0;
  border-bottom: 1px solid var(--borda-quente);
  border-right: 1px solid rgba(33,30,28,.05);
  background: var(--superficie);
}

/* Relatório de leitura genérico (Posição de estoque e o que vier
   depois nessa família). .pl-tabela zera o padding da célula esperando
   um <input> dentro — aqui o conteúdo é texto direto, então o espaço
   da linha precisa vir daqui. Tudo centralizado por padrão; só a
   coluna de identidade (.pl-esq, a descrição) vai à esquerda. */
.pl-relatorio td, .pl-relatorio th { text-align: center; }
.pl-relatorio td { padding: var(--pl-cel-y) var(--pl-cel-x); }
.pl-relatorio td.pl-esq { text-align: left; }

/* DRE mensal: as células são texto direto (sem <input>), e o padding
   zero da .pl-tabela deixava os números colados na borda. Mesma
   escala das outras tabelas; a conta (1ª coluna) é nome, vai à
   esquerda. */
.pl-dre td { padding: var(--pl-cel-y) var(--pl-cel-x); }
.pl-dre td:first-child { text-align: left; }

/* Barra de total fixa na JANELA, não no fim da tabela — por isso
   position:fixed, e não tfoot sticky (esse só gruda no fim do .pl-wrap
   que rola, e some da vista assim que a rolagem passa da tabela).
   left:240px acompanha a largura fixa da barra lateral. */
.pl-rodape-fixo {
  position: fixed;
  bottom: 0;
  left: 240px;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  gap: 28px;
  padding: 13px 24px;
  background: var(--marca-escura);
  color: rgba(255,255,255,.82);
  font-size: 11.5px;
  box-shadow: 0 -6px 16px rgba(33,30,28,.16);
}

.pl-rodape-fixo strong {
  margin-left: 6px;
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  color: var(--marca-primaria-alt);
}

/* Respiro pro rodapé fixo não cobrir a última linha da tabela. */
.painel-conteudo:has(.pl-rodape-fixo) { padding-bottom: 68px; }

@media (max-width: 860px) {
  .pl-rodape-fixo { left: 0; flex-wrap: wrap; row-gap: 4px; padding: 10px 14px; }
}

.pl-tabela tbody tr:hover td { background: color-mix(in srgb, var(--marca-primaria) 8%, transparent); }

/* primeira coluna fixa ao rolar na horizontal — na grade editável o
   lápis/x abre mão do posto (não precisa: o duplo clique edita a
   linha inteira agora), quem fica ancorada é a coluna de código,
   que virou a segunda. DRE e relatórios continuam com a identidade
   na primeira coluna mesmo, por isso o :not(.pl-grade). */
.pl-tabela:not(.pl-grade) thead th:first-child,
.pl-tabela:not(.pl-grade) tbody td:first-child,
.pl-tabela:not(.pl-grade) tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid rgba(33,30,28,.16);
}
.pl-tabela:not(.pl-grade) thead th:first-child { z-index: 5; }

.pl-grade thead th:nth-child(2),
.pl-grade tbody td:nth-child(2),
.pl-grade tfoot td:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid rgba(33,30,28,.16);
}
.pl-grade thead th:nth-child(2) { z-index: 5; }

/* A celula fixa precisa de fundo OPACO. O hover pinta a linha com
   cor translucida; na coluna que fica parada enquanto o resto rola,
   translucido deixa a coluna de baixo aparecer por tras ("PRD002"
   em cima de "Conjunto", 16/09/2026). color-mix produz a mesma cor
   do hover, so que solida. Sem zebra (linha vira hairline), o fundo
   opaco vem direto do --fundo. */
.pl-tabela:not(.pl-grade) tbody td:first-child,
.pl-grade tbody td:nth-child(2) { background: var(--fundo); }
.pl-tabela:not(.pl-grade) tbody tr:hover td:first-child,
.pl-grade tbody tr:hover td:nth-child(2) {
  background: color-mix(in srgb, var(--marca-primaria) 8%, var(--fundo));
}

.pl-cel.pl-calc {
  padding: var(--pl-cel-y) var(--pl-cel-x);
  color: var(--marca-media);
  background: rgba(239,233,223,.75) !important;
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.pl-in {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--marca-escura);
  padding: var(--pl-cel-y) var(--pl-cel-x);
  outline: none;
  border-radius: var(--raio-controle);
}

.pl-in.num { text-align: right; }
.pl-in::placeholder { color: var(--marca-suave); }

.pl-in:focus {
  background: var(--fundo-alt);
  /* Carbon, nao terracota: anel de foco e elemento nao textual e
     precisa de 3:1 (WCAG 1.4.11). Terracota sobre o sand do campo da
     2.7:1; carbon da 15:1. */
  outline: 2px solid var(--marca-escura);
  outline-offset: 0;
}

select.pl-in {
  appearance: none;
  cursor: pointer;
  padding-right: 20px;
  background-image: linear-gradient(45deg, transparent 50%, var(--marca-suave) 50%),
                    linear-gradient(135deg, var(--marca-suave) 50%, transparent 50%);
  background-position: right 10px center, right 6px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.pl-tabela tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--fundo-alt);
  font-weight: 600;
  padding: var(--pl-cel-y) var(--pl-cel-x);
  border-top: 1px solid rgba(33,30,28,.20);
  white-space: nowrap;
}

.pl-acao { width: 66px; text-align: center; white-space: nowrap; }

/* Lapis: abre a ficha desta linha. Fica ao lado do x porque e a
   mesma coluna de "o que fazer com a linha inteira". */
.pl-ficha {
  border: 0;
  background: transparent;
  color: var(--marca-suave);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--raio-md);
}

.pl-ficha:hover { background: var(--fundo-alt); color: var(--marca-escura); }

.pl-x {
  border: 0;
  background: transparent;
  color: var(--marca-suave);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--raio-md);
}

.pl-x:hover { background: #F5E1DC; color: #A8402C; }

@media (max-width: 860px) {
  .pl-wrap { max-height: 60vh; }   /* no celular a pagina rola de novo */
  .pl-barra { gap: 6px; }
  .pl-espaco { display: none; }
  .pl-estado { order: 9; }
}

@media (max-width: 560px) {
  /* Empilhado, não encolhido: tentar caber "+ Nova linha", "Salvar" e
     "Baixar CSV" lado a lado nessa largura só cortava texto sem
     rolagem nenhuma — a pessoa não via que o botão continuava ali.
     Uma coluna garante que nada corta, e o alvo de toque fica maior. */
  .pl-barra { flex-direction: column; align-items: stretch; }
  .pl-bt, .pl-busca { flex: none; width: 100%; text-align: center; min-width: 0; }
  .pl-estado { width: 100%; text-align: center; }
}

/* grid: sem isto a coluna de conteúdo assume a largura mínima
   da tabela mais larga e a página inteira rola na horizontal */
.painel-conteudo { min-width: 0; }
.painel-tabela-wrap, .pl-wrap { max-width: 100%; }

/* ============================================================
   NAVEGAÇÃO POR TELA (30/08/2026)
   ------------------------------------------------------------
   Cada item do menu é uma vista independente. A página não
   rola mais de uma seção para outra.
   ============================================================ */

.vista[hidden] { display: none; }

.painel-nav-titulo {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.34);
  padding: 16px 12px 5px;
}

.painel-nav-titulo:first-child { padding-top: 2px; }

.painel-topo .painel-secao-legenda {
  margin: 6px 0 0;
  max-width: 62ch;
}

/* --- cartões da visão geral --- */

.painel-cartao { margin-top: 26px; }

/* Os tres blocos da analise usam a MESMA casca. Antes so a rosca
   tinha superficie, e o DRE e o grafico ficavam soltos sobre o
   fundo da pagina — dai a sensacao de desalinhado. */
.painel-analise > .painel-cartao {
  margin-top: 0;
  padding: 18px 20px 20px;   /* um degrau a mais de respiro que os 14/16 originais */
  background: var(--superficie);
  border: 1px solid rgba(33,30,28,.10);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-controle);
  display: flex;
  flex-direction: column;
}

.painel-analise .painel-cartao-topo h2 { margin: 0; }

/* Dentro do cartao, a tabela nao repete borda nem fundo: caixa
   dentro de caixa e o que mais suja este tipo de tela. */
.painel-analise .painel-tabela-wrap {
  background: none;
  border: 0;
  border-radius: 0;
}

/* O que sobra de altura fica com o conteudo, nao com o titulo:
   e isso que alinha o rodape dos tres cartoes. */
.painel-analise #composicao-corpo,
.painel-analise #margem-corpo,
.painel-analise .painel-tabela-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.painel-analise .painel-tabela-wrap { justify-content: flex-start; }

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

.painel-cartao-topo h2 {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  margin: 0;
}

.painel-cartao-topo .pl-bt {
  text-decoration: none;
  white-space: nowrap;
}

/* O max-width de 560px saiu: agora a coluna da grade e que define
   a largura, e o botao acompanha a borda do cartao. */

@media (max-width: 860px) {
  .painel-lateral { flex-wrap: nowrap; }
  .painel-nav-titulo { display: none; }
  .painel-cartao-topo { flex-wrap: wrap; }
  /* A barra horizontal não tem "embaixo" — o traço de separação da
     Visão geral só faz sentido na lista vertical do desktop. */
  .painel-nav-fixo { margin-bottom: 0; padding-bottom: 8px !important; border-bottom: 0; }
}

/* --- ajustes de celular --------------------------------------
   O menu virou barra horizontal: rótulo não pode quebrar linha,
   senão a barra fica com o dobro da altura. */
@media (max-width: 860px) {
  .painel-lateral {
    padding: 8px 10px;
    gap: 4px;
  }

  .painel-marca {
    padding: 0 12px 0 4px;
    flex: none;
  }

  .painel-marca strong { font-size: 18px; white-space: nowrap; }
  .painel-marca span { display: none; }
  /* A lateral vira barra horizontal e não cabe o indicador por extenso. */
  .painel-marca .painel-operacao { display: none; }

  .painel-nav { flex-wrap: nowrap; }
  .painel-nav a { white-space: nowrap; padding: 8px 11px; }

  /* rótulo do grupo alinhado à esquerda: centralizado ele some
     fora da tela quando o grupo tem muitas colunas */
  .pl-tabela thead tr.pl-grupos th {
    text-align: left;
    position: sticky;
    left: 0;
  }

  .painel-periodo { display: none; }
  .painel-topo { margin-bottom: 18px; }
}

/* A barra do topo estava com 175px: o grid tem min-height 100vh e
   distribuía a sobra entre as duas linhas. Fixa a barra no tamanho
   do conteúdo e joga o resto para o conteúdo. */
@media (max-width: 860px) {
  .painel-shell { grid-template-rows: auto 1fr; }
}

/* a DRE resumida tem 2 colunas: não precisa do min-width de 560px
   herdado das tabelas largas, senão ganha barra de rolagem à toa */
#bloco-dre table.painel-tabela { min-width: 0; }

/* Waterfall da DRE da visão geral — escopado em #dre-corpo para não
   mexer na tela DRE mensal, que usa .pl-forte com outro sentido. */
#dre-corpo .pl-forte td { background: rgba(183,130,117,.16); }
#dre-corpo .pl-total td { background: var(--marca-escura); color: var(--fundo); font-weight: 600; }
#dre-corpo .pl-total .pl-neg { color: #F0B3A4; }   /* mesmo motivo do cartao vinho */
#dre-corpo .pl-total td:first-child { border-radius: var(--raio-md) 0 0 var(--raio-md); }
#dre-corpo .pl-total td:last-child  { border-radius: 0 var(--raio-md) var(--raio-md) 0; }

/* linhas de detalhe da DRE (Mercadoria, Embalagem, Frete dentro do CMV) */
.pl-filho td:first-child {
  padding-left: calc(var(--pl-cel-x) + 16px);
  color: var(--marca-suave);
  font-size: 11px;
}
.pl-filho td { color: var(--marca-suave); }


/* ============================================================
   NUVEM — estado da gravação e tela de login
   ============================================================ */

.nuvem-ok        { color: var(--verde, #4b7a52); }
.nuvem-pendente,
.nuvem-salvando  { color: var(--marca-escura); opacity: .75; }
.nuvem-erro      { color: #a3402f; font-weight: 600; }

#login-fundo {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fundo-alt);
}

.login-cartao {
  width: 100%;
  max-width: 360px;
  display: grid;
  gap: 14px;
  padding: 32px 28px;
  border: 1px solid rgba(33,30,28, .14);
  /* Canto reto e elevação quase nula, como o resto do Warm Luxury. */
  border-radius: var(--raio-lg);
  background: var(--fundo);
  box-shadow: var(--sombra-alta);
}

.login-marca {
  font-family: var(--fonte-titulo);
  font-size: 1.55rem;
  letter-spacing: .04em;
  color: var(--marca-escura);
}

.login-legenda {
  margin: -8px 0 4px;
  font-size: .84rem;
  line-height: 1.5;
  opacity: .7;
}

.login-cartao label {
  display: grid;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca-media);
}

.login-cartao input {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: .95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--marca-escura);
  border: 1px solid var(--borda-quente);
  border-radius: var(--raio-controle);
  background: var(--fundo-alt);
}

.login-cartao input:focus {
  outline: 2px solid var(--marca-escura);
  outline-offset: 1px;
  border-color: transparent;
}

.login-cartao button {
  margin-top: 4px;
  padding: 12px;
  font: inherit;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: var(--marca-escura);
  border: 0;
  border-radius: var(--raio-controle);
  cursor: pointer;
}

.login-cartao button:disabled { opacity: .55; cursor: default; }

.login-erro {
  min-height: 1.2em;
  margin: 0;
  font-size: .84rem;
  line-height: 1.4;
  color: #a3402f;
}

/* ============================================================
   SISTEMA INTERNO — tela cheia, um scroll só
   ------------------------------------------------------------
   Antes a página rolava E a tabela rolava dentro dela: duas
   barras aninhadas, cabeçalho fixo que não parecia fixo, e uma
   faixa morta à direita por causa do max-width de 1180px.

   Agora o painel ocupa a janela inteira: só a área de conteúdo
   rola. No celular (≤ 860px) nada disso vale — lá a página rola
   normalmente, que é o comportamento certo em tela pequena.
   ============================================================ */

@media (min-width: 861px) {
  html, body { height: 100%; overflow: hidden; }

  .painel-shell { height: 100vh; min-height: 0; }

  /* scrollbar-gutter reserva o espaco da barra desde o inicio: a
     lateral e a visao geral nao mudam de largura quando o conteudo
     cresce e a barra aparece. overscroll-behavior: contain segura a
     rolagem dentro da area - chegar ao fim da tabela nao rola a
     lateral, e vice-versa. */
  .painel-lateral {
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  .painel-conteudo {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .painel-topo { flex: none; }

  /* A visão geral rola por dentro; as planilhas não rolam a
     página — quem rola é a própria grade. */
  /* Toda vista de LEITURA (visao geral, vendas) rola por dentro: a
     pagina nao rola no desktop, e sem isto o que passa da altura da
     janela fica inalcancavel — Vendas ficou sem scroll em 16/09/2026.
     As grades nao entram aqui: nelas quem rola e o .pl-wrap. */
  #vista-visao-geral,
  #vista-vendas {
    overflow-y: auto; padding-right: 4px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    scroll-padding-top: 20px;
  }

  .vista { min-height: 0; }
  .vista:not([hidden]) { display: flex; flex-direction: column; flex: 1; }

  #vista-planilha .pl-wrap { flex: 1; min-height: 0; }
  #vista-planilha .pl-barra,
  #vista-planilha .painel-aviso { flex: none; }
}

/* --- Visão geral em duas colunas ---------------------------- */
/* Tres colunas iguais: a proporcao e a mesma para os tres blocos,
   e "align-items: stretch" (o padrao) deixa os tres com a altura
   do mais alto — sem degrau entre eles. */
.painel-analise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1240px) {
  .painel-analise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-analise > #bloco-margem { grid-column: 1 / -1; }
}

@media (max-width: 840px) {
  .painel-analise { grid-template-columns: 1fr; }
  .painel-analise > #bloco-margem { grid-column: auto; }
}

/* --- Rosca da composição da receita ------------------------- */
#bloco-composicao .painel-cartao-topo { margin-bottom: 4px; }

.rosca-numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.rosca-indicador .rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--marca-suave);
}

.rosca-indicador .valor {
  font-family: var(--fonte-numero);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.rosca-indicador .valor.positivo { color: #3E6B47; }
.rosca-indicador .valor.negativo { color: #A8402C; }
.rosca-indicador .nota { font-size: 11px; color: var(--marca-suave); }

.rosca {
  display: block;
  width: 168px;
  height: 168px;
  margin: 2px auto 10px;
}

/* O anel some para quem lê por leitor de tela ou impressão em
   preto e branco — por isso a legenda abaixo traz valor e %. */
.rosca-arco { transition: opacity .12s; }
.rosca:hover .rosca-arco { opacity: .55; }
.rosca .rosca-arco:hover { opacity: 1; }

.rosca-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.rosca-legenda li {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(33,30,28,.08);
}

.rosca-marca { width: 10px; height: 10px; border-radius: var(--raio-sm); }
.rosca-rotulo { color: var(--marca-media); }
.rosca-valor  { color: var(--marca-escura); }
.rosca-pct    { color: var(--marca-suave); min-width: 48px; text-align: right; }

.rosca-aviso {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #A8402C;
}

/* --- Coluna de acumulado no DRE ----------------------------- */
.pl-tabela th.pl-acumulado,
.pl-tabela td.pl-acumulado {
  background: var(--fundo-alt);
  border-left: 2px solid var(--marca-primaria);
  font-weight: 600;
}

/* O cabecalho do acumulado herdava a cor de texto do thead claro:
   marrom medio sobre marrom escuro nao se lia. Agora ele segue a
   mesma faixa clara das celulas, e a distincao vem da borda e do
   peso — nao de um fundo escuro. */
.pl-tabela thead tr:first-child th.pl-acumulado {
  background: var(--fundo-alt);
  color: var(--marca-escura);
  font-weight: 700;
}

/* --- Busca dentro da tabela --------------------------------- */
.pl-busca {
  font: inherit;
  font-size: 11.5px;
  padding: 6px 10px;
  min-width: 220px;
  color: var(--marca-escura);
  background: var(--fundo-alt);
  border: 1px solid var(--borda-quente);
  border-radius: var(--raio-md);
}

.pl-busca:focus {
  outline: none;
  border-color: var(--marca-primaria);
  box-shadow: 0 0 0 3px rgba(183,130,117,.18);
}

/* ============================================================
   CAMADA DE INTERAÇÃO — vocabulário da Apple, cores da ALMY CLUB
   ------------------------------------------------------------
   O que veio da linguagem da Apple é o COMPORTAMENTO, não a
   paleta: forma de botão, seletor segmentado, foco visível,
   item de menu em pastilha, e movimento curto que confirma a
   ação sem chamar atenção para si.

   Nada de cinza de sistema: cada superfície e cada realce sai
   dos tokens de ../css/tema.css. Se a marca mudar de cor, esta
   camada muda junto sem ser tocada.

   NÃO usamos o system.css: aquele framework é o Mac System 6,
   monocromático por definição — vestir de dourado o descaracteriza.
   ============================================================ */

/* Os tokens de movimento, raio de controle, sombra e foco moram em
   ../css/tema.css — a loja e o painel reagem do mesmo jeito porque
   leem a mesma fonte. */

/* Quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .painel-pulso { animation: none; }
}

/* --- Navegação lateral em pastilhas ------------------------- */
.painel-nav a {
  position: relative;
  margin: 1px 10px;
  padding: 7px 12px;
  border-radius: var(--raio-controle);
  transition: background var(--mov-rapido) var(--curva),
              color var(--mov-rapido) var(--curva);
}

.painel-nav a:hover { background: rgba(255,255,255,.07); }

.painel-nav a.ativo {
  background: var(--marca-primaria);
  color: var(--marca-escura);
  font-weight: 600;
}

.painel-nav a.ativo:hover { background: var(--marca-primaria-alt); }

/* --- Botões ------------------------------------------------- */
.pl-bt {
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-controle);
  transition: background var(--mov-rapido) var(--curva),
              border-color var(--mov-rapido) var(--curva),
              transform var(--mov-rapido) var(--curva),
              box-shadow var(--mov-rapido) var(--curva);
}

.pl-bt:active { transform: translateY(.5px); box-shadow: none; }

/* Foco só aparece para quem navega por teclado — o clique do
   mouse não deixa anel para trás. */
.pl-bt:focus-visible,
.pl-busca:focus-visible,
.seg-bt:focus-visible,
.painel-nav a:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}

/* --- Seletor segmentado ------------------------------------- */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 14px;
  background: rgba(33,30,28,.07);
  border-radius: var(--raio-pastilha);
}

.seg-bt {
  font: inherit;
  font-size: 12px;
  padding: 6px 16px;
  color: var(--marca-media);
  background: none;
  border: 0;
  border-radius: var(--raio-controle);
  cursor: pointer;
  transition: background var(--mov-rapido) var(--curva),
              color var(--mov-rapido) var(--curva),
              box-shadow var(--mov-rapido) var(--curva);
}

.seg-bt:hover { color: var(--marca-escura); }

.seg-bt.ativo {
  color: var(--marca-escura);
  font-weight: 600;
  background: var(--superficie);
  box-shadow: var(--sombra-controle);
}

/* --- Campos ------------------------------------------------- */
.pl-busca { border-radius: var(--raio-controle); }
.pl-busca:focus { box-shadow: var(--foco); }

/* --- Cartões ------------------------------------------------ */
.painel-cartao,
.kpi-cartao,
.painel-tabela-wrap,
.pl-wrap {
  border-radius: var(--raio-lg);
}

.kpi-cartao {
  box-shadow: var(--sombra-controle);
  transition: box-shadow var(--mov-normal) var(--curva),
              transform var(--mov-normal) var(--curva);
}

.kpi-cartao:hover {
  box-shadow: var(--sombra-flutuante);
  transform: translateY(-1px);
}

/* --- Troca de tela ------------------------------------------
   Um respiro de 220ms: a tela nova sobe 6px e aparece. Sem isto
   a navegação "pisca" e o olho perde onde estava. */
.vista:not([hidden]) { animation: vistaEntra var(--mov-normal) var(--curva); }

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

/* ============================================================
   VENDAS — barras e notas
   ============================================================ */
.vendas-corpo > .painel-cartao { margin-bottom: 14px; }

.barras {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

.barras li {
  display: grid;
  grid-template-columns: minmax(90px, 190px) 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}

.barras-rotulo {
  font-size: 12px;
  color: var(--marca-media);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barras-trilho {
  height: 9px;
  background: rgba(33,30,28,.07);
  border-radius: 999px;
}

.barras-marca {
  display: block;
  position: relative;
  overflow: hidden;   /* a faixa interna nao pode vazar da barra externa */
  height: 100%;
  background: var(--marca-primaria);
  border-radius: 999px;
  transition: width var(--mov-normal) var(--curva);
}

/* Faixa dupla (porMes, porCanal): o comprimento total da barra é o
   faturamento; esta faixa por cima é a fatia que virou margem. */
.barras-dentro {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: #3E6B47;   /* mesmo verde de positivo/margem do resto do painel */
  border-radius: 999px;
}

.barras-nota {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--marca-suave);
}

.barras-chave {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: var(--raio-sm);
  margin: 0 4px 0 0;
  vertical-align: middle;
}

.barras-chave-total  { background: var(--marca-primaria); }
.barras-chave-margem { background: #3E6B47; margin-left: 12px; }

.barras-valor {
  font-size: 12px;
  color: var(--marca-escura);
  min-width: 92px;
  text-align: right;
}

.vendas-nota {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--marca-suave);
}

.vendas-nota .positivo { color: #3E6B47; }
.vendas-nota .negativo { color: #A8402C; }

/* --- Gráficos: linhas (margem por produto) e colunas (mês) --
   Os dois viraram largura total do cartão sem limite — num cartão
   largo a proporção do viewBox esticava e achatava o desenho.
   O teto mantém a forma correta em qualquer largura de tela. */
.linhas,
.colunas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 620px;
  margin: 0 auto 6px;
}

.col-total  { fill: var(--marca-primaria); }
.col-margem { fill: #3E6B47; }

.lin-grade { stroke: rgba(33,30,28,.12); stroke-width: 1; }

.lin-eixo {
  fill: var(--marca-suave);
  font-family: var(--fonte-numero);
  font-size: 10px;
}

.lin-traco {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O anel da cor da superfície separa pontos que se cruzam. */
.lin-ponto { stroke: var(--superficie); stroke-width: 2; }

.lin-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.lin-legenda li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(33,30,28,.08);
  color: var(--marca-media);
}

/* --- Cartão de indicador com explicação --------------------- */
.kpi-ajuda {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(33,30,28,.08);
  font-size: 11px;
  line-height: 1.4;
  color: var(--marca-suave);
}

/* --- Cartão de destaque: Lucro bruto -------------------------
   Único lugar do painel onde o vinho aparece — o KPI que resume
   o resultado da operação merece o contraste de prestígio. */
.kpi-cartao.kpi-destaque {
  background: var(--marca-vinho);
  border-color: var(--marca-vinho);
}
.kpi-destaque .rotulo { color: rgba(255,255,255,.70); }
.kpi-destaque .valor,
.kpi-destaque .valor.positivo { color: var(--marca-primaria-alt); }
/* Prejuizo sobre o vinho: o terracota do painel (#A8402C) some no fundo escuro.
   Este e o mesmo tom clareado, so para este cartao. */
.kpi-destaque .valor.negativo { color: #F0B3A4; }
.kpi-destaque .nota,
.kpi-destaque .kpi-ajuda { color: rgba(255,255,255,.62); border-top-color: rgba(255,255,255,.16); }
.kpi-destaque .kpi-var.positivo { color: var(--marca-primaria-alt); }
.kpi-destaque .kpi-var.negativo { color: #F0B3A4; }
.kpi-destaque .kpi-var span { color: rgba(255,255,255,.55); }

/* ============================================================
   ALINHAMENTO — um padrão para as sete telas
   ------------------------------------------------------------
   Título de coluna: sempre centralizado.
   Célula: número à direita (as casas decimais precisam bater),
   texto livre à esquerda (descrição, observação, conta), e todo
   o resto centralizado.
   ============================================================ */

.pl-tabela thead th,
table.painel-tabela th { text-align: center; }

/* Sem exceção para a primeira coluna (18/09/2026): o título de
   coluna é SEMPRE centralizado, inclusive código e conta. Quem vai
   à esquerda é o conteúdo da célula, quando é texto. */

.pl-tabela td.pl-centro,
.pl-tabela td.pl-centro .pl-in { text-align: center; }

.pl-tabela td.pl-esq,
.pl-tabela td.pl-esq .pl-in { text-align: left; }

/* O <select> centralizado precisa do alinhamento no próprio
   elemento — em alguns navegadores ele ignora o herdado. */
.pl-tabela td.pl-centro select.pl-in { text-align-last: center; }

/* --- Botão salvar ------------------------------------------- */
.pl-bt-salvar {
  min-width: 92px;
  font-weight: 600;
  color: var(--marca-escura);
  border-color: var(--marca-primaria);
  background: color-mix(in srgb, var(--marca-primaria) 14%, transparent);
}

.pl-bt-salvar:hover {
  background: color-mix(in srgb, var(--marca-primaria) 26%, transparent);
}

/* Os três desfechos do salvar dizem o que houve pela cor e pelo
   texto — nunca só pela cor. */
.pl-bt-ok {
  color: #2F5B3A;
  border-color: #2F5B3A;
  background: color-mix(in srgb, #3E8A50 14%, transparent);
}

.pl-bt-alerta {
  color: #8A5A12;
  border-color: #C58A22;
  background: color-mix(in srgb, #C58A22 16%, transparent);
}

.pl-bt-erro {
  color: #A8402C;
  border-color: #A8402C;
  background: color-mix(in srgb, #A8402C 12%, transparent);
}

/* ============================================================
   FICHA — cadastro em pop-up (ficha.js)
   ------------------------------------------------------------
   Um <dialog> nativo: ele já escurece o fundo, prende o foco
   dentro e fecha no Esc sem uma linha de JavaScript nossa.

   No computador é um cartão centrado. No celular vira tela
   cheia — pop-up pequeno com teclado aberto não sobra espaço
   para ver o que se está digitando.
   ============================================================ */

.fi {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 720px;
  width: calc(100% - 40px);
  max-height: calc(100vh - 48px);
  overflow: visible;
  color: var(--marca-media);
}

.fi::backdrop {
  background: rgba(33,30,28, .38);
  backdrop-filter: blur(2px);
}

.fi-caixa {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  background: var(--superficie);
  border: 1px solid rgba(33,30,28, .14);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

/* Entrada curta e de baixo para cima, na curva do resto do painel.
   Quem pediu tela sem animação (--mov) não vê nada disso. */
.fi[open] .fi-caixa {
  animation: fi-entra var(--mov-normal) var(--curva);
}

@keyframes fi-entra {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------- cabeçalho ---------- */

.fi-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid rgba(33,30,28, .12);
  background: var(--fundo-alt);
}

.fi-topo h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--marca-escura);
  letter-spacing: -0.01em;
}

.fi-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--marca-suave);
}

.fi-x {
  flex: none;
  width: 30px;
  height: 30px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--marca-suave);
  cursor: pointer;
  transition: background var(--mov-rapido) var(--curva),
              color var(--mov-rapido) var(--curva);
}

.fi-x:hover { background: rgba(33,30,28, .08); color: var(--marca-escura); }

/* ---------- corpo ---------- */

/* Só o miolo rola. O título e os botões ficam sempre à vista —
   no celular, botão que some no rodapé da rolagem é botão que
   ninguém acha. */
.fi-corpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 18px 18px;
}

.fi-secao { margin-top: 16px; }

.fi-secao-titulo {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--marca-detalhe);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(33,30,28, .10);
}

.fi-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.fi-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Descrição livre, observação e escolha de cadastro ocupam a
   linha inteira: são os campos em que caber pouco atrapalha. */
.fi-largo { grid-column: 1 / -1; }

.fi-rotulo {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca-media);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* A explicação que na grade estava escondida no title do cabeçalho
   aqui fica visível — é a vantagem de ter espaço vertical. */
.fi-dica {
  font-size: 11px;
  line-height: 1.35;
  color: var(--marca-suave);
}
/* Foto 1 vazia: de onde a miniatura esta vindo (img/<CODIGO>-frente.jpg).
   Em cinza e caixa normal — e caminho de arquivo, nao dado. */
.fi-dica-convencao {
  display: block;
  margin-top: 2px;
  color: var(--marca-suave);
  opacity: .85;
  text-transform: none;
  letter-spacing: 0;
}

.fi-in {
  font: inherit;
  font-size: 12px;
  width: 100%;
  padding: 9px 11px;
  color: var(--marca-escura);
  background: var(--fundo-alt);
  border: 1px solid var(--borda-quente);
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra-controle) inset;
  transition: border-color var(--mov-rapido) var(--curva),
              box-shadow var(--mov-rapido) var(--curva);
}

/* 16px trava o zoom automático do Safari no iPhone ao focar o
   campo — abaixo disso ele dá um pulo de escala em toda a tela. */
@media (max-width: 860px) {
  .fi-in { font-size: 16px; }
}

.fi-in:hover { border-color: rgba(33,30,28, .34); }

.fi-in:focus {
  outline: none;
  border-color: var(--marca-primaria);
  box-shadow: var(--foco);
}

.fi-in.num {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

textarea.fi-in { resize: vertical; min-height: 62px; line-height: 1.4; }

select.fi-in {
  appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--marca-suave) 50%),
    linear-gradient(135deg, var(--marca-suave) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---------- campo calculado ---------- */

/* Sem caixa de digitar, de propósito: coluna "calc" é resultado,
   nunca entrada. Quem calcula é o dados.js. */
.fi-campo-calc .fi-valor {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 12px;
  padding: 9px 11px;
  border: 1px dashed rgba(33,30,28, .18);
  border-radius: var(--raio-controle);
  background: var(--fundo-alt);
  color: var(--marca-media);
  text-align: right;
}

/* ---------- erro e rodapé ---------- */

.fi-erro {
  margin: 0 18px;
  padding: 9px 12px;
  font-size: 12px;
  color: #A8402C;
  background: #F5E1DC;
  border: 1px solid rgba(168, 64, 44, .28);
  border-radius: var(--raio-md);
}

.fi-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 18px;
  margin-top: 14px;
  border-top: 1px solid rgba(33,30,28, .12);
  background: var(--fundo-alt);
}

.fi-rodape .pl-bt { padding: 9px 18px; font-size: 12.5px; }

/* ---------- celular ---------- */

@media (max-width: 620px) {
  .fi {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    margin: 0;
    /* O <dialog> vem centrado por padrão; no celular ele é a tela. */
    top: 0;
    left: 0;
  }

  .fi-caixa {
    max-height: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  /* Uma coluna: campo estreito com teclado aberto não se lê. */
  .fi-grade { grid-template-columns: 1fr; }

  /* Alvo de toque mais alto e botões do tamanho do polegar. */
  .fi-in { padding: 11px 12px; }

  /* Empilhado, não dividido em 3 fatias: com "Duplicar" a mais, três
     botões em flex:1 não cabiam mais lado a lado — "Salvar alterações"
     estourava a tela. Mesma solução da barra de Vendas: uma coluna,
     alvo de toque maior, nada corta. */
  .fi-rodape { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-direction: column; }
  .fi-rodape .pl-bt { width: 100%; padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fi[open] .fi-caixa { animation: none; }
}

/* ============================================================
   ABAS DA TELA DE LISTAS
   ------------------------------------------------------------
   Sete cadastros numa tela so. Sao poucos e mutuamente
   exclusivos: seletor segmentado, tudo visivel, um clique.
   ============================================================ */

.pl-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  background: var(--fundo-alt);
  border: 1px solid rgba(33,30,28, .14);
  border-radius: var(--raio-pastilha);
}

.pl-aba {
  font: inherit;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: transparent;
  color: var(--marca-suave);
  cursor: pointer;
  transition: background var(--mov-rapido) var(--curva),
              color var(--mov-rapido) var(--curva);
}

.pl-aba:hover { color: var(--marca-escura); background: rgba(33,30,28, .05); }

.pl-aba-ativa,
.pl-aba-ativa:hover {
  background: var(--superficie);
  border-color: rgba(33,30,28, .16);
  color: var(--marca-escura);
  font-weight: 600;
  box-shadow: var(--sombra-controle);
}

.pl-aba:focus-visible { outline: none; box-shadow: var(--foco); }

/* Quantas opcoes cada lista tem — a informacao que faz a pessoa
   decidir se precisa abrir. */
.pl-aba-n {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(33,30,28, .09);
  color: var(--marca-suave);
}

.pl-aba-ativa .pl-aba-n { background: var(--marca-primaria-alt); color: var(--marca-escura); }

@media (max-width: 860px) {
  .pl-abas { overflow-x: auto; flex-wrap: nowrap; }
  .pl-aba { white-space: nowrap; }
}

/* ============================================================
   BARRA LATERAL EM GRUPOS (09/09/2026)
   ------------------------------------------------------------
   Quinze links sempre visiveis viram uma lista plana que a
   pessoa rele inteira toda vez que abre o painel. Os grupos
   agora seguem FREQUENCIA DE USO — dia a dia em cima, dado
   mestre embaixo — e cada um abre e fecha.
   ============================================================ */

.painel-grupo { display: block; }

/* O titulo do grupo virou botao. Continua com cara de rotulo:
   ele organiza a lista, nao compete com os links. */
button.painel-nav-titulo {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
  background: transparent;
  border: 0;
  border-radius: var(--raio-md);
  padding: 15px 12px 5px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--mov-rapido) var(--curva);
}

button.painel-nav-titulo:hover { color: rgba(255, 255, 255, .62); }

button.painel-nav-titulo:focus-visible { outline: none; box-shadow: var(--foco); }

.painel-grupo:first-child button.painel-nav-titulo { padding-top: 2px; }

.painel-nav-titulo > span:first-child { flex: 1; }

.painel-grupo-seta {
  width: 10px;
  height: 6px;
  flex: none;
  opacity: .7;
  transition: transform var(--mov-normal) var(--curva);
}

.painel-grupo.fechado .painel-grupo-seta { transform: rotate(-90deg); }

/* Grupo fechado que contem a tela aberta nunca acontece — o
   roteador o reabre. A marca existe para o caso de o grupo ter
   sido fechado por outra aba do navegador. */
.painel-grupo-marca {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--marca-primaria);
  opacity: 0;
  flex: none;
  transition: opacity var(--mov-rapido) var(--curva);
}

.painel-grupo.fechado:has(a.ativo) .painel-grupo-marca { opacity: 1; }

.painel-grupo-itens {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.painel-grupo.fechado .painel-grupo-itens { display: none; }

/* --- estado ativo, legivel de relance ---------------------- */

/* A pastilha dourada ja se ve. O que faltava era saber, de canto
   de olho, em que altura da lista voce esta: a barrinha a esquerda
   sai da borda da barra e ancora o item. */
.painel-nav a.ativo::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  background: var(--marca-primaria-alt);
}

/* --- rodape de utilidades ---------------------------------- */

.painel-nuvem {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
  padding-bottom: 8px;
  line-height: 1.4;
}

/* --- celular ------------------------------------------------
   A barra vira uma faixa horizontal: os grupos somem como
   estrutura e os links voltam a ser uma fila so. "display:
   contents" faz o wrapper desaparecer sem tirar os filhos. */
@media (max-width: 860px) {
  .painel-grupo,
  .painel-grupo-itens { display: contents; }
  button.painel-nav-titulo { display: none; }
  .painel-nav a.ativo::before { display: none; }
}

/* O aviso da nuvem desceu para o rodape da barra lateral, que e
   escura: as cores de status precisam de mais luz que as do topo. */
.painel-nuvem.nuvem-ok     { color: #9CC6A6; }
.painel-nuvem.nuvem-alerta { color: var(--marca-primaria-alt); }
.painel-nuvem.nuvem-erro   { color: #E8A392; font-weight: 600; }

@media (max-width: 860px) {
  .painel-nuvem { display: none; }
}

/* ============================================================
   CADASTRO EM CARTÕES (planilha.js: desenharCards)
   ------------------------------------------------------------
   Clientes e Fornecedores viraram cartão em vez de linha de
   tabela: cadastro de gente não se confere coluna a coluna, e
   vinte colunas na tela não cabiam sem rolar de lado.
   ============================================================ */

.cad-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.cad-cartao {
  position: relative;
  background: var(--superficie);
  border: 1px solid rgba(33,30,28,.10);
  border-radius: var(--raio-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--mov-rapido) var(--curva),
              box-shadow var(--mov-rapido) var(--curva);
}

.cad-cartao:hover { border-color: rgba(183,130,117,.55); box-shadow: var(--sombra-flutuante); }
.cad-cartao:focus-visible { outline: none; box-shadow: var(--foco); }

/* Variante de leitura (vendas.js: cardsLista) — mesmo cartão,
   sem o convite ao clique: aqui não há ficha para abrir. */
.cad-cartao-fixo { cursor: default; }
.cad-cartao-fixo:hover { border-color: rgba(33,30,28,.10); box-shadow: none; }

.cad-cartao-titulo { font-family: var(--fonte-titulo); font-size: 16px; margin: 0 26px 6px 0; }
.cad-cartao-linha  { font-size: 11px; color: var(--marca-suave); margin: 8px 0 0; }

/* Cabeçalho do cartão de leitura (vendas.js: cardsLista) — título e
   selo de margem na mesma linha. Sem o × de remover, o título não
   precisa do respiro reservado para ele. */
.cad-cartao-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}
.cad-cartao-cab .cad-cartao-titulo { margin: 0; }

.cad-cartao-pe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(33,30,28,.08);
  font-size: 12px; color: var(--marca-suave);
}

/* Some no repouso e volta no hover/foco — o × não compete com o
   título. No celular, sem hover, ele fica sempre visível (abaixo). */
.cad-cartao-x { position: absolute; top: 8px; right: 8px; opacity: 0; }
.cad-cartao:hover .cad-cartao-x,
.cad-cartao:focus-within .cad-cartao-x { opacity: 1; }

@media (max-width: 860px) {
  /* Sem hover no toque, o × precisa estar sempre visível e com alvo
     de toque de verdade — o .pl-x original é pensado para mouse. */
  .cad-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .cad-cartao-x { opacity: 1; min-width: 32px; min-height: 32px; }
}


/* Posicao de estoque: o filtro de tipo e o botao de zerados moram na
   mesma barra segmentada. O botao solto fica a direita, separado do
   grupo por um fio — e escolha independente, nao mais uma aba. */
.pl-abas-estoque { margin-bottom: 12px; }
.pl-aba-solta {
  margin-left: auto;
  border-left: 1px solid rgba(33,30,28,.14);
  padding-left: 14px;
}


/* ============================================================
   "Hoje" na Visao geral — 17/09/2026
   Lista de tarefas pendentes: numero grande a esquerda, texto a
   direita, seta. Mesma casca dos cartoes da analise.
   ============================================================ */

.hoje {
  margin: 0 0 22px;
  padding: 18px 20px 16px;
  background: var(--superficie);
  border: 1px solid rgba(33,30,28,.10);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-controle);
}

.hoje .painel-cartao-topo { margin-bottom: 6px; }

.hoje-lista { display: flex; flex-direction: column; }

.hoje-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;            /* alvo de toque confortavel */
  padding: 6px 8px;
  border-radius: var(--raio-md);
  text-decoration: none;
  color: var(--marca-escura);
  border-top: 1px solid rgba(33,30,28,.08);
  transition: background var(--mov-rapido) var(--curva);
}
.hoje-linha:first-child { border-top: 0; }
.hoje-linha:hover { background: rgba(33,30,28,.05); }
.hoje-linha:focus-visible { outline: none; box-shadow: var(--foco); }

.hoje-n {
  font-family: var(--fonte-numero);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: 600;
  min-width: 2.2ch;
  text-align: right;
  color: var(--marca-primaria);
}

.hoje-texto { flex: 1; font-size: 12px; }

.hoje-seta { color: var(--marca-suave); font-size: 18px; }

.hoje-vazio { margin: 4px 0 2px; color: var(--marca-suave); font-size: 12px; }

/* ============================================================
   Perfil do dia — seletor no alto do menu lateral (17/09/2026)
   O .pl-abas e claro; a lateral e escura. Aqui so troca a paleta.
   ============================================================ */

.painel-perfis {
  /* Grade de duas colunas iguais: "Frente de loja" e "Gestão" têm
     larguras de texto diferentes e, com flex, o botão maior empurrava
     o menor. Cada um ocupa metade, sempre. (18/09/2026) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 12px 14px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.painel-perfis .pl-aba {
  justify-content: center;
  min-height: 36px;
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,.65);
}
.painel-perfis .pl-aba:hover { color: var(--fundo); background: rgba(255,255,255,.07); }
.painel-perfis .pl-aba-ativa,
.painel-perfis .pl-aba-ativa:hover {
  background: var(--marca-primaria-alt);
  border-color: transparent;
  color: var(--marca-escura);
}

/* .painel-nav a e display:flex — o [hidden] do navegador perde.
   Link e modulo escondidos pelo perfil somem de verdade. */
.painel-nav a[hidden],
.painel-grupo[hidden] { display: none; }

/* ============================================================
   Foto do produto — miniatura na grade e na ficha (17/09/2026)
   ============================================================ */

.pl-foto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(33,30,28,.14);
  border-radius: var(--raio-controle);
  background: var(--fundo-alt);
  overflow: hidden;
  vertical-align: middle;
  color: var(--marca-suave);
}
.pl-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-foto svg { width: 55%; height: 55%; opacity: .55; }
.pl-foto-mini { width: 40px; height: 40px; }
.pl-foto-ficha { width: 160px; height: 160px; border-radius: var(--raio-md); }
button.pl-foto { cursor: zoom-in; }
button.pl-foto:focus-visible { outline: none; box-shadow: var(--foco); }

/* Coluna Foto da grade: a linha cresce so o necessario. */
.pl-grade td .pl-foto-mini { margin: -4px 0; }

.pl-foto-dlg {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 900px);
  max-height: 92vh;
}
.pl-foto-dlg::backdrop { background: rgba(33,30,28,.72); }
.pl-foto-dlg img {
  display: block;
  max-width: min(92vw, 900px);
  max-height: 88vh;
  border-radius: var(--raio-md);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.pl-foto-dlg .fi-x {
  position: absolute;
  top: 8px; right: 8px;
  min-width: 44px; min-height: 44px;
  background: var(--superficie);
}

/* Botao de proximo passo da esteira do pedido (17/09/2026) */
.pl-bt-passo {
  /* Compacto: a linha de Pedidos ficava mais alta que as outras grades
     por causa deste botao (34px + padding da celula). */
  min-height: 0;
  padding: 3px 10px;
  font-size: 11px;
  white-space: nowrap;
  border-color: var(--marca-primaria);
  color: var(--marca-escura);
}
.pl-bt-passo:hover { background: var(--marca-primaria-alt); }

/* ============================================================
   MAIÚSCULAS EM TODO O PAINEL (18/09/2026)
   ------------------------------------------------------------
   Decisão antiga do Douglas: o painel é em caixa alta. O cadastro
   já grava assim (alta: true), mas sobravam telas mistas — Visão
   geral, Vendas, DRE, ficha, cartões, rodapé, botões, <select>,
   placeholders. Aqui é só CSS: o dado não muda. Junto, a fonte
   caiu ~1px em cada escala e ganhou .02em de espaço — maiúscula
   grande "dá ar de grosseria".
   ============================================================ */

body,
button, input, select, textarea,
::placeholder {
  /* Controles de formulário NÃO herdam text-transform (a folha do
     navegador zera), por isso entram nomeados. */
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* O que fica em caixa normal: o título da tela, os h2 de seção
   (mesma família serifada, mesmo papel) e a marca (não mudam, por
   decisão), a dica explicativa da ficha, o "fx" das
   colunas calculadas, e tudo que é caminho, link ou e-mail —
   maiúscula em caminho de arquivo mentiria sobre o dado
   (img/PRD001-frente.jpg é sensível a caixa no servidor). */
.painel-topo h1,
h2,
.painel-marca strong,
.login-marca,
.fi-dica,
.pl-fx,
code,
input[type="email"],
input[type="password"],
input[type="url"],
[data-c="email"],
[data-c="link"],
[data-c="link_loja"],
[data-c^="foto_"],
.fi-dica-convencao {
  text-transform: none;
  letter-spacing: normal;
}

/* Número é sempre tabular — em maiúscula ou não. */
.num, .pl-in.num, .fi-valor, td.num, .pl-calc {
  font-variant-numeric: tabular-nums lining-nums;
}