/* Plataforma de Cobrança DUX — CSS puro. Cores só pelos tokens do DS (design-system/7 - Design System/tokens); texto passa WCAG AA (4.5:1).
   ⚠️ --ambar, --azul, --cinza-selo, --verde e --vermelho são usadas inline pelo JS (painel_analise.js): renomear quebra os gráficos em silêncio. */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..700,0..1,-25..0&display=swap');

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  flex-shrink: 0;
}

:root {
  /* Contraste sobre branco anotado em cada cor de texto (mínimo AA 4.5:1). */
  --papel: #F4F6F9;        /* neutral-50 */
  --papel-alt: #E9EDF2;    /* neutral-100 */
  --papel-fundo: #D9DFE7;  /* neutral-200 */
  --branco: #FFFFFF;       /* neutral-0 */

  --tinta: #0F1319;        /* neutral-900 — 17.6:1 AAA */
  --tinta-suave: #4A4F57;  /* neutral-600 —  8.2:1 AAA */
  --tinta-fraca: #5D5D5D;  /* neutral-500, Cinza Médio da marca — 7.0:1 AAA */
  --linha: #E9EDF2;        /* neutral-100, border-subtle */
  --linha-forte: #B9C2CE;  /* neutral-300, border-strong */

  /* Acento — Azul DUX (#0066FF), cor de marca fixa do manual. */
  --acento: #0052D6;          /* blue-600 —  6.8:1 AAA (texto e fundo de botão) */
  --acento-vivo: #0066FF;     /* blue-500 / dux-blue — preenchimentos e detalhes */
  --acento-escuro: #003FA8;   /* blue-700 —  8.4:1 AAA */
  --acento-claro: #D6E6FF;    /* blue-100 */
  --acento-tenue: #EBF3FF;    /* blue-50 */
  --acento-brilho: rgba(0, 102, 255, 0.24);

  --menu-fundo-topo: #112E7A;  /* blue-800 */
  --menu-fundo-base: #111E44;  /* dux-navy / blue-900 */
  --menu-tinta: #D6E6FF;       /* blue-100 */

  --realce: #EBF3FF;

  --verde: #006C4A;          /* Verde DUX (secundária da marca) — 6.3:1 AA */
  --verde-escuro: #003D2A;   /* ênfase forte, mesmo matiz */
  --verde-claro: #E8F4EF;    /* success-surface */
  --azul: #0052D6;           /* info-fg (blue-600) */
  --azul-escuro: #111E44;    /* dux-navy, ênfase forte */
  --azul-claro: #EBF3FF;     /* info-surface (blue-50) */
  --vermelho: #A81F2E;       /* danger-fg */
  --vermelho-escuro: #7A1620; /* ênfase forte, mesmo matiz */
  --vermelho-claro: #FBECED; /* danger-surface */
  --ambar: #8A5300;          /* warning-fg */
  --ambar-escuro: #5E3800;   /* ênfase forte, mesmo matiz */
  --ambar-claro: #FDF3E0;    /* warning-surface */
  --cinza-selo: #4A4F57;     /* neutral-600 */
  --cinza-selo-claro: #E9EDF2; /* neutral-100 */

  /* Compatibilidade com nomes antigos ainda citados em telas legadas. */
  --dourado: var(--acento);
  --dourado-escuro: var(--acento-escuro);
  --dourado-claro: var(--acento-claro);
  --dourado-glow: var(--acento-brilho);
  --cinza-texto: var(--tinta);
  --cinza-suave: var(--tinta-suave);
  --cinza-borda: var(--linha);
  --cinza-fundo: var(--papel);
  --azul-original: var(--azul);

  /* Sombras tingidas de dux-navy, não de cinza genérico. */
  --sombra: 0 1px 3px rgba(17, 30, 68, 0.08), 0 1px 2px rgba(17, 30, 68, 0.05);
  --sombra-card: 0 4px 12px rgba(17, 30, 68, 0.10);
  --sombra-flutuante: 0 24px 64px rgba(17, 30, 68, 0.22);

  --raio: 10px;         /* radius-lg — cards, modais */
  --raio-pequeno: 6px;  /* radius-md — botões, inputs, controles */
  --raio-grande: 16px;  /* radius-xl */
  --topo-altura: 60px;  /* topbar-height do DS */

  /* Números tabulares vêm de font-variant-numeric, não de uma 2ª família. */
  --fonte-ui: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --fonte-titulo: var(--fonte-ui);
  --fonte-numero: var(--fonte-ui);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte-ui);
  background-color: var(--papel);
  color: var(--tinta);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Tipografia ---------- */

h1, h2, h3 { color: var(--tinta); }

h1 {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
h2 {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}
h3 {
  font-family: var(--fonte-ui);
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tinta-fraca);
}

a { color: var(--acento); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--acento-escuro); text-decoration: underline; text-underline-offset: 2px; }

code {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  background: var(--papel-alt);
  color: var(--tinta);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 12px;
  border: 1px solid var(--linha);
}

hr { border: none; border-top: 1px solid var(--linha); margin: 20px 0; }

