/* ============================================================================
   TREVO DESIGN SYSTEM — tokens
   ----------------------------------------------------------------------------
   Os NOMES das variáveis são os mesmos de antes de propósito: as dez folhas de
   estilo de tela (dashboard, ajustes, faturamento, cmv, visao, …) referenciam
   --vinho-*, --creme-* e --dourado. Retocando o VALOR aqui, a linguagem visual
   nova chega em todas as telas de uma vez, sem reescrever cada arquivo — e sem
   risco de uma tela ficar com a paleta antiga.

   Dois níveis de roxo, como manda a direção: o de IDENTIDADE (600/700/900/950,
   usado em sidebar, títulos, botão principal e KPI de destaque) e o de
   INFORMAÇÃO (400/500 e os cremes, usados em gráfico, badge, hover e borda).
   O dourado é assinatura, nunca área grande.

   Para voltar ao visual anterior: `.layout-backup/` guarda templates/ e static/
   como estavam em 16/09/2026.
   ========================================================================== */
:root {
  --vinho-950: #290b1e;
  --vinho-900: #3a0b2c;
  --vinho-800: #4a0e36;
  --vinho-700: #5b1044;
  --vinho-600: #7a155b;
  --vinho-500: #9a2672;
  --vinho-400: #b94c90;
  /* Superfície quente: fica reservada para a ÁREA DE CONTROLE (filtros), que
     por boa prática de dashboard se identifica por ter fundo próprio. */
  --creme-50: #fff9f5;
  --creme-100: #faf2f6;
  --creme-200: #f3e8ef;
  /* Era #ffd7bb — a borda laranja que aparecia em todo card. Agora é um roxo
     dessaturado quase imperceptível, como pede a direção. */
  --creme-300: #eadfe6;
  /* Verde e vermelho MEDIDOS no desenho aprovado (#0A6B4D e #D10B45): o verde
     é mais fechado e o vermelho mais vivo que os de antes. */
  --verde: #0a6b4d;
  --verde-bg: #e3f7ec;
  --vermelho: #d10b45;
  --vermelho-bg: #fce9ec;
  /* Magenta do anel dos cards de percentual (#8E0080). */
  --magenta-indicador: #8e0080;
  --cinza-900: #2b2130;
  --cinza-500: #7a6d78;
  --cinza-200: #ece2e6;
  --branco: #ffffff;
  --dourado: #f5c21b;
  --dourado-claro: #ffdc6b;
  --dourado-escuro: #b8890f;
  /* Elevação em duas camadas: uma sombra curta que cola o card na superfície e
     uma longa e difusa que dá profundidade. Sombra forte foi descartada — pesa
     a tela em uso prolongado. */
  --sombra-card: 0 2px 8px rgba(41, 11, 30, 0.04), 0 8px 24px rgba(41, 11, 30, 0.05);
  --sombra-card-hover: 0 4px 12px rgba(41, 11, 30, 0.06), 0 14px 32px rgba(41, 11, 30, 0.1);
  --borda-sutil: 1px solid rgba(122, 21, 91, 0.08);
  /* Gradiente de identidade: roxo claro → roxo Trevo → roxo profundo. Nunca
     roxo → amarelo → laranja, que tiraria o aspecto corporativo. */
  /* Medidos PIXEL A PIXEL no desenho aprovado: canto superior esquerdo #861F5A,
     superior direito #B5345F (o toque rosado), inferior direito #360D36. */
  --gradiente-trevo: linear-gradient(135deg, #861f5a 0%, #63104e 48%, #360d36 100%);
  /* Magenta VIVO, medido no item selecionado e na pílula do desenho (#96146C /
     #8C1355). O tom fechado de antes sumia contra o fundo da sidebar. */
  --gradiente-ativo: linear-gradient(135deg, #96146c 0%, #79105c 100%);
  /* "Trevo Glow": a luz rosada do canto superior direito do card de destaque,
     com um fio dourado por cima. É o detalhe que assina a interface sem
     desenhar um trevo em cada lugar. */
  --trevo-glow:
    radial-gradient(circle at 96% 4%, rgba(181, 52, 95, 0.75), transparent 46%),
    radial-gradient(circle at 78% 0%, rgba(245, 194, 27, 0.14), transparent 34%);
  /* Fundo da PÁGINA (só o body). O gradiente é quase imperceptível de
     propósito: ninguém deve reparar "colocaram um gradiente", só achar a
     interface mais sofisticada. Os cards continuam brancos por cima. */
  --fundo-pagina: #f6f4f7;
  --gradiente-fundo: linear-gradient(135deg, #f7f5f8 0%, #f4f2f6 45%, #faf7f5 100%);
  --fonte-titulo: "Poppins", "Segoe UI", system-ui, sans-serif;
  --fonte-corpo: "Inter", "Segoe UI", system-ui, sans-serif;
  --sidebar-largura: 272px;
  --sidebar-largura-recolhida: 72px;
  /* Camada única para QUALQUER popover/dropdown/calendário flutuante da
     plataforma (multi-select, seletor de intervalo de datas) — garante que
     filtros sempre fiquem acima de gráficos, tabelas e cards, mesmo quando
     novos componentes forem adicionados no futuro. Não duplicar este valor
     como número mágico em outro arquivo; sempre referenciar esta variável. */
  --z-popover: 1000;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  background: var(--fundo-pagina);
  background-image: var(--gradiente-fundo);
  background-attachment: fixed;
  color: var(--cinza-900);
}

a {
  color: inherit;
}

/* ---------- Estrutura geral ---------- */

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

.area-conteudo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  background: var(--branco);
  border-bottom: var(--borda-sutil);
  flex-wrap: wrap;
}

/* Título + descrição curta do que a tela faz. O usuário não deveria precisar
   descobrir sozinho para que serve a página em que acabou de entrar. */
.page-header-identidade {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.page-header-selo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--gradiente-trevo);
  color: var(--dourado);
  box-shadow: 0 6px 16px rgba(91, 16, 68, 0.22);
}

.page-header-selo svg {
  width: 21px;
  height: 21px;
}

.page-header h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vinho-700);
  line-height: 1.2;
}

