/* adsplat — sistema de estilos
   Marca Cartrack, tirada do logótipo e do site: laranja #f47735, preto e branco.
   Não há azul nenhum na marca — o navy que aqui esteve era invenção.
   Tipos: Mitr nos títulos, Roboto no texto, os mesmos do cartrack.pt.
   Servidos daqui e não do Google, porque a CSP é `default-src 'self'` e um
   `@import` de fora seria bloqueado em silêncio.
   Densidade de painel de controlo, não de landing page. */

@font-face {
  font-family: "Mitr"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fontes/mitr-400.woff2") format("woff2");
}
@font-face {
  font-family: "Mitr"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fontes/mitr-500.woff2") format("woff2");
}
@font-face {
  font-family: "Mitr"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fontes/mitr-600.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto"; font-style: normal; font-weight: 100 900;
  font-display: swap;
  src: url("/static/fontes/roboto.woff2") format("woff2");
}

:root {
  /* Opt-out do dark mode automático dos browsers: a marca é clara e uma
     inversão automática pinta isto de preto exactamente contra a marca. */
  color-scheme: only light;

  --laranja: #f47735;
  --laranja-claro: #ff9560;
  --laranja-escuro: #d9601f;
  --laranja-fundo: #fdeee4;
  /* O "escuro" da marca é o preto do wordmark, não um azul. */
  --carvao: #141414;
  --carvao-2: #232323;

  --fundo: #f5f5f5;
  --superficie: #ffffff;
  --superficie-2: #fafafa;
  --borda: #e6e6e6;
  --borda-forte: #cfcfcf;

  --texto: #1c1c1c;
  --texto-suave: #5c5c5c;
  --texto-fraco: #8f8f8f;

  --titulo: "Mitr", "Trebuchet MS", sans-serif;
  --corpo: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
           "Helvetica Neue", Arial, sans-serif;

  --critico: #d64545;
  --critico-fundo: #fdecec;
  --aviso: #d98324;
  --aviso-fundo: #fdf4e7;
  --ok: #2f8f5b;
  --ok-fundo: #eaf6ef;
  --info: #3b7dd8;
  --info-fundo: #eaf1fc;

  --raio: 12px;
  --raio-p: 7px;
  --raio-g: 16px;

  /* Semáforo. É o mesmo verde/âmbar/vermelho em toda a plataforma: se a cor
     mudar de significado entre ecrãs, deixa de se poder confiar nela. */
  --verde: #1f9254;
  --verde-fundo: #e7f5ed;
  --verde-borda: #bfe3ce;
  --ambar: #c9791a;
  --ambar-fundo: #fdf3e5;
  --ambar-borda: #f0d9b4;
  --vermelho: #cf3d3d;
  --vermelho-fundo: #fdeced;
  --vermelho-borda: #f2c4c6;
  --neutro-fundo: #f0f0f0;
  --neutro-borda: #dcdcdc;
  --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  --sombra-alta: 0 4px 16px rgba(0, 0, 0, .12);
  --lateral: 232px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Não há modo escuro: a marca Cartrack é clara e a plataforma segue-a em
   qualquer sistema. O bloco prefers-color-scheme que aqui viveu pintava o site
   inteiro de preto em Macs em modo escuro — parecia outra plataforma. */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fundo); color: var(--texto);
  font: 14px/1.55 var(--corpo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--laranja-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─────────────── estrutura ─────────────── */

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

/* Clara, não preta. O site da Cartrack é claro e o logótipo é preto sobre
   branco: uma parede escura ao lado de conteúdo claro cansa a vista e não é a
   marca. O laranja fica reservado ao que está seleccionado. */
.lateral {
  width: var(--lateral); flex: 0 0 var(--lateral);
  background: var(--superficie); color: var(--texto);
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.marca { padding: 20px 18px 16px; border-bottom: 1px solid var(--borda); }
.marca img { display: block; width: 128px; height: auto; }
.marca .produto {
  display: block; margin-top: 8px; font-family: var(--titulo);
  font-size: 11.5px; font-weight: 400; letter-spacing: .9px;
  text-transform: uppercase; color: var(--texto-fraco);
}

.nav { flex: 1; padding: 10px 10px; overflow-y: auto; }
.nav a {
  display: block; padding: 8px 12px; margin-bottom: 1px;
  border-radius: var(--raio-p); color: var(--texto-suave);
  font-size: 13.5px; font-weight: 500; line-height: 1.35;
}
.nav a:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.nav a.on {
  background: var(--laranja-fundo); color: var(--laranja-escuro); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--laranja);
}
/* A pergunta que cada secção responde só aparece onde estás: em todas as linhas
   ao mesmo tempo é ruído que se aprende a ignorar. */
.nav a .sub { display: none; }
.nav a.on .sub {
  display: block; font-size: 11.5px; font-weight: 400;
  color: var(--laranja-escuro); opacity: .75; margin-top: 1px;
}
.nav a .selo {
  float: right; background: var(--vermelho); color: #fff;
  border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 700;
  line-height: 18px; min-width: 20px; text-align: center;
}

.rodape-lateral {
  padding: 13px 18px; border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--texto-fraco);
}

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

