/* ============================================================================
   VISUAL NOVO (07/11/2026) — a base.

   O desenho aprovado pelo Nelson (Downloads/Visual-CRM-Diogo): fundo #0E0F12,
   lima #CCFF00 como único acento forte, gradientes roxo→rosa, azul→ciano,
   verde→lima e laranja→âmbar, letra Geist e Geist Mono. Este ficheiro entra
   DEPOIS do app.css e do chatbots.css e muda-lhes o aspecto sem mexer na
   lógica: primeiro as variáveis (as antigas passam a apontar para as novas),
   depois as peças comuns do ui.js — botões, campos, seletores, calendário,
   abas, tabelas, cartões, números, janelas e confirmações.

   Tokens com os nomes da maquete (--bg, --sf, --el, --ln, --tx, --t2, --ac…)
   para as páginas que se forem refazendo os usarem directamente.
   ========================================================================== */

:root {
  --bg: #0E0F12; --sf: #16171B; --el: #1E1F24; --ln: #23242A; --ln2: #2A2B31; --tr: #26272D;
  --tx: #EDEDEF; --t2: #A1A2AA; --t3: #868790;
  --ac: #CCFF00; --act: #D8FF4D; --acs: rgba(204, 255, 0, .10); --acb: rgba(204, 255, 0, .28); --onac: #141414; --c1: #CCFF00;
  --g: #3DD68C; --gs: rgba(61, 214, 140, .12);
  --b: #6EA8FE; --bs: rgba(110, 168, 254, .12);
  --p: #B794F6; --ps: rgba(183, 148, 246, .12);
  --o: #FF8A3D; --os: rgba(255, 138, 61, .12);
  --r: #F87171; --rs: rgba(248, 113, 113, .12);
  --pk: #E879F9; --cy: #22D3EE; --am: #FFC933;
  --gl: linear-gradient(90deg, #3DD68C, #CCFF00);
  --gp: linear-gradient(90deg, #8B5CF6, #E879F9);
  --gb: linear-gradient(90deg, #3B82F6, #22D3EE);
  --go: linear-gradient(90deg, #FF8A3D, #FFC933);
  --gr: linear-gradient(90deg, #F43F5E, #FB923C);
  --sombra: 0 20px 50px rgba(0, 0, 0, .4);
  --letra: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;

  /* As variáveis antigas, agora em cima das novas. */
  --fundo: var(--bg); --fundo2: var(--bg); --painel: var(--sf); --painel2: var(--el);
  --linha: var(--ln); --linha-fina: #1D1E23; --linha-forte: var(--ln2); --hover: var(--el);
  --texto: var(--tx); --texto2: #D7D8DD; --texto3: var(--t2); --muted: var(--t2); --muted2: var(--t3);
  --lima: var(--c1); --lima-suave: var(--act); --lima-tinta: var(--onac);
  --laranja: var(--o); --vermelho: var(--r); --azul: var(--b); --roxo: var(--p); --verde: var(--g);
  --lima-rgb: 204 255 0; --tinta-rgb: 237 237 239;
  --raio: 14px; --raio-p: 8px;
  --h-p: 30px; --h-m: 34px; --h-g: 38px; --h-xg: 44px;
  --t-micro: 11px; --t-mini: 12px; --t-corpo: 13px; --t-base: 14px; --t-pagina: 24px; --t-num: 24px; --t-heroi: 28px;
  accent-color: var(--ac); caret-color: var(--act);
}

:root[data-tema="claro"],
:root[data-tema="claro"] .sino-painel {
  --bg: #F5F5F0; --sf: #FFFFFF; --el: #EFEFE9; --ln: #E3E3DC; --ln2: #D6D6CE; --tr: #E8E8E1;
  --tx: #17181B; --t2: #54555C; --t3: #696A72;
  --ac: #CCFF00; --act: #4A5F00; --acs: rgba(130, 165, 0, .13); --acb: rgba(100, 130, 0, .38); --onac: #141414; --c1: #6F8F00;
  --g: #0E7F4D; --gs: rgba(14, 127, 77, .10);
  --b: #2360C4; --bs: rgba(35, 96, 196, .10);
  --p: #7240CC; --ps: rgba(114, 64, 204, .10);
  --o: #B84E08; --os: rgba(184, 78, 8, .10);
  --r: #C22D2D; --rs: rgba(194, 45, 45, .10);
  --pk: #D946EF; --cy: #0891B2; --am: #D99A00;
  --gl: linear-gradient(90deg, #0E9F62, #8DB600);
  --gp: linear-gradient(90deg, #7C3AED, #D946EF);
  --gb: linear-gradient(90deg, #2563EB, #0891B2);
  --go: linear-gradient(90deg, #EA580C, #D99A00);
  --gr: linear-gradient(90deg, #E11D48, #EA580C);
  --sombra: 0 20px 50px rgba(23, 24, 27, .14);

  --fundo: var(--bg); --fundo2: var(--bg); --painel: var(--sf); --painel2: var(--el);
  --linha: var(--ln); --linha-fina: #ECECE6; --linha-forte: var(--ln2); --hover: var(--el);
  --texto: var(--tx); --texto2: #2B2C31; --texto3: var(--t2); --muted: var(--t2); --muted2: var(--t3);
  --lima: var(--act); --lima-suave: #3E5000; --lima-tinta: #FFFFFF;
  --laranja: var(--o); --vermelho: var(--r); --azul: var(--b); --roxo: var(--p); --verde: var(--g);
  --lima-rgb: 74 95 0; --tinta-rgb: 23 24 27;
}

/* ── Letra e fundo ─────────────────────────────────────────────────────── */
body { font-family: var(--letra); background: var(--bg); color: var(--tx); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
::selection { background: var(--ac); color: var(--onac); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
* { scrollbar-color: var(--ln2) transparent; }
::-webkit-scrollbar-thumb { background: var(--ln2); background-clip: padding-box; }
.mono, code, kbd { font-family: var(--mono); }
.muted { color: var(--t2); }

/* ── Botões ────────────────────────────────────────────────────────────────
   Na maquete: 34px, raio 8, fundo elevado com linha; o principal cheio de lima
   com letra escura; o de perigo vermelho translúcido; o fantasma sem caixa. */
.btn {
  height: var(--h-m); padding: 0 12px; gap: 8px; border-radius: 8px;
  font: 500 13px var(--letra); border: 1px solid var(--ln2); background: var(--el); color: var(--tx);
  transition: border-color .15s, background-color .15s, color .15s, filter .15s;
}
.btn:hover { background: var(--el); border-color: var(--t3); color: var(--tx); }
.btn.primario { height: var(--h-m); padding: 0 12px; background: var(--ac); border-color: var(--ac); color: var(--onac); font-weight: 600; }
.btn.primario:hover { background: var(--ac); border-color: var(--ac); color: var(--onac); filter: brightness(.94); }
.btn.perigo { background: var(--rs); border-color: var(--rs); color: var(--r); }
.btn.perigo:hover { background: var(--rs); border-color: var(--r); color: var(--r); }
.btn.acesa { background: var(--acs); border-color: var(--acb); color: var(--act); }
.btn.acesa:hover { background: var(--acs); border-color: var(--act); color: var(--act); }
.btn.fantasma, .btn.simples { background: transparent; border-color: transparent; color: var(--t2); }
.btn.fantasma:hover, .btn.simples:hover { background: var(--el); color: var(--tx); }
.btn.pequeno { height: var(--h-p); padding: 0 10px; font-size: 12px; }
.btn.icone { width: var(--h-m); padding: 0; }
.btn.icone.pequeno { width: var(--h-p); }
.btn.alto { height: var(--h-xg); }
.btn:disabled, .btn:disabled:hover { opacity: .45; cursor: not-allowed; filter: none; }
.fechar { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--t2); }
.fechar:hover { background: var(--el); color: var(--tx); border-color: transparent; }
.pag-btn { height: 30px; min-width: 30px; border-radius: 8px; border: 1px solid var(--ln2); background: var(--el); color: var(--tx); font: 500 12px var(--letra); }
.pag-btn:hover:not(:disabled) { background: var(--el); border-color: var(--t3); color: var(--tx); }
.pag-conta, .pag-onde { color: var(--t2); font-size: 12px; }
.pag-onde { font-family: var(--mono); }

/* ── Campos ────────────────────────────────────────────────────────────── */
.campo { gap: 6px; }
.campo > label { font: 500 12px var(--letra); letter-spacing: 0; text-transform: none; color: var(--t2); }
.campo .obrig { color: var(--act); }
.campo-ajuda { font-size: 12px; color: var(--t3); }
input, select, textarea {
  height: var(--h-g); padding: 0 10px; border-radius: 8px; border: 1px solid var(--ln2);
  background: var(--bg); color: var(--tx); font: 13px var(--letra);
}
textarea { height: auto; min-height: 76px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--act); outline-offset: 1px; border-color: var(--ln2); }
input::placeholder, textarea::placeholder { color: var(--t3); }
input:disabled, textarea:disabled { color: var(--t3); border-style: solid; opacity: .6; }
input[type="file"]::file-selector-button { height: var(--h-m); padding: 0 12px; border-radius: 8px; border: 1px solid var(--ln2); background: var(--el); color: var(--tx); font: 500 13px var(--letra); cursor: pointer; }
input[type="file"]:hover::file-selector-button { border-color: var(--t3); background: var(--el); color: var(--tx); }

/* Caixa de seleção e opção redonda desenhadas aqui (nada de controlos nativos):
   18px, raio 5, cheia de lima com o visto escuro quando marcada. */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0;
  border: 1.5px solid var(--t3); border-radius: 5px; background: transparent; cursor: pointer; flex: none;
  display: inline-grid; place-content: center; vertical-align: middle; transition: background-color .15s, border-color .15s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked {
  background: var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--ac);
}
input[type="checkbox"]:indeterminate { background: var(--ac); border-color: var(--ac); }
input[type="checkbox"]:indeterminate::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--onac); }
input[type="radio"]:checked { border-color: var(--ac); background: radial-gradient(circle, var(--onac) 0 3px, var(--ac) 3.5px); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
.sp-check, .sp-radio { font-size: 13px; font-weight: 400; color: var(--tx); min-height: 28px; }
/* O interruptor: quem o quiser põe role="switch" na caixa de seleção. */
input[type="checkbox"][role="switch"] { width: 34px; min-width: 34px; height: 20px; border: 0; border-radius: 10px; background: var(--ln2); position: relative; }
input[type="checkbox"][role="switch"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
input[type="checkbox"][role="switch"]:checked { background: var(--gl); }
input[type="checkbox"][role="switch"]:checked::before { left: 16px; }

/* ── Seletor e calendário da casa ──────────────────────────────────────── */
.sel-gatilho, .cal-gatilho { height: var(--h-g); padding: 0 10px; border-radius: 8px; border: 1px solid var(--ln2); background: var(--bg); color: var(--tx); font: 13px var(--letra); }
.sel-gatilho:hover, .cal-gatilho:hover { border-color: var(--t3); }
.sel-gatilho[aria-expanded="true"], .cal-gatilho.aberto { border-color: var(--ln2); outline: 2px solid var(--act); outline-offset: 1px; }
.sel-gatilho .valor.vazio, .cal-gatilho .ph, .sel-gatilho .seta { color: var(--t3); }
.cal-gatilho.aberto .cal-ic { color: var(--act); }
.sel.compacto .sel-gatilho { height: 34px; background: var(--sf); border-color: var(--ln2); font-size: 13px; }
.sel.compacto.mini .sel-gatilho { height: 30px; }
.sel.simples .sel-gatilho { background: none; border-color: transparent; color: var(--t2); font-weight: 500; outline: 0; }
.sel-menu, .cal-painel { background: var(--sf); border: 1px solid var(--ln2); border-radius: 12px; padding: 4px; box-shadow: var(--sombra); }
.sel-opcao { padding: 8px 10px; border-radius: 8px; color: var(--tx); font: 13px var(--letra); }
.sel-opcao:hover, .sel-opcao.realce { background: var(--el); color: var(--tx); }
.sel-opcao.activa { background: var(--acs); color: var(--act); }
.sel-procura { background: var(--sf); }
.sel-grupo { font: 500 11px var(--letra); letter-spacing: .08em; color: var(--t3); }
.sel-vazio { color: var(--t3); }

/* ── Abas e segmentos ──────────────────────────────────────────────────────
   Os dois passam a ser o mesmo controlo da maquete: uma calha com linha, e o
   escolhido em lima translúcido. */
.segmentos { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--ln); border-radius: 9px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmentos::-webkit-scrollbar { display: none; }
.segmento { height: 28px; padding: 0 12px; border-radius: 6px; color: var(--t2); font: 500 13px var(--letra); white-space: nowrap; }
.segmento:hover { color: var(--tx); }
.segmento.on { background: var(--acs); color: var(--act); }
.abas { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--ln); border-radius: 9px; max-width: 100%; margin-bottom: 16px; }
.aba { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; margin: 0; color: var(--t2); font: 500 13px var(--letra); }
.aba:hover { color: var(--tx); }
.aba.on { background: var(--acs); color: var(--act); border-bottom-color: transparent; }
.sp-abas-conf { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--ln); border-radius: 9px; max-width: 100%; }
.sp-abas-conf a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin: 0; border: 0; border-radius: 6px; color: var(--t2); font: 500 13px var(--letra); }
.sp-abas-conf a:hover { color: var(--tx); }
.sp-abas-conf a.on { background: var(--acs); color: var(--act); border-bottom-color: transparent; }
.fx-abas { background: var(--bg); border: 1px solid var(--ln); border-radius: 9px; }
.fx-abas button { height: 28px; color: var(--t2); font: 500 13px var(--letra); }
.fx-abas button.on { background: var(--acs); color: var(--act); }

/* ── Cartões (os «widgets» da maquete) ─────────────────────────────────── */
.card { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 16px; }
.card-cab { min-height: 28px; margin-bottom: 14px; gap: 10px; }
.card-cab h2 { font: 600 14px var(--letra); letter-spacing: 0; color: var(--tx); }
.card-cab .dica { font-size: 12px; font-weight: 400; color: var(--t3); }
.modal-corpo > .card { background: var(--bg); }

/* ── Números (KPI) ─────────────────────────────────────────────────────── */
.kpi { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 14px 16px; }
.kpi.clicavel { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.kpi.clicavel:hover { border-color: var(--ln2); background: var(--el); }
.kpi .rot { font: 500 12px var(--letra); letter-spacing: 0; text-transform: none; color: var(--t2); }
.kpi .val { font: 600 24px var(--mono); letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; color: var(--tx); white-space: nowrap; }
.kpi .val.pequeno { font: 600 14px var(--letra); letter-spacing: 0; }
.kpi .val.lima { color: var(--act); }
.kpi .pe { font-size: 12px; font-weight: 400; color: var(--t3); margin-top: 5px; line-height: 1.35; }
.tijolo .val, .linha-stat .val { font-family: var(--mono); letter-spacing: -.02em; }

/* ── Tabelas ───────────────────────────────────────────────────────────── */
table { font-size: 13px; }
thead th { background: transparent; font: 500 11px var(--letra); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); padding: 9px 14px; border-bottom: 1px solid var(--ln); }
.th-ordenar { padding: 9px 14px; }
.th-ordenar:hover, .th-ordenar.on { color: var(--tx); }
.th-ordenar.on .th-seta { color: var(--act); }
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--ln); color: var(--tx); }
tbody tr:nth-child(even) td { background: transparent; }
tbody tr:hover td { background: var(--el); }
tbody tr.clicavel { cursor: pointer; }
tfoot td { padding: 10px 14px; border-top: 1px solid var(--ln); font-weight: 600; color: var(--tx); }
.tabela-caixa { margin: 0 -16px; }
.vazio { padding: 28px 14px; color: var(--t2); font-size: 13px; font-weight: 400; }
.grafico-vazio { color: var(--t3); font-size: 13px; }

/* ── Etiquetas de estado (os «bdg» da maquete) ─────────────────────────── */
.chip { height: 22px; padding: 0 8px; gap: 6px; border: 0; border-radius: 11px; font: 500 12px var(--letra); letter-spacing: 0; text-transform: none; background: var(--el); color: var(--t2); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex: none; }
.chip.novo { background: var(--bs); color: var(--b); }
.chip.em_conversa { background: var(--acs); color: var(--act); }
.chip.registado { background: var(--ps); color: var(--p); }
.chip.ftd { background: var(--gs); color: var(--g); }
.chip.perdido, [data-tema="claro"] .chip.perdido { background: var(--rs); color: var(--r); }
.chip.parada { background: var(--el); color: var(--t2); }

/* ── Avisos ────────────────────────────────────────────────────────────── */
.aviso { padding: 12px; border-radius: 10px; font-size: 13px; font-weight: 400; line-height: 1.5; border: 1px solid var(--ln); background: var(--bg); color: var(--t2); }
.aviso.erro { background: var(--rs); border-color: var(--rs); color: var(--r); }
.aviso.bom { background: var(--gs); border-color: var(--gs); color: var(--g); }
.aviso.alerta { background: var(--os); border-color: var(--os); color: var(--o); }
.aviso.nota { background: var(--bg); border-color: var(--ln); color: var(--t2); }
.aviso b { color: var(--tx); }

/* ── Janelas (Modal) e confirmações ────────────────────────────────────────
   Cartão de 520px, raio 16, sombra larga; cabeçalho com o ícone em quadrado
   lima, corpo com 16px e o rodapé com os botões à direita. */
.veu, .veu-formulario { background: rgba(5, 6, 8, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); align-items: center; padding: 24px 16px; } /* 08/11: ao centro do ecrã, fundo pouco desfocado */
[data-tema="claro"] .veu, [data-tema="claro"] .veu-formulario { background: rgba(23, 24, 27, .36); }
.modal, .modal.formulario { max-width: 600px; max-height: calc(100dvh - 110px); background: var(--sf); border: 1px solid var(--ln2); border-radius: 16px; box-shadow: var(--sombra); }
/* 08/11: 600px (o Nelson pediu as janelas «um pouco mais largas»); as grandes 880px. */
.modal.largo, .modal.formulario.largo { max-width: 880px; }
.modal.formulario.curto { max-width: 560px; max-height: calc(100dvh - 110px); }
.modal.formulario { height: auto; max-height: calc(100dvh - 110px); }
.modal-cab, .modal.formulario .modal-cab { align-items: flex-start; gap: 10px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--ln); background: var(--sf); }
.modal-cab h2 { font: 600 15px var(--letra); letter-spacing: 0; color: var(--tx); }
.modal-titulos p { margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--t2); }
.modal-icone, .modal.formulario .modal-icone { flex: 0 0 28px; height: 28px; border-radius: 7px; background: var(--acs); border: 1px solid var(--acb); color: var(--act); }
.modal-icone svg { width: 16px; height: 16px; }
.modal-corpo, .modal.formulario .modal-corpo { padding: 16px; gap: 12px; }
.modal-pe, .modal.formulario .modal-pe { padding: 12px 16px; gap: 8px; border-top: 1px solid var(--ln); background: var(--sf); }
.modal.formulario .modal-pe .btn { height: var(--h-m); padding-inline: 12px; }
.modal.formulario :is(input, .sel-gatilho, .cal-gatilho) { height: var(--h-g); }
/* 11/11: as caixas de seleção e os botões de rádio não são campos — nas janelas de formulário ficavam com a altura de um campo (18 × 38). */
.modal.formulario input:is([type="checkbox"], [type="radio"]) { height: 18px; }
.modal.formulario .campo > label { color: var(--t2); }
.pe-accoes { display: flex; gap: 8px; justify-content: flex-end; width: 100%; flex-wrap: wrap; }
/* A confirmação de apagar: ícone vermelho e o botão de apagar cheio. */
.confirmar-tx { font-size: 13px; color: var(--t2); line-height: 1.5; }
.modal.confirmacao .modal-icone { background: var(--rs); border-color: var(--rs); color: var(--r); }
.modal:has(.confirmar-tx) .modal-pe .btn.perigo { background: var(--r); border-color: var(--r); color: #fff; }
.modal:has(.confirmar-tx) .modal-pe .btn.perigo:hover { filter: brightness(.94); }

/* ── O sino na barra de cima (lote 2): botão de ícone sem caixa, como os da
   casca; o número de avisos por ler num ponto lima pequeno. */
.sino { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--t2); }
.sino:hover { background: var(--el); color: var(--tx); border-color: transparent; }
.sino.tem { color: var(--tx); border-color: transparent; }
.sino-conta { top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; background: var(--c1); color: var(--onac); font: 600 10px var(--mono); border: 2px solid var(--bg); }
.sino-painel { background: var(--sf); border: 1px solid var(--ln2); border-radius: 14px; box-shadow: var(--sombra); }
.sino-cab, .sino-pe { background: var(--sf); }
.sino-cab { font: 500 11px var(--letra); letter-spacing: .08em; color: var(--t3); }
.sino-item { border-bottom-color: var(--ln); }
@media (max-width: 950px) { .sino { width: 44px; height: 44px; border-radius: 12px; } }

/* ── Paginação e dica dos gráficos ─────────────────────────────────────── */
.paginacao { border-top: 1px solid var(--ln); }
.dica-grafico, .grafico-dica { background: var(--sf); border: 1px solid var(--ln2); border-radius: 10px; box-shadow: var(--sombra); color: var(--tx); font-size: 12px; }
svg .eixo, .grafico .eixo { font-family: var(--mono); font-size: 11px; fill: var(--t3); }

/* ── Gráficos de barras do ui.js com os gradientes ─────────────────────── */
.funil-bar { background: var(--tr); border-radius: 7px; }
.funil-bar i { background: var(--gl); border-radius: 7px; }
.trilho { background: var(--tr); border-radius: 4px; }
.rosca-centro b, .mostrador-centro b { font-family: var(--mono); letter-spacing: -.02em; }
.rosca-lista .p, .mostrador-legenda i { border-radius: 4px; }

/* ── A barra de filtros dos relatórios ─────────────────────────────────────
   Na maquete os filtros não têm caixa: o período em segmentos, as datas num
   botão com letra mono e os filtros da página ao lado, soltos na página. */
.filtros { padding: 0; border: 0; background: transparent; gap: 8px; }
.filtros .segmentos { flex-wrap: nowrap; }
.filtros-datas { height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--ln2); border-radius: 8px; background: var(--sf); color: var(--t3); font: 12px var(--mono); }
.filtros-datas > span { color: var(--tx); }
.filtros-datas:hover { border-color: var(--t3); }
.filtros-datas.on { border-color: var(--acb); color: var(--act); }
.filtros-datas.aberto, .filtros-datas:focus-visible { border-color: var(--ln2); outline: 2px solid var(--act); outline-offset: 1px; color: var(--act); }
.filtros-extra > .sel .sel-gatilho { height: 34px; background: var(--sf); border-color: var(--ln2); }
.cal-dia.entre { background: var(--acs); }

/* ── As tabelas no telemóvel, como na maquete: o nome a toda a largura e os
   outros valores em duas colunas, cada um com o rótulo pequeno por cima. Sem
   cartões dentro do cartão: as linhas separam-se por um filete. Os botões da
   linha fecham o bloco numa grelha, todos com a mesma largura. */
@media all {
  @container tabela (max-width: 560px) or style(--cartoes: sim) {
    .tabela-cartoes tbody tr, .tabela-cartoes tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--ln); }
    .tabela-cartoes tbody tr:nth-child(even) { background: transparent; }
    .tabela-cartoes tbody tr td, .tabela-cartoes tbody tr:nth-child(even) td, .tabela-cartoes tbody tr:hover td, .tabela-cartoes tfoot td {
      display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 0; text-align: left; color: var(--tx);
    }
    .tabela-cartoes td::before { float: none; max-width: none; margin: 0; font: 400 11px var(--letra); letter-spacing: 0; text-transform: none; color: var(--t3); line-height: 1.4; }
    .tabela-cartoes tbody tr td:first-child, .tabela-cartoes tbody tr td.cel-titulo, .tabela-cartoes tfoot td:first-child { grid-column: 1 / -1; padding: 0; font: 500 14px var(--letra); color: var(--tx); }
    .tabela-cartoes tbody tr td.acoes { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding-top: 4px; }
    .tabela-cartoes tbody tr td.acoes::before { content: none; }
    .tabela-cartoes td.acoes .btn, .tabela-cartoes td.acoes .btn:first-child { width: auto; margin: 0; }
    .tabela-cartoes.sp-publico tbody tr { display: grid; }
    .tabela-cartoes tbody tr td.sp-marca { float: none; grid-column: 1 / -1; padding: 0; }
  }
}