.page-header-sub {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--cinza-500);
  line-height: 1.35;
}

/* ---------- Ações do topo: sino de avisos e menu do usuário ---------- */

.acoes-topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.acoes-topo-botao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: var(--borda-sutil);
  background: var(--branco);
  color: var(--vinho-700);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.acoes-topo-botao:hover {
  background: var(--creme-100);
  border-color: rgba(122, 21, 91, 0.18);
}

.acoes-topo-botao svg {
  width: 19px;
  height: 19px;
}

.sino-contador {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vermelho);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: 0.66rem;
  font-weight: 700;
}

/* Regra de autor com display vence o [hidden] do navegador — sem esta linha o
   contador apareceria zerado quando não há aviso nenhum. */
.sino-contador[hidden] {
  display: none;
}

/* Selo "Dados atualizados": QUANDO o armazém recebeu dados do IzzyWay pela
   última vez (templates/_acoes_topo.html). Mesma forma do chip do usuário — é
   informação do cabeçalho, não um card solto — e a cor sai do nível apurado em
   `carga.ultima_atualizacao()`, nunca de horário decidido no CSS. */
.selo-atualizacao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: var(--borda-sutil);
  background: var(--branco);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.selo-atualizacao:hover {
  background: var(--creme-100);
  border-color: rgba(122, 21, 91, 0.18);
}

.selo-atualizacao svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--verde);
}

.selo-atualizacao-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.selo-atualizacao-rotulo {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinza-500);
}

.selo-atualizacao strong {
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--vinho-700);
}

/* Carga atrasada ou com loja fora: o selo AVISA em vez de continuar verde. O
   nível vem do backend — 75 min é o mesmo limiar do sensor do Observador. */
.selo-atualizacao[data-nivel="atencao"] svg { color: var(--dourado-escuro); }
.selo-atualizacao[data-nivel="atencao"] {
  border-color: rgba(184, 137, 15, 0.38);
  background: #fffaf0;
}
.selo-atualizacao[data-nivel="critico"] svg { color: var(--vermelho); }
.selo-atualizacao[data-nivel="critico"] {
  border-color: rgba(209, 11, 69, 0.32);
  background: var(--vermelho-bg);
}
.selo-atualizacao[data-nivel="critico"] strong { color: var(--vermelho); }

/* Carga rodando agora: a seta gira devagar, só o suficiente para diferenciar de
   "parado". Quem pediu para não ter animação no sistema não vê giro nenhum. */
.selo-atualizacao[data-rodando="sim"] svg { animation: selo-girar 1.6s linear infinite; }

@keyframes selo-girar {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .selo-atualizacao[data-rodando="sim"] svg { animation: none; }
}

.painel-atualizacao .selo-linha {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-size: 0.82rem;
  color: var(--cinza-900);
  border-bottom: 1px solid var(--creme-300);
}

.painel-atualizacao .selo-linha:last-of-type {
  border-bottom: none;
}

.painel-atualizacao .selo-linha span:first-child {
  color: var(--cinza-500);
}

.painel-atualizacao .selo-linha strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.painel-atualizacao .selo-nota {
  margin: 8px 0 0;
  padding: 9px 10px;
  border-radius: 10px;
  border-left: 3px solid var(--dourado-escuro);
  background: var(--creme-100);
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--cinza-900);
}

.painel-atualizacao .selo-nota-alerta {
  border-left-color: var(--vermelho);
  background: var(--vermelho-bg);
}

.usuario-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: var(--borda-sutil);
  background: var(--branco);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.usuario-chip:hover {
  background: var(--creme-100);
  border-color: rgba(122, 21, 91, 0.18);
}

.usuario-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gradiente-trevo);
  color: var(--dourado);
  font-family: var(--fonte-titulo);
  font-size: 0.85rem;
  font-weight: 700;
}

.usuario-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.usuario-texto strong {
  font-family: var(--fonte-titulo);
  font-size: 0.82rem;
  color: var(--vinho-700);
}

.usuario-texto span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinza-500);
}

.usuario-seta {
  color: var(--vinho-500);
  font-size: 0.8rem;
}

.painel-topo {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-popover);
  min-width: 290px;
  max-width: 380px;
  padding: 12px;
  background: var(--branco);
  border: 1px solid var(--creme-300);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(41, 11, 30, 0.18);
}

/* Mesma armadilha do contador: sem isto o painel nasce aberto. */
.painel-topo[hidden] {
  display: none;
}

.painel-topo-titulo {
  margin-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vinho-700);
}

.painel-avisos .aviso-item {
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 10px;
  border-left: 3px solid var(--dourado-escuro);
  background: var(--creme-100);
  font-size: 0.82rem;
  line-height: 1.45;
}

.painel-avisos .aviso-item:last-child {
  margin-bottom: 0;
}

.painel-vazio-topo {
  margin: 0;
  padding: 4px 2px;
  font-size: 0.84rem;
  color: var(--cinza-500);
}

.menu-usuario-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  padding: 4px 10px 10px;
  border-bottom: 1px dashed var(--creme-300);
}

.menu-usuario-cabecalho strong {
  font-family: var(--fonte-titulo);
  font-size: 0.9rem;
  color: var(--vinho-700);
}

.menu-usuario-cabecalho span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cinza-500);
}

.menu-usuario-item {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--cinza-900);
  text-decoration: none;
}

.menu-usuario-item:hover {
  background: var(--creme-100);
  color: var(--vinho-700);
}