/* faixa de saúde: há quanto tempo é que os dados são novos */
.saude {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 9px 26px; background: var(--superficie);
  border-bottom: 1px solid var(--borda); font-size: 12.5px;
  color: var(--texto-suave);
}
.saude b { color: var(--texto); font-weight: 600; }
.saude .pastilha {
  display: inline-flex; align-items: center; gap: 6px;
}
.saude .luz {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
}
.saude .luz.aviso { background: var(--aviso); }
.saude .luz.mau { background: var(--critico); }
.saude .luz.cinza { background: var(--texto-fraco); }
/* A bolinha-resumo dos automatismos vive na mesma barra, mas é um link. */
.saude a.status-farol { color: var(--texto-suave); }
.saude a.status-farol:hover { color: var(--texto); }
.saude a.status-farol .luz { background: var(--ok); }
/* mini-legenda das cores, junto às bolinhas dos automatismos */
.saude .legenda-luzes { gap: 5px; color: var(--texto-fraco); font-size: 11.5px; }
.saude .legenda-luzes .luz { margin-left: 6px; }
.saude .legenda-luzes .luz:first-child { margin-left: 0; }

.conteudo { padding: 26px; max-width: 1400px; width: 100%; }

.cabeca { margin-bottom: 20px; }
.cabeca h1 {
  margin: 0 0 4px; font-family: var(--titulo); font-size: 23px; font-weight: 500;
  letter-spacing: -.2px; line-height: 1.25;
}
.cabeca p { margin: 0; color: var(--texto-suave); font-size: 13.5px; }

/* ─────────────── cartões ─────────────── */

.grelha { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra);
}
.cartao h2 {
  margin: 0 0 12px; font-family: var(--titulo); font-size: 12.5px;
  font-weight: 500; text-transform: uppercase; letter-spacing: .6px;
  color: var(--texto-suave);
}

.kpi .rotulo {
  font-size: 12px; color: var(--texto-suave); text-transform: uppercase;
  letter-spacing: .4px; font-weight: 600;
}
.kpi .valor {
  font-family: var(--titulo); font-size: 27px; font-weight: 500;
  letter-spacing: -.4px; margin: 6px 0 2px; font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.kpi .delta { font-size: 12.5px; color: var(--texto-suave); }
.kpi .delta.sobe { color: var(--ok); }
.kpi .delta.desce { color: var(--critico); }

/* ─────────────── alertas ─────────────── */

.alerta {
  border: 1px solid var(--borda); border-left-width: 3px;
  border-radius: var(--raio); background: var(--superficie);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--sombra);
}
.alerta.critico { border-left-color: var(--critico); }
.alerta.aviso { border-left-color: var(--aviso); }
.alerta.info { border-left-color: var(--info); }

