/* ============================================================================
   O aspecto — segunda versão, 20/09.

   PALETA: a da imagem que o Nelson mandou. Preto quase puro, lima como único
   acento forte, e laranja/vermelho só para o que é ganho e perda. Os cartões
   de topo levam um degradê da sua cor para o preto, como na referência.

   BARRA LATERAL: a da dashboard da PlaySlot, valor a valor (`sp_4a1.css`):
   236px, carril de 74px, item activo com a barra de 4px à esquerda e o degradê
   horizontal, tooltip no carril.

   GRÁFICOS: a geometria do `PS.perfChart` (`assets/js/sp_4b1.js`) — 640×220,
   margens 44/588/24/170, cinco linhas de grelha, escala à esquerda e outra à
   direita, nome da série em cada canto de cima, ponto em cada leitura, traço de
   2.4 e área a 0.22.

   Sem sombras. As superfícies separam-se por uma linha de 1px.
   ========================================================================== */
:root {
  --fundo: #151515;
  --fundo2: #191919;
  --painel: #1f1f1f;
  --painel2: #242424;
  --linha: rgb(var(--tinta-rgb) / 0.07);
  --linha-fina: rgb(var(--tinta-rgb) / 0.04);
  --linha-forte: rgb(var(--tinta-rgb) / 0.13);
  --hover: rgb(var(--tinta-rgb) / 0.03);

  --texto: #ffffff;
  --texto2: #d4d4d4;
  --texto3: #a8a8a8;
  /* Os cinzentos passam os 4,5:1 do WCAG sobre o cartão mais claro (#242424):
     o #6a6a6a de antes dava 2,9 e lia-se esborratado em letra pequena. */
  --muted: #9a9a9a;
  --muted2: #8c8c8c;

  --lima: #ccff00;
  --lima-suave: #dcff4d;
  --lima-tinta: #141a00;
  --laranja: #ff9f0a;
  --vermelho: #ff4d4d;
  --azul: #6884ff;
  --roxo: #a78bfa;
  --verde: #3ecf8e;

  /* As duas tintas das transparências, em canais soltos para o `rgb(… / a)`.
     O tema claro troca-as, e cada véu, realce e borda translúcida muda com elas
     sem ter de ser reescrito. */
  --lima-rgb: 204 255 0;
  --tinta-rgb: 255 255 255;

  /* ── A ESCALA ───────────────────────────────────────────────────────────
     Antes desta passagem havia cinco alturas de controlo (30/32/36/38/40),
     três raios quadrados (6/8/10), catorze tamanhos de letra e sete de ícone.
     Nada disso era decisão: era deriva. Daqui para a frente, tudo o que se
     desenha sai destes valores. */
  --raio: 10px;        /* cartões, modais, painéis */
  --raio-p: 8px;       /* controlos e caixas pequenas */

  --h-p: 32px;         /* botão pequeno, dentro de tabelas */
  --h-m: 36px;         /* botão normal, sino, dobrar */
  --h-g: 40px;         /* campos e gatilhos de filtro */
  --h-xg: 44px;        /* botão de acção principal (entrar) */

  --t-micro: 11px;   /* rótulos maiúsculos, eixos, metadados */
  --t-mini: 12px;    /* notas, legendas, selos */
  --t-corpo: 12.5px;   /* tabelas, listas, texto denso */
  --t-base: 13.5px;    /* campos, botões, navegação, títulos de cartão */
  --t-pagina: 16px;    /* título de página e da entrada */
  --t-num: 22px;       /* números secundários */
  --t-heroi: 30px;     /* o número principal de um cartão */
}

* { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: thin; scrollbar-color: #262626 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
a { text-decoration: none; color: inherit; }
svg { display: block; }
::selection { background: rgb(var(--lima-rgb) / .25); color: #fff; }
:root { accent-color: var(--lima); caret-color: var(--lima); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lima); outline-offset: 2px; border-radius: var(--raio-p);
}

#raiz { display: contents; }

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--fundo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  display: flex; min-height: 100dvh;
  font-size: var(--t-base); line-height: 1.5;
}

/* ══════════════════════════════ BARRA LATERAL ═════════════════════════════
   Porte do componente `dashboard-sidebar.tsx` que o Nelson mandou, com o banner
   no lugar do selector de workspace. As medidas são as dele: 260px de largura,
   12px de folga, itens de 7px×10px a 13px com ícone de 16 e traço 1.5, cantos a
   6px, grupos com cabeçalho em maiúsculas de 11px, atalho em `kbd` que só
   aparece no hover, contador em pílula, e os filhos a abrir com a linha-guia à
   esquerda. Em baixo, separado por uma linha, fica o sair.
   O componente vinha em Tailwind e TypeScript; aqui é CSS e React sem build,
   por isso são as regras que fazem o trabalho das classes utilitárias. */
.sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--fundo2);
  border-right: 1px solid var(--linha);
  display: flex; flex-direction: column;
  padding: 12px;
  position: sticky; top: 0; height: 100dvh; z-index: 60;
  transition: width .3s cubic-bezier(.4, 0, .2, 1);
}
.side-logo { display: block; padding: 2px 2px 14px; }
.side-logo .banner { display: block; width: 100%; height: auto; border-radius: var(--raio-p); }
.side-logo .marca-so { display: none; width: 38px; height: 38px; object-fit: contain; margin: 0 auto; }

.nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-bloco { display: flex; flex-direction: column; gap: 2px; }
.nav-grupo { padding: 0 10px; margin-bottom: 4px; font-size: var(--t-mini); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); }

.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 7px 10px; border-radius: var(--raio-p); border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: var(--t-base); font-weight: 500; font-family: inherit; text-align: left;
  letter-spacing: .01em; transition: background .2s, color .2s; position: relative; white-space: nowrap;
}
.nav-item .esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-item .ic { color: var(--muted2); display: flex; flex-shrink: 0; transition: color .2s; }
.nav-item .lbl { overflow: hidden; text-overflow: ellipsis; }
.nav-item .dir { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-item:hover { background: rgb(var(--tinta-rgb) / .05); color: var(--texto2); }
.nav-item:hover .ic { color: var(--texto3); }
.nav-item.on { background: rgb(var(--lima-rgb) / .10); color: var(--texto); font-weight: 600; }
.nav-item.on .ic { color: var(--lima); }

.nav-item .atalho {
  display: none; align-items: center; justify-content: center; height: 20px; padding: 0 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t-micro); font-weight: 500;
  color: var(--muted2); background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio-p);
}
.nav-item:hover .atalho { display: inline-flex; }
/* O contador. Era uma bolha redonda (999px) com o número a nadar lá dentro:
   o `padding` lateral empurrava-o e a altura da linha levantava-o. Agora é uma
   caixa de canto suave, de altura fixa, com o número ao centro nos dois eixos
   e algarismos de largura igual — passar de 9 para 12 246 não a faz saltar. */
.nav-item .conta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 19px; padding: 0 5px; border-radius: 5px;
  font-size: var(--t-micro); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  background: rgb(var(--lima-rgb) / .10); color: var(--lima);
}
.nav-item .seta { color: var(--muted2); display: flex; transition: transform .2s; }
.nav-item[aria-expanded="true"] .seta { transform: rotate(90deg); }

.nav-filhos { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease-in-out, opacity .3s ease-in-out; }
.nav-filhos.aberto { grid-template-rows: 1fr; opacity: 1; }
.nav-filhos > div { overflow: hidden; min-height: 0; position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.nav-filhos .guia { position: absolute; top: 0; bottom: 0; left: 18px; border-left: 1px solid var(--linha); }
.nav-filhos .nav-item { padding-left: 32px; font-size: var(--t-corpo); }

.side-fundo { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; }

/* Encolhida: fica o carril de ícones, com o nome a aparecer ao lado. */
.sidebar.rail { width: 68px; }
.sidebar.rail .side-logo { padding-bottom: 12px; }
.sidebar.rail .side-logo .banner { display: none; }
.sidebar.rail .side-logo .marca-so { display: block; }
.sidebar.rail .nav-item { justify-content: center; padding: 9px 0; }
.sidebar.rail .nav-item .lbl, .sidebar.rail .nav-item .dir, .sidebar.rail .nav-grupo,
.sidebar.rail .nav-filhos { display: none; }
.sidebar.rail .nav-item[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--painel2); border: 1px solid var(--linha-forte); color: var(--texto);
  font-size: var(--t-corpo); padding: 6px 11px; border-radius: var(--raio-p); white-space: nowrap; z-index: 130; pointer-events: none;
}

/* ═════════════════════════════════ CORPO ═════════════════════════════════ */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dobrar {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--h-m); height: var(--h-m); flex-shrink: 0; border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: none; color: var(--muted); cursor: pointer; transition: background .2s, color .2s;
}
.dobrar:hover { background: rgb(var(--tinta-rgb) / .05); color: var(--texto); }
@media (max-width: 900px) { .dobrar { display: none; } }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid var(--linha); background: var(--fundo);
  position: sticky; top: 0; z-index: 50;
}
.topbar h1 { font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-pagina); font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; }
/* A mão acena com a mesma curva e o mesmo tempo do portal (sp_4a1.css). */
.topbar h1 .mao svg { width: 18px; height: 18px; }
.topbar h1 .mao { color: var(--lima); display: inline-flex; transform-origin: 70% 80%; animation: acenar 2.4s ease-in-out infinite; }
@keyframes acenar { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .topbar h1 .mao { animation: none; } }
.topbar .sub { font-size: var(--t-mini); font-weight: 500; color: var(--muted2); margin-top: 2px; }
.espaco { flex: 1; }
.conteudo { padding: 20px 24px 40px; flex: 1; }

/* ════════════════════════════════ CARTÕES ════════════════════════════════ */
.grelha { display: grid; gap: 12px; }
/* Sem isto, um cartão com tabela alargava a coluna até à largura da tabela e
   a página ganhava scroll de lado (Financeiro a 360px). A tabela rola dentro
   do cartão, como nas outras páginas. */
.grelha > * { min-width: 0; }
/* Numa barra de ferramentas (sem rótulos por cima) o campo e o selector têm a
   altura dos botões ao lado. Os filtros com rótulo ficam no degrau dos campos. */
