/* ======================================================================
   Evoluti Gestão — Tema
   ----------------------------------------------------------------------
   Camada 2 de 2. Carrega DEPOIS de style.css. Substitui theme-v75.css.

   Reusa exatamente os seletores que as páginas já escrevem (.btn,
   .card, .field, .sidebar, table.data …). Nenhuma classe nova é
   exigida de nenhuma tela. Por ordem de carregamento, estas regras
   vencem em cascata.

   ----------------------------------------------------------------------
   As cinco decisões que este arquivo aplica
   ----------------------------------------------------------------------
   1. Nada levita.       Hover não move elemento. O sistema anterior
                         subia botão e cartão 1-2px; num painel com 40
                         cartões isso vira ruído e denuncia template.
   2. Ação é chapada.    O gradiente azul→roxo saiu. Cor sólida lê como
                         decisão; gradiente lê como enfeite.
   3. Uma ação por tela. Só um botão azul por tela. Se dois disputam,
                         um deles é .btn-secondary.
   4. Número é o herói.  Toda cifra usa numeral tabular e alinha à
                         direita. É o que faz uma coluna de valores
                         poder ser lida de cima a baixo.
   5. Cor carrega dado.  Verde = receita. Âmbar = oportunidade.
                         Vermelho = risco. Azul = decisão e ação.
                         Nunca cor por enfeite.
   ====================================================================== */