/* ── Telemóvel: alvos de 44px e botões da mesma linha com a mesma largura. */
@media (max-width: 900px) {
  .btn, .sel-gatilho, .cal-gatilho, input:not([type="checkbox"]):not([type="radio"]), select { height: 44px; }
  .btn.pequeno, .sel.compacto .sel-gatilho { height: 36px; }
  /* Abas sem cortes: se não cabem numa linha, passam à seguinte (nunca a deslizar). */
  .abas.abas, .sp-abas-conf { display: flex; flex-wrap: wrap; width: 100%; overflow: visible; }
  .sp-abas-conf a, .sp-abas-conf a.on { flex: 1 1 auto; justify-content: center; height: 36px; padding: 0 8px; font-size: 12px; border: 0; border-radius: 6px; white-space: nowrap; }
  .sp-abas-conf a.on { background: var(--acs); color: var(--act); }
  .segmentos, .abas, .filtros .segmentos { display: flex; flex-wrap: nowrap; width: 100%; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--ln); }
  .segmento, .aba, .aba.on { flex: 1 1 auto; justify-content: center; height: 36px; padding: 0 6px; font-size: 12px; border: 0; border-radius: 6px; }
  .aba.on { background: var(--acs); color: var(--act); }
  .filtros, .filtros-datas-caixa, .filtros-extra, .filtros-extra > .sel { width: 100%; margin-left: 0; }
  .filtros-datas { height: 44px; justify-content: center; }
  .veu, .veu-formulario { padding: 0; align-items: flex-end; }
  .modal, .modal.largo, .modal.formulario, .modal.formulario.curto { max-width: 100%; width: 100%; max-height: 86dvh; border-radius: 20px 20px 0 0; border-width: 1px 0 0; }
  .modal-pe, .modal.formulario .modal-pe { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .modal-pe .btn, .pe-accoes .btn { flex: 1 1 0; }
  .kpi .val { font-size: 20px; }
}

/* ── O ecrã de entrada (lote 2) ────────────────────────────────────────────
   Coluna de 340px sem caixa, alinhada à esquerda; as linhas da bola no fundo
   a 7 %, com o miolo apagado para não passarem por trás do formulário. */
body.ent.lg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: 48px 24px 64px; overflow: hidden; position: relative; background: var(--bg); color: var(--tx); font-family: var(--letra); }
/* Com o html a cortar, o body corta o fundo (sem isto o overflow do body passava
   para a janela e o fundo de 760px alargava a página no telemóvel). */