.texto-suave { color: var(--tinta-suave); }
.texto-menor { font-size: 12px; line-height: 1.45; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.flex { display: flex; align-items: center; gap: 10px; }

/* Tabular: sem isso a coluna de valor "dança" entre R$ 0,00 e R$ 1.119.463,12. */
.tabela td.valor,
.tabela th.valor,
.numero,
.cartao .numero,
.cartao-kpi .numero {
  font-family: 'Barlow', var(--fonte-ui), sans-serif !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes surgir-bolha {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Página inicial ---------- */

.landing { max-width: 760px; margin: 8vh auto; padding: 0 20px; }
.landing .cartao { padding: 36px; box-shadow: var(--sombra-flutuante); }
.landing h1 { font-size: 34px; margin-bottom: 10px; }
.landing .cartao a.botao { margin-top: 10px; }

/* ---------- Layout ---------- */

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

.menu-lateral {
  /* `flex: 0 0` + min/max iguais: e-mail longo ou rolagem não mudam a largura do menu. */
  width: 248px;
  flex: 0 0 248px;
  min-width: 248px;
  max-width: 248px;
  overflow-x: hidden;
  padding: 26px 14px 20px;
  display: flex;
  flex-direction: column;
  color: var(--menu-tinta);
  background:
    radial-gradient(120% 60% at 0% 0%, var(--acento-brilho), transparent 62%),
    linear-gradient(178deg, var(--menu-fundo-topo) 0%, var(--menu-fundo-base) 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.07);
  /* Sticky na viewport: sem isto o menu esticava até a altura do conteúdo e o "Sair" sumia. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.2s ease, padding 0.2s ease;
}

/* Recolher é uma linha no fluxo: flutuando, era cortado pelo overflow do menu ou sobrepunha o avatar. */
.menu-colapsar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 13px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--menu-tinta) 78%, transparent);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.menu-colapsar:hover { background: rgba(255, 255, 255, 0.07); color: #ffffff; }
.menu-colapsar svg { flex-shrink: 0; transition: transform 0.2s ease; }

/* Recolhido: só ícones, 64px. */
.menu-lateral.recolhido { width: 64px; flex-basis: 64px; min-width: 64px; max-width: 64px; padding: 26px 6px 20px; }

.menu-corpo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Botão ☰: só existe no celular (ver "Menu no celular" no fim do arquivo). */
.menu-alternar { display: none; }
.menu-lateral.recolhido .menu-colapsar svg { transform: rotate(180deg); }
.menu-lateral.recolhido .marca { justify-content: center; padding: 0 0 14px; }
/* A wordmark (105px) não cabe nos 64px do recolhido: entra o símbolo quadrado. */
.marca-logo-simbolo { display: none; }
.menu-lateral.recolhido .marca-logo-completo { display: none; }
.menu-lateral.recolhido .marca-logo-simbolo { display: block; }
.menu-lateral.recolhido .marca-nome,
.menu-lateral.recolhido .marca-sub,
/* Sem o :not(), o ícone (também um <span>) sumia junto do rótulo e o menu recolhido ficava vazio. */
.menu-lateral.recolhido a span:not(.menu-item-icone),
.menu-lateral.recolhido .perfil-info,
.menu-lateral.recolhido .menu-sair span,
.menu-lateral.recolhido .menu-colapsar span { display: none; }
.menu-lateral.recolhido a { justify-content: center; padding: 10px 0; gap: 0; }
.menu-lateral.recolhido a.ativo::before { left: -8px; }
.menu-lateral.recolhido .perfil-menu { justify-content: center; padding: 6px 0; }
.menu-lateral.recolhido .menu-sair,
.menu-lateral.recolhido .menu-colapsar { justify-content: center; padding: 9px 0; }

/* O <img> do logo já vem no HTML estático: evita o monograma piscando a cada troca de página. */
.menu-lateral .marca {
  padding: 0 8px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.menu-lateral .marca-nome {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.menu-lateral .marca-sub {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--menu-tinta) 55%, transparent);
  padding: 0 10px 24px 31px;
}

/* Esqueleto até `montar_menu_painel` saber o papel (sem ele a barra piscava em branco).
   6 barras = itens de `ITENS_MENU` (componentes.js): se mudar lá, ajuste aqui. */
.menu-esqueleto { padding: 2px 4px 0; display: flex; flex-direction: column; gap: 4px; }
.menu-esqueleto span {
  display: block;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  animation: pulsar-esqueleto 1.4s ease-in-out infinite;
}
@keyframes pulsar-esqueleto {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.menu-lateral a:not(.menu-sair) { color: color-mix(in srgb, var(--menu-tinta) 78%, transparent); }
.menu-lateral a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--menu-tinta) 78%, transparent);
  margin-bottom: 2px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  position: relative;
  transition: background 0.18s ease, color 0.18s ease;
}
.menu-lateral a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-decoration: none;
}
.menu-item-icone { flex-shrink: 0; opacity: 0.85; }
.menu-lateral a.ativo .menu-item-icone,
.menu-lateral a:hover .menu-item-icone { opacity: 1; }

/* Item ativo: pílula azul sólida (Figma do DS), sem barra na borda esquerda. */
.menu-lateral a.ativo {
  background: var(--acento-vivo);
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: none;
}
.menu-lateral a.ativo .menu-item-icone {
  color: #ffffff;
  opacity: 1;
}
.menu-lateral a.ativo::before {
  display: none;
}

/* Rodapé com quem está logado (avatar, e-mail, papel). */
.menu-rodape-perfil {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.perfil-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}
.perfil-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acento-vivo);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.perfil-info { min-width: 0; flex: 1; }
.perfil-email {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perfil-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--acento-vivo);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.perfil-badge-usuario {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
.menu-sair {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 13px;
  border-radius: 8px;
  color: rgba(207, 227, 224, 0.75) !important;
  font-size: 12.5px !important;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.menu-sair svg { flex-shrink: 0; }
.menu-sair:hover { background: rgba(255, 255, 255, 0.07); color: #ffffff !important; }

.conteudo { flex: 1; padding: 32px 40px 56px; min-width: 0; max-width: 1440px; }

/* Sticky, não fixed: quem rola é a página. As margens negativas cancelam o padding de `.conteudo`. */
.topo-app {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topo-altura);
  margin: -32px -40px 28px;
  padding: 0 40px;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topo-app-secao {
  font-size: 13px;
  font-weight: 650;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo-app-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--acento-vivo);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cabecalho-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px;
  padding-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
}
.cabecalho-pagina::after {
  display: none !important;
}
.cabecalho-pagina h1 { font-size: 34px; }

/* Selo ao lado do H1: reaproveita ICONES_MENU (`svg_titulo_pagina()` em componentes.js). */
.cabecalho-titulo { display: flex; align-items: flex-start; gap: 14px; }
.titulo-icone {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--acento-tenue);
  color: var(--acento-vivo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.titulo-icone svg { width: 20px; height: 20px; }

.subtitulo {
  font-family: var(--fonte-ui);
  font-size: 14.5px;
  color: var(--tinta-suave);
  margin-top: 8px;
  max-width: 660px;
  line-height: 1.5;
}

/* ---------- Cartões ---------- */

.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px 26px;
  margin-bottom: 20px;
  animation: surgir 0.3s ease-out both;
}

.linha-cartoes#indicadores .cartao {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.linha-cartoes#indicadores .cartao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-card);
}

.linha-cartoes { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.linha-cartoes .cartao { flex: 1; min-width: 178px; margin-bottom: 0; padding: 18px 20px; }

.linha-cartoes#indicadores .cartao {
  min-width: 158px;
  border-top: 3px solid var(--acento-vivo);
  padding-top: 16px;
}
.linha-cartoes#indicadores .cartao .numero { color: var(--acento-escuro); }

.linha-cartoes#indicadores .cartao:nth-child(2) { border-top-color: var(--tinta); }
.linha-cartoes#indicadores .cartao:nth-child(2) .numero { color: var(--tinta); }
.linha-cartoes#indicadores .cartao:nth-child(3) { border-top-color: var(--vermelho); }
.linha-cartoes#indicadores .cartao:nth-child(3) .numero { color: var(--vermelho); }
.linha-cartoes#indicadores .cartao:nth-child(4) { border-top-color: var(--ambar); }
.linha-cartoes#indicadores .cartao:nth-child(4) .numero { color: var(--ambar-escuro); }
.linha-cartoes#indicadores .cartao:nth-child(5) { border-top-color: var(--azul); }
.linha-cartoes#indicadores .cartao:nth-child(5) .numero { color: var(--azul-escuro); }
.linha-cartoes#indicadores .cartao:nth-child(6) { border-top-color: var(--verde); }
.linha-cartoes#indicadores .cartao:nth-child(6) .numero { color: var(--verde-escuro); }
.linha-cartoes#indicadores .cartao:nth-child(7) { border-top-color: var(--tinta-suave); }
.linha-cartoes#indicadores .cartao:nth-child(7) .numero { color: var(--tinta-suave); }

/* O valor em reais é o mais largo ("R$ 34.558.290,49"): cartão maior e fonte fluida para não cortar os centavos. */
.linha-cartoes#indicadores .cartao:nth-child(2) {
  flex: 1.6 1 236px;
}
.linha-cartoes#indicadores .cartao:nth-child(2) .numero {
  font-size: clamp(15px, 1.35vw, 22px);
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.linha-cartoes .cartao:nth-child(1) { animation-delay: 0s; }
.linha-cartoes .cartao:nth-child(2) { animation-delay: 0.05s; }
.linha-cartoes .cartao:nth-child(3) { animation-delay: 0.1s; }
.linha-cartoes .cartao:nth-child(4) { animation-delay: 0.15s; }
.linha-cartoes .cartao:nth-child(5) { animation-delay: 0.2s; }
.linha-cartoes .cartao:nth-child(6) { animation-delay: 0.25s; }