.alerta.compacto { padding: 12px 15px; margin-bottom: 8px; }
.alerta.compacto p {
  font-size: 12.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.alerta .topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 5px;
}
.alerta h3 {
  margin: 0; font-family: var(--titulo); font-size: 14.5px;
  font-weight: 500; line-height: 1.35;
}
.alerta p { margin: 0; color: var(--texto-suave); font-size: 13px; }
.alerta .meta {
  margin-top: 9px; font-size: 11.5px; color: var(--texto-fraco);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}

.etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .4px; white-space: nowrap;
}
.etiqueta.critico { background: var(--critico-fundo); color: var(--critico); }
.etiqueta.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.etiqueta.info { background: var(--info-fundo); color: var(--info); }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.neutro { background: var(--superficie-2); color: var(--texto-suave); }
.etiqueta.b2b { background: var(--laranja-fundo); color: var(--laranja-escuro); }
.etiqueta.b2c { background: #ededed; color: #545454; }

/* ─────────────── tabelas ─────────────── */

.tabela-cx { overflow-x: auto; border-radius: var(--raio); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 9px 12px; background: var(--superficie-2);
  border-bottom: 1px solid var(--borda); font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave);
  white-space: nowrap; position: sticky; top: 0;
}
tbody td {
  padding: 9px 12px; border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}
tbody tr:hover { background: var(--superficie-2); }
tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12px; }
.fraco { color: var(--texto-fraco); }
.destaque { font-weight: 640; }
.mau { color: var(--critico); font-weight: 640; }

/* ─────────────── botões e formulários ─────────────── */

.btn {
  display: inline-block; padding: 7px 14px; border-radius: var(--raio-p);
  border: 1px solid var(--borda-forte); background: var(--superficie);
  color: var(--texto); font-size: 13px; font-weight: 550; cursor: pointer;
  font-family: inherit; line-height: 1.4;
}
.btn:hover { background: var(--superficie-2); text-decoration: none; }
.btn.principal { background: var(--laranja); border-color: var(--laranja); color: #fff; }
.btn.principal:hover { background: #e0741a; }
.btn.perigo { background: var(--critico); border-color: var(--critico); color: #fff; }
.btn.pequeno { padding: 4px 9px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input[type=text], input[type=password], input[type=email], input[type=number],
select, textarea {
  padding: 9px 11px; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p); background: var(--superficie);
  color: var(--texto); font: inherit; font-size: 13.5px; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--laranja); outline-offset: -1px; border-color: var(--laranja);
}
label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }

.abas {
  display: flex; gap: 3px; border-bottom: 1px solid var(--borda);
  margin-bottom: 16px; flex-wrap: wrap;
}
.abas a {
  padding: 8px 14px; font-size: 13px; color: var(--texto-suave);
  border-bottom: 2px solid transparent; font-weight: 550;
}
.abas a:hover { color: var(--texto); text-decoration: none; }
.abas a.on { color: var(--laranja); border-bottom-color: var(--laranja); }
/* A pesquisa vive dentro da barra das abas e não se estica com elas. */
.abas .pesquisa-cx { align-self: center; padding-bottom: 6px; }

/* ─────────────── filtro de segmento (topo, todos os ecrãs) ─────────────── */

.seg-filtro {
  display: inline-flex; gap: 2px; padding: 2px; margin-right: 6px;
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 999px;
}
.seg-filtro a {
  padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 650;
  color: var(--texto-suave); letter-spacing: .2px;
}
.seg-filtro a:hover { text-decoration: none; color: var(--texto); }
.seg-filtro a.on { background: var(--laranja); color: #fff; }
.pastilha.aviso-seg { color: var(--texto-fraco); font-style: italic; }

/* data livre "desde": faz par com o grupo de período ao lado */
.per-desde {
  display: inline-flex; gap: 4px; align-items: center; margin-right: 6px;
}
.per-desde input[type="date"] {
  padding: 2px 6px; font-size: 12px; color: var(--texto-suave);
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: 999px; font-family: inherit;
}
.per-desde.on input[type="date"] {
  border-color: var(--laranja); color: var(--texto);
}

/* campanhas adormecidas: uma linha discreta, expansível, fora da tabela */
.paradas-cx { margin-top: 10px; }
.paradas-cx summary { cursor: pointer; }
.lista-paradas { margin: 6px 0 0 4px; padding-left: 16px; }
.lista-paradas li { margin: 2px 0; }

/* ─────────────── termos de pesquisa por keyword ─────────────── */

.ver-termos { display: inline-block; margin-top: 5px; }
.termos-linha > td {
  background: var(--superficie-2); padding: 12px 16px 14px;
  border-left: 3px solid var(--laranja);
}
.termos-cx { max-width: 720px; }
.termos-tab th, .termos-tab td { background: transparent; }

/* ─────────────── login ─────────────── */

.login-pag {
  /* Fundo claro como o site da Cartrack; o laranja entra na faixa do cartão.
     Aqui já viveu um gradiente preto→navy: era invenção, não marca. */
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--fundo); padding: 20px;
}
.login-cx {
  background: var(--superficie); border-radius: 14px; padding: 30px 32px 34px;
  width: 100%; max-width: 370px; border: 1px solid var(--borda);
  border-top: 4px solid var(--laranja); box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}
.login-cx .marca { padding: 0 0 18px; text-align: center; }
.login-cx .marca img { display: block; margin: 0 auto 6px; }
.login-cx .marca .produto {
  font-family: var(--titulo); font-size: 11.5px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--texto-fraco);
}
.login-cx .campo { margin-bottom: 15px; }
.login-cx .btn { width: 100%; text-align: center; padding: 10px; }
.erro-cx {
  background: var(--critico-fundo); color: var(--critico); padding: 10px 12px;
  border-radius: var(--raio-p); font-size: 13px; margin-bottom: 16px;
  border: 1px solid rgba(214, 69, 69, .25);
}
.nota-cx {
  background: var(--superficie-2); color: var(--texto-suave);
  border: 1px solid var(--borda); border-left: 3px solid var(--laranja);
  padding: 10px 13px; border-radius: var(--raio-p); font-size: 12.5px;
  margin-bottom: 16px;
}