html:has(body.ent.lg) { overflow: hidden; }
.lg-fundo { position: absolute; left: 50%; top: 50%; width: max(118vh, 900px); height: max(118vh, 900px); transform: translate(-50%, -50%); color: var(--tx); opacity: .07; stroke-width: 1px; pointer-events: none; -webkit-mask-image: radial-gradient(circle, transparent 24%, #000 46%); mask-image: radial-gradient(circle, transparent 24%, #000 46%); }
.lg-in { position: relative; z-index: 1; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.lg-logo { display: block; align-self: flex-start; height: 26px; width: auto; object-fit: contain; margin-bottom: 26px; }
.ent .logo-tema-claro { display: none; }
[data-tema="claro"] .ent .logo-tema-escuro { display: none; }
[data-tema="claro"] .ent .logo-tema-claro { display: block; }
.lg-in h1 { margin: 0; font: 600 22px/1.2 var(--letra); letter-spacing: -.015em; color: var(--tx); }
.lg-in > p { margin: -8px 0 10px; font-size: 14px; color: var(--t2); }
.lg-in form { display: flex; flex-direction: column; gap: 14px; }
.lg-in form[hidden], .lg-in #turnstile[hidden] { display: none; }
.lg-campo { display: flex; flex-direction: column; gap: 6px; }
.lg-campo label { font: 500 12px var(--letra); color: var(--t2); }
.lg-campo input { height: 42px; font-size: 14px; width: 100%; border-radius: 8px; border: 1px solid var(--ln2); background: var(--bg); color: var(--tx); }
.lg-campo input:focus { outline: 0; border-color: var(--t2); }
.lg-o input { padding-right: 42px; }
.lg-o .olho { right: 3px; width: 36px; height: 36px; border-radius: 8px; color: var(--t3); background: transparent; }
.lg-o .olho svg { width: 17px; height: 17px; }
.lg-o .olho:hover { color: var(--tx); background: transparent; }
.lg-o .olho[aria-pressed="true"] { color: var(--tx); }
#turnstile { min-height: 65px; }
.btn.lg-b { height: 42px; width: 100%; font-size: 14px; font-weight: 600; margin-top: 4px; }
.btn.lg-b:disabled { opacity: .55; cursor: progress; }
.lg-v { height: 36px; border: 0; background: transparent; color: var(--t2); font: 500 13px var(--letra); cursor: pointer; }
.lg-v:hover { color: var(--tx); }
.lg-n { font-size: 12px; color: var(--t3); text-align: center; margin-top: 6px; }
.lg-e { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--r); }
.lg-e svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.lg-in #aviso:empty { display: none; }
.lg-cod { font-family: var(--mono) !important; font-size: 18px !important; letter-spacing: .12em; text-align: center; }
.lg-c { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 1; text-align: center; font-size: 11px; color: var(--t3); }
@media (max-width: 600px) {
  body.ent.lg { padding: 40px 20px 56px; }
  .lg-in { max-width: none; }
  .lg-fundo { width: 760px; height: 760px; -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 52%); mask-image: radial-gradient(circle, transparent 30%, #000 52%); }
}

/* ── Peças de gráfico da maquete (barras opostas «d2», legendas «lg»), iguais
   no visual.css e na casca. ── */
.lgs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--t2); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lg b { font: 500 12px var(--mono); color: var(--tx); }
.d2 .mono { font-family: var(--mono); }
.d2 .r { text-align: right; }
.d2 .acc { color: var(--act); }
.d2 .trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.d2-caixa { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ln); }
.d2-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.d2-cab b { font-size: 14px; font-weight: 600; color: var(--tx); }
.d2 { display: flex; flex-direction: column; }
.d2-r { display: grid; grid-template-columns: minmax(70px, 150px) minmax(0, 1fr) 1px minmax(0, 1.5fr) 84px; gap: 10px; align-items: center; min-height: 30px; padding: 0 6px; border-radius: 6px; font-size: 13px; color: var(--tx); }
.d2-r.th { min-height: 24px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.d2-r.hl { background: var(--acs); }
.d2-r.ft { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ln); border-radius: 0; font-weight: 600; }
.dv-l { display: flex; justify-content: flex-end; }
.dv-d { display: flex; gap: 2px; }
.dv-b { display: block; height: 15px; border-radius: 4px; }
.dv-z { width: 1px; height: 100%; min-height: 20px; background: var(--ln2); }
@media (max-width: 600px) {
  .d2-r { grid-template-columns: 62px minmax(0, 1fr) 1px minmax(0, 1.3fr) 48px; gap: 6px; padding: 0 2px; }
  .d2-r .mono { font-size: 11px; white-space: nowrap; }
  .d2 { --d2-rot: 44px; --d2-dir: 1.3fr; --d2-col: 58px; }
}

/* Nada de controlos nativos: sem o relógio e o calendário do browser nos campos de hora e data (escreve-se à mão; o calendário da casa abre por cima onde existe). */
input[type="time"]::-webkit-calendar-picker-indicator { display: none; }

/* ── O cabeçalho das páginas (lote 3), como o «cab» da maquete: ícone num
   quadrado lima de 40px, título de 24px, descrição e as ações à direita. A
   página fica com 24px dos lados e até 1840px, como as da casca. ── */
.pagina-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 1840px; margin: 0 auto; padding: 24px 24px 0; box-sizing: border-box; }
.pagina-cab-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--acs); border: 1px solid var(--acb); color: var(--act); }
.pagina-cab-tx { flex: 1 1 240px; min-width: 0; }
.pagina-cab h1 { font: 600 24px/1.15 var(--letra); letter-spacing: -.02em; color: var(--tx); }
.pagina-cab .sub { margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--t2); }
.pagina-cab .sub::first-letter { text-transform: uppercase; }
.pagina-cab-accoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pagina-cab-accoes:empty { display: none; }
main.conteudo { width: 100%; max-width: 1840px; margin: 0 auto; padding: 16px 24px 48px; box-sizing: border-box; }
.rodape { max-width: 1840px; margin: 0 auto; padding: 0 24px 24px; color: var(--t3); font-size: 12px; }
@media (max-width: 950px) {
  .pagina-cab { padding: 16px 16px 0; }
  .pagina-cab h1 { font-size: 22px; }
  .pagina-cab-accoes { width: 100%; margin-left: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  main.conteudo { padding: 12px 16px 24px; }
}

/* ── Helpdesk como na maquete: filtros soltos, a lista num widget com o
   cabeçalho das colunas em maiúsculas pequenas e as etiquetas de estado. ── */
.hd-filtros > .btn.primario { margin-left: 0; }
.hd-lista.card { padding: 0; }
.hd-linhas li + li { border-top-color: var(--ln); }
.hd-linha { padding: 10px 14px; gap: 12px; font-size: 13px; }
button.hd-linha:hover { background: var(--el); }
button.hd-linha:hover .hd-c-assunto b { color: var(--tx); }
.hd-linha-cab { padding-top: 9px; padding-bottom: 9px; border-bottom-color: var(--ln); font: 500 11px var(--letra); letter-spacing: .06em; color: var(--t3); }
.hd-c-assunto b { font-size: 13px; font-weight: 500; }
.hd-prev { font-size: 12px; color: var(--t3); }
.hd-c-autor { font-size: 13px; color: var(--tx); }
.hd-c-act { font: 12px var(--mono); color: var(--tx); }
.hd-num { font: 12px var(--mono); color: var(--t3); }
.hd-conta { font: 11px var(--mono); color: var(--t3); }
.hd-chip { height: 22px; padding: 0 8px; gap: 6px; border: 0; border-radius: 11px; font: 500 12px var(--letra); background: var(--el); color: var(--t2); }
.hd-chip::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex: none; }
.hd-chip.tipo-assistencia, .hd-chip.tipo-sugestao { background: var(--ps); color: var(--p); border: 0; }
.hd-chip.estado-pendente { background: var(--os); color: var(--o); border: 0; }
.hd-chip.estado-em_analise { background: var(--ps); color: var(--p); border: 0; }
.hd-chip.estado-em_andamento { background: var(--bs); color: var(--b); border: 0; }
.hd-chip.estado-concluido { background: var(--gs); color: var(--g); border: 0; }
.hd-linha-cab > span { font: inherit; color: inherit; letter-spacing: inherit; }
/* O ticket aberto: os dois cartões da maquete (a conversa e os dados). */
.hd-det-cab h2 { font: 600 20px/1.25 var(--letra); letter-spacing: -.01em; }
.hd-num { margin-right: 6px; }
.hd-msg-corpo { background: var(--bg); border: 1px solid var(--ln); border-radius: 12px; }
.hd-dados dt { font: 500 11px var(--letra); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.hd-dados dd { font-size: 13px; color: var(--tx); }

/* ── Definições (lote 3), como na maquete: cada grupo é um só cartão, com as
   secções em linhas separadas por um filete; o ícone sem caixa; o que abre
   fica dentro da linha, sem cartões lá dentro. ── */
.pagina-definicoes { gap: 0; }
.secao-grupo { margin: 24px 0 8px; font: 500 11px var(--letra); letter-spacing: .08em; color: var(--t3); }
.secao-grupo:first-of-type { margin-top: 8px; }
.secao { border-radius: 0; border: 1px solid var(--ln); border-top-width: 0; background: var(--sf); }
.secao.aberta { border-color: var(--ln); }
.secao-grupo + .secao { border-top-width: 1px; border-radius: 14px 14px 0 0; }
.secao:has(+ .secao-grupo), .pagina-definicoes > .secao:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.secao-grupo + .secao:has(+ .secao-grupo) { border-radius: 14px; }
.secao-cab { min-height: 50px; padding: 0 14px; gap: 12px; }
.secao-cab:hover { background: var(--el); }
.secao-ic { flex: none; width: auto; height: auto; background: none; color: var(--t2); }
.secao-ic svg { width: 16px; height: 16px; }
.secao.aberta .secao-ic { color: var(--act); }
.secao-tit { font: 600 13px var(--letra); }
.secao-resumo { font-size: 12px; color: var(--t3); }
.secao-seta { color: var(--t3); }
.secao-corpo { padding: 16px 14px 18px; border-top-color: var(--ln); }
.secao-sub { font: 600 13px var(--letra); color: var(--tx); }
.secao-corpo .card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.conta-secoes { display: grid; gap: 0; }
.conta-secoes > * + * { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ln); }
.conta-secao { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.conta-titulo { font: 600 13px var(--letra); color: var(--tx); }
.minha-foto-img { border-radius: 12px; background: var(--acs); border: 1px solid var(--acb); color: var(--act); }
.conta-secoes > .conta-secao + .conta-secao { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ln); }

/* ── Os interruptores (lote 3), como o «tg» da maquete: 34×20, bola branca
   de 16px, ligado com o gradiente verde→lima. ── */