.barra > .sel .sel-gatilho, .barra > .sp-procura, .fx-topo .sel-gatilho { height: var(--h-m); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

/* O painel é uma grelha de LINHAS: os cartões que ficam lado a lado partilham o
   topo e a altura. Com três colunas independentes, cada uma crescia por sua
   conta e nada alinhava. */
.painel-grelha {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px;
  align-items: stretch; grid-auto-rows: minmax(min-content, auto);
}
.painel-grelha > * { min-width: 0; }
.painel-grelha > .card { height: 100%; display: flex; flex-direction: column; }
.painel-grelha > .card > .tabela-caixa { flex: 1; }
.duas-linhas { grid-row: span 2; }
.pilha { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; min-width: 0; }
.pilha > * { height: 100%; }

.card {
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; box-shadow: none;
}
.card + .card, .grelha + .card, .card + .grelha, .grelha + .grelha { margin-top: 12px; }
/* Dentro de uma grelha quem afasta é o `gap`. A margem de irmão fazia o segundo
   cartão de cada linha descer 12px e desalinhar a linha toda — via-se a dois
   cartões por linha. */
.painel-grelha > .card + .card, .grelha > .card + .card { margin-top: 0; }
.card-cab { display: flex; align-items: center; gap: 10px 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-cab h2 { font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; min-width: 0; }
.card-cab .dica { font-size: var(--t-mini); font-weight: 500; color: var(--muted2); min-width: 0; }

/* Mosaico de topo: cada um com o degradê da sua cor, como na imagem. */
.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: 100%; }
.mosaico > .tijolo { height: 100%; }
.tijolo {
  border-radius: var(--raio); padding: 14px; border: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 10px; min-height: 124px; position: relative; overflow: hidden;
}
.tijolo .ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tijolo .rot { font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto3); }
.tijolo .val { font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-num); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: auto; }
.tijolo.lima { background: linear-gradient(150deg, #2e3d05, var(--painel) 78%); }
.tijolo.lima .ico { background: var(--lima); color: var(--lima-tinta); }
.tijolo.laranja { background: linear-gradient(150deg, #402806, var(--painel) 78%); }
.tijolo.laranja .ico { background: var(--laranja); color: #1e1300; }
.tijolo.vermelho { background: linear-gradient(150deg, #3d1111, var(--painel) 78%); }
.tijolo.vermelho .ico { background: var(--vermelho); color: #1f0707; }

/* Linha de estatística: ícone, rótulo, valor. */
.linha-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel); }
.linha-stat .ico { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.linha-stat .ico.lima { background: var(--lima); color: var(--lima-tinta); }
.linha-stat .ico.branco { background: #ffffff; color: #111; }
.linha-stat .ico.laranja { background: var(--laranja); color: #1e1300; }
.linha-stat .ico.vermelho { background: var(--vermelho); color: #1f0707; }
.linha-stat .tx { min-width: 0; flex: 1 1 96px; }
.linha-stat .rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-stat .rot { font-size: var(--t-mini); font-weight: 500; color: var(--muted); }
.linha-stat .val { font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-pagina); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.linha-stat .selo { margin-left: auto; font-size: var(--t-micro); font-weight: 700; color: var(--lima); white-space: nowrap; }

.kpi .rot { font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); }
.kpi .val { font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-num); font-weight: 700; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .val.pequeno { font-size: var(--t-base); font-weight: 600; letter-spacing: 0; }
.kpi .pe { font-size: var(--t-mini); font-weight: 500; color: var(--muted); margin-top: 6px; }
.kpi .val.lima { color: var(--lima); }
.kpi .val.verde { color: var(--verde); }
.kpi .val.vermelho { color: var(--vermelho); }

/* ════════════════════════════════ TABELAS ════════════════════════════════ */
/* A margem negativa é o que faz a tabela encostar às bordas do cartão. A de
   baixo só se aplica quando a tabela é a última coisa lá dentro: com a barra
   de paginação a seguir, esses -16px puxavam-na para cima da tabela e tapavam
   a última linha — o «Total desta página» e a última data ficavam cortados ao
   meio. */
.tabela-caixa { overflow-x: auto; margin: 0 -16px; }
.tabela-caixa:last-child { margin-bottom: -16px; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: var(--t-corpo); }
thead th {
  text-align: left; background: rgb(var(--tinta-rgb) / .015);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted2); padding: 12px 16px; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--linha-fina); color: var(--texto3); vertical-align: middle; white-space: nowrap; }
tbody td.quebra { white-space: normal; min-width: 180px; }
tbody td .mono { overflow-wrap: normal; }
tbody tr:last-child td { border-bottom: none; }
/* Vinte linhas iguais perdem-se a meio. Uma em cada duas leva um fundo quase
   imperceptível — chega para o olho seguir a linha até ao fim sem régua. */
tbody tr:nth-child(even) td { background: rgb(var(--tinta-rgb) / .022); }
tbody tr:hover td { background: rgb(var(--lima-rgb) / .045); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── PARES EMPILHADOS ─────────────────────────────────────────────────────
   Um nome com o seu contexto por baixo — o lead e o criativo dele, o título da
   notificação e a hora, o toast e a sua linha. Cinco sítios do programa faziam
   isto com `gap: 1px` e entrelinha do browser (`normal`): as duas linhas
   ficavam encostadas, a descida do «g» quase a tocar na linha de baixo.

   A folga de um par destes não se mede em píxeis soltos, mede-se em entrelinha
   decidida. 1.35 na linha de cima e 1.3 na de baixo dão o ar que falta sem
   esticar a linha da tabela, e o `gap` de 2px separa os dois blocos de texto
   em vez de os empurrar. */
.cc-lead-tx, .cc-meio, .sino-tx, .toast-tx { gap: 2px; line-height: 1.35; }
.cc-lead-sub, .cc-criativo { line-height: 1.3; }
/* A última coluna, a dos botões. Uma linha só, encostada à direita, com o mesmo
   espaço entre botões em todas as tabelas — antes era um espaço de texto entre
   eles e cada linha alinhava à sua maneira. */
tbody td.acoes { text-align: right; white-space: nowrap; padding-top: 8px; padding-bottom: 8px; }
tbody td.acoes .btn { vertical-align: middle; }
tbody td.acoes .btn + .btn { margin-left: 6px; }
/* No telemóvel a coluna das acções (Abrir, Editar, apagar) ficava no fim de
   uma tabela de dez colunas, só alcançável a deslizar. Fica presa à direita,
   sempre à vista, e o resto da tabela desliza por baixo dela. */
@media (max-width: 900px) {
  tbody td.acoes, table:has(td.acoes) thead th:last-child {
    position: sticky; right: 0; z-index: 1; background: var(--painel);
    box-shadow: -10px 0 12px -10px rgb(0 0 0 / .45);
  }
  /* A riscagem e o realce das linhas são translúcidos: por cima de um fundo
     opaco, para o que desliza por baixo não se ver através do botão. */
  tbody tr:nth-child(even) td.acoes { background: linear-gradient(rgb(var(--tinta-rgb) / .022), rgb(var(--tinta-rgb) / .022)), var(--painel); }
  tbody tr:hover td.acoes { background: linear-gradient(rgb(var(--lima-rgb) / .045), rgb(var(--lima-rgb) / .045)), var(--painel); }
}
/* ── A paginação ──────────────────────────────────────────────────────────
   Por baixo da tabela, encostada às margens do cartão como a tabela está. Com
   39 mil leads na base, isto é o que diz onde se está e quanto falta. */
.paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px;
  flex-wrap: wrap; padding: 12px 16px; margin: 0 -16px -16px;
  border-top: 1px solid var(--linha);
}
.pag-conta { font-size: var(--t-corpo); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.pag-conta b { color: var(--texto); font-weight: 600; }
.pag-botoes { display: flex; align-items: center; gap: 4px; }
.pag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--h-p); height: var(--h-p); border-radius: 6px;
  font-family: inherit; font-size: var(--t-base); font-weight: 600; line-height: 1;
  border: 1px solid var(--linha-forte); background: transparent; color: var(--texto2);
  cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.pag-btn:hover:not(:disabled) { background: var(--hover); color: var(--lima); border-color: var(--lima); }
.pag-btn:disabled { opacity: .5; cursor: not-allowed; }
.pag-onde {
  padding: 0 10px; font-size: var(--t-corpo); font-weight: 600; color: var(--texto2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* A linha dos totais. */
tfoot td {
  padding: 13px 16px; border-top: 1px solid var(--linha); background: rgb(var(--tinta-rgb) / .022);
  color: var(--texto); font-weight: 600; white-space: nowrap;
}
/* A tabela encosta às margens do cartão (`.tabela-caixa` puxa-as para fora), por
   isso os cantos de baixo da linha de totais são os cantos do cartão. */
tfoot td:first-child { border-bottom-left-radius: var(--raio); }
tfoot td:last-child { border-bottom-right-radius: var(--raio); }
td .forte { color: var(--texto); font-weight: 600; }
.vazio { padding: 32px 14px; text-align: center; color: var(--muted2); font-size: var(--t-corpo); font-weight: 500; }
/* A carregar: um anel a rodar por cima do texto, para se ver que vem aí coisa.
   O esqueleto é o mesmo em blocos com a forma da página (Início dos Chatbots). */
.carregar::before { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 10px; border: 2px solid var(--linha); border-top-color: var(--muted); border-radius: 50%; animation: deRoda 0.7s linear infinite; }
.esqueleto { background: rgb(var(--tinta-rgb) / 0.08); border-radius: var(--raio); animation: dePulsa 1.2s ease-in-out infinite; }
@keyframes deRoda { to { transform: rotate(360deg); } }
@keyframes dePulsa { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .carregar::before { animation-duration: 2s; } .esqueleto { animation: none; } }

/* ═══════════════════════ BOTÕES, CAMPOS, ETIQUETAS ═══════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  height: var(--h-m); padding: 0 14px; border-radius: var(--raio-p);
  font-family: inherit; font-size: var(--t-base); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--linha-forte); background: transparent; color: var(--texto2);
  cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.btn:hover { background: var(--hover); color: var(--texto); }
/* O botão cheio de lima com 700 de peso era a coisa mais pesada da página e
   não encaixava no resto: fica com o peso dos outros, e continua a ser o único
   lima, o que chega para se ver. Tem a ALTURA dos outros (--h-m): no degrau
   pequeno ficava 4px abaixo do «CSV» e do «Cancelar» ao lado, e cada linha de
   botões parecia torta. Quem o quer pequeno junta `.pequeno`. */
.btn.primario { height: var(--h-m); padding: 0 13px; background: var(--lima);
  border-color: var(--lima); color: var(--lima-tinta); font-weight: 600; }
.btn.primario:hover { background: var(--lima-suave); }
.btn.perigo { color: var(--vermelho); border-color: rgba(255, 77, 77, .28); }
.btn.perigo:hover { background: rgba(255, 77, 77, .08); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pequeno { height: var(--h-p); padding: 0 11px; font-size: var(--t-corpo); }
.btn.alto { height: var(--h-xg); width: 100%; }
/* Um botão só de ícone é quadrado. Sem isto, o de apagar ficava mais estreito
   que os outros e, por só ter um SVG lá dentro, assentava na linha de base do
   texto — três píxeis acima do «Editar» ao lado. */
/* flex-shrink 0: ao lado de um campo a 100% (o nome no editor de fluxos) o
   quadrado era apertado até 26px. */
.btn.icone { width: var(--h-m); padding: 0; flex-shrink: 0; }
.btn.icone.pequeno { width: var(--h-p); }

.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.campo > label { font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.campo-com-icone { position: relative; }
.campo-com-icone > span {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted2); pointer-events: none;
}
.campo-com-icone input { padding-left: 40px; }
input, select, textarea {
  height: var(--h-g); padding: 0 12px; border-radius: var(--raio-p);
  font-family: inherit; font-size: var(--t-base); width: 100%;
  border: 1px solid var(--linha); background: var(--fundo2); color: var(--texto);
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: rgb(var(--lima-rgb) / .45); }
input::placeholder, textarea::placeholder { color: var(--muted2); }
input:disabled { color: var(--muted); cursor: not-allowed; border-style: dashed; }
input[type=date], input[type=month] { color-scheme: dark; cursor: pointer; }
textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 78px; line-height: 1.5; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  /* Eram pílulas completas e liam-se como etiquetas de loja. Com o raio dos
     controlos ficam do mesmo material do resto da página. */
  padding: 3px 8px; border-radius: 5px; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: transparent; color: var(--muted); border: 1px solid var(--linha-forte);
}
.chip.novo { color: var(--azul); border-color: rgba(77, 111, 255, .35); background: rgba(77, 111, 255, .09); }
.chip.em_conversa { color: var(--lima); border-color: rgb(var(--lima-rgb) / .3); background: rgb(var(--lima-rgb) / .08); }
.chip.registado { color: var(--roxo); border-color: rgba(167, 139, 250, .32); background: rgba(167, 139, 250, .08); }
.chip.ftd { color: var(--verde); border-color: rgba(62, 207, 142, .32); background: rgba(62, 207, 142, .08); }
.chip.perdido { color: #ff6b6b; border-color: rgba(255, 77, 77, .3); background: rgba(255, 77, 77, .08); }
[data-tema="claro"] .chip.perdido { color: var(--vermelho); }
/* Uma marca suspensa. Não é erro nem perigo — é uma torneira fechada — por isso
   recua para cinzento em vez de gritar a vermelho ao lado das que trabalham. */
.chip.parada { color: var(--muted); border-color: var(--linha-forte); background: rgb(var(--tinta-rgb) / .03); }
/* O botão de retomar: a marca está parada, e ligá-la outra vez é o gesto que a
   linha está a pedir. Ganha a cor do programa, mas só ele. */
.btn.acesa { color: var(--lima); border-color: rgb(var(--lima-rgb) / .32); }
.btn.acesa:hover { background: rgb(var(--lima-rgb) / .08); color: var(--lima); }

.barra { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.barra-periodo { position: relative; z-index: 100; }
.barra .campo { flex: 1 1 148px; min-width: 0; max-width: 100%; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-size: var(--t-mini); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.aviso, .aviso * { overflow-wrap: anywhere; }
.muted { color: var(--muted2); }
.pequeno { font-size: var(--t-mini); font-weight: 500; }

/* ════════════════════════════════ MODAIS ═════════════════════════════════ */
.veu { position: fixed; inset: 0; background: rgba(0, 0, 0, .74); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--raio); }
.modal.largo { max-width: 920px; }
.modal-cab { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: var(--painel); z-index: 2; }
.modal-cab h2 { font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-base); font-weight: 600; letter-spacing: -0.02em; }
.modal-titulos { min-width: 0; }
.modal-titulos p { margin-top: 3px; color: var(--muted); font-size: var(--t-corpo); font-weight: 500; }
.modal-icone {
  display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px;
  border-radius: var(--raio-p); border: 1px solid rgb(var(--lima-rgb) / .18);
  background: rgb(var(--lima-rgb) / .08); color: var(--lima);
}
.modal-corpo { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-corpo > .card { padding: 14px; background: var(--fundo2); }
.modal-pe { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--linha); }
.fechar { margin-left: auto; background: none; border: none; color: var(--muted2); cursor: pointer; padding: 4px; border-radius: var(--raio-p); display: flex; }
.fechar:hover { color: var(--texto); }

/* Os formulários principais seguem o modal de referência: largura generosa,
   densidade de trabalho compacta e acções sempre visíveis no rodapé. */
.veu-formulario { background: rgba(0, 0, 0, .78); backdrop-filter: blur(4px); }
.modal.formulario {
  max-width: 920px; height: min(720px, calc(100dvh - 40px)); max-height: none;
  overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--painel); border-color: var(--linha-forte);
}
.modal.formulario .modal-cab { position: relative; padding: 16px 20px; gap: 12px; }
.modal.formulario .modal-cab h2 { font-size: var(--t-pagina); }
.modal.formulario .modal-icone { flex-basis: 40px; height: 40px; }
.modal.formulario .fechar {
  width: 36px; height: 36px; padding: 0; align-items: center; justify-content: center;
  border: 1px solid var(--linha-forte);
}
.modal.formulario .fechar:hover { background: var(--hover); border-color: rgb(var(--lima-rgb) / .28); }
.modal.formulario .modal-corpo { overflow-y: auto; padding: 20px; gap: 16px; }
/* Dentro de um modal o espaço entre campos vem só do corpo. As grelhas de
   dois campos tinham 12px por dentro e 16 + 12 de margem entre si; no
   telemóvel, numa coluna, os campos ficavam aos pares desencontrados. */
.modal-corpo > .grelha { gap: inherit; }
.modal .modal-corpo > * { margin-top: 0; }
.modal.formulario .modal-pe { padding: 12px 20px; background: var(--painel); }
.modal.formulario .modal-pe .btn { height: var(--h-m); padding-inline: 16px; }
/* Uma pergunta só, como «Confirmar à mão»: o formulário grande tem altura
   fixa para não saltar quando o conteúdo muda, e aqui ficava meio vazio. */
.modal.formulario.curto { max-width: 480px; height: auto; max-height: calc(100dvh - 40px); }
.modal.formulario :is(input, .sel-gatilho, .cal-gatilho) { height: 44px; }
.modal.formulario textarea { min-height: 80px; }
.modal.formulario .campo { gap: 7px; }
.modal.formulario .campo > label { color: var(--texto3); }
/* Secção dentro do formulário, como no modal de referência: cartão de 1px com
   título, rótulos em texto normal, * lima nos obrigatórios e ajuda por baixo. */
.modal.formulario:has(.form-secao) { height: auto; max-height: calc(100dvh - 40px); }
.modal.formulario:has(.form-secao) .modal-cab { border-bottom: none; padding-bottom: 4px; }
.form-secao { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--fundo2); padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.form-secao-cab h3 { font-family: 'Sora', 'Manrope', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.form-secao-cab p { font-size: var(--t-base); color: var(--muted); margin-top: 4px; }
.form-secao .campo + .campo { margin-top: 0; }
.form-secao .g3 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.form-secao .campo > label { font-size: var(--t-base); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto2); }
.form-secao :is(input, .sel-gatilho, textarea) { background: var(--painel); }
.form-secao textarea { min-height: 110px; }
.obrig { color: var(--lima); }
.campo-ajuda { font-size: var(--t-mini); color: var(--muted); }

/* ═════════════════════════════ FILTROS PRÓPRIOS ══════════════════════════ */
.sel { position: relative; }
.sel-gatilho {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: var(--h-g); padding: 0 10px 0 12px; border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: var(--fundo2);
  color: var(--texto); font-family: inherit; font-size: var(--t-base); text-align: left; cursor: pointer;
  transition: border-color .15s;
}
.sel-gatilho:hover { border-color: var(--linha-forte); }
.sel-gatilho[aria-expanded="true"] { border-color: rgb(var(--lima-rgb) / .45); }
.sel-gatilho .valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-gatilho .valor.vazio { color: var(--muted2); }
.sel-gatilho .seta { flex-shrink: 0; color: var(--muted2); transition: transform .18s; }
.sel-gatilho[aria-expanded="true"] .seta { transform: rotate(180deg); }
.sel-menu { position: fixed; z-index: 9500; max-height: 280px; overflow-y: auto; background: var(--painel2); border: 1px solid var(--linha-forte); border-radius: var(--raio-p); padding: 4px; }
.sel-opcao { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; border-radius: var(--raio-p); background: none; color: var(--texto2); font-family: inherit; font-size: var(--t-base); text-align: left; cursor: pointer; }
.sel-opcao:hover, .sel-opcao.realce { background: rgb(var(--lima-rgb) / .09); color: var(--texto); }
.sel-opcao.activa { color: var(--lima); }
.sel-opcao .certo { margin-left: auto; opacity: 0; flex-shrink: 0; }
.sel-opcao.activa .certo { opacity: 1; }
.sel-procura { padding: 4px 4px 8px; position: sticky; top: -4px; background: var(--painel2); }
.sel-vazio { padding: 14px 10px; text-align: center; color: var(--muted2); font-size: var(--t-corpo); }
.sel-grupo { padding: 8px 10px 4px; font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); }
.sel-grupo:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--linha); padding-top: 10px; }
/* Tamanhos do Seletor fora dos formulários: «curto» ocupa o que o texto pede
   (nas barras de filtros), «compacto» e «mini» são os das linhas dos filtros e
   dos botões, «simples» não tem caixa (o «Ordenar» da lista dos fluxos). */
.sel.curto { min-width: 110px; flex: none; }
.sel.compacto .sel-gatilho { height: 34px; padding: 0 8px; background: var(--painel); border-color: var(--linha-forte); font-size: var(--t-corpo); }
.sel.compacto.mini .sel-gatilho { height: 30px; border-radius: 6px; }
.sel.simples .sel-gatilho { height: 30px; padding: 0 4px; gap: 4px; border-color: transparent; background: none; color: var(--texto2); font-size: var(--t-corpo); font-weight: 600; }
.sel.simples .sel-gatilho:hover { color: var(--texto); border-color: transparent; }

/* ─── O CALENDÁRIO DA CASA ───────────────────────────────────────────────────
   O <input type=date> do browser desenha-se sozinho e abre um painel que não se
   parece com nada aqui dentro, e muda de sistema para sistema. Este é feito da
   mesma matéria do resto: linha de 1px, lima só no dia escolhido, um círculo
   vazado no dia de hoje, nada mais. */
.cal-caixa { position: relative; }
.cal-gatilho {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  height: var(--h-g); padding: 0 10px 0 12px; border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: var(--fundo2);
  color: var(--texto); font-family: inherit; font-size: var(--t-base); text-align: left; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.cal-gatilho:hover { border-color: var(--linha-forte); }
.cal-gatilho.aberto { border-color: var(--lima); }
.cal-gatilho .ph { color: var(--muted2); }
.cal-ic { display: flex; color: var(--muted2); flex-shrink: 0; }
.cal-gatilho.aberto .cal-ic { color: var(--lima); }
.cal-limpar {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--raio-p);
  background: none; color: var(--muted2); cursor: pointer;
}
.cal-limpar:hover { color: var(--texto); background: var(--hover); }
.cal-painel {
  position: fixed; z-index: 9600;
  padding: 10px; background: var(--painel); border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  animation: deEntra 150ms cubic-bezier(.22, 1, .36, 1) both;
}
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-mes { font-size: var(--t-corpo); font-weight: 600; color: var(--texto); }
.cal-seta {
  display: flex; width: 26px; height: 26px; align-items: center; justify-content: center;
  border: none; border-radius: var(--raio-p); background: none; color: var(--muted); cursor: pointer;
}
.cal-seta:hover { color: var(--texto); background: var(--hover); }
.cal-dias, .cal-grelha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-dias span {
  text-align: center; font-size: var(--t-micro); font-weight: 700; color: var(--muted2);
  letter-spacing: .06em; padding-bottom: 4px;
}
.cal-dia {
  height: 28px; border: 1px solid transparent; border-radius: var(--raio-p);
  background: none; color: var(--texto2); font-family: inherit;
  font-size: var(--t-corpo); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .12s, color .12s;
}
.cal-dia:hover { background: var(--hover); color: var(--texto); }
.cal-dia.hoje { border-color: var(--linha-forte); }
.cal-dia.posto { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); font-weight: 700; }
.cal-meses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.cal-mes-op {
  height: 32px; border: 1px solid transparent; border-radius: var(--raio-p);
  background: none; color: var(--texto2); font-family: inherit; font-size: var(--t-corpo); cursor: pointer;
}
.cal-mes-op:hover { background: var(--hover); color: var(--texto); }
.cal-mes-op.posto { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); font-weight: 700; }
.cal-hoje {
  width: 100%; margin-top: 8px; padding: 7px; border: none; border-top: 1px solid var(--linha-fina);
  background: none; color: var(--muted); font-family: inherit; font-size: var(--t-corpo);
  font-weight: 600; cursor: pointer;
}
.cal-hoje:hover { color: var(--lima); }

/* Copiar: só o ícone, sem contorno. O visto verde confirma e volta atrás. */
.copiar-ic {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--raio-p);
  background: none; color: var(--muted2); cursor: pointer;
  transition: color .15s, background-color .15s;
}
.copiar-ic:hover { color: var(--lima); background: rgb(var(--lima-rgb) / .1); }
.copiar-ic.feito { color: var(--verde); }

/* A pergunta antes de apagar. */
.confirmar-tx { font-size: var(--t-base); line-height: 1.6; color: var(--texto3); margin: 0; }
.pe-accoes { display: flex; justify-content: flex-end; gap: 8px; }

/* ══════════════════════════ LINK, FILA, CONVERSA ═════════════════════════ */
.link-caixa { display: flex; align-items: center; gap: 10px; background: var(--fundo2); border: 1px solid rgb(var(--lima-rgb) / .25); border-radius: var(--raio-p); padding: 0 10px 0 12px; height: var(--h-g); }
.link-caixa .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lima); }
/* Dentro de uma tabela o URL inteiro esticava a celula e empurrava o botao
   Copiar 195px para fora do modal, onde nao se lhe chegava. A caixa passa a
   ter largura propria e o endereco corta-se com reticencias — quem precisa
   dele copia-o, nao o le. */
td .link-caixa { width: min(360px, 42vw); }
.rotulo-solto { font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 7px; }


.conversa { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
.msg { max-width: 76%; padding: 9px 12px; border-radius: var(--raio-p); font-size: var(--t-corpo); line-height: 1.5; border: 1px solid var(--linha); }
.msg .quem { font-size: var(--t-micro); font-weight: 500; color: var(--muted2); margin-bottom: 3px; }
.msg.entrada { align-self: flex-start; background: var(--painel2); }
.msg.saida { align-self: flex-end; background: rgb(var(--lima-rgb) / .07); border-color: rgb(var(--lima-rgb) / .2); }
.msg.nota { align-self: flex-end; background: rgba(167, 139, 250, .07); border-color: rgba(167, 139, 250, .2); }
.msg.sistema { align-self: center; background: none; border-style: dashed; color: var(--muted2); font-size: var(--t-mini); text-align: center; max-width: 92%; }

/* ════════════════════════════════ GRÁFICOS ═══════════════════════════════ */
.grafico { width: 100%; display: block; }
.grafico-vazio { min-height: 160px; display: flex; align-items: center; justify-content: center; color: var(--muted2); font-size: var(--t-corpo); }
.grafico .eixo { fill: var(--muted2); font-size: var(--t-micro); font-weight: 500; }
.grafico .guia { pointer-events: none; }

/* O cabeçalho do cartão do Revenue: o número grande e a legenda numa linha. */
.heroi-num { font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-heroi); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: -2px; }
.heroi-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 14px; font-size: var(--t-mini); font-weight: 500; color: var(--muted); }
.heroi-meta span { display: inline-flex; align-items: center; gap: 6px; }
.heroi-meta i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.heroi-meta b { color: var(--texto2); font-weight: 600; font-variant-numeric: tabular-nums; }
.grafico .serie-nome { fill: #9a9a9a; font-size: var(--t-micro); font-weight: 500; }
.grafico .rede { stroke: rgb(var(--tinta-rgb) / .05); stroke-width: 1; }
.grafico .zona { fill: transparent; cursor: crosshair; }

.dica-grafico {
  position: fixed; z-index: 9800; pointer-events: none; transform: translate(-50%, -100%);
  background: var(--painel2); border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
  padding: 9px 11px; font-size: var(--t-mini); line-height: 1.6; white-space: nowrap;
}
.dica-grafico .d { color: var(--muted2); font-weight: 500; margin-bottom: 3px; }
.dica-grafico .r { display: flex; align-items: center; gap: 7px; color: var(--texto2); }
.dica-grafico .r i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.dica-grafico .r b { margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; color: #fff; }

/* A etiqueta do gráfico do Revenue: cola-se ao ponteiro e leva a borda da cor
   da série, como no MiniChart do portal. */
.dica-mini {
  position: absolute; z-index: 10; pointer-events: none;
  background: var(--painel); border: 1px solid; border-radius: var(--raio-p);
  padding: 6px 10px; font-size: var(--t-mini); line-height: 1.6; white-space: nowrap; color: #fff;
}
.dica-mini .d { display: block; color: var(--muted2); font-weight: 500; }
.dica-mini .r { display: flex; align-items: center; gap: 6px; }
.dica-mini .r i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.dica-mini .r b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.grafico-datas { display: flex; justify-content: space-between; padding: 6px 2px 0; }
.grafico-datas span { font-size: var(--t-micro); font-weight: 500; color: var(--muted2); }

/* Mostrador: o arco com degradê da imagem, com o número ao centro. */
.mostrador { position: relative; display: flex; flex-direction: column; align-items: center; }
.mostrador-arco { position: relative; width: 100%; }
.mostrador-centro { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; pointer-events: none; }
.mostrador-centro b { display: block; font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-num); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mostrador-centro small { display: block; font-size: var(--t-mini); color: var(--muted2); margin-top: 2px; }
.mostrador-legenda { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.mostrador-legenda .p { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--linha); background: var(--fundo2); font-size: var(--t-mini); font-weight: 600; color: var(--texto3); }
.mostrador-legenda .p i { width: 7px; height: 7px; border-radius: 50%; display: block; }

.rosca-caixa { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rosca { position: relative; flex-shrink: 0; }
.rosca-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.rosca-centro b { font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-pagina); font-weight: 700; font-variant-numeric: tabular-nums; }
.rosca-centro small { font-size: var(--t-micro); font-weight: 500; color: var(--muted2); }
.rosca-lista { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 9px; }
.rosca-lista .li { display: flex; align-items: center; gap: 9px; font-size: var(--t-corpo); min-width: 0; }
.rosca-lista .li .p { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rosca-lista .li .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto2); }
.rosca-lista .li .n { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Lista ordenada com barra, como o «Top 5 Leagues» da referência. */
.ranking { display: flex; flex-direction: column; gap: 14px; }
.rank { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.rank .n { width: 28px; height: 28px; border-radius: 50%; background: var(--fundo2); border: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; font-size: var(--t-mini); font-weight: 700; color: var(--muted); }
.rank .tx { min-width: 0; }
.rank .nome { font-size: var(--t-corpo); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .trilho { height: 5px; border-radius: 999px; background: var(--linha-fina); overflow: hidden; margin-top: 6px; }
.rank .cheio { height: 100%; border-radius: 999px; background: var(--lima); }
.rank .pct { font-size: var(--t-corpo); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Funil */
.funil { display: flex; flex-direction: column; gap: 14px; }
.funil-passo { min-width: 0; }
.funil-topo { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-corpo); color: var(--muted); margin-bottom: 6px; }
.funil-topo b { color: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.funil-bar { display: block; height: 8px; border-radius: 999px; background: var(--linha-fina); overflow: hidden; }
.funil-bar i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: var(--lima); }
.funil-passo:nth-child(1) .funil-bar i { background: var(--muted2); }
.funil-passo:nth-child(2) .funil-bar i { background: var(--laranja); }
.funil-passo:nth-child(4) .funil-bar i { background: var(--verde); }
.funil-taxa { display: block; margin-top: 5px; font-size: var(--t-mini); color: var(--muted2); }

/* Encostada ao campo de cima parecia parte dele. Fica-lhe um degrau de ar. */
.campo + .aviso, input + .aviso, .aviso + .aviso, .campo + .campo { margin-top: 12px; }
/* Numa grelha, as colunas já partilham a mesma linha e o `gap` faz a
   separação. A margem vertical dos campos empilhados não pode baixar a
   segunda coluna. */
.grelha > .campo + .campo { margin-top: 0; }
.aviso { padding: 11px 13px; border-radius: var(--raio-p); font-size: var(--t-corpo); font-weight: 500; line-height: 1.55; border: 1px solid; }
.aviso.erro { background: rgba(255, 77, 77, .07); border-color: rgba(255, 77, 77, .26); color: #ff9c9c; }
.aviso.bom { background: rgb(var(--lima-rgb) / .06); border-color: rgb(var(--lima-rgb) / .26); color: var(--lima); }
.aviso.nota { background: var(--hover); border-color: var(--linha); color: var(--muted); }
.aviso.alerta { background: rgba(255, 159, 10, .07); border-color: rgba(255, 159, 10, .3); color: #ffc46b; }
.aviso b { color: var(--texto2); font-weight: 600; }

/* Quatro abas nao cabem num telemovel: em vez de partirem o texto, a tira
   corre na horizontal. A barra de rolagem fica escondida. */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba { height: var(--h-g); padding: 0 14px; white-space: nowrap; font-size: var(--t-corpo); font-weight: 600; color: var(--muted2); background: none; border: none; border-bottom: 1px solid transparent; margin-bottom: -1px; cursor: pointer; font-family: inherit; }
.aba:hover { color: var(--texto2); }
.aba.on { color: var(--lima); border-bottom-color: var(--lima); }

/* ════════════════════════════════ RODAPÉ ═════════════════════════════════ */
.rodape {
  margin-top: 32px; padding: 16px 24px; border-top: 1px solid var(--linha-fina);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--t-mini); font-weight: 500; color: var(--muted2); letter-spacing: .02em;
}
.rodape .nome { color: var(--texto3); font-weight: 600; }

/* ══════════════════════════════ ANIMAÇÕES ════════════════════════════════
   Os tempos e as curvas do portal (app-shell-core.css). A classe entra quando
   a página monta e sai 1,8s depois, para um redimensionar não repetir tudo. */
@keyframes deBarraSobe { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes deLinhaDesenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes deAparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes deRoscaEnche { from { stroke-dasharray: 0 400; } }
@keyframes deCresce { from { width: 0; } }
@keyframes deEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
svg.anima .a-barra { transform-box: fill-box; transform-origin: 50% 100%; animation: deBarraSobe 900ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
svg.anima .a-linha { stroke-dasharray: 1; animation: deLinhaDesenha 1100ms ease-out both; }
svg.anima .a-area { animation: deAparece 900ms ease-out 250ms both; }
svg.anima .a-ponto { animation: deAparece 350ms ease-out both; animation-delay: calc(400ms + var(--i, 0) * 25ms); }
svg.anima .a-rosca { animation: deRoscaEnche 1000ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 110ms); }
svg.anima .a-arco { stroke-dasharray: 1; animation: deLinhaDesenha 1200ms cubic-bezier(.22, 1, .36, 1) both; }
.rank .cheio, .funil-bar i { animation: deCresce 900ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
/* Cada página entra de baixo, bloco a bloco. O painel trata das suas colunas
   com a classe `entra`; as outras páginas apanham a regra genérica. */
.conteudo > div:not(.painel-grelha) > *,
.entra > * { animation: deEntra 420ms cubic-bezier(.22, 1, .36, 1) both; }
.conteudo > div > *:nth-child(1), .entra > *:nth-child(1) { animation-delay: 0ms; }
.conteudo > div > *:nth-child(2), .entra > *:nth-child(2) { animation-delay: 60ms; }
.conteudo > div > *:nth-child(3), .entra > *:nth-child(3) { animation-delay: 120ms; }
.conteudo > div > *:nth-child(4), .entra > *:nth-child(4) { animation-delay: 180ms; }
.conteudo > div > *:nth-child(n+5), .entra > *:nth-child(n+5) { animation-delay: 240ms; }

/* ═════════════════════════════ ECRÃ DE ENTRADA ══════════════════════════
   O desenho está mais abaixo, em «ENTRADA V2». Aqui fica o que é comum. */
body.entrada { display: block; }

/* O olho da palavra-passe. Fica dentro do campo, e o campo abre-lhe espaço à
   direita para o texto nunca lhe passar por baixo. */
.campo-olho { position: relative; display: block; }
.campo-olho input { width: 100%; padding-right: 46px; }
.olho {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  border: none; background: none; color: var(--muted2); cursor: pointer;
  transition: color .15s, background-color .15s;
}
.olho svg { width: 18px; height: 18px; }
.olho:hover { color: var(--texto2); background: var(--hover); }
.olho[aria-pressed="true"] { color: var(--lima); }

/* Quem está dentro, no canto da barra. O tamanho vinha inline e ganhava à
   media query do telemóvel; agora desce com a escala como tudo o resto. */
.quem-entrou { display: flex; align-items: center; gap: 10px; }
.quem-tx { text-align: right; line-height: 1.3; min-width: 0; }
.quem-entrou .nome { font-size: var(--t-corpo); font-weight: 600; }

/* ══════════════════════════════ TELEMÓVEL ═══════════════════════════════ */
.menu-botao { display: none; }
.menu-veu { display: none; }
@media (max-width: 1100px) {
  .painel-grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duas-linhas { grid-row: auto; }
}
@media (max-width: 900px) {
  .sidebar { display: none; }
  .painel-grelha { grid-template-columns: minmax(0, 1fr); }
  .duas-linhas { grid-row: auto; }
  .pilha { grid-template-rows: none; }
  .menu-botao { display: inline-flex; align-items: center; justify-content: center; width: var(--h-m); height: var(--h-m); flex-shrink: 0; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); background: transparent; color: var(--texto2); cursor: pointer; }
  .menu-botao[aria-expanded="true"] { color: var(--lima); border-color: rgb(var(--lima-rgb) / .4); }
  .menu-veu { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .64); }
  /* O menu era um painel flutuante com contorno lima e items encostados uns
     aos outros. Passa a ser uma folha que sai do lado, encostada à esquerda
     como a barra lateral que substitui: fundo liso, linha fina a separar os
     grupos, e o item onde se está marcado por uma barra de lima à esquerda —
     o mesmo sinal do desktop. */
  .menu-painel {
    position: fixed; z-index: 80; left: 0; top: 0; bottom: 0; width: min(282px, 84vw);
    overflow-y: auto; padding: 12px 10px;
    background: var(--painel); border: none; border-right: 1px solid var(--linha-forte);
    border-radius: 0;
    animation: deLado 220ms cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes deLado { from { transform: translateX(-100%); } to { transform: none; } }
  @media (prefers-reduced-motion: reduce) { .menu-painel { animation: none; } }
  .menu-painel .nav-bloco { gap: 1px; }
  .menu-painel .nav-grupo {
    padding: 0 12px; margin: 14px 0 6px;
    font-size: var(--t-micro); letter-spacing: .1em; color: var(--muted2);
  }
  .menu-painel .nav-bloco:first-child .nav-grupo { margin-top: 0; }
  .menu-painel .nav-item { height: 44px; padding: 0 12px; border-radius: var(--raio-p); }
  .menu-painel .nav-item .atalho { display: none !important; }
  .menu-painel .nav-item.on { background: rgb(var(--lima-rgb) / .09); }
  .menu-painel .nav-item.on::before {
    display: block; content: ''; position: absolute; left: -10px; top: 50%;
    transform: translateY(-50%); width: 3px; height: 22px;
    border-radius: 0 3px 3px 0; background: var(--lima);
  }
  .menu-painel .nav-filhos .nav-item { height: 40px; padding-left: 34px; }
  /* ── A escala no telemóvel ───────────────────────────────────
     Num ecrã de 390px os títulos e os números grandes do desktop lêem-se
     como letra gigante, por isso descem um degrau. A letra pequena não: um
     rótulo de 10px lê-se mal num telemóvel na mão, e o micro até sobe meio
     ponto. As regras de cima ficam como estão e passam a valer outro número. */
  :root {
    --t-micro: 11px; --t-mini: 11.5px; --t-corpo: 12.5px; --t-base: 13.5px;
    --t-pagina: 15px; --t-num: 20px; --t-heroi: 24px;
    --h-g: 40px;
  }
  body { font-size: var(--t-base); }
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar h1 .mao svg { width: 16px; height: 16px; }
  .card-cab { margin-bottom: 12px; }
  .linha-stat { padding: 10px 12px; gap: 10px; }
  .linha-stat .ico { width: 28px; height: 28px; }
  .heroi-meta { gap: 10px; margin: 6px 0 12px; }
  thead th { padding: 10px 12px; letter-spacing: .6px; }
  tbody td { padding: 11px 12px; }
  .chip { padding: 2px 8px; }
  .vazio { padding: 26px 12px; }
  .conteudo { padding: 14px 14px 30px; }
  .rodape { padding: 14px; }
  .card { padding: 14px; }
  /* Mesma regra do desktop, com o recuo do telemóvel: a margem de baixo só
     quando a tabela é a última coisa do cartão. */
  .tabela-caixa { margin: 0 -14px; }
  .tabela-caixa:last-child { margin-bottom: -14px; }
  .paginacao { margin: 0 -14px -14px; padding: 12px 14px; }
  tfoot td { padding: 12px 14px; }
  .mosaico { grid-template-columns: minmax(0, 1fr); }
  .modal { max-height: 92dvh; }
  .modal-corpo { padding: 16px; }
  .modal-cab, .modal-pe { padding: 14px 16px; }
  /* Os filtros a toda a largura enchiam o primeiro ecrã antes de se ver uma
     linha de dados. Passam a dois por linha, e só o de procurar fica inteiro. */
  .barra { gap: 8px; }
  .barra .campo { flex: 1 1 calc(50% - 4px); }
  .barra .campo:last-child { flex: 1 1 100%; }
  /* Os botões de texto vão aos pares, da mesma largura; um sozinho enche a
     linha. Com 100% cada um ia para a sua linha — os cinco estados do lead
     eram cinco filas — e o botão só de ícone esticava até ser uma barra. */
  .barra > .btn:not(.icone) { flex: 1 1 calc(50% - 4px); }
  .barra > .btn.icone { flex: none; }
  .barra > .sel { flex: 1 1 100%; }
  /* A linha de acções do bot (Fluxos) segue a mesma regra: o bot a toda a
     largura e os quatro botões em duas filas iguais. */
  .fx-topo > .sel { flex: 1 1 100%; }
  /* O que só cabe em ecrã largo: «Configurações do bot» fica «Configurações»
     e cabe em meia linha ao lado de «Estatísticas». */
  .so-largo { display: none; }
  .fx-topo > .btn { flex: 1 1 calc(50% - 5px); }  /* o gap dela é 10px (chatbots.css) */
  /* O subtítulo da barra de topo numa linha só: partido em duas, a barra
     mudava de altura de página para página. */
  .topbar .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card-cab .espaco { display: none; }
  .quem-tx { display: none; }
  .card-cab > .btn { width: 100%; }
}
@media (pointer: coarse) {
  /* Dedo em vez de rato: sobe o degrau pequeno da escala, e tudo o que dele
     depende sobe junto. Uma regra, não dez. */
  :root { --h-p: var(--h-m); }
  .btn.pequeno { padding: 0 14px; }
  /* Menos no botão só de ícone: com os 14px de cada lado, num quadrado de 36
     sobravam 6px para o ícone e o «+» e o «⋯» viravam um ponto e um traço. */
  .btn.icone.pequeno { padding: 0; }
  /* Os ícones soltos — limpar a data, copiar, limpar a procura — tinham 20px
     de alvo, que a um polegar é o mesmo que não ter nenhum. */
  .cal-limpar, .copiar-ic, .cc-limpar, .toast-x { width: 30px; height: 30px; }
  .cal-limpar { right: 32px; }
  .cal-dia { height: 34px; }
  .sel-opcao { padding: 12px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  svg.anima *, .rank .cheio, .funil-bar i, .menu-painel, .entra > *,
  .conteudo > div > * { animation: none !important; }
}


/* ══════════════════════════ SINO E TOASTS ════════════════════════════════
   O sino na barra de topo, com o contador do que está por ver; a pilha de
   avisos sai do lado direito, EM BAIXO, e desliza de fora para dentro. */
.sino-caixa { position: relative; flex-shrink: 0; }
.sino {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: var(--h-m); height: var(--h-m); border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: transparent; color: var(--muted); cursor: pointer;
  transition: color .18s, border-color .18s, background-color .18s;
}
.sino:hover { color: var(--texto); border-color: var(--linha-forte); background: var(--hover); }
.sino.tem { color: var(--lima); border-color: rgb(var(--lima-rgb) / .32); }
.sino-conta {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--lima); color: var(--lima-tinta);
  font-size: var(--t-micro); font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--fundo);
}
.sino-painel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 9200;
  /* Era alto de mais: quatro entradas à vista chegam, o resto rola. */
  width: min(288px, calc(100vw - 28px)); max-height: 328px; overflow-y: auto;
  background: var(--painel); border: 1px solid var(--linha-forte); border-radius: var(--raio);
  animation: deEntra 180ms cubic-bezier(.22, 1, .36, 1) both;
}
.sino-cab {
  position: sticky; top: 0; background: var(--painel); padding: 9px 12px;
  border-bottom: 1px solid var(--linha); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted2);
}

.sino-item { display: flex; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--linha-fina); transition: background .15s; }
.sino-item:last-child { border-bottom: none; }
.sino-item:hover { background: var(--hover); }
.sino-ic, .toast-ic {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid; display: flex; align-items: center; justify-content: center;
}

.sino-tx { min-width: 0; display: flex; flex-direction: column; }
.sino-tx b { font-size: var(--t-mini); font-weight: 600; color: var(--texto); }
.sino-tx span { font-size: var(--t-mini); color: var(--texto3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sino-tx small { font-size: var(--t-micro); color: var(--muted2); }
.sino-vazio { padding: 22px 12px; text-align: center; color: var(--muted2); font-size: var(--t-corpo); }

.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 9700;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  max-width: min(340px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: var(--raio); background: var(--painel2);
  border: 1px solid var(--linha-forte);
  animation: deToast 320ms cubic-bezier(.22, 1, .36, 1) both;
}
.toast-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.toast-tx b { font-size: var(--t-corpo); font-weight: 600; color: var(--texto); }
.toast-tx span { font-size: var(--t-corpo); color: var(--texto3); overflow-wrap: anywhere; }
.toast-x { background: none; border: none; color: var(--muted2); cursor: pointer; padding: 3px; border-radius: var(--raio-p); display: flex; flex-shrink: 0; }
.toast-x:hover { color: var(--texto); }
@keyframes deToast { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast, .sino-painel { animation: none; } }
@media (max-width: 900px) {
  .toasts { right: 10px; bottom: 10px; left: 10px; max-width: none; }
}

/* A faixa que fecha um bloco de cartões: a nota à esquerda, a acção à
   direita, e um contorno igual ao dos cartões para o botão deixar de flutuar
   sozinho no meio do fundo. */
.faixa-accoes {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; padding: 12px 14px;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
}
.faixa-accoes > span { font-size: var(--t-corpo); font-weight: 500; color: var(--muted2); min-width: 0; }

/* ═══════════════════════════ O QUADRO DO CALL CENTER ═══════════════════════
   Eram quatro cartões com listas dentro, e lia-se como quatro tabelas ao lado
   umas das outras. Agora é um quadro: a barra diz quantos esperam, cada coluna
   tem a cor do estado e cada lead é um cartão com iniciais, criativo e há
   quanto tempo chegou. O que interessa a quem está de serviço — quem falta
   atender e há quanto tempo — lê-se sem abrir nada. */
.cc-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio);
}
.cc-espera { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cc-espera b {
  font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-num); font-weight: 700;
  letter-spacing: -0.03em; color: var(--lima); font-variant-numeric: tabular-nums;
}
.cc-espera span { font-size: var(--t-corpo); font-weight: 500; color: var(--muted); }
.cc-procura {
  position: relative; display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex: 0 1 320px; min-width: 0;
  height: var(--h-m); padding: 0 8px 0 11px; border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: var(--fundo2); color: var(--muted2);
  transition: border-color .15s;
}
.cc-procura:focus-within { border-color: var(--lima); color: var(--lima); }
.cc-procura input {
  height: var(--h-m); min-width: 0; flex: 1; padding: 0; border: none; background: none;
  color: var(--texto); font-size: var(--t-corpo);
}
.cc-procura input:focus { outline: none; border: none; box-shadow: none; }
.cc-limpar {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--raio-p);
  background: none; color: var(--muted2); cursor: pointer;
}
.cc-limpar:hover { color: var(--texto); background: var(--hover); }

/* As quatro colunas têm a mesma altura mesmo quando uma está vazia: um quadro
   com uma coluna a meio da altura das outras lê-se como um erro. */
.cc-quadro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.cc-coluna {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px;
}
.cc-cab { display: flex; align-items: center; gap: 8px; }
.cc-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--cor); flex-shrink: 0; }
.cc-cab h2 {
  font-family: 'Sora', 'Manrope', sans-serif; font-size: var(--t-base); font-weight: 600;
  letter-spacing: -0.01em; color: var(--texto); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-conta {
  margin-left: auto; flex-shrink: 0; min-width: 22px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--fundo2); border: 1px solid var(--linha);
  font-size: var(--t-micro); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cc-nota {
  margin: 3px 0 10px 15px; font-size: var(--t-micro); font-weight: 500;
  color: var(--muted2); letter-spacing: .02em;
}
.cc-pilha {
  display: flex; flex-direction: column; gap: 6px; flex: 1;
  max-height: max(300px, calc(100dvh - 340px)); overflow-y: auto;
  scrollbar-width: thin;
}

.cc-cartao {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  background: var(--fundo2); border: 1px solid var(--linha); border-left: 2px solid transparent;
  border-radius: var(--raio-p);
  transition: border-color .15s, background-color .15s, transform .12s;
}
.cc-cartao:hover { background: var(--painel2); border-color: var(--linha-forte); border-left-color: var(--cor); }
.cc-cartao.tem-msg { border-left-color: var(--cor); }
.cc-disco {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--cor) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor) 34%, transparent);
  color: var(--cor); font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em;
}
.cc-meio { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cc-nome {
  font-size: var(--t-corpo); font-weight: 600; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-criativo {
  font-size: var(--t-micro); font-weight: 500; color: var(--muted2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.cc-quando { font-size: var(--t-micro); font-weight: 600; color: var(--muted2); font-variant-numeric: tabular-nums; }
.cc-msg {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--t-micro); font-weight: 700; color: var(--cor);
}
.cc-vazia {
  display: flex; align-items: center; justify-content: center; min-height: 72px;
  padding: 20px 10px; text-align: center; font-size: var(--t-micro); font-weight: 500;
  color: var(--muted2); border: 1px dashed var(--linha); border-radius: var(--raio-p);
}
/* Quantos ficaram fora do topo da coluna. Dezoito mil cartões não se desenham;
   dizer que existem é melhor do que a coluna fingir que acaba ali. */
.cc-mais {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha-fina);
  font-size: var(--t-micro); font-weight: 500; color: var(--muted2); text-align: center;
}

@media (max-width: 1100px) { .cc-quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .cc-quadro { grid-template-columns: minmax(0, 1fr); }
  .cc-pilha { max-height: 300px; }
  .cc-procura { flex: 1 1 100%; margin-left: 0; }
}

/* ─────────────────────── CALL CENTER · TEMPO REAL ────────────────────────
   Os widgets da aba «Tempo real»: a rosca da disposição ao lado do gráfico da
   fila, e por baixo a lista com a linha de totais. A rosca é o cartão estreito
   e o gráfico o largo — é esse par que dá o ritmo à página. */
/* Só as colunas: o `display: grid` e o `gap` vêm da `.grelha`, e com ela vêm
   também as regras que mantêm os cartões alinhados e afastados do seguinte. */
.cc-widgets { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.cc-widgets > .card { display: flex; flex-direction: column; }
.cc-widgets > .card > .rosca-caixa { flex: 1; align-items: center; }
.cc-w-sub {
  font-size: var(--t-mini); font-weight: 500; color: var(--muted); margin: -6px 0 14px;
}
.cc-w-sub .nome { color: var(--lima); font-weight: 600; }
.cc-w-sub b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linha-fina); }
.cc-legenda .li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-mini); font-weight: 500; color: var(--texto3); }
.cc-legenda .li i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* O nome do lead na lista abre a ficha: é um botão, mas lê-se como uma linha. */
.cc-lead {
  --cor: var(--lima);
  display: flex; align-items: center; gap: 10px; min-width: 0;
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
.cc-lead-tx { display: flex; flex-direction: column; min-width: 0; }
.cc-lead-nome { font-size: var(--t-corpo); font-weight: 600; color: var(--texto); }
.cc-lead:hover .cc-lead-nome { color: var(--lima); }
.cc-lead-sub { font-size: var(--t-micro); font-weight: 500; color: var(--muted2); }
.cc-canal {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px;
  font-variant-numeric: tabular-nums; color: var(--texto3);
}
.cc-canal svg { color: var(--muted2); }

@media (max-width: 1100px) { .cc-widgets { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════ CALL CENTER · CONVERSAS (24/09) ══════════════════
   A caixa de chat. Duas colunas que ocupam a altura do ecrã: a lista rola por
   dentro e a conversa também, para o campo de escrever ficar sempre à vista.
   No telemóvel é uma coluna de cada vez, como em qualquer app de mensagens. */
.cx {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  height: calc(100dvh - 200px); min-height: 520px;
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--painel); overflow: hidden;
}
.cx-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--linha); }
.cx-procura { display: flex; align-items: center; gap: 8px; margin: 12px 12px 8px; height: var(--h-g); padding: 0 12px;
  border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--fundo2); color: var(--muted); }