/* ─────────────── gráfico ─────────────── */

.gfx-cx { position: relative; }
canvas { display: block; width: 100%; height: auto; }
.legenda {
  display: flex; gap: 16px; font-size: 12px; color: var(--texto-suave);
  margin-top: 8px; flex-wrap: wrap;
}
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i {
  width: 11px; height: 3px; border-radius: 2px; display: inline-block;
}

/* ─────────────── vazio ─────────────── */

.vazio {
  text-align: center; padding: 54px 24px; color: var(--texto-suave);
}
.vazio h2 {
  margin: 0 0 8px; font-family: var(--titulo); font-size: 18px;
  color: var(--texto); font-weight: 500;
}
.vazio p { margin: 0 auto; max-width: 470px; font-size: 13.5px; }
.vazio .fase {
  display: inline-block; margin-bottom: 14px; padding: 3px 11px;
  background: var(--laranja); color: #fff; border-radius: 20px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .4px;
}

/* ─────────────── utilitários ───────────────
   Existem para não haver um único style= inline: a CSP é `style-src 'self'`
   sem 'unsafe-inline', e atributos de estilo seriam silenciosamente ignorados. */

.mb-lg { margin-bottom: 22px; }
.mb { margin-bottom: 16px; }
.mb-sm { margin-bottom: 8px; }
.mt { margin-top: 16px; }
.mt-sm { margin-top: 12px; }
.mt-lg { margin-top: 24px; }
.m0 { margin: 0; }
.inline { display: inline; }
.sem-pad { padding: 0; overflow: hidden; }
.borda-ok { border-left: 3px solid var(--ok); }
.divisor { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.nota-peq { font-size: 12.5px; }
.etiqueta-lista { margin-bottom: 2px; display: inline-block; }
.dir { margin-left: auto; }
.centrar-td { padding: 26px; text-align: center; }
.compacto-y { padding-top: 11px; padding-bottom: 11px; }

/* estado dos automatismos: uma bolota por linha, cores do semáforo */
.bolota {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px;
  display: inline-block; vertical-align: middle;
}
.bolota.verde { background: var(--verde); }
.bolota.ambar { background: var(--ambar); }
.bolota.vermelho { background: var(--vermelho); }
.bolota.cinza { background: var(--texto-fraco); }
.status-linha td { vertical-align: middle; }
.status-quando { color: var(--texto-fraco); font-size: 12.5px; }

/* contacto das leads sem-CRM: a única PII no ecrã, destacada para copiar */
.contacto-manual {
  margin-top: 4px; padding: 5px 8px; border-radius: 6px;
  background: var(--critico-fundo); border: 1px solid var(--vermelho-borda);
  display: inline-block; user-select: all; line-height: 1.5;
}
.contacto-manual .mono { font-size: 12px; color: var(--texto); }

/* drill-down dos problemas de qualidade de uma lead, na vista "Com problemas" */
.detalhe-problema td { background: var(--superficie-2); padding: 8px 14px 12px; }
.lista-problemas { margin: 0 0 6px; padding: 0; list-style: none; }
.lista-problemas li {
  padding: 3px 0; font-size: 12.5px; display: flex; align-items: baseline; gap: 7px;
  flex-wrap: wrap;
}
.lista-problemas .bolota { align-self: center; }

.legenda i.c-laranja { background: var(--laranja); }
.legenda i.c-carvao { background: var(--texto-suave); }
.legenda i.c-fraco { background: var(--texto-fraco); }

.frase-cx {
  font-family: var(--mono); background: var(--superficie-2);
  padding: 8px 10px; border-radius: 6px; margin-bottom: 8px;
  user-select: all; word-break: break-all; font-size: 12.5px;
}

/* ─────────────── kw performance ───────────────
   A tabela tem 26 colunas porque é o template da equipa e não se corta nada.
   Vive dentro de .tabela-cx, que já rola na horizontal. */

.kw-escolha {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.kw-escolha label { margin: 0; white-space: nowrap; }
.kw-escolha select { width: auto; min-width: 200px; }

table.densa { font-size: 12px; }
table.densa thead th { padding: 7px 9px; }
table.densa tbody td { padding: 6px 9px; }

/* A keyword fica colada à esquerda: com 26 colunas, quem rola até ao CPC já não
   sabia de que palavra era a linha. */
table.densa tbody td:first-child, table.densa tfoot td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--superficie);
}
table.densa thead th:first-child {
  left: 0; z-index: 3; background: var(--superficie-2);
}
table.densa tfoot td:first-child { z-index: 2; background: var(--superficie-2); }
table.densa tbody tr:hover td:first-child { background: var(--superficie-2); }