/* ----------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */
body{
  /* Antes: gradiente cinza-azulado em três paradas, fixo na viewport.
     Agora: o Gelo Corporativo aprovado, chapado. O fundo de uma
     ferramenta de trabalho não deve ter nada acontecendo nele. */
  background:var(--canvas);
  color:var(--texto);
  font-family:var(--fonte-ui);
  font-size:var(--t-14);
  line-height:var(--altura-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05" 1,"ss01" 1;   /* Inter: 'l' com cauda, 'a' de uma perna */
}

h1,h2,h3,h4,h5{
  font-family:var(--fonte-titulo);
  color:var(--texto);
  letter-spacing:var(--tracking-titulo);
  line-height:var(--altura-apertada);
  font-weight:var(--peso-titulo);
}
h1{font-size:var(--t-24)}
h2{font-size:var(--t-20)}
h3{font-size:var(--t-17)}
h4{font-size:var(--t-15)}

::selection{background:var(--acao-suave);color:var(--acao-ativa)}

/* Um anel de foco só, em todo o produto, sempre visível ao teclado.
   O sistema anterior tinha três tratamentos diferentes de foco. */
:focus-visible{
  outline:2px solid var(--foco);
  outline-offset:2px;
  border-radius:var(--raio-sm);
}
:focus:not(:focus-visible){outline:none}

/* Numeral tabular em tudo que é dado. Sem isto, "1.234" e "9.876"
   ocupam larguras diferentes e a coluna dança. */
table, .stat-card .value, .num, .valor, .value, .kpi, .kpi-pill,
.geo-stat-value, .prod-metric-value, .bc-hero-stat, .tv-mini-stat,
input[type=number], .money, .moeda{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ----------------------------------------------------------------------
   Botões
   ---------------------------------------------------------------------- */
.btn{
  border-radius:var(--raio);
  padding:9px 16px;
  font-size:var(--t-14);
  font-weight:var(--peso-forte);
  letter-spacing:-0.005em;
  gap:var(--e-2);
  border:1px solid transparent;
  transition:background-color var(--rapido) var(--ease),
             border-color var(--rapido) var(--ease),
             color var(--rapido) var(--ease);
  box-shadow:none;
}
/* Nada levita — nem aqui nem em lugar nenhum. */
.btn:hover{transform:none}
.btn:active{transform:none}

.btn-primary{
  background:var(--acao);
  color:var(--texto-invertido);
  border-color:var(--acao);
  box-shadow:none;
}
.btn-primary:hover{background:var(--acao-hover);border-color:var(--acao-hover);box-shadow:none;transform:none}
.btn-primary:active{background:var(--acao-ativa);border-color:var(--acao-ativa)}

.btn-secondary{
  background:var(--superficie);
  color:var(--texto-2);
  border-color:var(--borda);
}
.btn-secondary:hover{background:var(--superficie-2);border-color:var(--borda-forte);color:var(--texto);transform:none}

.btn-ghost{background:transparent;color:var(--texto-2);border-color:transparent}
.btn-ghost:hover{background:var(--superficie-3);color:var(--texto)}

/* Perigo é contornado por padrão.
   O vermelho de risco e o azul de ação são distinguíveis, mas um botão
   vermelho chapado no meio de uma lista convida ao clique errado. O
   preenchido existe só para o botão final do modal de confirmação. */
.btn-danger{
  background:transparent;
  color:var(--perigo);
  border-color:currentColor;
}
.btn-danger:hover{background:var(--perigo-suave);color:var(--perigo)}
.btn-danger.confirmar,
.modal-box .btn-danger[type=submit]{
  background:var(--perigo-forte);
  color:#fff;
  border-color:var(--perigo-forte);
}
.btn-danger.confirmar:hover,
.modal-box .btn-danger[type=submit]:hover{background:var(--perigo);border-color:var(--perigo)}

.btn-sm{padding:5px 11px;font-size:var(--t-13);border-radius:var(--raio-sm)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ----------------------------------------------------------------------
   Cartões
   ---------------------------------------------------------------------- */
.card{
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio-lg);
  box-shadow:var(--sombra-sm);
  transition:border-color var(--normal) var(--ease),
             box-shadow var(--normal) var(--ease);
}
.card-pad{padding:var(--e-5)}
/* O cartão que responde ao mouse escurece a borda. Não sobe, não cresce. */
.card-hover:hover,.client-card:hover,.module-card:hover,
.demand-card:hover,.ticket-card:hover,.kanban-card:hover{
  border-color:var(--borda-forte);
  box-shadow:var(--sombra);
  transform:none;
}

/* ----------------------------------------------------------------------
   Campos
   ---------------------------------------------------------------------- */
.field{margin-bottom:var(--e-4)}
.field label{
  font-size:var(--t-13);
  font-weight:var(--peso-forte);
  color:var(--texto-2);
  margin-bottom:5px;
}
.field input,.field select,.field textarea,
input[type=text],input[type=email],input[type=password],
input[type=number],input[type=date],input[type=tel],input[type=search],
select,textarea{
  background:var(--superficie);
  color:var(--texto);
  /* Borda em --borda-forte, não na borda clara de cartão: um campo
     precisa de 3:1 para se anunciar como campo (WCAG 1.4.11). A borda
     de 1px em cinza claro do sistema anterior dava 1,4:1. */
  border:1px solid var(--borda-forte);
  border-radius:var(--raio);
  padding:9px 12px;
  font-size:var(--t-14);
  transition:border-color var(--rapido) var(--ease),
             box-shadow var(--rapido) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--acao);
  box-shadow:0 0 0 3px var(--acao-suave);
  outline:none;
}
.field input::placeholder,textarea::placeholder{color:var(--texto-3)}
.field input:disabled,select:disabled,textarea:disabled{
  background:var(--superficie-3);color:var(--texto-3);cursor:not-allowed;
}
.field-hint{color:var(--texto-3);font-size:var(--t-12);margin-top:4px}
.field-error{color:var(--perigo);font-size:var(--t-12);margin-top:4px;font-weight:var(--peso-medio)}

/* ----------------------------------------------------------------------
   Avisos
   Severidade é dita pela borda lateral somada ao ícone — nunca só pela
   cor de fundo, que sozinha some para quem não distingue matiz.
   ---------------------------------------------------------------------- */
.alert,.aviso{
  border-radius:var(--raio);
  border:1px solid var(--borda);
  border-left-width:3px;
  padding:11px 14px;
  font-size:var(--t-13);
  gap:var(--e-2);
  animation:none;
}
.alert-success{background:var(--receita-suave);color:var(--receita);border-color:var(--receita-forte)}
.alert-error{background:var(--perigo-suave);color:var(--perigo);border-color:var(--perigo-forte)}
.alert-warning,.alert-warn{background:var(--alerta-suave);color:var(--alerta);border-color:var(--alerta-forte)}
.alert-info{background:var(--acao-suave);color:var(--acao-ativa);border-color:var(--acao)}

/* ----------------------------------------------------------------------
   Etiquetas
   ---------------------------------------------------------------------- */
.badge,.tag-chip,.kpi-pill,.chip{
  border-radius:var(--raio-pill);
  padding:3px 10px;
  font-size:var(--t-12);
  font-weight:var(--peso-forte);
  letter-spacing:0;
  border:1px solid transparent;
}
.badge-brand,.badge-indigo{background:var(--acao-suave);color:var(--acao-ativa)}
.badge-slate{background:var(--superficie-3);color:var(--texto-2)}
.badge-emerald,.badge-green{background:var(--receita-suave);color:var(--receita)}
.badge-amber{background:var(--alerta-suave);color:var(--alerta)}
.badge-rose,.badge-red{background:var(--perigo-suave);color:var(--perigo)}
.badge-violet{background:var(--info-suave);color:var(--info)}

.status-badge-nao_iniciado,.status-badge-pendente{background:var(--superficie-3);color:var(--texto-2)}
.status-badge-em_andamento{background:var(--acao-suave);color:var(--acao-ativa)}
.status-badge-concluido{background:var(--receita-suave);color:var(--receita)}
.status-badge-atrasado{background:var(--perigo-suave);color:var(--perigo)}

/* ----------------------------------------------------------------------
   Barra lateral
   ---------------------------------------------------------------------- */
.sidebar{
  /* Antes: gradiente navy em três paradas. Agora o Azul Estratégico
     chapado, um degrau abaixo do tom do painel do login (#0C3D68
     contra #0F4C81) — perto o bastante para as duas telas amarrarem,
     fundo o bastante para a barra recuar e deixar o conteúdo à frente. Trocar o fundo obrigou a rederivar
     tudo que vive em cima dele: os valores estão nos tokens --menu-*,
     cada um com a razão de contraste anotada. */
  background:var(--menu);
  border-right:1px solid rgba(255,255,255,.07);
  padding:var(--e-4) var(--e-3);
}
.sidebar-brand{padding:var(--e-1) var(--e-2) var(--e-5)}
.sidebar-brand .brand{color:#fff}

.sidebar a.navlink{
  border-radius:var(--raio-sm);
  color:var(--menu-texto);
  font-size:var(--t-13);
  font-weight:var(--peso-medio);
  padding:8px 11px;
  transition:background-color var(--rapido) var(--ease),color var(--rapido) var(--ease);
}
.sidebar a.navlink:hover{background:rgba(255,255,255,.10);color:#fff}
.sidebar a.navlink.active{
  /* O par tinha que inverter. Num menu grafite, azul chapado com texto
     branco resolvia; sobre a barra azul, qualquer azul mais escuro
     desaparece (o antigo --azul-600 dava 1,25:1 contra o fundo).

     E não adianta clarear mantendo texto branco: para o preenchimento
     se separar 3:1 da barra ele precisa de luminância ≥0,30, e nessa
     luminância o branco em cima cai para 2,95:1. Um dos dois tem de
     ceder — então o preenchimento fica claro e a tinta fica azul.
     Resultado: 7,13:1 de separação da barra, 8,98:1 de texto. */
  background:var(--menu-ativo);
  color:var(--menu-ativo-tinta);
  font-weight:var(--peso-forte);
  box-shadow:none;
}
.sidebar a.navlink svg{opacity:.75}
.sidebar a.navlink.active svg{opacity:1}

/* As quatro fases do método. Cada bloco é marcado por uma faixa de 3px
   na cor da fase — a mesma cor que a fase usa em qualquer outro lugar
   do produto. */
.sidebar-tier-block{border-left:3px solid transparent;border-radius:0;background:none;margin:var(--e-1) 0}
.sidebar-tier-block.tier-decidir{border-left-color:var(--fase-decidir-claro)}
.sidebar-tier-block.tier-executar{border-left-color:var(--fase-executar-claro)}
.sidebar-tier-block.tier-medir{border-left-color:var(--fase-medir-claro)}
.sidebar-tier-block.tier-governar{border-left-color:var(--fase-governar-claro)}
/* Compatibilidade com os nomes antigos da pirâmide de gestão. */
.sidebar-tier-block.tier-estrategico{border-left-color:var(--fase-decidir-claro)}
.sidebar-tier-block.tier-tatico{border-left-color:var(--fase-executar-claro)}
.sidebar-tier-block.tier-operacional{border-left-color:var(--fase-medir-claro)}

.sidebar-tier{
  font-size:var(--t-11);
  font-weight:var(--peso-display);
  letter-spacing:var(--tracking-etiqueta);
  color:#fff;
  border-radius:var(--raio-sm);
}
.sidebar-section{
  font-size:var(--t-11);
  font-weight:var(--peso-titulo);
  letter-spacing:var(--tracking-etiqueta);
  color:var(--menu-rotulo);
  border-radius:var(--raio-sm);
}
.sidebar-tier-sep{background:rgba(255,255,255,.16)}
.sidebar-user{border-top:1px solid rgba(255,255,255,.16)}
.sidebar-user .name{color:#fff}
.sidebar-user .email{color:var(--menu-rotulo)}
.sidebar-user .btn-secondary{
  background:rgba(255,255,255,.06);color:#D6DEE4;border-color:rgba(255,255,255,.16);
}
.sidebar-user .btn-secondary:hover{background:rgba(255,255,255,.13);color:#fff}
.sidebar-rail-toggle{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:var(--menu-texto);border-radius:var(--raio-sm);
}
.sidebar-rail-toggle:hover{background:rgba(255,255,255,.14);color:#fff}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26)}
.sidebar-backdrop{background:rgba(21,29,33,.6)}

/* ----------------------------------------------------------------------
   Barra superior e conteúdo
   ---------------------------------------------------------------------- */
.topbar{
  /* Sem backdrop-filter. O vidro embaça o que está atrás e, numa tela
     cheia de número, embaçar número é o oposto do que se quer. */
  background:var(--superficie);
  backdrop-filter:none;
  border-bottom:1px solid var(--borda);
  padding:14px var(--e-6);
}
.topbar h1{
  font-size:var(--t-17);
  font-weight:var(--peso-titulo);
  letter-spacing:var(--tracking-titulo);
}
.content{padding:var(--e-6) var(--e-6) var(--e-16);animation:none}
.sidebar-toggle{border-color:var(--borda-forte);background:var(--superficie);color:var(--texto-2);border-radius:var(--raio)}
.sidebar-toggle:hover{background:var(--superficie-2)}

/* ----------------------------------------------------------------------
   Indicadores (KPI)
   O número é o elemento da tela. Tudo mais é legenda dele.
   ---------------------------------------------------------------------- */
.stat-card{
  text-align:left;
  align-items:stretch;
  padding:var(--e-4) var(--e-5);
  overflow:visible;
  position:relative;
}
/* O ícone volta para o canto superior direito e fica em cinza.
   Entre o rótulo e o número ele separava o par que precisa ser lido
   junto — o rótulo diz o que é, o número diz quanto é, e nada deve
   entrar no meio dos dois. No canto ele identifica o cartão de relance
   sem disputar a leitura. */
.stat-card .icon-corner{
  position:absolute;
  top:var(--e-4);
  right:var(--e-5);
  margin:0;
  width:26px;height:26px;
  border-radius:var(--raio-sm);
  background:transparent;
  color:var(--texto-3);
  box-shadow:none;
  opacity:.7;
}
.stat-card .icon-corner svg{width:16px;height:16px}
.stat-card .label{
  text-align:left;
  font-size:var(--t-12);
  font-weight:var(--peso-forte);
  color:var(--texto-3);
  letter-spacing:var(--tracking-etiqueta);
  text-transform:uppercase;
  margin-bottom:var(--e-2);
  padding-right:var(--e-8);
}
.stat-card .value{
  font-family:var(--fonte-titulo);
  font-size:var(--t-28);
  font-weight:var(--peso-display);
  letter-spacing:var(--tracking-display);
  color:var(--texto);
  line-height:1.05;
  margin-top:0;
}
.stat-card .stat-sub,.stat-card .sub{
  text-align:left;font-size:var(--t-12);color:var(--texto-3);margin-top:var(--e-1);
}
/* O KPI que fala de dinheiro fica verde. Os outros, grafite. */
.stat-card.receita .value,.stat-card.money .value,.stat-card .value.receita{color:var(--receita)}
.stat-card.risco .value,.stat-card .value.risco{color:var(--perigo)}
.stat-card::after{display:none}

/* ----------------------------------------------------------------------
   Tabelas
   ---------------------------------------------------------------------- */
table.data{font-size:var(--t-13);border-collapse:collapse}
table.data th,table thead th{
  background:var(--superficie-2);
  color:var(--texto-3);
  font-size:var(--t-11);
  font-weight:var(--peso-titulo);
  letter-spacing:var(--tracking-etiqueta);
  text-transform:uppercase;
  padding:9px 12px;
  border-bottom:1px solid var(--borda);
  position:sticky;top:0;z-index:1;
}
table.data td{padding:10px 12px;border-bottom:1px solid var(--borda);color:var(--texto)}
table.data tbody tr:hover,table tbody tr:hover{background:var(--superficie-2)}
/* Toda coluna de número alinha à direita — regra de leitura de cifra. */
table.data td.num,table.data th.num,
table.data td.valor,table.data th.valor,
table td[data-num],table th[data-num]{text-align:right;font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------------
   Abas
   ---------------------------------------------------------------------- */
.tabs{border-bottom:1px solid var(--borda);gap:0;margin-bottom:var(--e-5)}
.tabs a{
  padding:9px 14px;font-size:var(--t-13);font-weight:var(--peso-forte);
  color:var(--texto-3);border-bottom:2px solid transparent;
}
.tabs a:hover{color:var(--texto)}
.tabs a.active{color:var(--acao-texto);border-color:var(--acao)}

.tab-pill{
  border-radius:var(--raio-sm);font-size:var(--t-13);font-weight:var(--peso-forte);
  color:var(--texto-2);background:transparent;border:1px solid transparent;
}
.tab-pill:hover{background:var(--superficie-3);color:var(--texto)}
.tab-pill.active{background:var(--acao);color:var(--texto-invertido);border-color:var(--acao)}
.tab-pills{background:var(--superficie-2);border-radius:var(--raio);padding:5px}

/* ----------------------------------------------------------------------
   Modais
   ---------------------------------------------------------------------- */
.modal-overlay{background:rgba(38,50,56,.5);backdrop-filter:none;animation:none;padding:var(--e-5)}
.modal-box{
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio-lg);
  box-shadow:var(--sombra-lg);
  padding:var(--e-5);
}
.modal-header h3{font-size:var(--t-17)}
.modal-close{color:var(--texto-3);border-radius:var(--raio-sm)}
.modal-close:hover{color:var(--texto);background:var(--superficie-3)}

/* ----------------------------------------------------------------------
   Kanban e cartões de fluxo
   ---------------------------------------------------------------------- */
.kanban-col{background:var(--superficie-2);border:1px solid var(--borda);border-radius:var(--raio-lg)}
.kanban-card,.demand-card,.ticket-card{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:none;
}

/* ----------------------------------------------------------------------
   Estado vazio
   Sem ilustração e sem ícone gigante. Uma frase que diz o que fazer.
   ---------------------------------------------------------------------- */
.empty-state{
  padding:var(--e-12) var(--e-5);
  text-align:center;
  color:var(--texto-3);
  font-size:var(--t-14);
  background:var(--superficie-2);
  border:1px dashed var(--borda-forte);
  border-radius:var(--raio-lg);
}
.empty-state::before{display:none}
.empty-state strong{display:block;color:var(--texto);font-size:var(--t-15);margin-bottom:var(--e-1);font-family:var(--fonte-titulo)}

/* ----------------------------------------------------------------------
   Cabeçalho de página e cartão de módulo
   ---------------------------------------------------------------------- */
.page-hero{
  background:var(--superficie);
  border:1px solid var(--borda);
  border-left:3px solid var(--acao);
  border-radius:var(--raio-lg);
  padding:var(--e-4) var(--e-5);
  box-shadow:none;
}
.page-hero h2{font-size:var(--t-20);margin-bottom:2px}
.page-hero p{color:var(--texto-3);font-size:var(--t-13)}

.module-card{border-radius:var(--raio-lg)}
.module-card-icon,.module-card .icon{box-shadow:none;border-radius:var(--raio)}

/* ----------------------------------------------------------------------
   Faixa de licença
   ---------------------------------------------------------------------- */
.trial-banner{
  background:var(--alerta-suave);
  color:var(--alerta);
  border:1px solid var(--alerta-forte);
  border-left-width:3px;
  border-radius:var(--raio);
  padding:11px var(--e-4);
  font-size:var(--t-13);
}
.trial-banner .btn-secondary{
  background:var(--superficie);color:var(--alerta);border-color:var(--alerta-forte);
}
.trial-banner .btn-secondary:hover{background:var(--alerta-suave)}
.trial-expired-wrap .icon{background:var(--alerta-forte);color:var(--tinta);border-radius:var(--raio-lg)}

/* ----------------------------------------------------------------------
   Marca
   ---------------------------------------------------------------------- */
.brand{font-family:var(--fonte-titulo);font-weight:var(--peso-display);letter-spacing:var(--tracking-titulo)}
.brand-mark{
  /* Antes: gradiente roxo→índigo→verde com sombra colorida. Agora: o
     Azul Estratégico chapado. Uma marca não precisa de três cores para
     caber num quadrado de 32px. */
  background:var(--azul-700);
  color:#fff;
  border-radius:8px;
  box-shadow:none;
  font-family:var(--fonte-titulo);
  font-weight:var(--peso-display);
  letter-spacing:-0.04em;
}
.sidebar-brand .brand-mark{background:var(--branco);color:var(--azul-700);box-shadow:none}
/* Mesma inversão sobre qualquer fundo escuro: o Azul Estratégico chapado
   sobre a superfície escura quase não se separa dela, e a assinatura é a
   primeira coisa que a pessoa vê na tela de entrar. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .brand-mark{background:var(--branco);color:var(--azul-700)}
}
:root[data-tema="escuro"] .brand-mark{background:var(--branco);color:var(--azul-700)}
/* No painel azul do login ela também precisa inverter, nos dois temas. */
.auth-illustration .brand-mark{background:var(--branco);color:var(--azul-700)}
.brand .dot{background:var(--verde-500);box-shadow:none}

/* ----------------------------------------------------------------------
   Landing
   ---------------------------------------------------------------------- */
.nav{background:var(--superficie);backdrop-filter:none;border-bottom:1px solid var(--borda)}
.nav-links a.navtext{color:var(--texto-2);font-size:var(--t-13)}
.nav-links a.navtext:hover{color:var(--acao-texto)}

.hero{
  /* Sem blobs desfocados, sem grade, sem radial. Um fundo gelo e o
     texto. A promessa é o que precisa aparecer. */
  background:var(--canvas);
  padding:var(--e-16) var(--e-6) var(--e-12);
}
.hero-grid,.hero-blob{display:none}
.hero h1{
  font-size:var(--t-44);
  font-weight:var(--peso-display);
  letter-spacing:var(--tracking-display);
  line-height:1.08;
  color:var(--texto);
}
/* O título gradiente virou cor sólida. Texto com gradiente perde
   contraste no meio do degradê e não é auditável. */
.hero h1 .grad{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--acao-texto);
}
.hero p{color:var(--texto-2);font-size:var(--t-17)}
.hero-kicker{
  background:var(--superficie);border:1px solid var(--borda);
  color:var(--acao-texto);border-radius:var(--raio-pill);box-shadow:none;font-size:var(--t-12);
}
.hero-kicker .pip{background:var(--verde-500);animation:none}
.hero-trust{color:var(--texto-3);font-size:var(--t-12)}
.hero-trust svg{color:var(--verde-500)}

/* ----------------------------------------------------------------------
   Gráficos
   ---------------------------------------------------------------------- */
.card canvas{border-radius:var(--raio-sm)}

/* ----------------------------------------------------------------------
   Resquícios do sistema anterior
   Estas regras desarmam efeitos que estavam escritos direto na marcação
   das páginas e que o resto deste arquivo não alcança por seletor.
   ---------------------------------------------------------------------- */
[class*="backdrop-blur"]{backdrop-filter:none!important}
.float,.float-slow{animation:none}
.reveal{opacity:1;transform:none;transition:none}

/* ----------------------------------------------------------------------
   Impressão
   Este produto gera relatório para cliente. Ele precisa sair limpo.
   ---------------------------------------------------------------------- */
@media print{
  .sidebar,.topbar,.sidebar-backdrop,.no-print,.trial-banner{display:none!important}
  body{background:#fff}
  .content{padding:0}
  .card{border:1px solid #D6DEE4;box-shadow:none;break-inside:avoid}
  .page-break{break-after:page}
}

/* ----------------------------------------------------------------------
   Movimento reduzido
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ======================================================================
   SOBRAS DO SISTEMA ANTERIOR
   ----------------------------------------------------------------------
   O style.css tem 94 seletores com gradiente. 55 deles usam só variáveis
   e já herdaram o azul novo automaticamente pela troca em tokens.css.

   Os 37 abaixo tinham hex fixo (#4f46e5, #7c3aed, #db2777, #e11d48 …) e
   NÃO herdavam nada: sem esta seção, o índigo e o rosa do sistema antigo
   continuariam aparecendo em 37 pontos do produto, lado a lado com o
   azul novo. É o defeito clássico de rebrand feito só na variável.

   Todos viram cor chapada da paleta aprovada.
   ====================================================================== */

/* Ícones de módulo. Eram oito gradientes; viram oito cores chapadas que
   continuam distinguindo os módulos entre si, agora dentro da marca. */
.icon-grad-1{background:var(--azul-700)}
.icon-grad-2{background:var(--azul-500)}
.icon-grad-3{background:var(--verde-600)}
.icon-grad-4{background:var(--alerta-forte);color:var(--tinta)}
.icon-grad-5{background:var(--risco-600)}
.icon-grad-6{background:var(--azul-800)}
.icon-grad-7{background:var(--turq-500)}
.icon-grad-8{background:var(--grafite-700)}

/* Âmbar preenchido SEMPRE leva tinta grafite, nunca branco.
   Branco sobre #F59E0B dá 2,1:1 e sobre #C87F05 dá 3,23:1 — os dois
   reprovam. Grafite sobre o âmbar dá 6,13:1. Os cinco seletores abaixo
   herdavam color:#fff do style.css; por isso cada um redeclara a tinta.

   PDCA. O ciclo já era de quatro fases — agora usa exatamente as quatro
   cores do Método, na mesma ordem. Planejar/Decidir, Fazer/Executar,
   Checar/Medir, Agir/Governar. A pessoa aprende a cor uma vez só. */
.pdca-quad.plan{background:var(--fase-decidir)}
.pdca-quad.do{background:var(--alerta-forte);color:var(--tinta)}
.pdca-quad.check{background:var(--fase-medir)}
.pdca-quad.act{background:var(--fase-governar)}

/* Pontos de contato — o funil e o ciclo de vida do cliente.
   Topo do funil é o azul mais claro e vai escurecendo até a decisão;
   pós-venda entra no verde, que é a cor de receita em todo o produto. */
.tp-hero{background:var(--azul-800)}
.tp-shape-tofu{background:var(--azul-300)}
.tp-shape-mofu_a{background:var(--azul-400)}
.tp-shape-mofu_b{background:var(--azul-500)}
.tp-shape-bofu_a{background:var(--alerta-forte);color:var(--tinta)}
.tp-shape-bofu_b{background:var(--verde-600)}
.tp-shape-onboarding{background:var(--turq-500)}
.tp-shape-adocao{background:var(--verde-500)}
.tp-shape-expansao{background:var(--verde-700)}

/* Chat-bot — o cabeçalho de cada tipo de nó. */
.chatbot-node-encaminhar .chatbot-node-header{background:var(--alerta-forte);color:var(--tinta)}
.chatbot-node-encerrar .chatbot-node-header{background:var(--perigo-forte)}

/* Atendimento via WhatsApp. */
.wa-stat-card.wa-stat-waiting .wa-stat-icon{background:var(--alerta-forte);color:var(--tinta)}
.wa-stat-card.wa-stat-closed .wa-stat-icon{background:var(--verde-600)}

/* Expressão da marca — a capa do relatório entregue ao cliente.
   Era azul→roxo→rosa. Vira o Azul Estratégico chapado: é a peça que o
   cliente do seu cliente vê, e ela precisa parecer documento, não banner. */
.bc-hero{background:var(--azul-700)}
.bc-progress-fill.full{background:var(--verde-600)}
.bp-funnel-head{background:var(--acao-suave)}
.dh-funnel-bar{background:rgba(255,255,255,.9)}
.dh-brand-underline{background:rgba(255,255,255,.55)}

/* Diversos. */
.modal-icon{background:var(--acao)}
.sdr-score-fill{background:var(--verde-600)}
.fishbone-head{background:var(--azul-700)}
.why-step.root .dot{background:var(--turq-500)}
.wizard-step-dot.active{background:var(--acao-suave)}
.geo-map{background:var(--superficie-2)}
.geo-stat-card{background:var(--grafite-900)}
/* .flow-illustration é um painel decorativo claro na landing — ali o
   fundo gelo serve. */
.flow-illustration{background:var(--canvas)}

/* .auth-illustration NÃO. É o painel direito do login, e tudo dentro
   dele é branco: título, texto, as pílulas e o cartão de prévia. Com
   fundo claro o conteúdo inteiro desaparecia — foi o que aconteceu na
   primeira versão desta entrega.

   Era um degradê índigo→violeta→verde. Agora é o Azul Estratégico
   chapado: escuro o bastante para o branco funcionar (8,86:1), e é a
   primeira tela que a pessoa vê ao entrar no produto — o lugar onde a
   cor institucional deve aparecer inteira. */
.auth-illustration{
  background:var(--azul-700);
  position:relative;
}
/* Sem grade de linhas e sem círculos borrados flutuando: o painel tem
   texto, três pílulas e um cartão de prévia. Já tem o que mostrar. */
.auth-illustration::before{display:none}
.auth-illustration .float-shape{display:none}
.auth-illustration h2{
  color:#fff;
  font-family:var(--fonte-titulo);
  font-size:var(--t-28);
  letter-spacing:var(--tracking-display);
  line-height:1.15;
}
.auth-illustration p{color:rgba(255,255,255,.82);font-size:var(--t-14)}
.auth-illustration .badges span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--raio-pill);
  color:#fff;
  font-size:var(--t-13);
}
.auth-illustration .mini-preview{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--raio-lg);
  backdrop-filter:none;
  animation:none;
  opacity:1;
  transform:none;
}
.auth-illustration .mini-preview .row span{color:#fff}
.auth-illustration .mini-preview .row .bar-fill{background:rgba(255,255,255,.20)}
.auth-illustration .mini-preview .row .bar-fill i{background:#fff}

/* O cartão do formulário, do lado claro. */
.auth-form-box{animation:none}
/* Faixa de licença vencendo: vermelho chapado é a única exceção em que
   o produto grita, e ela é intencional. */
.trial-banner-urgent{background:var(--perigo-forte);color:#fff;border-color:var(--perigo-forte)}

/* A capa do relatório também é impressa. Sem isto o !important do
   style.css devolve o gradiente rosa só no PDF. */
@media print{
  .bc-hero{background:var(--azul-700)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}


/* ======================================================================
   COMPONENTES QUE SÓ EXISTIAM NA CAMADA ANTIGA
   ----------------------------------------------------------------------
   Correção de uma regressão desta entrega.

   O theme-v75.css não era só uma camada de tema: ele era a ÚNICA
   definição de 53 classes que nenhuma outra folha declarava — a família
   .tpa-* inteira (Automação de Pontos de Contato), o painel
   .diag-summary do cabeçalho do Diagnóstico e as pílulas .tab-pill.

   Ao substituir aquele arquivo, esses componentes perderam layout e
   viraram texto empilhado na tela. As regras abaixo são as originais,
   portadas: a estrutura é a mesma, as cores agora saem dos tokens, o
   brilho índigo virou sombra neutra e nada levita.

   Lição para quem mexer depois: antes de aposentar uma folha de estilo,
   verificar o que ela define SOZINHA — não o que ela sobrescreve.
   ====================================================================== */
.diag-summary{display:flex; align-items:center; gap:26px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:14px 22px;}
.diag-summary-item{padding-left:14px; border-left:3px solid var(--accent, var(--slate-300)); min-width:118px;}
.diag-summary-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--slate-500); font-weight:650; margin-bottom:3px;}
.diag-summary-value{font-size:23px; font-weight:750; line-height:1.15; letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.diag-summary-sub{font-size:11.5px;color:var(--slate-500);margin-top:2px}
.diag-summary-cta{margin-left:auto}
.tpa-section-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px;}
.tpa-run-card{border-left:3px solid var(--brand-400)}
.tpa-run-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px;}
.tpa-run-name{font-size:14.5px;font-weight:750;color:var(--slate-800)}
.tpa-run-sub{font-size:12px;color:var(--slate-500);margin-top:1px}
.tpa-run-head-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tpa-stepper{display:flex; align-items:flex-start; gap:0; margin:6px 0 18px; overflow-x:auto; padding-bottom:2px;}
.tpa-step{display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:88px;}
.tpa-step-node{width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:750; background:var(--slate-100); color:var(--slate-400); border:2px solid var(--slate-200); transition:background .2s ease, color .2s ease, border-color .2s ease;}
.tpa-step-label{font-size:10.5px; font-weight:600; color:var(--slate-500); text-align:center; line-height:1.25;}
.tpa-step.is-done .tpa-step-node{background:var(--emerald-500); border-color:var(--emerald-500); color:#fff;}
.tpa-step.is-done .tpa-step-label{color:var(--slate-700)}
.tpa-step.is-active .tpa-step-node{background:var(--acao); border-color:transparent; color:#fff; animation:tpaPulse 1.7s ease-out infinite;}
.tpa-step.is-active .tpa-step-label{color:var(--brand-600);font-weight:750}
.tpa-step-phase-divider{display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:30px; margin:0 2px;}
.tpa-step-phase-divider .bar{width:0;height:32px;border-left:2px dashed var(--slate-300);margin-top:1px}
.tpa-step-phase-divider .lbl{font-size:8px; font-weight:700; color:var(--slate-400); text-transform:uppercase; letter-spacing:.02em; margin-top:4px; text-align:center; line-height:1.2;}
.tpa-step-line{flex-shrink:0; width:34px; height:3px; margin-top:15px; border-radius:2px; background:var(--slate-200); position:relative; overflow:hidden;}
.tpa-step-line.is-energized{background:repeating-linear-gradient(-45deg, var(--emerald-500) 0 6px, var(--verde-300) 6px 12px); background-size:200% 100%; animation:tpaFlow 1s linear infinite;}
.tpa-stage-panel{border-top:1px solid var(--slate-200); padding-top:14px; margin-top:4px;}
.tpa-stage-panel-head strong{font-size:13.5px;color:var(--slate-800)}
.tpa-stage-panel-head p{font-size:12px;color:var(--slate-500);margin:2px 0 12px}
.tpa-mode-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tpa-mode-btn{font-size:12.5px; font-weight:650; padding:7px 14px; border-radius:999px; border:1px solid var(--slate-200); background:#fff; color:var(--slate-600); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;}
.tpa-mode-btn:hover{background:var(--slate-50)}
.tpa-mode-btn.is-active{background:var(--acao); border-color:transparent; color:#fff; box-shadow:var(--sombra-sm);}
.tpa-checklist{display:flex;flex-direction:column;gap:7px}
.tpa-checklist-item{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--slate-700); background:var(--slate-50); border:1px solid var(--slate-100); border-radius:10px; padding:9px 12px; cursor:pointer;}
.tpa-checklist-item input{accent-color:var(--brand-600)}
.tpa-history{margin-top:16px; padding-top:14px; border-top:1px dashed var(--slate-200); display:flex; flex-direction:column; gap:10px;}
.tpa-history-item{background:var(--slate-50); border-radius:12px; padding:11px 14px;}
.tpa-history-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--slate-800);}
.tpa-history-meta{font-size:11px;color:var(--slate-500);font-weight:500}
.tpa-history-script{font-size:12.5px; font-style:italic; color:var(--slate-700); margin:6px 0 0; line-height:1.5;}
.tpa-history-dados{font-size:12px;color:var(--slate-600);margin:6px 0 0;line-height:1.5}
.tpa-temp,.tpa-sentimento{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:650; padding:3px 9px; border-radius:999px; margin:8px 6px 0 0;}
.tpa-temp-frio{background:var(--acao-suave);color:var(--acao-texto)}
.tpa-temp-morno{background:var(--amber-50);color:var(--amber-500)}
.tpa-temp-quente{background:var(--rose-50);color:var(--rose-500)}
.tpa-sentimento{background:var(--slate-100);color:var(--slate-600)}
.tpa-retorno{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:650; padding:3px 9px; border-radius:999px; margin:8px 6px 0 0;}
.tpa-retorno-avancar{background:var(--emerald-50);color:var(--emerald-500)}
.tpa-retorno-neutro{background:var(--slate-100);color:var(--slate-600)}
.tpa-retorno-objecao{background:var(--amber-50);color:var(--amber-500)}
.tpa-retorno-sem_retorno{background:var(--slate-100);color:var(--slate-400)}
.tpa-edit-toggle{margin-top:10px}
.tpa-edit-toggle > summary{cursor:pointer; font-size:11px; font-weight:650; color:var(--brand-600); list-style:none; display:inline-block;}
.tpa-edit-toggle > summary::-webkit-details-marker{display:none}
.tpa-edit-toggle[open] > summary{margin-bottom:8px}
.tpa-edit-form{background:#fff; border:1px solid var(--slate-200); border-radius:10px; padding:10px 12px;}
.tpa-ref-block{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; background:var(--slate-50); border:1px solid var(--slate-100); border-radius:12px; padding:12px 14px; margin-bottom:14px;}
.tpa-ref-label{display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-500); margin-bottom:2px;}
.tpa-ref-item p{font-size:12px;color:var(--slate-700);line-height:1.5;margin:0}
.tpa-concluded{margin-top:18px}
.tpa-concluded > summary{cursor:pointer; font-size:13px; font-weight:650; color:var(--brand-600); padding:10px 0; list-style:none;}
.tpa-concluded > summary::-webkit-details-marker{display:none}
.tpa-concluded > summary::before{content:'▸ ';display:inline-block;transition:transform .15s ease}
.tpa-concluded[open] > summary::before{transform:rotate(90deg)}
.tpa-concluded[open] > summary{margin-bottom:10px}
.tp-band{position:relative}
.tp-band-energy{position:absolute; left:0; right:0; bottom:0; height:5px; border-radius:0 0 10px 10px; background:transparent; overflow:hidden;}
.tp-band-energy.is-energized{background:linear-gradient(90deg, rgba(16,185,129,.16), rgba(16,185,129,.16));}
.tp-band-energy.is-energized::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0%, transparent 38%, var(--verde-300) 46%, var(--receita-suave) 50%, var(--verde-300) 54%, transparent 62%, transparent 100%); background-size:280% 100%; filter:drop-shadow(0 0 4px rgba(16,185,129,.7)); animation:tpEnergyBeam 2.4s linear infinite;}
.tp-band.has-active{animation:tpBandPulse 2.2s ease-out infinite}
.tp-band-kpi{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px;}
.tp-band-kpi-chip{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:650; padding:3px 8px; border-radius:999px; background:var(--slate-100); color:var(--slate-600); white-space:nowrap;}
.tp-band-kpi-chip.is-active{background:var(--emerald-50);color:var(--emerald-500)}
.tp-band-kpi-chip.is-hot{background:var(--rose-50);color:var(--rose-500)}
.tp-band-kpi-chip.is-warn{background:var(--amber-50);color:var(--amber-500)}

/* ======================================================================
   .stat-card SEM .card
   ----------------------------------------------------------------------
   Defeito antigo, não regressão: no style.css o .stat-card só define
   espaçamento e alinhamento — fundo, borda e raio vinham de .card, que
   precisava ser escrito junto. Nas telas onde alguém escreveu só
   class="stat-card" (a lista de Diagnósticos é uma delas, com os
   contadores dentro de um <a>), os números ficavam soltos no fundo da
   página, sem cartão nenhum.

   Aqui o .stat-card passa a se bastar. Onde ele já vem com .card os
   valores são os mesmos, então nada muda.
   ====================================================================== */
.stat-card{
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio-lg);
  box-shadow:var(--sombra-sm);
}
/* Contadores clicáveis: o cartão inteiro é o alvo do clique. */
a.stat-card{
  text-decoration:none;
  color:inherit;
  transition:border-color var(--rapido) var(--ease),
             background-color var(--rapido) var(--ease);
}
a.stat-card:hover{border-color:var(--borda-forte);background:var(--superficie-2)}

/* Alguns .stat-card trazem <div> sem classe em vez de .label e .value —
   o tamanho vem escrito no próprio elemento e a folha não alcança. O que
   dá para corrigir daqui é o essencial: o número em Manrope, com numeral
   tabular, para não destoar dos KPIs que usam as classes certas. */
.stat-card > div:not([class]) + div:not([class]){
  font-family:var(--fonte-titulo);
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--tracking-display);
  line-height:1.1;
  color:var(--texto);
}

/* ----------------------------------------------------------------------
   Correção da correção: dez regras acima pertenciam a @media e foram
   parar no escopo global na primeira passagem — layout de celular
   valendo no desktop, e por isso o botão do Plano de Crescimento
   esticava a largura toda. Devolvidas às suas condições.
   ---------------------------------------------------------------------- */
@media (max-width:640px){
  .diag-summary{padding:14px 18px}
  .diag-summary-cta{margin-left:0;width:100%;text-align:center}
  .tpa-stepper{gap:0}
  .tpa-step{width:70px}
  .tpa-step-label{font-size:9.5px}
  .tpa-step-line{width:20px}
  .tpa-ref-block{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tpa-step-line.is-energized,.tpa-step.is-active .tpa-step-node{animation:none}
  .tp-band-energy.is-energized::after,.tp-band.has-active{animation:none}
  .tp-band-energy.is-energized{background:var(--receita-suave)}
}

/* ----------------------------------------------------------------------
   Pílulas de aba
   .tab-pill também só existia no theme-v75.css. As regras que eu tinha
   escrito trocavam cor e raio, mas nenhuma dava display, padding ou
   quebra — sem isso os 14 rótulos do Diagnóstico viravam uma frase
   corrida. Aqui vai a estrutura que faltava.
   ---------------------------------------------------------------------- */
.tab-pills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  background:var(--superficie-2);
  border-radius:var(--raio);
}
.tab-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 13px;
  border-radius:var(--raio-pill);
  font-size:var(--t-13);
  font-weight:var(--peso-medio);
  color:var(--texto-2);
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background-color var(--rapido) var(--ease),
             color var(--rapido) var(--ease);
}
.tab-pill:hover{background:var(--superficie-3);color:var(--texto)}
.tab-pill.active{
  background:var(--acao);
  color:var(--texto-invertido);
  border-color:var(--acao);
  font-weight:var(--peso-forte);
  box-shadow:none;
}

/* ======================================================================
   PONTE PARA O SISTEMA LEGADO
   ----------------------------------------------------------------------
   O mapa que faz as 190+ páginas herdarem o rebrand sem serem editadas.

   Duas coisas que este bloco precisou aprender na prática:

   1. Ele tem que morar AQUI, não no tokens.css. O style.css declara o
      próprio :root com a paleta antiga inteira; carregando depois dele,
      vencia qualquer redefinição feita antes. Aqui, por último, vence.

   2. Cada token aponta para um PAPEL (que vira com o tema), não para um
      degrau fixo da escala. Foi o erro da primeira versão: --slate-500
      apontava para o cinza claro fixo, e no tema escuro os 604 pontos
      que o usam como texto ficavam escuros sobre fundo escuro.

   O destino de cada um foi decidido por varredura do uso real no
   código — a contagem está ao lado. Onde texto e preenchimento
   disputam, texto ganha: um preenchimento fora do tom é feio, texto
   sem contraste é ilegível.
   ====================================================================== */
:root{

  /* ---- Neutros: a troca de maior alcance do rebrand ---- */
  --slate-50:var(--superficie-2);    /* 72 fundos            */
  --slate-100:var(--superficie-3);   /* 137 bordas, 46 fundos — serve aos dois */
  --slate-200:var(--borda);          /* 205 bordas           */
  --slate-300:var(--borda-forte);
  --slate-400:var(--texto-3);        /* 200 textos           */
  --slate-500:var(--texto-3);        /* 604 textos — o token mais usado do sistema */
  --slate-600:var(--texto-2);        /* 129 textos           */
  --slate-700:var(--texto-2);        /* 101 textos           */
  --slate-800:var(--texto);          /* 37 textos            */
  --slate-900:var(--texto);          /* 8 textos, 12 fundos  */

  /* ---- Azul da marca. Era índigo (#4f46e5). ---- */
  --brand-50:var(--acao-suave);      /* 37 fundos            */
  --brand-100:var(--acao-suave);
  --brand-200:var(--acao-contorno);  /* estava em uso e nunca foi definida */
  --brand-300:var(--acao-contorno);  /* estava em uso e nunca foi definida */
  --brand-400:var(--acao);
  --brand-500:var(--acao);           /* 22 fundos, 17 bordas */
  --brand-600:var(--acao-texto);     /* 50 textos            */
  --brand-700:var(--acao-texto);     /* 34 textos            */
  --brand-900:var(--azul-900);

  /* ---- Verde. --accent-* e --emerald-* sempre foram o mesmo verde. ---- */
  --accent:var(--receita);           /* estava em uso e nunca foi definida */
  --accent-400:var(--receita);
  --accent-500:var(--receita-forte); /* 11 fundos            */
  --accent-600:var(--receita);
  --emerald-50:var(--receita-suave); /* 11 fundos            */
  --emerald-500:var(--receita);      /* 22 textos            */

  /* ---- Roxo sai de cena: era o segundo tom do gradiente dos botões. ---- */
  --violet-100:var(--acao-suave);    /* estava em uso e nunca foi definida */
  --violet-500:var(--acao);
  --violet-600:var(--acao);          /* 38 fundos            */

  --indigo-50:var(--acao-suave);
  --indigo-500:var(--acao);

  /* ---- Vermelho de risco. ---- */
  --rose-50:var(--perigo-suave);     /* 13 fundos            */
  --rose-100:var(--perigo-suave);
  --rose-300:var(--perigo);          /* estava em uso e nunca foi definida */
  --rose-500:var(--perigo);          /* 18 textos            */
  --rose-600:var(--perigo);          /* estava em uso e nunca foi definida */
  --red-600:var(--perigo);           /* estava em uso e nunca foi definida */

  /* ---- Âmbar de oportunidade. ---- */
  --amber-50:var(--alerta-suave);
  --amber-500:var(--alerta-forte);   /* 8 bordas, 4 fundos   */
  --amber-700:var(--alerta);         /* estava em uso e nunca foi definida */

  /* ---- Estrutura. ---- */
  --radius:var(--raio);
  --radius-lg:var(--raio-lg);
  --shadow-sm:var(--sombra-sm);
  --shadow-md:var(--sombra-md);
  --shadow-lg:var(--sombra-lg);
  --shadow-glow:var(--sombra-md);    /* o brilho colorido foi aposentado */
  --font-sans:var(--fonte-ui);
  --font-display:var(--fonte-titulo);
  --surface:var(--superficie);

  /* Gradientes da camada anterior viraram cor chapada: gradiente em
     elemento pequeno só suja a leitura do número, que é o que importa. */
  --money-grad:var(--receita-forte);
  --focus-grad:var(--acao);
  --alert-grad:var(--alerta-forte);
  --info-grad:var(--info-forte);

  /* Palavras soltas em português, usadas por duas telas que carregavam
     paleta própria (plano-crescimento.php e diagnostico-formulario.php). */
  --azul:var(--acao-texto);
  --azul-profundo:var(--azul-900);
  --azul-estrategico:var(--acao-texto);
  --grafite:var(--texto);
  --cinza:var(--texto-3);
  --linha:var(--borda);
  --gelo:var(--superficie-2);
  /* --laranja aparece nos dois papéis ao mesmo tempo nessas telas:
     preenchimento de botão com branco por cima, e cor de texto sobre
     branco. Precisa de um degrau que sirva aos dois — 5,67:1 em ambos. */
  --laranja:var(--ambar-700);
  --ambar:var(--alerta-forte);
  --turquesa:var(--info-forte);
  --verde:var(--receita);
  --vermelho:var(--perigo);
}

/* ======================================================================
   FORMA NOVA — linguagem trazida das três referências
   ----------------------------------------------------------------------
   Hotscool, Daazle Education SaaS e mLabs Workflow. O que foi adotado é
   a FORMA; a cor continua sendo a paleta aprovada. Foi a escolha do
   cliente entre puxar o azul saturado das referências ou manter o Azul
   Estratégico — ficou o Azul Estratégico.

   O que veio de lá:
     · canto mais generoso (as três trabalham bem acima do que eu tinha)
     · tile de ícone em tint claro com o ícone saturado, no lugar de
       fundo chapado com ícone branco
     · barra de ferramentas de página: contexto à esquerda, controles à
       direita, uma única ação primária  (mLabs Workflow)
     · controle segmentado para alternar modo de visão   (mLabs Workflow)

   O que NÃO veio: o azul saturado do Daazle, o navy de marketing do
   Hotscool e o laranja do mLabs. São marcas deles, não desta.
   ====================================================================== */

/* --------------------------------------------------- tiles de ícone ---
   O padrão das três referências. Antes era fundo saturado com ícone
   branco, que rouba atenção do número ao lado; o tint dá a mesma área de
   cor com uma fração do peso visual. */
.stat-card .icon-corner,
.module-card-icon,.module-card .icon,
.icon-grad-1,.icon-grad-2,.icon-grad-3,.icon-grad-4,
.icon-grad-5,.icon-grad-6,.icon-grad-7,.icon-grad-8{
  border-radius:var(--raio);
  box-shadow:none;
  display:flex;align-items:center;justify-content:center;
}
.icon-grad-1{background:var(--tile-acao-fundo);color:var(--tile-acao-icone)}
.icon-grad-2{background:var(--tile-info-fundo);color:var(--tile-info-icone)}
.icon-grad-3{background:var(--tile-receita-fundo);color:var(--tile-receita-icone)}
.icon-grad-4{background:var(--tile-alerta-fundo);color:var(--tile-alerta-icone)}
.icon-grad-5{background:var(--tile-perigo-fundo);color:var(--tile-perigo-icone)}
.icon-grad-6{background:var(--tile-acao-fundo);color:var(--tile-acao-icone)}
.icon-grad-7{background:var(--tile-info-fundo);color:var(--tile-info-icone)}
.icon-grad-8{background:var(--tile-neutro-fundo);color:var(--tile-neutro-icone)}

.stat-card .icon-corner{
  background:var(--tile-neutro-fundo);
  color:var(--tile-neutro-icone);
  opacity:1;
}
.stat-card.receita .icon-corner{background:var(--tile-receita-fundo);color:var(--tile-receita-icone)}
.stat-card.risco .icon-corner{background:var(--tile-perigo-fundo);color:var(--tile-perigo-icone)}

/* ------------------------------------------ barra de ferramentas ---
   O cabeçalho de página do mLabs Workflow: à esquerda o que a tela é e
   em que contexto está; à direita como olhar e a ação. Uma pessoa que
   aprende essa faixa numa tela sabe operar as outras 110. */
.page-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--e-4);
  flex-wrap:wrap;
  border-left-width:1px;
  border-radius:var(--raio-lg);
  padding:var(--e-4) var(--e-5);
}
.page-hero > *{min-width:0}
.page-hero h2{font-size:var(--t-20);margin:0 0 2px}
.page-hero p{margin:0}
.page-hero .acoes,.page-hero .toolbar-acoes{margin-left:auto}