.interruptor::before { width: 34px; height: 20px; border-radius: 10px; background: var(--ln2); }
.interruptor-bola { left: 2px; width: 16px; height: 16px; margin-top: -8px; background: #fff; }
.interruptor.on::before { background: var(--gl); }
.interruptor.on .interruptor-bola { transform: translateX(14px); background: #fff; }
.interruptor-tx { font: 500 12px var(--letra); color: var(--t2); }
.interruptor.on .interruptor-tx { color: var(--act); }
.fx-interruptor { background: var(--ln2); }
.fx-interruptor span { left: 2px; top: 2px; width: 16px; height: 16px; }
.fx-interruptor.on { background: var(--gl); }
.secao-corpo .ds-config { background: transparent; border: 0; padding-left: 0; padding-right: 0; }
@media (max-width: 950px) {
  /* Helpdesk no telemóvel: os estados numa grelha de três (sem cortes), o tipo
     à largura toda e cada ticket como a linha da maquete. */
  .hd-filtros .segmentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; }
  .hd-filtros .segmento { justify-content: center; padding: 0 4px; gap: 4px; }
  .hd-filtros > .sel, .hd-filtros .hd-procura { width: 100%; max-width: none; flex: 1 1 100%; }
  .hd-linha-cab { display: none; }
  .hd-linha { grid-template-columns: 34px minmax(0, 1fr) auto auto; grid-template-areas: "n a a e" "n u d e"; gap: 2px 10px; padding: 12px 14px; }
  .hd-c-tipo { grid-area: n; }
  .hd-c-tipo .hd-chip { display: none; }
  .hd-c-tipo .hd-num { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--acs); color: var(--act); font: 600 11px var(--mono); }
  .hd-c-assunto { grid-area: a; }
  .hd-c-assunto .hd-prev { display: none; }
  .hd-c-autor { grid-area: u; font-size: 12px; color: var(--t3); }
  .hd-c-act { grid-area: d; justify-content: flex-start; font-size: 11px; color: var(--t3); }
  .hd-c-estado { grid-area: e; align-self: center; }
}
@media (max-width: 950px) {
  .hd-linha .hd-c-autor { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hd-linha .hd-c-act { display: flex !important; justify-content: flex-start !important; }
}
@media (max-width: 640px) {
  .secao-cab { padding: 10px 14px; min-height: 52px; }
  .secao-resumo { padding-left: 28px; font-size: 12px; }
}

/* ── Funil por fases (fn) e colunas de valores (lc) da maquete (lote 4). ── */
.fn { display: flex; flex-direction: column; gap: 4px; }
.fn-r { display: grid; grid-template-columns: 96px minmax(0, 1fr) 72px; gap: 12px; align-items: center; font-size: 13px; color: var(--tx); }
.fn-r .r { text-align: right; font-weight: 500; }
.fn-b { height: 30px; border-radius: 7px; background: var(--tr); overflow: hidden; }
.fn-b span { display: block; height: 100%; border-radius: 7px; }
.fn-c { height: 18px; padding-left: 108px; display: flex; align-items: center; font: 11px var(--mono); color: var(--t3); }
.lc { display: flex; flex-direction: column; gap: 14px; padding-bottom: 22px; }
.lc-t b { display: block; font: 600 26px/1.15 var(--mono); letter-spacing: -.02em; color: var(--g); }
.lc-t b.neg { color: var(--r); }
.lc-t span { font-size: 12px; color: var(--t3); }
.lc-c { display: grid; gap: 8px; align-items: end; border-bottom: 1px solid var(--ln); }
.lc-k { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 5px; min-width: 0; }
.lc-v { font: 500 11px var(--mono); color: var(--t2); text-align: center; white-space: nowrap; }
.lc-b { display: block; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--c1), var(--g)); }
.lc-b.neg { background: linear-gradient(180deg, var(--o), var(--r)); }
.lc-l { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; font: 11px var(--mono); color: var(--t3); text-align: center; }
.pos { color: var(--g); }
.d2-curto { display: none; }
@media (max-width: 950px) {
  .fn-r { grid-template-columns: 76px minmax(0, 1fr) 54px; gap: 8px; }
  .fn-c { padding-left: 84px; }
  .d2-longo { display: none; }
  .d2-curto { display: inline; }
}
/* A rosca com a legenda ao lado, como o «donut» da maquete (lote 4). */
.rosca-caixa { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
.rosca, .rosca svg { width: 132px !important; height: 132px !important; flex: none; }
.rosca-lista { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.rosca-lista .li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.rosca-lista .nome { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosca-lista .n { font: 500 13px var(--mono); }
.rosca-lista .p { width: 8px; height: 8px; border-radius: 4px; flex: none; }
.rosca-centro b { font: 600 20px var(--mono); }
.rosca-centro small { font-size: 11px; color: var(--t3); }

/* ── Os cartões grandes da maquete nas páginas do app.js (CartoesNum, ui.js);
   os da casca têm as mesmas regras no acrescentos.css. ── */
.kcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kcs.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 0; text-align: left; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; color: var(--tx); font: inherit; }
button.kc { cursor: pointer; }
button.kc:hover { border-color: var(--ln2); }
.kc.hl { border-color: var(--acb); background: linear-gradient(180deg, var(--acs), transparent 70%), var(--sf); }
/* 08/11 (pedido: as cores do Financeiro em todas as páginas): o destaque na
   cor do próprio cartão (08/11: sem gradiente no fundo, «sem sombras, super clean»). */
.kc.hl { border-color: color-mix(in srgb, var(--k2, var(--c1)) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--k2, var(--c1)) 11%, transparent), transparent 70%), var(--sf); }
.kc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--t2); }
.kc-i { width: 24px; height: 24px; border-radius: 7px; background: var(--el); display: flex; align-items: center; justify-content: center; flex: none; }
.kc-v { font: 600 28px var(--mono); letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-s { font-size: 12px; color: var(--t3); min-height: 16px; }
.kc-g { display: block; width: calc(100% + 32px); height: 46px; margin: 4px -16px 0; }
.kc-b { display: block; height: 8px; margin: 18px 0 19px; border-radius: 4px; background: var(--tr); overflow: hidden; }
.kc-b > i { display: block; height: 100%; border-radius: 4px; }
.pagina-cab-accoes > .filtros { flex-wrap: nowrap; }
.kcs + .card, .kcs + .grelha, .card + .kcs { margin-top: 12px; }
@media (max-width: 950px) {
  .kcs, .kcs.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kc { padding: 12px 12px 0; border-radius: 16px; }
  .kc-v { font-size: 19px; }
  .kc-g { width: calc(100% + 24px); margin: 2px -12px 0; height: 38px; }
  .pagina-cab-accoes > .filtros { display: flex; flex-direction: column; grid-column: 1 / -1; }
}

/* Técnico › Assistências: as abas e os filtros entre os cartões e a tabela. */
.tec-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.tec-filtros > .sel { width: 220px; }
.tec-filtros > .campo { flex: 1 1 220px; max-width: 340px; margin: 0; }
.seg-n { margin-left: 6px; font: 11px var(--mono); color: var(--t3); }
.segmento.on .seg-n { color: inherit; opacity: .75; }
@media (max-width: 950px) {
  .tec-filtros > .sel, .tec-filtros > .campo { width: 100%; max-width: none; flex: 1 1 100%; }
}

/* A faixa dos outros números (FaixaNum) e as linhas do ranking que filtram. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; overflow: hidden; }
.kcs + .kpis, .kpis + .card, .kpis + .grelha { margin-top: 12px; }
/* 08/11: com cinco números (o «Valor DEP» das Marcas) cabem os cinco numa linha. */
.kpis:has(> .kp:nth-child(5):last-child) { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.kp { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 15px 18px; margin-left: -1px; border: 0; border-left: 1px solid var(--ln); background: none; color: var(--tx); text-align: left; font: inherit; }
button.kp { cursor: pointer; }
button.kp:hover { background: var(--el); }
.kl { font-size: 12px; color: var(--t2); }
.kv { font: 600 21px var(--mono); letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv.pequeno { font-size: 15px; }
.ks { font-size: 12px; line-height: 1.35; color: var(--t3); }
button.rank { width: 100%; padding: 6px 8px; margin: 0 -8px; box-sizing: content-box; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.rank:hover { background: var(--el); }
button.rank.on { background: var(--acs); }
.abas-cab { flex-wrap: nowrap; }
@media (max-width: 950px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 16px; }
  .kp { padding: 13px 14px; border-top: 1px solid var(--ln); margin-top: -1px; }
  .kpis:has(> .kp:nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > .kp:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kv { font-size: 20px; }
  .pagina-cab-accoes > .abas-cab { grid-column: 1 / -1; }
}
@media (max-width: 950px) {
  /* Abas sem cortes também nos segmentos: o que não cabe passa à linha de baixo. */
  .segmentos, .filtros .segmentos { flex-wrap: wrap; overflow: visible; }
}

/* A barra empilhada «Onde estão os leads» (lote 5). */
.sp { display: flex; flex-direction: column; gap: 12px; }
.sp-b { display: flex; gap: 3px; height: 14px; }
.sp-b > span { display: block; min-width: 4px; border-radius: 4px; }
.sp .lgs { gap: 6px 20px; }
.sp .lg b { margin-left: 6px; font-family: var(--mono); color: var(--tx); }

/* Chatbots › Estatísticas do bot: os quatro números numa faixa (escolhem o
   gráfico) e o gráfico em área, sem caixas dentro do widget (lote 5). */
.sp-est-nums { gap: 0; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.sp-est-num { align-items: flex-start; gap: 4px; padding: 14px 16px; margin-left: -1px; border: 0; border-left: 1px solid var(--ln); border-radius: 0; background: none; text-align: left; box-shadow: none; }
.sp-est-num > b { font: 600 22px var(--mono); }
.sp-est-num span, .sp-est-num small { font-size: 12px; color: var(--t3); }
.sp-est-num span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 3px; background: var(--cor); }
.sp-est-num:hover { background: var(--el); }
.sp-est-num.on { background: var(--acs); box-shadow: inset 0 -2px 0 var(--cor); border-color: var(--ln); }
.sp-est-graf-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sp-est-graf-cab b { font-size: 13px; font-weight: 600; color: var(--tx); }
.sp-est-graf-cab span { font: 11px var(--mono); color: var(--t3); }
@media (max-width: 950px) {
  .sp-est-num { border-top: 1px solid var(--ln); margin-top: -1px; }
}

.kv.neg, .neg { color: var(--r); }
.kv.pos { color: var(--g); }

/* Cartão escolhido (filtra a lista) e as barras do Tempo real com gradiente. */
.kc.on { border-color: var(--act); box-shadow: inset 0 0 0 1px var(--act); }
.tr-barra-e { background: linear-gradient(180deg, var(--c1), var(--g)); }
.tr-barra-r { background: linear-gradient(180deg, var(--b), var(--cy)); }
.kcs.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 950px) { .kcs.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kcs.k5 > .kc:last-child { grid-column: 1 / -1; } }
@media (max-width: 950px) {
  /* Ações dentro de um contentor (as das Campanhas): também a toda a largura, todas iguais. */
  .tabela-cartoes tbody tr td.acoes > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
  .tabela-cartoes tbody tr td.acoes > div > .btn { width: auto; margin: 0; }
}
@media (max-width: 950px) {
  /* O título de uma campanha no cartão do telemóvel: em duas linhas, sem sair do cartão. */
  .tabela-cartoes .tx { min-width: 0; max-width: 100%; }
  .tabela-cartoes .tx > .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ── Cartões das tabelas no telemóvel, arrumados (07/11, queixa dos textos
   partidos): o título a toda a largura; cada texto numa linha só, com o rótulo
   à esquerda e o valor à direita (reticências se não couber); os números todos
   juntos numa faixa de três colunas iguais; os botões fecham o cartão. ── */
@media all {
  @container tabela (max-width: 560px) or style(--cartoes: sim) {
    .tabela-cartoes tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 14px; }
    .tabela-cartoes tbody tr td, .tabela-cartoes tbody tr:nth-child(even) td, .tabela-cartoes tbody tr:hover td {
      grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px;
      min-width: 0; padding: 7px 0; border-top: 1px solid var(--ln); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tabela-cartoes tbody tr td::before { flex: none; }
    .tabela-cartoes tbody tr td > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
    /* 08/11: vários selos numa célula (os Sinais do Antifraude) passam à linha
       de baixo inteiros, em vez de ficarem cortados ao meio. */
    .tabela-cartoes tbody tr td:has(> .chip + .chip) { flex-wrap: wrap; justify-content: flex-start; align-items: center; row-gap: 6px; column-gap: 0; }
    .tabela-cartoes tbody tr td:has(> .chip + .chip)::before { flex: 0 0 100%; }
    .tabela-cartoes tbody tr td:has(> .chip + .chip) > .chip { flex: none; max-width: 100%; }
    .tabela-cartoes tbody tr td:first-child, .tabela-cartoes tbody tr td.cel-titulo { display: block; padding: 0 0 10px; border-top: 0; white-space: normal; }
    .tabela-cartoes tbody tr td:first-child > *, .tabela-cartoes tbody tr td.cel-titulo > * { text-align: left; white-space: normal; }
    /* Os números: três por linha, rótulo pequeno por cima, valor em mono. */
    .tabela-cartoes tbody tr td.num { grid-column: span 2; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 8px 8px 6px 0; border-top: 0; font: 500 15px var(--mono); }
    .tabela-cartoes tbody tr td.num > * { text-align: left; }
    .tabela-cartoes tbody tr td.acoes { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--ln); overflow: visible; }
  }
}

/* ── Os números antigos (Metricas + Kpi, usados em ~150 sítios) com o desenho
   dos cartões da maquete (lote 6): a cor por ordem (lima, azul, roxo,
   laranja), o primeiro destacado e o filete de gradiente em baixo. As cores
   pedidas (verde, vermelho…) mandam sobre a da ordem. ── */
.metricas { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.kpi { position: relative; overflow: hidden; padding: 14px 16px 16px; border-radius: 14px; --kc: var(--act); --kg: var(--gl); }
.kpi:nth-child(4n + 2) { --kc: var(--b); --kg: var(--gb); }
.kpi:nth-child(4n + 3) { --kc: var(--p); --kg: var(--gp); }
.kpi:nth-child(4n + 4) { --kc: var(--o); --kg: var(--go); }
/* 08/11: só a risca fina em gradiente no fundo — a área colorida parecia
   sombra («sem sombras, super clean», como o Financeiro). */
.kpi::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--kg); opacity: .85; }
.kpi:first-child:not(.kpi-solto) { border-color: var(--acb); background: linear-gradient(180deg, var(--acs), transparent 70%), var(--sf); }
.kpi .val { color: var(--kc); font-size: 26px; }
.kpi .val.pequeno { color: var(--tx); font-size: 15px; }
.kpi .val.verde { color: var(--g); }
.kpi .val.vermelho { color: var(--r); }
.kpi .val.laranja { color: var(--o); }
.kpi .val.lima { color: var(--act); }
@media (max-width: 950px) {
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 12px 14px; border-radius: 16px; }
  .kpi .val { font-size: 20px; }
}
@media (max-width: 950px) {
  /* Cabeçalho no telemóvel: separadores e filtros numa linha inteira; os botões
     a seguir, todos com a mesma largura. */
  .pagina-cab-accoes { display: flex; flex-wrap: wrap; gap: 8px; }
  .pagina-cab-accoes > * { flex: 1 1 0; min-width: 0; }
  .pagina-cab-accoes > .abas-cab, .pagina-cab-accoes > .segmentos, .pagina-cab-accoes > .filtros { flex: 1 1 100%; }
  .pagina-cab-accoes > .btn { justify-content: center; white-space: nowrap; }
  /* As notas dos números numa linha só, com reticências. */
  .kc-s, .ks, .metricas > .kpi .pe { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra > .cc-procura, .filtros > .cc-procura { flex: 1 1 100%; width: 100%; }
}

/* ── Espaço igual entre os blocos de uma página (07/11, «contornos colados»):
   a página (e o invólucro único dela, quando há) fica em coluna com 12px
   entre cada bloco — avisos, filtros, números, cartões. As margens de cada
   peça deixam de contar; quem manda é o espaço da coluna. Grelhas e cartões
   ficam como estão. ── */
main.conteudo > div:not([class*="grelha"]):not(.card),
main.conteudo > div > div:only-child:not([class*="grelha"]):not(.card):not([class*="tabela"]):not([class*="cv"]):not(.cx) {
  display: flex; flex-direction: column; gap: 12px;
}
main.conteudo > div:not([class*="grelha"]):not(.card) > *,
main.conteudo > div > div:only-child:not([class*="grelha"]):not(.card):not([class*="tabela"]):not([class*="cv"]) > * {
  margin-top: 0; margin-bottom: 0;
}
@media (max-width: 950px) {
  main.conteudo > div:not([class*="grelha"]):not(.card),
  main.conteudo > div > div:only-child:not([class*="grelha"]):not(.card):not([class*="tabela"]):not([class*="cv"]) { gap: 10px; }
}

/* Antifraude › Suspeitos: o gráfico dos dias a dois terços e a rosca ao lado. */
.af-graficos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.af-graficos > .card { margin: 0; }
@media (max-width: 950px) { .af-graficos { grid-template-columns: minmax(0, 1fr); } }

/* Planeado contra real na mesma escala (Comparacao, ui.js). */
.cp { display: flex; flex-direction: column; gap: 14px; }
.cp-r { display: grid; grid-template-columns: 64px minmax(0, 1fr) 76px; gap: 10px; align-items: center; font-size: 13px; color: var(--tx); }
.cp-b { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cp-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-l i { display: block; height: 10px; border-radius: 99px; flex: 0 1 auto; min-width: 4px; }
.cp-l b { font-size: 12px; font-weight: 500; flex: none; color: var(--t2); }
.cp-v { text-align: right; font-size: 12px; white-space: nowrap; }
.pl-duas-graf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 950px) { .pl-duas-graf { grid-template-columns: minmax(0, 1fr); } }

/* A ponte do dinheiro do Fecho mensal (PonteDinheiro, ui.js). */
.ponte { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; }
.ponte-c { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.ponte-c > b { font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; }
.ponte-a { position: relative; height: 180px; }
.ponte-z { position: absolute; left: -5px; right: -5px; height: 1px; background: var(--ln2); }
.ponte-b { position: absolute; left: 18%; right: 18%; border-radius: 6px; }
.ponte-b.entra { background: linear-gradient(180deg, var(--c1), var(--g)); }
.ponte-b.sai { background: linear-gradient(180deg, var(--o), var(--r)); }
.ponte-b.fim { background: linear-gradient(180deg, var(--cy), var(--b)); }
.ponte-b.nulo { background: var(--t3); opacity: .5; }
.ponte-n { font-size: 11px; color: var(--t3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-graf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 950px) {
  .ponte { gap: 4px; }
  .ponte-a { height: 150px; }
  .ponte-c > b { font-size: 10px; }
  .fm-graf { grid-template-columns: minmax(0, 1fr); }
}

.fm-periodo { min-width: 200px; }
.fm-periodo .campo { margin: 0; }
@media (max-width: 950px) { .fm-periodo { flex: 1 1 100%; } }

/* Os planos do Planeamento CPA em cartões (lote 7): a marca, a faixa dos
   números, a barra do que entrou e os botões. */
.plc-lista { display: flex; flex-direction: column; margin: 0 -16px -16px; }
.plc { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--ln); }
.plc.aberto { background: linear-gradient(180deg, var(--acs), transparent 80%); }
.plc-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.plc-a { width: 36px; height: 36px; border-radius: 10px; background: var(--acs); color: var(--act); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.plc-n { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; }
.plc-n b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-n span { font-size: 12px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-est { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--os); color: var(--o); flex: none; }
.plc-est::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.plc-est.fechado { background: var(--gs); color: var(--g); }
.plc-m { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--bg); border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; }
.plc-m > div { padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--ln); min-width: 0; }
.plc-m > div:first-child { border-left: 0; }
.plc-m span { font-size: 11px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-m b { font: 500 14px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-q { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
.plc-b { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plc-b .pl-barra { min-width: 0; }
.plc-acc { display: flex; align-items: center; gap: 8px; }
@media (max-width: 950px) {
  .plc-m > .so-pc { display: none; }
  .plc-m > div { border-left: 0; }
  .plc-m > div:not(.so-pc) ~ div:not(.so-pc) { border-left: 1px solid var(--ln); }
  .plc-acc { width: 100%; }
  .plc-acc > .btn:not(.icone) { flex: 1 1 0; justify-content: center; min-width: 0; }
}
.pl-barra-fundo { background: var(--el); }
.pl-barra-fundo span, .pl-barra-fundo span.cheia { background: var(--gl); }
/* Selos com ponto (os «bdg» da maquete): estados de contas e travões. */
.selo { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; flex: none; background: var(--el); color: var(--t2); }
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.selo.azul { background: var(--bs); color: var(--b); }
.selo.laranja { background: var(--os); color: var(--o); }
.selo.verde { background: var(--gs); color: var(--g); }
.selo.vermelho { background: var(--rs); color: var(--r); }
.selo.roxo { background: var(--ps); color: var(--p); }
.card > .plc-lista .plc-h > .btn { flex: none; }
/* Antifraude: os links que passam o travão (12/11). */
.af-livres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 46px; min-width: 0; }
.af-livres-t { font-size: 12px; color: var(--t3); margin-right: 2px; }
.af-livres-v { font-size: 12px; color: var(--t3); }
.af-livre { display: inline-flex; align-items: center; gap: 4px; height: 26px; max-width: 100%; padding: 0 4px 0 10px; border-radius: 13px; background: var(--acs); color: var(--act); font-size: 12px; font-weight: 500; min-width: 0; }
.af-livre .cortar { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-livre-x { width: 20px; height: 20px; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; flex: none; }
.af-livre-x:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.af-livres .sel { width: 240px; max-width: 100%; }
@media (max-width: 700px) { .af-livres { padding-left: 0; } .af-livres .sel { width: 100%; } }
/* As dicas dos gráficos (usarDica): por cima de tudo, a quebrar linha antes
   de passar da janela; a linha de cada série nunca se parte. */
.dica-grafico { z-index: 10050; white-space: normal; min-width: 120px; max-width: min(320px, calc(100vw - 16px)); padding: 9px 11px; line-height: 1.55; }
.dica-grafico .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dica-grafico .r { white-space: nowrap; min-width: 0; }
.dica-grafico .r b { color: var(--tx); }
/* Cabeçalho dos gráficos divergentes: numa linha, com reticências se não couber. */
.d2-r.th > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 600px) { .d2-r.th { font-size: 10px; letter-spacing: .03em; } }

/* ── Chat interno da equipa (07/11, chat-interno.js) ─────────────────────────
   O CSS do ChatInterno da PlaySlot, nas cores do visual novo: --sf (painel),
   --el (cartões e hover), --ln (linhas), --tx/--t2/--t3 (textos), o lima da
   marca (--c1 fundo, --act texto) e --r. */
.chi-fab { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--ln2); background: var(--sf); color: var(--tx); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; -webkit-tap-highlight-color: transparent; }
.chi-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
.chi-fab:focus-visible { outline: 2px solid var(--act); outline-offset: 3px; }
.chi-fab.tem { background: var(--c1); color: var(--onac); border-color: transparent; }
.chi-fab.mencao { animation: chi-pulso 1.6s ease-out infinite; }
@keyframes chi-pulso { 0% { box-shadow: 0 0 0 0 rgba(204, 255, 0, .55), 0 8px 22px rgba(0, 0, 0, .35); } 70% { box-shadow: 0 0 0 14px rgba(204, 255, 0, 0), 0 8px 22px rgba(0, 0, 0, .35); } 100% { box-shadow: 0 0 0 0 rgba(204, 255, 0, 0), 0 8px 22px rgba(0, 0, 0, .35); } }
.chi-fab-conta { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--r); color: #fff; font: 700 11px var(--letra); display: grid; place-items: center; font-variant-numeric: tabular-nums; border: 2px solid var(--bg); }
.chi-fab-arroba { position: absolute; bottom: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--o); color: #111; font: 800 11px var(--letra); display: grid; place-items: center; border: 2px solid var(--bg); }
.chi-avisos { position: fixed; right: 20px; bottom: 82px; z-index: 901; display: flex; flex-direction: column; gap: 8px; width: min(330px, calc(100vw - 32px)); }
.chi-aviso { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--ln2); border-radius: 12px; background: var(--sf); color: var(--tx); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); cursor: pointer; animation: chi-entrar .22s ease; font-family: var(--letra); }
.chi-aviso > span:not(.chi-av):not(.chi-aviso-x) { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chi-aviso strong { font-size: 12.5px; }
.chi-aviso small { font-size: 12px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-aviso-x { color: var(--t3); flex: none; display: grid; place-items: center; }
@keyframes chi-entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.chi-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100000; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--sf); color: var(--tx); border-left: 1px solid var(--ln); box-shadow: -12px 0 32px rgba(0, 0, 0, .3); animation: chi-deslizar .2s ease; font-family: var(--letra); }
@keyframes chi-deslizar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.chi-topo { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--ln); flex: none; min-height: 62px; box-sizing: border-box; }
.chi-titulo { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.chi-titulo strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-titulo small { font-size: 11.5px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-ib { border: 0; background: transparent; color: var(--t2); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.chi-ib:hover, .chi-ib.ativo { background: var(--el); color: var(--tx); }
.chi-ib:focus-visible, .chi-enviar:focus-visible, .chi-conversa:focus-visible { outline: 2px solid var(--act); outline-offset: 1px; }
.chi-ib.perigo { color: var(--r); }
.chi-ib:disabled { opacity: .35; cursor: default; background: transparent; }

.chi-av { position: relative; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: hsl(var(--chi-h, 210) 40% 38%); line-height: 1; }
.chi-av img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* 08/11: absoluta, senão uma foto ao alto esticava o círculo */
.chi-av > i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--t3); border: 2px solid var(--sf); }
.chi-av > i.on { background: var(--g); }
.chi-geral { border-radius: 10px; display: grid; place-items: center; background: var(--acs); color: var(--act); flex: none; }

.chi-lista { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chi-seccao { display: flex; align-items: center; gap: 5px; margin: 10px 8px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.chi-privada { display: inline-flex; align-items: center; gap: 4px; }
.chi-autor { cursor: pointer; border-radius: 50%; }
strong.chi-autor { border-radius: 4px; }
strong.chi-autor:hover { text-decoration: underline; }
.chi-procura { display: flex; align-items: center; gap: 8px; margin: 12px 14px 6px; padding: 0 10px; height: 36px; border: 1px solid var(--ln); border-radius: 10px; background: var(--bg); color: var(--t3); flex: none; }
.chi-procura:focus-within { border-color: var(--acb); }
.chi-procura input { flex: 1; border: 0; background: transparent; color: var(--tx); font: 13px var(--letra); outline: 0; min-width: 0; height: 100%; padding: 0; }
.chi-conversas { overflow-y: auto; padding: 4px 8px 12px; flex: 1; }
.chi-conversa { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 8px; border: 0; background: transparent; color: var(--tx); border-radius: 10px; cursor: pointer; text-align: left; font-family: var(--letra); }
.chi-conversa:hover { background: var(--el); }
.chi-conversa-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.chi-conversa-info .linha { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chi-conversa-info strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chi-conversa-info small { font-size: 11px; color: var(--t3); flex: none; }
.chi-conversa-info .prev { font-size: 12px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chi-conversa.por-ler strong { font-weight: 700; }
.chi-conversa.por-ler .prev { color: var(--tx); }
.chi-conta-mini { font-style: normal; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--c1); color: var(--onac); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; flex: none; box-sizing: border-box; }
.chi-arroba-mini { font-style: normal; width: 19px; height: 19px; border-radius: 50%; background: var(--o); color: #111; font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: none; }

.chi-sala { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }
.chi-corpo-caixa { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chi-corpo { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 14px; overscroll-behavior: contain; }
.chi-vazio { text-align: center; color: var(--t3); font-size: 13px; padding: 40px 24px; line-height: 1.6; margin: 0; }
.chi-dia, .chi-novas { display: flex; align-items: center; gap: 10px; margin: 14px 16px 6px; font-size: 11px; font-weight: 600; color: var(--t3); }
.chi-dia::before, .chi-dia::after, .chi-novas::before, .chi-novas::after { content: ''; flex: 1; height: 1px; background: var(--ln); }
.chi-dia span { padding: 3px 10px; border: 1px solid var(--ln); border-radius: 999px; background: var(--el); }
.chi-novas { color: var(--r); }
.chi-novas::before, .chi-novas::after { background: var(--r); opacity: .5; }

.chi-msg { display: flex; gap: 10px; padding: 6px 16px 2px; position: relative; touch-action: pan-y; }
.chi-msg.junto { padding-top: 1px; }
.chi-msg:hover { background: rgba(127, 127, 127, .06); }
.chi-msg.mencionado { background: var(--acs); box-shadow: inset 2px 0 0 var(--act); }
.chi-msg.pendente { opacity: .65; }
.chi-msg-corpo { min-width: 0; flex: 1; user-select: text; }
.chi-msg-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.chi-msg-cab strong { font-size: 13px; font-weight: 600; }
.chi-msg.minha .chi-msg-cab strong { color: var(--act); }
.chi-msg-cab time { font: 11px var(--mono); color: var(--t3); }
.chi-msg-pe { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.chi-hora-lado { width: 34px; flex: none; font: 10px var(--mono); color: var(--t3); text-align: right; padding-top: 3px; opacity: 0; }
.chi-msg:hover .chi-hora-lado { opacity: 1; }
.chi-texto { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chi-texto a { color: var(--b); text-decoration: underline; text-underline-offset: 2px; }
.chi-texto mark { background: rgba(255, 159, 10, .35); color: inherit; border-radius: 3px; padding: 0 1px; }
.chi-men { color: var(--act); font-weight: 600; }
.chi-men.minha { background: var(--acs); border-radius: 4px; padding: 0 3px; }
.chi-tiques { display: inline-flex; align-items: center; color: var(--t3); }
.chi-tiques.lida { color: var(--act); }
.chi-gira { animation: chi-gira 1s linear infinite; }
@keyframes chi-gira { to { transform: rotate(360deg); } }
.chi-editada { font-size: 10.5px; color: var(--t3); font-style: italic; }
.chi-msg.a-editar { background: var(--acs); }
.chi-msg.achada { background: rgba(255, 159, 10, .10); }
.chi-anexos { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 5px; }
.chi-img { display: block; max-width: 240px; max-height: 220px; border-radius: 8px; border: 1px solid var(--ln); object-fit: cover; }
.chi-fich { display: flex; align-items: center; gap: 8px; max-width: 280px; padding: 8px 10px; border: 1px solid var(--ln); border-radius: 8px; background: var(--el); color: var(--tx); text-decoration: none; font-size: 12.5px; }
.chi-fich span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.chi-fich small { color: var(--t3); flex: none; font-family: var(--mono); }
a.chi-fich:hover { border-color: var(--acb); }
.chi-reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.chi-reacao { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--ln); border-radius: 999px; background: var(--el); color: var(--t2); font-size: 13px; line-height: 1; cursor: pointer; transition: border-color .12s, background .12s; }
.chi-reacao small { font: 600 11px var(--mono); }
.chi-reacao:hover { border-color: var(--t3); }
.chi-reacao.minha { background: var(--acs); border-color: var(--acb); color: var(--tx); }
.chi-reagir { position: absolute; top: 4px; right: 10px; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .12s; }
.chi-msg:hover .chi-reagir, .chi-reagir:focus-within, .chi-reagir.aberto { opacity: 1; pointer-events: auto; }
.chi-reagir .abrir { width: 26px; height: 26px; border: 1px solid var(--ln2); border-radius: 50%; background: var(--el); color: var(--t2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.chi-reagir .abrir:hover { color: var(--tx); border-color: var(--t3); }
.chi-encaminhada { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--t3); margin-bottom: 2px; }
.chi-encaminhada strong { font-weight: 600; color: var(--t2); }
.chi-citacao { display: flex; flex-direction: column; gap: 1px; max-width: 100%; margin: 2px 0 4px; padding: 4px 10px; border: 0; border-left: 3px solid var(--act); border-radius: 4px 8px 8px 4px; background: var(--acs); color: var(--tx); text-align: left; cursor: pointer; font-family: var(--letra); }
.chi-citacao strong { font-size: 12px; font-weight: 600; color: var(--act); }
.chi-citacao span { font-size: 12.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.chi-msg.mencionado .chi-citacao { background: rgba(127, 127, 127, .10); }
.chi-msg.realce { animation: chi-realce 1.4s ease; }
@keyframes chi-realce { 0%, 35% { background: rgba(204, 255, 0, .16); } 100% { background: transparent; } }

/* O menu da mensagem como no Telegram: a fila de reacções por cima, as acções por baixo. */
.chi-menu { position: absolute; z-index: 8; background: var(--el); border: 1px solid var(--ln2); box-shadow: 0 14px 36px rgba(0, 0, 0, .4); animation: chi-menu .14s ease; transform-origin: top left; }
@keyframes chi-menu { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.chi-menu.pilula { display: flex; align-items: center; padding: 4px 6px; border-radius: 999px; }
.chi-menu.pilula button { width: 28px; height: 32px; flex: none; border: 0; border-radius: 50%; background: transparent; font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .1s, background .1s; padding: 0; }
.chi-menu.pilula button:hover { background: rgba(127, 127, 127, .14); transform: scale(1.2); }
.chi-menu.pilula button.minha { background: var(--acs); }
.chi-menu.pilula .expandir { color: var(--t2); width: 26px; }
.chi-menu.pilula .expandir:hover { transform: none; color: var(--tx); }
.chi-menu.pilula.mais { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); max-height: 224px; overflow-y: auto; border-radius: 16px; padding: 8px; }
.chi-menu.pilula.mais button { width: auto; }
.chi-menu.cartao { width: 220px; max-width: calc(100% - 16px); display: flex; flex-direction: column; padding: 6px; border-radius: 14px; }
.chi-menu.cartao button { display: flex; align-items: center; gap: 14px; width: 100%; height: 37px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--tx); font: 13.5px var(--letra); text-align: left; cursor: pointer; }
.chi-menu.cartao button svg { color: var(--t2); flex: none; }
.chi-menu.cartao button:hover, .chi-menu.cartao button:focus-visible { background: rgba(127, 127, 127, .12); outline: none; }
.chi-menu.cartao button.perigo, .chi-menu.cartao button.perigo svg { color: var(--r); }
.chi-menu-fundo { position: absolute; inset: 0; z-index: 6; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: chi-entrar .15s ease; }
.chi-msg.no-menu { z-index: 7; background: var(--sf); border-radius: 12px; }
.chi-arrasto { position: absolute; top: 50%; right: -34px; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center; background: rgba(127, 127, 127, .16); color: var(--t2); opacity: .5; transform: scale(.8); transition: opacity .12s, transform .12s, background .12s, color .12s; pointer-events: none; }
.chi-msg.a-responder .chi-arrasto { opacity: 1; transform: scale(1); background: var(--c1); color: var(--onac); }
@media (hover: none) { .chi-reagir { display: none; } .chi-msg-corpo { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }

.chi-a-escrever { color: var(--act) !important; font-weight: 500; }
.chi-a-escrever i { display: inline-flex; gap: 2px; margin-left: 3px; vertical-align: middle; }
.chi-a-escrever b { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: chi-pontos 1.2s infinite ease-in-out; }
.chi-a-escrever b:nth-child(2) { animation-delay: .18s; }
.chi-a-escrever b:nth-child(3) { animation-delay: .36s; }
@keyframes chi-pontos { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

.chi-descer { position: absolute; right: 14px; bottom: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ln2); background: var(--el); color: var(--t2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); animation: chi-entrar .15s ease; padding: 0; }
.chi-descer:hover { color: var(--tx); }
.chi-descer em { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--c1); color: var(--onac); font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-sizing: border-box; }

.chi-fixada { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--ln); flex: none; background: var(--sf); }
.chi-fixada .ir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 14px; border: 0; background: transparent; color: var(--tx); text-align: left; cursor: pointer; font-family: var(--letra); border-radius: 8px; }
.chi-fixada .ir:hover { background: rgba(127, 127, 127, .08); }
.chi-fixada .marcas { display: flex; flex-direction: column; gap: 2px; align-self: stretch; justify-content: center; }
.chi-fixada .marcas i { width: 2px; flex: 1; max-height: 12px; border-radius: 2px; background: var(--ln2); }
.chi-fixada .marcas i.ativa { background: var(--act); }
.chi-fixada .pino { color: var(--act); flex: none; }
.chi-fixada .txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.chi-fixada .txt strong { font-size: 12px; font-weight: 600; color: var(--act); }
.chi-fixada .txt small { font-size: 12.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-busca { display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--ln); flex: none; }
.chi-busca .chi-procura { flex: 1; margin: 0 4px 0 12px; }
.chi-busca > small { font: 11px var(--mono); color: var(--t3); white-space: nowrap; min-width: 44px; text-align: right; }

.chi-responder { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-left: 4px; }
.chi-responder .seta { color: var(--act); flex: none; }
.chi-responder .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 2px 0 2px 10px; border: 0; border-left: 2px solid var(--act); background: transparent; color: var(--tx); text-align: left; cursor: pointer; font-family: var(--letra); }
.chi-responder .txt strong { font-size: 12px; font-weight: 600; color: var(--act); }
.chi-responder .txt small { font-size: 12.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chi-msg.a-selecionar { cursor: pointer; user-select: none; }
.chi-msg.a-selecionar .chi-msg-corpo { user-select: none; }
.chi-msg.escolhida { background: var(--acs); }
.chi-visto { width: 20px; height: 20px; margin-top: 7px; border-radius: 50%; border: 2px solid var(--t3); display: grid; place-items: center; flex: none; color: var(--onac); transition: background .12s, border-color .12s; box-sizing: border-box; }
.chi-visto.sim { background: var(--c1); border-color: var(--c1); }
.chi-barra-sel { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--ln); padding: 12px 12px calc(14px + env(safe-area-inset-bottom)); flex: none; }
.chi-barra-sel strong { flex: 1; font-size: 13.5px; font-weight: 600; padding-left: 4px; }

.chi-dialogo-fundo { position: absolute; inset: 0; z-index: 9; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; animation: chi-entrar .15s ease; }
.chi-dialogo { width: 100%; max-width: 330px; max-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--sf); border: 1px solid var(--ln2); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .45); box-sizing: border-box; }
.chi-dialogo-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--rs); color: var(--r); }
.chi-dialogo > strong { font-size: 15px; font-weight: 600; }
.chi-dialogo p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--t2); }
.chi-dialogo .botoes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.chi-dialogo .botoes .btn { justify-content: center; }
.chi-dialogo .chi-procura { margin: 0; }
.chi-dialogo.encaminhar { max-height: min(460px, 100%); }
.chi-dialogo .destinos { overflow-y: auto; min-height: 0; flex: 1; margin: 0 -8px; }
.chi-nota { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 10; padding: 7px 14px; border-radius: 999px; background: var(--tx); color: var(--sf); font-size: 12.5px; font-weight: 600; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); animation: chi-entrar .15s ease; pointer-events: none; white-space: nowrap; }
.chi-largar { position: absolute; inset: 8px; z-index: 9; border: 2px dashed var(--act); border-radius: 12px; background: var(--acs); display: grid; place-items: center; font-weight: 600; color: var(--act); pointer-events: none; }