.menu-usuario-sair {
  color: var(--vermelho);
}

.menu-usuario-sair:hover {
  background: var(--vermelho-bg);
  color: var(--vermelho);
}

/* Chip "Atualizado em" do canto direito. */
.page-header-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.selo-atualizado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: var(--borda-sutil);
  background: var(--creme-100);
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--cinza-500);
  white-space: nowrap;
}

/* `display:inline-flex` acima é regra de AUTOR e vence o `display:none` que o
   navegador dá ao [hidden] — sem esta linha o selo aparecia VAZIO antes da
   primeira consulta, prometendo uma atualização que não houve. Mesma armadilha
   registrada em `.pilha-secoes[hidden]`. */
.selo-atualizado[hidden] {
  display: none;
}

.selo-atualizado strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 0.8rem;
  color: var(--vinho-700);
}

.selo-atualizado svg {
  width: 17px;
  height: 17px;
  color: var(--vinho-500);
  flex-shrink: 0;
}

/* A área de conteúdo OCUPA A TELA. Antes o teto era 1120px (1360 nas telas de
   dados), o que deixava uma faixa vazia à direita em qualquer monitor moderno —
   e obrigava tabela larga a rolar na horizontal tendo espaço de sobra ao lado.
   O respiro agora vem do padding, não de um limite de largura. */
.page-conteudo {
  padding: 28px 34px 60px;
  max-width: 100%;
  width: 100%;
}

.page-conteudo-larga {
  max-width: 100%;
}

/* Em tela muito larga o padding cresce junto, para o conteúdo não colar na
   borda nem virar uma linha de texto interminável. */
@media (min-width: 1700px) {
  .page-conteudo { padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 2200px) {
  .page-conteudo { padding-left: 72px; padding-right: 72px; }
}

.limiar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--vinho-700);
  background: var(--creme-100);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--creme-300);
  white-space: nowrap;
}

.ponto-pulsante {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dourado-escuro);
  animation: pulsar 2s infinite;
}

@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 rgba(201, 151, 28, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(201, 151, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 151, 28, 0); }
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--sidebar-largura);
  flex-shrink: 0;
  /* Violeta escuro (#2B062C no topo, #230725 na base) com os CLARÕES do desenho
     aprovado: medi #44073C no canto superior direito e #350B31 no inferior
     direito, mais manchas suaves no miolo. São luzes largas e de baixa
     opacidade — de perto ninguém vê "ondas", de longe a barra deixa de ser um
     retângulo chapado. */
  background:
    radial-gradient(130% 55% at 108% 2%, rgba(122, 20, 92, 0.55), transparent 58%),
    radial-gradient(115% 42% at 106% 99%, rgba(110, 22, 85, 0.5), transparent 62%),
    radial-gradient(85% 26% at -10% 72%, rgba(90, 16, 70, 0.34), transparent 66%),
    radial-gradient(70% 20% at 100% 46%, rgba(95, 18, 74, 0.28), transparent 70%),
    linear-gradient(180deg, #2b062c 0%, #260728 55%, #230725 100%);
  color: var(--creme-100);
  display: flex;
  flex-direction: column;
  transition: width 0.22s ease;
  overflow: hidden;
  position: sticky;
  top: 0;
  height: 100vh;
}

body.sidebar-recolhida .sidebar {
  width: var(--sidebar-largura-recolhida);
}

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-marca img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--dourado);
  padding: 4px;
  flex-shrink: 0;
}

.sidebar-marca-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-marca-texto strong {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 700;
}

.sidebar-marca-texto span {
  font-family: var(--fonte-titulo);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dourado);
}

/* O menu inteiro tem que caber: a barra de rolagem grossa do screenshot de
   14/09/2026 aparecia porque 4 seções + 11 itens não cabiam em ~900px de altura
   útil. Com o item e o título de seção mais compactos ele cabe; quando ainda
   assim não couber (monitor baixo, zoom alto), a rolagem existe mas fica fina e
   discreta em vez da barra clara de sistema sobre o vinho. */
.sidebar-nav {
  flex: 1;
  /* A rolagem continua existindo como socorro para tela muito baixa, mas o
     menu foi apertado para caber sem ela no tamanho normal. */
  overflow-y: auto;
  padding: 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.32); }

.sidebar-secao-titulo {
  font-family: var(--fonte-titulo);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--dourado);
  text-transform: uppercase;
  /* Menos folga acima: quatro títulos de seção somam altura, e o menu precisa
     caber sem rolar (ver `.sidebar-item`). */
  /* Cada pixel tirado aqui vale por quatro (são quatro seções) — e apertar o
     TÍTULO custa menos conforto que apertar o item, que é o que se clica. */
  padding: 8px 12px 4px;
  white-space: nowrap;
}

.sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  /* ⚠️ A folga voltou a 9px depois de eu apertá-la a 5px para caber em
     notebook de 720. O Administrador olhou e disse: "ficaram muito juntos" —
     e estava certo, porque em tela normal sobrava espaço embaixo. Conforto no
     caso comum vale mais que rolagem evitada no caso raro: a 900px de altura
     para cima o menu cabe inteiro com essa folga, e abaixo disso a rolagem
     volta, que é o socorro honesto. */
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--branco);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  /* ⚠️ UMA LINHA por item — ordem do Administrador em 25/09/2026: "não quero
     quebra de linha, e também não quero barra de rolagem". As duas coisas só
     convivem porque o item mais comprido encurtou ("Verificação de
     Cancelamentos" virou "Auditoria"); antes disso, com `nowrap`, o nome era
     cortado no meio da palavra. Nome novo aqui precisa caber em 272px. */
  white-space: nowrap;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Ícones de linha são <svg> inline com stroke="currentColor": seguem a cor
   do texto do item automaticamente. A balança (ícone ilustrado colorido,
   igual ao usado no cartão de KPI) fica de fora de propósito. */