.cartao .numero {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--tinta);
  display: block;
  line-height: 1.05;
}
.cartao .rotulo {
  color: var(--tinta-fraca);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  margin-bottom: 9px;
  display: block;
}

/* ---------- Tabelas ---------- */

/* Rolagem própria: sem ela a tabela larga fazia a PÁGINA rolar na horizontal. */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-rolagem > table.tabela { min-width: 720px; }

table.tabela { width: 100%; border-collapse: collapse; margin-top: 6px; }
.tabela th {
  text-align: left;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: var(--tinta-fraca);
  background: transparent;
  border-bottom: 1px solid var(--linha-forte);
  padding: 0 12px 10px;
  white-space: nowrap;
}
/* A seta (span vazio) é preenchida com ▲/▼ pelo JS (painel_fila.js). */
.th-ordenavel { cursor: pointer; user-select: none; transition: color 0.14s ease; }
.th-ordenavel:hover { color: var(--acento-vivo); }
.th-ordenavel.ordenacao-ativa { color: var(--acento-vivo); }
/* Foco visível para ordenar por teclado (tabindex/role="button"). */
.th-ordenavel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-brilho); border-radius: 3px; }
.seta-ordenacao { display: inline-block; margin-left: 4px; font-size: 8px; opacity: 0.7; }
.tabela td {
  border-bottom: 1px solid var(--linha);
  padding: 15px 12px;
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--tinta);
  transition: background 0.14s ease;
}
.tabela tbody tr { position: relative; }
.tabela tbody tr:hover td { background: var(--realce); }
.tabela tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--acento-vivo); }
.tabela tr:last-child td { border-bottom: none; }
.tabela td.valor, .tabela th.valor { text-align: right; }

/* ---------- Selos ---------- */

/* Peso e tamanho valem para a família INTEIRA de selos, não só os azuis: senão o vermelho (mais grave)
   pareceria menos importante. Para restringir, trocar `.selo` por `.selo.azul`. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;
  /* 12px no máximo: acima disso empurra a coluna. 700 existe no @import (400..800), não é negrito sintético. */
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
}
.selo svg { flex-shrink: 0; }
.selo.verde { background: var(--verde-claro); color: var(--verde-escuro); border-color: #c3e6cf; }
.selo.azul { background: var(--azul-claro); color: var(--azul-escuro); border-color: #c7d9f8; }
.selo.vermelho, .selo.alta { background: var(--vermelho-claro); color: var(--vermelho-escuro); border-color: #f8cfcf; }
.selo.ambar, .selo.media { background: var(--ambar-claro); color: var(--ambar-escuro); border-color: #f0e2ac; }
.selo.cinza, .selo.baixa { background: var(--cinza-selo-claro); color: var(--tinta-suave); border-color: var(--linha); }

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease, color 0.16s ease;
}
.botao:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-brilho); }
.botao:disabled { opacity: 0.5; cursor: not-allowed; }

.botao.dourado {
  background: var(--acento);
  color: #ffffff;
  border-color: var(--acento-escuro);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--acento-vivo) 22%, transparent);
}
.botao.dourado:hover:not(:disabled) { background: var(--acento-escuro); transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--acento-vivo) 28%, transparent); }
.botao.dourado:active:not(:disabled) { transform: translateY(0); }

.sug-btn {
  border-radius: 999px !important;
  background: var(--papel-alt) !important;
  border-color: var(--linha) !important;
  color: var(--tinta-suave) !important;
  font-weight: 500 !important;
}
.sug-btn:hover:not(:disabled) {
  background: var(--acento-tenue) !important;
  border-color: var(--acento-vivo) !important;
  color: var(--acento-escuro) !important;
  transform: none !important;
}
.sug-btn:active:not(:disabled) { background: var(--acento-claro) !important; }

.linha-tempo-container {
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--papel);
  overflow-x: auto;
}
.linha-tempo-container:empty { display: none; }

.botao.secundario { background: var(--branco); color: var(--tinta); border-color: var(--linha-forte); }
.botao.secundario:hover:not(:disabled) { background: var(--papel-alt); border-color: var(--tinta-fraca); transform: translateY(-1px); }
.botao.secundario:active:not(:disabled) { transform: translateY(0); }

.botao.minusculo { padding: 5px 11px; font-size: 12px; border-radius: 5px; }

/* A cor vem inline no SVG (varia por estado); aqui só o formato. */
.botao-icone-envio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.botao-icone-envio:hover { background: var(--papel-alt); border-color: var(--linha-forte); }

/* ---------- Formulários ---------- */

.filtros { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label, .rotulo-campo { font-size: 11.5px; font-weight: 650; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
  padding: 9px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tinta);
  background: var(--branco);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.campo input::placeholder { color: var(--tinta-fraca); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--acento-vivo);
  box-shadow: 0 0 0 3px var(--acento-brilho);
}