.chi-compor { position: relative; border-top: 1px solid var(--ln); padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); flex: none; }
.chi-caixa { display: flex; align-items: flex-end; gap: 2px; border: 1px solid var(--ln); border-radius: 12px; background: var(--bg); padding: 4px; transition: border-color .15s; }
.chi-caixa:focus-within { border-color: var(--acb); }
.chi-caixa textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; color: var(--tx); font: 13.5px/1.45 var(--letra); padding: 7px 6px; max-height: 140px; box-shadow: none; outline: none; overflow-y: hidden; scrollbar-width: thin; }
.chi-caixa textarea::placeholder { color: var(--t3); }
.chi-enviar { width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--c1); color: var(--onac); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.chi-enviar:disabled { opacity: .4; cursor: default; }
.chi-sugestoes, .chi-emojis { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); background: var(--el); border: 1px solid var(--ln2); border-radius: 12px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .3); padding: 6px; z-index: 2; }
.chi-sugestoes-tit { display: block; padding: 4px 8px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.chi-sugestoes button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; background: transparent; color: var(--tx); border-radius: 8px; cursor: pointer; text-align: left; font: 13px var(--letra); }
.chi-sugestoes button > span:not(.chi-av):not(.chi-geral) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chi-sugestoes button small { color: var(--t3); font-size: 11px; flex: none; }
.chi-sugestoes button.ativa, .chi-sugestoes button:hover { background: rgba(127, 127, 127, .14); }
.chi-emojis .cats { display: flex; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--ln); margin-bottom: 6px; overflow-x: auto; }
.chi-emojis .cats button { border: 0; background: transparent; color: var(--t2); font: 11.5px var(--letra); padding: 5px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.chi-emojis .cats button.ativa { background: var(--acs); color: var(--act); font-weight: 600; }
.chi-emojis .grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; max-height: 190px; overflow-y: auto; }
.chi-emojis .grelha button { border: 0; background: transparent; font-size: 20px; line-height: 1; height: 34px; border-radius: 7px; cursor: pointer; }
.chi-emojis .grelha button:hover { background: rgba(127, 127, 127, .14); }
.chi-a-enviar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chi-chip { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 6px 5px 9px; border: 1px solid var(--ln); border-radius: 8px; background: var(--el); font-size: 12px; }
.chi-chip .nome { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-chip small { color: var(--t3); font-family: var(--mono); }
.chi-chip.erro { border-color: var(--r); }
.chi-chip.erro small { color: var(--r); }
.chi-chip .barra { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--c1); transition: width .2s; }
.chi-chip button { border: 0; background: transparent; color: var(--t3); display: grid; place-items: center; cursor: pointer; padding: 2px; border-radius: 4px; }