.sidebar-item svg,
.sidebar-item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dourado);
}

/* O item selecionado não é um retângulo chapado: gradiente roxo + uma barra
   dourada na lateral. É a assinatura visual da navegação. */
.sidebar-item.ativo {
  background: var(--gradiente-ativo);
  color: var(--branco);
  box-shadow: 0 6px 16px rgba(41, 11, 30, 0.35);
}

.sidebar-item.ativo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dourado);
}

.sidebar-item.ativo svg { color: var(--dourado); }

/* TREVO DE FUNDO no rodapé da barra: contorno branco, bem apagado (opacidade
   6%), como marca d'água. Não é ícone nem botão — é textura de fundo, então
   fica fora do fluxo e sem captura de clique. */
.sidebar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 74px;
  width: 168px;
  height: 182px;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.06;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Trevo DESENHADO À MÃO: folhas em coração com nervura e risco de reforço,
     caule em duas linhas. Desenho original — a referência enviada era uma
     imagem licenciada (iStock, com marca d'água), que não se copia. As versões
     anteriores (círculos, depois gotas) liam como argolas e como flor. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 172' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cg transform='rotate(-12 75 78)'%3E%3Cg transform='translate(75,78)'%3E%3Cg%3E%3Cpath d='M0,0 C-18,-16 -30,-26 -30,-38 C-30,-48 -20,-54 -12,-50 C-6,-47 -2,-42 0,-36 C2,-42 6,-47 12,-50 C20,-54 30,-48 30,-38 C30,-26 18,-16 0,0 Z'/%3E%3Cpath d='M0,-7 C-5,-17 -12,-27 -20,-34' stroke-width='1.7'/%3E%3Cpath d='M-25,-45 C-28,-41 -28,-35 -25,-31' stroke-width='1.5'/%3E%3C/g%3E%3Cg transform='rotate(90)'%3E%3Cpath d='M0,0 C-18,-16 -30,-26 -30,-38 C-30,-48 -20,-54 -12,-50 C-6,-47 -2,-42 0,-36 C2,-42 6,-47 12,-50 C20,-54 30,-48 30,-38 C30,-26 18,-16 0,0 Z'/%3E%3Cpath d='M0,-7 C-5,-17 -12,-27 -20,-34' stroke-width='1.7'/%3E%3Cpath d='M-25,-45 C-28,-41 -28,-35 -25,-31' stroke-width='1.5'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cpath d='M0,0 C-18,-16 -30,-26 -30,-38 C-30,-48 -20,-54 -12,-50 C-6,-47 -2,-42 0,-36 C2,-42 6,-47 12,-50 C20,-54 30,-48 30,-38 C30,-26 18,-16 0,0 Z'/%3E%3Cpath d='M0,-7 C-5,-17 -12,-27 -20,-34' stroke-width='1.7'/%3E%3Cpath d='M-25,-45 C-28,-41 -28,-35 -25,-31' stroke-width='1.5'/%3E%3C/g%3E%3Cg transform='rotate(270)'%3E%3Cpath d='M0,0 C-18,-16 -30,-26 -30,-38 C-30,-48 -20,-54 -12,-50 C-6,-47 -2,-42 0,-36 C2,-42 6,-47 12,-50 C20,-54 30,-48 30,-38 C30,-26 18,-16 0,0 Z'/%3E%3Cpath d='M0,-7 C-5,-17 -12,-27 -20,-34' stroke-width='1.7'/%3E%3Cpath d='M-25,-45 C-28,-41 -28,-35 -25,-31' stroke-width='1.5'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath d='M74,84 C80,108 90,132 108,150'/%3E%3Cpath d='M80,100 C86,118 94,134 106,146' stroke-width='1.6'/%3E%3C/svg%3E");
}

body.sidebar-recolhida .sidebar::after {
  opacity: 0.04;
  width: 56px;
  height: 62px;
}

.sidebar-rodape {
  position: relative;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex-shrink: 0;
}

.sidebar-rodape .sidebar-item {
  min-width: 0;
}

.sidebar-botao-recolher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 10px;
  color: var(--branco);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-botao-recolher:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--dourado);
}

.sidebar-botao-recolher svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sidebar-botao-recolher span {
  display: none;
}

body.sidebar-recolhida .sidebar-botao-recolher svg {
  transform: rotate(180deg);
}

body.sidebar-recolhida .sidebar-secao-titulo,
body.sidebar-recolhida .sidebar-marca-texto,
body.sidebar-recolhida .sidebar-item span,
body.sidebar-recolhida .sidebar-botao-recolher span {
  display: none;
}

body.sidebar-recolhida .sidebar-marca {
  justify-content: center;
}

body.sidebar-recolhida .sidebar-item,
body.sidebar-recolhida .sidebar-botao-recolher {
  justify-content: center;
}

/* ---------- Botões e formulários genéricos (usados nas páginas de admin) ---------- */

.botao {
  flex: 0 1 auto;
  padding: 12px 20px;
  border-radius: 10px;
  border: 2px solid transparent;
  font-family: var(--fonte-titulo);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Ícone dentro de botão tem tamanho fixo: um <svg> sem largura declarada assume
   o tamanho do viewBox e estoura o botão inteiro. */
.botao svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.botao:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Microinteração discreta: o botão sobe 1px e ganha sombra. O salto com
   escala de antes chamava atenção para si em vez de para o dado. */
.botao:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(91, 16, 68, 0.2);
}

.botao:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 194, 27, 0.45);
}

.botao:not(:disabled):active {
  transform: translateY(0) scale(0.98);
}

/* AÇÃO PRINCIPAL EM DOURADO, com texto roxo escuro — medido no desenho
   aprovado (#FBBD38). É o dourado fazendo o que assinatura faz: marcar o
   único botão que o usuário precisa achar na tela. */