.cx-procura input { flex: 1; min-width: 0; background: none; border: 0; color: var(--texto); font: inherit; font-size: var(--t-corpo); outline: none; }
.cx-filtros { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.cx-filtro { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--linha); background: none;
  color: var(--muted); font: inherit; font-size: var(--t-mini); font-weight: 600; cursor: pointer; }
.cx-filtro:hover { color: var(--texto2); }
.cx-filtro.on { color: var(--lima-tinta); background: var(--lima); border-color: var(--lima); }
.cx-itens { flex: 1; overflow-y: auto; min-height: 0; }
.cx-item { display: flex; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-bottom: 1px solid var(--linha-fina);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; }
.cx-item:hover { background: var(--hover); }
.cx-item.on { background: rgb(var(--lima-rgb) / .05); }
.cx-item.on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lima); }
.cx-disco { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--t-mini); font-weight: 800; color: var(--cor, var(--lima));
  background: color-mix(in srgb, var(--cor, var(--lima)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor, var(--lima)) 35%, transparent); }
.cx-disco.grande { width: 40px; height: 40px; font-size: var(--t-corpo); }
/* Com foto, o disco perde o fundo e o contorno de cor: a cor do estado já
   está no chip ao lado, e um anel colorido à volta de uma cara lê-se mal. */