/* ---------- Atalhos da fila ---------- */

.fila-atalhos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.fila-atalhos-titulo { font-size: 10px; font-weight: 700; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: 0.11em; margin-right: 4px; }
.filtro-rapido.ativo { background: var(--acento-claro) !important; border-color: var(--acento-vivo) !important; color: var(--acento-escuro) !important; font-weight: 700; }

/* ---------- Avisos ---------- */

.aviso {
  padding: 12px 16px;
  border-radius: var(--raio-pequeno);
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-left-width: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aviso.info { background: var(--azul-claro); color: var(--azul-escuro); border-color: #c7d9f8; border-left-color: var(--azul); }
.aviso.sucesso { background: var(--verde-claro); color: var(--verde-escuro); border-color: #c3e6cf; border-left-color: var(--verde); }
.aviso.erro, .aviso.perigo, .acesso-negado { background: var(--vermelho-claro); color: var(--vermelho-escuro); border-color: #f8cfcf; border-left-color: var(--vermelho); }

/* ---------- Paginação ---------- */

.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); }

/* ---------- Barra de seleção em lote ---------- */

.barra-selecao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--acento-claro);
  border: 1px solid var(--acento-vivo);
  border-radius: var(--raio-pequeno);
  color: var(--acento-escuro);
  font-weight: 650;
  animation: surgir 0.2s ease-out both;
}
.barra-selecao[hidden] { display: none; }
.fila-tabela .sel_titulo, #marcar_todos { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }

/* ---------- Modais ---------- */

.modal-fundo {
  position: fixed; inset: 0;
  background: rgba(13, 20, 36, 0.5);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal {
  background: var(--papel);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-flutuante);
  width: min(880px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  animation: surgir 0.24s ease-out;
}
.modal h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 32px; }
.modal .fechar {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px;
  font-size: 20px; line-height: 1;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; color: var(--tinta-suave);
  transition: background 0.14s ease, color 0.14s ease;
}
.modal .fechar:hover { background: var(--papel-alt); color: var(--tinta); }

/* ---------- Régua de cobrança — matriz dia × canal ---------- */

.regua { margin-top: 18px; }
.regua caption { text-align: left; }
/* Coluna do dia fixa: sem isto a célula de clique esticava por centenas de pixels. */
.regua th:first-child, .regua td:first-child { width: 112px; }
.regua th:not(:first-child), .regua td:not(:first-child) { text-align: center; }

/* 36px: o analista clica célula por célula; alvo pequeno numa grade densa erra o dia. */
.celula-regua {
  width: 62px;
  max-width: 100%;
  height: 36px;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--branco);
  cursor: pointer;
  position: relative;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
.celula-regua:hover { border-color: var(--acento-vivo); background: var(--acento-tenue); transform: translateY(-1px); }
.celula-regua:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-brilho); }