.botao-primario {
  background: linear-gradient(135deg, #fbc84a 0%, #f5b81e 100%);
  color: var(--vinho-900);
  box-shadow: 0 4px 12px rgba(245, 184, 30, 0.35);
}

.botao-primario:not(:disabled):hover {
  background: linear-gradient(135deg, #ffd15f 0%, #f7bf2c 100%);
  box-shadow: 0 6px 18px rgba(245, 184, 30, 0.45);
}

/* AÇÃO SECUNDÁRIA SEM FUNDO: no desenho o "Limpar filtros" é só ícone e
   texto. Fundo cheio nos dois botões faz a tela ter duas ações concorrendo
   pela mesma atenção. */
.botao-secundario {
  background: transparent;
  color: var(--vinho-600);
  box-shadow: none;
}

.botao-secundario:not(:disabled):hover {
  background: var(--creme-100);
  color: var(--vinho-700);
  box-shadow: none;
}

/* ---------- Pílulas (Entrada/Saída, Top N) ---------- */

/* Container claro medido no desenho (#F3F2F9), com um sulco interno que dá
   profundidade — a pílula ativa parece pousada sobre a trilha, não colada. */
.pill-toggle {
  display: inline-flex;
  background: #f3f2f9;
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  width: fit-content;
  box-shadow: inset 0 1px 3px rgba(41, 11, 30, 0.1);
}

.pill-opcao {
  border: none;
  background: transparent;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--fonte-titulo);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vinho-700);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pill-opcao:hover {
  background: rgba(96, 24, 70, 0.08);
}

/* Gradiente medido na pílula do desenho (#8B1268 → #75014F) com sombra por
   baixo e um brilho no topo — é daí que vem a profundidade. */
.pill-opcao.ativo {
  background: linear-gradient(135deg, #8b1268 0%, #75014f 100%);
  color: var(--branco);
  box-shadow:
    0 4px 12px rgba(123, 5, 91, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* O Top N é uma pílula mais compacta que a de Entrada/Saída. */
.pill-toggle-top .pill-opcao {
  padding: 7px 15px;
  font-size: 0.8rem;
}

.cartao {
  background: var(--branco);
  border: var(--borda-sutil);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--sombra-card);
}

.cartao h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vinho-700);
}

/* Selo do título: quadrado arredondado em roxo claro com o ícone em magenta,
   inserido por static/selo_titulo.js em todo título de cartão. */
.titulo-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #f7eaf3;
  border: 1px solid rgba(150, 20, 108, 0.12);
  color: var(--vinho-500);
}

.titulo-selo svg {
  width: 17px;
  height: 17px;
}

/* Espaçamento padrão entre indicadores/gráficos/tabelas/cards de resultado —
   usada pelo wrapper de resultado de cada processo (Conformidade, Ajustes,
   Coletagem e os que vierem depois), para nunca precisar de margens ad hoc
   por página. */
.pilha-secoes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

/* O `display: flex` acima é regra de AUTOR e vence o `display: none` que o
   navegador dá ao atributo [hidden]. Sem esta linha, o bloco de resultado das
   cinco telas continuava visível quando o JS o escondia: os cards zerados
   apareciam JUNTO com a mensagem "Selecione ao menos uma loja". R$ 0,00 na tela
   é pior que tela vazia, porque parece resultado.
   Vale para Conformidade, Ajustes, Coletagens, Faturamento e CMV — todas usam
   .pilha-secoes + [hidden] com o mesmo mostrarEstado(). */
.pilha-secoes[hidden] {
  display: none;
}

.campo-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

/* Rótulo de campo em DOURADO e caixa alta — como era antes e como o
   Administrador confirmou em 17/09/2026. */
.campo-form label {
  font-family: var(--fonte-titulo);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dourado-escuro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campo-form input,
.campo-form select {
  padding: 11px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--cinza-200);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  color: var(--cinza-900);
  background: var(--creme-50);
}

.campo-form input:focus,
.campo-form select:focus {
  outline: none;
  border-color: var(--vinho-500);
  box-shadow: 0 0 0 3px rgba(150, 41, 110, 0.15);
}

.tabela-simples {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tabela-simples th {
  /* Títulos de coluna centralizados e SEMPRE em uma linha (nowrap) em TODAS as
     tabelas — sem quebra, todos ficam exatamente na mesma altura, sem
     escalonamento. Padrão do projeto. */
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  padding: 13px 12px;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Cabeçalho em GRADIENTE roxo → magenta, com texto branco — é o que está na
     imagem de referência (o recorte "Itens do Balanço"). Substitui o cabeçalho
     claro que eu tinha feito a partir da descrição em texto. */
  background: linear-gradient(90deg, #5b1044 0%, #7a155b 45%, #96146c 100%);
  color: var(--branco);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 2;
}

.tabela-simples td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(122, 21, 91, 0.06);
}

/* Zebra extremamente sutil: organiza a leitura da linha sem virar listra. */
.tabela-simples tbody tr:nth-child(even) td {
  background: rgba(122, 21, 91, 0.014);
}

.tabela-simples tr:hover td {
  background: var(--creme-50);
}

.mensagem-flash {
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.mensagem-flash.erro {
  background: var(--vermelho-bg);
  color: var(--vermelho);
}

.mensagem-flash.sucesso {
  background: var(--verde-bg);
  color: var(--verde);
}

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.chip-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--vinho-600);
  cursor: pointer;
}

/* ---------- Login ---------- */

.login-pagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--vinho-950), var(--vinho-700) 60%, var(--vinho-600));
  padding: 20px;
}

.login-cartao {
  background: var(--branco);
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(38, 10, 28, 0.4);
  text-align: center;
}

.login-cartao img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--vinho-700);
  padding: 8px;
  margin-bottom: 14px;
}