[data-tema="claro"] .chi-fab { box-shadow: 0 8px 22px rgba(15, 23, 42, .16); }
[data-tema="claro"] .chi-fab-arroba { color: #fff; }
/* No telemóvel: o ícone por cima da barra de baixo e o painel no ecrã inteiro. */
@media (max-width: 950px) {
  .chi-fab { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .chi-avisos { right: 16px; bottom: calc(156px + env(safe-area-inset-bottom)); }
  /* Com o Menu aberto (classe posta pela casca), o ícone e os avisos saem. */
  html.menu-aberto .chi-fab, html.menu-aberto .chi-avisos { display: none; }
}
@media (max-width: 640px) {
  .chi-painel { width: 100vw; border-left: 0; }
  .chi-topo { padding-top: calc(12px + env(safe-area-inset-top)); }
  .chi-img { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .chi-fab, .chi-painel, .chi-aviso, .chi-fab.mencao, .chi-menu, .chi-dialogo-fundo, .chi-nota, .chi-a-escrever b, .chi-menu-fundo, .chi-descer { animation: none; transition: none; }
}
/* Os toasts do CRM ficam por cima do ícone do chat, no mesmo canto. */
.toasts { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
@media (max-width: 950px) { .toasts { bottom: calc(156px + env(safe-area-inset-bottom)) !important; } }
.chi-caixa textarea { height: 34px; white-space: pre-wrap; }
.chi-caixa textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chi-caixa textarea { min-height: 34px !important; }
/* Brand face › Guiões: as abas e o filtro das fornadas na mesma linha (maquete). */
.pr-linha-abas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-linha-abas > .abas { margin: 0; }
.pr-linha-abas > .sel { width: auto; min-width: 190px; }
@media (max-width: 600px) { .pr-linha-abas > .abas { width: 100%; } .pr-linha-abas > .abas > .aba { flex: 1 1 0; justify-content: center; } .pr-linha-abas > .sel { width: 100%; } }
.chip.laranja { background: var(--os); color: var(--o); }

/* Brand face › Calendário (lote 7): o calendário numa caixa com o mês e a
   legenda no cabeçalho; as cores dos tipos da maquete (jogo laranja, evento
   roxo, gravação azul, viagem verde, outro âmbar); os próximos com o selo. */
.bf-cal-grelha { gap: 12px; }
.bf-cal-card { padding: 0; overflow: hidden; }
.bf-cal-cab { margin: 0; padding: 10px 12px 10px 10px; gap: 6px; border-bottom: 1px solid var(--ln); flex-wrap: wrap; }
.bf-cal-cab .bf-cal-mes { font: 600 14px var(--letra); margin: 0 4px; white-space: nowrap; }
.bf-cal-card .mb-cal { border: 0; border-radius: 0; }
.bf-cal-legenda { gap: 6px 12px; }
.bf-tipo { font: 500 12px var(--letra); color: var(--t2); }
.bf-tipo::before { border-radius: 3px; }
.bf-tipo.jogo, .mb-cal-item.bf-ev.jogo { --cor: var(--o); }
.bf-tipo.evento, .mb-cal-item.bf-ev.evento { --cor: var(--p); }
.bf-tipo.gravacao, .mb-cal-item.bf-ev.gravacao { --cor: var(--b); }
.bf-tipo.viagem, .mb-cal-item.bf-ev.viagem { --cor: var(--g); }
.bf-tipo.outro, .mb-cal-item.bf-ev.outro { --cor: var(--am); }
.bf-proximos { gap: 0; margin: 0 -16px -16px; }
.bf-proximos li + li { border-top: 1px solid var(--ln); }
.bf-proximos button { border: 0; border-radius: 0; padding: 12px 16px; gap: 4px; background: transparent; }
.bf-proximos button:hover { background: var(--el); }
.bf-proximos .bf-tipo { justify-self: start; height: 22px; padding: 0 8px; border-radius: 11px; gap: 6px; color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); }
.bf-proximos .bf-tipo::before { width: 6px; height: 6px; border-radius: 3px; }
.bf-proximos b { font-size: 13px; }
.bf-proximos .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-cal-grelha > * { margin: 0 !important; }
/* As confirmações e as perguntas ficam por cima de tudo: das janelas da casca e do chat (lote 8). */
.veu:has(> .modal.confirmacao), .veu:has(.confirmar-tx) { z-index: 200000; }

/* Sliders e campos de procura sem a cara do browser (lote 8): a calha fina com
   o lima até ao valor e a bola branca; sem o «x» nativo da procura. */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 18px; background: transparent; cursor: pointer; padding: 0; border: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--ln2); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ln2); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ac); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--ac); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ac); }