/* -------------------------------------------- controle segmentado ---
   Alternar entre quadro e lista, período, filtro rápido. Vive dentro de
   um poço para ler como um controle só, e não como três botões soltos. */
.tab-pills{
  background:var(--superficie-3);
  border-radius:var(--raio);
  padding:4px;
  display:inline-flex;
  gap:2px;
  flex-wrap:wrap;
}
.tab-pill{
  border-radius:var(--raio-sm);
  padding:6px 13px;
  font-size:var(--t-13);
  font-weight:var(--peso-forte);
  color:var(--texto-2);
  background:transparent;
  border:1px solid transparent;
}
.tab-pill:hover{background:var(--superficie);color:var(--texto)}
.tab-pill.active{
  background:var(--superficie);
  color:var(--acao-texto);
  border-color:var(--borda);
  box-shadow:var(--sombra-sm);
}

/* ======================================================================
   NAVEGAÇÃO
   ----------------------------------------------------------------------
   Estilos da camada que o evoluti-navegacao.js injeta. Todos os pares de
   cor daqui foram medidos sobre a barra azul (#0C3D68) — ver
   validar-contraste.py, seção "navegação".
   ====================================================================== */

/* ------------------------------------------------ busca no menu --- */
.ev-busca{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--e-2);
  margin:0 var(--e-1) var(--e-3);
  padding:0 10px;
  height:36px;
  /* Preenchimento sozinho não separa o campo da barra — o branco a 10%
     dá só 1,32:1 contra o azul. Por isso a borda explícita: ela leva o
     conjunto a 4,03:1 e o campo se anuncia como campo. */
  background:var(--menu-campo);
  border:1px solid var(--menu-campo-borda);
  border-radius:var(--raio);
}
.ev-busca-lupa{width:15px;height:15px;flex-shrink:0;color:var(--menu-campo-dica)}
.ev-busca-campo{
  flex:1;min-width:0;
  background:none;border:none;outline:none;
  color:#FFFFFF;
  font-family:inherit;font-size:var(--t-13);
  padding:0;
}
.ev-busca-campo::placeholder{color:var(--menu-campo-dica);opacity:1}
.ev-busca-campo::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.ev-busca:focus-within{border-color:#FFFFFF;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.ev-busca-tecla{
  flex-shrink:0;
  font-family:inherit;font-size:10px;font-weight:var(--peso-titulo);
  letter-spacing:.04em;
  color:var(--menu-campo-dica);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  border-radius:5px;
  padding:2px 6px;
  cursor:pointer;
}
.ev-busca-tecla:hover{color:#fff;background:rgba(255,255,255,.22)}

.ev-sem-resultado{
  color:var(--menu-campo-dica);font-size:var(--t-13);
  padding:var(--e-5) var(--e-3);text-align:center;line-height:1.5;
}

/* O atributo hidden só traz display:none da folha do navegador, que
   perde para qualquer display declarado numa folha do site. Como
   .navlink é display:flex e .ev-atalhos também, sem estas duas linhas
   o filtro marca os itens como escondidos e eles continuam na tela.
   É o motivo de a busca "funcionar" e não filtrar nada. */
.sidebar a.navlink[hidden],
.ev-atalhos[hidden],
.sidebar-group[hidden],
.sidebar-tier-block[hidden]{display:none}

/* Enquanto filtra, os cabeçalhos recolhidos precisam abrir — senão o
   resultado existe mas fica escondido dentro de um grupo fechado. */
.sidebar.ev-filtrando .sidebar-collapsible{grid-template-rows:1fr}
.sidebar.ev-filtrando .ev-atalhos{display:none}

/* ------------------------------------------- fixados e recentes --- */
.ev-atalhos{display:flex;flex-direction:column;gap:1px;margin-bottom:var(--e-3)}
.ev-atalhos[hidden]{display:none}
.ev-atalhos-titulo{
  font-size:var(--t-11);
  font-weight:var(--peso-titulo);
  letter-spacing:var(--tracking-etiqueta);
  text-transform:uppercase;
  color:var(--menu-rotulo);
  padding:10px 12px 5px 13px;
}
.ev-atalho{
  display:flex;align-items:center;gap:10px;
  padding:7px 11px;
  border-radius:var(--raio-sm);
  color:var(--menu-texto);
  font-size:var(--t-13);
  font-weight:var(--peso-medio);
  transition:background-color var(--rapido) var(--ease),color var(--rapido) var(--ease);
}
.ev-atalho svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.ev-atalho:hover{background:rgba(255,255,255,.08);color:#fff}
.ev-atalho.ativo{background:var(--menu-ativo);color:var(--menu-ativo-tinta);font-weight:var(--peso-forte)}
.ev-atalho.ativo svg{opacity:1}
.ev-atalho-rotulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-atalho-tirar{
  flex-shrink:0;width:18px;height:18px;line-height:1;
  background:none;border:none;cursor:pointer;
  color:inherit;opacity:.5;font-size:15px;border-radius:4px;
}
.ev-atalho-tirar:hover{opacity:1;background:rgba(255,255,255,.15)}

/* --------------------------------------------- estrela de fixar --- */
.ev-fixar{
  margin-left:auto;flex-shrink:0;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;padding:0;
  border-radius:4px;
  color:var(--menu-fixar);
  opacity:0;
  transition:opacity var(--rapido) var(--ease),color var(--rapido) var(--ease);
}
.ev-fixar svg{width:13px;height:13px}
.sidebar a.navlink:hover .ev-fixar,
.sidebar a.navlink:focus-within .ev-fixar{opacity:1}
.ev-fixar:hover{color:var(--menu-fixado)}
.ev-fixar.fixado{opacity:1;color:var(--menu-fixado)}
.ev-fixar.fixado svg{fill:currentColor}
/* No trilho recolhido não há espaço, e no celular não há hover. */
.sidebar-rail .ev-fixar,.sidebar-rail .ev-busca,.sidebar-rail .ev-atalhos-titulo{display:none}
@media (hover:none){.ev-fixar{opacity:1}}

/* -------------------------------------- trilha de navegação --- */
.ev-titulo-bloco{display:flex;flex-direction:column;gap:3px;min-width:0}
.ev-trilha{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:var(--t-11);
  font-weight:var(--peso-forte);
  line-height:1;
}
.ev-trilha-fase{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border-radius:var(--raio-pill);
  letter-spacing:var(--tracking-etiqueta);text-transform:uppercase;
  background:var(--superficie-3);color:var(--texto-2);
}
.ev-trilha-fase::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;
}
.ev-trilha-fase.fase-decidir{background:var(--tile-acao-fundo);color:var(--fase-decidir-texto)}
.ev-trilha-fase.fase-executar{background:var(--tile-alerta-fundo);color:var(--fase-executar-texto)}
.ev-trilha-fase.fase-medir{background:var(--tile-receita-fundo);color:var(--fase-medir-texto)}
.ev-trilha-fase.fase-governar{background:var(--tile-info-fundo);color:var(--fase-governar-texto)}
.ev-trilha-sep{color:var(--texto-3)}
.ev-trilha-grupo{color:var(--texto-3);font-weight:var(--peso-medio)}
.topbar h1{margin:0}

/* --------------------------------------- paleta de comandos --- */
.ev-paleta{
  position:fixed;inset:0;z-index:1200;
  background:rgba(21,29,33,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:12vh var(--e-4) var(--e-4);
}
.ev-paleta[hidden]{display:none}
body.ev-paleta-aberta{overflow:hidden}
.ev-paleta-caixa{
  width:100%;max-width:560px;
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio-xl);
  box-shadow:var(--sombra-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  max-height:70vh;
}
.ev-paleta-topo{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--borda);
}
.ev-paleta-topo svg{width:17px;height:17px;flex-shrink:0;color:var(--texto-3)}
.ev-paleta-campo{
  flex:1;min-width:0;
  border:none;outline:none;background:none;
  font-family:inherit;font-size:var(--t-15);color:var(--texto);
  padding:0;
}
.ev-paleta-campo::placeholder{color:var(--texto-3)}
.ev-paleta-topo kbd,.ev-paleta-rodape kbd{
  font-family:inherit;font-size:10px;font-weight:var(--peso-titulo);
  color:var(--texto-3);
  background:var(--superficie-3);
  border:1px solid var(--borda);
  border-radius:5px;padding:2px 6px;
}
.ev-paleta-lista{overflow-y:auto;padding:6px;flex:1;min-height:0}
.ev-paleta-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:var(--raio-sm);
  color:var(--texto);cursor:pointer;
}
.ev-paleta-item.sel{background:var(--acao-suave)}
.ev-paleta-ico{
  width:30px;height:30px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--raio-sm);
  background:var(--tile-neutro-fundo);color:var(--tile-neutro-icone);
}
.ev-paleta-ico svg{width:15px;height:15px}
.ev-paleta-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ev-paleta-txt b{
  font-size:var(--t-14);font-weight:var(--peso-forte);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ev-paleta-txt small{
  font-size:var(--t-12);color:var(--texto-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ev-paleta-fase{
  flex-shrink:0;font-size:var(--t-11);font-weight:var(--peso-forte);
  padding:2px 8px;border-radius:var(--raio-pill);
  background:var(--superficie-3);color:var(--texto-2);
}
.ev-paleta-fase.fase-decidir{background:var(--tile-acao-fundo);color:var(--fase-decidir-texto)}
.ev-paleta-fase.fase-executar{background:var(--tile-alerta-fundo);color:var(--fase-executar-texto)}
.ev-paleta-fase.fase-medir{background:var(--tile-receita-fundo);color:var(--fase-medir-texto)}
.ev-paleta-fase.fase-governar{background:var(--tile-info-fundo);color:var(--fase-governar-texto)}
.ev-paleta-rodape{
  display:flex;align-items:center;gap:var(--e-4);
  padding:9px 16px;
  border-top:1px solid var(--borda);
  background:var(--superficie-2);
  font-size:var(--t-11);color:var(--texto-3);
}
.ev-paleta-rodape span{display:inline-flex;align-items:center;gap:4px}
.ev-paleta-total{margin-left:auto;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .ev-paleta{padding:6vh var(--e-3) var(--e-3)}
  .ev-paleta-fase{display:none}
  .ev-paleta-rodape span:not(.ev-paleta-total){display:none}
}

/* ======================================================================
   KANBAN — altura e total por coluna  (v86)
   ----------------------------------------------------------------------
   Duas mudanças pedidas:

   1. Coluna mais alta. Antes a coluna terminava onde o último card
      terminava, então uma coluna com dois cards ficava um toco ao lado de
      outra com dez — o quadro parecia desalinhado e a área de soltar era
      minúscula. Agora todas partem de uma altura generosa e iguais entre
      si, e quem tem muitos cards rola por dentro em vez de esticar a
      página inteira.

   2. Total em dinheiro no cabeçalho. O número é sempre a soma dos cards
      que estão na coluna naquele momento — por isso mover um card já
      soma de um lado e desconta do outro, sem nenhuma conta manual.
   ====================================================================== */

.kanban{align-items:stretch}

.kanban-col{
  /* Teto: o quadro cabe na tela e a rolagem acontece dentro da coluna,
     não na página. Sem isto, uma coluna com 30 negócios empurraria o
     rodapé para 4.000px abaixo e as outras colunas sumiriam do campo de
     visão ao rolar atrás dela. */
  max-height:calc(100vh - 240px);
}

.kanban-dropzone{
  /* Piso generoso: mesmo vazia, a coluna tem corpo e área de soltar.
     Era 60px, o que dava uma faixa fina difícil de acertar no arrasto. */
  min-height:440px;
  overflow-y:auto;
  overscroll-behavior:contain;   /* rolar a coluna não rola a página junto */
  padding-right:2px;             /* respiro para a barra de rolagem */
}

/* Barra de rolagem discreta — ela aparece dentro de cada coluna e, no
   peso padrão do navegador, competiria com o conteúdo do card. */
.kanban-dropzone{scrollbar-width:thin;scrollbar-color:var(--borda-forte) transparent}
.kanban-dropzone::-webkit-scrollbar{width:7px}
.kanban-dropzone::-webkit-scrollbar-track{background:transparent}
.kanban-dropzone::-webkit-scrollbar-thumb{background:var(--borda-forte);border-radius:999px;background-clip:padding-box;border:2px solid transparent}

/* Total da coluna.
   Na primeira versão ele saiu em Manrope 800 a 17px com uma linha cheia
   embaixo — tamanho de KPI para o que é, na verdade, a legenda de uma
   coluna. Competia com o nome da etapa e cortava o cabeçalho em dois.
   Agora é uma legenda: menor, peso médio, sem régua, e recuada para
   alinhar com o texto do título (a bolinha ocupa 8px + 5px de margem),
   de modo que nome e valor leiam como um bloco só. */
.kanban-col-total{
  font-size:var(--t-14);
  font-weight:var(--peso-forte);
  color:var(--texto-2);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;
  line-height:1.2;
  margin:2px 0 12px;
  padding-left:13px;
}
/* Coluna sem nenhum negócio não precisa gritar "R$ 0,00". */
.kanban-col-total[data-total-cents="0"]{color:var(--texto-3);font-weight:var(--peso-medio)}

/* ----------------------------------------------------------------------
   Fechar o negócio dentro do card
   ----------------------------------------------------------------------
   As colunas de Vendido e Perdido saíram do quadro: elas cresciam para
   sempre e empurravam as etapas que realmente pedem trabalho para fora
   da tela. O fechamento virou um par de botões no pé do card, e a
   consulta do que foi vendido ou perdido mora em "Vendas & Perdidos".

   Os dois são contornados, não preenchidos: são ações finais, e um
   bloco de cor cheia repetido em cada card viraria uma parede colorida
   no meio do quadro. */
.kanban-card-fechar{
  display:flex;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--borda);
}
.kanban-card-fechar form{flex:1;margin:0}
.kanban-btn-ganho,
.kanban-btn-perda{
  width:100%;
  font:inherit;
  font-size:var(--t-12);
  font-weight:var(--peso-forte);
  padding:5px 8px;
  border-radius:var(--raio-sm);
  background:transparent;
  border:1px solid currentColor;
  cursor:pointer;
  transition:background-color var(--rapido) var(--ease);
}
.kanban-btn-ganho{color:var(--receita)}
.kanban-btn-ganho:hover{background:var(--receita-suave)}
.kanban-btn-perda{color:var(--perigo)}
.kanban-btn-perda:hover{background:var(--perigo-suave)}

@media (max-width:840px){
  /* No celular a coluna não disputa altura com o resto da tela: o quadro
     já rola na horizontal, e travar a altura aqui esconderia cards. */
  .kanban-col{max-height:none}
  .kanban-dropzone{min-height:220px;overflow-y:visible}
}

/* Botão de fechar travado pelo checklist (v88).
   O servidor já recusava o fechamento com o checklist incompleto; o que
   faltava era a tela não oferecer uma ação que ela sabe que será negada.
   O botão fica visivelmente inerte e o card diz quanto falta e onde
   resolver — um botão morto sem explicação só gera dúvida. */
.kanban-btn-ganho:disabled,
.kanban-btn-perda:disabled{
  color:var(--texto-3);
  border-color:var(--borda);
  background:transparent;
  cursor:not-allowed;
  opacity:.75;
}
.kanban-btn-ganho:disabled:hover,
.kanban-btn-perda:disabled:hover{background:transparent}

.kanban-checklist-aviso{
  display:block;
  margin-top:10px;
  padding:6px 8px;
  border-radius:var(--raio-sm);
  background:var(--alerta-suave);
  color:var(--alerta);
  font-size:var(--t-11);
  font-weight:var(--peso-forte);
  line-height:1.35;
  text-decoration:none;
  position:relative;
  z-index:2;          /* passa à frente do .stretched-link do card */
}
.kanban-checklist-aviso:hover{text-decoration:underline}

/* Linha de campos do assistente de cadastro (v89).
   O container vinha com align-items:flex-start, então um rótulo que
   quebrasse em duas linhas empurrava só o seu campo para baixo e a linha
   inteira perdia o alinhamento — foi o que aconteceu com "Prazo previsto
   de fechamento" dentro de 180px.

   Alinhar pela base resolve a causa: não importa se um rótulo ocupa uma
   ou duas linhas, todos os campos terminam na mesma altura. O rótulo
   também foi encurtado, mas isso é remendo do caso; a regra abaixo é o
   conserto. */
.wizard-step-body{align-items:flex-end}

/* O título e as dicas do passo continuam ocupando a linha inteira — eles
   não são campos e não devem ser puxados para a base junto. */
.wizard-step-body .wizard-step-title,
.wizard-step-body .wizard-step-hint{align-self:flex-start;width:100%}

/* Histórico do negócio (v91).
   A linha do tempo cresce a cada nota, anexo e mudança de etapa, e não
   tem fim: um negócio antigo empurrava o rodapé da página para milhares
   de pixels abaixo. Passa a rolar dentro do próprio cartão, com o
   cabeçalho dizendo quantos eventos existem.

   A classe é própria (.deal-historico) e não .why-chain porque essa
   mesma marcação desenha os diagramas de 5 Porquês e MASP nas
   Ferramentas — limitar a altura lá cortaria a análise no meio. */
.deal-historico{
  max-height:560px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.deal-historico{scrollbar-width:thin;scrollbar-color:var(--borda-forte) transparent}
.deal-historico::-webkit-scrollbar{width:7px}
.deal-historico::-webkit-scrollbar-track{background:transparent}
.deal-historico::-webkit-scrollbar-thumb{background:var(--borda-forte);border-radius:999px;background-clip:padding-box;border:2px solid transparent}

@media print{
  /* No relatório impresso o histórico sai inteiro. */
  .deal-historico{max-height:none;overflow:visible}
}

/* Cartões que recolhem (v92) — tela do negócio.
   O cabeçalho inteiro é o alvo do clique, não só a seta: é uma área
   maior e mais fácil de acertar. A seta aponta para baixo aberto e para
   a direita fechado, a convenção que a pessoa já conhece de listas. */
.recolhivel-cab{
  cursor:pointer;
  user-select:none;
  position:relative;
  padding-right:28px;
}
.recolhivel-seta{
  position:absolute;
  right:4px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid var(--texto-3);
  border-bottom:2px solid var(--texto-3);
  transform:translateY(-70%) rotate(45deg);
  transition:transform var(--normal) var(--ease), border-color var(--rapido) var(--ease);
}
.recolhivel-cab:hover .recolhivel-seta{border-color:var(--texto)}
.card.recolhido .recolhivel-seta{transform:translateY(-50%) rotate(-45deg)}
.card.recolhido .recolhivel-corpo{display:none}
/* O título traz margem inferior escrita na própria marcação; recolhido,
   ela deixaria um vão vazio no pé do cartão. */
.card.recolhido > .recolhivel-cab{margin-bottom:0 !important}

@media print{
  /* No papel nada fica escondido. */
  .card.recolhido .recolhivel-corpo{display:block}
  .recolhivel-seta{display:none}
}

/* Tela do negócio em faixas (v95).
   Cada faixa é uma grade de duas colunas. O espaço entre faixas vem da
   própria faixa; por isso o último cartão de cada coluna perde a margem
   inferior que traz escrita na marcação, senão o espaço dobraria. */
.deal-faixa{margin-bottom:20px}
.deal-faixa > div > :last-child{margin-bottom:0 !important}

/* Histórico e Anexos com a mesma altura.
   Quem define a altura da faixa são os Anexos (o que tem de conteúdo) ou
   o piso de 380px, o que for maior. O Histórico não entra nessa conta —
   contain:size faz a lista, por mais longa que seja, não empurrar a
   faixa — e só ocupa o espaço que sobrar, rolando por dentro. Sem isso,
   um negócio com cem eventos esticaria os Anexos junto. */
.deal-par{align-items:stretch}
.deal-par-col{display:flex;flex-direction:column;min-width:0}
.deal-par-col > .card{flex:1 1 auto;margin-bottom:0 !important}
.deal-par .deal-historico{
  max-height:none;
  min-height:380px;
  contain:size;
}

@media (max-width:780px){
  /* Uma coluna só: não há par para igualar, e o histórico volta a ter
     teto próprio. */
  .deal-par .deal-historico{contain:none;min-height:0;max-height:480px}
}

/* Valor do negócio editável (v96).
   R$ 0,00 aparece em âmbar: é o sinal de que falta uma informação, e a
   mesma cor que o produto usa para "falta algo para avançar". O botão
   diz "Informar valor" quando está zerado e "Editar valor" quando não. */
.deal-valor{font-weight:var(--peso-forte);color:var(--texto);font-variant-numeric:tabular-nums}
.deal-valor-zero{color:var(--alerta)}
.deal-valor-editar{
  background:none;
  border:none;
  padding:0 4px;
  margin-left:2px;
  font:inherit;
  font-size:var(--t-12);
  font-weight:var(--peso-forte);
  color:var(--acao-texto);
  cursor:pointer;
}
.deal-valor-editar:hover{text-decoration:underline}
.deal-valor-form{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin:-4px 0 14px;
  padding:12px;
  background:var(--superficie-2);
  border:1px solid var(--borda);
  border-radius:var(--raio);
}
/* display:flex acima venceria o atributo hidden; esta linha devolve. */
.deal-valor-form[hidden]{display:none}


/* ====================================================================
   v98 — INDÚSTRIA: obras, itens e Gantt
   --------------------------------------------------------------------
   Tudo aqui usa os tokens de papel (--perigo, --alerta, --receita,
   --acao…), nunca hex fixo: são eles que já têm versão clara e escura e
   que passaram na auditoria de contraste. Cor de etapa entra como
   preenchimento de barra e de ponto — nunca como cor de texto, porque a
   etapa é renomeável e recolorível pelo cliente e não dá para garantir
   contraste de um valor que o usuário escolhe.
   ==================================================================== */

/* Barra de andamento -------------------------------------------------- */
.obra-barra{
  height:6px;
  border-radius:999px;
  background:var(--borda);
  overflow:hidden;
}
.obra-barra > span{
  display:block;
  height:100%;
  background:var(--receita-forte);
  border-radius:999px;
}

/* Situação da obra ---------------------------------------------------- */
.obra-status-planejada{background:var(--acao-suave);color:var(--acao-texto)}
.obra-status-em_andamento{background:var(--alerta-suave);color:var(--alerta)}
.obra-status-pausada{background:var(--superficie-2,var(--borda));color:var(--texto-2)}
.obra-status-concluida{background:var(--receita-suave);color:var(--receita)}
.obra-status-cancelada{background:var(--perigo-suave);color:var(--perigo)}

.obra-badge-perigo{background:var(--perigo-suave);color:var(--perigo)}

/* Tipo de material ---------------------------------------------------- */
.obra-mat-convencional{background:var(--acao-suave);color:var(--acao-texto)}
.obra-mat-especial{background:var(--alerta-suave);color:var(--alerta)}

/* Título de bloco na tela de compras ---------------------------------- */
.obra-tit-perigo{color:var(--perigo)}
.obra-tit-alerta{color:var(--alerta)}
.obra-tit-receita{color:var(--receita)}
.obra-tit-neutro{color:var(--texto-2)}

/* Alertas do plano ---------------------------------------------------- */
.obra-alerta{
  padding:10px 14px;
  border-radius:var(--raio);
  border:1px solid var(--alerta-forte);
  background:var(--alerta-suave);
  /* --texto, nao --tinta: --tinta e sempre escuro (feito para preenchimento
     claro) e sumiria sobre o fundo escuro do alerta no tema dark. */
  color:var(--texto);
  font-size:12.5px;
  line-height:1.45;
}
.obra-alerta-grave{
  border-color:var(--perigo-forte);
  background:var(--perigo-suave);
}

/* Os números do prazo ------------------------------------------------- */
.obra-cartoes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;
}
.obra-cartao{padding:14px 16px}
.obra-cartao-rot{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--texto-3);
  margin-bottom:4px;
}
.obra-cartao-val{
  font-family:var(--fonte-titulo,inherit);
  font-size:19px;
  font-weight:700;
  color:var(--texto);
  line-height:1.15;
}
.obra-cartao-val.obra-vermelho{color:var(--perigo)}
.obra-cartao-nota{font-size:11px;color:var(--texto-3);margin-top:3px}

/* Marcador da etapa --------------------------------------------------- */
.obra-ponto{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  margin-right:7px;
  vertical-align:middle;
}

/* Linha vencida: faixa à esquerda em vez de fundo inteiro colorido, que
   deixaria o texto da linha ilegível no tema escuro. */
.obra-linha-atrasada > td:first-child{box-shadow:inset 3px 0 0 var(--perigo-forte)}

/* ====================================================================
   Gantt
   ==================================================================== */
.gantt{
  --gantt-rot-larg:230px;
  position:relative;
}
.gantt-cab,
.gantt-obra,
.gantt-linha{display:flex;align-items:center}
.gantt-cab{
  height:26px;
  border-bottom:1px solid var(--borda);
  margin-bottom:6px;
}
.gantt-rot{
  width:var(--gantt-rot-larg);
  min-width:var(--gantt-rot-larg);
  padding-right:14px;
  font-size:12.5px;
  line-height:1.3;
}
.gantt-rot-etapa{
  font-size:12px;
  color:var(--texto-2);
  padding-left:14px;
}
.gantt-escala,
.gantt-faixa{position:relative;flex:1;height:100%}
.gantt-marca{
  position:absolute;
  top:6px;
  font-size:10.5px;
  color:var(--texto-3);
  transform:translateX(-50%);
  white-space:nowrap;
}
.gantt-obra{
  margin-top:14px;
  padding-bottom:6px;
  border-bottom:1px solid var(--borda);
}
.gantt-linha{height:24px}
.gantt-linha .gantt-faixa{height:24px}

.gantt-barra,
.gantt-real{
  position:absolute;
  border-radius:999px;
  background:var(--cor,var(--acao));
}
/* Previsto fica translúcido; realizado, cheio por cima. Assim a diferença
   entre plano e realidade se lê sem depender de cor. */
.gantt-barra{top:7px;height:10px;opacity:.28}
.gantt-barra-atrasada{
  opacity:.5;
  box-shadow:0 0 0 1.5px var(--perigo-forte);
}
.gantt-real{top:9px;height:6px;opacity:1}

.gantt-hoje{
  position:absolute;
  top:26px;bottom:0;
  width:2px;
  background:var(--perigo-forte);
  opacity:.65;
  pointer-events:none;
}

.gantt-chave{
  display:inline-block;
  width:18px;height:8px;
  border-radius:999px;
  background:var(--acao);
  vertical-align:middle;
  margin-right:5px;
}
.gantt-chave-prev{opacity:.28}
.gantt-chave-atraso{opacity:.5;box-shadow:0 0 0 1.5px var(--perigo-forte)}
.gantt-chave-hoje{width:2px;height:14px;background:var(--perigo-forte);border-radius:0}

@media (max-width:720px){
  .gantt{--gantt-rot-larg:140px}
  .obra-cartoes{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}


/* v99 — rodapé do financeiro: o total não pode quebrar entre "R$" e o
   número, senão a coluna vira duas linhas e a leitura se perde. */
.obra-fin-tot td{white-space:nowrap}
.obra-fin-tot tr:last-child td{font-size:13.5px}

/* v100 — situação do CONTRATO na área de obras. Classe própria em vez de
   reaproveitar a da obra: são coisas diferentes e o nome tem de dizer isso. */
.obra-ct-emitido{background:var(--receita-suave);color:var(--receita)}
.obra-ct-rascunho{background:var(--superficie-2,var(--borda));color:var(--texto-2)}


/* ====================================================================
   v102 — cor no nome das categorias do menu
   --------------------------------------------------------------------
   Com todos os níveis abertos ao mesmo tempo, a barra virava uma lista
   só. Agora o nome do nível e o das suas seções carregam a cor da fase,
   então o olho separa os blocos sem precisar ler.

   Hierarquia continua vindo de tamanho e peso (nível 11,5px/800, seção
   10,5px/700), não da cor — por isso as duas podem usar a mesma tinta
   sem achatar a leitura.

   Todas as quatro passam AA sobre a barra (#0C3D68): Decidir 4,94:1,
   Executar 7,08:1, Medir 5,79:1, Governar 5,50:1. A barra é o mesmo azul
   nos dois temas, então uma medição vale para claro e escuro.
   ==================================================================== */

.tier-decidir  > .sidebar-tier{color:var(--fase-decidir-claro)}
.tier-executar > .sidebar-tier{color:var(--fase-executar-claro)}
.tier-medir    > .sidebar-tier{color:var(--fase-medir-claro)}
.tier-governar > .sidebar-tier{color:var(--fase-governar-claro)}

.tier-decidir  .sidebar-section{color:var(--fase-decidir-claro)}
.tier-executar .sidebar-section{color:var(--fase-executar-claro)}
.tier-medir    .sidebar-section{color:var(--fase-medir-claro)}
.tier-governar .sidebar-section{color:var(--fase-governar-claro)}

/* O ponto do nível some ao lado de um nome da mesma cor. Vira um anel,
   que marca a posição sem repetir a informação. */
.sidebar-tier .dot{
  background:transparent !important;
  box-shadow:inset 0 0 0 2px currentColor;
}

/* A seção herda a cor do nome, então o bullet não precisa do inline. */
.sidebar-section-bullet{opacity:1}


/* ====================================================================
   v103 — TRAMITAÇÃO DE DOCUMENTOS
   --------------------------------------------------------------------
   Tokens de papel em tudo, como no resto: é o que garante a leitura nos
   dois temas. A peça cancelada não some nem fica cinza-ilegível — ela
   continua legível, só marcada, porque o registro precisa poder ser
   lido depois por quem for auditar.
   ==================================================================== */

/* Caixas do setor ---------------------------------------------------- */
.doc-caixas{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.doc-caixa{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  border:1px solid var(--borda);
  background:var(--superficie);
  color:var(--texto-2);
  font-size:12.5px;font-weight:600;
  text-decoration:none;
  transition:.15s;
}
.doc-caixa:hover{border-color:var(--acao-contorno);color:var(--acao-texto)}
.doc-caixa-ativa{
  background:var(--acao-suave);
  border-color:var(--acao-contorno);
  color:var(--acao-texto);
}
.doc-caixa-num{
  min-width:20px;text-align:center;
  padding:1px 6px;border-radius:999px;
  background:var(--superficie-2,var(--borda));
  color:var(--texto-2);
  font-size:11px;font-weight:700;
}
/* O que está esperando para ser recebido é o único número que grita. */
.doc-caixa-num-alerta{background:var(--perigo-suave);color:var(--perigo)}

/* Situação do processo ----------------------------------------------- */
.doc-status-aberto{background:var(--acao-suave);color:var(--acao-texto)}
.doc-status-sobrestado{background:var(--alerta-suave);color:var(--alerta)}
.doc-status-concluido{background:var(--receita-suave);color:var(--receita)}
.doc-status-cancelado{background:var(--perigo-suave);color:var(--perigo)}
.doc-urgente{background:var(--perigo-suave);color:var(--perigo)}

/* Tipo de peça -------------------------------------------------------- */
.doc-tipo-documento{background:var(--acao-suave);color:var(--acao-texto)}
.doc-tipo-despacho{background:var(--alerta-suave);color:var(--alerta)}
.doc-tipo-informacao{background:var(--info-suave);color:var(--info)}
.doc-cancelada{background:var(--perigo-suave);color:var(--perigo)}

/* Peça ---------------------------------------------------------------- */
.doc-peca{
  display:flex;gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--borda);
}
.doc-peca:last-of-type{border-bottom:0}
.doc-peca-num{
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--acao-suave);
  color:var(--acao-texto);
  font-size:11.5px;font-weight:800;
}
/* Cancelada: risco no título e marca vermelha, sem apagar o texto — quem
   audita precisa ler o que foi juntado por engano. */
.doc-peca-cancelada .doc-peca-num{background:var(--perigo-suave);color:var(--perigo)}
.doc-peca-cancelada strong{text-decoration:line-through}

.doc-peca-texto{
  margin-top:6px;
  padding:9px 12px;
  border-radius:var(--raio);
  background:var(--superficie-2,var(--canvas));
  border:1px solid var(--borda);
  font-size:12.5px;
  line-height:1.5;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* Linha do tempo da tramitação ---------------------------------------- */
.doc-tramite{
  display:flex;gap:12px;
  padding:12px 0 12px 2px;
  position:relative;
}
.doc-tramite:not(:last-child)::before{
  content:"";
  position:absolute;
  left:6px;top:26px;bottom:-2px;
  width:2px;
  background:var(--borda);
}
.doc-tramite-marca{
  flex-shrink:0;
  width:14px;height:14px;
  margin-top:4px;
  border-radius:50%;
  background:var(--superficie);
  box-shadow:inset 0 0 0 3px var(--acao);
  position:relative;z-index:1;
}


/* ====================================================================
   v104 — SIGILO
   --------------------------------------------------------------------
   O selo de sigiloso usa o vermelho de perigo de propósito: não é um
   estado neutro, é um aviso de que aquele conteúdo tem alcance
   restrito e alguém respondeu por essa escolha.
   ==================================================================== */

.doc-sigilo{background:var(--perigo-suave);color:var(--perigo)}
.doc-papel-editor{background:var(--acao-suave);color:var(--acao-texto)}
.doc-papel-leitor{background:var(--superficie-2,var(--borda));color:var(--texto-2)}

/* Painel de sigilo: borda vermelha discreta, sem fundo gritante — ele
   convive com o resto da tela, não compete com o conteúdo. */
.doc-painel-sigilo{border-left:3px solid var(--perigo-forte)}

/* A opção no formulário de abertura precisa de área de clique generosa:
   marcar sigilo por engano, ou deixar de marcar, custa caro. */
.doc-sigilo-opcao{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;margin-bottom:14px;
  border:1px solid var(--borda);
  border-radius:var(--raio);
  background:var(--superficie-2,var(--canvas));
  font-size:12.5px;line-height:1.5;
  cursor:pointer;
}
.doc-sigilo-opcao:hover{border-color:var(--perigo-forte)}
.doc-sigilo-opcao input{margin-top:2px;flex-shrink:0}
.doc-sigilo-opcao strong{color:var(--perigo)}


/* ====================================================================
   v108 — AJUSTES DO CRM
   --------------------------------------------------------------------
   Cadastros (estados, marcas, atividades com SLA), relatório de
   gargalos, filtros do quadro, detalhamento da venda, atividades no
   negócio e a caixa de motivo. Só tokens semânticos: o tema escuro vem
   junto sem regra própria.
   ==================================================================== */

.crm-cad-intro{font-size:12.5px;color:var(--texto-2);margin-bottom:18px;max-width:760px}
.crm-cad-bloco{margin-bottom:20px}
.crm-cad-bloco h3{font-size:14px;margin-bottom:4px}
.crm-cad-dica{font-size:12px;color:var(--texto-2);margin-bottom:14px;max-width:760px;line-height:1.5}
.crm-cad-dica a{color:var(--acao-texto);font-weight:600}
.crm-mudo{color:var(--texto-3);font-size:11.5px;font-weight:400}
.crm-vazio{color:var(--texto-3);text-align:center;padding:14px}

/* Estados: chips que mostram o marcado sem depender só da cor (o
   checkbox continua visível dentro do chip). */
.crm-ufs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.crm-uf{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--borda);
  border-radius:var(--raio-pill);font-size:12px;font-weight:600;color:var(--texto-2);cursor:pointer;
  background:var(--superficie)}
.crm-uf.on{border-color:var(--acao-contorno,var(--acao));background:var(--acao-suave);color:var(--acao-texto)}
.crm-uf input{margin:0}

/* Tabelas de marcas e de tipos de atividade, editáveis na linha. */
.crm-marcas td{vertical-align:middle}
.crm-marcas input[type=text],.crm-marcas input[type=number]{width:100%;min-width:140px;padding:6px 9px;
  border:1px solid var(--borda);border-radius:var(--raio-sm);font-size:13px;background:var(--superficie);color:var(--texto)}
.crm-marcas input.crm-pct{min-width:0;width:84px;text-align:right}
.crm-marcas td.num,.crm-marcas th.num{white-space:nowrap}
.crm-marca-form{margin:0}
.crm-inativa td{color:var(--texto-3)}
.crm-acoes{white-space:nowrap}
.crm-acoes,.crm-acoes form{display:inline-flex;gap:6px;align-items:center;margin:0}
.crm-nova-linha{margin-top:14px;padding-top:14px;border-top:1px dashed var(--borda);align-items:flex-end}
.crm-alteracoes{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.5}
.crm-alteracoes li{padding:7px 0;border-bottom:1px solid var(--borda)}
.crm-alteracoes li:last-child{border-bottom:0}

/* SLA & gargalos */
.crm-sla-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.crm-sla td,.crm-sla th{white-space:nowrap}
.crm-ruim{color:var(--perigo);font-weight:700}
.crm-gargalo td:first-child,.crm-etapa.crm-gargalo .crm-etapa-nome{font-weight:700}
.crm-gargalo td{background:var(--perigo-suave)}
.crm-gargalo-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--raio-pill);
  background:var(--perigo);color:var(--texto-invertido,#fff);font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
.crm-etapas{display:flex;flex-direction:column;gap:12px}
.crm-etapa{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:4px 14px;align-items:center}
.crm-etapa-nome{font-size:13px;color:var(--texto)}
.crm-etapa-barra{height:10px;border-radius:var(--raio-pill);background:var(--superficie-2,var(--borda));overflow:hidden}
.crm-etapa-barra i{display:block;height:100%;border-radius:inherit;background:var(--acao)}
.crm-etapa.crm-gargalo .crm-etapa-barra i{background:var(--perigo-forte,var(--perigo))}
.crm-etapa-num{grid-column:2;font-size:12.5px;font-weight:700;color:var(--texto);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .crm-etapa{grid-template-columns:1fr}
  .crm-etapa-num{grid-column:1}
}

/* Selo de situação de uma atividade frente ao SLA. O texto diz a
   situação; a cor só reforça. */
.crm-sla-chip{display:inline-block;padding:2px 8px;border-radius:var(--raio-pill);font-size:11px;font-weight:700;white-space:nowrap}
.crm-sla-no_prazo{background:var(--info-suave);color:var(--info)}
.crm-sla-vencendo{background:var(--alerta-suave);color:var(--alerta)}
.crm-sla-atrasada,.crm-sla-estourado{background:var(--perigo-suave);color:var(--perigo)}
.crm-sla-cumprido{background:var(--receita-suave);color:var(--receita)}

/* Filtros do quadro */
.crm-filtro-quadro{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin-bottom:16px;padding:14px 16px}
.crm-filtro-quadro .field{margin-bottom:0;min-width:150px}
.crm-filtro-quadro .crm-filtro-valor{min-width:0;width:120px}
.crm-filtro-resumo{font-size:12px;color:var(--texto-2);align-self:center}
.crm-chip-marca{background:var(--acao-suave);color:var(--acao-texto)}

/* Detalhamento da venda */
.crm-venda-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.crm-venda-cab h3{font-size:14px;margin:0}
.crm-venda-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 14px;font-size:13px}
.crm-venda-dl dt{color:var(--texto-2)}
.crm-venda-dl dd{margin:0;color:var(--texto);min-width:0}
.crm-venda-tab{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.crm-venda-tab th,.crm-venda-tab td{padding:8px 6px;border-bottom:1px solid var(--borda);text-align:left;font-weight:400}
.crm-venda-tab thead th{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3)}
.crm-venda-tab tbody th{color:var(--texto)}
.crm-venda-tab .num{text-align:right;white-space:nowrap}
.crm-venda-tab tfoot th,.crm-venda-tab tfoot td{font-weight:700;border-bottom:0;color:var(--texto)}
.crm-origem{display:block;font-size:11px;color:var(--texto-3)}
.crm-venda-nota{font-size:11.5px;color:var(--texto-2);margin:10px 0 0;line-height:1.5}
.crm-venda-editar{margin-top:12px}
.crm-venda-editar summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--acao-texto)}
.crm-venda-editar form{margin-top:12px}
.crm-venda-demanda{margin-top:14px}