.login-cartao h1 {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  color: var(--vinho-700);
  margin: 0 0 4px;
}

.login-cartao p.subtitulo {
  color: var(--cinza-500);
  font-size: 0.85rem;
  margin: 0 0 24px;
}

.login-cartao p.subtitulo-dourado {
  color: var(--dourado-escuro);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.login-cartao form {
  text-align: left;
}

.login-cartao .botao {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

/* O bloco de celular vive em mobile.css. A regra que existia aqui escondia
   `.sidebar-nav` e `.sidebar-rodape` no telefone — ou seja, o aparelho ficava
   sem menu e sem botão Sair. Foi substituída por uma gaveta de verdade. */

/* ---------- Multi-select com busca (compartilhado entre telas com filtros) ---------- */

.multi-select {
  position: relative;
}

.multi-select-botao {
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  border-radius: 10px;
  border: 1.5px solid var(--cinza-200);
  background: var(--creme-50);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  color: var(--cinza-900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.multi-select-botao:hover,
.multi-select.aberto .multi-select-botao {
  border-color: var(--vinho-500);
}

.multi-select-botao::after {
  content: "▾";
  color: var(--vinho-500);
  flex-shrink: 0;
}

.multi-select-resumo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-painel {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  /* ⚠️ O painel é POPOVER, e por isso pode ser mais largo que o filtro: alargar
     aqui não mexe na largura da coluna nem faz a linha de filtros quebrar — e
     quebrar seria pior que apertar, porque um painel aberto tem 320px de altura
     e cobriria por inteiro o filtro da linha de baixo (a mesma razão do
     `flex-wrap: nowrap` da Conformidade).

     270px é MEDIDO, não escolhido: "PRÓPRIAS" — o mais largo dos três rótulos —
     ocupa 77,5px no corpo de 0.72rem da fonte de título, e 3 × 77,5 + 2 × 8 de
     gap + 2 × 10 de padding = 269. Abaixo disso os três deixam de caber iguais.
     Sem este mínimo o filtro mais estreito da plataforma (Acerto/Ajuste, 198px)
     saía com os botões em 74/56/59 contra 101/101/101 no CMV e no Faturamento —
     o mesmo componente com três aparências. */
  min-width: 270px;
  background: var(--branco);
  border: 1px solid var(--creme-300);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(96, 24, 70, 0.18);
  padding: 10px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  /* ⚠️ O espaçamento INTERNO do painel é apertado de propósito (Administrador,
     28/09/2026: "talvez um pouco menor o espaçamento"). Cada px que sai daqui
     vira loja visível sem rolar: com 8px de vão, 7px de linha e a busca em
     35px, cabiam 6,6 lojas nos 320px de altura; agora cabem 7,8. A altura
     máxima NÃO subiu junto — painel mais alto passa por cima do resto da tela,
     que é o que o `flex-wrap: nowrap` da Conformidade existe para evitar. */
  gap: 6px;
}

.multi-select-painel[hidden] {
  display: none;
}

.multi-select-busca {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--cinza-200);
  font-size: 0.88rem;
  font-family: var(--fonte-corpo);
}

.multi-select-busca:focus {
  outline: none;
  border-color: var(--vinho-500);
}

/* `display:flex` abaixo vence o atributo `hidden` (que só vale via display:none
   da folha do navegador). Sem isto, o painel vazio ainda mostrava "Selecionar
   todos" e "Limpar seleção" — botões sem nada para selecionar. */
.multi-select-acoes[hidden],
.multi-select-busca[hidden] {
  display: none !important;
}

.multi-select-acoes {
  display: flex;
  gap: 8px;
}

/* Alinhamento à direita quando o filtro é o último da linha e o painel, mais
   largo que ele, passaria da borda da tela (ver `posicionarPainel` em
   multi_select.js). */
.multi-select-painel.alinhado-a-direita {
  left: auto;
  right: 0;
}

.multi-select-acoes button {
  flex: 1;
  /* O mínimo de um item flex é o CONTEÚDO dele, e "PRÓPRIAS" é mais largo que
     "TODOS": sem soltar isso, `flex: 1` dava larguras diferentes assim que o
     painel apertava. Com `min-width: 0` os três são sempre o mesmo terço, e o
     `min-width` do painel garante que o mais largo caiba. */
  min-width: 0;
  border: none;
  background: var(--creme-100);
  color: var(--vinho-700);
  font-family: var(--fonte-titulo);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}

.multi-select-acoes button:hover {
  background: var(--creme-200);
}

.multi-select-opcoes {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.multi-select-opcao {
  display: flex;
  align-items: center;
  /* ⚠️⚠️ A LINHA NÃO ENCOLHE. Ela é item de um flex column (`.multi-select-opcoes`)
     cuja altura é MENOR que a lista inteira — 224px de caixa para 696px de lojas.
     Sem travar o encolhimento, o navegador espreme cada linha até sobrar só o
     padding: medido em 28/09/2026, a linha ia a 10px, o nome de 17px vazava por
     cima do vizinho e a caixinha de 13px sumia. Saía em SEIS das oito telas
     (Conformidade, CMV, Coletagem, Validação de Notas, Faturamento e
     Movimentação) e não saía em Acerto/Ajuste nem na Auditoria, que é o que fez
     o defeito passar batido: a tela onde o padrão foi conferido era justamente
     uma das duas boas. O que separava as duas metades era o `overflow` herdado
     da linha — com `hidden`, o tamanho mínimo automático de um item flex vira
     ZERO, e só então o encolhimento acontece. Travar aqui vale para as oito de
     uma vez e não depende de quem herda o quê. */
  flex: 0 0 auto;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 0.88rem;
  cursor: pointer;
}

.multi-select-opcao:hover {
  background: var(--creme-50);
}

.multi-select-opcao input {
  accent-color: var(--vinho-600);
  cursor: pointer;
}

.multi-select-vazio {
  color: var(--cinza-500);
  font-size: 0.85rem;
  padding: 10px 6px;
  text-align: center;
}

/* Segunda linha do estado vazio: explica POR QUE não há opção, em vez de
   deixar o painel mudo (ou, como era antes, nem abrir). */
.multi-select-vazio span {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--cinza-400, var(--cinza-500));
}

/* ---------- Skeleton de carregamento (compartilhado) ---------- */

.skeleton-area {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skeleton-area[hidden] {
  display: none;
}

.skeleton-linha {
  border-radius: 16px;
  background: linear-gradient(90deg, var(--creme-100) 25%, var(--creme-200) 50%, var(--creme-100) 75%);
  background-size: 200% 100%;
  animation: skeletonPulso 1.4s ease-in-out infinite;
}

@keyframes skeletonPulso {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-kpis { height: 90px; }
.skeleton-tabela { height: 260px; }

/* ---------- Cartão de gráfico com controles (compartilhado) ---------- */

.grafico-colunas-wrapper {
  position: relative;
  height: 340px;
}

.cartao-cabecalho-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cartao-cabecalho-controles h2 {
  margin: 0;
}

.controles-produtos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.controles-produtos input,
.controles-produtos select {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--cinza-200);
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
}

.controles-produtos input:focus,
.controles-produtos select:focus {
  outline: none;
  border-color: var(--vinho-500);
}

/* Identificação de quem está logado, no rodapé da barra lateral */
/* Rodapé no modelo do desenho: avatar circular ao lado do nome, e o ícone do
   Sair em dourado (medi #C59830 nele). */
.sidebar-usuario {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 12px;
  overflow: hidden;
}

.sidebar-usuario-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(245, 194, 27, 0.35);
  color: var(--dourado);
  font-family: var(--fonte-titulo);
  font-size: 0.85rem;
  font-weight: 700;
}

.sidebar-usuario-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.sidebar-rodape .sidebar-item svg {
  color: var(--dourado);
}

body.sidebar-recolhida .sidebar-usuario-texto { display: none; }
body.sidebar-recolhida .sidebar-usuario { justify-content: center; padding-left: 0; padding-right: 0; }

.sidebar-usuario strong {
  font-size: 0.82rem;
  color: var(--creme-100);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sidebar-usuario span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dourado);
}

body.sidebar-recolhida .sidebar-usuario { display: none; }

/* Faixa de aviso no topo da área de conteúdo (fallback do layout) */
.faixa-mensagens {
  padding: 20px 32px 0;
}

.faixa-mensagens .mensagem-flash {
  margin: 0 0 8px;
}

/* Aviso de loja que não respondeu — some junto com os números, nunca em silêncio */
.aviso-lojas-fora {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 4px solid var(--dourado-escuro);
  background: #fff8e6;
  color: var(--cinza-900);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ---------- Olho de "mostrar senha" (static/mostrar_senha.js) ---------- */

.campo-senha {
  position: relative;
  display: block;
}

/* Espaço à direita para o olho não cobrir o texto digitado. */
.campo-senha > input {
  width: 100%;
  padding-right: 44px;
}

.campo-senha-olho {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--cinza-500);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.campo-senha-olho:hover {
  color: var(--vinho-700);
  background: var(--creme-100);
}

.campo-senha-olho svg {
  width: 19px;
  height: 19px;
}

.campo-senha-olho[aria-pressed="true"] {
  color: var(--vinho-600);
}

/* ---------- Pop-up de sucesso (centralizado, com a logo animada) ---------- */

.toast-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(38, 10, 28, 0.34);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.toast-overlay.visivel { opacity: 1; }

.toast-sucesso {
  position: relative;
  width: min(560px, 100%);
  padding: 44px 40px 36px;
  border-radius: 26px;
  text-align: center;
  /* Cor predominante da Trevo (açaí/vinho). */
  background: linear-gradient(160deg, var(--vinho-600), var(--vinho-900));
  color: var(--creme-50);
  box-shadow: 0 40px 90px rgba(38, 10, 28, 0.5), 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: translateY(18px) scale(0.94);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 1.1, 0.4, 1), opacity 0.28s ease;
}

.toast-overlay.visivel .toast-sucesso {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Logo da Trevo DENTRO do pop-up, no canto — círculo (recorta o JPEG quadrado),
   crescendo e voltando ao tamanho padrão para dar dinamismo e ar de concluído. */
.toast-logo-chip {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--branco);
  border: 2px solid var(--dourado);
  box-shadow: 0 8px 20px rgba(38, 10, 28, 0.32);
  animation: pulsar-logo 1.8s ease-in-out infinite;
}

.toast-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes pulsar-logo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}

/* Selo de check que "estufa" ao aparecer. */
.toast-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid var(--dourado);
  color: var(--dourado);
  font-size: 2rem;
  font-weight: 700;
  transform: scale(0);
}