tfoot td {
  padding: 9px; border-top: 2px solid var(--borda-forte);
  background: var(--superficie-2); font-weight: 600; white-space: nowrap;
}

/* Nomes de campanha e grupo são longos e repetitivos: cortados numa linha cada,
   com o nome inteiro no title, para a linha não crescer para quatro alturas. */
.kw-camp { max-width: 210px; }
.kw-camp span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nota-cx-form { display: flex; gap: 5px; align-items: center; }
.nota-campo { min-width: 150px; font-size: 12px; padding: 5px 7px; }

.resumo-abre {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--texto-suave);
}
.resumo-abre:hover { color: var(--texto); }

/* ─────────────── negativas ─────────────── */

.col-check { width: 54px; text-align: center; }
.marca { width: auto; margin: 0; cursor: pointer; }
.rotulo-termo {
  margin: 0; font-weight: 600; font-size: 12.5px; cursor: pointer; display: block;
}

.barra-accoes {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--raio);
}

/* A pesquisa encosta à direita da barra das abas: as abas são a navegação e
   ficam onde o olho começa; procurar é o que se faz depois de não chegar lá. */
.pesquisa-cx { display: flex; gap: 5px; align-items: center; margin-left: auto; }

/* O que não impede a negativa mas ela tem de ler antes de a escolher. Fica
   colado ao termo, não numa coluna à direita: um aviso longe do sítio onde se
   carrega é um aviso que ninguém lê. */