.cx-disco.com-foto, .cc-disco.com-foto { background: var(--hover); border-color: var(--linha, rgb(var(--tinta-rgb) / .08)); overflow: hidden; padding: 0; }
.cx-disco img, .cc-disco img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cx-item-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.cx-item-linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cx-item-nome { flex: 1; min-width: 0; font-size: var(--t-corpo); font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-item-hora { font-size: var(--t-micro); color: var(--muted2); flex: none; }
.cx-item-ultima { flex: 1; min-width: 0; font-size: var(--t-mini); color: var(--texto3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-item.por-ler .cx-item-nome, .cx-item.por-ler .cx-item-ultima { color: var(--texto); font-weight: 700; }
.cx-item.por-ler .cx-item-hora { color: var(--lima); }
.cx-item-sub { font-size: var(--t-micro); color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--lima); color: var(--lima-tinta);
  font-size: var(--t-micro); font-weight: 800; display: grid; place-items: center; }
.cx-vazio { padding: 28px 18px; text-align: center; color: var(--muted); font-size: var(--t-corpo); line-height: 1.5; }
.cx-vazio p { margin-top: 8px; }
.cx-vazio a, .cx-nenhuma a { color: var(--lima); }
.cx-rodape { padding: 10px 12px; border-top: 1px solid var(--linha); font-size: var(--t-micro); color: var(--muted2); }
.cx-aviso { margin: 8px 12px; padding: 8px 10px; border-radius: var(--raio-p); font-size: var(--t-mini);
  color: var(--vermelho); border: 1px solid rgba(255, 77, 77, .3); background: rgba(255, 77, 77, .06); }

.cx-conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cx-nenhuma { align-items: center; justify-content: center; text-align: center; color: var(--texto3); font-size: var(--t-corpo); gap: 6px; }
.cx-nenhuma > div { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 320px; }
.cx-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.cx-voltar { display: none; width: var(--h-m); height: var(--h-m); border-radius: var(--raio-p); border: 1px solid var(--linha);
  background: none; color: var(--texto2); place-items: center; cursor: pointer; flex: none; }
.cx-cab-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.cx-cab-nome { font-size: var(--t-base); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cab-sub { font-size: var(--t-micro); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-cab-accoes { display: flex; gap: 6px; align-items: center; flex: none; }
.cx-estado .sel-gatilho { height: var(--h-m); padding: 0 10px; font-size: var(--t-corpo); font-weight: 600;
  color: var(--cor); background: color-mix(in srgb, var(--cor) 9%, var(--painel)); border-color: color-mix(in srgb, var(--cor) 32%, transparent); }
.cx-estado .sel-gatilho:hover, .cx-estado .sel-gatilho[aria-expanded="true"] { border-color: color-mix(in srgb, var(--cor) 55%, transparent); }
.cx-estado .sel-gatilho .seta { color: var(--cor); }
.cx-contexto { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 16px; border-bottom: 1px solid var(--linha);
  font-size: var(--t-micro); color: var(--texto3); background: var(--fundo2); }
.cx-contexto b { font-weight: 600; color: var(--muted2); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }

.cx-mensagens { flex: 1; overflow-y: auto; min-height: 0; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.cx-msg { max-width: min(72%, 560px); padding: 8px 12px 6px; border-radius: 14px; font-size: var(--t-corpo); line-height: 1.5;
  border: 1px solid var(--linha); overflow-wrap: anywhere; }
.cx-msg.entrada { align-self: flex-start; background: var(--painel2); border-bottom-left-radius: 4px; }
.cx-msg.saida { align-self: flex-end; background: rgb(var(--lima-rgb) / .08); border-color: rgb(var(--lima-rgb) / .22); border-bottom-right-radius: 4px; }
.cx-msg.saida.bot { background: rgba(77, 111, 255, .08); border-color: rgba(77, 111, 255, .25); }
.cx-msg.nota { align-self: flex-end; background: rgba(167, 139, 250, .08); border: 1px dashed rgba(167, 139, 250, .35); }
.cx-msg-quem { font-size: var(--t-micro); font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.cx-msg.saida .cx-msg-quem { color: var(--lima); }
.cx-msg.saida.bot .cx-msg-quem { color: var(--azul); }
.cx-msg.nota .cx-msg-quem { color: var(--roxo); }
.cx-msg-tx { white-space: pre-wrap; }
.cx-msg-tx a { color: var(--lima); text-decoration: underline; }
.cx-msg-hora { font-size: var(--t-micro); color: var(--muted2); text-align: right; margin-top: 2px; }
.cx-sistema { align-self: center; max-width: 90%; text-align: center; font-size: var(--t-micro); color: var(--muted2);
  padding: 3px 10px; border: 1px dashed var(--linha); border-radius: 12px; }

.cx-escrever { border-top: 1px solid var(--linha); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.cx-escrever.nota { background: rgba(167, 139, 250, .04); }
.cx-escrever-linha { display: flex; gap: 8px; align-items: flex-end; }
.cx-escrever textarea { flex: 1; min-width: 0; min-height: var(--h-g); max-height: 140px; resize: vertical; padding: 10px 12px;
  border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--fundo2); color: var(--texto);
  font: inherit; font-size: var(--t-corpo); line-height: 1.45; }
.cx-escrever textarea:focus { outline: none; border-color: rgb(var(--lima-rgb) / .45); }
.cx-escrever.nota textarea:focus { border-color: rgba(167, 139, 250, .5); }
.cx-escrever-linha .btn { height: var(--h-g); }
.cx-escrever-accoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cx-ferr { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--linha); background: none; color: var(--muted);
  font: inherit; font-size: var(--t-mini); font-weight: 600; cursor: pointer; }
.cx-ferr:hover { color: var(--texto2); }
.cx-ferr.on { color: var(--roxo); border-color: rgba(167, 139, 250, .4); }
.cx-prontas { display: flex; flex-direction: column; gap: 4px; }
.cx-pronta { text-align: left; padding: 7px 10px; border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--fundo2);
  color: var(--texto2); font: inherit; font-size: var(--t-mini); cursor: pointer; }
.cx-pronta:hover { border-color: rgb(var(--lima-rgb) / .35); color: var(--texto); }

@media (max-width: 900px) {
  .cx { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 170px); }
  .cx.com-aberta .cx-lista { display: none; }
  .cx:not(.com-aberta) .cx-conversa { display: none; }
  .cx-voltar { display: grid; }
  .cx-cab { flex-wrap: wrap; }
  .cx-cab-accoes { width: 100%; }
  .cx-cab-accoes .cx-estado { flex: 1; }
  .cx-msg { max-width: 88%; }
}

.passos { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-corpo); color: var(--texto2); line-height: 1.5; }
.passos a, .texto-card a { color: var(--lima); }
.texto-card { font-size: var(--t-corpo); color: var(--texto2); line-height: 1.55; }

/* ═════════════════════════ APARELHOS E APP INSTALADA ══════════════════════
   O painel corre no computador, no tablet e no telemóvel, e instala-se como
   app: Android, iPhone e iPad, Chrome e Edge no computador, Safari no Mac.

   O recorte do ecrã. Com a app instalada no iPhone, a barra de estado é
   translúcida e o painel vai até ao topo; em horizontal, o recorte fica de
   lado. As barras e as margens somam o que o sistema ocupa. No browser estes
   valores valem 0 e nada muda. */
.topbar {
  padding-top: max(16px, env(safe-area-inset-top));
  padding-right: max(24px, env(safe-area-inset-right));
}
.sidebar {
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
}
.rodape { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.toasts { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }
.veu { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
@media (max-width: 900px) {
  .topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .conteudo { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .rodape { padding-left: max(14px, env(safe-area-inset-left)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .menu-painel { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(10px, env(safe-area-inset-left)); }
  /* No telemóvel, as janelas sobem de baixo e ocupam a largura toda: é o que
     o polegar alcança e o que o iOS e o Android fazem. */
  .veu { align-items: flex-end; padding: max(12px, env(safe-area-inset-top)) 0 0; }
  .modal, .modal.largo, .modal.formulario, .modal.formulario.curto {
    max-width: none; width: 100%; height: auto; max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
    border-radius: 16px 16px 0 0; border-bottom: none;
  }
  .modal-pe { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* Dedo em vez de rato. Os campos com letra abaixo de 16px fazem o iPhone
   aproximar a página a cada toque; e os alvos pequenos que sobravam (os
   filtros das conversas, a barra de formatação das mensagens, o lápis das
   pastas, o «voltar») passam a ter onde pôr o dedo. */
@media (pointer: coarse) {
  /* !important: as regras dos componentes (a caixa da mensagem, a procura
     dos fluxos) vêm depois e davam-lhe a volta. */
  input:not([type=checkbox]):not([type=radio]), select, textarea, [contenteditable=true] { font-size: 16px !important; }
  .cx-filtro { min-height: 36px; padding-left: 12px; padding-right: 12px; }
  .sp-msg-ed .sp-msg-ferr button { min-width: 38px; height: 38px; }
  .fx-ferr .fx-procura, .fx-ferr .sel.simples .sel-gatilho { height: 40px; }
  .fx-ferr .btn.icone { width: 40px; height: 40px; }
  /* As ligações que são botões (+ Adicionar filtro, Pré-visualizar…) tinham
     27px de altura para o dedo. */
  .sp-link { min-height: 36px; display: inline-flex; align-items: center; }
  /* As ligações de texto dentro das tabelas (o nome do bot, o @utilizador)
     ganham 8px de área de toque para cima e para baixo, sem mexer na linha. */
  tbody td a:not(.btn), a.forte:not(.btn) { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .cal-limpar { width: 36px; height: 36px; }
  .fx-pasta-ed { min-width: 40px; min-height: 40px; }
  .sp-voltar { display: inline-flex; align-items: center; min-height: 36px; min-width: 36px; }
  .fx-abas button { height: 40px; }
  .fx-item, .fx-gat-linha { min-height: 44px; }
  .fx-maos button { width: 40px; height: 40px; }
  .fx-zoom button { width: 44px; height: 44px; }
}
/* Sem rato não há hover: o que só aparecia ao passar o rato fica à vista. */
@media (hover: none) {
  .nav-item .atalho { display: none !important; }
}

/* A página sem rede, que o service worker mostra quando a ligação cai. */
.offline {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); text-align: center;
}
.offline img { width: min(280px, 70vw); height: auto; margin-bottom: 8px; }
.offline h1 { font-family: 'Sora', 'Manrope', sans-serif; font-size: 20px; font-weight: 600; }
.offline p { max-width: 360px; color: var(--texto3); font-size: var(--t-base); }
.menu-fundo { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); }
.menu-fundo:empty { display: none; }
.passos-instalar { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: var(--t-base); color: var(--texto2); line-height: 1.5; }
.passos-instalar b { color: var(--texto); font-weight: 600; }
.cx-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.cx-tags .sp-tag { margin: 0 4px 0 0; height: 20px; font-size: var(--t-mini); }

/* ═════════════════════════════ O TEMA CLARO ══════════════════════════════
   As cores do SendPulse, lidas no painel deles (login.sendpulse.com/messengers)
   a 26/09: barra de topo azul-petróleo #023346 com o item activo em pílula
   ciano, fundo #f2f5f5, cartões brancos sem sombra e com cantos de 10px,
   caixas de número em #e6ecec, item lateral activo em #e1e8e8, bordas #cdd4d4,
   o verde #00b175 do botão principal no lugar do lima, o ciano #009fc1 das
   ligações, o roxo #7738ed e o vermelho #f25a3e dos avisos.

   Liga-se com `data-tema="claro"` no <html>, que o `js/tema.js` põe antes de
   a página se pintar. O escuro continua a ser o de omissão. */
:root[data-tema="claro"],
:root[data-tema="claro"] .sino-painel {
  --fundo: #f2f5f5;
  --fundo2: #ffffff;
  --painel: #ffffff;
  --painel2: #eef2f2;
  --linha: #dfe6e6;
  --linha-fina: #ecf1f1;
  --linha-forte: #cdd4d4;
  --hover: rgb(2 51 70 / 0.04);

  /* Medido nas páginas deles (início, estrutura do bot, público): títulos e
     texto das tabelas a preto, navegação e cabeçalhos em azul-petróleo, o
     secundário («há uma hora», rótulos) em #465152 e as horas em #809697. */
  --texto: #000000;
  --texto2: #023346;
  --texto3: #465152;
  --muted: #465152;
  --muted2: #5b6a6b;

  /* As cores do SendPulse escurecidas até passarem os 4,5:1 do WCAG, como
     texto sobre branco e como fundo de texto branco (o #00b175 dava 2,8). */
  --lima: #00764e;
  --lima-suave: #006a46;
  --lima-tinta: #ffffff;
  --laranja: #975800;
  --vermelho: #b3422e;
  --azul: #007189;
  --roxo: #7738ed;
  --verde: #097650;

  --lima-rgb: 0 118 78;
  --tinta-rgb: 2 51 70;
}
:root[data-tema="claro"] { color-scheme: light; }
[data-tema="claro"] * { scrollbar-color: #cdd4d4 transparent; }
[data-tema="claro"] ::-webkit-scrollbar-thumb { background: #cdd4d4; background-clip: padding-box; }
[data-tema="claro"] ::selection { color: var(--texto); }
[data-tema="claro"] input[type=date], [data-tema="claro"] input[type=month] { color-scheme: light; }

/* A barra lateral é a do SendPulse: do mesmo cinzento do fundo, item activo
   num cinzento-azulado mais escuro com o texto em azul-petróleo. */
[data-tema="claro"] .sidebar { background: var(--fundo); }
[data-tema="claro"] .nav-item { color: var(--texto2); }
[data-tema="claro"] .nav-item .ic { color: #5a7a86; }
[data-tema="claro"] .nav-item:hover { background: #e8eeee; color: var(--texto2); }
[data-tema="claro"] .nav-item.on { background: #e1e8e8; color: var(--texto2); }
[data-tema="claro"] .nav-item.on .ic { color: var(--texto2); }
[data-tema="claro"] .nav-item .conta { background: var(--lima); color: #fff; }

/* A barra de topo é a peça que faz o SendPulse: azul-petróleo, texto branco.
   As variáveis voltam ao escuro aqui dentro, e o painel do sino (que se abre a
   partir dela) volta ao claro na regra de cima. */
[data-tema="claro"] .topbar {
  background: #023346; border-bottom-color: #023346; color: #fff;
  --texto: #ffffff;
  --texto2: rgb(255 255 255 / 0.9);
  --texto3: rgb(255 255 255 / 0.75);
  --muted: rgb(255 255 255 / 0.7);
  --muted2: rgb(255 255 255 / 0.7);
  --linha: rgb(255 255 255 / 0.16);
  --linha-fina: rgb(255 255 255 / 0.08);
  --linha-forte: rgb(255 255 255 / 0.26);
  --hover: rgb(255 255 255 / 0.08);
  --tinta-rgb: 255 255 255;
  --fundo: #023346;
}
[data-tema="claro"] .topbar h1 .mao { color: #3fd9a4; }
[data-tema="claro"] .sino.tem { color: #fff; border-color: rgb(0 159 193 / .7); background: rgb(0 159 193 / .4); }
[data-tema="claro"] .sino-conta { background: #f86850; color: #fff; }

/* Os cartões de topo: o degradê vai da tinta clara da cor para o branco. */
[data-tema="claro"] .tijolo.lima { background: linear-gradient(150deg, #d9f3e9, var(--painel) 78%); }
[data-tema="claro"] .tijolo.laranja { background: linear-gradient(150deg, #fdebd0, var(--painel) 78%); }
[data-tema="claro"] .tijolo.vermelho { background: linear-gradient(150deg, #fde1db, var(--painel) 78%); }
[data-tema="claro"] .tijolo .ico,
[data-tema="claro"] .linha-stat .ico.laranja,
[data-tema="claro"] .linha-stat .ico.vermelho { color: #fff; }
[data-tema="claro"] .linha-stat .ico.branco { background: #023346; color: #fff; }

/* O que flutua por cima (menus, dicas, avisos) é branco e leva a sombra suave
   do SendPulse, que no claro é o que o separa do cartão de baixo. */
[data-tema="claro"] .sel-menu, [data-tema="claro"] .sel-procura,
[data-tema="claro"] .dica-grafico, [data-tema="claro"] .toast,
[data-tema="claro"] .sidebar.rail .nav-item[data-tip]:hover::after { background: #fff; }
[data-tema="claro"] .sel-menu, [data-tema="claro"] .dica-grafico, [data-tema="claro"] .toast,
[data-tema="claro"] .sino-painel, [data-tema="claro"] .dica-mini {
  box-shadow: 0 .5px 1px rgb(0 0 0 / .12), 0 4px 16px rgb(2 51 70 / .1);
}
[data-tema="claro"] .dica-grafico .r b, [data-tema="claro"] .dica-mini { color: var(--texto); }
[data-tema="claro"] .grafico .serie-nome { fill: var(--muted); }
[data-tema="claro"] .veu { background: rgb(2 51 70 / .45); }
[data-tema="claro"] .veu-formulario { background: rgb(2 51 70 / .5); }
[data-tema="claro"] .menu-veu { background: rgb(2 51 70 / .4); }

/* Nas tabelas do SendPulse o conteúdo é preto e o cabeçalho azul-petróleo em
   negrito; no escuro o conteúdo fica atrás, em cinzento, e o cabeçalho quase
   some. */
[data-tema="claro"] tbody td { color: var(--texto); }
/* Os identificadores (ref, click_id) são o dado secundário da linha, como o
   @utilizador e a hora no Público deles. */
[data-tema="claro"] tbody td.mono, [data-tema="claro"] tbody td .mono { color: var(--texto3); }
[data-tema="claro"] thead th { color: var(--texto2); font-weight: 700; }
[data-tema="claro"] .nav-grupo { color: var(--muted2); }

[data-tema="claro"] .aviso.erro { color: #c2391f; }
[data-tema="claro"] .aviso.alerta { color: #9a5800; }
[data-tema="claro"] .btn.primario:hover { color: #fff; }

/* ── O interruptor do tema ─────────────────────────────────────────────────
   Ao lado do sino, da mesma altura. Uma pílula com o sol e a lua, e uma bola
   que desliza para debaixo do que está ligado. */
.tema-troca {
  position: relative; display: inline-flex; align-items: center; flex-shrink: 0;
  width: 64px; height: var(--h-m); padding: 3px; border-radius: 999px;
  border: 1px solid var(--linha); background: transparent; color: var(--muted); cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.tema-troca:hover { border-color: var(--linha-forte); background: var(--hover); }
.tema-troca .bola {
  position: absolute; top: 3px; left: 3px; width: 28px; height: calc(100% - 6px);
  border-radius: 999px; background: var(--lima);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.tema-troca[aria-checked="true"] .bola { transform: translateX(28px); }
.tema-troca .ic-tema {
  position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center;
  transition: color .2s;
}
.tema-troca[aria-checked="false"] .ic-tema.lua,
.tema-troca[aria-checked="true"] .ic-tema.sol { color: var(--lima-tinta); }
[data-tema="claro"] .tema-troca .bola { background: #fff; }
[data-tema="claro"] .tema-troca[aria-checked="true"] .ic-tema.sol { color: #023346; }
@media (prefers-reduced-motion: reduce) { .tema-troca .bola { transition: none; } }
/* No telemóvel a pílula tirava 28px à saudação e cortava-lhe o nome. Fica um
   quadrado do tamanho do sino, só com o ícone do tema que está ligado. */
@media (max-width: 600px) {
  .tema-troca { width: var(--h-m); padding: 0; justify-content: center; border-radius: var(--raio-p); }
  .tema-troca .bola { display: none; }
  .tema-troca .ic-tema { flex: none; }
  .tema-troca[aria-checked="true"] .ic-tema.lua,
  .tema-troca[aria-checked="false"] .ic-tema.sol { display: none; }
  :root .tema-troca[aria-checked="false"] .ic-tema.lua,
  :root .tema-troca[aria-checked="true"] .ic-tema.sol { color: var(--texto2); }
}

/* ═════════════════════════════ ENTRADA V2 ══════════════════════════════════
   O desenho do «login v2» do Vuexy, com as nossas cores: a cena
   à esquerda e o formulário num painel de 480px à direita, com 48px por
   dentro e o formulário a 384px. Campos e botão de 38px, cantos de 6px, e os
   mesmos degraus verticais medidos na página deles. */
.v2-grelha { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 480px; }
.v2-cena { position: relative; overflow: hidden; background: var(--fundo); display: grid; place-items: center; }

/* O palco: o anel ao centro, o emblema dentro, e os dois cartões a flutuar
   como os «Profit» e «Order» deles. */
/* O palco encolhe com a altura do ecrã (60vh) e sobe um pouco: num portátil
   de 768px a onda do fundo subia por cima do anel. */
.v2-palco { position: relative; z-index: 1; width: min(520px, 80%, 60vh); aspect-ratio: 1; margin-top: -6vh; }
.v2-anel { position: absolute; inset: 12%; border-radius: 50%; background: rgb(var(--tinta-rgb) / .035);
  box-shadow: 0 0 0 1px rgb(var(--tinta-rgb) / .05), 0 0 0 28px rgb(var(--tinta-rgb) / .015); }
.v2-emblema { position: absolute; inset: 18%; width: 64%; height: auto;
  filter: drop-shadow(0 18px 40px rgb(0 0 0 / .45)); }
.v2-cartao { position: absolute; width: 36%; min-width: 150px; padding: 14px 14px 12px; border-radius: 8px;
  background: var(--painel2); box-shadow: 0 6px 24px rgb(0 0 0 / .28); display: flex; flex-direction: column; gap: 2px;
  animation: v2Flutua 6s ease-in-out infinite; }
.v2-cartao b { font-size: var(--t-base); font-weight: 600; color: var(--texto); }
.v2-cartao small { font-size: var(--t-micro); color: var(--muted); }
.v2-leads { left: -6%; top: 6%; }
.v2-ftd { right: -8%; top: 42%; animation-delay: -3s; }
.v2-linha { width: 100%; height: 44px; margin: 10px 0 8px; overflow: visible; }
.v2-linha path { fill: none; stroke: var(--lima); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.v2-linha circle { fill: var(--lima); stroke: var(--painel2); stroke-width: 2; }
.v2-barras { height: 52px; margin: 10px 0 8px; display: flex; align-items: flex-end; gap: 7%; }
.v2-barras i { flex: 1; height: 100%; border-radius: 3px; background: rgb(var(--tinta-rgb) / .08); position: relative; }
.v2-barras i::after { content: ''; position: absolute; inset: auto 0 0; height: calc(var(--h) * 100%); border-radius: 3px; background: var(--lima); }
.v2-num { display: flex; align-items: baseline; gap: 8px; font-family: 'Sora', 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.v2-num em { font-style: normal; font-family: 'Manrope', sans-serif; font-size: var(--t-micro); font-weight: 600; color: var(--verde); }
@keyframes v2Flutua { 50% { transform: translateY(-8px); } }

/* A onda do fundo, a atravessar a cena por baixo do palco. */
.v2-onda { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; }
.v2-onda path { fill: rgb(var(--tinta-rgb) / .03); }

/* ── O painel do formulário ── */
.v2-lado { background: var(--painel); padding: 48px; display: flex; align-items: center; justify-content: center; }
.v2-forma { width: 100%; max-width: 384px; display: flex; flex-direction: column; }
.v2-marca-movel { display: none; }
.v2-forma h1 { font-family: 'Sora', 'Manrope', sans-serif; font-size: 24px; line-height: 38px; font-weight: 500; letter-spacing: -0.01em; color: var(--texto); }
.v2-sub { margin: 4px 0 24px; font-size: 15px; line-height: 22px; color: var(--texto3); }
.v2-forma form { display: flex; flex-direction: column; gap: 24px; }
.v2-forma form[hidden] { display: none; }
.v2-campo { display: flex; flex-direction: column; gap: 4px; }
.v2-campo label { font-size: 13px; line-height: 15px; color: var(--texto2); }
.v2-forma input[type="text"], .v2-forma input[type="password"] { height: 38px; padding: 7px 14px; border-radius: 6px; font-size: 15px; }
.v2-forma .campo-olho input { padding-right: 44px; }
.v2-forma .olho { width: 28px; height: 28px; right: 5px; }
.v2-link { border: none; background: none; padding: 0; font: inherit; font-size: 15px; line-height: 22px; color: var(--lima); cursor: pointer; }
.v2-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.v2-botao { height: 38px; border: none; border-radius: 6px; background: var(--lima); color: var(--lima-tinta);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 6px rgb(var(--lima-rgb) / .3); transition: box-shadow .15s, transform .15s; }
.v2-botao:hover { box-shadow: 0 4px 14px rgb(var(--lima-rgb) / .4); }
.v2-botao:active { transform: translateY(1px); }
.v2-botao:disabled { opacity: .6; cursor: progress; }
.v2-voltar { align-self: center; margin-top: -8px; }
.v2-sep { margin: 28px 0 20px; border: none; border-top: 1px solid var(--linha-forte); }
.v2-pe { text-align: center; font-size: var(--t-mini); color: var(--muted); }
.v2-pe b { color: var(--texto2); font-weight: 700; }

/* Abaixo de 1200px a cena sai (como no Vuexy) e o formulário fica sozinho,
   com o logo por cima. */
@media (max-width: 1199px) {
  .v2-grelha { grid-template-columns: minmax(0, 1fr); }
  .v2-cena { display: none; }
  .v2-lado { padding: 32px 20px; }
  .v2-marca-movel { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto 28px; border-radius: var(--raio-p); }
}
@media (prefers-reduced-motion: reduce) { .v2-cartao { animation: none; } }