.celula-regua.ligada {
  background: var(--acento);
  border-color: var(--acento-escuro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
/* Tique branco: quem não distingue as duas cores ainda lê o estado pela forma. */
.celula-regua.ligada::after {
  content: '';
  position: absolute;
  left: 50%; top: 48%;
  width: 11px; height: 6px;
  border-left: 2px solid #fffdf7;
  border-bottom: 2px solid #fffdf7;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 1px;
}
.celula-regua.ligada:hover { background: var(--acento-escuro); border-color: var(--acento-escuro); }


/* ---------- Gráficos do painel de análise ---------- */

.lista-resultados { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

/* Barra horizontal: rótulo | trilho | valor */
.barra-linha { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: center; }
.barra-linha + .barra-linha { margin-top: 11px; }
/* min-width:0: sem ele o item de grid não encolhe abaixo do conteúdo e o valor vazava para o cartão vizinho. */
.grafico-rotulo { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafico-valor { min-width: 0; font-size: 12px; color: var(--tinta-suave); white-space: normal; text-align: right; line-height: 1.3; font-variant-numeric: tabular-nums; }
.grafico-valor strong { color: var(--tinta); font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-weight: 600; }

.barra-trilho {
  display: block;
  height: 10px;
  background: var(--papel-fundo);
  border-radius: 999px;
  overflow: hidden;
  min-width: 40px;
}
.barra-preenchimento {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--acento-vivo);
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Mínimo: a menor faixa (R$ 33 mil) ao lado da maior (R$ 15 milhões) daria 0,2% e sumiria. */
  min-width: 6px;
}

/* O JS define a altura do preenchimento em %: o trilho precisa de altura fixa. */
.grafico-barras-v {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 18px;
  padding: 0 2px;
}
.barra-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.barra-contagem { font-family: var(--fonte-numero); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: var(--tinta); }
.barra-vazao {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 62px;
  height: 132px;
  background: var(--papel-fundo);
  border-radius: 5px;
  overflow: hidden;
}
.barra-vazao .barra-preenchimento { width: 100%; border-radius: 5px 5px 0 0; min-height: 3px; }
.barra-legenda {
  font-size: 10.5px;
  color: var(--tinta-suave);
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.grafico-legenda {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 11.5px; color: var(--tinta-suave);
}
.grafico-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.ponto { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; display: inline-block; }

/* ---------- Prévia de mensagem (e-mail e WhatsApp), montada localmente ---------- */

.preview-introducao { color: var(--tinta-suave); font-size: 13px; margin: 0 0 18px; }
.previews-canais { display: flex; flex-direction: column; gap: 20px; }

.preview-canal {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
}
.preview-canal-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.preview-canal-titulo h3 { margin: 0; font-size: 11px; letter-spacing: 0.11em; }

.preview-canal-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.preview-canal-rotulo { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; color: var(--tinta-fraca); }
.preview-canal-nome { font-size: 14px; font-weight: 650; color: var(--tinta); margin-top: 2px; }

/* --- Celular simulado (WhatsApp) --- */

.preview-whatsapp { display: block; }
.preview-whatsapp-grade { display: grid; grid-template-columns: 274px 1fr; gap: 22px; align-items: start; }

.telefone-previa {
  width: 274px;
  background: #16130f;
  border-radius: 30px;
  padding: 9px;
  box-shadow: var(--sombra-flutuante), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  position: relative;
}
.entalhe {
  position: absolute;
  top: 15px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 5px;
  background: #37312a;
  border-radius: 999px;
  z-index: 2;
}
.telefone-tela {
  background: #ece5dd;
  border-radius: 23px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 428px;
}

.whatsapp-cabecalho {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 12px 10px;
  background: #075e54;
  color: #ffffff;
  flex-shrink: 0;
}
.avatar-wa {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #128c7e;
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.info-wa { min-width: 0; }
.nome-wa { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-wa { font-size: 10.5px; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.whatsapp-corpo {
  flex: 1;
  padding: 14px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: #ece5dd;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 0);
  background-size: 22px 22px;
}

.wa-bolha {
  max-width: 88%;
  padding: 7px 9px 5px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #111b21;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.13);
  position: relative;
  animation: surgir-bolha 0.3s ease-out both;
  overflow-wrap: anywhere;
}
.wa-bolha.enviada { align-self: flex-end; background: #d9fdd3; }
.wa-bolha.enviada::after {
  content: '';
  position: absolute;
  top: 0; right: -6px;
  border: 6px solid transparent;
  border-top-color: #d9fdd3;
  border-left-color: #d9fdd3;
}

.wa-anexo {
  display: flex; align-items: center; gap: 9px;
  background: rgba(11, 20, 26, 0.05);
  border-radius: 6px;
  padding: 8px 9px;
  margin-bottom: 6px;
}
.icone-anexo {
  width: 32px; height: 38px;
  background: #d93025;
  color: #ffffff;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.nome-anexo { font-size: 11.5px; font-weight: 600; color: #111b21; overflow-wrap: anywhere; }
.peso-anexo { font-size: 10px; color: rgba(17, 27, 33, 0.6); }

.wa-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px; }
.wa-hora { font-size: 10px; color: rgba(17, 27, 33, 0.5); font-variant-numeric: tabular-nums; }
.wa-tique { display: inline-flex; width: 16px; height: 11px; }
.wa-tique svg { width: 100%; height: 100%; display: block; }

.whatsapp-entrada { padding: 8px 10px; background: #f0f2f5; flex-shrink: 0; }
.campo-entrada {
  background: #ffffff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  color: #8696a0;
}

/* --- Resumo ao lado do celular --- */

.preview-whatsapp-resumo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.preview-dado { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.preview-dado:last-of-type { border-bottom: none; padding-bottom: 0; }
.preview-dado span {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tinta-fraca);
}
.preview-dado strong { font-size: 13px; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.preview-nota {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--acento-escuro);
  background: var(--acento-tenue);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  padding: 11px 13px;
  margin-top: 2px;
}

/* --- Prévia de e-mail --- */

.previa-email { border: 1px solid var(--linha); border-radius: var(--raio-pequeno); overflow: hidden; background: var(--branco); }
.email-cabecalho { background: var(--papel-alt); padding: 13px 16px; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 5px; }
.email-cabecalho .linha { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; font-size: 12.5px; color: var(--tinta); }
.email-cabecalho .linha > span:last-child, .email-cabecalho .linha > strong { overflow-wrap: anywhere; }
.email-cabecalho .rotulo-campo {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--tinta-fraca);
}
/* `.email-corpo` é <iframe sandbox>: estas regras não o alcançam e, sem script, não dá para medir
   a altura — ela é fixa e o excesso rola dentro do quadro. */
.email-corpo { display: block; width: 100%; height: 440px; border: 0; background: #fff; }

/* ---------- Chat / assistente ---------- */

.chat-pagina { max-width: 900px; margin: 0 auto; }
.chat-caixa {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 580px;
  box-shadow: var(--sombra-card);
}
.chat-caixa > div:first-child { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }

.bolha {
  max-width: 78%;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 12px;
  animation: surgir-bolha 0.28s ease-out both;
  overflow-wrap: anywhere;
}
.bolha.bot { background: var(--papel-alt); color: var(--tinta); align-self: flex-start; border-bottom-left-radius: 3px; border: 1px solid var(--linha); }
.bolha.cliente { background: var(--acento); color: #fffdf7; align-self: flex-end; border-bottom-right-radius: 3px; }
.bolha .meta {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.chat-entrada { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--linha); background: var(--papel); flex-shrink: 0; }
.chat-entrada input {
  flex: 1;
  padding: 10px 13px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tinta);
  background: var(--branco);
}
.chat-entrada input:focus { outline: none; border-color: var(--acento-vivo); box-shadow: 0 0 0 3px var(--acento-brilho); }

/* ---------- Portal do cliente, acesso e login ---------- */

.portal-cabecalho {
  background: #0d1424;
  color: #ffffff;
  padding: 16px 32px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.portal-cabecalho .marca { font-family: var(--fonte-titulo); font-weight: 600; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.portal-cabecalho .marca::before { content: ''; width: 8px; height: 8px; background: var(--acento-vivo); transform: rotate(45deg); border-radius: 1px; flex-shrink: 0; }
.portal-cabecalho .espacador { flex: 1; }
.portal-cabecalho a, .portal-cabecalho #identidade { color: #c2cad6; font-size: 13px; }
.portal-cabecalho a:hover { color: #ffffff; }
.portal-corpo { padding: 34px 32px 56px; max-width: 1120px; margin: 0 auto; }

.login-page {
  min-height: 100vh;
  background: #111E44;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(0, 102, 255, 0.28), transparent 44%),
    radial-gradient(circle at 92% 88%, rgba(164, 206, 244, 0.22), transparent 46%);
}
.login-shell { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 44px; }
.login-marca { display: flex; align-items: center; gap: 13px; color: #ffffff; font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600; }
.login-marca small { display: block; font-family: var(--fonte-ui); color: #94a1b2; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.login-diamante { width: 40px; height: 40px; border-radius: 11px; background: var(--acento); position: relative; flex-shrink: 0; box-shadow: 0 4px 16px var(--acento-brilho); }
.login-diamante::after { content: ''; position: absolute; width: 12px; height: 12px; background: #fffdf7; transform: rotate(45deg); border-radius: 1px; inset: 14px; }

.login-cabecalho { max-width: 660px; margin: 52px 0 30px; color: #ffffff; }
.login-cabecalho h1 { margin: 16px 0 10px; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.03em; color: #ffffff; font-weight: 500; }
.login-cabecalho p { max-width: 580px; margin: 0; color: #c2cad6; font-size: 15.5px; line-height: 1.6; }

.login-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.login-opcoes-unica { grid-template-columns: minmax(0, 1fr); }

.login-shell-unica { max-width: 480px; padding-top: 84px; text-align: center; }
.login-shell-unica .login-marca { justify-content: center; }
.login-shell-unica .login-cabecalho { max-width: none; margin: 40px 0 28px; text-align: center; }
.login-shell-unica .login-cabecalho p { max-width: none; margin: 0 auto; }
.login-opcao {
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--raio-grande);
  background: var(--branco);
  box-shadow: var(--sombra-flutuante);
  display: flex;
  flex-direction: column;
  animation: surgir 0.34s ease-out both;
}
.login-opcao-admin { border-top: 4px solid var(--acento-vivo); }
.login-opcao-cliente { border-top: 4px solid var(--azul); animation-delay: 0.07s; }
.login-opcao-kicker { color: var(--tinta-fraca); font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.login-opcao h2 { margin: 11px 0 8px; font-size: 25px; }
.login-opcao > p { min-height: 56px; color: var(--tinta-suave); font-size: 13.5px; line-height: 1.6; margin: 0; }
.login-opcao .campo { margin-top: 15px; }

.campo-senha { display: flex; gap: 8px; }
.campo-senha input { min-width: 0; flex: 1; }
.mostrar-senha { flex-shrink: 0; padding: 8px 12px; font-size: 12px; }
.login-botao { width: 100%; justify-content: center; margin-top: 20px; padding: 12px 16px; text-align: center; }
.login-credenciais, .login-nota { margin-top: 16px; color: var(--tinta-suave); font-size: 12px; line-height: 1.55; }
.login-credenciais code { font-size: 11.5px; }
.login-nota { padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: var(--papel-alt); margin-top: auto; }
.login-rodape { margin-top: 30px; color: #94a1b2; font-size: 12px; text-align: center; }

/* ---------- Responsivo ---------- */

@media (max-width: 1080px) {
  .preview-whatsapp-grade { grid-template-columns: 1fr; justify-items: center; }
  .preview-whatsapp-resumo { width: 100%; }
}

@media (max-width: 860px) {
  .casca { flex-direction: column; }
  /* O menu vira faixa no TOPO: o sticky/100vh do desktop cobriria a tela inteira. */
  .menu-lateral { width: 100%; flex: none; min-width: 0; max-width: none; padding: 16px; border-right: none; border-bottom: 1px solid var(--linha); position: static; height: auto; overflow-y: visible; }
  /* Sem isto, recolhido no desktop deixava a faixa com 64 px de ALTURA (flex-basis em coluna). */
  .menu-lateral.recolhido { flex: none; width: 100%; min-width: 0; max-width: none; }
  .menu-rodape-perfil { margin-top: 16px; }
  .conteudo { padding: 22px 18px 40px; }
  .topo-app { margin: -22px -18px 20px; padding: 0 18px; }
  .login-opcoes { grid-template-columns: 1fr; }
  .barra-linha { grid-template-columns: 110px 1fr; }
  .grafico-valor { grid-column: 1 / -1; }
  .portal-corpo { padding: 24px 18px 40px; }
  .modal { padding: 20px; }
  h1 { font-size: 25px; }
}

@media (max-width: 520px) {
  .telefone-previa, .preview-whatsapp-grade { width: 100%; max-width: 300px; }
  .grafico-barras-v { gap: 7px; }
  .barra-vazao { height: 104px; }
}

/* ---------- Login do cliente no celular (abre pelo link da cobrança, quase sempre no telefone) ---------- */

/* O shell centraliza tudo; o formulário volta à esquerda (rótulo e erro centralizados quebram a leitura). */
.login-shell-unica .login-opcao,
.login-shell-unica .login-opcao .campo,
.login-shell-unica .login-nota,
.login-shell-unica .aviso { text-align: left; }

@media (max-width: 640px) {
  /* Fonte abaixo de 16px faz o Safari do iPhone dar zoom no foco. Só no celular. */
  .campo input, .campo select, .campo textarea { font-size: 16px; padding: 12px 13px; }
  .campo label, .rotulo-campo { font-size: 13px; }

  /* Alvo de toque para polegar. */
  .login-opcao .botao, .login-nota a { min-height: 44px; }
  .login-nota a { display: inline-flex; align-items: center; }

  .login-shell-unica { padding-top: 32px; }
  .login-shell-unica .login-cabecalho { margin: 22px 0 20px; }
  .login-opcao { padding: 20px 18px; }
  .login-opcao > p { min-height: 0; }
}

/* ---------- Painel de Análise ---------- */

/* Cabeçalho Ações e Badges */
.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.badge-status-erp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: var(--acento-tenue);
  border: 1px solid var(--acento-claro);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--acento-escuro);
}

.ponto-pulsante {
  width: 8px;
  height: 8px;
  background-color: var(--verde);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.4);
  animation: pulso-status 2s infinite;
}

/* A amostra do ERP NÃO pulsa: é leitura estática do Firestore, não conexão viva. */
.badge-status-erp.amostra {
  background: var(--ambar-claro);
  border-color: #f0e2ac;
  color: #78350f;
}
.badge-status-erp.amostra .ponto-estatico {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background-color: var(--ambar);
}

@keyframes pulso-status {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(21, 128, 61, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

/* Filtros da Carteira */
.filtros-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
  gap: 12px;
  flex-wrap: wrap;
}

.filtros-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filtros-resumo {
  font-size: 12px;
  font-weight: 500;
  color: var(--tinta-suave);
  background: var(--papel-alt);
  padding: 4px 12px;
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Cartões KPI Customizados */
.cartao-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 18px 20px;
  box-shadow: var(--sombra);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
  min-width: 170px;
  flex: 1;
}

.cartao-kpi:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-card);
  border-color: var(--linha-forte);
}

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

.cartao-kpi .kpi-icone {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papel-alt);
  color: var(--acento-escuro);
  flex-shrink: 0;
}

.cartao-kpi .numero {
  font-family: 'Barlow', var(--fonte-ui), sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px;
  line-height: 1.15;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
}

/* Sem hex fixo: a ênfase vem da faixa de acento no topo e do `flex` maior. */
.cartao-kpi.hero {
  background:
    radial-gradient(140% 120% at 0% 0%, var(--acento-brilho), transparent 70%),
    var(--branco);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--acento-vivo);
  flex: 1.5 1 240px;
}

/* Acento escuro: é o que tem contraste sobre fundo claro (AAA 7,0:1). */
.cartao-kpi.hero .numero {
  color: var(--acento-escuro);
  font-size: clamp(20px, 1.5vw, 28px);
}

.cartao-kpi.hero .kpi-icone {
  background: var(--acento-brilho);
  color: var(--acento-escuro);
}

.cartao-kpi .subtexto {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--tinta-suave);
  line-height: 1.35;
}

/* É um <button>: reseta appearance e fonte para parecer o mesmo cartão. */
.cartao-kpi-clicavel {
  appearance: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.cartao-kpi-clicavel[aria-pressed="true"] {
  border-color: var(--acento-vivo);
  box-shadow: var(--sombra-card);
}

/* Gráficos & Linhas */
.cartao-grafico-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
  gap: 12px;
}

.cartao-grafico-header h2 {
  margin: 0;
  font-size: 17px;
}

/* Dentro do cabeçalho, junto do h2: a ponta direita já é do badge (space-between). */
.cartao-titulo-colapsavel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.botao-colapsar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--linha);
  background: var(--branco);
  color: var(--tinta-suave);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.botao-colapsar:hover { background: var(--papel-alt); color: var(--tinta); }
.botao-colapsar svg { transition: transform 0.18s ease; }
.botao-colapsar.recolhido svg { transform: rotate(-90deg); }

.badge-metrica {
  font-family: 'Barlow', var(--fonte-numero), sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--papel-alt);
  color: var(--tinta);
  border: 1px solid var(--linha);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.barra-linha-moderna {
  display: grid;
  /* Colunas pequenas de propósito: os cartões partem de 360px (analise.html) e estouravam. */
  grid-template-columns: 96px minmax(0, 1fr) 40px 120px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--raio-pequeno);
  transition: background 0.15s ease;
}

.barra-linha-moderna:hover {
  background: var(--realce);
}

.grafico-pct-pill {
  min-width: 0;
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--papel-alt);
  color: var(--tinta-suave);
  text-align: center;
}

/* Matriz de Risco */
.risco-container {
  margin-top: 6px;
}

.risco-barra-progresso {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--papel-fundo);
  margin: 12px 0 16px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.risco-fatia {
  height: 100%;
  transition: width 0.4s ease;
}

/* Baixo risco em verde: azul não dizia "tranquilo". */
.risco-fatia.baixo { background: var(--verde); }
.risco-fatia.medio { background: var(--ambar); }
.risco-fatia.critico { background: var(--vermelho); }

.risco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.risco-card-item {
  padding: 12px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--linha);
  background: var(--papel);
}

.risco-card-item.critico {
  background: var(--vermelho-claro);
  border-color: #f8cfcf;
}

.risco-card-item.medio {
  background: var(--ambar-claro);
  border-color: #f0e2ac;
}

.risco-card-item.baixo {
  background: var(--verde-claro);
  border-color: #c3e6cf;
}

.risco-card-item .risco-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-fraca);
  margin-bottom: 4px;
}

.risco-card-item .risco-valor {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta);
}

.risco-card-item .risco-sub {
  font-size: 11px;
  color: var(--tinta-suave);
  margin-top: 2px;
}

.ranking-num {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 11px;
  color: var(--acento-escuro);
  background: var(--acento-claro);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .barra-linha-moderna {
    grid-template-columns: 90px minmax(0, 1fr) 40px;
  }
  .barra-linha-moderna .grafico-valor {
    grid-column: 1 / -1;
    text-align: right;
  }
  .risco-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Seletor de mês e gráficos mensais ---------- */

.barra-meses-container {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 12px 16px;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.barra-meses-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
}

.barra-meses {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pilula-mes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--papel-alt);
  border: 1px solid var(--linha);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-suave);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.pilula-mes:hover {
  background: var(--branco);
  border-color: var(--acento-vivo);
  color: var(--tinta);
  transform: translateY(-1px);
}

.pilula-mes.ativa {
  background: var(--acento);
  border-color: var(--acento-escuro);
  color: var(--branco);
  box-shadow: 0 2px 6px var(--acento-brilho);
}

.pilula-mes-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: 0.05em;
}

.pilula-mes:not(.ativa) .pilula-mes-tag {
  background: var(--linha);
  color: var(--tinta-suave);
}

/* Gráfico de Evolução Mensal (Colunas) */
.grafico-colunas-evolucao {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  padding: 10px 0 6px;
  overflow-x: auto;
}

.coluna-mes-item {
  flex: 1;
  min-width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.coluna-mes-item:hover {
  transform: translateY(-2px);
}

.coluna-valor-topo {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 6px;
  white-space: nowrap;
}

.coluna-trilho {
  width: 100%;
  max-width: 38px;
  height: 120px;
  background: var(--papel-alt);
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.coluna-preenchimento {
  width: 100%;
  background: var(--acento-vivo);
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease;
}

.coluna-mes-item.ativo .coluna-preenchimento {
  background: var(--acento);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}

.coluna-mes-item.ativo .coluna-rotulo {
  font-weight: 700;
  color: var(--acento);
}

.coluna-rotulo {
  font-size: 11px;
  color: var(--tinta-suave);
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
}

/* Gráfico de Eficácia do Mês (Composição Segmentada) */
.composicao-barra-segmentada {
  height: 24px;
  width: 100%;
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  background: var(--papel-alt);
  margin: 12px 0 16px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.segmento-pago {
  background: var(--verde);
  transition: width 0.4s ease;
}

/* Azul, não `var(--ambar)`: âmbar preenchendo uma barra larga parece marrom. A variável global
   não muda porque afetaria toda tag de aviso do sistema. */
.segmento-avencer {
  background: var(--acento-vivo);
  transition: width 0.4s ease;
}

.segmento-vencido {
  background: var(--vermelho);
  transition: width 0.4s ease;
}

/* "Sumiu do ERP" é desconhecido: cinza hachurado, nenhuma cor que já signifique algo. */
.segmento-indeterminado {
  background: repeating-linear-gradient(
    45deg,
    var(--tinta-fraca),
    var(--tinta-fraca) 4px,
    var(--linha) 4px,
    var(--linha) 8px
  );
  transition: width 0.4s ease;
}

.composicao-grid-detalhes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.composicao-card-item {
  padding: 10px 12px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.composicao-card-item.pago {
  background: var(--verde-claro);
  border-color: #B9DCCB;
}

.composicao-card-item.avencer {
  background: var(--acento-tenue);
  border-color: var(--acento-claro);
}

.composicao-card-item.vencido {
  background: var(--vermelho-claro);
  border-color: #F2C6CA;
}

.composicao-card-item .composicao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}

.composicao-card-item .composicao-valor {
  font-family: var(--fonte-numero); font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta);
}

.composicao-card-item .composicao-sub {
  font-size: 11px;
  color: var(--tinta-suave);
}


/* ---------- Modo simulação do portal: agressivo DE PROPÓSITO, para ninguém confundir com a tela real do cliente ---------- */
.faixa-atendimento {
  position: sticky;
  top: 0;
  z-index: 60;
  background: repeating-linear-gradient(
    135deg,
    var(--ambar-claro),
    var(--ambar-claro) 12px,
    #fde9a9 12px,
    #fde9a9 24px
  );
  border-bottom: 2px solid var(--ambar);
  padding: 9px 18px;
  color: var(--ambar-escuro);
}
.faixa-atendimento-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.faixa-atendimento-selo {
  background: var(--ambar-escuro);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 9px;
  border-radius: 4px;
  flex-shrink: 0;
}
.faixa-atendimento-texto {
  font-size: 12.5px;
  line-height: 1.45;
  flex: 1 1 260px;
}
.faixa-atendimento a {
  color: var(--ambar-escuro);
  font-weight: 600;
}

/* Trocador de empresa: lista de resultados da busca. */
.lista-atendimento {
  max-height: 300px;
  overflow-y: auto;
  background: var(--branco);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
}
.item-atendimento {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
  font-family: var(--fonte-ui);
  font-size: 13px;
  color: var(--tinta);
}
.item-atendimento:last-child { border-bottom: none; }
.item-atendimento:hover { background: var(--acento-tenue); }

/* 76 carteiras: grade com largura mínima para não esconder a matriz logo abaixo. */
.escopo-carteiras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 14px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--papel-alt);
}
.escopo-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.escopo-item:hover {
  background: var(--acento-tenue);
}
.escopo-item.marcado {
  background: color-mix(in srgb, var(--azul, #0066ff) 10%, transparent);
  font-weight: 600;
}
.escopo-item span:nth-of-type(1) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.escopo-item input { cursor: pointer; flex: none; }

.filtro-canal-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.filtro-canal-btn.ativo {
  background: var(--acento-vivo, #0066ff);
  color: #ffffff;
  border-color: var(--acento-vivo, #0066ff);
}

/* Selo "Sincronizado …": a classe vem de `colorir_selo_sincronizacao` (componentes.js); sem ela, fica o âmbar de `.amostra`. */
.badge-status-erp.em-dia,
.badge-status-erp.amostra.em-dia {
  background: var(--verde-claro);
  border-color: #c3e6cf;
  color: var(--verde-escuro);
}
.badge-status-erp.em-dia .ponto-estatico { background-color: var(--verde); }
.badge-status-erp.atrasado,
.badge-status-erp.amostra.atrasado {
  background: var(--ambar-claro);
  border-color: #f0e2ac;
  color: var(--ambar-escuro);
}
.badge-status-erp.atrasado .ponto-estatico { background-color: var(--ambar); }

/* ---------- Tabelas densas (~1280 px): Fila, Caixa de saída e prévia da régua sem rolagem lateral ---------- */
/* Só no console (`.casca`), entre 861 e 1440 px; abaixo valem as margens de "Responsivo". */
@media (min-width: 861px) and (max-width: 1440px) {
  .casca .conteudo { padding: 28px 24px 48px; }
  .casca .topo-app { margin: -28px -24px 24px; padding: 0 24px; }
}
@media (max-width: 1440px) {
  .casca .cartao:has(.tabela-rolagem) { padding: 18px 16px; }

  .casca .tabela th { padding: 0 7px 9px; letter-spacing: 0.08em; }
  .casca .tabela td { padding: 10px 7px; font-size: 12.5px; }
  .casca .tabela td .selo { font-size: 11px; padding: 2px 6px; }
  .casca .tabela td .botao.minusculo { padding: 4px 8px; font-size: 11.5px; }
}

/* Cabeçalhos quebram em duas linhas: sem quebra eram o que mais alargava a tabela. */
@media (max-width: 1440px) {
  .fila-tabela th { white-space: normal; vertical-align: bottom; }
  .casca .fila-tabela th { padding: 0 6px 9px; }
  .casca .fila-tabela td { padding: 10px 6px; }
}
/* Coluna de cliente: nunca espremida a ponto de quebrar letra a letra. */
.fila-tabela td:nth-child(2) { min-width: 160px; }
.fila-tabela td:nth-child(2) .texto-menor {
  display: block;
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ações da Fila: "Enviar cobrança" e "Boleto" empilham em vez de alargar. */
.fila-tabela td:last-child .botao { display: flex; width: max-content; margin: 2px 0 !important; white-space: nowrap; }
/* Selos quebram linha na Fila: "telefone fixo — sem WhatsApp" numa linha só alargava a tabela e escondia o botão (15/10). */
.fila-tabela td .selo { white-space: normal; }
/* A coluna de ações fica presa à direita, visível mesmo quando a tabela rola para o lado. */
.fila-tabela th:last-child,
.fila-tabela td:last-child { position: sticky; right: 0; z-index: 1; background: var(--branco); box-shadow: -8px 0 8px -8px rgba(17, 30, 68, 0.22); }
.fila-tabela tbody tr:hover td:last-child { background: var(--realce); }

.saida-tabela td:first-child { min-width: 86px; }
.saida-tabela td .selo { white-space: normal; }
.saida-tabela td strong { overflow-wrap: anywhere; }

/* Prévia da régua: o botão "Pré-visualizar" é a última coluna. */
#lista_destinatarios .tabela td:last-child { white-space: nowrap; }
#lista_destinatarios .tabela td.texto-menor { overflow-wrap: anywhere; }

/* ---------- Segmentos da Análise: o nome quebra em até duas linhas; completo no `title` ---------- */
.barra-linha-moderna.com-nome-longo { grid-template-columns: minmax(110px, 1.1fr) minmax(40px, 1fr) 46px 118px; }
.barra-linha-moderna.com-nome-longo .grafico-rotulo {
  display: flex;
  align-items: center;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.barra-linha-moderna.com-nome-longo .grafico-rotulo-texto {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 860px) {
  .barra-linha-moderna.com-nome-longo { grid-template-columns: minmax(110px, 1.2fr) minmax(0, 1fr) 46px; }
}

/* ---------- Menu no celular: começa fechado (só marca e ☰); mesma largura de `MIDIA_CELULAR` (componentes.js) ---------- */
@media (max-width: 640px) {
  .menu-lateral { position: relative; padding: 10px 16px; }
  .menu-lateral .marca { padding: 6px 52px 6px 0 !important; min-height: 32px; }
  .menu-esqueleto { display: none; }
  .menu-alternar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 6px;
    right: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
  }
  .menu-alternar:hover { background: rgba(255, 255, 255, 0.08); }
  .menu-alternar:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
  .menu-lateral.menu-fechado .menu-corpo { display: none; }
  .menu-lateral:not(.menu-fechado) .menu-corpo { padding-top: 8px; }
  /* "Recolher menu" é coisa do desktop; no celular quem recolhe é o ☰. */
  .menu-colapsar { display: none; }
}