.aviso-termo {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35;
  color: var(--aviso); max-width: 42ch;
}

/* ─────────────── responsivo ─────────────── */

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .lateral {
    width: 100%; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; overflow-x: auto; padding: 0 8px;
  }
  .marca { padding: 12px; white-space: nowrap; }
  .marca small { display: none; }
  .nav { display: flex; padding: 8px 0; gap: 3px; }
  .nav a { white-space: nowrap; padding: 7px 11px; }
  .nav a .sub { display: none; }
  .rodape-lateral { display: none; }
  .conteudo { padding: 16px; }
  .saude { padding: 8px 16px; gap: 12px; }
}

/* ─────────────── semáforo ───────────────
   Um veredicto por linha, com a mesma leitura em todos os ecrãs:
   verde = está bem, âmbar = vigiar, vermelho = agir, cinzento = não dá para
   julgar ainda. O cinzento existe de propósito: um veredicto confiante sobre
   duas leads é pior do que não dar veredicto nenhum. */

.sem {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; border: 1px solid transparent;
}
.sem i {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: currentColor;
}
.sem.verde { background: var(--verde-fundo); color: var(--verde); border-color: var(--verde-borda); }
.sem.ambar { background: var(--ambar-fundo); color: var(--ambar); border-color: var(--ambar-borda); }
.sem.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); border-color: var(--vermelho-borda); }
.sem.cinza { background: var(--neutro-fundo); color: var(--texto-fraco); border-color: var(--neutro-borda); }

/* Semáforo que também é filtro. O escolhido fica com o aro cheio, para se ver
   de relance que a tabela em baixo está recortada e não é a lista toda. */
.filtro-sem { text-decoration: none; cursor: pointer; }
.filtro-sem:hover { filter: brightness(.97); }
.filtro-sem.activo { box-shadow: 0 0 0 2px currentColor inset; font-weight: 750; }

/* a razão do veredicto, por baixo: sem ela é um oráculo e ninguém confia */
.porque { display: block; margin-top: 3px; font-size: 11px; color: var(--texto-fraco); }

/* Número que abre um painel. Continua a parecer um número dentro de uma tabela
   de números, com um tracejado por baixo a dizer que se pode carregar: um botão
   com caixa em cada célula tornava a tabela ilegível. */
.num-botao {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; border-bottom: 1px dashed var(--borda-forte);
}
.num-botao:hover { color: var(--laranja-escuro); border-bottom-color: var(--laranja); }
.num-botao:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

/* Painel das leads de uma keyword. O padding vive no corpo e não no <dialog>,
   para que um clique na moldura conte como clique fora e feche. */
.painel-leads {
  width: min(1080px, 94vw); max-height: 86vh; padding: 0; overflow: auto;
  border: 1px solid var(--borda); border-radius: var(--raio-g);
  background: var(--superficie); color: var(--texto);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.painel-leads::backdrop { background: rgba(20, 20, 20, .45); }
.painel-corpo { padding: 20px 22px 18px; }
.painel-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.painel-topo h2 { font-size: 17px; }
.filtro-leads.activo {
  background: var(--laranja-fundo); border-color: var(--laranja);
  color: var(--laranja-escuro); font-weight: 650;
}
.painel-leads.so-validas tr.nao-valida { display: none; }

/* barra de estado da conta, no topo do painel */
.estado-conta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; border-radius: var(--raio-g); margin-bottom: 20px;
  border: 1px solid var(--borda); background: var(--superficie);
  box-shadow: var(--sombra);
}
.estado-conta .farol {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 46px;
  display: flex; align-items: center; justify-content: center;
}
.estado-conta .farol span { width: 18px; height: 18px; border-radius: 50%; }
.estado-conta.verde .farol { background: var(--verde-fundo); }
.estado-conta.verde .farol span { background: var(--verde); }
.estado-conta.ambar .farol { background: var(--ambar-fundo); }
.estado-conta.ambar .farol span { background: var(--ambar); }
.estado-conta.vermelho .farol { background: var(--vermelho-fundo); }
.estado-conta.vermelho .farol span { background: var(--vermelho); }
.estado-conta.cinza .farol { background: var(--neutro-fundo); }
.estado-conta.cinza .farol span { background: var(--texto-fraco); }
.estado-conta .texto { flex: 1; min-width: 240px; }
.estado-conta h2 {
  margin: 0 0 2px; font-family: var(--titulo); font-size: 18px; font-weight: 500;
  text-transform: none; letter-spacing: -.1px; color: var(--texto);
}
.estado-conta p { margin: 0; font-size: 13px; color: var(--texto-suave); }