input[type="range"]:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* 08/11: sugestões da IA dos Chatbots no telemóvel — à largura da caixa, o texto parte em vez de sair. */
@media (max-width: 640px) {
  .cbia-sugestoes { width: 100%; flex-direction: column; align-items: stretch; }
  .cbia-sugestoes > .btn { width: 100%; height: auto; min-height: 44px; padding: 10px 14px; white-space: normal; text-align: left; justify-content: flex-start; line-height: 1.35; }
}

/* 08/11 (lote 8): nas janelas, os campos lado a lado como na maquete. A .g2
   geral só se dividia com 360px por coluna e nas janelas (até 760px) ficava
   sempre numa coluna. Só as grelhas feitas só de campos; no telemóvel, uma coluna. */
.modal-corpo .grelha.g2:not(:has(> :not(.campo))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-corpo .grelha.g3:not(:has(> :not(.campo))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .modal-corpo .grelha.g2:not(:has(> :not(.campo))), .modal-corpo .grelha.g3:not(:has(> :not(.campo))) { grid-template-columns: minmax(0, 1fr); }
}

/* 08/11: as linhas dos gráficos com dica marcam-se ao passar o rato. */
.d2-r.com-dica { cursor: default; }
.d2-r.com-dica:hover { background: var(--el); }

/* 08/11: a escolha da pasta nas tabelas com pastas nunca encolhe ao ponto de cortar o nome. */
.com-pastas td .pz-mover { display: block; min-width: 140px; }

/* 08/11: títulos compridos numa célula com reticências, para as colunas de números caberem. */
.tabela-cartoes td.cel-titulo-curto { max-width: 360px; }
.tabela-cartoes td.cel-titulo-curto > * { display: block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 08/11: o link das landing pages com reticências (o nome inteiro ao passar o rato). */
.lp-link > .mono { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* 08/11: a janela «Descarregar o CRM» (app de secretária, BotaoAppDesktop em app.js). */
.appd-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.appd-opcao { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px; border: 1px solid var(--ln2); border-radius: 12px; background: var(--el); color: var(--tx); text-align: center; text-decoration: none; }
a.appd-opcao:hover { border-color: var(--acb); background: var(--acs); }
.appd-opcao > span { font-size: 12px; color: var(--t2); }
.appd-sub { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.appd-sub a { padding: 5px 10px; border: 1px solid var(--ln2); border-radius: 8px; color: var(--tx); font-size: 12px; text-decoration: none; }
.appd-sub a:hover { border-color: var(--acb); background: var(--acs); }
@media (max-width: 480px) { .appd-opcoes { grid-template-columns: 1fr; } }
/* 08/11: tabela ajustável (Tabela com `ajustavel`, ui.js): sempre tabela, desliza na horizontal e as colunas alargam ao arrastar o bordo do cabeçalho. */
.tabela-ajustavel { overflow-x: auto; margin: 0 -16px; }
.tabela-ajustavel:last-child { margin-bottom: -16px; }
.tabela-ajustavel th.th-ajustavel { position: relative; }
.tabela-ajustavel .th-puxar { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
.tabela-ajustavel .th-puxar::after { content: ''; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 2px; background: var(--ln2); }
.tabela-ajustavel .th-puxar:hover::after { background: var(--ac); top: 0; bottom: 0; }
.tabela-ajustavel table[style*='fixed'] td, .tabela-ajustavel table[style*='fixed'] th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-ajustavel td.cel-titulo-curto, .tabela-ajustavel td.cel-titulo-curto > * { max-width: none; }
@media (max-width: 900px) { .tabela-ajustavel { margin: 0 -14px; } }
/* 08/11: «Limpar sozinho» na janela Limpar as conversas. */
.cb-limpeza-auto { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--ln2); border-radius: 12px; background: var(--el); }
.cb-limpeza-auto p { margin: 4px 0 0; }

/* ── 08/11 (Nelson: «organize melhor isto, visual e layout péssimo»): o cartão
   das Campanhas quando a tabela não cabe. Em cima o título e os botões na mesma
   linha; por baixo a data e o filtro numa linha curta; e os cinco números lado a
   lado, em caixas iguais (eram uma linha por campo e números soltos). ── */
@media all {
  @container tabela (max-width: 560px) or style(--cartoes: sim) {
    .tabela-cartoes tbody tr:has(.camp-titulo) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 16px; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td { border-top: 0; padding: 0; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td:first-child { grid-column: 1 / 4; grid-row: 1; align-self: center; }
    .tabela-cartoes tbody tr:has(.camp-titulo) .camp-titulo .t { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.acoes { grid-column: 4 / -1; grid-row: 1; align-self: center; justify-self: end; padding: 0; border-top: 0; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.acoes > div { display: inline-flex; width: auto; gap: 6px; }
    /* Os botões de ícone quadrados (uma regra geral dos cartões deixava-os com 16 px de largura e 30 de altura). */
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.acoes .btn.icone { width: 30px; min-width: 30px; height: 30px; padding: 0; justify-content: center; }
    /* A data e o filtro: rótulo pequeno e valor ao lado, à esquerda, sem linhas. */
    .tabela-cartoes tbody tr:has(.camp-titulo) > td:nth-child(2), .tabela-cartoes tbody tr:has(.camp-titulo) > td:nth-child(3) {
      grid-row: 2; justify-content: flex-start; gap: 8px; font-size: 13px; color: var(--t2); }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td:nth-child(2) { grid-column: 1 / 3; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td:nth-child(3) { grid-column: 3 / -1; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td:nth-child(2) > *, .tabela-cartoes tbody tr:has(.camp-titulo) > td:nth-child(3) > * { text-align: left; }
    /* Os números: cinco caixas iguais, rótulo por cima. */
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.num { grid-column: auto; grid-row: 3; padding: 8px 10px; border: 1px solid var(--ln); border-radius: 10px; background: var(--el); gap: 4px; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.num::before { font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; }
  }
  /* Estreito: o título a toda a largura e os botões por baixo dos números. */
  @container tabela (max-width: 560px) {
    .tabela-cartoes tbody tr:has(.camp-titulo) > td:first-child { grid-column: 1 / -1; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td:nth-child(2), .tabela-cartoes tbody tr:has(.camp-titulo) > td:nth-child(3) { grid-column: 1 / -1; grid-row: auto; }
    .tabela-cartoes tbody tr:has(.camp-titulo) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    /* Três números por linha e os dois de baixo mais largos: cinco caixas cortavam «Interagiram». */
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.num { grid-row: auto; grid-column: span 2; padding: 6px 8px; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.num:nth-child(7), .tabela-cartoes tbody tr:has(.camp-titulo) > td.num:nth-child(8) { grid-column: span 3; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.acoes { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; padding-top: 10px; border-top: 1px solid var(--ln); }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.acoes > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
    .tabela-cartoes tbody tr:has(.camp-titulo) > td.acoes .btn.icone { width: auto; height: 36px; }
  }
}
/* 08/11 (Nelson: «o Apagar está mais alto do que o Fechar»): têm a mesma altura (34 px), mas o botão neutro do rodapé tinha o contorno da cor da janela e só se via o miolo. Fica com um contorno que se vê, em claro e em escuro. */
.modal-pe .btn:not(.primario):not(.perigo) { border-color: color-mix(in srgb, var(--tx) 22%, transparent); }

/* 08/11 («a app de Windows e Mac devia ter um scroll visível»): a barra tinha a
   cor das linhas e quase não se via no fundo escuro; agora vê-se sempre. */
* { scrollbar-color: #4a4c55 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #4a4c55; border: 2px solid transparent; border-radius: 20px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #6b6e78; background-clip: padding-box; }
[data-tema="claro"] * { scrollbar-color: #b4b4ab transparent; }
[data-tema="claro"] ::-webkit-scrollbar-thumb { background: #b4b4ab; background-clip: padding-box; }

/* ── 12/11 («ALTERAÇÕES» › Gerência, Anúncios, Criativo e Brand face: «fazer
   update do design … que está no claude»). O desenho do PlaySlot CRM Redesign
   nas páginas com data-desenho='1211' (app.js): o título maior, os
   separadores sublinhados por baixo dele, os números brancos com o destaque
   em lima, e o cabeçalho das tabelas numa faixa mais escura. ── */
[data-desenho='1211'] .pagina-cab { row-gap: 0; }
[data-desenho='1211'] .pagina-cab h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
[data-desenho='1211'] .pagina-cab .sub { margin-top: 4px; font-size: 14px; }
.pagina-cab-abas { flex: 1 1 100%; order: 10; min-width: 0; margin-top: 14px; }
.pagina-cab-abas:empty { display: none; }
.abas-ut { display: flex; gap: 4px; border-bottom: 1px solid var(--ln); overflow-x: auto; scrollbar-width: none; }
.abas-ut::-webkit-scrollbar { display: none; }
.aba-ut { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--t2); font: 400 14px var(--letra); white-space: nowrap; cursor: pointer; }
.aba-ut:hover { color: var(--tx); }
.aba-ut.on { color: var(--tx); border-bottom-color: var(--ac); }
.aba-ut .n { font: 12px var(--mono); color: var(--t3); }
.aba-ut:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; border-radius: 6px 6px 0 0; }
[data-desenho='1211'] .kc-v { font-size: 26px; color: var(--tx) !important; }
[data-desenho='1211'] .kc-i { color: var(--t2) !important; }
[data-desenho='1211'] .kc.hl { border-color: var(--acb); background: linear-gradient(180deg, var(--acs), transparent 70%), var(--sf); }
[data-desenho='1211'] .kc.hl .kc-v { color: var(--act) !important; }
[data-desenho='1211'] .kc.hl .kc-i { background: var(--acs); color: var(--act) !important; }
[data-desenho='1211'] .kc-b > i { background: var(--ac) !important; }
[data-desenho='1211'] .card thead th { background: color-mix(in srgb, var(--bg) 55%, var(--sf)); }
[data-desenho='1211'] tbody tr:hover td { background: color-mix(in srgb, var(--el) 55%, var(--sf)); }
@media (max-width: 760px) {
  [data-desenho='1211'] .pagina-cab h1 { font-size: 22px; }
  [data-desenho='1211'] .kc-v { font-size: 19px; }
  .pagina-cab-abas { margin-top: 10px; }
}

/* Gerência › Funcionários (12/11): a equipa como no desenho — avatar com o
   ponto de online, o cargo, os acessos em etiquetas, o tempo de hoje, «Ver
   ficha» e o resto das ações no «…» (MenuReticencias, em ui.js). */
.eq-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 12px; }
.eq-barra .eq-online { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t2); }
.eq-ponto { width: 7px; height: 7px; border-radius: 4px; background: var(--verde, #3DD68C); flex: none; }
.eq-procurar { position: relative; flex: 0 1 300px; min-width: 180px; }
.eq-procurar input { width: 100%; height: 34px; box-sizing: border-box; padding: 0 10px 0 32px; border-radius: 8px; border: 1px solid var(--ln); background: var(--bg); color: var(--tx); font: 13px var(--letra); }
.eq-procurar input:focus { outline: none; border-color: var(--ac); }
.eq-procurar svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--t3); pointer-events: none; }
.eq-tw { background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; overflow: hidden; }
.eq-ts { overflow-x: auto; }
.eq-tr { display: grid; grid-template-columns: minmax(240px, 1.6fr) minmax(150px, 1fr) minmax(220px, 1.4fr) 160px 100px 150px; min-width: 1020px; align-items: center; border-top: 1px solid var(--ln); }
.eq-tr:not(.hd):hover { background: color-mix(in srgb, var(--el) 55%, var(--sf)); }
.eq-tr.hd { border-top: 0; background: color-mix(in srgb, var(--bg) 55%, var(--sf)); }
.eq-tr.hd .eq-c { padding: 11px 16px; font: 500 11px var(--letra); letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.eq-c { padding: 12px 16px; min-width: 0; font-size: 13px; }
.eq-c.dir { text-align: right; }
.eq-tr > .eq-c:nth-child(4) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-pessoa { display: flex; align-items: center; gap: 12px; }
.eq-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; background: var(--acs); color: var(--act); box-shadow: inset 0 0 0 1px var(--acb); font: 600 12px var(--letra); }
.eq-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.eq-av .on-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 5px; background: var(--verde, #3DD68C); border: 2px solid var(--sf); }
.eq-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eq-nome b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-nome span { font: 12px var(--mono); color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-cargo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eq-cargo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-cargo svg { color: var(--act); flex: none; }
.eq-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.eq-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--ln2); font-size: 12px; color: var(--t2); white-space: nowrap; }
.eq-mais { font: 12px var(--mono); color: var(--t2); }
.eq-tempo { font: 13px var(--mono); }
.eq-tempo.nada { color: var(--t3); }
.eq-accoes { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.eq-2fa { font-size: 11px; color: var(--t3); }

/* O «…» com as ações de uma linha (MenuReticencias, ui.js). */
.menu-ret-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--t2); cursor: pointer; }
.menu-ret-btn:hover, .menu-ret-btn[aria-expanded='true'] { background: var(--el); color: var(--tx); }
.menu-ret-btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
.menu-ret-lista { position: fixed; z-index: 1000; min-width: 200px; padding: 4px; display: flex; flex-direction: column; background: var(--sf); border: 1px solid var(--ln2); border-radius: 10px; box-shadow: var(--sombra, 0 12px 32px rgba(0, 0, 0, .5)); }
.menu-ret-item { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--tx); font: 13px var(--letra); text-align: left; cursor: pointer; white-space: nowrap; }
.menu-ret-item:hover, .menu-ret-item:focus-visible { background: var(--el); outline: none; }
.menu-ret-item svg { color: var(--t2); flex: none; }
.menu-ret-item.perigo { color: var(--r); }
.menu-ret-item.perigo svg { color: var(--r); }

/* Os números em grupos e a barra do mês (GruposNum, NavMes, em ui.js — 12/11). */
.gn { display: flex; flex-wrap: wrap; gap: 12px; }
.gn + .card, .gn + .aviso, .gn + section { margin-top: 12px; }
.gn-c { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; }
.gn-c.hl { border-color: var(--acb); background: linear-gradient(180deg, var(--acs), transparent 70%), var(--sf); }
.gn-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; font: 500 12px var(--letra); color: var(--t2); }
.gn-i { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--el); color: var(--t2); }
.gn-c.hl .gn-i { background: var(--acs); color: var(--act); }
.gn-m { display: flex; flex-grow: 1; }
.gn-x { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; }
.gn-x + .gn-x { border-left: 1px solid var(--ln); }
.gn-l { font-size: 12px; color: var(--t2); }
.gn-x.hl .gn-l { color: var(--tx); }
.gn-v { font: 600 26px/1.1 var(--mono); letter-spacing: -.01em; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gn-x.hl .gn-v { color: var(--act); }
.gn-v.pos { color: var(--verde, #3DD68C); }
.gn-v.neg { color: var(--vermelho, #F87171); }
.gn-f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 20px; font-size: 12px; color: var(--t3); }
.gn-t { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font: 500 11px var(--mono); white-space: nowrap; }
.gn-t.up { background: color-mix(in srgb, var(--verde, #3DD68C) 12%, transparent); color: var(--verde, #3DD68C); }
.gn-t.dn { background: color-mix(in srgb, var(--vermelho, #F87171) 12%, transparent); color: var(--vermelho, #F87171); }
.gn-t.nt { background: var(--ln); color: var(--t2); }
.gn-bar { flex-grow: 1; min-width: 40px; height: 5px; border-radius: 3px; background: var(--tr, var(--ln)); overflow: hidden; }
.gn-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--ac); }
@media (max-width: 760px) {
  .gn-c { flex-basis: 100% !important; }
  .gn-v { font-size: 20px; }
  .gn-x { padding: 10px 12px 12px; }
}
.navmes { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.navmes-ib { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--ln2); background: var(--sf); color: var(--t2); cursor: pointer; }
.navmes-ib:hover:not(:disabled) { background: var(--el); color: var(--tx); }
.navmes-ib:disabled { opacity: .4; cursor: default; }
.navmes-sel { min-width: 150px; }
.navmes-vs { margin-left: 6px; font-size: 12px; color: var(--t2); }

/* As UTM dos anúncios do Meta nos Criativos (12/11). */
.utm-cel { display: flex; margin-top: 3px; max-width: 280px; }
.utm-par { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; min-width: 0; font: 12px var(--mono); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utm-par > i { flex: none; font-style: normal; font-size: 11px; color: var(--t3); }
.utm-lista { display: flex; flex-direction: column; gap: 10px; }
.utm-anuncio { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: 10px; background: var(--bg); }
.utm-anuncio-cab { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.utm-pares { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.utm-pares .utm-par { padding: 3px 8px; border-radius: 6px; background: var(--el); }

/* 12/11: Criativo › Editor de imagens (publico/js/editor-psd.js). Cartões da mesma altura: a
   miniatura de ponta a ponta, o nome e os dados, e as ações sempre no fundo. */
.psd-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 1fr; gap: 14px; align-items: stretch; }
.psd-grelha > .card + .card { margin-top: 0; }
.psd-cartao { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-width: 0; height: 100%; transition: border-color .15s ease, transform .15s ease; }
.psd-cartao:hover { border-color: var(--acb); }
.psd-mini { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; width: 100%; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  background: repeating-conic-gradient(var(--el) 0 25%, var(--sf) 0 50%) 0 0 / 16px 16px; border-bottom: 1px solid var(--ln); }
.psd-mini img { width: 100%; height: 100%; object-fit: contain; }
.psd-mini-ext { background: linear-gradient(145deg, var(--el), var(--sf)); }
.psd-ext-g { font-size: 30px; font-weight: 800; letter-spacing: .06em; color: var(--t3); }
.psd-tipo { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: var(--ac); color: var(--onac); }
.psd-corpo { display: grid; gap: 4px; padding: 12px 12px 0; min-width: 0; }
.psd-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 13.5px; }
.psd-info { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; color: var(--t3); }
.psd-info span + span::before { content: "·"; margin-right: 10px; color: var(--ln2); }
.psd-pe { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 12px; }
.psd-pe .psd-abrir { flex: 1; justify-content: center; }
.psd-editor { display: grid; gap: 10px; }
.psd-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; }
.psd-campo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.psd-campo input { width: 220px; max-width: 100%; }
.psd-frame { width: 100%; height: calc(100vh - 230px); min-height: 520px; border: 1px solid var(--ln); border-radius: 10px; background: #1e1e1e; }
/* Ecrã inteiro do editor (13/11): a barra de guardar em cima e o editor no resto. Sem transform nem animação, que prendiam o «fixed» à página. */
.psd-editor.psd-cheio { position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--bg); animation: none; transform: none; }
.psd-editor.psd-cheio .psd-frame { flex: 1 1 auto; height: auto; min-height: 0; }
.psd-editor:fullscreen { width: 100vw; height: 100vh; }
@media (max-width: 700px) {
  .psd-campo { flex: 1 1 100%; }
  .psd-campo input { width: auto; flex: 1; }
  .psd-frame { height: 70vh; min-height: 420px; }
}

/* === 12/11 · Gerência com o desenho do artifact «Esteves Tips — Identidade, Website & CRM» ===
   A faixa dos números (FaixaNum: célula em destaque, chip da taxa, barra), os títulos de secção,
   os avisos, a lista com o painel ao lado das Aprovações e a grelha dos Grupos. */
.kp.hl { background: var(--acs); box-shadow: inset 0 2px 0 var(--ac); }
.kp.clicavel { cursor: pointer; }
.kp.clicavel:hover { background: var(--el); }
.kp.clicavel.on { background: var(--acs); box-shadow: inset 0 2px 0 var(--ac); }
.kv-de { font-size: 13px; font-weight: 500; color: var(--t3); letter-spacing: 0; }
.kp-chip { display: inline-flex; align-self: flex-start; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--el); color: var(--t2); font: 600 11px var(--mono); white-space: nowrap; }
.kp-chip.lima { background: var(--acs); color: var(--act); }
.kp-chip.laranja { background: var(--os); color: var(--o); }
.kp-chip.azul { background: var(--bs); color: var(--b); }
.kp-chip.roxo { background: var(--ps); color: var(--p); }
.kp-chip.verde { background: var(--gs); color: var(--g); }
.kp-bar { display: block; height: 6px; margin-top: auto; border-radius: 3px; background: var(--ln2); overflow: hidden; }
.kp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--t3); }
.kpis + .kpis { margin-top: 0; }

.gr-pg { display: flex; flex-direction: column; gap: 16px; }
.gr-sec { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.gr-sec > b { font-weight: 700; font-size: 14px; }
.gr-sec > span { font-size: 12px; color: var(--t2); }
.gr-bloco { display: flex; flex-direction: column; gap: 8px; }
.gr-nota { font-size: 12px; color: var(--t2); line-height: 1.5; }
.gr-barra-dir { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--t2); }
.gr-info, .gr-alerta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.gr-info { background: var(--bs); border: 1px solid color-mix(in srgb, var(--b) 35%, transparent); }
.gr-alerta { background: var(--os); border: 1px solid color-mix(in srgb, var(--o) 35%, transparent); }
.gr-info > svg { color: var(--b); flex: none; }
.gr-alerta > svg { color: var(--o); flex: none; }
.gr-info > span, .gr-alerta > span { flex: 1 1 260px; min-width: 0; }
.gr-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--el); color: var(--t2); }
.gr-tag i { width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.gr-tag.lima { background: var(--acs); color: var(--act); }
.gr-tag.verde { background: var(--gs); color: var(--g); }
.gr-tag.laranja { background: var(--os); color: var(--o); }
.gr-tag.vermelho { background: var(--rs); color: var(--r); }
.gr-tag.azul { background: var(--bs); color: var(--b); }
.gr-pequeno { font-size: 11.5px; color: var(--t3); }

/* Funcionários */
.eq-av.admin { background: var(--ac); color: var(--onac); }
.eq-quando b { display: block; font-weight: 500; }
.eq-quando b.hoje { color: var(--g); }
.eq-quando small { font: 11px var(--mono); color: var(--t3); }

/* Aprovações: a lista e o painel ao lado */
.ap-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 14px; align-items: start; }
.ap-lista { padding: 0; overflow: hidden; }
.ap-lista-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--ln); }
.ap-lista .tabela-caixa { border: 0; border-radius: 0; margin: 0; }
.ap-lista table th:first-child, .ap-lista table td:first-child { padding-left: 16px; }
.ap-lista table th:last-child, .ap-lista table td:last-child { padding-right: 16px; }
.eq-tr .eq-av.admin { background: var(--ac); color: var(--onac); }
.ap-lista tr.ap-on > td { background: var(--acs); }
.ap-lista tr.ap-on > td:first-child { box-shadow: inset 3px 0 0 var(--ac); }
.ap-lista-pe { padding: 10px 14px; border-top: 1px solid var(--ln); font-size: 12px; color: var(--t2); }
.ap-painel { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.ap-painel-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ap-painel-cab b { display: block; font-size: 14px; }
.ap-browser { border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; background: var(--bg); }
.ap-url { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--ln); font: 11px var(--mono); color: var(--t2); min-width: 0; }
.ap-url .pontos { display: inline-flex; gap: 4px; flex: none; }
.ap-url .pontos i { width: 6px; height: 6px; border-radius: 3px; background: var(--ln2); }
.ap-url span.l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-browser iframe { display: block; width: 100%; height: 340px; border: 0; background: #fff; }
.ap-rotulo { font-size: 12px; color: var(--t2); margin-bottom: 6px; }
.ap-painel textarea { width: 100%; min-height: 70px; resize: vertical; }
.ap-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-botoes .btn { justify-content: center; }
.ap-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; }
.ap-links button { background: none; border: 0; padding: 0; color: var(--t2); cursor: pointer; font: inherit; }
.ap-links button:hover { color: var(--tx); text-decoration: underline; }
.ap-versoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-versoes button { height: 22px; padding: 0 8px; border-radius: 7px; border: 0; background: var(--el); color: var(--t2); font: 600 11px var(--mono); cursor: pointer; }
.ap-versoes button.on { background: var(--os); color: var(--o); }
.ap-guiao { border: 1px solid var(--ln); border-radius: 10px; padding: 10px 12px; max-height: 280px; overflow: auto; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-guiao-cab { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; white-space: normal; }
.ap-guiao-cab .espaco { flex: 1; }
.ap-nota { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--ln); border-radius: 10px; font-size: 12.5px; }
.ap-nota .eq-av { width: 24px; height: 24px; font-size: 10px; flex: none; }
.ap-vazio { padding: 28px 14px; text-align: center; color: var(--t2); font-size: 13px; }

/* Grupos: o gráfico com os cartões do bot ao lado, e a tabela por grupo */
.gg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: 14px; align-items: stretch; }
.gg-lado { display: flex; flex-direction: column; gap: 14px; }
.gg-lado > .card + .card { margin-top: 0; }
.gg-bot { display: flex; flex-direction: column; gap: 8px; }
.gg-bot-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gg-bot b.mono { font-size: 12.5px; overflow-wrap: anywhere; }
.gg-peso { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.gg-peso span.b { flex: 1; height: 6px; border-radius: 3px; background: var(--ln2); overflow: hidden; }
.gg-peso span.b i { display: block; height: 100%; background: var(--ac); border-radius: 3px; }
.gg-peso small { font: 11px var(--mono); color: var(--t3); min-width: 34px; text-align: right; }
.gg-nome { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gg-nome .tp-grupo-ava { flex: none; }
.gg-nome b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1050px) {
  .ap-split, .gg-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-painel { position: static; }
}
@media (max-width: 600px) {
  .ap-botoes { grid-template-columns: 1fr; }
  .ap-browser iframe { height: 260px; }
}
.eq-tr.eq-v2 { grid-template-columns: minmax(230px, 1.6fr) minmax(100px, .7fr) minmax(110px, .8fr) 120px 130px 150px 150px; min-width: 1020px; }
.eq-tr.eq-v2 > .eq-c:nth-child(4) { overflow: visible; }
.eq-tw > .eq-barra { margin: 0; padding: 12px; border-bottom: 1px solid var(--ln); }

.vm-jog-tit { font-weight: 700; font-size: 14px; margin-right: 4px; }
.r2d-filtros > .espaco { flex: 1; }