/* Atividades no negócio */
.crm-atividades h3{font-size:14px;margin-bottom:0}
.crm-ativ-lista{list-style:none;margin:12px 0 0;padding:0}
.crm-ativ{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--borda);font-size:13px}
.crm-ativ:last-child{border-bottom:0}
.crm-ativ.feita .crm-ativ-txt strong{color:var(--texto-2)}
.crm-ativ-txt{flex:1;min-width:0}
.crm-ativ-acoes,.crm-ativ-acoes form{display:flex;gap:6px;margin:0}
.crm-ativ-nova{margin-top:14px;padding-top:14px;border-top:1px dashed var(--borda);align-items:flex-end}

/* Caixa de motivo (assets/js/crm-motivo.js) */
.crm-motivo-overlay{z-index:1100}
.crm-motivo-box{max-width:460px;width:100%}
.crm-motivo-titulo{font-size:15px;margin:0 0 4px;text-wrap:balance}
.crm-motivo-dica{font-size:12px;color:var(--texto-2);margin:0 0 12px}
.crm-motivo-rotulo{display:block;font-size:12px;font-weight:600;color:var(--texto-2);margin-bottom:4px}
.crm-motivo-box textarea,#mark-won-motivo-texto,#mark-lost-motivo-texto{width:100%;padding:9px 11px;border:1px solid var(--borda);
  border-radius:var(--raio-sm);font:inherit;font-size:13px;resize:vertical;background:var(--superficie);color:var(--texto)}
.crm-motivo-erro{font-size:12px;color:var(--perigo);margin-top:6px}
.crm-motivo-acoes{display:flex;gap:10px;margin-top:16px}
.crm-motivo-acoes .btn{flex:1}

/* Demanda: vínculo com marca, produto e cliente */
.demand-vinculo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.demand-vinculo .field{margin-bottom:10px;min-width:0}
.demand-titulo-dica{font-size:11px;color:var(--texto-3);margin:-6px 0 10px}
@media (max-width:640px){.demand-vinculo{grid-template-columns:1fr}}