/* cartões de KPI com risca de estado no topo */
.cartao.kpi { position: relative; overflow: hidden; }
/* cartão clicável (ex.: "Com problemas" leva à vista): não parece link */
a.cartao.kpi { color: inherit; text-decoration: none; display: block;
               transition: box-shadow .12s ease; }
a.cartao.kpi:hover { box-shadow: 0 2px 10px rgba(0,0,0,.09); }
.cartao.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--borda);
}
.cartao.kpi.verde::before { background: var(--verde); }
.cartao.kpi.ambar::before { background: var(--ambar); }
.cartao.kpi.vermelho::before { background: var(--vermelho); }
.cartao.kpi.laranja::before { background: var(--laranja); }

/* célula com fundo de estado, para a tabela se ler em diagonal */
td.f-verde { background: var(--verde-fundo); }
td.f-ambar { background: var(--ambar-fundo); }
td.f-vermelho { background: var(--vermelho-fundo); }
tbody tr:hover td.f-verde,
tbody tr:hover td.f-ambar,
tbody tr:hover td.f-vermelho { filter: brightness(.98); }

/* metas editáveis */
.metas { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.metas .campo { display: flex; flex-direction: column; gap: 4px; }
.metas .campo label { margin: 0; }
.metas input[type=number] { width: 110px; }

/* o botão da banda não se estica: só o texto é que cresce */
.estado-conta > .btn { flex: 0 0 auto; align-self: center; }
.estado-conta .texto p { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ─────────────── lista de alertas compacta ───────────────
   No painel, um alerta é uma linha. Três cartões com parágrafo empurravam os
   números todos para baixo da dobra, e quem abre de manhã quer ver o estado da
   conta sem rolar. A explicação inteira vive em /alertas, que é a página feita
   para isso. */

.lista-alertas { margin: -4px -6px; }
.lista-alertas a.linha {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--raio-p);
  color: var(--texto); font-size: 13.5px; line-height: 1.35;
}
.lista-alertas a.linha:hover { background: var(--superficie-2); text-decoration: none; }
.lista-alertas a.linha + a.linha { border-top: 1px solid var(--borda); border-radius: 0; }
.lista-alertas .bolinha {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
}
.lista-alertas .bolinha.critico { background: var(--vermelho); }
.lista-alertas .bolinha.aviso { background: var(--ambar); }
.lista-alertas .bolinha.info { background: var(--texto-fraco); }
.lista-alertas .titulo {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 500;
}
.lista-alertas .seta { color: var(--texto-fraco); flex: 0 0 auto; font-size: 15px; }

/* cabeçalho de cartão com acção à direita */
.cartao .topo-cartao {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.cartao .topo-cartao h2 { margin: 0; }
.cartao .topo-cartao a { font-size: 12.5px; font-weight: 500; }

/* densidade: menos ar entre blocos, para caber mais acima da dobra */
.conteudo { padding: 22px 26px 34px; max-width: 1480px; }
.cabeca { margin-bottom: 16px; }
.estado-conta { padding: 15px 20px; margin-bottom: 16px; }
.estado-conta .farol { width: 40px; height: 40px; flex: 0 0 40px; }
.estado-conta .farol span { width: 15px; height: 15px; }
.estado-conta h2 { font-size: 17px; }
.grelha { gap: 13px; }