.toast-overlay.visivel .toast-icone {
  animation: estufar-check 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.18s forwards;
}

@keyframes estufar-check {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.toast-titulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--branco);
  margin-bottom: 8px;
}

.toast-texto {
  margin: 0 auto 6px;
  max-width: 42ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--creme-200);
}

.toast-subtexto {
  margin: 0 auto 24px;
  font-family: var(--fonte-titulo);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dourado-claro);
}

.toast-fechar {
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--creme-50);
  font-family: var(--fonte-titulo);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.toast-fechar:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--creme-50);
}

@media (prefers-reduced-motion: reduce) {
  .toast-logo-chip { animation: none; }
  .toast-overlay.visivel .toast-icone { animation: none; transform: scale(1); }
}

/* Faixa dos dias que a API recusou (static/lojas_indisponiveis.js). Criada pelo
   próprio componente, então vale em qualquer tela sem mexer no template. */
.aviso-dias-fora {
  margin: 0 0 16px;
  border-left-color: var(--vinho-500);
  background: var(--creme-100);
}

/* ---------- Alterar senha (diálogo do menu do usuário) ----------
   `<dialog>` nativo: Esc, foco preso e fundo escurecido vêm do navegador. */
.menu-usuario-item[type="button"] {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
.dialogo-senha {
  border: none;
  border-radius: 18px;
  padding: 0;
  width: min(92vw, 380px);
  background: var(--branco);
  box-shadow: 0 24px 60px rgba(41, 11, 30, 0.35);
}
.dialogo-senha::backdrop { background: rgba(41, 11, 30, 0.45); }
.dialogo-senha-form { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 20px; }
.dialogo-senha-form h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 1.15rem; color: var(--ameixa-900, #4a1236); }
.dialogo-senha-quem { margin: -6px 0 4px; font-size: 0.82rem; color: var(--texto-suave, #6b5560); }
.dialogo-senha-quem span { font-variant-numeric: tabular-nums; }
.dialogo-senha-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--fonte-titulo); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave, #6b5560);
}
.dialogo-senha-form input {
  padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(122, 21, 91, 0.22);
  font-family: var(--fonte-corpo); font-size: 0.95rem; text-transform: none; letter-spacing: 0;
}
.dialogo-senha-form input:focus {
  outline: none; border-color: var(--ameixa-600, #7a2159);
  box-shadow: 0 0 0 3px rgba(122, 21, 91, 0.14);
}
.dialogo-senha-nota { margin: 0; font-size: 0.75rem; color: var(--texto-suave, #6b5560); }
.dialogo-senha-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.dialogo-senha-cancelar, .dialogo-senha-salvar {
  padding: 9px 16px; border-radius: 10px; font-family: var(--fonte-titulo);
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.dialogo-senha-cancelar { border: 1px solid rgba(122, 21, 91, 0.22); background: transparent; color: var(--texto-suave, #6b5560); }
.dialogo-senha-salvar { border: none; background: var(--gradiente-trevo); color: #fff; }
.dialogo-senha-salvar:hover { filter: brightness(1.06); }

/* ---------- O sino e o usuário nas telas ESCURAS ----------
   O chip branco das telas claras fica um bloco de luz no meio do ameixa. Aqui
   ele veste a mesma paleta da tela, sem mudar de forma nem de lugar. */
.visao-page .acoes-topo-botao,
.cpr-page .acoes-topo-botao,
.glt-page .acoes-topo-botao,
.visao-page .usuario-chip,
.cpr-page .usuario-chip,
.glt-page .usuario-chip,
.visao-page .selo-atualizacao,
.cpr-page .selo-atualizacao,
.glt-page .selo-atualizacao {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(227, 178, 60, 0.35);
  color: #F7F2F5;
}
.visao-page .selo-atualizacao strong,
.cpr-page .selo-atualizacao strong,
.glt-page .selo-atualizacao strong { color: #F7F2F5; }
.visao-page .selo-atualizacao-rotulo,
.cpr-page .selo-atualizacao-rotulo,
.glt-page .selo-atualizacao-rotulo { color: #B9A6B2; }
/* O aviso continua legível no escuro: no fundo ameixa o creme e o rosa-claro
   das telas claras sumiriam, então aqui a cor fica só na borda e no ícone. */
.visao-page .selo-atualizacao[data-nivel="atencao"],
.cpr-page .selo-atualizacao[data-nivel="atencao"],
.glt-page .selo-atualizacao[data-nivel="atencao"] {
  background: rgba(227, 178, 60, 0.16);
  border-color: rgba(227, 178, 60, 0.55);
}
.visao-page .selo-atualizacao[data-nivel="atencao"] svg,
.cpr-page .selo-atualizacao[data-nivel="atencao"] svg,
.glt-page .selo-atualizacao[data-nivel="atencao"] svg { color: #E3B23C; }
.visao-page .selo-atualizacao[data-nivel="critico"],
.cpr-page .selo-atualizacao[data-nivel="critico"],
.glt-page .selo-atualizacao[data-nivel="critico"] {
  background: rgba(209, 11, 69, 0.2);
  border-color: rgba(255, 138, 170, 0.6);
}
.visao-page .selo-atualizacao[data-nivel="critico"] svg,
.cpr-page .selo-atualizacao[data-nivel="critico"] svg,
.glt-page .selo-atualizacao[data-nivel="critico"] svg,
.visao-page .selo-atualizacao[data-nivel="critico"] strong,
.cpr-page .selo-atualizacao[data-nivel="critico"] strong,
.glt-page .selo-atualizacao[data-nivel="critico"] strong { color: #FF8AAA; }
.visao-page .acoes-topo-botao:hover,
.cpr-page .acoes-topo-botao:hover,
.glt-page .acoes-topo-botao:hover,
.visao-page .usuario-chip:hover,
.cpr-page .usuario-chip:hover,
.glt-page .usuario-chip:hover {
  background: rgba(227, 178, 60, 0.14);
  border-color: #E3B23C;
}
.visao-page .usuario-texto strong,
.cpr-page .usuario-texto strong,
.glt-page .usuario-texto strong { color: #F7F2F5; }
.visao-page .usuario-texto span,
.cpr-page .usuario-texto span,
.glt-page .usuario-texto span,
.visao-page .usuario-seta,
.cpr-page .usuario-seta,
.glt-page .usuario-seta { color: #B9A6B2; }
/* Na apresentação a tela é só o número: sino e usuário saem junto com os filtros. */
.visao-page.apresentando .acoes-topo,
.cpr-page.apresentando .acoes-topo,
.glt-page.apresentando .acoes-topo { display: none; }