/*
 * Estilo do app de quadro. Tema escuro fixo, visual sóbrio (estilo ferramenta de produto,
 * não "landing page"):
 * - superfícies neutras quase pretas, bordas finas (hairline) e pouca sombra;
 * - MARCA = azul da logo Elite Network (#0388FF, public/elite-network-logo.png): ação principal,
 *   seleção (filtro, aba, item da lateral), contadores, foco e destaques "para você". Preenchimento
 *   em #0B74E5 para o texto branco por cima (--sobre-acento) ter 4.5:1;
 * - VERMELHO = só perigo de verdade (--perigo): cobrança, erro, sistema com problema.
 *   Prazo/lembrete = laranja (--ambar), ok/sucesso = verde. Ícones e textos são neutros;
 * - avatares com cor por pessoa (data-cor, calculada do nome em util.js → htmlAvatar);
 * - fonte do sistema no iPhone/Mac (SF Pro) e Inter (web/fontes) no resto.
 * Pensado primeiro para o iPhone instalado como app:
 * - safe-area-inset-*: respeita o notch e a barra de "home" (viewport-fit=cover no HTML);
 * - alvos de toque com ~44px (recomendação da Apple);
 * - nada pode ficar mais largo que a tela: rolagem lateral fazia a barra de abas "escorregar"
 *   (bug de 09/2026). Por isso overflow-x travado e textos com quebra forçada (overflow-wrap).
 * No computador (≥ 1024px) a navegação vira uma barra lateral fixa (lateral.js) e as folhas
 * inferiores viram janelas centralizadas (ver o bloco "Desktop" no fim).
 * Cores e medidas só em variáveis (:root); para mudar o tema, mexa apenas nelas.
 */

/* Inter variável (um arquivo para todos os pesos), copiada por `npm run fontes`. */
@font-face {
	font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url(/fontes/inter-latin-wght-normal.woff2) format('woff2-variations');
}

/* ─── Cores: tema ESCURO (padrão) ───────────────────────────────────────────
   O tema claro redefine estas mesmas variáveis em :root[data-tema='claro'] (logo abaixo);
   quem liga é web/js/tema.js (+ src/app/pagina-inicial.ts, que já manda a página no tema).
   Regra: cor nova no CSS = variável aqui E no bloco claro; cor fixa no meio do arquivo
   quebra o outro tema. O terminal conectado fica SEMPRE escuro (o xterm é escuro), por
   isso ele também recebe este bloco. */
:root, .tela-terminal.conectado {
	--fundo: #08080a;
	--superficie: #111114;
	--superficie-2: #17171b;
	--superficie-3: #1f1f24;
	--elevada: #141417; /* folhas, avisos e barra lateral: um tom acima do fundo */
	--borda: rgb(255 255 255 / 7%);
	--borda-forte: rgb(255 255 255 / 11%);
	--texto: #ededef;
	--texto-2: #a1a1aa;
	--texto-3: #85858e; /* ≥4.5:1 (WCAG AA) em fundo, superfícies e barras: usado em texto pequeno */
	/* Marca: dourado da logo OtavioDS. */
	--acento: #0b74e5;
	--acento-forte: #2a8cf5;
	--acento-texto: #4da6ff;
	--acento-fundo: rgb(3 136 255 / 14%);
	--acento-borda: rgb(3 136 255 / 38%);
	--sobre-acento: #ffffff;
	/* Perigo: vermelho só para alerta de verdade (cobrança, erro, sistema com problema). */
	--perigo: #e5484d;
	--perigo-texto: #ff8589;
	--perigo-fundo: rgb(229 72 77 / 13%);
	--perigo-borda: rgb(229 72 77 / 30%);
	/* Prazo/lembrete e "atenção": laranja, para não se confundir com o dourado da marca. */
	--ambar: #f76b15;
	--ambar-texto: #ffa057;
	--ambar-fundo: rgb(247 107 21 / 14%);
	--verde: #30a46c;
	--verde-texto: #3dd68c;
	--verde-fundo: rgb(48 164 108 / 14%);
	/* Foco (teclado): vão escuro de 2px + anel sólido da cor da marca; o vão separa o anel dos botões. */
	--foco: 0 0 0 2px var(--fundo), 0 0 0 4px var(--acento);
	/* Foco de campo de texto (aparece a cada toque no celular): borda dourada + halo suave. */
	--foco-campo-borda: color-mix(in srgb, var(--acento) 60%, transparent);
	--foco-campo: 0 0 0 3px var(--acento-fundo);
	/* Dourado em ÍCONE (aba atual, estrela, item da lateral): no claro precisa ser mais escuro. */
	--acento-icone: #4da6ff;
	/* Véus e realces sobre as superfícies (no escuro, branco translúcido; no claro, preto). */
	--realce: rgb(255 255 255 / 4%);
	--etiqueta-fundo: rgb(255 255 255 / 5%);
	--botao-sutil: rgb(255 255 255 / 8%);
	--botao-sutil-hover: rgb(255 255 255 / 12%);
	--borda-hover: rgb(255 255 255 / 16%);
	/* Peças com fundo próprio. */
	--barra-flutuante: rgb(26 26 30 / 72%); /* barra de abas do celular (vidro) */
	--contorno-contador: #1a1a1e; /* aro do selo da Entrada: da cor da barra de abas */
	--aviso-fundo: #1d1d21;
	--segmento-ativo: #2a2a2f;
	--lateral-fundo: #0b0b0d;
	/* Kanban (computador): degraus de luminância — separa coluna e card por contraste, não por moldura. */
	--coluna-fundo: #0d0d10;
	--coluna-borda: rgb(255 255 255 / 4%);
	--card-kanban: #141417;
	--sombra-card: 0 1px 2px rgb(0 0 0 / 40%), inset 0 1px 0 rgb(255 255 255 / 2.5%);
	--sombra-voo: 0 18px 40px -16px rgb(0 0 0 / 85%); /* card "erguido" voando entre colunas */
	--sombra-1: 0 1px 2px rgb(0 0 0 / 40%);
	--sombra-2: 0 14px 30px -16px rgb(0 0 0 / 75%);
	--sombra-3: 0 32px 64px -28px rgb(0 0 0 / 85%);
	--destaque-gradiente: linear-gradient(180deg, #1a82ee, #0a6bd5);
	--brilho-destaque: 0 10px 28px -12px rgb(3 136 255 / 60%);
	--brilho-fundo: rgb(3 136 255 / 12%);
	--vidro: rgb(12 12 15 / 72%);
	--destaque-borda: linear-gradient(140deg, rgb(77 166 255 / 50%), transparent 45%);
	color-scheme: dark;
}

/* ─── Cores: tema CLARO ─────────────────────────────────────────────────────
   Mesmas variáveis, mesma lógica: azul da marca como PREENCHIMENTO (botão principal, chips, selos,
   com texto branco por cima) e um azul mais escuro para TEXTO/ÍCONE. Textos com ≥4.5:1 (WCAG AA). */
:root[data-tema='claro'] {
	--fundo: #f6f6f7;
	--superficie: #ffffff;
	--superficie-2: #f1f1f3;
	--superficie-3: #e7e7ea;
	--elevada: #ffffff;
	--borda: rgb(9 9 11 / 8%);
	--borda-forte: rgb(9 9 11 / 14%);
	--texto: #18181b;
	--texto-2: #52525b;
	--texto-3: #636369;
	--acento: #0a6fd6;
	--acento-forte: #0862c0;
	--acento-texto: #0060c0;
	--acento-icone: #0a6fd6;
	--acento-fundo: rgb(10 111 214 / 10%);
	--acento-borda: rgb(10 111 214 / 35%);
	--sobre-acento: #ffffff;
	--perigo: #dc3e42;
	--perigo-texto: #c2292e;
	--perigo-fundo: rgb(220 62 66 / 9%);
	--perigo-borda: rgb(220 62 66 / 32%);
	--ambar: #ef5f00;
	--ambar-texto: #b54700;
	--ambar-fundo: rgb(239 95 0 / 10%);
	--verde: #2b9a66;
	--verde-texto: #1a7a4c;
	--verde-fundo: rgb(43 154 102 / 11%);
	/* Anel de foco em dourado escuro: o dourado claro não aparece sobre branco. */
	--foco: 0 0 0 2px var(--fundo), 0 0 0 4px var(--acento-texto);
	--foco-campo-borda: color-mix(in srgb, var(--acento-texto) 55%, transparent);
	--realce: rgb(9 9 11 / 4%);
	--etiqueta-fundo: rgb(9 9 11 / 5%);
	--botao-sutil: rgb(9 9 11 / 6%);
	--botao-sutil-hover: rgb(9 9 11 / 10%);
	--borda-hover: rgb(9 9 11 / 22%);
	--barra-flutuante: rgb(255 255 255 / 78%);
	--contorno-contador: #ffffff;
	--aviso-fundo: #ffffff;
	--segmento-ativo: #ffffff;
	--lateral-fundo: #efeff1;
	--coluna-fundo: #efeff1;
	--coluna-borda: rgb(9 9 11 / 6%);
	--card-kanban: #ffffff;
	--sombra-card: 0 1px 2px rgb(24 24 27 / 6%);
	--sombra-voo: 0 18px 40px -16px rgb(24 24 27 / 28%);
	--sombra-1: 0 1px 2px rgb(24 24 27 / 6%);
	--sombra-2: 0 14px 30px -18px rgb(24 24 27 / 22%);
	--sombra-3: 0 32px 64px -30px rgb(24 24 27 / 30%);
	--destaque-gradiente: linear-gradient(180deg, #2385ea, #0a6bd0);
	--brilho-destaque: 0 10px 24px -12px rgb(10 111 214 / 45%);
	--brilho-fundo: rgb(10 111 214 / 9%);
	--vidro: rgb(255 255 255 / 76%);
	--destaque-borda: linear-gradient(140deg, rgb(10 111 214 / 40%), transparent 45%);
	color-scheme: light;
}

/* ─── Medidas e fontes (iguais nos dois temas) ──────────────────────────── */
:root {
	--raio: 16px;
	--raio-m: 12px;
	--raio-p: 8px;
	--altura-abas: 64px;
	--largura-conteudo: 760px;
	--largura-lateral: 0px; /* vira 240px no desktop */
	--fonte: -apple-system, BlinkMacSystemFont, 'Inter Variable', 'Segoe UI', Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--suave: cubic-bezier(0.22, 1, 0.36, 1);
	/* Movimento: as animações do kanban usam só estes valores (espelhados em DURACAO, web/js/animacoes.js). */
	--mola: cubic-bezier(0.34, 1.4, 0.64, 1); /* overshoot leve: SÓ em peças pequenas (botão, selo, círculo do vazio) */
	--saida: cubic-bezier(0.4, 0, 1, 1); /* algo saindo de cena (aviso) */
	--dur-toque: 80ms; /* :active */
	--dur-rapida: 150ms; /* hover, cor, borda, fundo */
	--dur-saida: 160ms;
	--dur-micro: 200ms; /* batida, pílula, contador, selo */
	--dur-media: 240ms; /* irmãos se reacomodando (FLIP) */
	--dur-lenta: 320ms; /* card novo, coluna na cascata */
	--raio-card: 10px; /* card do kanban (a coluna tem 16px e 8px de respiro: raios quase concêntricos) */
}

* { box-sizing: border-box; }
/* Classes com display:flex/grid (.botao, .aviso, .ou…) venceriam o [hidden] do navegador e
   deixariam o elemento na tela. Isto garante que o atributo hidden sempre esconde. */
[hidden] { display: none !important; }
/* overflow-x: hidden só no html (vai para a janela e trava a rolagem lateral). No body tem de ser
   clip: com hidden nos dois, o body virava um contêiner de rolagem próprio (overflow-y: auto) que
   não rola nada, e o overscroll-behavior: none dele barrava o repasse da rodinha do mouse para a
   página. Resultado: no computador (Chrome) nenhuma tela rolava pelo mouse (bug de 09/2026). */
html, body { margin: 0; min-height: 100%; }
html { overflow-x: hidden; }
body { overflow-x: clip; }
body {
	background: var(--fundo);
	color: var(--texto);
	font: 400 15px/1.5 var(--fonte);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	overscroll-behavior: none;
}
#app { overflow-x: clip; min-height: 100dvh; }
button, input, textarea { font: inherit; color: inherit; }
button, a, [role='button'] { touch-action: manipulation; }
a { color: var(--acento-texto); }
::selection { background: color-mix(in srgb, var(--acento) 30%, transparent); }
/* Elementos de interface (não conteúdo) não devem selecionar texto nem abrir menu ao segurar. */
.topo, .abas, .acao-rapida, .botao, .icone-botao, .aba, .barra-acoes, .lateral, .chip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Ícone Lucide: <svg class="i"><use href="/icones/sprite.svg#nome"/></svg> */
.i {
	width: 20px; height: 20px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.i.p { width: 16px; height: 16px; }
.i.g { width: 24px; height: 24px; }
.i.xg { width: 40px; height: 40px; stroke-width: 1.6; }

/* ─── Topo ──────────────────────────────────────────────────────────────── */
.topo {
	position: sticky; top: 0; z-index: 10;
	padding: calc(env(safe-area-inset-top) + 8px) 16px 10px;
	background: color-mix(in srgb, var(--fundo) 80%, transparent);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
}
/* O topo ocupa a largura toda (fundo borrado), mas o conteúdo dele alinha com a coluna da lista. */
.topo > * { max-width: var(--largura-conteudo); margin-inline: auto; }
.linha-topo { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.topo h1 {
	flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 8px;
	font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
}
/* Total da aba ao lado do título: número discreto, não um selo. */
.topo h1 .pilula { min-width: 0; height: auto; padding: 0; background: none; color: var(--texto-3); font-size: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.topo.compacto { border-bottom: 1px solid var(--borda); padding-bottom: 8px; }
.topo.compacto h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pilula {
	min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--superficie-3); color: var(--texto-2);
	font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}

.icone-botao {
	width: 42px; height: 42px; flex: none; border-radius: 12px;
	border: 0; background: transparent;
	color: var(--texto-2); cursor: pointer; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background 0.15s, color 0.15s, transform 0.12s var(--suave);
}
.icone-botao:active { background: var(--superficie-3); color: var(--texto); transform: scale(0.94); }
.icone-botao:focus-visible { outline: none; box-shadow: var(--foco); }

/* Busca */
.busca {
	margin-top: 8px; height: 40px; padding: 0 4px 0 12px; border-radius: 10px;
	display: flex; align-items: center; gap: 8px;
	background: var(--superficie-2); border: 1px solid transparent;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.busca:focus-within { border-color: var(--foco-campo-borda); box-shadow: var(--foco-campo); }
.busca .i { color: var(--texto-3); }
.busca input {
	flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
	font-size: 16px; /* 16px+ evita o zoom automático do iOS ao focar */
}
.busca input::placeholder { color: var(--texto-3); }
.busca input::-webkit-search-cancel-button { display: none; }
.limpar { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--superficie-3); color: var(--texto-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ─── Conteúdo ──────────────────────────────────────────────────────────── */
.conteudo {
	padding: 4px 16px calc(env(safe-area-inset-bottom) + var(--altura-abas) + 40px);
	max-width: calc(var(--largura-conteudo) + 32px); margin: 0 auto;
}
.tela-quadro .conteudo { touch-action: pan-y; } /* gesto lateral fica com o app (troca de aba) */

.entra-dir { animation: entraDir 0.3s var(--suave); }
.entra-esq { animation: entraEsq 0.3s var(--suave); }
.entra-baixo { animation: entraBaixo 0.34s var(--suave); }
.entra-lado { animation: entraLado 0.32s var(--suave); }
@keyframes entraDir { from { opacity: 0; transform: translateX(24px); } }
@keyframes entraEsq { from { opacity: 0; transform: translateX(-24px); } }
@keyframes entraBaixo { from { opacity: 0; transform: translateY(8px); } }
@keyframes entraLado { from { opacity: 0; transform: translateX(32px); } }
/* Movimento reduzido: zera animações e transições de CSS, inclusive nos ::before/::after (o realce do
   card do kanban é um ::after). Por ser "none", o animationend NÃO dispara — nada no app depende dele.
   Vale o pedido do SISTEMA, a não ser que o aparelho tenha escolhido em Ajustes → Aparência
   (data-movimento no <html>, movimento.js): "ligado" ignora o sistema, "desligado" corta sempre.
   As animações por JS (element.animate) ficam fora desta regra: quem cuida delas é animar() (animacoes.js). */
@media (prefers-reduced-motion: reduce) {
	:root:not([data-movimento='ligado']) *, :root:not([data-movimento='ligado']) *::before, :root:not([data-movimento='ligado']) *::after { animation: none !important; transition: none !important; }
}
:root[data-movimento='desligado'] *, :root[data-movimento='desligado'] *::before, :root[data-movimento='desligado'] *::after { animation: none !important; transition: none !important; }

/* Puxar para atualizar */
.puxar {
	position: fixed; left: 50%; z-index: 9; top: calc(env(safe-area-inset-top) + 64px);
	width: 38px; height: 38px; margin-left: -19px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--superficie-2); border: 1px solid var(--borda-forte); color: var(--texto-2);
	opacity: 0; transform: translateY(-20px) scale(0.6); pointer-events: none;
}
.puxar.pronto { color: var(--sobre-acento); background: var(--acento); border-color: transparent; }
.puxar.carregando .i { animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ─── Barra de abas do celular (criada uma vez; só o indicador e o conteúdo mudam) ─── */
.abas {
	position: fixed; z-index: 10; left: 0; right: 0; margin: 0 auto;
	bottom: calc(env(safe-area-inset-bottom) + 12px);
	width: min(calc(100% - 32px), 440px); height: var(--altura-abas);
	/* 3 colunas do quadro + atalho do Terminal */
	display: grid; grid-template-columns: repeat(5, 1fr);
	padding: 5px; border-radius: 22px;
	background: var(--barra-flutuante);
	backdrop-filter: saturate(180%) blur(24px);
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	border: 1px solid var(--borda-forte);
	box-shadow: 0 12px 32px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 4%);
	/* evita que o iOS mova a barra junto com um arraste lateral */
	touch-action: none;
}
.indicador {
	position: absolute; top: 5px; bottom: 5px; left: 5px;
	width: calc((100% - 10px) / 5); border-radius: 17px;
	background: var(--acento-fundo);
	transform: translateX(calc(100% * var(--aba, 0)));
	transition: transform 0.38s var(--suave);
}
.aba {
	position: relative; z-index: 1; border: 0; background: none; cursor: pointer; text-decoration: none;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	color: var(--texto-3); font-size: 10.5px; font-weight: 500; letter-spacing: 0.01em;
	transition: color 0.2s;
}
.aba .i.g { width: 22px; height: 22px; }
.aba[aria-selected='true'] { color: var(--acento-texto); }
.aba .icone-aba { position: relative; display: inline-flex; }
.contador {
	position: absolute; top: -6px; left: 13px;
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--acento); color: var(--sobre-acento); border: 2px solid var(--contorno-contador);
	font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums;
}

/* ─── Seções e cards ────────────────────────────────────────────────────── */
.grupo {
	display: flex; align-items: center; gap: 8px;
	margin: 24px 2px 8px; font-size: 13px; font-weight: 600; color: var(--texto-2);
}
.conteudo > .grupo:first-child { margin-top: 10px; }
.grupo .i { color: var(--texto-3); }
.grupo .n { margin-left: auto; font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
/* Seção "Cobrados": alguém está esperando — o único título com cor. */
.grupo.destaque { color: var(--perigo-texto); }
.grupo.destaque::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--perigo); box-shadow: 0 0 0 3px var(--perigo-fundo); }
.lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.item { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.28s var(--suave), opacity 0.2s, margin 0.28s; }
.item > .card { min-height: 0; overflow: hidden; }
.item.saindo { grid-template-rows: 0fr; opacity: 0; margin-top: -8px; }

.card {
	position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
	padding: 13px 14px 12px 16px; border-radius: var(--raio);
	background: var(--superficie); border: 1px solid var(--borda);
	transition: transform 0.12s var(--suave), border-color 0.15s, background 0.15s;
	outline: none;
}
.card:active { transform: scale(0.99); background: var(--superficie-2); }
.card:focus-visible { border-color: var(--borda-forte); box-shadow: var(--foco); }
.card .cabeca { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.card .avatar { width: 22px; height: 22px; font-size: 9px; }
.card .nome { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .quando { font-size: 12px; color: var(--texto-3); flex: none; font-variant-numeric: tabular-nums; }
/* #id do card no canto direito: é o número que a Astra usa para falar dele (pedido de 28/10/2026). */
.card .numero { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--texto-3); font-variant-numeric: tabular-nums; user-select: all; }
.etiqueta.lista-origem { color: var(--texto-2); }
.etiqueta.etiqueta-trello { color: var(--texto-2); }
.etiqueta.etiqueta-trello::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-etiqueta); }
.etiqueta.lista-origem .i { color: var(--texto-3); }
.card .titulo { font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card .rodape { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.card .etiquetas { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Próxima etapa (Começar/Concluir): discreto até o dedo/mouse chegar. */
.acao-rapida {
	width: 34px; height: 34px; flex: none; border-radius: 10px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; color: var(--texto-2); border: 1px solid var(--borda-forte);
	transition: transform 0.12s var(--suave), background 0.15s, color 0.15s, border-color 0.15s;
}
.acao-rapida .i { width: 16px; height: 16px; }
.acao-rapida:active { transform: scale(0.9); background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

.avatar {
	width: 32px; height: 32px; flex: none; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
	background: var(--superficie-3); color: var(--texto-2);
}
.avatar .i { width: 15px; height: 15px; }
.avatar.g { width: 44px; height: 44px; font-size: 15px; }
/* Paleta dos avatares: cor por pessoa/grupo (índice vindo do nome, util.js). Tons apagados
   com a letra clara, para dar identidade sem gritar mais que o conteúdo. Evita de propósito
   vermelho, laranja e dourado: esses matizes têm significado no app (perigo, prazo, marca) e um
   avatar nessas cores parecia alerta ou seleção. */
.avatar[data-cor='0'] { background: rgb(171 74 186 / 24%); color: #e796f3; }
.avatar[data-cor='1'] { background: rgb(18 165 148 / 20%); color: #0bd8b6; }
.avatar[data-cor='2'] { background: rgb(189 238 99 / 14%); color: #bde56c; }
.avatar[data-cor='3'] { background: rgb(48 164 108 / 20%); color: #3dd68c; }
.avatar[data-cor='4'] { background: rgb(0 162 199 / 20%); color: #4ccce6; }
.avatar[data-cor='5'] { background: rgb(0 144 255 / 20%); color: #70b8ff; }
.avatar[data-cor='6'] { background: rgb(110 86 207 / 26%); color: #baa7ff; }
.avatar[data-cor='7'] { background: rgb(214 64 159 / 20%); color: #ff8dcc; }

.etiqueta {
	display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
	height: 22px; padding: 0 7px; border-radius: 6px;
	font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	background: var(--etiqueta-fundo); color: var(--texto-2);
}
.etiqueta .i { width: 13px; height: 13px; color: var(--texto-3); }
.etiqueta.cobranca, .etiqueta.alerta { background: var(--perigo-fundo); color: var(--perigo-texto); }
.etiqueta.prazo { background: var(--ambar-fundo); color: var(--ambar-texto); }
.etiqueta.resolvida { background: var(--verde-fundo); color: var(--verde-texto); }
.etiqueta.cobranca .i, .etiqueta.alerta .i, .etiqueta.prazo .i, .etiqueta.resolvida .i { color: currentColor; }
/* "+ Cliente" (card sem cliente identificado): é botão, então borda tracejada = "falta preencher". */
.etiqueta.definir-cliente {
	border: 1px dashed var(--borda-forte); background: transparent; color: var(--texto-2); cursor: pointer;
	transition: color 0.15s, border-color 0.15s, transform 0.12s var(--suave);
}
.etiqueta.definir-cliente:active { transform: scale(0.95); color: var(--texto); }
.etiqueta.definir-cliente:focus-visible { outline: none; box-shadow: var(--foco); }

/* Esqueleto (carregando) */
.esqueleto { height: 104px; border-radius: var(--raio); border: 1px solid var(--borda); background: linear-gradient(90deg, var(--superficie) 25%, var(--superficie-2) 50%, var(--superficie) 75%); background-size: 200% 100%; animation: brilho 1.3s infinite linear; }
@keyframes brilho { to { background-position: -200% 0; } }

.vazio { text-align: center; color: var(--texto-2); padding: 72px 24px; font-size: 14px; }
.vazio .circulo {
	width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 18px;
	display: flex; align-items: center; justify-content: center;
	background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2);
}
.vazio .circulo .i.xg { width: 26px; height: 26px; stroke-width: 1.8; }
.vazio strong { display: block; color: var(--texto); font-size: 16px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }

/* ─── Detalhe ───────────────────────────────────────────────────────────── */
.detalhe { padding-bottom: calc(env(safe-area-inset-bottom) + 112px); }
.cabeca-detalhe { display: flex; align-items: center; gap: 12px; margin: 14px 0 14px; }
.cabeca-detalhe .nome { font-weight: 600; overflow-wrap: anywhere; }
.cabeca-detalhe .sub { font-size: 13px; color: var(--texto-3); }
.detalhe h2 { font-size: 24px; line-height: 1.25; margin: 0 0 20px; letter-spacing: -0.025em; font-weight: 700; overflow-wrap: anywhere; }
.infos { list-style: none; margin: 0 0 8px; padding: 0 14px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); }
.infos li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 14.5px; }
.infos li:last-child { border-bottom: 0; }
.infos .i { color: var(--texto-3); }
.infos .rotulo { color: var(--texto-2); width: 90px; flex: none; font-size: 14px; }
.infos .valor { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }

.bloco { margin: 28px 0; }
.bloco h3 {
	display: flex; align-items: center; gap: 8px; margin: 0 2px 10px;
	font-size: 13px; font-weight: 600; color: var(--texto-2);
}
.bloco h3 .i { color: var(--texto-3); }
.texto-bloco { padding: 14px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }

/* Mensagens originais como balões de conversa. */
.balao {
	width: fit-content; max-width: 88%; margin: 0 0 6px; padding: 9px 13px;
	border-radius: 4px 16px 16px 16px; background: var(--superficie-2); border: 1px solid var(--borda);
	font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Mensagem SUA (resposta enviada pelo app): à direita, com o dourado da marca, como no WhatsApp. */
.balao.meu { margin-left: auto; border-radius: 16px 4px 16px 16px; background: color-mix(in srgb, var(--acento) 12%, transparent); border-color: color-mix(in srgb, var(--acento) 22%, transparent); }

.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 2px; }
.linha-tempo li { position: relative; display: flex; gap: 12px; padding: 0 0 18px; }
.linha-tempo li::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 1px; background: var(--borda-forte); }
.linha-tempo li:last-child::before { display: none; }
.linha-tempo .marco {
	width: 28px; height: 28px; flex: none; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda-forte);
}
.linha-tempo .marco .i { width: 14px; height: 14px; }
.linha-tempo li[data-tipo='cobranca'] .marco { background: var(--perigo-fundo); color: var(--perigo-texto); border-color: var(--perigo-borda); }
.linha-tempo li[data-tipo='resolvida'] .marco, .linha-tempo li[data-tipo='resposta'] .marco { background: var(--verde-fundo); color: var(--verde-texto); border-color: rgb(48 164 108 / 28%); }
.linha-tempo .corpo { flex: 1; min-width: 0; padding-top: 3px; font-size: 14px; font-weight: 500; }
.linha-tempo .quando { color: var(--texto-3); font-size: 12px; font-weight: 400; margin-top: 1px; font-variant-numeric: tabular-nums; }
.linha-tempo .balao { margin-top: 8px; font-weight: 400; }

/* Barra fixa de ações no rodapé do detalhe (alcance do polegar). */
.barra-acoes {
	position: fixed; z-index: 10; left: var(--largura-lateral); right: 0; bottom: 0;
	padding: 10px 16px calc(env(safe-area-inset-bottom) + 10px);
	display: flex; gap: 8px; justify-content: center;
	background: color-mix(in srgb, var(--fundo) 80%, transparent);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid var(--borda);
}
.barra-acoes .botao { flex: 1; max-width: 360px; }

/* ─── Botões ────────────────────────────────────────────────────────────── */
.acoes { display: grid; gap: 8px; margin: 16px 0; }
.acoes.lado { grid-template-columns: 1fr 1fr; }
.botao {
	min-height: 46px; border-radius: 12px; border: 1px solid var(--borda-forte); cursor: pointer;
	background: var(--superficie-2); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; padding: 0 16px;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	text-decoration: none; color: var(--texto);
	transition: transform 0.12s var(--suave), background 0.15s, border-color 0.15s, opacity 0.15s;
}
.botao .i { width: 18px; height: 18px; color: var(--texto-2); }
.botao.primario {
	background: var(--acento); color: var(--sobre-acento); border-color: transparent;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 1px 2px rgb(0 0 0 / 40%);
}
.botao.primario .i { color: var(--sobre-acento); }
.botao.fantasma { background: transparent; }
/* Ação destrutiva (excluir pendência): texto vermelho; "cheio" = o botão que confirma na folha. */
.botao.perigo { color: var(--perigo-texto); border-color: var(--perigo-borda); }
.botao.perigo .i { color: currentColor; }
.botao.perigo.cheio { background: var(--perigo); color: #fff; border-color: transparent; }
.botao:disabled { opacity: 0.5; cursor: default; }
/* Enviando (ex.: "Entrando…"): ícone girando e o botão quase opaco, para não parecer desligado. */
.botao.carregando:disabled { opacity: 0.85; cursor: progress; }
.botao.carregando .i { animation: girar 0.8s linear infinite; }
.botao:active { transform: scale(0.98); }
.botao:focus-visible { outline: none; box-shadow: var(--foco); }

/* ─── Login ─────────────────────────────────────────────────────────────── */
/* Coluna: o cartão fica centralizado (margin-block auto) e o rodapé encosta embaixo. */
.login {
	min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
	padding: calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 20px);
	background: radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--acento) 7%, transparent) 0%, transparent 70%), var(--fundo);
}
.login-cartao { width: 100%; max-width: 380px; margin-block: auto; }
.login form { display: grid; gap: 10px; }
.login form .botao { min-height: 48px; }
.login [data-entrar] { margin-top: 4px; }
.login .marca { text-align: center; margin-bottom: 28px; }
/* Logo num "selo" igual ao ícone do app instalado (dourado sobre placa escura). Antes era um
   drop-shadow na PNG, que acendia os pixels quase transparentes e desenhava um quadrado em volta. */
.marca-selo {
	width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 22px;
	display: grid; place-items: center;
	background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 9%, var(--superficie)), var(--fundo));
	border: 1px solid color-mix(in srgb, var(--acento) 22%, transparent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 16px 40px -12px color-mix(in srgb, var(--acento) 30%, transparent);
}
/* A PNG tem folga transparente em volta do raio: 60px aqui dão um raio de ~50px no selo de 76px. */
.marca-selo img { width: 60px; height: 60px; }
.login h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
/* Só o subtítulo da marca: um ".login p" genérico vencia a cor do .erro (erro saía cinza). */
.login .marca p { margin: 0; color: var(--texto-2); font-size: 14.5px; }

/* Campo com botão de olho à direita (mostrar/ocultar senha). */
.campo-senha .campo { padding-right: 50px; }
.campo-icone .ver-senha {
	position: absolute; right: 4px; width: 42px; height: 40px; border: 0; border-radius: 9px; cursor: pointer;
	display: grid; place-items: center; background: none; color: var(--texto-3);
	transition: color 0.15s, background 0.15s;
}
/* O .campo-icone .i posiciona o ícone da esquerda; o do olho fica dentro do botão. */
.campo-icone .ver-senha .i, .campo-icone:focus-within .ver-senha .i { position: static; pointer-events: none; color: inherit; }
.ver-senha[aria-pressed='true'] { color: var(--texto-2); }
.ver-senha:focus-visible { outline: none; box-shadow: var(--foco); color: var(--texto); }
/* Campo com erro (aria-invalid, posto pelo login.js): borda e halo vermelhos no lugar do dourado. */
.campo[aria-invalid='true'] { border-color: var(--perigo-borda); }
.campo[aria-invalid='true']:focus { border-color: color-mix(in srgb, var(--perigo) 65%, transparent); box-shadow: 0 0 0 3px var(--perigo-fundo); }

.caps-lock { display: flex; align-items: center; gap: 6px; margin: -2px 2px 0; color: var(--ambar-texto); font-size: 12.5px; font-weight: 500; }
.login .erro {
	display: flex; align-items: flex-start; gap: 8px; min-height: 0; padding: 10px 12px; border-radius: 10px;
	background: var(--perigo-fundo); border: 1px solid var(--perigo-borda);
	text-align: left; line-height: 1.4; animation: entraBaixo 0.25s var(--suave);
}
.login .erro .i { margin-top: 1px; }
/* Sem erro, o espaço reservado some (senão sobra um vão entre a senha e o botão Entrar). */
.login .erro:empty { display: none; }
.login-rodape { margin-top: 24px; display: flex; align-items: center; gap: 6px; color: var(--texto-3); font-size: 12.5px; }
.login-rodape .i { width: 14px; height: 14px; }

/* Cartão só em tela larga: no celular o formulário ocupa a tela, sem moldura. */
@media (min-width: 640px) {
	.login-cartao {
		max-width: 408px; padding: 36px 32px 32px; border-radius: 20px;
		background: color-mix(in srgb, var(--superficie) 75%, transparent);
		border: 1px solid var(--borda);
		box-shadow: 0 30px 80px -30px rgb(0 0 0 / 80%);
	}
}
.campo-icone { position: relative; display: flex; align-items: center; }
.campo-icone .i { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--texto-3); pointer-events: none; transition: color 0.15s; }
.campo-icone:focus-within .i { color: var(--texto-2); }
.campo {
	width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--borda-forte); padding: 0 14px 0 42px;
	background: var(--superficie); color: var(--texto); font-size: 16px;
	outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.campo::placeholder { color: var(--texto-3); }
.campo:focus { border-color: var(--foco-campo-borda); box-shadow: var(--foco-campo); }
.erro { color: var(--perigo-texto); font-size: 13.5px; min-height: 20px; margin: 0; text-align: center; }
.tremer { animation: tremer 0.4s; }
@keyframes tremer { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
/* Escondido na tela, mas visível para o gerenciador de senhas (Senhas do iCloud precisa de um "usuário"). */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ─── Ajustes ───────────────────────────────────────────────────────────── */
.painel { margin-top: 12px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); padding: 16px; }
.titulo-painel { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.titulo-painel .circulo {
	width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	background: var(--superficie-3); color: var(--texto-2);
}
.titulo-painel .circulo .i { width: 18px; height: 18px; }
.titulo-painel strong { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.painel p { margin: 0 0 4px; color: var(--texto-2); font-size: 14px; }
.passos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.passos li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.passos .n {
	width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--superficie-3); color: var(--texto); border: 1px solid var(--borda-forte); font-size: 12.5px; font-weight: 600;
}
.passos .i { color: var(--texto-2); vertical-align: -4px; }
.status-ok { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--verde-texto); }
.status-ok .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--verde-fundo); }
.rodape-ajustes { margin-top: 28px; text-align: center; color: var(--texto-3); font-size: 12px; }

/* ─── Aviso (toast) ─────────────────────────────────────────────────────── */
.aviso {
	position: fixed; z-index: 60; /* acima da folha inferior (50) */ left: var(--largura-lateral); right: 0; margin: 0 auto;
	bottom: calc(env(safe-area-inset-bottom) + var(--altura-abas) + 24px);
	width: min(calc(100% - 32px), 400px); min-height: 48px; padding: 6px 6px 6px 14px; border-radius: 14px;
	display: flex; align-items: center; gap: 10px;
	background: var(--aviso-fundo); color: var(--texto); border: 1px solid var(--borda-forte);
	font-weight: 500; font-size: 14px; box-shadow: 0 16px 40px rgb(0 0 0 / 55%);
	animation: entraBaixo 0.3s var(--suave);
}
.aviso .i { color: var(--texto-2); }
.aviso span { flex: 1; min-width: 0; }
.aviso .desfazer {
	height: 36px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer;
	background: var(--botao-sutil); color: var(--texto); font-weight: 600; font-size: 13.5px;
	display: inline-flex; align-items: center; gap: 6px;
}

/* ─── Filtro por cliente (chips) ────────────────────────────────────────── */
/* Rolagem lateral só DENTRO da fileira (a página continua travada na largura da tela). */
.filtros {
	display: flex; gap: 6px; margin: 10px -16px 0; padding: 0 16px 2px;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.filtros::-webkit-scrollbar { display: none; }
.chip {
	flex: none; height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2);
	font-size: 13px; font-weight: 500; white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip span { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
/* Selecionado: dourado da marca, texto escuro. */
.chip[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
.chip[aria-pressed="true"] span { color: color-mix(in srgb, var(--sobre-acento) 72%, transparent); } /* ~6:1 sobre o dourado (AA em 12px) */

/* ─── Linhas editáveis do detalhe (cliente, lembrete) ───────────────────── */
.infos li:has(.info-editavel) { padding: 0; }
.info-editavel {
	width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 10px 0;
	border: 0; background: none; text-align: left; cursor: pointer; font-size: 14.5px;
}
.info-editavel .editar { flex: none; display: inline-flex; color: var(--texto-3); transition: color 0.15s; }
.info-editavel:active .editar { color: var(--texto); }
.infos .valor small, .cliente-nome small { display: block; font-size: 12px; font-weight: 400; color: var(--texto-3); }
.apagado { color: var(--texto-3); font-weight: 400; }

/* ─── Folha inferior (bottom sheet) ─────────────────────────────────────── */
/* Trava a página atrás da folha. No html (que é quem rola a janela), não no body: overflow no
   body o transformava em área de rolagem e o topo sticky "subia" e sumia com a folha aberta. */
html:has(body.com-folha) { overflow: hidden; }
.folha-fundo {
	position: fixed; inset: 0; z-index: 50;
	display: flex; align-items: flex-end; justify-content: center;
	background: rgb(0 0 0 / 0%); transition: background 0.28s;
}
.folha-fundo.aberta { background: rgb(0 0 0 / 60%); }
.folha {
	width: 100%; max-width: 560px; max-height: 88dvh; overflow: hidden;
	display: flex; flex-direction: column;
	background: var(--elevada); border: 1px solid var(--borda-forte); border-bottom: 0;
	border-radius: 20px 20px 0 0; box-shadow: 0 -20px 50px rgb(0 0 0 / 50%);
	transform: translateY(100%); transition: transform 0.34s var(--suave), opacity 0.2s;
}
.folha-fundo.aberta .folha { transform: translateY(0); }
/* A folha recebe o foco ao abrir (folha.js, é modal): sem anel em volta da folha inteira. */
.folha:focus { outline: none; }
.folha-alca { width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--borda-hover); flex: none; }
.folha-cabeca { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px 20px; flex: none; }
.folha-cabeca h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.folha-corpo { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(env(safe-area-inset-bottom) + 20px); }
.icone-botao.pequeno { width: 32px; height: 32px; border-radius: 50%; background: var(--superficie-3); }
.icone-botao.desativado { visibility: hidden; }
.dica { margin: 0 0 14px; color: var(--texto-2); font-size: 13.5px; overflow-wrap: anywhere; }

.opcoes { display: grid; gap: 6px; margin: 12px 0 18px; }
.opcao {
	width: 100%; min-height: 50px; padding: 8px 12px; border-radius: var(--raio-m); cursor: pointer;
	display: flex; align-items: center; gap: 12px; text-align: left;
	background: var(--superficie-2); border: 1px solid var(--borda); font-weight: 500;
	transition: background 0.15s, border-color 0.15s, transform 0.12s var(--suave);
}
.opcao:active { transform: scale(0.99); background: var(--superficie-3); }
.opcao.atual { border-color: var(--acento-borda); background: var(--acento-fundo); }
.opcao > .i { color: var(--texto-2); }
.opcao-icone { width: 30px; height: 30px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--superficie-3); color: var(--texto-2); }
.opcao-icone .i { width: 16px; height: 16px; }
.opcao .rotulo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Nome próprio (e não .detalhe): .detalhe já é a tela de detalhe e herdaria o padding dela. */
.opcao-detalhe { flex: none; color: var(--texto-3); font-size: 13px; font-weight: 400; }

.campo-rotulo { display: block; margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo-rotulo span { font-weight: 400; color: var(--texto-3); }
.linha-campo { display: flex; gap: 8px; }
.linha-campo .campo { flex: 1; min-width: 0; }
.linha-campo .botao { flex: none; }
.campo.sem-icone { padding-left: 14px; }
.campo[type="datetime-local"] { color-scheme: inherit; } /* segue o tema (color-scheme do :root) */
.campo-texto {
	width: 100%; padding: 12px 14px; border-radius: 12px; resize: vertical;
	border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
	font: 400 16px/1.5 var(--fonte); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.campo-texto::placeholder { color: var(--texto-3); }
.campo-texto:focus { border-color: var(--foco-campo-borda); box-shadow: var(--foco-campo); }
.botao.largo { width: 100%; margin-top: 12px; }
.botao.pequeno { min-height: 36px; font-size: 13.5px; border-radius: 10px; padding: 0 12px; }
.botao.pequeno .i { width: 15px; height: 15px; }

.resultado { margin-top: 6px; }
.resultado .acoes { margin: 10px 0 0; }
.escrevendo { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; color: var(--texto-2); font-size: 14px; }
.escrevendo .i { color: var(--texto-2); animation: pulsar 1.2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: 0.35; } }
.linhas-esqueleto { display: grid; gap: 8px; }
.linhas-esqueleto span { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-3) 50%, var(--superficie-2) 75%); background-size: 200% 100%; animation: brilho 1.3s infinite linear; }
.linhas-esqueleto span:nth-child(2) { width: 88%; }
.linhas-esqueleto span:nth-child(3) { width: 60%; }

/* ─── Relatório ─────────────────────────────────────────────────────────── */
.semana { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; }
.semana .icone-botao:not(.desativado) { border: 1px solid var(--borda); background: var(--superficie); }
.semana-texto { flex: 1; text-align: center; display: flex; flex-direction: column; }
.semana-texto strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.semana-texto span { font-size: 13px; color: var(--texto-3); }

/* Cartões de número: valor na cor do texto (a cor só aparece na variação, junto de seta e texto). */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.kpis.dois { grid-template-columns: repeat(2, 1fr); }
.kpi {
	min-width: 0; padding: 14px; border-radius: 14px;
	background: var(--superficie); border: 1px solid var(--borda);
	display: flex; flex-direction: column; gap: 2px;
}
.kpi-rotulo { font-size: 12.5px; color: var(--texto-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-valor { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.variacao { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 11px; color: var(--texto-3); line-height: 1.3; white-space: nowrap; }
.variacao .i { width: 12px; height: 12px; }
.variacao.boa { color: var(--verde-texto); }
.variacao.ruim { color: var(--texto-2); } /* queda não é perigo: neutro; vermelho só para alerta real */

.cliente-relatorio {
	margin-bottom: 10px; padding: 4px 14px 14px; border-radius: var(--raio);
	background: var(--superficie); border: 1px solid var(--borda);
}
.cliente-cabeca {
	width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer;
	border: 0; background: none; text-align: left;
}
.cliente-cabeca > .i { color: var(--texto-3); }
.cliente-nome { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cliente-nome small { margin-top: 1px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.itens-relatorio { list-style: none; margin: 2px 0 0; padding: 0; border-top: 1px solid var(--borda); }
.itens-relatorio li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.itens-relatorio li:last-child { border-bottom: 0; }
.item-icone { flex: none; margin-top: 2px; color: var(--texto-3); display: inline-flex; }
.item-titulo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-quando { flex: none; font-size: 12px; color: var(--texto-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cliente-relatorio .botao.pequeno { margin-top: 10px; }
.tela-relatorio .conteudo { padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }

/* ─── Login com Face ID ─────────────────────────────────────────────────── */
.botao.face-id { min-height: 50px; font-size: 15.5px; }
.botao.face-id .i { width: 22px; height: 22px; }
.ou { display: flex; align-items: center; gap: 12px; margin: 6px 0; color: var(--texto-3); font-size: 12.5px; }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
.passkeys { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.passkey { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: var(--raio-m); background: var(--superficie-2); border: 1px solid var(--borda); }
.passkey .rotulo { flex: 1; min-width: 0; font-weight: 500; font-size: 14px; }
.passkey small { display: block; font-size: 12px; font-weight: 400; color: var(--texto-3); }
#face-id { margin-top: 12px; }

/* ─── Grupos ────────────────────────────────────────────────────────────── */
.tela-grupos .conteudo, .tela-grupo .conteudo { padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }
/* minmax(0,1fr): sem isso a coluna do grid cresce até o nome de grupo mais longo e os cards vazam da tela. */
.lista-grupos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.grupo-item { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); transition: background 0.15s, border-color 0.15s; }
.grupo-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--texto); text-decoration: none; }
.grupo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.grupo-texto strong { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grupo-texto small { font-size: 12.5px; color: var(--texto-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.estrela {
	width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--texto-3);
	transition: color 0.15s, background 0.15s;
}
.estrela .i { width: 18px; height: 18px; }
.estrela.ativa { color: var(--acento-icone); }
.estrela.ativa .i { fill: currentColor; }
.estrela:active { background: var(--superficie-3); }

/* Hoje / Ontem: controle segmentado. */
.segmentos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin: 8px 0 20px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); }
.segmento { height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--texto-2); text-decoration: none; font-weight: 500; font-size: 14px; transition: background 0.15s, color 0.15s; }
/* Botões (Aparência em Ajustes) usam aria-pressed; os links (Hoje/Ontem) usam aria-current. */
button.segmento { border: 0; background: none; cursor: pointer; gap: 6px; }
.segmentos.tema { margin: 12px 0 2px; }
/* Animações (Ajustes → Aparência, movimento.js): três opções. */
.segmentos.movimento { grid-template-columns: repeat(3, 1fr); margin: 8px 0 8px; }
/* 320px (iPhone mini com Zoom de tela): ícone + texto dos três botões não cabem; sem ícone, cabem. */
@media (max-width: 359px) { .segmentos.movimento .segmento .i { display: none; } }
.titulo-opcao { margin: 18px 0 0; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.explicacao-opcao { margin: 0; font-size: 13px; color: var(--texto-3); line-height: 1.5; }
.segmento[aria-current='true'], .segmento[aria-pressed='true'] { background: var(--segmento-ativo); color: var(--acento-texto); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 45%), inset 0 0 0 1px rgb(255 255 255 / 6%); }

.manchete { margin: 0 0 18px; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.bloco.para-voce { padding: 14px; border-radius: var(--raio); background: var(--acento-fundo); border: 1px solid var(--acento-borda); }
.bloco.para-voce h3 { margin-left: 0; color: var(--acento-texto); }
.bloco.para-voce h3 .i, .bloco.para-voce .item-icone { color: var(--acento-texto); }
.topico { padding: 12px 14px; margin-bottom: 6px; border-radius: var(--raio-m); background: var(--superficie); border: 1px solid var(--borda); }
.topico strong { display: block; font-weight: 600; margin-bottom: 2px; letter-spacing: -0.01em; }
.topico p { margin: 0; color: var(--texto-2); font-size: 14px; overflow-wrap: anywhere; }
.itens-resumo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.itens-resumo li { display: flex; gap: 10px; font-size: 14.5px; overflow-wrap: anywhere; }
.rodape-resumo { margin: 8px 0 0; text-align: center; color: var(--texto-3); font-size: 12px; }

/* ─── Status do sistema (Ajustes) e aviso no quadro ─────────────────────── */
.status-geral { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--verde-texto); }
.status-geral .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px var(--verde-fundo); }
.status-geral.com-problema { color: var(--perigo-texto); }
.status-geral.com-problema .ponto { background: var(--perigo); box-shadow: 0 0 0 3px var(--perigo-fundo); }
.status-lista { list-style: none; margin: 0; padding: 0; }
.status-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda); }
.status-item:first-child { border-top: 0; }
.ponto-status {
	flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%;
	background: var(--verde); box-shadow: 0 0 0 3px var(--verde-fundo);
}
.status-item[data-estado='alerta'] .ponto-status { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-fundo); }
.status-item[data-estado='erro'] .ponto-status { background: var(--perigo); box-shadow: 0 0 0 3px var(--perigo-fundo); }
.status-item[data-estado='inativo'] .ponto-status { background: var(--texto-3); box-shadow: none; }
.status-texto { flex: 1; min-width: 0; }
.status-texto strong { display: block; font-weight: 600; font-size: 14.5px; }
.status-item[data-estado='erro'] .status-texto strong { color: var(--perigo-texto); }
.status-texto small { display: block; color: var(--texto-2); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.pareamento { margin-top: 10px; padding: 12px; border-radius: var(--raio-m); background: var(--superficie-2); border: 1px solid var(--acento-borda); }
.painel .pareamento p { margin: 0 0 6px; font-size: 13px; }
.codigo-pareamento {
	padding: 6px 0; text-align: center; font: 700 28px/1.3 var(--mono); letter-spacing: 0.12em;
	color: var(--texto); user-select: all; -webkit-user-select: all;
}
.gastos { margin-top: 6px; }
.gastos summary {
	display: inline-flex; align-items: center; gap: 2px; cursor: pointer; list-style: none;
	color: var(--texto-2); font-size: 13px; font-weight: 500;
}
.gastos summary::-webkit-details-marker { display: none; }
.gastos summary .i { transition: transform 0.2s var(--suave); }
.gastos[open] summary .i { transform: rotate(90deg); }
.gastos ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.gastos li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.gastos li span { min-width: 0; }
.gastos li small { color: var(--texto-3); font-size: 12px; }
.gastos li strong { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.painel .gastos .dica { margin: 10px 0 0; font-size: 12px; }

.alerta-saude {
	display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px;
	border-radius: var(--raio-m); background: var(--perigo-fundo); border: 1px solid var(--perigo-borda);
	color: var(--texto); text-decoration: none; animation: entraBaixo 0.3s var(--suave);
}
.alerta-saude > .i:first-child { flex: none; color: var(--perigo-texto); }
.alerta-saude > .i:last-child { flex: none; color: var(--texto-3); }
.alerta-saude span { flex: 1; min-width: 0; font-size: 14px; }
.alerta-saude strong { display: block; font-weight: 600; }
.alerta-saude small { display: block; color: var(--texto-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Responder / enviar mensagem pelo app (resposta.js) ────────────────── */
.com-ia { margin: 6px 0 2px; }
.com-ia summary {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; list-style: none;
	color: var(--texto-2); font-size: 14px; font-weight: 500;
}
.com-ia summary::-webkit-details-marker { display: none; }
.com-ia[open] summary { margin-bottom: 6px; }
.com-ia .botao { margin-top: 8px; }
.enviada { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 18px; text-align: center; }
.enviada .circulo {
	width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--verde-fundo); color: var(--verde-texto); animation: entraBaixo 0.3s var(--suave);
}
.enviada strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.enviada .balao { margin: 4px 0 0; text-align: left; }
.enviar-grupo { margin-top: 20px; }

/* ─── Terminal do servidor (terminal.js / terminal-sessao.js) ───────────── */
/* Confirmação de identidade (confirmacao.js): desbloqueio do terminal e cadastro de Face ID. */
.confirmacao form { display: grid; gap: 10px; margin-top: 4px; }
.confirmacao .face-id { margin-top: 12px; }
/* O .ou e o .erro ficam FORA do grid do form (confirmacao.js) e o .painel p zerava a margem deles. */
.confirmacao .ou { margin: 10px 0; }
/* Dentro do grid o gap já separa: o margin-top do .botao.largo somava 22px entre a senha e o botão. */
.confirmacao form .botao.largo { margin-top: 0; }
/* Como no login: sem erro, o espaço reservado some. (Não global: resposta.js usa .erro vazio de propósito.) */
.confirmacao .erro { margin: 10px 0 0; }
.confirmacao .erro:empty { display: none; }
/* Conectado: ocupa só a área VISÍVEL (o teclado do iPhone encolhe a viewport; ver acompanharTeclado). */
html:has(body.com-terminal), body.com-terminal { overflow: hidden; overscroll-behavior: none; }
/* iOS dá zoom na página inteira ao focar um campo com fonte < 16 px; o campo escondido do
   xterm (onde o teclado digita) herdava 12,5 px e desalinhava tudo. Ele é invisível: 16 px não aparece. */
.xterm .xterm-helper-textarea { font-size: 16px !important; }
.tela-terminal.conectado {
	position: fixed; left: var(--largura-lateral); right: 0; top: 0; z-index: 5;
	height: var(--altura-visivel, 100dvh); transform: translateY(var(--deslocamento-visivel, 0px));
	display: flex; flex-direction: column; background: var(--fundo);
}
.tela-terminal.conectado .topo { flex: none; }
.tela-terminal.conectado .conteudo { flex: 1; min-height: 0; max-width: none; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; }
.terminal { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* touch-action none: a rolagem com o dedo é feita no JS (rolagemPorToque), sem a página "quicar". */
.terminal-tela { flex: 1; min-height: 0; padding: 6px 2px 2px 8px; touch-action: none; }
.terminal-tela .xterm { height: 100%; }
.terminal-tela .xterm-viewport { scrollbar-width: thin; }
.terminal-comandos {
	flex: none; display: flex; gap: 6px; padding: 6px 8px; overflow-x: auto;
	border-top: 1px solid var(--borda); scrollbar-width: none; touch-action: pan-x;
}
.terminal-comandos::-webkit-scrollbar { display: none; }
.terminal-comandos .chip { height: 30px; font: 500 12.5px var(--mono); }
.terminal-teclas {
	flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
	padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--elevada); border-top: 1px solid var(--borda);
}
.tecla {
	height: 38px; border-radius: 9px; border: 1px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto);
	font: 600 13.5px var(--mono); cursor: pointer;
	touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.tecla:active { background: var(--superficie-3); }
.tecla[aria-pressed='true'] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.terminal-encerrado {
	flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
	background: var(--elevada); border-top: 1px solid var(--borda-forte); font-size: 13px; color: var(--texto-2);
}
.terminal-encerrado span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.terminal-encerrado .i { flex: none; color: var(--ambar); }
.terminal-encerrado .botao { flex: none; min-height: 34px; padding: 0 12px; font-size: 13px; }

/* ─── Barra lateral (só desktop; montada por lateral.js fora do #app) ───── */
.lateral { display: none; }

/* ─── Hover (mouse/trackpad): só onde existe; no toque o :hover "gruda" ─── */
@media (hover: hover) {
	.icone-botao:hover { background: var(--superficie-2); color: var(--texto); }
	.card:hover { background: var(--superficie-2); border-color: var(--borda-forte); }
	.card:hover .acao-rapida { border-color: var(--borda-hover); color: var(--texto); }
	.acao-rapida:hover { background: var(--acento) !important; border-color: var(--acento) !important; color: var(--sobre-acento) !important; }
	.botao:hover { background: var(--superficie-3); border-color: var(--borda-hover); }
	.botao.primario:hover { background: var(--acento-forte); border-color: transparent; }
	.botao.fantasma:hover { background: var(--superficie-2); }
	.botao.perigo:hover { background: var(--perigo-fundo); }
	.etiqueta.definir-cliente:hover { color: var(--texto); border-color: var(--texto-3); }
	.etiqueta.definir-cliente:hover .i { color: var(--acento-icone); }
	.botao.perigo.cheio:hover { background: color-mix(in srgb, var(--perigo) 88%, #000); }
	.ver-senha:hover { color: var(--texto); background: var(--superficie-2); }
	.chip:hover { color: var(--texto); border-color: var(--borda-forte); }
	.chip[aria-pressed="true"]:hover { color: var(--sobre-acento); border-color: var(--acento); }
	.opcao:hover { background: var(--superficie-3); }
	.opcao.atual:hover { background: var(--acento-fundo); }
	.grupo-item:hover { background: var(--superficie-2); border-color: var(--borda-forte); }
	.estrela:hover { color: var(--texto); }
	.estrela.ativa:hover { color: var(--acento-icone); }
	.info-editavel:hover .editar { color: var(--texto); }
	.segmento:not([aria-current='true']):not([aria-pressed='true']):hover { color: var(--texto); }
	.gastos summary:hover, .com-ia summary:hover { color: var(--texto); }
	.aviso .desfazer:hover { background: var(--botao-sutil-hover); }
}

/* ─── Desktop (≥ 1024px): barra lateral fixa, folhas viram janelas ─────── */
@media (min-width: 1024px) {
	:root { --largura-lateral: 240px; --altura-abas: 0px; }
	/* Na tela de login não há navegação (main.js põe body.deslogado). */
	body.deslogado { --largura-lateral: 0px; }
	body:not(.deslogado) { padding-left: var(--largura-lateral); }
	body:not(.deslogado) .lateral { display: flex; }
	.lateral {
		position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: var(--largura-lateral);
		flex-direction: column; gap: 2px; padding: 14px 12px;
		background: var(--lateral-fundo); border-right: 1px solid var(--borda);
	}
	/* logo.png tem folga transparente dos lados (o raio é alto e estreito): object-fit cover numa caixa
	   28x36 corta essa folga sem cortar o raio, que fica ~24x32 px (legível em tela 1x). */
	.lateral-marca { display: flex; align-items: center; gap: 8px; padding: 2px 8px 12px; font-weight: 700; font-size: 15px; letter-spacing: -0.015em; }
	.lateral-marca img { flex: none; width: 28px; height: 36px; object-fit: cover; }
	.lateral-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
	.lateral-titulo { padding: 16px 10px 6px; font-size: 11.5px; font-weight: 600; color: var(--texto-3); }
	.lateral-item {
		width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer;
		display: flex; align-items: center; gap: 10px; text-align: left; text-decoration: none;
		background: none; color: var(--texto-2); font-size: 14px; font-weight: 500;
		transition: background 0.12s, color 0.12s;
	}
	.lateral-item .i { width: 18px; height: 18px; color: var(--texto-3); transition: color 0.12s; }
	.lateral-item:hover { background: var(--realce); color: var(--texto); }
	.lateral-item[aria-current='true'] { background: var(--acento-fundo); color: var(--acento-texto); }
	.lateral-item[aria-current='true'] .i { color: var(--acento-icone); }
	.lateral-item .n { margin-left: auto; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
	/* Só a Entrada ganha selo (dourado): é o "não lido" do app. No kanban o selo vai no item "Quadro". */
	.lateral-item[data-lateral-aba='entrada'] .n:not(:empty), .lateral-quadro .n:not(:empty) {
		min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; line-height: 18px; text-align: center;
		background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: 11px;
	}
	.lateral-rodape { margin-top: 8px; }
	/* Atalho "Ativar notificações" (só enquanto este computador não está inscrito): dourado = chamada. */
	.lateral-push { margin-top: 8px; color: var(--acento-texto); }
	.lateral-push .i { color: var(--acento-icone); }
	/* Rodapé da lateral: [Ativar notificações] · Modo claro/escuro · Ajustes, colados entre si. */
	.lateral-tema { margin-top: 8px; }
	.lateral-push:not([hidden]) + .lateral-tema, .lateral-tema + .lateral-rodape { margin-top: 2px; }
	.lateral-push[data-situacao='bloqueadas'] { color: var(--texto-2); }
	.lateral-push[data-situacao='bloqueadas'] .i { color: var(--texto-3); }

	/* A navegação está na lateral: some a barra de abas e os atalhos do topo do quadro. */
	.abas, .so-celular { display: none !important; }
	.topo { padding-left: 24px; padding-right: 24px; }
	.topo.compacto { padding-top: 12px; }
	.conteudo { padding: 4px 24px 56px; max-width: calc(var(--largura-conteudo) + 48px); }
	.detalhe { padding-bottom: 120px; }
	.aviso { bottom: 24px; }
	.filtros { margin: 10px auto 0; padding: 0 0 2px; flex-wrap: wrap; overflow: visible; }

	/* Folha inferior → janela centralizada (sobre a área de conteúdo). */
	.folha-fundo { align-items: center; padding: 24px 24px 24px calc(var(--largura-lateral) + 24px); }
	.folha {
		max-width: 480px; max-height: min(720px, 90dvh); border-radius: 18px; border-bottom: 1px solid var(--borda-forte);
		box-shadow: 0 24px 60px rgb(0 0 0 / 60%);
		transform: translateY(12px) scale(0.98); opacity: 0;
	}
	.folha-fundo.aberta .folha { transform: none; opacity: 1; }
	.folha-alca { display: none; }
	.folha-cabeca { padding-top: 14px; }
	.folha-corpo { padding-bottom: 22px; }
}

/* ─── Kanban no computador (body.kanban: ≥ 1200px, ligado por kanban.js) ─── */
/* A classe vem do JS (não de um @media aqui) para CSS e JS nunca discordarem do modo.
   As três colunas ficam lado a lado, cada uma com rolagem própria: a tela do quadro ocupa a
   altura da janela e só as colunas rolam, então o cabeçalho de cada coluna fica sempre à vista.
   Sistema visual (tokens em :root): degraus de superfície fundo → trilho (--coluna-fundo) →
   card (--card-kanban) → hover (--superficie-2); raios coluna 16 / card 10 / controles 8 / etiqueta 6;
   só duas sombras (--sombra-card, --sombra-voo); movimento só com transform/opacity e os --dur-*.
   Todo seletor aqui começa com body.kanban, .coluna ou #camada-animacao: o celular não muda. */
body.kanban .tela-quadro { height: 100dvh; display: flex; flex-direction: column; }
/* Topo em duas colunas: título + resumo à esquerda, busca à direita; aviso de saúde e chips embaixo.
   Não precisa ser sticky nem borrado: a página não rola, quem rola são as colunas. */
body.kanban .tela-quadro .topo {
	position: relative; flex: none; padding-top: 16px; padding-bottom: 4px;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); column-gap: 16px; align-items: center;
	background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.kanban .tela-quadro .topo > * { max-width: none; margin-inline: 0; grid-column: 1 / -1; }
body.kanban .tela-quadro .linha-topo { grid-column: 1; grid-row: 1; gap: 14px; align-items: baseline; }
body.kanban .tela-quadro .busca { grid-column: 2; grid-row: 1; margin-top: 0; }
body.kanban .tela-quadro .filtros { margin-top: 12px; }
body.kanban .tela-quadro .puxar { display: none; }
/* Entrada um pouco mais larga (é onde se decide), Feito mais estreito (é histórico). Em monitor muito
   largo o quadro (topo e colunas) para de crescer em 1760px e se centraliza. */
body.kanban .tela-quadro .topo, body.kanban .tela-quadro .conteudo { width: 100%; max-width: 1760px; margin-inline: auto; }
body.kanban .tela-quadro .conteudo {
	flex: 1; min-height: 0;
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px;
	padding: 12px 24px 16px; touch-action: auto;
}

/* Título compacto com o resumo na mesma linha de base (resumo-quadro.js) e o "Atualizado há X" à direita. */
body.kanban .tela-quadro .topo h1 { flex: none; font-size: 22px; letter-spacing: -0.02em; }
.resumo-quadro { flex: 1; min-width: 0; margin: 0; display: flex; font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.resumo-quadro > span + span::before { content: '·'; margin: 0 7px; color: var(--texto-3); }
.resumo-quadro .cobranca { color: var(--perigo-texto); }
.resumo-quadro .prazo { color: var(--ambar-texto); }
body:not(.kanban) .so-kanban { display: none; }
.sincronia {
	flex: none; align-self: center; height: 30px; padding: 0 10px; border: 0; border-radius: var(--raio-p);
	display: inline-flex; align-items: center; gap: 6px; background: none; color: var(--texto-3);
	font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer;
	transition: color var(--dur-rapida), background-color var(--dur-rapida);
}
@media (hover: hover) { .sincronia:hover { color: var(--texto); background: var(--superficie-2); } }
.sincronia[data-estado='carregando'] .i { animation: girar 0.8s linear infinite; }
.sincronia[data-estado='erro'] { color: var(--perigo-texto); }
.sincronia:focus-visible { outline: none; box-shadow: var(--foco); }

/* Dica "/" dentro da busca (atalhos.js); some ao focar ou ao digitar, e em telas de toque. */
.atalho-busca { display: none; }
body.kanban .busca .atalho-busca { display: inline-flex; }
body.kanban .busca:focus-within .atalho-busca, body.kanban .busca:has(input:not(:placeholder-shown)) .atalho-busca { display: none; }
@media (hover: none) { .atalho-busca { display: none !important; } }
.tecla-atalho {
	min-width: 20px; height: 20px; padding: 0 5px; margin-right: 8px; border-radius: 6px;
	border: 1px solid var(--borda-forte); border-bottom-width: 2px; background: var(--superficie-3); color: var(--texto-3);
	font: 600 11.5px/1 var(--mono); align-items: center; justify-content: center;
}

/* Chip "Todos" neutro no kanban: o dourado cheio fica só para o cliente filtrado (o estado que chama
   atenção). (0,4,1) vence também o .chip[aria-pressed="true"]:hover global. No celular continua dourado. */
body.kanban .chip[data-cliente-filtro='todos'][aria-pressed='true'] { background: var(--superficie-3); border-color: var(--borda-forte); color: var(--texto); }
body.kanban .chip[data-cliente-filtro='todos'][aria-pressed='true'] span { color: var(--texto-2); }

/* ── Colunas ("trilhos") ── */
.coluna {
	--fundo-atual: var(--coluna-fundo); /* opaco: o título de grupo grudado usa o mesmo fundo (e acompanha o alvo dourado) */
	min-height: 0; display: flex; flex-direction: column;
	border-radius: var(--raio); border: 1px solid var(--coluna-borda); background: var(--fundo-atual);
	transition: background-color var(--dur-rapida) var(--suave), border-color var(--dur-rapida);
}
/* Filete sob o cabeçalho ao rolar: por BORDA (um box-shadow abaixo do h2 cairia dentro da
   .coluna-cards e ficaria coberto pelo título de grupo grudado). Muda na hora, sem transição. */
.coluna-cabeca {
	flex: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px 10px;
	font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; border-bottom: 1px solid transparent;
}
.coluna[data-rolou] .coluna-cabeca { border-bottom-color: var(--borda); }
/* Ícone numa plaquinha e total numa pílula colada ao nome ("Entrada [10]"): o lado direito fica
   livre para o verbo do arrasto. */
.coluna-cabeca > .i {
	width: 14px; height: 14px; padding: 4px; box-sizing: content-box; border-radius: 7px;
	background: var(--etiqueta-fundo); color: var(--texto-2);
	transition: color var(--dur-rapida), background-color var(--dur-rapida);
}
.coluna-cabeca .n {
	min-width: 20px; height: 18px; padding: 0 6px; border-radius: 6px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--etiqueta-fundo); color: var(--texto-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.coluna-cabeca .n:empty { display: none; }
/* scroll-padding: o foco por Tab para abaixo do título grudado e acima do esmaecido.
   scrollbar-gutter both-edges: a largura dos cards não muda quando a coluna passa a rolar (e no
   Windows a calha da barra clássica não fica só de um lado). A barra só aparece com o mouse na coluna. */
.coluna-cards {
	flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 12px;
	scroll-padding-block: 40px; scrollbar-width: thin; scrollbar-gutter: stable both-edges; scrollbar-color: transparent transparent;
}
.coluna:hover .coluna-cards { scrollbar-color: var(--borda-hover) transparent; }
/* Mais cards abaixo: os últimos 40px esmaecem (máscara só quando precisa: sem custo nas outras colunas). */
.coluna[data-mais-abaixo] .coluna-cards {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
/* Grupos (Cobrados, Hoje, Ontem…): rótulos pequenos com a contagem ao lado e um filete até a borda,
   GRUDADOS no topo da coluna ao rolar. Todos são irmãos dentro da .coluna-cards: o seguinte cobre o
   anterior porque tem fundo opaco; o margin negativo cobre o respiro lateral (cards não vazam nas bordas). */
.coluna .grupo {
	position: sticky; top: 0; z-index: 2; margin: 0 -8px; padding: 12px 12px 2px; gap: 6px;
	background: var(--fundo-atual); font-size: 12px; font-weight: 600; color: var(--texto-3);
	transition: background-color var(--dur-rapida) var(--suave);
}
.coluna-cards > .grupo:first-child { padding-top: 4px; }
.coluna .grupo .n { margin-left: 0; font-weight: 500; }
.coluna .grupo::after { content: ''; flex: 1; height: 1px; margin-left: 4px; background: var(--borda); }
.coluna .grupo.destaque { color: var(--perigo-texto); }
.coluna .grupo.destaque::after { background: var(--perigo-borda); }
.coluna .vazio { padding: 40px 16px; font-size: 13px; color: var(--texto-3); }
.coluna .vazio strong { font-size: 14px; }
.coluna .vazio .circulo {
	width: 44px; height: 44px; margin-bottom: 12px; border-radius: var(--raio-m);
	background: transparent; border: 1px dashed var(--borda-forte);
	transition: transform var(--dur-micro) var(--mola), color var(--dur-rapida), border-color var(--dur-rapida);
}
.coluna .vazio .circulo .i.xg { width: 20px; height: 20px; }

/* ── Cards ── compactos (~96px; ~68px sem etiquetas), nome e tempo juntos ("Rafa · há 22 h"). */
/* padding-block: folga para o anel de foco (4px fora do card) não ficar sob o título de grupo grudado. */
body.kanban .coluna-cards .lista { gap: 6px; padding-block: 4px; }
body.kanban .card {
	padding: 11px 12px 11px 13px; border-radius: var(--raio-card);
	background: var(--card-kanban); border-color: var(--borda); box-shadow: var(--sombra-card);
	transition: transform var(--dur-toque) var(--suave), border-color var(--dur-rapida), background-color var(--dur-rapida);
}
/* :active sobe para o ancestral: apertar ▶ ou "+ Cliente" não deve afundar o card inteiro. */
body.kanban .card:has(.acao-rapida:active, .definir-cliente:active) { transform: none; }
body.kanban .card .cabeca { gap: 7px; margin-bottom: 4px; }
body.kanban .card .avatar { width: 20px; height: 20px; font-size: 8.5px; }
body.kanban .card .nome { flex: 0 1 auto; font-size: 12.5px; }
body.kanban .card .quando::before { content: '·'; margin-right: 6px; }
body.kanban .card .titulo { font-size: 14px; line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
body.kanban .card .rodape { margin-top: 8px; }
body.kanban .card .etiqueta { height: 20px; padding: 0 6px; font-size: 11.5px; }
body.kanban .card .etiqueta .i { width: 12px; height: 12px; }
body.kanban .card .etiquetas:empty { display: none; }
body.kanban .card .rodape:not(:has(.acao-rapida)):has(> .etiquetas:empty) { display: none; }
/* Toque: sem etiquetas o botão perderia o empurrão do flex:1 e iria para a esquerda. */
body.kanban .acao-rapida { margin-left: auto; }
/* body.kanban .card tem box-shadow próprio: sem isto o anel de foco do teclado some. */
body.kanban .item > .card:focus-visible { border-color: var(--borda-forte); box-shadow: var(--foco); }
@media (hover: hover) {
	/* body.kanban .card (0,2,1) vence o .card:hover global (0,2,0): o hover precisa ser redeclarado. */
	body.kanban .card:hover { background: var(--superficie-2); border-color: var(--borda-forte); }
}
/* Com MOUSE, o ▶/✓ sai do rodapé e aparece no canto no hover ou no foco de TECLADO (no toque —
   iPad deitado — continua no rodapé, visível e com o tamanho de sempre). Não usar :focus-within:
   depois de um clique o foco volta ao card movido e o botão ficaria aceso sem mouse. */
@media (hover: hover) and (pointer: fine) {
	body.kanban .card:has(.acao-rapida) .cabeca { padding-right: 30px; } /* reserva fixa: sem reflow no hover */
	body.kanban .card .rodape:has(> .etiquetas:empty) { margin-top: 0; } /* não display:none: o botão mora no .rodape */
	body.kanban .acao-rapida {
		position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: var(--raio-p);
		background: var(--superficie-3); opacity: 0; transform: scale(0.9);
		transition: opacity var(--dur-rapida), transform var(--dur-micro) var(--suave), background-color var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida);
	}
	body.kanban .item:hover .acao-rapida,
	body.kanban .card:focus-visible .acao-rapida,
	body.kanban .card:has(:focus-visible) .acao-rapida,
	body.kanban .acao-rapida.confirmando { opacity: 1; transform: none; }
	body.kanban .item:hover .acao-rapida:active { transform: scale(0.9); }
}
/* Clique no ▶/✓: o botão bate (animacoes.js) e fica dourado até o card levantar voo. */
body.kanban .acao-rapida.confirmando { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

/* Feito com cara de histórico: sem fundo, título mais apagado, avatar esmaecido; no hover volta ao
   normal. [data-coluna] (e não .coluna) para o clone em voo pousar já com essa aparência. Sem line-through. */
body.kanban [data-coluna='feito'] .coluna-cabeca { color: var(--texto-2); }
body.kanban [data-coluna='feito'] .card { background: transparent; border-color: var(--borda); box-shadow: none; }
body.kanban [data-coluna='feito'] .card .titulo { color: var(--texto-2); font-weight: 500; }
body.kanban [data-coluna='feito'] .card .avatar { opacity: 0.55; transition: opacity var(--dur-rapida); } /* opacity, não filter: barato com 50 cards */
body.kanban [data-coluna='feito'] .etiqueta:not(.definir-cliente) { background: var(--realce); color: var(--texto-3); }
@media (hover: hover) {
	body.kanban [data-coluna='feito'] .card:hover { background: var(--card-kanban); border-color: var(--borda-forte); }
	body.kanban [data-coluna='feito'] .card:hover .titulo { color: var(--texto); }
	body.kanban [data-coluna='feito'] .card:hover .avatar { opacity: 1; }
}

/* Realce temporário (realce.js): pouso depois de mudar de coluna, card novo, falha, volta do detalhe.
   Acende SEM transição (nó novo + transição = piscada) e apaga em 700ms. */
body.kanban .item > .card::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	opacity: 0; transition: opacity 700ms var(--suave);
	background: var(--acento-fundo); box-shadow: inset 0 0 0 1px var(--acento-borda);
}
body.kanban .item.realce-aceso > .card::after { opacity: 1; transition: none; }
body.kanban .item[data-realce='perigo'] > .card::after { background: var(--perigo-fundo); box-shadow: inset 0 0 0 1px var(--perigo-borda); }
body.kanban .item[data-realce='neutro'] > .card::after { background: var(--realce); box-shadow: inset 0 0 0 1px var(--borda-forte); }

/* Camada dos clones em voo (flip.js): acima da lateral (20), abaixo da folha (50) e do aviso (60). */
#camada-animacao { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#camada-animacao .voo { position: absolute; margin: 0; will-change: transform; }

/* ── Arrasto (arrasto.js) ── */
body.kanban .item[draggable] > .card { cursor: grab; }
/* Foto do arrasto: o Chrome fotografa logo depois do dragstart; com transição a foto sairia com o
   valor inicial. Sem box-shadow: a foto corta no border-box. */
body.kanban .item.levantado > .card { background: var(--superficie-3); border-color: var(--acento-borda); transition: none; }
/* No lugar do card fica uma vaga tracejada do MESMO tamanho (visibility nos filhos: sem salto de layout). */
body.kanban .item.arrastando > .card { background: transparent; border-style: dashed; border-color: var(--borda-forte); box-shadow: none; }
body.kanban .item.arrastando > .card > * { visibility: hidden; }
/* As outras colunas ganham borda tracejada ("aceita aqui"); a sob o cursor acende em dourado sutil. */
body.kanban .com-arrasto .coluna:not(.origem) { border-style: dashed; border-color: var(--borda-forte); }
body.kanban .com-arrasto .coluna.alvo {
	--fundo-atual: color-mix(in srgb, var(--acento) 6%, var(--coluna-fundo));
	border-style: solid; border-color: var(--acento-borda);
}
.coluna.alvo .coluna-cabeca > .i { color: var(--acento-icone); background: var(--acento-fundo); }
/* Verbo do efeito de soltar ali ("Começar", "Concluir", "Voltar", "Reabrir"), à direita do cabeçalho. */
.coluna.alvo .coluna-cabeca[data-soltar]::after {
	content: attr(data-soltar); margin-left: auto; height: 22px; padding: 0 9px; border-radius: 999px;
	display: inline-flex; align-items: center; white-space: nowrap;
	background: var(--acento); color: var(--sobre-acento); font-size: 12px; font-weight: 600;
	animation: entraBaixo var(--dur-micro) var(--suave);
}
.coluna.alvo .vazio .circulo { transform: scale(1.06); border-color: var(--acento-borda); color: var(--acento-icone); }

/* Esqueleto no formato do card (1ª carga do kanban; o do celular não muda). */
.esqueleto-card {
	height: 96px; padding: 12px 13px; border-radius: var(--raio-card); border: 1px solid var(--borda);
	background: var(--card-kanban); display: grid; align-content: start; gap: 10px;
}
.esqueleto-card .e {
	display: block; height: 10px; border-radius: 5px;
	background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-3) 50%, var(--superficie-2) 75%);
	background-size: 200% 100%; animation: brilho 1.3s infinite linear;
}
.esqueleto-card .e-cabeca { width: 40%; }
.esqueleto-card .e-titulo { height: 14px; width: 85%; }
.esqueleto-card .e-etiquetas { height: 20px; width: 30%; border-radius: 6px; }

/* Aviso no kanban: barra de tempo quando tem botão (encolhe em 5s e pausa com o mouse em cima). */
.aviso .tempo { display: none; }
body.kanban .aviso { overflow: hidden; }
body.kanban .aviso .tempo {
	display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--borda-hover); transform-origin: left; animation: tempoAviso 5s linear forwards;
}
body.kanban .aviso:hover .tempo { animation-play-state: paused; }
@keyframes tempoAviso { to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { :root:not([data-movimento='ligado']) .aviso .tempo { display: none !important; } }
:root[data-movimento='desligado'] .aviso .tempo { display: none !important; }

/* Barra lateral: no kanban um item "Quadro" substitui Entrada/Fazendo/Feito (lateral.js). */
body:not(.kanban) .lateral-quadro { display: none; }
body.kanban .lateral .so-abas { display: none; }

/* ─── Tema claro: o que não é só trocar variável ─────────────────────────────
   Sombras (no escuro são pretas e fortes; no claro, bem leves), avatares (letra escura em vez
   de clara) e a marca (o raio dourado some sobre fundo claro: fica numa placa escura, igual ao
   ícone do app). Cores do tema claro em si: bloco :root[data-tema='claro'] no início. */
:root[data-tema='claro'] .abas { box-shadow: 0 10px 30px rgb(24 24 27 / 12%), 0 1px 2px rgb(24 24 27 / 6%); }
:root[data-tema='claro'] .aviso { box-shadow: 0 12px 32px rgb(24 24 27 / 14%), 0 1px 3px rgb(24 24 27 / 8%); }
:root[data-tema='claro'] .folha { box-shadow: 0 -12px 40px rgb(24 24 27 / 12%); }
:root[data-tema='claro'] .folha-fundo.aberta { background: rgb(24 24 27 / 32%); }
:root[data-tema='claro'] .botao.primario { box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 1px 2px rgb(24 24 27 / 14%); }
:root[data-tema='claro'] .segmento[aria-current='true'], :root[data-tema='claro'] .segmento[aria-pressed='true'] { box-shadow: 0 1px 2px rgb(24 24 27 / 12%), inset 0 0 0 1px var(--borda); }

:root[data-tema='claro'] .avatar[data-cor='0'] { background: rgb(171 74 186 / 14%); color: #8e3d9e; }
:root[data-tema='claro'] .avatar[data-cor='1'] { background: rgb(18 165 148 / 14%); color: #0b7a6d; }
:root[data-tema='claro'] .avatar[data-cor='2'] { background: rgb(120 170 30 / 16%); color: #4f7a0f; }
:root[data-tema='claro'] .avatar[data-cor='3'] { background: rgb(48 164 108 / 14%); color: #1f7a50; }
:root[data-tema='claro'] .avatar[data-cor='4'] { background: rgb(0 162 199 / 14%); color: #00738f; }
:root[data-tema='claro'] .avatar[data-cor='5'] { background: rgb(0 144 255 / 13%); color: #0b63c4; }
:root[data-tema='claro'] .avatar[data-cor='6'] { background: rgb(110 86 207 / 15%); color: #5b45b8; }
:root[data-tema='claro'] .avatar[data-cor='7'] { background: rgb(214 64 159 / 13%); color: #b0307f; }

/* Marca: placa escura atrás do raio dourado (login e barra lateral). */
:root[data-tema='claro'] .marca-selo { background: linear-gradient(180deg, #1c1c1f, #09090b); border-color: transparent; box-shadow: 0 16px 40px -14px rgb(24 24 27 / 35%); }
@media (hover: hover) {
	:root[data-tema='claro'] .card:hover { box-shadow: 0 1px 3px rgb(24 24 27 / 6%); }
}
@media (min-width: 640px) {
	:root[data-tema='claro'] .login-cartao { background: var(--superficie); box-shadow: 0 24px 60px -28px rgb(24 24 27 / 25%); }
}
@media (min-width: 1024px) {
	:root[data-tema='claro'] .folha { box-shadow: 0 20px 50px rgb(24 24 27 / 18%); }
	:root[data-tema='claro'] .lateral-marca img { width: 30px; height: 30px; margin-block: 3px; padding: 3px 5px; border-radius: 8px; background: #111113; object-fit: contain; }
}

/* iPhone instalado, recém-trocado para o claro: a barra de status ainda tem texto BRANCO até o
   app ser reaberto (ver web/js/tema.js). A faixa escura atrás dela mantém hora e bateria legíveis. */
.faixa-status body::before {
	content: ''; position: fixed; z-index: 100; top: 0; left: 0; right: 0;
	height: env(safe-area-inset-top); background: #09090b; pointer-events: none;
}

/* ─── Quadro do WhatsApp (#whatsapp) ────────────────────────────────────── */
/* Celular: "WhatsApp" em cima do nome da coluna; no kanban o título já diz "WhatsApp". */
.topo h1:has(> .selo-origem) { flex-wrap: wrap; row-gap: 0; }
.selo-origem { flex-basis: 100%; margin-bottom: 1px; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; color: var(--acento); }
body.kanban .selo-origem { display: none; }
.etiqueta.quem { max-width: 100%; }

/* ─── Card do Trello da empresa no detalhe (web/js/card-trello.js) ──────── */
.cabeca-trello { display: flex; flex-wrap: wrap; gap: 6px; }
.trello-etiqueta { gap: 6px; }
.trello-etiqueta .ponto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--texto-3); }
/* Cores do Trello por família ("red_light"/"red_dark" → red), em tom médio para ler nos dois temas. */
.ponto[data-cor='green'] { background: #4bce97; }
.ponto[data-cor='yellow'] { background: #e2b203; }
.ponto[data-cor='orange'] { background: #faa53d; }
.ponto[data-cor='red'] { background: #f87168; }
.ponto[data-cor='purple'] { background: #9f8fef; }
.ponto[data-cor='blue'] { background: #579dff; }
.ponto[data-cor='sky'] { background: #6cc3e0; }
.ponto[data-cor='lime'] { background: #94c748; }
.ponto[data-cor='pink'] { background: #e774bb; }
.ponto[data-cor='black'] { background: #8c9bab; }
.membros-card { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.membros-card .avatar { width: 26px; height: 26px; font-size: 10px; }
.membros-card .nomes { margin-left: 6px; font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.bloco h3 .n { margin-left: auto; font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.descricao-trello { white-space: pre-wrap; overflow-wrap: anywhere; }
.descricao-trello a, .comentario-trello a { color: var(--acento); }
.imagem-trello { display: block; max-width: 100%; margin: 8px 0; border-radius: 10px; border: 1px solid var(--borda); }
.progresso-checklist { height: 4px; margin: 2px 0 10px; border-radius: 2px; background: var(--superficie-3); overflow: hidden; }
.progresso-checklist span { display: block; height: 100%; background: var(--verde-texto); transition: width var(--dur-rapida, 0.15s); }
.checklist-trello { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.checklist-trello label { display: flex; align-items: flex-start; gap: 10px; padding: 7px 6px; border-radius: 8px; cursor: pointer; font-size: 14.5px; line-height: 1.4; }
.checklist-trello input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--acento); cursor: pointer; }
.checklist-trello input:checked + span { color: var(--texto-3); text-decoration: line-through; }
.anexos-trello { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.anexos-trello img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); background: var(--superficie-2); }
.arquivo-trello { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--acento); overflow-wrap: anywhere; }
.comentarios-trello { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.comentario-trello { display: flex; gap: 10px; }
.comentario-trello .avatar { width: 28px; height: 28px; font-size: 10px; }
.comentario-trello strong { font-size: 13.5px; }
.comentario-trello .quando { margin-left: 8px; font-size: 12px; color: var(--texto-3); }
.comentario-trello p { margin: 3px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--texto); }
#novo-comentario + .botao { margin-top: 8px; }
@media (hover: hover) { .checklist-trello label:hover { background: var(--superficie-2); } }

/* ─── Issue do Jira no detalhe (web/js/card-jira.js) ─────────────────────── */
.campos-jira { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.campos-jira li { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 10px; font-size: 14px; }
.campos-jira .rotulo { color: var(--texto-3); }
.campos-jira .valor { overflow-wrap: anywhere; }
.campos-jira a, .relacionadas-jira a, .html-jira a { color: var(--acento); }
.etiqueta.status-jira { background: var(--ambar-fundo); color: var(--ambar-texto); }
/* Descrição/comentários formatados (HTML montado e escapado no servidor, src/jira/adf.ts). */
.html-jira { white-space: normal; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.55; }
.html-jira > :first-child { margin-top: 0; }
.html-jira > :last-child { margin-bottom: 0; }
.html-jira p { margin: 0 0 8px; }
.html-jira h3, .html-jira h4, .html-jira h5 { margin: 14px 0 6px; font-size: 15px; font-weight: 650; display: block; }
.html-jira ul, .html-jira ol { margin: 0 0 8px; padding-left: 22px; }
.html-jira ul.tarefas { list-style: none; padding-left: 4px; }
.html-jira li { margin: 2px 0; }
.html-jira code { font-family: ui-monospace, Consolas, monospace; font-size: 0.92em; padding: 1px 5px; border-radius: 5px; background: var(--superficie-3); }
.html-jira pre { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--superficie-2); border: 1px solid var(--borda); overflow-x: auto; }
.html-jira pre code { padding: 0; background: none; }
.html-jira blockquote, .html-jira .painel-jira { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--borda-forte); background: var(--superficie-2); border-radius: 0 8px 8px 0; }
.html-jira hr { border: 0; border-top: 1px solid var(--borda); margin: 12px 0; }
.html-jira .tabela-jira { overflow-x: auto; margin: 0 0 10px; }
.html-jira table { border-collapse: collapse; font-size: 13.5px; }
.html-jira th, .html-jira td { border: 1px solid var(--borda); padding: 5px 8px; text-align: left; vertical-align: top; }
.html-jira th { background: var(--superficie-2); }
.html-jira img { display: block; max-width: 100%; margin: 8px 0; border-radius: 10px; border: 1px solid var(--borda); }
.html-jira .mencao { color: var(--acento); font-weight: 500; }
.html-jira details { margin: 0 0 8px; }
.relacionadas-jira { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.relacionadas-jira li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.relacionadas-jira small { color: var(--texto-3); }

/* ─── Agente de IA no detalhe (web/js/ia.js) ─────────────────────────────── */
.painel-ia { margin: 20px 0 4px; padding: 14px 16px; border-radius: var(--raio); border: 1px solid var(--borda-forte); background: var(--superficie); }
.painel-ia[data-status='aguardando'] { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent); }
.painel-ia[data-status='concluida'] { border-color: var(--verde-texto); }
.painel-ia[data-status='falhou'] { border-color: var(--perigo-texto); }
.painel-ia p { margin: 8px 0; font-size: 14px; color: var(--texto-2); }
.painel-ia .ia-titulo { display: flex; align-items: center; gap: 8px; }
.painel-ia .ia-titulo .i { color: var(--acento); flex: none; }
.painel-ia[data-status='executando'] .ia-titulo .i, .painel-ia[data-status='fila'] .ia-titulo .i { animation: girar 1.2s linear infinite; }
.painel-ia .ia-titulo .quando { margin-left: auto; font-size: 12px; color: var(--texto-3); }
.painel-ia .ia-resumo { color: var(--texto); white-space: pre-wrap; overflow-wrap: anywhere; }
.painel-ia .ia-meta code, .painel-ia code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.ia-lista { margin: 8px 0; font-size: 13.5px; }
.ia-lista ul { margin: 4px 0 0; padding-left: 20px; }
.ia-lista li { overflow-wrap: anywhere; }
.ia-lista.ia-repos strong { display: inline-flex; align-items: center; gap: 6px; }
.ia-lista.ia-repos strong .i { color: var(--acento); }
.ia-repos ul { list-style: none; padding-left: 0; display: grid; gap: 5px; margin-top: 6px; }
.ia-repos li { display: flex; align-items: center; gap: 8px; }
.ia-repos li code { padding: 2px 7px; border-radius: 6px; background: var(--realce); font-size: 12.5px; }
.ia-repo-selo { font-size: 11.5px; font-weight: 600; color: var(--ambar-texto); background: var(--ambar-fundo); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.painel-ia .acoes { margin-top: 10px; }
.etiqueta.ia { background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--acento); }
.etiqueta.ia .i { color: currentColor; }
.etiqueta.ia[data-ia='falhou'] { background: var(--perigo-fundo); color: var(--perigo-texto); }
.etiqueta.ia[data-ia='concluida'] { background: var(--verde-fundo); color: var(--verde-texto); }
/* Botão ✨ "Executar com IA" no card (cards.js): mesma forma do ▶, na cor de destaque. */
.acao-rapida.acao-ia { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.acao-rapida.acao-ia:active { background: var(--acento); color: var(--sobre-acento); }
@media (hover: hover) { .acao-rapida.acao-ia:hover { background: color-mix(in srgb, var(--acento) 14%, transparent); } }
.card .rodape .acao-ia + .acao-rapida { margin-left: 0; }
/* Kanban com mouse: o ✨ fica SEMPRE à vista no canto (pedido de 26/09/2026); o ▶/✓ continua
   aparecendo só no hover, ao lado dele. */
@media (hover: hover) and (pointer: fine) {
	body.kanban .card:has(.acao-ia) .cabeca { padding-right: 64px; }
	body.kanban .acao-rapida.acao-ia { opacity: 1; transform: none; background: color-mix(in srgb, var(--acento) 12%, var(--superficie-3)); }
	body.kanban .card:has(.acao-ia) .acao-rapida:not(.acao-ia) { right: 42px; }
}

:root, .tela-terminal.conectado {
	--fundo: #0b0e15;
	--superficie: #11151f;
	--superficie-2: #161b27;
	--superficie-3: #1d2331;
	--elevada: #121620;
	--borda: #1f2533;
	--borda-forte: #2b3245;
	--borda-hover: #3d4661;
	--texto: #f1f4fa;
	--texto-2: #b4bccd;
	--texto-3: #8c95aa;
	--realce: rgb(148 163 255 / 6%);
	--etiqueta-fundo: #1b2130;
	--botao-sutil: #1b2130;
	--botao-sutil-hover: #242b3d;
	--barra-flutuante: rgb(17 21 31 / 84%);
	--contorno-contador: #11151f;
	--aviso-fundo: #161b27;
	--segmento-ativo: #242b3d;
	--lateral-fundo: #0d1119;
	--coluna-fundo: #0f131c;
	--coluna-borda: #1c2230;
	--card-kanban: #161b26;
	--card-hover: #1a2030;
	--sombra-card: 0 1px 2px rgb(0 0 0 / 35%), 0 2px 8px -4px rgb(0 0 0 / 40%);
	--primaria: #7b8cff;
	--primaria-forte: #97a4ff;
	--primaria-fundo: rgb(123 140 255 / 15%);
	--primaria-borda: rgb(123 140 255 / 38%);
	--cor-capital: #2dd4bf;
	--cor-planaltec: #60a5fa;
	--cor-metagroup: #e879f9;
	--cor-pavuna: #fb923c;
	--cor-entrada: #7b8cff;
	--cor-fazendo: #fbbf24;
	--cor-feito: #34d399;
	--executando: #38bdf8;
}
:root[data-tema='claro'] {
	--fundo: #f5f7fb;
	--superficie: #ffffff;
	--superficie-2: #f1f4f9;
	--superficie-3: #e7ebf3;
	--elevada: #ffffff;
	--borda: #e3e7ef;
	--borda-forte: #d3d9e5;
	--borda-hover: #aeb8cc;
	--texto: #0f172a;
	--texto-2: #3f4a5e;
	--texto-3: #5d6880;
	--realce: rgb(79 70 229 / 5%);
	--etiqueta-fundo: #eef1f7;
	--lateral-fundo: #ffffff;
	--coluna-fundo: #eef1f7;
	--coluna-borda: #e3e7ef;
	--card-kanban: #ffffff;
	--card-hover: #ffffff;
	--sombra-card: 0 1px 2px rgb(15 23 42 / 6%), 0 2px 6px -3px rgb(15 23 42 / 8%);
	--primaria: #4f46e5;
	--primaria-forte: #4338ca;
	--primaria-fundo: rgb(79 70 229 / 9%);
	--primaria-borda: rgb(79 70 229 / 30%);
	--cor-capital: #0d9488;
	--cor-planaltec: #2563eb;
	--cor-metagroup: #c026d3;
	--cor-pavuna: #c2410c;
	--cor-entrada: #4f46e5;
	--cor-fazendo: #b45309;
	--cor-feito: #059669;
	--executando: #0284c7;
}

[data-empresa='capital'] { --cor: var(--cor-capital); }
[data-empresa='planaltec'] { --cor: var(--cor-planaltec); }
[data-empresa='metagroup'] { --cor: var(--cor-metagroup); }
[data-empresa='pavuna'] { --cor: var(--cor-pavuna); }

.card .empresa-marca { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); }
.card .empresa-marca::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.card .barra { display: none; }
.card .origem { flex: none; display: inline-flex; color: var(--texto-3); }
.card .origem .i { width: 14px; height: 14px; }
.etiqueta.chave { font: 600 11px/1 var(--mono); letter-spacing: 0.01em; color: var(--primaria); background: var(--primaria-fundo); }

.etiqueta.ia { background: var(--primaria-fundo); color: var(--primaria); }
.etiqueta.ia[data-ia='fila'] { background: var(--etiqueta-fundo); color: var(--texto-2); }
.etiqueta.ia[data-ia='executando'] { background: color-mix(in srgb, var(--executando) 15%, transparent); color: var(--executando); }
.etiqueta.ia[data-ia='executando'] .i { animation: girar 2.4s linear infinite; }
.etiqueta.ia[data-ia='precisa_info'] { background: var(--ambar-fundo); color: var(--ambar-texto); }
.acao-rapida.acao-ia { color: var(--primaria); border-color: var(--primaria-borda); }
.acao-rapida.acao-ia:active { background: var(--primaria); border-color: var(--primaria); color: #fff; }
@media (hover: hover) { .acao-rapida.acao-ia:hover { background: var(--primaria) !important; border-color: var(--primaria) !important; color: #fff !important; } }

body.kanban .card {
	padding: 12px 14px; border-radius: 10px;
	background: var(--card-kanban); border-color: var(--borda); box-shadow: var(--sombra-card);
}
body.kanban .card .cabeca { gap: 7px; margin-bottom: 8px; }
body.kanban .card .nome { font-size: 12.5px; color: var(--texto-2); }
body.kanban .card .quando { color: var(--texto-3); }
body.kanban .card .titulo { font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: -0.011em; color: var(--texto); }
body.kanban .card .rodape { margin-top: 10px; }
body.kanban .card .etiquetas { gap: 6px; }
body.kanban .card .etiqueta { height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; }
@media (hover: hover) {
	body.kanban .card:hover { background: var(--card-hover); border-color: color-mix(in srgb, var(--cor, var(--primaria)) 45%, var(--borda-forte)); }
}
body.kanban [data-coluna='feito'] .card { background: color-mix(in srgb, var(--card-kanban) 55%, transparent); box-shadow: none; }
body.kanban [data-coluna='feito'] .card .titulo { color: var(--texto-2); font-weight: 500; }
body.kanban [data-coluna='feito'] .card .empresa-marca { opacity: 0.75; }
@media (hover: hover) {
	body.kanban [data-coluna='feito'] .card:hover { background: var(--card-kanban); }
	body.kanban [data-coluna='feito'] .card:hover .empresa-marca { opacity: 1; }
}

.coluna[data-coluna='entrada'] { --cor-coluna: var(--cor-entrada); }
.coluna[data-coluna='fazendo'] { --cor-coluna: var(--cor-fazendo); }
.coluna[data-coluna='feito'] { --cor-coluna: var(--cor-feito); }
body.kanban .coluna { border-radius: 14px; }
body.kanban .coluna-cabeca { padding: 14px 14px 10px; gap: 9px; font-size: 14px; font-weight: 650; letter-spacing: -0.012em; color: var(--texto); }
body.kanban .coluna-cabeca > .i {
	width: 15px; height: 15px; padding: 5px; border-radius: 8px;
	color: var(--cor-coluna); background: color-mix(in srgb, var(--cor-coluna) 16%, transparent);
}
body.kanban .coluna-cabeca .n { height: 20px; min-width: 24px; padding: 0 7px; border-radius: 999px; color: var(--cor-coluna); background: color-mix(in srgb, var(--cor-coluna) 14%, transparent); font-weight: 600; font-size: 12px; }
body.kanban [data-coluna='feito'] .coluna-cabeca { color: var(--texto); }

.painel-quadro:empty { display: none; }
body.kanban .tela-quadro .painel-quadro {
	grid-column: 1 / -1; margin-top: 16px;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.painel-bloco {
	--cor-bloco: var(--cor-entrada);
	position: relative; overflow: hidden; min-width: 0; padding: 14px 16px 15px;
	border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie);
	box-shadow: var(--sombra-card);
}
.painel-bloco[data-painel='fazendo'] { --cor-bloco: var(--cor-fazendo); }
.painel-bloco[data-painel='feito'] { --cor-bloco: var(--cor-feito); }
.painel-bloco[data-painel='ia'] { --cor-bloco: var(--primaria); }
.painel-texto { min-width: 0; display: grid; gap: 2px; }
.painel-rotulo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.painel-rotulo::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: var(--cor-bloco); }
.painel-valor { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--texto); }
.painel-detalhe { min-width: 0; font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-detalhe b { font-weight: 600; }
.painel-detalhe .perigo { color: var(--perigo-texto); }
.painel-detalhe .atencao { color: var(--ambar-texto); }
.painel-progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--cor-bloco) 14%, transparent); }
.painel-progresso::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--progresso); background: var(--cor-bloco); transition: width var(--dur-lenta) var(--suave); }

body.kanban .tela-quadro .topo { padding-top: 20px; }
body.kanban .tela-quadro .topo h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.035em; }
body.kanban .tela-quadro .busca { height: 40px; border-radius: 10px; background: var(--superficie); border-color: var(--borda-forte); }
body.kanban .tela-quadro .filtros { margin-top: 16px; gap: 8px; }

body.kanban .chip { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--superficie); border-color: var(--borda-forte); color: var(--texto-2); font-weight: 500; }
body.kanban .chip span { color: var(--texto-3); }
body.kanban .chip[aria-pressed='true'], body.kanban .chip[data-cliente-filtro][aria-pressed='true'] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }
body.kanban .chip[aria-pressed='true'] span, body.kanban .chip[data-cliente-filtro][aria-pressed='true'] span { color: color-mix(in srgb, var(--sobre-acento) 70%, transparent); }
body.kanban .chip[data-empresa][aria-pressed='true'] { background: color-mix(in srgb, var(--cor) 20%, var(--superficie)); border-color: var(--cor); color: var(--texto); }
body.kanban .chip[data-empresa][aria-pressed='true'] span { color: var(--texto-2); }
.chip[data-empresa]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }
@media (hover: hover) {
	body.kanban .chip:hover { color: var(--texto); border-color: var(--borda-hover); }
	body.kanban .chip[data-cliente-filtro][aria-pressed='true']:hover { color: var(--sobre-acento); border-color: var(--acento); }
	body.kanban .chip[data-empresa][aria-pressed='true']:hover { color: var(--texto); border-color: var(--cor); }
}

@media (min-width: 1024px) {
	.lateral { background: var(--lateral-fundo); border-right-color: var(--borda); }
	.lateral-marca { padding: 6px 8px 18px; }
	.lateral-item { height: 36px; border-radius: 8px; color: var(--texto-2); }
	.lateral-item .i { color: var(--texto-3); }
	.lateral-item:hover { background: var(--superficie-2); color: var(--texto); }
	.lateral-item:hover .i { color: var(--texto); }
	.lateral-item[aria-current='true'] { background: var(--acento-fundo); color: var(--acento-texto); }
	.lateral-item[aria-current='true'] .i { color: var(--acento-icone); }
	.lateral-titulo { font-size: 12px; font-weight: 600; }
}

.acao-ia .rotulo-ia { display: none; }
@media (hover: hover) and (pointer: fine) {
	body.kanban .card:has(.acao-ia) .cabeca { padding-right: 30px; }
	body.kanban .card:has(.acao-ia) .acao-rapida:not(.acao-ia) { right: 8px; }
	body.kanban .card .rodape:has(.acao-ia) { margin-top: 10px; }
	body.kanban .acao-rapida.acao-ia {
		position: static; margin-left: auto; width: auto; height: 26px; padding: 0 10px; gap: 6px;
		opacity: 1; transform: none; border-radius: 7px;
		background: var(--primaria-fundo); border: 1px solid var(--primaria-borda); color: var(--primaria-forte);
		font-size: 12px; font-weight: 600; white-space: nowrap;
	}
	body.kanban .acao-rapida.acao-ia .i { width: 14px; height: 14px; }
	body.kanban .acao-ia .rotulo-ia { display: inline; }
	body.kanban .card:has(.rotulo-ia) .etiqueta.ia[data-ia='aguardando'] { display: none; }
}

.pedido-ia { display: grid; gap: 10px; }
.pedido-ia-task { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--primaria-fundo); color: var(--texto); font-size: 14px; font-weight: 600; line-height: 1.4; }
.pedido-ia-task .i { margin-top: 2px; color: var(--primaria); }
.pedido-ia-rotulo { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--texto); }
.pedido-ia .campo-texto { min-height: 120px; font-size: 15px; }
.pedido-ia-dica { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-3); }
.pedido-ia .acoes { margin: 6px 0 0; }
.pedido-ia .botao.primario { background: var(--primaria); border-color: var(--primaria); color: #fff; }
@media (hover: hover) { .pedido-ia .botao.primario:hover { background: var(--primaria-forte); border-color: var(--primaria-forte); } }
.etiqueta.ia[data-ia='aguardando_resposta'] { background: var(--ambar-fundo); color: var(--ambar-texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ambar-texto) 35%, transparent); }

.chat-ia { margin: 12px 0 4px; border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); overflow: hidden; }
.chat-ia-topo { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--borda); font-size: 14px; }
.chat-ia-topo .i { color: var(--primaria); }
.chat-ao-vivo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--verde-texto); }
.chat-ao-vivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulsoVivo 1.6s ease-in-out infinite; }
@keyframes pulsoVivo { 50% { opacity: 0.35; } }
.chat-lista { max-height: min(520px, 60dvh); overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-vazio { padding: 18px 8px; text-align: center; font-size: 13.5px; color: var(--texto-3); }
.chat-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.chat-msg.minha { justify-content: flex-end; }
.chat-avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primaria-fundo); color: var(--primaria); }
.chat-balao { min-width: 0; max-width: min(620px, 86%); padding: 9px 12px 7px; border-radius: 14px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.da-ia .chat-balao { background: var(--superficie-2); border: 1px solid var(--borda); border-bottom-left-radius: 4px; color: var(--texto); }
.minha .chat-balao { background: var(--primaria); color: #fff; border-bottom-right-radius: 4px; }
.chat-texto code { font: 12.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--realce); }
.minha .chat-texto code { background: rgb(255 255 255 / 18%); }
.chat-texto pre { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--fundo); border: 1px solid var(--borda); font: 12.5px/1.45 var(--mono); white-space: pre-wrap; overflow-x: auto; }
.chat-rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; font-size: 11px; opacity: 0.7; }
.chat-quando { font-variant-numeric: tabular-nums; }
.chat-acoes { align-self: flex-start; max-width: 100%; margin-left: 34px; font-size: 12.5px; color: var(--texto-3); }
.chat-acoes summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 4px 8px; border-radius: 8px; }
.chat-acoes summary::-webkit-details-marker { display: none; }
.chat-acoes summary span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-acoes summary b { font-weight: 600; color: var(--texto-2); }
.chat-acoes[open] summary span { white-space: normal; }
.chat-acoes ul { margin: 4px 0 2px; padding: 0 0 0 30px; display: grid; gap: 3px; font: 12px/1.45 var(--mono); color: var(--texto-3); overflow-wrap: anywhere; }
@media (hover: hover) { .chat-acoes summary:hover { background: var(--realce); color: var(--texto-2); } }
.chat-pergunta { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda-forte); background: var(--superficie-2); }
.chat-pergunta.aberta { border-color: color-mix(in srgb, var(--ambar-texto) 55%, transparent); background: var(--ambar-fundo); }
.chat-pergunta-topo { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto-2); }
.chat-pergunta.aberta .chat-pergunta-topo { color: var(--ambar-texto); }
.chat-pergunta-topo .chat-quando { margin-left: auto; font-size: 11px; color: var(--texto-3); }
.chat-pergunta p { margin: 8px 0 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--texto); }
.chat-opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chat-opcao { min-height: 34px; padding: 6px 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font-size: 13.5px; font-weight: 600; text-align: left; transition: background-color var(--dur-rapida), border-color var(--dur-rapida), color var(--dur-rapida); }
.chat-opcao:active { transform: scale(0.97); }
@media (hover: hover) { .chat-opcao:hover { background: var(--primaria); border-color: var(--primaria); color: #fff; } }
.chat-dica { display: block; margin-top: 10px; font-size: 12px; color: var(--texto-3); }
.chat-opcao.escolhida { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.chat-opcao.livre { font-weight: 500; color: var(--texto-2); border-style: dashed; }
.chat-decisoes { display: grid; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--borda); }
.chat-decisao-titulo { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.chat-decisao .chat-opcoes { margin-top: 8px; }
.chat-decisoes-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.chat-decisoes-rodape .chat-dica { margin: 0; }
.chat-decisoes-enviar { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 10px; cursor: pointer; background: var(--primaria); color: #fff; font-size: 13.5px; font-weight: 600; transition: background-color var(--dur-rapida), opacity var(--dur-rapida); }
.chat-decisoes-enviar:disabled { opacity: 0.45; cursor: default; }
.chat-decisoes-enviar:focus-visible { outline: none; box-shadow: var(--foco); }
@media (hover: hover) { .chat-decisoes-enviar:not(:disabled):hover { background: var(--primaria-forte); } }
.chat-separador { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 11.5px; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.06em; }
.chat-separador::before, .chat-separador::after { content: ''; flex: 1; height: 1px; background: var(--borda); }
.chat-envio { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--borda); background: var(--superficie); }
.chat-campo { flex: 1; min-width: 0; min-height: 40px; max-height: 180px; padding: 9px 12px; resize: none; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto); font: 400 15px/1.45 var(--fonte); outline: none; transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida); }
.chat-campo::placeholder { color: var(--texto-3); }
.chat-campo:focus { border-color: var(--primaria-borda); box-shadow: 0 0 0 3px var(--primaria-fundo); }
.chat-enviar { width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--primaria); color: #fff; transition: background-color var(--dur-rapida), transform var(--dur-toque); }
.chat-enviar:active { transform: scale(0.94); }
.chat-enviar:focus-visible, .chat-opcao:focus-visible { outline: none; box-shadow: var(--foco); }
@media (hover: hover) { .chat-enviar:hover { background: var(--primaria-forte); } }
.chat-envio.enviando .chat-enviar { opacity: 0.6; pointer-events: none; }
.chat-aviso { margin: 0; padding: 0 14px 10px; font-size: 12px; color: var(--texto-3); }
.chat-aviso:empty { display: none; }

.maquinas-cabeca { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 14px; }
.maquinas-pergunta { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--texto); }
.maquinas-contagem { font-size: 13px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.maquinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-bottom: 4px; }
.maquina { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); }
.maquina[data-online='false'] { border-style: dashed; }
.maquina-abrir {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none;
	color: var(--texto); text-align: left; cursor: pointer; border-radius: 10px;
}
.maquina-abrir:disabled { cursor: not-allowed; }
.maquina-abrir:focus-visible { outline: none; box-shadow: var(--foco); }
.maquina-icone { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--primaria-fundo); color: var(--primaria); }
.maquina[data-online='false'] .maquina-icone { background: var(--superficie-2); color: var(--texto-3); }
.maquina-texto { min-width: 0; display: flex; flex-direction: column; }
.maquina-texto strong { font-size: 15.5px; font-weight: 650; }
.maquina-texto small { font-size: 12.5px; color: var(--texto-3); overflow-wrap: anywhere; }
@media (hover: hover) { .maquina[data-online='true']:has(.maquina-abrir:hover) { border-color: var(--borda-hover); } }
.maquina-numeros { display: flex; flex-wrap: wrap; gap: 6px; }
.maquina-numeros span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; background: var(--superficie-2); font-size: 12px; color: var(--texto-2); }
.maquina-numeros .i { width: 13px; height: 13px; color: var(--texto-3); }
.maquina-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.maquina-acoes .botao { width: auto; min-height: 32px; font-size: 12.5px; }
.maquina-comando { user-select: all; }

.socorro { max-width: 520px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 48px) 20px 32px; display: flex; flex-direction: column; gap: 12px; color: var(--texto-2); font-size: 14px; }
.socorro strong { font-size: 20px; color: var(--texto); }
.socorro p { margin: 0; }
.socorro pre { margin: 8px 0 0; padding: 12px; border-radius: 10px; background: var(--superficie-2); font: 11.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

:root { --serie-1: #7586fb; --serie-2: #d95926; --serie-apagada: #3b4357; --grade: #1a2030; }
:root[data-tema='claro'] { --serie-1: #4f46e5; --serie-2: #eb6834; --serie-apagada: #c5ccda; --grade: #edf0f5; }

.tela-painel .topo > * { max-width: 1240px; }
.tela-painel .conteudo { max-width: 1272px; padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }
.painel-conteudo { transition: opacity var(--dur-rapida); }
.painel-conteudo.recarregando { opacity: 0.55; }
.painel-atualizado { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }

.status-pilula {
	flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
	font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--verde-fundo); color: var(--verde-texto);
}
.status-pilula .i { width: 14px; height: 14px; }
.status-pilula[data-status='alerta'] { background: var(--ambar-fundo); color: var(--ambar-texto); }
.status-pilula[data-status='erro'] { background: var(--perigo-fundo); color: var(--perigo-texto); }
.ponto-status { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; background: var(--verde); }
.ponto-status[data-status='erro'] { background: var(--perigo); }
.ponto-status[data-status='alerta'] { background: var(--ambar); }

.painel-aviso { display: flex; align-items: center; gap: 8px; margin: 8px 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--ambar-fundo); color: var(--ambar-texto); font-size: 13px; }
.painel-aviso .i { flex: none; }
.painel-aviso.neutro { background: var(--superficie-2); color: var(--texto-2); }

.painel-geral { margin-top: 8px; padding: 18px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda); }
.painel-geral-status { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.painel-geral-status strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.painel-geral-status div > span { display: block; font-size: 13px; color: var(--texto-2); }
.painel-geral-icone { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--verde-fundo); color: var(--verde-texto); }
.painel-geral[data-status='alerta'] .painel-geral-icone { background: var(--ambar-fundo); color: var(--ambar-texto); }
.painel-geral[data-status='erro'] { border-color: var(--perigo-borda); }
.painel-geral[data-status='erro'] .painel-geral-icone { background: var(--perigo-fundo); color: var(--perigo-texto); }

.painel-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.painel-kpis.seis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 12px; }
@media (min-width: 1320px) { .painel-kpis.seis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.painel-geral .painel-kpi { background: var(--superficie-2); border-color: transparent; }
.painel-kpi .kpi-rotulo { display: inline-flex; align-items: center; gap: 6px; }
.painel-kpi .kpi-rotulo .i { width: 14px; height: 14px; color: var(--texto-3); }
.painel-kpi .kpi-valor { font-size: 26px; font-weight: 650; font-variant-numeric: normal; margin-top: 4px; }
.kpi-detalhe { font-size: 12px; color: var(--texto-3); line-height: 1.35; overflow-wrap: anywhere; }

.painel-secao { margin: 28px 0 12px; font-size: 13px; font-weight: 600; color: var(--texto-2); letter-spacing: 0.01em; }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.painel-grade.um { grid-template-columns: 1fr; }

.painel-card {
	display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; border-radius: 14px;
	background: var(--superficie); border: 1px solid var(--borda); color: var(--texto); text-decoration: none;
	transition: border-color var(--dur-rapida), transform var(--dur-rapida) var(--suave), box-shadow var(--dur-rapida);
}
.painel-card[data-status='erro'] { border-color: var(--perigo-borda); }
@media (hover: hover) { .painel-card:hover { border-color: var(--borda-hover); transform: translateY(-1px); box-shadow: var(--sombra-card); } }
.painel-card:active { transform: scale(0.99); }
.painel-card:focus-visible { outline: none; box-shadow: var(--foco); }
.painel-card-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.painel-card-nome { min-width: 0; display: flex; flex-direction: column; }
.painel-card-nome strong { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.painel-card-nome span { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-card-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.painel-card-numeros div { min-width: 0; }
.painel-card-numeros dt { font-size: 11.5px; color: var(--texto-3); }
.painel-card-numeros dd { margin: 2px 0 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.painel-card-faixa { display: flex; flex-direction: column; gap: 4px; }
.painel-card-faixa .faixa { width: 100%; height: 40px; overflow: visible; }
.faixa-base { stroke: var(--grade); stroke-width: 1; vector-effect: non-scaling-stroke; }
.faixa .grafico-linha { vector-effect: non-scaling-stroke; }
.faixa-falha { fill: var(--perigo); stroke: var(--superficie); stroke-width: 1.5; }
.painel-card-faixa span { font-size: 11px; color: var(--texto-3); }
.painel-card-rodape { display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-2); }
.painel-card-rodape span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.painel-card-rodape .i { width: 14px; height: 14px; color: var(--texto-3); }
.painel-card-rodape .tem-aviso, .painel-card-rodape .tem-aviso .i { color: var(--ambar-texto); }

.painel-pc-medidores, .painel-medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 20px; }
.medidor { min-width: 0; }
.medidor-texto { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--texto-2); }
.medidor-texto strong { font-size: 15px; color: var(--texto); font-weight: 650; }
.medidor-trilho { height: 6px; margin: 6px 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--serie-1) 18%, transparent); overflow: hidden; }
.medidor-trilho span { display: block; height: 100%; border-radius: inherit; background: var(--serie-1); }
.medidor[data-nivel='alerta'] .medidor-trilho { background: var(--ambar-fundo); }
.medidor[data-nivel='alerta'] .medidor-trilho span { background: var(--ambar); }
.medidor[data-nivel='erro'] .medidor-trilho { background: var(--perigo-fundo); }
.medidor[data-nivel='erro'] .medidor-trilho span { background: var(--perigo); }
.medidor small { font-size: 11.5px; color: var(--texto-3); }

.painel-cabeca-sistema { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 4px; font-size: 13px; color: var(--texto-3); }
.painel-periodo { grid-template-columns: repeat(3, 1fr); max-width: 340px; margin: 14px 0 14px; }

.painel-bloco { min-width: 0; padding: 16px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); }
.painel-bloco > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.painel-bloco h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.painel-bloco h3 .i { color: var(--texto-3); }
.painel-bloco > header > span { font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.painel-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 12px; margin-bottom: 12px; }
.painel-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: start; }
.painel-colunas .painel-bloco:has(.painel-tabela) { grid-column: 1 / -1; }
.painel-problemas { margin-bottom: 12px; border-color: var(--ambar-fundo); }
.painel-problemas[data-status='erro'] { border-color: var(--perigo-borda); }
.painel-problemas h3 .i { color: var(--ambar-texto); }
.painel-problemas ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--texto); }
.painel-problemas li + li { margin-top: 4px; }
.painel-problemas h4 { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.painel-falhas { list-style: none; padding: 0 !important; color: var(--texto-2) !important; font-size: 12.5px !important; }
.painel-falhas time { display: inline-block; min-width: 44px; font-family: var(--mono); color: var(--texto-3); }
.painel-vazio { margin: 0; font-size: 13px; color: var(--texto-3); }
.painel-lista { list-style: none; margin: 0; padding: 0; }
.painel-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.painel-lista li:last-child { border-bottom: 0; }
.painel-lista code { font-family: var(--mono); font-size: 12.5px; color: var(--texto-2); }

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.painel-tabela, .tabela-grafico table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.painel-tabela th, .painel-tabela td, .tabela-grafico th, .tabela-grafico td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; font-weight: 400; }
.painel-tabela thead th, .tabela-grafico thead th { font-size: 11.5px; font-weight: 500; color: var(--texto-3); }
.painel-tabela tbody tr:last-child > *, .tabela-grafico tbody tr:last-child > * { border-bottom: 0; }
.painel-tabela td, .painel-tabela th { vertical-align: middle; }
.painel-tabela .ponto-status { vertical-align: middle; }
.painel-tabela code { font-family: var(--mono); font-size: 12.5px; vertical-align: middle; }
.endereco { display: inline-flex; flex-direction: column; min-width: 0; vertical-align: middle; }
.endereco strong { font-weight: 600; }
.endereco small { font-size: 11.5px; color: var(--texto-3); }
.tabela-grafico { margin-top: 8px; }
.tabela-grafico summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 12.5px; color: var(--texto-3); border-radius: 6px; }
.tabela-grafico summary::-webkit-details-marker { display: none; }
.tabela-grafico summary:focus-visible { outline: none; box-shadow: var(--foco); }
@media (hover: hover) { .tabela-grafico summary:hover { color: var(--texto); } }
.tabela-grafico[open] summary { margin-bottom: 6px; }
.tabela-grafico .tabela-rolagem { max-height: 260px; overflow-y: auto; }

.grafico-bloco { display: flex; flex-direction: column; }
.grafico-bloco .tabela-grafico { order: 3; }
.grafico-area-desenho { position: relative; order: 2; min-height: 220px; }
.grafico { position: relative; }
.grafico svg { display: block; overflow: visible; }
.grafico text { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; font-family: var(--fonte); }
.grafico-grade line { stroke: var(--grade); stroke-width: 1; shape-rendering: crispEdges; }
.grafico-grade line.base { stroke: var(--borda-forte); }
.grafico-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linha.s1 { stroke: var(--serie-1); }
.grafico-linha.s2 { stroke: var(--serie-2); }
.grafico-area.s1 { fill: var(--serie-1); opacity: 0.1; }
.grafico-area.s2 { fill: var(--serie-2); opacity: 0.1; }
.grafico-ponto { stroke: var(--superficie); stroke-width: 2; }
.grafico-ponto.s1 { fill: var(--serie-1); }
.grafico-ponto.s2 { fill: var(--serie-2); }
.grafico-falhas circle { fill: var(--perigo); stroke: var(--superficie); stroke-width: 2; }
.grafico-mira line { stroke: var(--borda-hover); stroke-width: 1; shape-rendering: crispEdges; }
.grafico-alvo { fill: transparent; cursor: crosshair; outline: none; }
.grafico-coluna { outline: none; }
.grafico-coluna .grafico-alvo { cursor: default; }
.grafico-coluna.ativa .grafico-alvo, .grafico-coluna:focus-visible .grafico-alvo { fill: var(--realce); }
.grafico-coluna.ativa .grafico-barra { filter: brightness(1.18); }
.grafico-barra.s1 { fill: var(--serie-1); }
.grafico-barra.apagada { fill: var(--serie-apagada); }
.grafico-barra.perigo { fill: var(--perigo); }
.grafico-alvo:focus-visible { stroke: var(--acento); stroke-width: 2; }

.grafico-dica {
	position: absolute; top: 0; left: 0; z-index: 3; min-width: 150px; max-width: 260px; padding: 8px 10px; pointer-events: none;
	border-radius: 10px; background: var(--elevada); border: 1px solid var(--borda-forte); box-shadow: 0 10px 28px -12px rgb(0 0 0 / 60%);
	font-size: 12.5px;
}
.grafico-dica-titulo { margin-bottom: 5px; font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.grafico-dica-linha { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 8px; line-height: 1.6; }
.grafico-dica-linha strong { font-weight: 650; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico-dica-linha .nome { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.grafico-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 12.5px; color: var(--texto-2); }
.grafico-legenda li { display: inline-flex; align-items: center; gap: 7px; }
.grafico-legenda strong { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.chave { flex: none; display: inline-block; background: var(--texto-3); }
.chave.traco { width: 14px; height: 2px; border-radius: 1px; }
.chave.quadrado { width: 10px; height: 10px; border-radius: 3px; }
.chave.ponto { width: 8px; height: 8px; border-radius: 50%; }
.chave.nenhuma { width: 0; height: 0; }
.chave.s1 { background: var(--serie-1); }
.chave.s2 { background: var(--serie-2); }
.chave.apagada { background: var(--serie-apagada); }
.chave.perigo, .chave.falha { background: var(--perigo); }

.status-pilula[data-status='parado'] { background: var(--etiqueta-fundo); color: var(--texto-2); }
.painel-card[data-status='parado'] { border-style: dashed; }
.painel-card[data-status='parado'] .painel-card-numeros, .painel-card[data-status='parado'] .painel-card-faixa { opacity: 0.55; }

.painel-recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.painel-recursos li {
	min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 7px; align-items: center;
	padding: 7px 9px; border-radius: 9px; background: var(--superficie-2);
}
.painel-recursos .i { grid-row: 1 / 3; width: 15px; height: 15px; color: var(--texto-3); }
.painel-recursos span { font-size: 10.5px; color: var(--texto-3); line-height: 1.2; }
.painel-recursos strong { font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.painel-recursos-bloco { margin-bottom: 12px; }
.painel-recursos-bloco .painel-kpis.seis { margin: 0; }
.painel-recursos-bloco .painel-kpi { background: var(--superficie-2); border-color: transparent; }
.painel-recursos-bloco .kpi-valor { font-size: 22px; }

.painel-acoes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 12px 0 2px; }
.painel-acoes-extras { display: flex; flex-wrap: wrap; gap: 8px; }
.painel-controles { position: relative; z-index: 2; display: flex; gap: 6px; }
.painel-controles .botao { width: auto; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.painel-controles .botao .i { width: 15px; height: 15px; }
.painel-controles .botao:disabled { opacity: 0.4; cursor: not-allowed; }
.painel-controles .botao[data-acompanhar] .i { animation: girar 1s linear infinite; }
.painel-controles.compacto .botao { flex: 1 1 0; min-height: 32px; padding: 0 8px; font-size: 12.5px; }
.painel-card { position: relative; }
.painel-card-alvo { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.painel-card-alvo:focus-visible { outline: none; box-shadow: var(--foco); }
.painel-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.painel-etapas li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--texto); }
.painel-etapas li .i { margin-top: 2px; width: 16px; height: 16px; color: var(--texto-3); }
.painel-etapas li strong { display: block; font-weight: 550; font-size: 13.5px; overflow-wrap: anywhere; }
.painel-etapas li small { display: block; font-size: 12px; color: var(--texto-3); overflow-wrap: anywhere; }
.painel-etapas li[data-estado='fazendo'] .i { color: var(--serie-1); animation: girar 1s linear infinite; }
.painel-etapas li[data-estado='feito'] .i { color: var(--verde-texto); }
.painel-etapas li[data-estado='erro'] .i { color: var(--perigo-texto); }
.painel-etapas li[data-estado='erro'] small { color: var(--perigo-texto); }
.painel-etapas li[data-estado='pulado'] strong { color: var(--texto-2); font-weight: 500; }
.painel-tarefa-situacao { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--texto-2); }
.painel-tarefa-situacao .i { flex: none; animation: girar 1s linear infinite; }
.painel-tarefa-situacao.ok { color: var(--verde-texto); }
.painel-tarefa-situacao.ok .i { animation: none; }
.painel-log { margin: 0; max-height: 260px; overflow: auto; padding: 10px; border-radius: 8px; background: var(--superficie-2); font: 11.5px/1.5 var(--mono); color: var(--texto-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.painel-acoes .botao { width: auto; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.painel-acoes .botao .i { width: 16px; height: 16px; }

.painel-folha { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--texto-2); }
.painel-folha p { margin: 0; }
.painel-folha strong { color: var(--texto); }
.painel-folha code { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 5px; background: var(--etiqueta-fundo); color: var(--texto); }
.painel-folha-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.painel-folha-lista li { display: flex; gap: 10px; align-items: flex-start; }
.painel-folha-lista .i { flex: none; margin-top: 2px; color: var(--texto-3); }
.painel-folha-alerta { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--ambar-fundo); color: var(--ambar-texto) !important; font-size: 13px; }
.painel-folha-alerta .i { flex: none; margin-top: 2px; }
.painel-folha-alerta strong { color: inherit; }
.painel-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.painel-folha-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.painel-folha-botoes .botao { width: auto; padding: 0 16px; }
.painel-bloco .painel-folha-botoes { margin-top: 12px; }

@media (max-width: 720px) {
	.painel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.painel-kpis.seis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.painel-geral { padding: 14px; }
	.painel-geral-status strong { font-size: 18px; }
	.painel-kpi .kpi-valor { font-size: 22px; }
	.painel-kpi .kpi-rotulo { white-space: normal; overflow: visible; line-height: 1.3; align-items: flex-start; }
	.painel-kpi .kpi-rotulo .i { margin-top: 2px; }
	.painel-periodo { max-width: none; }
	.painel-acoes .botao { flex: 1 1 auto; }
	.painel-tabela thead { display: none; }
	.painel-tabela, .painel-tabela tbody { display: block; }
	.painel-tabela tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
	.painel-tabela tbody tr:last-child { border-bottom: 0; }
	.painel-tabela th, .painel-tabela td { display: block; padding: 0; border: 0 !important; white-space: normal; min-width: 0; }
	.painel-tabela tbody th { grid-column: 1 / -1; display: flex; align-items: center; }
	.painel-tabela td::before { content: attr(data-rotulo); display: block; font-size: 11px; color: var(--texto-3); }
	.painel-tabela .endereco small { overflow-wrap: anywhere; }
}

a.maquina-abrir { text-decoration: none; }
a.maquina-abrir[aria-disabled='true'] { cursor: not-allowed; }
.maquina-acoes a.botao { text-decoration: none; }
.tela-arquivos .conteudo { max-width: 1040px; padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }
.arquivos-abas { max-width: 420px; margin: 12px 0 16px; }
.arquivos-abas .segmento[aria-pressed='true'] { background: var(--segmento-ativo); color: var(--texto); }
.arquivos-carregando { display: flex; align-items: center; gap: 8px; padding: 16px 2px; color: var(--texto-3); font-size: 13.5px; }
.arquivos-carregando .i { animation: girar 1s linear infinite; }
.arquivos-repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.arquivos-repo, .arquivos-git { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); min-width: 0; }
.arquivos-git { margin-bottom: 12px; }
.arquivos-repo-topo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.arquivos-pilulas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.arquivos-pilulas strong { font-size: 14px; margin-right: 4px; }
.arquivos-ramo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; background: var(--superficie-2); font: 12px var(--mono); color: var(--texto-2); }
.arquivos-git-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.arquivos-git-acoes .botao { width: auto; min-height: 32px; font-size: 12.5px; }
.painel-log[data-erro='true'] { color: var(--perigo-texto); }
.arquivos-raizes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.arquivos-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 10px 0 12px; font-size: 13px; }
.arquivos-trilha-item { border: 0; background: none; padding: 4px 6px; border-radius: 6px; color: var(--texto-2); cursor: pointer; font: inherit; }
.arquivos-trilha-item[aria-current='true'] { color: var(--texto); font-weight: 650; }
@media (hover: hover) { .arquivos-trilha-item:hover { background: var(--superficie-2); } }
.arquivos-trilha-sep { display: inline-flex; color: var(--texto-3); }
.arquivos-trilha-sep .i { width: 12px; height: 12px; }
.arquivos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.arquivos-barra .botao { width: auto; min-height: 32px; font-size: 12.5px; cursor: pointer; }
.arquivos-barra [data-recarregar] { margin-left: auto; }
.arquivos-lista { list-style: none; margin: 0; padding: 4px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); }
.arquivos-lista li { display: flex; align-items: center; gap: 4px; }
.arquivos-lista li + li { border-top: 1px solid var(--borda); }
.arquivos-item { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; border-radius: 9px; color: var(--texto); text-align: left; cursor: pointer; font: inherit; }
.arquivos-item:disabled { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) { .arquivos-item:not(:disabled):hover { background: var(--superficie-2); } }
.arquivos-item:focus-visible { outline: none; box-shadow: var(--foco); }
.arquivos-item-icone { display: inline-flex; color: var(--texto-3); }
.arquivos-item-icone[data-tipo='pasta'] { color: var(--primaria); }
.arquivos-item-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.arquivos-item-info { font-size: 12px; color: var(--texto-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.arquivos-caminho { margin: 0; font: 12px/1.5 var(--mono); color: var(--texto-3); overflow-wrap: anywhere; }
.arquivos-opcoes { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 720px) {
	.arquivos-item-info { display: none; }
}

html:has(body.com-editor), body.com-editor { overflow: hidden; overscroll-behavior: none; }
.tela-arquivos.com-editor {
	position: fixed; left: var(--largura-lateral); right: 0; top: 0; z-index: 5;
	height: var(--altura-visivel, 100dvh); transform: translateY(var(--deslocamento-visivel, 0px));
	display: flex; flex-direction: column; background: var(--fundo);
}
.tela-arquivos.com-editor .topo { flex: none; }
.tela-arquivos.com-editor .conteudo { flex: 1; min-height: 0; max-width: none; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; animation: none; }
.vsc-area { flex: 1; min-height: 0; display: flex; }
.vsc {
	--vsc-fundo: #1f1f1f; --vsc-barra: #181818; --vsc-borda: #2b2b2b; --vsc-texto: #cccccc; --vsc-texto-2: #9d9d9d;
	--vsc-icone: #868686; --vsc-destaque: #0078d4; --vsc-hover: #2a2d2e; --vsc-selecao: #37373d; --vsc-ativo: #04395e;
	flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--vsc-fundo); color: var(--vsc-texto);
	font: 13px/1.4 'Segoe WPC', 'Segoe UI', system-ui, -apple-system, sans-serif; border-top: 1px solid var(--vsc-borda);
}
:root[data-tema='claro'] .vsc {
	--vsc-fundo: #ffffff; --vsc-barra: #f8f8f8; --vsc-borda: #e5e5e5; --vsc-texto: #3b3b3b; --vsc-texto-2: #616161;
	--vsc-icone: #616161; --vsc-destaque: #005fb8; --vsc-hover: #f2f2f2; --vsc-selecao: #e4e6f1; --vsc-ativo: #e8e8e8;
}
.vsc button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.vsc .i { width: 16px; height: 16px; }
.vsc-corpo { flex: 1; min-height: 0; display: flex; position: relative; }
.vsc-atividades { flex: none; width: 48px; display: flex; flex-direction: column; align-items: center; background: var(--vsc-barra); border-right: 1px solid var(--vsc-borda); }
.vsc-atividades > button, .vsc-atividades > a { width: 48px; height: 48px; display: grid; place-items: center; color: var(--vsc-icone); border-left: 2px solid transparent; }
.vsc-atividades .i { width: 24px; height: 24px; }
@media (hover: hover) { .vsc-atividades > button:hover, .vsc-atividades > a:hover { color: var(--vsc-texto); } }
.vsc[data-explorador='aberto'] [data-vsc='explorador'] { color: var(--vsc-texto); border-left-color: var(--vsc-destaque); }
.vsc-atividades-fim { flex: 1; }
.vsc-explorador { flex: none; width: 250px; display: flex; flex-direction: column; background: var(--vsc-barra); border-right: 1px solid var(--vsc-borda); min-height: 0; }
.vsc[data-explorador='fechado'] .vsc-explorador { display: none; }
.vsc-explorador-titulo { flex: none; height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vsc-texto-2); }
.vsc-explorador-titulo button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: var(--vsc-icone); }
@media (hover: hover) { .vsc-explorador-titulo button:hover { background: var(--vsc-hover); } }
.vsc-arvore { flex: 1; min-height: 0; overflow: auto; transition: opacity 0.15s; scrollbar-width: thin; }
.vsc-arvore.carregando { opacity: 0.5; pointer-events: none; }
.vsc-arvore ul { list-style: none; margin: 0; padding: 0; }
.vsc-arvore-pasta { width: 100%; height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; text-align: left; }
.vsc-arvore-pasta span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsc-arvore-pasta small { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; text-transform: none; color: var(--vsc-texto-2); }
.vsc-arvore-pasta small .i { width: 12px; height: 12px; }
.vsc-arvore li button { width: 100%; height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 10px; text-align: left; border: 1px solid transparent !important; }
.vsc-arvore li button:disabled { opacity: 0.5; cursor: default; }
@media (hover: hover) { .vsc-arvore button:not(:disabled):hover { background: var(--vsc-hover); } }
.vsc-arvore li button[aria-current='true'] { background: var(--vsc-ativo); }
.vsc-arvore li button:focus-visible { outline: none; border-color: var(--vsc-destaque) !important; }
.vsc-seta { flex: none; width: 16px; display: inline-flex; color: var(--vsc-icone); }
.vsc-icone-pasta { display: inline-flex; color: #dcb67a; }
.vsc-icone-arquivo { flex: none; min-width: 16px; display: inline-flex; justify-content: center; font: 700 10px/1 var(--mono); letter-spacing: -0.04em; }
.vsc-arvore-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsc-arvore li button[data-aberto='true'] .vsc-arvore-nome { font-weight: 600; }
.vsc-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vsc-barra-abas { flex: none; height: 35px; display: flex; background: var(--vsc-barra); border-bottom: 1px solid var(--vsc-borda); }
.vsc-abas { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; }
.vsc-aba {
	flex: none; display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 4px 0 10px; max-width: 220px; cursor: pointer;
	color: var(--vsc-texto-2); border-right: 1px solid var(--vsc-borda); border-top: 1px solid transparent; position: relative;
}
.vsc-aba[aria-selected='true'] { background: var(--vsc-fundo); color: var(--vsc-texto); border-top-color: var(--vsc-destaque); margin-bottom: -1px; height: 36px; }
@media (hover: hover) { .vsc-aba:not([aria-selected='true']):hover { background: var(--vsc-hover); } }
.vsc-aba-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsc-aba[data-suja='true'] .vsc-aba-nome { font-style: italic; }
.vsc-aba-fechar { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; visibility: hidden; }
.vsc-aba-fechar > * { grid-area: 1 / 1; }
.vsc-aba-fechar .i { width: 14px; height: 14px; }
.vsc-aba[aria-selected='true'] .vsc-aba-fechar, .vsc-aba[data-suja='true'] .vsc-aba-fechar { visibility: visible; }
.vsc-ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: none; }
.vsc-aba[data-suja='true'] .vsc-ponto { display: block; }
.vsc-aba[data-suja='true'] .vsc-aba-fechar .i { visibility: hidden; }
@media (hover: hover) {
	.vsc-aba:hover .vsc-aba-fechar { visibility: visible; }
	.vsc-aba-fechar:hover { background: var(--vsc-selecao); }
	.vsc-aba[data-suja='true'] .vsc-aba-fechar:hover .vsc-ponto { display: none; }
	.vsc-aba[data-suja='true'] .vsc-aba-fechar:hover .i { visibility: visible; }
}
@media (pointer: coarse) { .vsc-aba-fechar { visibility: visible; } }
.vsc-acoes-editor { flex: none; display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.vsc-acoes-editor button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; color: var(--vsc-icone); }
@media (hover: hover) { .vsc-acoes-editor button:hover { background: var(--vsc-hover); color: var(--vsc-texto); } }
.vsc-trilha { flex: none; height: 22px; display: flex; align-items: center; gap: 1px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; color: var(--vsc-texto-2); font-size: 12.5px; }
.vsc-trilha button { padding: 0 3px; border-radius: 3px; }
@media (hover: hover) { .vsc-trilha button:hover { color: var(--vsc-texto); } }
.vsc-trilha-sep { display: inline-flex; opacity: 0.7; }
.vsc-trilha-sep .i { width: 12px; height: 12px; }
.vsc-trilha-arquivo { display: inline-flex; align-items: center; gap: 5px; padding: 0 3px; }
.vsc-editor { flex: 1; min-height: 0; }
.vsc-status {
	flex: none; height: 22px; display: flex; align-items: stretch; padding-right: 6px; font-size: 12px;
	background: var(--vsc-barra); border-top: 1px solid var(--vsc-borda); color: var(--vsc-texto-2); overflow: hidden; white-space: nowrap;
}
.vsc-status > * { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; }
.vsc-status > *:empty { display: none; }
.vsc-status .i { width: 14px; height: 14px; }
.vsc-status-remoto { background: var(--vsc-destaque); color: #ffffff; padding: 0 10px; }
.vsc-status-espaco { flex: 1; padding: 0; display: block !important; }
@media (hover: hover) { .vsc-status button:hover { background: var(--vsc-hover); color: var(--vsc-texto); } }
@media (max-width: 720px) {
	.vsc-atividades { width: 40px; }
	.vsc-atividades > button, .vsc-atividades > a { width: 40px; height: 44px; }
	.vsc-atividades .i { width: 22px; height: 22px; }
	.vsc-explorador { position: absolute; left: 40px; top: 0; bottom: 0; z-index: 10; width: min(280px, calc(100% - 56px)); box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35); }
	.vsc-arvore li button, .vsc-arvore-pasta { height: 34px; }
	.vsc-status-opcional { display: none !important; }
	.vsc-aba { max-width: 170px; }
}

@media (min-width: 1024px) {
	.tela-larga .topo > * { max-width: 1240px; }
	.tela-larga .conteudo { max-width: 1288px; }
	.tela-larga .maquinas { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
	.tela-grupos .lista-grupos { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; margin-bottom: 16px; }
	.ajustes-grade { columns: 2 440px; column-gap: 16px; }
	.ajustes-grade > * { break-inside: avoid; }
	.ajustes-grade > .painel { margin: 0 0 16px; }
	.ajustes-grade > .painel[hidden] { display: none; }
	.tela-ajustes .acoes, .tela-ajustes .rodape-ajustes { max-width: 440px; margin-inline: auto; }
}

/* ─── Identidade premium (redesign 10/2026) ─────────────────────────────── */
html { background: var(--fundo); }
body { background: transparent; }
body::after {
	content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(ellipse 55% 38% at 50% -6%, var(--brilho-fundo), transparent 70%),
		radial-gradient(ellipse 28% 26% at 92% 4%, color-mix(in srgb, var(--brilho-fundo) 55%, transparent), transparent 70%);
}
body.deslogado::after { display: none; }

.botao.primario { background: var(--destaque-gradiente); box-shadow: var(--brilho-destaque), inset 0 1px 0 rgb(255 255 255 / 45%); }
@media (hover: hover) {
	.botao.primario:hover { background: var(--destaque-gradiente); filter: brightness(1.04); transform: translateY(-1px); }
	.botao:not(.primario):not(:disabled):hover { transform: translateY(-1px); }
}

.saudacao { display: none; }
body.kanban .tela-quadro .saudacao {
	display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; grid-row: 1; margin: 0 0 2px;
	font-size: 13px; color: var(--texto-3); letter-spacing: 0.01em;
}
body.kanban .tela-quadro .saudacao strong { color: var(--texto-2); font-weight: 600; }
body.kanban .tela-quadro .saudacao .ponto-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-texto); box-shadow: 0 0 0 3px var(--verde-fundo); }
body.kanban .tela-quadro .saudacao + .linha-topo, body.kanban .tela-quadro .saudacao ~ .busca { grid-row: 2; }
body.kanban .tela-quadro .topo h1 { font-size: 30px; font-weight: 750; letter-spacing: -0.04em; }

.painel-bloco {
	border-radius: 16px; padding: 16px 18px 17px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--cor-bloco) 7%, var(--superficie)), var(--superficie) 70%);
	box-shadow: var(--sombra-1), inset 0 1px 0 rgb(255 255 255 / 3%);
	transition: transform var(--dur-media) var(--suave), border-color var(--dur-rapida), box-shadow var(--dur-media);
}
.painel-bloco::before {
	content: ''; position: absolute; inset: 0 0 auto; height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cor-bloco) 55%, transparent), transparent);
}
.painel-rotulo::before { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 10px var(--cor-bloco); }
.painel-valor { font-size: 32px; font-weight: 750; letter-spacing: -0.045em; }
@media (hover: hover) {
	.painel-bloco:hover { transform: translateY(-2px); border-color: var(--borda-forte); box-shadow: var(--sombra-2); }
}

.coluna {
	background: linear-gradient(180deg, color-mix(in srgb, var(--texto) 2.2%, var(--fundo-atual)), var(--fundo-atual) 140px);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 2.5%);
}
.coluna-cabeca { font-size: 14px; padding: 14px 16px 10px; }
.coluna-cabeca > .i { border-radius: 8px; }
.coluna[data-coluna='entrada'] .coluna-cabeca > .i { background: color-mix(in srgb, var(--cor-entrada) 16%, transparent); color: var(--cor-entrada); }
.coluna[data-coluna='fazendo'] .coluna-cabeca > .i { background: color-mix(in srgb, var(--cor-fazendo) 16%, transparent); color: var(--cor-fazendo); }
.coluna[data-coluna='feito'] .coluna-cabeca > .i { background: color-mix(in srgb, var(--cor-feito) 16%, transparent); color: var(--cor-feito); }
body.kanban .card { border-radius: 12px; transition: transform var(--dur-media) var(--suave), border-color var(--dur-rapida), background-color var(--dur-rapida), box-shadow var(--dur-media); }
@media (hover: hover) {
	body.kanban .item:not(.arrastando) > .card:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); border-color: var(--borda-hover); }
}
.card .titulo { letter-spacing: -0.012em; }

.folha { background: color-mix(in srgb, var(--elevada) 94%, transparent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.folha-fundo.aberta { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.aviso { backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); background: color-mix(in srgb, var(--aviso-fundo) 90%, transparent); }

.painel, .maquina, .arquivos-repo, .grupo-item, .cliente-relatorio, .painel-card {
	transition: border-color var(--dur-rapida), box-shadow var(--dur-media), transform var(--dur-media) var(--suave);
}
@media (hover: hover) {
	.maquina:hover, .arquivos-repo:hover, .cliente-relatorio:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); }
}

@media (min-width: 1024px) {
	.lateral {
		padding: 16px 12px 14px; gap: 2px;
		background: linear-gradient(180deg, color-mix(in srgb, var(--brilho-fundo) 40%, var(--lateral-fundo)), var(--lateral-fundo) 220px);
		border-right: 1px solid var(--borda);
	}
	.lateral-marca { gap: 11px; padding: 2px 6px 16px; }
	.lateral-logo {
		flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
		background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 14%, var(--superficie-2)), var(--superficie));
		border: 1px solid var(--acento-borda); box-shadow: 0 6px 18px -8px rgb(3 136 255 / 45%);
	}
	.lateral-marca .lateral-logo img { width: 22px; height: 28px; object-fit: cover; padding: 0; background: none; margin: 0; }
	.lateral-marca-texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
	.lateral-marca-texto strong { font-size: 15px; font-weight: 750; letter-spacing: -0.02em; }
	.lateral-marca-texto small { font-size: 11.5px; font-weight: 500; color: var(--texto-3); }
	.lateral-titulo { padding: 18px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
	.lateral-item { position: relative; height: 38px; border-radius: 10px; }
	.lateral-item[aria-current='true'] {
		background: linear-gradient(90deg, var(--acento-fundo), color-mix(in srgb, var(--acento-fundo) 30%, transparent));
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 14%, transparent);
	}
	.lateral-item[aria-current='true']::before {
		content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
		background: var(--acento); box-shadow: 0 0 12px var(--acento);
	}
	.lateral-status {
		display: flex; align-items: center; gap: 11px; margin: 10px 0 6px; padding: 11px 12px; border-radius: 12px;
		background: var(--superficie); border: 1px solid var(--borda); text-decoration: none; color: var(--texto);
		transition: border-color var(--dur-rapida), background-color var(--dur-rapida);
	}
	.lateral-status:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
	.lateral-status .ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); }
	.lateral-status[data-estado='ok'] .ponto { background: var(--verde-texto); box-shadow: 0 0 0 3px var(--verde-fundo); animation: pulsoStatus 2.4s infinite; }
	.lateral-status[data-estado='problema'] .ponto { background: var(--perigo-texto); box-shadow: 0 0 0 3px var(--perigo-fundo); }
	.lateral-status span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
	.lateral-status strong { font-size: 13px; font-weight: 650; }
	.lateral-status small { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@keyframes pulsoStatus { 0%, 100% { box-shadow: 0 0 0 3px var(--verde-fundo); } 50% { box-shadow: 0 0 0 6px transparent; } }

@media (min-width: 1024px) {
	.topo.compacto:has(h1[data-sub]) { position: relative; border-bottom: 0; padding-top: 26px; padding-bottom: 14px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
	.topo.compacto .linha-topo:has(> h1[data-sub]) > a.icone-botao[href='#'] { display: none; }
	.topo.compacto h1[data-sub] { font-size: 28px; font-weight: 750; letter-spacing: -0.035em; line-height: 1.15; overflow: visible; white-space: normal; }
	.topo.compacto h1[data-sub]::after { content: attr(data-sub); display: block; margin-top: 4px; font-size: 14px; font-weight: 450; letter-spacing: 0; color: var(--texto-3); }
	.tela-terminal.conectado .topo.compacto, .tela-arquivos.com-editor .topo.compacto { padding-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--borda); background: var(--fundo); }
	.tela-terminal.conectado .topo.compacto h1, .tela-arquivos.com-editor .topo.compacto h1 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
}

.login {
	position: relative; isolation: isolate;
	background:
		radial-gradient(ellipse 60% 42% at 50% -4%, var(--brilho-fundo), transparent 70%),
		radial-gradient(ellipse 30% 26% at 88% 8%, color-mix(in srgb, var(--brilho-fundo) 55%, transparent), transparent 70%),
		var(--fundo);
}
.login::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(color-mix(in srgb, var(--texto) 3.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--texto) 3.5%, transparent) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 65% 50% at 50% 0%, #000 25%, transparent 75%);
	mask-image: radial-gradient(ellipse 65% 50% at 50% 0%, #000 25%, transparent 75%);
}
.login .marca h1 { font-size: 26px; font-weight: 750; letter-spacing: -0.035em; }
.login-rodape { width: 100%; max-width: 380px; justify-content: space-between; }
.login-rodape a, .login-rodape span { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-3); text-decoration: none; }
.login-rodape a:hover { color: var(--acento-texto); }
@media (min-width: 640px) {
	.login-cartao {
		position: relative; padding: 30px 28px 28px; border-radius: 22px;
		background: color-mix(in srgb, var(--superficie) 88%, transparent); border: 1px solid var(--borda-forte);
		backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--sombra-3);
	}
	.login-cartao::before {
		content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
		background: var(--destaque-borda);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	}
}

.paleta-fundo {
	position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: flex-start;
	padding: max(12vh, 64px) 16px 16px; background: rgb(0 0 0 / 0%); transition: background var(--dur-media), backdrop-filter var(--dur-media);
}
.paleta-fundo.aberta { background: rgb(0 0 0 / 45%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.paleta {
	position: relative; width: min(640px, 100%); max-height: min(70vh, 560px); display: flex; flex-direction: column; overflow: hidden;
	border-radius: 18px; background: color-mix(in srgb, var(--elevada) 94%, transparent); border: 1px solid var(--borda-forte);
	box-shadow: var(--sombra-3), 0 0 0 1px rgb(255 255 255 / 2%) inset; backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
	opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity var(--dur-micro), transform var(--dur-media) var(--suave);
}
.paleta::before {
	content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--destaque-borda);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.paleta-fundo.aberta .paleta { opacity: 1; transform: none; }
.paleta-busca { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; border-bottom: 1px solid var(--borda); }
.paleta-busca .i { color: var(--acento-icone); }
.paleta-busca input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 16.5px; }
.paleta-busca input::placeholder { color: var(--texto-3); }
.paleta kbd {
	display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px;
	border: 1px solid var(--borda-forte); border-bottom-width: 2px; background: var(--superficie-2); color: var(--texto-3); font: 600 11px/1 var(--mono);
}
.paleta-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 8px; scrollbar-width: thin; }
.paleta-grupo { padding: 10px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.paleta-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.paleta-item[aria-selected='true'] { background: var(--acento-fundo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 16%, transparent); }
.paleta-icone { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-2); }
.paleta-item[aria-selected='true'] .paleta-icone { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento-icone); }
.paleta-titulo { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-dica { flex: none; max-width: 40%; font-size: 12.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-vazio { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--texto-3); font-size: 13.5px; }
.paleta-vazio .i { width: 26px; height: 26px; }
.paleta-vazio strong { color: var(--texto); font-size: 15px; }
.paleta-rodape { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; border-top: 1px solid var(--borda); font-size: 12px; color: var(--texto-3); }
.paleta-rodape span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) { .paleta-rodape { display: none; } .paleta-fundo { padding-top: calc(env(safe-area-inset-top) + 16px); } }
@media (min-width: 1024px) {
	.lateral-busca {
		display: flex; align-items: center; gap: 9px; height: 36px; margin: 0 0 6px; padding: 0 8px 0 11px; border-radius: 10px; cursor: pointer;
		background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-3); font-size: 13px; text-align: left;
		transition: border-color var(--dur-rapida), color var(--dur-rapida);
	}
	.lateral-busca span { flex: 1; }
	.lateral-busca kbd { padding: 2px 5px; border-radius: 5px; border: 1px solid var(--borda-forte); font: 600 10.5px/1 var(--mono); color: var(--texto-3); background: var(--superficie-2); }
	.lateral-busca:hover { border-color: var(--borda-forte); color: var(--texto-2); }
	.lateral-busca:focus-visible { outline: none; box-shadow: var(--foco); }
}

.rel-grade { display: grid; gap: 16px; padding-bottom: 24px; }
.rel-lateral { display: grid; gap: 12px; align-content: start; }
.rel-clientes { display: grid; gap: 14px; align-content: start; min-width: 0; }
.rel-cartao { padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-1); }
.rel-cartao h3 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.rel-semana { background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 8%, var(--superficie)), var(--superficie) 60%); border-color: var(--acento-borda); }
.rel-semana-linha { display: flex; align-items: center; gap: 6px; }
.rel-semana-linha > div { flex: 1; text-align: center; display: flex; flex-direction: column; line-height: 1.3; }
.rel-semana-linha strong { font-size: 17px; letter-spacing: -0.02em; }
.rel-semana-linha span { font-size: 12.5px; color: var(--texto-3); }
.rel-semana .icone-botao { width: 36px; height: 36px; border: 1px solid var(--borda); }
.rel-semana .icone-botao.desativado { visibility: hidden; }
.rel-resumo { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--texto-2); }
.rel-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rel-numero { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borda); }
.rel-numero span { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.rel-numero strong { font-size: 28px; font-weight: 750; letter-spacing: -0.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rel-numero small { font-size: 12px; color: var(--texto-3); }
.rel-numero.destaque strong { color: var(--acento-texto); }
.rel-barras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 132px; }
.rel-barra { display: grid; grid-template-rows: 18px 1fr 18px; justify-items: center; gap: 4px; min-width: 0; }
.rel-barra-valor { font-size: 11.5px; font-weight: 650; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.rel-barra-coluna { position: relative; width: 100%; max-width: 30px; border-radius: 8px; background: var(--etiqueta-fundo); overflow: hidden; }
.rel-barra-coluna i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--cor-feito) 80%, #fff 0%), color-mix(in srgb, var(--cor-feito) 55%, transparent)); }
.rel-barra.hoje .rel-barra-coluna i { background: var(--destaque-gradiente); box-shadow: var(--brilho-destaque); }
.rel-barra.hoje .rel-barra-dia { color: var(--acento-texto); font-weight: 700; }
.rel-barra.futuro .rel-barra-coluna { background: repeating-linear-gradient(135deg, var(--etiqueta-fundo) 0 4px, transparent 4px 8px); }
.rel-barra-dia { font-size: 11.5px; color: var(--texto-3); }
.rel-divisao { display: grid; gap: 4px; }
.rel-divisao-linha {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px; margin: 0 -8px; border: 0; border-radius: 10px;
	background: none; text-align: left; cursor: pointer; transition: background var(--dur-rapida);
}
.rel-divisao-linha:hover { background: var(--realce); }
.rel-divisao-nome { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-divisao-n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-divisao-n small { margin-left: 6px; font-weight: 500; color: var(--texto-3); }
.rel-divisao-trilho { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: var(--etiqueta-fundo); overflow: hidden; }
.rel-divisao-trilho i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--acento) 55%, transparent)); }

.rel-cliente { padding: 6px 6px 8px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-1); scroll-margin-top: 20px; transition: border-color var(--dur-media), box-shadow var(--dur-media); }
.rel-cliente.realce { border-color: var(--acento-borda); box-shadow: 0 0 0 4px var(--acento-fundo); }
.rel-cliente-topo { display: flex; align-items: center; gap: 6px; padding: 6px 6px 8px 8px; }
.rel-cliente-nome { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
.rel-cliente-nome:hover strong { color: var(--acento-texto); }
.rel-cliente-nome > span { min-width: 0; display: grid; gap: 5px; }
.rel-cliente-nome strong { font-size: 16.5px; letter-spacing: -0.02em; transition: color var(--dur-rapida); }
.rel-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rel-chip { height: 21px; padding: 0 8px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; background: var(--etiqueta-fundo); color: var(--texto-2); }
.rel-chip.ok { background: var(--verde-fundo); color: var(--verde-texto); }
.rel-chip.andamento { background: var(--ambar-fundo); color: var(--ambar-texto); }
.rel-itens { list-style: none; margin: 0; padding: 0 6px; }
.rel-itens + .rel-itens { margin-top: 4px; }
.rel-dia { padding: 12px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.rel-itens.andamento .rel-dia { color: var(--ambar-texto); }
.rel-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.rel-item:hover { background: var(--realce); }
.rel-item-icone { flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 7px; display: grid; place-items: center; background: var(--verde-fundo); color: var(--verde-texto); }
.rel-item[data-tipo='fazendo'] .rel-item-icone { background: var(--ambar-fundo); color: var(--ambar-texto); }
.rel-item-icone .i { width: 13px; height: 13px; stroke-width: 2.4; }
.rel-item-titulo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rel-item-hora { flex: none; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; margin-top: 1px; }
.rel-cliente[data-aberto='false'] .extra { display: none; }
.rel-mais {
	display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 12px); height: 38px; margin: 6px 6px 0; border-radius: 11px;
	border: 1px dashed var(--borda-forte); background: none; color: var(--texto-2); font-size: 13px; font-weight: 600; cursor: pointer;
	transition: color var(--dur-rapida), border-color var(--dur-rapida);
}
.rel-mais:hover { color: var(--texto); border-color: var(--borda-hover); }
.rel-mais .i { transition: transform var(--dur-media) var(--suave); transform: rotate(90deg); }
.rel-cliente[data-aberto='true'] .rel-mais .i { transform: rotate(-90deg); }
.rel-cliente[data-aberto='false'] [data-texto-aberto], .rel-cliente[data-aberto='true'] [data-texto-fechado] { display: none; }
@media (min-width: 1024px) {
	.rel-grade { grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
	.rel-lateral { position: sticky; top: 20px; max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-width: none; }
	.rel-clientes { grid-template-columns: minmax(0, 1fr); }
}

.marca-selo img { width: 52px; height: 52px; object-fit: contain; }
.marca-selo { background: linear-gradient(180deg, var(--superficie-2), var(--fundo)); border-color: var(--borda-forte); box-shadow: 0 14px 34px -14px rgb(3 136 255 / 45%); }
@media (min-width: 1024px) {
	.lateral-logo { background: linear-gradient(180deg, var(--superficie-2), var(--superficie)); border-color: var(--borda-forte); box-shadow: 0 6px 18px -8px rgb(3 136 255 / 45%); }
	.lateral-marca .lateral-logo img { width: 24px; height: 24px; object-fit: contain; }
}
:root[data-tema='claro'] .lateral-marca .lateral-logo img { padding: 0; background: none; border-radius: 0; margin: 0; }
@media (min-width: 1024px) {
	.lateral-marca { gap: 12px; padding: 0 6px 16px 4px; }
	.lateral-logo { width: auto; height: auto; background: none; border: 0; box-shadow: none; border-radius: 0; }
	.lateral-marca .lateral-logo img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 14px rgb(3 136 255 / 35%)); }
	.lateral-marca-texto strong { font-size: 16px; }
}

.clientes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; padding-bottom: 24px; }
.cliente-cartao { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 18px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-1); transition: border-color var(--dur-rapida), box-shadow var(--dur-media); }
@media (hover: hover) { .cliente-cartao:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); } }
.cliente-cartao header { display: flex; align-items: center; gap: 12px; }
.cliente-cartao-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cliente-cartao-nome strong { font-size: 16.5px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cliente-cartao-nome span { font-size: 12.5px; color: var(--texto-3); }
.cliente-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cliente-numeros div { padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); display: flex; flex-direction: column; }
.cliente-numeros strong { font-size: 22px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cliente-numeros span { font-size: 12px; color: var(--texto-3); }
.cliente-conversas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cliente-conversas li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; font-size: 13.5px; color: var(--texto-2); }
.cliente-conversas li:hover { background: var(--realce); }
.cliente-conversas li .i { color: var(--texto-3); flex: none; }
.cliente-conversas li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cliente-conversas li small { flex: none; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: var(--acento-fundo); color: var(--acento-texto); }
.cliente-vazio { margin: 0; font-size: 13px; color: var(--texto-3); }
.cliente-apelidos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--texto-3); }
.cliente-apelidos span { padding: 2px 8px; border-radius: 99px; background: var(--etiqueta-fundo); color: var(--texto-2); }
.cliente-cartao footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px; }
.cliente-cartao footer .botao { width: auto; min-height: 32px; font-size: 12.5px; }
.dica-folha { margin: 0; font-size: 13px; color: var(--texto-3); }
.painel-folha select.campo { appearance: auto; }
.lista-ferramentas { display: grid; gap: 4px; }
.lista-ferramentas a { display: flex; align-items: center; gap: 12px; padding: 10px; margin: 0 -6px; border-radius: 12px; color: var(--texto); text-decoration: none; }
.lista-ferramentas a:hover { background: var(--realce); }
.lista-ferramentas a > .i:first-child { color: var(--acento-icone); }
.lista-ferramentas a > .i:last-child { margin-left: auto; color: var(--texto-3); }
.lista-ferramentas span { display: flex; flex-direction: column; min-width: 0; }
.lista-ferramentas strong { font-size: 14.5px; }
.lista-ferramentas small { font-size: 12.5px; color: var(--texto-3); }
.cliente-cartao { min-width: 0; }
@media (min-width: 1024px) {
	.lateral-nav { min-height: 0; overflow-y: auto; scrollbar-width: none; }
}

.vsc-atividades > button { position: relative; }
.vsc[data-explorador='aberto'] .vsc-atividades > button[aria-pressed='true'] { color: var(--vsc-texto); border-left-color: var(--vsc-destaque); }
.vsc[data-explorador='aberto'] [data-vsc='explorador'] { border-left-color: transparent; }
.vsc-selo:not(:empty) { position: absolute; right: 7px; bottom: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--vsc-destaque); color: #fff; font: 700 9.5px/16px var(--fonte); text-align: center; }
.vsc-explorador-titulo > span:last-child:not(:first-child) { display: inline-flex; gap: 2px; }
.vsc-painel-info { display: flex; align-items: center; gap: 6px; margin: 8px 14px; font-size: 12.5px; color: var(--vsc-texto-2); }
.vsc-campo {
	width: calc(100% - 24px); margin: 4px 12px 8px; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--vsc-borda);
	background: color-mix(in srgb, var(--vsc-fundo) 70%, #000 0%); color: var(--vsc-texto); font: 13px/1.4 var(--fonte); outline: none; resize: vertical;
}
.vsc-campo:focus { border-color: var(--vsc-destaque); }
.vsc-busca-arquivo { display: flex; align-items: center; gap: 6px; padding: 6px 12px 2px; font-size: 13px; }
.vsc-busca-arquivo strong { font-weight: 600; white-space: nowrap; }
.vsc-busca-arquivo small { min-width: 0; color: var(--vsc-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.vsc-busca-arquivo em { margin-left: auto; padding: 0 6px; border-radius: 8px; background: var(--vsc-selecao); font-style: normal; font-size: 11px; }
.vsc-busca-linha { display: flex; gap: 8px; width: 100%; padding: 3px 12px 3px 32px; text-align: left; font: 12.5px/1.45 var(--mono) !important; color: var(--vsc-texto-2) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-busca-linha span { flex: none; min-width: 26px; color: var(--vsc-texto-2); opacity: 0.7; }
.vsc-busca-linha:hover { background: var(--vsc-hover) !important; color: var(--vsc-texto) !important; }
.vsc-busca-linha mark { background: rgb(234 92 0 / 33%); color: inherit; border-radius: 2px; }
.vsc-git { display: flex; flex-direction: column; padding-bottom: 12px; }
.vsc-git-ramo { display: flex; align-items: center; gap: 6px; padding: 4px 14px 8px; font-size: 12.5px; color: var(--vsc-texto-2); }
.vsc-git-ramo strong { color: var(--vsc-texto); }
.vsc-git-ramo span { padding: 0 5px; border-radius: 6px; background: var(--vsc-selecao); font-size: 11px; }
.vsc-git-ramo small { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-git-push { display: flex; align-items: center; gap: 6px; margin: 0 12px 8px; font-size: 12.5px; color: var(--vsc-texto-2); cursor: pointer; }
.vsc-botao {
	display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 12px 10px; height: 30px; border-radius: 4px;
	background: var(--vsc-destaque) !important; color: #fff !important; font-weight: 600 !important; font-size: 13px !important;
}
.vsc-botao:disabled { opacity: 0.5; cursor: default !important; }
.vsc-botao:not(:disabled):hover { filter: brightness(1.1); }
.vsc-git-titulo { display: flex; align-items: center; gap: 6px; padding: 6px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vsc-texto-2); }
.vsc-git-titulo em { padding: 0 6px; border-radius: 8px; background: var(--vsc-selecao); font-style: normal; }
.vsc-git-lista { list-style: none; margin: 0; padding: 0; }
.vsc-git-lista button { display: flex; align-items: center; gap: 6px; width: 100%; height: 24px; padding: 0 12px 0 16px; text-align: left; }
.vsc-git-lista button:hover { background: var(--vsc-hover); }
.vsc-git-nome { white-space: nowrap; }
.vsc-git-lista small { min-width: 0; flex: 1; font-size: 11.5px; color: var(--vsc-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-git-lista b { flex: none; width: 14px; text-align: center; font: 700 12px/1 var(--mono); }
.vsc-git-lista b[data-rotulo='modificado'] { color: #e2c08d; }
.vsc-git-lista b[data-rotulo='novo'] { color: #73c991; }
.vsc-git-lista b[data-rotulo='apagado'] { color: #f48771; }
.vsc-git-lista b[data-rotulo='renomeado'] { color: #4ec9b0; }
:root[data-tema='claro'] .vsc-git-lista b[data-rotulo='modificado'] { color: #895503; }
:root[data-tema='claro'] .vsc-git-lista b[data-rotulo='novo'] { color: #587c0c; }
:root[data-tema='claro'] .vsc-git-lista b[data-rotulo='apagado'] { color: #ad0707; }
.vsc-git-saida { margin: 10px 12px 0; padding: 8px; max-height: 180px; overflow: auto; border-radius: 4px; background: var(--vsc-barra); border: 1px solid var(--vsc-borda); font: 11.5px/1.45 var(--mono); color: var(--vsc-texto-2); white-space: pre-wrap; }
.vsc-git-saida[data-erro='true'] { color: #f48771; }
.vsc-icone-diff { color: var(--vsc-destaque); }
.vsc-icone-diff .i { width: 14px; height: 14px; }

.atv-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.atv-filtros .chip .i { width: 14px; height: 14px; }
.atv-lista { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.atv-dia { position: sticky; top: 0; z-index: 1; padding: 14px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); background: linear-gradient(var(--fundo) 70%, transparent); }
.atv-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 14px; }
.atv-item + .atv-item::before { content: ''; position: absolute; left: 29px; top: -10px; height: 14px; width: 1px; background: var(--borda-forte); }
.atv-item:hover { background: var(--realce); }
.atv-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); }
.atv-item[data-tipo='seguranca'] .atv-icone { background: var(--perigo-fundo); border-color: var(--perigo-borda); color: var(--perigo-texto); }
.atv-item[data-tipo='login'] .atv-icone { background: var(--acento-fundo); border-color: var(--acento-borda); color: var(--acento-icone); }
.atv-item[data-tipo='git'] .atv-icone, .atv-item[data-tipo='backup'] .atv-icone { background: var(--verde-fundo); color: var(--verde-texto); }
.atv-item[data-tipo='sistema'] .atv-icone { background: var(--ambar-fundo); color: var(--ambar-texto); }
.atv-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 1px; }
.atv-texto strong { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.atv-detalhe { font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.atv-texto small { font-size: 12px; color: var(--texto-3); }
.atv-item time { font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; padding-top: 3px; }
.atv-mais { max-width: 860px; margin-top: 12px; }

.tela-ofuscador .conteudo { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }

.ofu-modos { display: flex; gap: 8px; margin-bottom: 4px; }
.ofu-dica { color: var(--texto-2); font-size: 13.5px; line-height: 1.5; margin: 0 0 4px; }
.ofu-dica code { font: 12.5px var(--mono); background: var(--superficie-2); padding: 1px 6px; border-radius: 6px; color: var(--acento-texto); }
.ofu-opcoes { display: flex; flex-direction: column; gap: 10px; }
.ofu-grupo { display: flex; flex-wrap: wrap; gap: 8px; }

.ofu-solta {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 28px 20px; text-align: center; cursor: pointer;
	border: 1.5px dashed var(--borda-forte); border-radius: var(--raio-card);
	background: var(--superficie); color: var(--texto-2); transition: border-color .15s, background .15s;
}
.ofu-solta:hover, .ofu-solta.arrastando { border-color: var(--acento-borda); background: var(--acento-fundo); color: var(--texto); }
.ofu-solta strong { color: var(--texto); font-size: 15px; }
.ofu-solta .i { color: var(--acento-icone); }

.ofu-colar { border: 1px solid var(--borda); border-radius: var(--raio-m); background: var(--superficie); padding: 0 14px; }
.ofu-colar summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; color: var(--texto-2); font-weight: 500; }
.ofu-colar[open] summary { border-bottom: 1px solid var(--borda); margin-bottom: 12px; }
.ofu-nome { width: 100%; margin-bottom: 10px; padding: 9px 12px; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-p); color: var(--texto); font: 500 14px var(--mono); }
.ofu-textarea { width: 100%; margin-bottom: 14px; padding: 12px; min-height: 160px; resize: vertical; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-p); color: var(--texto); font: 13px/1.5 var(--mono); }
.ofu-nome:focus, .ofu-textarea:focus { outline: none; border-color: var(--foco-campo-borda); box-shadow: var(--foco-campo); }

.ofu-lista { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.ofu-arquivo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-p); }
.ofu-arquivo .i { color: var(--acento-icone); flex-shrink: 0; }
.ofu-arquivo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ofu-arquivo-tam { color: var(--texto-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.ofu-acoes { display: flex; }

.ofu-resultados { display: flex; flex-direction: column; gap: 10px; }
.ofu-resumo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.ofu-resumo strong { color: var(--texto); }
.ofu-resultado { padding: 12px 14px; border-radius: var(--raio-m); border: 1px solid var(--borda); background: var(--superficie); }
.ofu-resultado.ok { border-color: var(--acento-borda); }
.ofu-resultado.erro { display: flex; align-items: center; gap: 10px; border-color: var(--perigo-borda); background: var(--perigo-fundo); }
.ofu-resultado.erro .i { color: var(--perigo-texto); }
.ofu-resultado-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ofu-resultado-topo .i { color: var(--acento-texto); }
.ofu-selo { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; background: var(--acento-fundo); color: var(--acento-texto); border: 1px solid var(--acento-borda); }
.ofu-selo.alerta { background: var(--ambar-fundo); color: var(--ambar-texto); border-color: transparent; }
.ofu-delta { margin-left: auto; color: var(--texto-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ofu-resultado-acoes { display: flex; gap: 8px; }
.ofu-erro { color: var(--perigo-texto); font-size: 13px; }

@media (max-width: 560px) {
	.ofu-resumo { flex-direction: column; align-items: stretch; }
	.ofu-resultado-acoes .botao { flex: 1; }
}

.tela-downloads .conteudo { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.dl-lista { display: flex; flex-direction: column; gap: 12px; }
.dl-item { padding: 16px 18px; border: 1px solid var(--borda); border-radius: var(--raio-card); background: var(--superficie); display: flex; flex-direction: column; gap: 14px; }
.dl-topo { display: flex; align-items: center; gap: 14px; }
.dl-topo .i { color: var(--acento-icone); flex: none; }
.dl-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-nome strong { font-size: 17px; letter-spacing: -0.02em; }
.dl-nome span { color: var(--texto-3); font-size: 12.5px; }
.dl-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 560px) {
	.dl-acoes .botao { flex: 1; justify-content: center; }
}

/* Tela "IA" (#ia): conversa em tela cheia com o assistente. Reaproveita os balões .chat-* (20-ia-chat.css). */
.tela-ia { display: flex; flex-direction: column; height: 100dvh; max-width: 900px; margin: 0 auto; }
.ia-topo { padding: 18px 20px 12px; border-bottom: 1px solid var(--borda); }
.ia-topo h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--texto); }
.ia-topo h1 .i { color: var(--primaria); }
.ia-topo p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--texto-3); }

.ia-mensagens { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }

.ia-vazio { margin: auto; max-width: 340px; padding: 24px 8px; text-align: center; color: var(--texto-3); }
.ia-vazio .i { width: 30px; height: 30px; color: var(--primaria); opacity: 0.8; }
.ia-vazio p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }

.ia-acao { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-left: 34px; padding: 3px 10px; border-radius: 8px; background: var(--realce); font: 12px/1.4 var(--mono); color: var(--texto-3); overflow-wrap: anywhere; }
.ia-acao .i { width: 13px; height: 13px; color: var(--primaria); flex: none; }

.ia-pensando { display: flex; align-items: center; gap: 8px; padding: 2px 20px 8px; font-size: 12.5px; color: var(--texto-3); }
.ia-pensando .i { color: var(--primaria); animation: giroIa 1s linear infinite; }
@keyframes giroIa { to { transform: rotate(360deg); } }

.ia-envio { display: flex; align-items: flex-end; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); background: var(--superficie); }
.ia-envio textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 160px; padding: 10px 14px; resize: none; border-radius: 12px; border: 1px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto); font: 400 15px/1.45 var(--fonte); outline: none; transition: border-color var(--dur-rapida), box-shadow var(--dur-rapida); }
.ia-envio textarea::placeholder { color: var(--texto-3); }
.ia-envio textarea:focus { border-color: var(--primaria-borda); box-shadow: 0 0 0 3px var(--primaria-fundo); }
.ia-envio button { width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--primaria); color: #fff; transition: background-color var(--dur-rapida), transform var(--dur-toque); }
.ia-envio button:active { transform: scale(0.94); }
.ia-envio button:focus-visible { outline: none; box-shadow: var(--foco); }
@media (hover: hover) { .ia-envio button:hover { background: var(--primaria-forte); } }

.ia-envio .ia-clip { background: var(--superficie-2); border: 1px solid var(--borda-forte); color: var(--texto-2); }
@media (hover: hover) { .ia-envio .ia-clip:hover { background: var(--realce); color: var(--primaria); } }

.ia-anexos { display: flex; gap: 8px; padding: 10px 20px 0; overflow-x: auto; border-top: 1px solid var(--borda); background: var(--superficie); }
.ia-miniatura { position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--borda-forte); }
.ia-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-miniatura button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 65%); color: #fff; }
.ia-miniatura button .i { width: 12px; height: 12px; }
.ia-anexos:not([hidden]) + .ia-envio { border-top: 0; }

.ia-fotos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ia-fotos img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; object-fit: cover; }
.ia-nota { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; opacity: 0.8; }
.ia-nota .i { width: 13px; height: 13px; }

/* Voz: ditar (gravando/transcrevendo) e conversa (ativo). */
.ia-envio .ia-clip.gravando { background: var(--perigo); border-color: transparent; color: #fff; box-shadow: 0 0 0 calc(2px + var(--nivel, 0) * 8px) color-mix(in srgb, var(--perigo) 30%, transparent); transition: box-shadow 80ms linear; }
.ia-envio .ia-clip.transcrevendo .i, .ia-voz[data-estado='entendendo'] .ia-voz-icone .i, .ia-voz[data-estado='pensando'] .ia-voz-icone .i { animation: giroIa 1s linear infinite; }
.ia-envio .ia-clip.ativo { background: var(--primaria); border-color: var(--primaria); color: #fff; }

.ia-voz { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--primaria-borda); background: var(--primaria-fundo); color: var(--texto); font-size: 13.5px; font-weight: 600; }
.ia-voz-icone { display: inline-flex; color: var(--primaria); }
.ia-voz-info { display: grid; min-width: 0; flex: 1; }
.ia-voz-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-voz-legenda { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--texto-2); }
.ia-voz-legenda:empty { display: none; }
.ia-voz-motor { flex: none; height: 26px; padding: 0 10px; border-radius: 999px; cursor: pointer; border: 1px solid var(--primaria-borda); background: var(--superficie); color: var(--primaria-forte); font: 600 11.5px var(--fonte); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) { .ia-voz-motor:hover { background: var(--primaria); color: #fff; } }
.ia-delegada { border: 1px dashed var(--primaria-borda); background: var(--primaria-fundo); color: var(--texto-2); font-family: var(--fonte); }
.ia-nivel { display: inline-flex; align-items: center; gap: 3px; height: 22px; flex: none; }
.ia-nivel i { width: 4px; height: 22px; border-radius: 2px; background: var(--primaria); transform: scaleY(var(--n, 0.15)); transition: transform 70ms linear; }
.ia-voz[data-estado='falando'] .ia-nivel i { animation: falaIa 0.9s ease-in-out infinite; }
.ia-voz[data-estado='falando'] .ia-nivel i:nth-child(2) { animation-delay: -0.2s; }
.ia-voz[data-estado='falando'] .ia-nivel i:nth-child(3) { animation-delay: -0.4s; }
.ia-voz[data-estado='falando'] .ia-nivel i:nth-child(4) { animation-delay: -0.6s; }
@keyframes falaIa { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(0.9); } }
.ia-voz-sair { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font: 600 12.5px var(--fonte); }
@media (hover: hover) { .ia-voz-sair:hover { border-color: var(--perigo); color: var(--perigo); } }
.ia-voz:not([hidden]) + .ia-anexos, .ia-voz:not([hidden]) ~ .ia-envio { border-top: 0; }

/* Enviar colado no campo; as ferramentas de voz depois, separadas por um fio. */
.ia-ferramentas { display: inline-flex; align-items: flex-end; gap: 6px; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--borda); }

/* Card de contexto (ouvido): transcrição com hora e quem falou. */
.ia-contexto { align-self: stretch; margin: 4px 0; border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); overflow: hidden; }
.ia-contexto-topo { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--borda); }
.ia-contexto-icone { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primaria-fundo); color: var(--primaria); }
.ia-contexto-titulo { display: grid; min-width: 0; }
.ia-contexto-titulo strong { font-size: 14px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-contexto-titulo small { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ia-contexto-vivo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--perigo); white-space: nowrap; }
.ia-contexto-vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulsoVivo 1.6s ease-in-out infinite; }
.ia-contexto-falas { max-height: min(380px, 45dvh); overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px; display: grid; gap: 7px; }
.ia-contexto-falas p { margin: 0; display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; font-size: 13.5px; line-height: 1.45; color: var(--texto); }
.ia-contexto-falas time { font: 11.5px var(--mono); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ia-contexto-falas b { font-weight: 650; white-space: nowrap; color: var(--texto-2); }
.ia-contexto-falas b[data-quem='voce'] { color: var(--primaria); }
.ia-contexto-falas b[data-quem='pc'] { color: var(--verde-texto); }
.ia-contexto-falas span { overflow-wrap: anywhere; }
.ia-contexto-falas p.ia-contexto-espera { display: block; color: var(--texto-3); font-size: 13px; }
.ia-contexto-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--borda); }
.ia-contexto-falas[hidden] + .ia-contexto-acoes { border-top: 0; }
.ia-contexto-acoes .botao { min-height: 32px; font-size: 12.5px; }

.ia-voltar { width: 34px; height: 34px; margin-left: -8px; color: var(--texto-2); }
.ia-voltar .i { color: inherit; }

/* Etiqueta "Executar com IA?" repete o botão ✨ do card: no celular só o botão (economiza uma linha por card). */
@media (max-width: 1023px) {
	.card:has(.acao-ia) .etiqueta.ia[data-ia='aguardando'] { display: none; }
}

@media (max-width: 480px) {
	.ia-topo { padding: 12px 14px 10px; }
	.ia-topo p { display: none; }
	.ia-ferramentas { gap: 4px; padding-left: 5px; margin-left: 0; }
	.ia-envio { gap: 5px; padding-left: 10px; padding-right: 10px; }
	.ia-envio button { width: 34px; height: 34px; border-radius: 10px; }
	.ia-envio textarea { min-height: 38px; padding: 8px 11px; }
	.ia-contexto-vivo { font-size: 0; gap: 0; }
	.ia-voz-sair span { display: none; }
}

/* No desktop a lateral fixa já ocupa a esquerda; a tela de IA usa a altura cheia da área de conteúdo. */
@media (min-width: 1024px) { .tela-ia { height: 100dvh; } }

/* "Ouvir de onde?" (botão de ouvido sem agente neste aparelho): PCs com agente ou o microfone daqui. */
.ia-origem { display: grid; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--primaria-borda); background: var(--primaria-fundo); }
.ia-origem strong { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto); }
.ia-origem strong .i { color: var(--primaria); }
.ia-origem .botao { justify-content: flex-start; gap: 8px; min-height: 40px; }
.ia-origem .botao small { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--texto-3); }
.ia-origem-cancelar { justify-self: center; border: 0; background: none; cursor: pointer; color: var(--texto-3); font: 500 12.5px var(--fonte); padding: 4px 10px; }
.ia-envio .ia-clip.transcrevendo .i { animation: giroIa 1s linear infinite; }

/* Painel de transcrição ao vivo (botão de ouvido): à esquerda do chat no PC, em cima no celular. */
.ia-layout { display: flex; justify-content: center; height: 100dvh; }
.ia-layout > .tela-ia { flex: 1 1 900px; max-width: 900px; min-width: 0; margin: 0; height: 100%; }
.ia-transcricao { flex: 0 0 380px; display: flex; flex-direction: column; min-height: 0; height: 100%; border-right: 1px solid var(--borda); background: var(--superficie); }
.ia-transcricao[hidden] { display: none; }
.ia-tr-topo { display: flex; align-items: center; gap: 10px; padding: 16px 12px 12px 18px; border-bottom: 1px solid var(--borda); }
.ia-tr-ponto { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--perigo); animation: pulsoVivo 1.6s ease-in-out infinite; }
.ia-transcricao[data-estado='salvo'] .ia-tr-ponto { background: var(--verde-texto); animation: none; }
.ia-tr-titulo { display: grid; flex: 1; min-width: 0; }
.ia-tr-titulo strong { font-size: 15px; color: var(--texto); }
.ia-tr-titulo small { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ia-tr-falas { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.ia-tr-fala.seguida { margin-top: -8px; }
.ia-tr-quem { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.ia-tr-quem b { font-size: 13px; font-weight: 700; color: var(--texto-2); }
.ia-tr-fala[data-quem='voce'] .ia-tr-quem b { color: var(--primaria); }
.ia-tr-fala[data-quem='pc'] .ia-tr-quem b { color: var(--verde-texto); }
.ia-tr-quem time { font: 11px var(--mono); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ia-tr-fala p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto); overflow-wrap: anywhere; }
.ia-tr-espera { margin: auto 0; text-align: center; font-size: 13px; color: var(--texto-3); }
.ia-tr-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); }
.ia-tr-tempo { margin-right: auto; font: 600 13px var(--mono); color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ia-tr-rodape .botao { min-height: 34px; font-size: 12.5px; }

@media (max-width: 1023px) {
	.ia-layout { flex-direction: column; }
	.ia-transcricao { flex: 0 0 42dvh; height: auto; border-right: 0; border-bottom: 1px solid var(--borda); }
	.ia-tr-rodape { padding-bottom: 12px; }
	.ia-layout > .tela-ia { flex: 1 1 auto; min-height: 0; height: auto; max-width: none; }
}
.ia-tr-trocar { flex: none; border: 1px solid var(--borda-forte); background: none; border-radius: 999px; padding: 3px 10px; cursor: pointer; color: var(--texto-2); font: 600 11.5px var(--fonte); }
@media (hover: hover) { .ia-tr-trocar:hover { border-color: var(--primaria-borda); color: var(--primaria); } }
.ia-origem-dica { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 10px; background: var(--ambar-fundo); color: var(--ambar-texto); font-size: 12.5px; line-height: 1.45; text-decoration: none; }
.ia-origem-dica .i { flex: none; margin-top: 1px; }
button.ia-origem-dica { width: 100%; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 12.5px; }
button.ia-origem-dica b { text-decoration: underline; }
.ia-instalar { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--primaria-borda); background: var(--superficie); }
.ia-instalar p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto); }
.ia-instalar-comando { display: flex; align-items: flex-start; gap: 8px; }
.ia-instalar-comando code { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--fundo); border: 1px solid var(--borda); font: 11.5px/1.5 var(--mono); color: var(--texto-2); overflow-wrap: anywhere; user-select: all; }
.ia-instalar-espera { display: flex; align-items: center; gap: 7px; color: var(--texto-3) !important; }
.ia-instalar-espera .i { animation: giroIa 1s linear infinite; color: var(--primaria); }

/* Marca da Astra em toda a Central (fontes em public/astra → web/icones via npm run icones:app). */

/* Logo completa (símbolo + ASTRA) no login: a versão certa para cada tema. */
.marca-astra { width: 150px; margin: 0 auto 22px; }
.marca-astra img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgb(64 86 255 / 38%)); }
.marca-astra .so-claro { display: none; }
:root[data-tema='claro'] .marca-astra .so-claro { display: block; }
:root[data-tema='claro'] .marca-astra .so-escuro { display: none; }

/* Login: banner da Astra ao fundo, escurecido de cima para baixo para o formulário continuar legível. */
.login {
	background:
		linear-gradient(180deg, rgb(5 6 26 / 40%) 0%, rgb(5 6 26 / 78%) 55%, var(--fundo) 100%),
		url('/icones/fundo-login-escuro.webp?v=2') center 30% / cover no-repeat,
		var(--fundo);
}
:root[data-tema='claro'] .login {
	background:
		linear-gradient(180deg, rgb(245 246 250 / 30%) 0%, rgb(245 246 250 / 82%) 55%, var(--fundo) 100%),
		url('/icones/fundo-login-claro.webp?v=2') center 35% / cover no-repeat,
		var(--fundo);
}
/* A grade decorativa do login brigaria com o banner. */
.login::before { display: none; }
/* No celular o cartão também vira vidro fosco (no desktop o 26-login-premium já faz). */
@media (max-width: 639px) {
	.login-cartao {
		padding: 26px 20px 22px; border-radius: 22px;
		background: color-mix(in srgb, var(--superficie) 78%, transparent); border: 1px solid var(--borda-forte);
		backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	}
}

/* Símbolo da Astra na tela dela (título, avatar das respostas e tela vazia). */
.ia-topo h1 .ia-logo { width: 28px; height: 28px; object-fit: contain; }
.chat-avatar.astra { background: radial-gradient(circle at 50% 40%, #1d2672, #05061a); overflow: hidden; }
.chat-avatar.astra img { width: 20px; height: 20px; object-fit: contain; }
.ia-vazio .ia-logo { width: 56px; height: 56px; object-fit: contain; opacity: 0.95; }

/* ─── Financeiro (web/js/financeiro.js) ─────────────────────────────────────
   Cores de categoria: 8 tons distintos entre si (e do laranja/vermelho de alerta), um conjunto por tema.
   A cor segue a categoria (ranking do histórico), nunca a posição no período. */
:root {
	--fin-cat-1: #4da6ff; --fin-cat-2: #a78bfa; --fin-cat-3: #2dd4bf; --fin-cat-4: #f472b6;
	--fin-cat-5: #facc15; --fin-cat-6: #84cc16; --fin-cat-7: #fb923c; --fin-cat-8: #c4a484;
	--fin-cat-outros: #71717a;
	--fin-pessoa-1: #4da6ff; --fin-pessoa-2: #f472b6; --fin-pessoa-3: #a1a1aa;
	--fin-serie: #4da6ff; --fin-serie-anterior: rgb(255 255 255 / 9%); --fin-linha-anterior: #6b6b75;
	--fin-grade: rgb(255 255 255 / 5%); --fin-base: rgb(255 255 255 / 14%);
}
:root[data-tema='claro'] {
	--fin-cat-1: #1d6fd8; --fin-cat-2: #7c3aed; --fin-cat-3: #0d9488; --fin-cat-4: #db2777;
	--fin-cat-5: #b98900; --fin-cat-6: #4d8a0c; --fin-cat-7: #e0590b; --fin-cat-8: #8d6440;
	--fin-cat-outros: #8b8b94;
	--fin-pessoa-1: #1d6fd8; --fin-pessoa-2: #db2777; --fin-pessoa-3: #8b8b94;
	--fin-serie: #1d6fd8; --fin-serie-anterior: rgb(24 24 27 / 8%); --fin-linha-anterior: #a1a1aa;
	--fin-grade: rgb(24 24 27 / 6%); --fin-base: rgb(24 24 27 / 16%);
}

.tela-financeiro .topo > * { max-width: 1240px; }
.tela-financeiro .conteudo { max-width: 1272px; display: flex; flex-direction: column; gap: 14px; }
.fin-novo { min-height: 38px; padding: 0 14px; font-size: 14px; margin-left: 8px; }

/* Barra de período: Semana/Mês/Ano · ‹ novembro de 2026 › · ações */
.fin-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fin-periodos { grid-template-columns: repeat(3, 1fr); margin: 0; width: 240px; }
.fin-navegar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.fin-navegar strong { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; padding: 0 4px; white-space: nowrap; }
.fin-navegar strong::first-letter { text-transform: uppercase; }
.fin-navegar .icone-botao[disabled] { opacity: 0.3; pointer-events: none; }
.fin-hoje { margin-left: 4px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--acento-borda); background: var(--acento-fundo); color: var(--acento-texto); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fin-acoes { display: flex; gap: 8px; margin-left: auto; }
.fin-acoes .botao { min-height: 36px; font-size: 13.5px; padding: 0 12px; }
.fin-acoes .botao[disabled] { opacity: 0.45; cursor: default; }

/* KPIs */
.fin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fin-kpi {
	min-width: 0; padding: 16px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda);
	display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--texto); font: inherit;
}
.fin-kpi[data-destaque='alerta'] { border-color: color-mix(in srgb, var(--ambar) 40%, transparent); }
.fin-kpi[data-destaque='estourou'] { border-color: var(--perigo-borda); }
.fin-kpi-rotulo { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 550; color: var(--texto-2); }
.fin-kpi-rotulo .i { width: 15px; height: 15px; color: var(--texto-3); }
.fin-kpi-valor { font-size: 28px; font-weight: 720; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-kpi[data-destaque='estourou'] .fin-kpi-valor { color: var(--perigo-texto); }
.fin-kpi-detalhe { font-size: 12.5px; }
.fin-kpi .fin-delta { white-space: normal; align-items: flex-start; line-height: 1.3; }
.fin-kpi .fin-delta .i { margin-top: 1px; flex: none; }
.fin-kpi-detalhe-texto { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; color: var(--texto-2); font-size: 12.5px; line-height: 1.35; min-width: 0; }
.fin-kpi-nota { font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }
.fin-kpi-vazio { cursor: pointer; border-style: dashed; justify-content: center; transition: border-color 0.15s, background 0.15s; }
.fin-kpi-vazio strong { font-size: 16px; font-weight: 650; color: var(--acento-texto); }
@media (hover: hover) { .fin-kpi-vazio:hover { border-color: var(--acento-borda); background: var(--acento-fundo); } }

/* Variação: subiu = atenção (laranja), caiu = bom (verde) */
.fin-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 550; white-space: nowrap; color: var(--texto-3); }
.fin-delta .i { width: 14px; height: 14px; }
.fin-delta.subiu { color: var(--ambar-texto); }
.fin-delta.caiu { color: var(--verde-texto); }

/* Barra de uso (orçamento): a marquinha vertical é quanto do período já passou */
.fin-trilho { position: relative; height: 8px; margin-top: 4px; border-radius: 999px; background: var(--superficie-3); }
.fin-trilho > span { display: block; height: 100%; border-radius: inherit; background: var(--verde); transition: width 0.5s var(--suave); }
.fin-trilho[data-estado='alerta'] > span { background: var(--ambar); }
.fin-trilho[data-estado='estourou'] > span { background: var(--perigo); }
.fin-trilho > i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--texto-2); }

/* Insights */
.fin-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.fin-insights p { margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }
.fin-insights p .i { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--acento-icone); }
.fin-insights p[data-tipo='subiu'] .i { color: var(--ambar-texto); }
.fin-insights p[data-tipo='caiu'] .i { color: var(--verde-texto); }
.fin-insights b { color: var(--texto); font-weight: 650; }

/* Grade dos cartões */
.fin-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fin-cartao { min-width: 0; padding: 18px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 14px; }
.fin-largo { grid-column: 1 / -1; }
.fin-coluna { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fin-grade { align-items: start; }
.fin-cartao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.fin-cartao-cabeca h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.fin-cartao-cabeca h3 .i { width: 17px; height: 17px; color: var(--acento-icone); }
.fin-cartao-cabeca > span { font-size: 12.5px; color: var(--texto-3); }
.fin-cartao-cabeca > span b { color: var(--texto-2); font-weight: 600; }
.fin-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--acento-texto); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.fin-link .i { width: 14px; height: 14px; }
.fin-nota { margin: 0; font-size: 12.5px; color: var(--texto-3); }

/* Legenda */
.fin-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--texto-2); }
.fin-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fin-traco { display: inline-block; flex: none; width: 16px; height: 0; border-top: 2.5px solid var(--fin-serie); border-radius: 2px; }
.fin-traco.tracejado { border-top: 2px dashed var(--fin-linha-anterior); }
.fin-traco.projecao { border-top: 2px dashed var(--fin-serie); opacity: 0.7; }
.fin-traco.orcamento { border-top: 2px dashed var(--ambar); }
.fin-traco.media { border-top: 2px dashed var(--texto-3); }
.fin-traco.fantasma { height: 10px; width: 12px; border: 0; border-radius: 3px; background: var(--fin-serie-anterior); outline: 1px solid var(--borda-forte); }

/* Gráficos */
.fin-grafico { position: relative; min-height: 220px; touch-action: pan-y; }
.fin-svg { display: block; overflow: visible; }
.fin-grade-linha { stroke: var(--fin-grade); stroke-width: 1; }
.fin-base { stroke: var(--fin-base); stroke-width: 1; }
.fin-eixo { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.fin-barra { fill: var(--fin-serie); transition: opacity 0.15s; }
.fin-barra.apagada { opacity: 0.38; }
.fin-barra-anterior { fill: var(--fin-serie-anterior); }
.fin-realce { fill: var(--realce); pointer-events: none; }
.fin-clicavel { cursor: pointer; }
.fin-referencia { stroke: var(--texto-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fin-referencia.orcamento { stroke: var(--ambar); }
.fin-referencia-texto { fill: var(--texto-3); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; }
.fin-referencia-texto.orcamento { fill: var(--ambar-texto); }
.fin-linha { fill: none; stroke: var(--fin-serie); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fin-linha-anterior { fill: none; stroke: var(--fin-linha-anterior); stroke-width: 2; stroke-dasharray: 5 5; stroke-linejoin: round; }
.fin-linha-projecao { stroke: var(--fin-serie); stroke-width: 2; stroke-dasharray: 3 5; opacity: 0.7; stroke-linecap: round; }
.fin-gradiente-topo { stop-color: var(--fin-serie); stop-opacity: 0.26; }
.fin-gradiente-base { stop-color: var(--fin-serie); stop-opacity: 0; }
.fin-ponto-final { fill: var(--fin-serie); stroke: var(--superficie); stroke-width: 2.5; }
.fin-mira { stroke: var(--borda-hover); stroke-width: 1; pointer-events: none; }

.fin-dica {
	position: absolute; z-index: 3; pointer-events: none; min-width: 150px; padding: 9px 11px; border-radius: 10px;
	background: var(--elevada); border: 1px solid var(--borda-forte); box-shadow: 0 10px 28px rgb(0 0 0 / 28%);
	display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--texto-2); white-space: nowrap;
}
.fin-dica strong { color: var(--texto); font-size: 13px; }
.fin-dica strong::first-letter { text-transform: uppercase; }
.fin-dica span { display: flex; align-items: center; gap: 6px; }
.fin-dica b { margin-left: auto; padding-left: 10px; color: var(--texto); font-variant-numeric: tabular-nums; }
.fin-dica .fin-delta b { margin: 0; padding: 0; color: inherit; }
.fin-dica-acao { font-size: 11px; color: var(--acento-texto); }

/* Rosca + lista de categorias */
.fin-rosca-caixa { display: grid; place-items: center; }
.fin-rosca { width: min(100%, 210px); height: auto; }
.fin-rosca-trilho { stroke: var(--superficie-2); }
.fin-rosca-fatia { stroke-linecap: butt; transition: stroke-width 0.15s, opacity 0.15s; cursor: default; }
.fin-rosca:hover .fin-rosca-fatia:not(.ativa) { opacity: 0.45; }
.fin-rosca-fatia.ativa { stroke-width: 29px; }
.fin-rosca-valor { fill: var(--texto); font-size: 22px; font-weight: 720; letter-spacing: -0.03em; }
.fin-rosca-rotulo { fill: var(--texto-3); font-size: 11.5px; }

.fin-ponto { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cor); }
.fin-cat-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fin-cat {
	width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'nome spark valor' 'barra barra barra' 'orc orc orc';
	align-items: center; gap: 6px 12px; padding: 10px 10px; border: 0; border-radius: 10px; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
	transition: background 0.15s;
}
@media (hover: hover) { .fin-cat:hover { background: var(--realce); } }
.fin-cat[aria-pressed='true'] { background: var(--acento-fundo); }
.fin-cat:focus-visible { outline: none; box-shadow: var(--foco); }
.fin-cat-nome { grid-area: nome; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-cat-nome strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-cat-nome small { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.fin-sparkline { grid-area: spark; width: 84px; height: 26px; }
.fin-sparkline polyline { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.fin-cat-valor { grid-area: valor; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 96px; }
.fin-cat-valor strong { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fin-cat-valor .fin-delta { font-size: 11px; }
.fin-cat-barra { grid-area: barra; height: 4px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.fin-cat-barra span { display: block; height: 100%; border-radius: inherit; }
.fin-cat-orc { grid-area: orc; font-size: 11.5px; color: var(--verde-texto); }
.fin-cat-orc[data-estado='alerta'] { color: var(--ambar-texto); }
.fin-cat-orc[data-estado='estourou'] { color: var(--perigo-texto); }

/* Dia da semana e quem gastou */
.fin-semana { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fin-semana li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 92px; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-2); }
.fin-semana b { text-align: right; color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-semana-trilho { height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.fin-semana-trilho span { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--fin-serie) 55%, transparent); }
.fin-semana li[data-topo='true'] .fin-semana-trilho span { background: var(--fin-serie); }
.fin-semana li[data-topo='true'] > span:first-child { color: var(--texto); font-weight: 650; }
.fin-pessoas-barra { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; }
.fin-pessoas-barra span { height: 100%; }
.fin-pessoas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fin-pessoas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 100px; align-items: center; gap: 10px; font-size: 13.5px; }
.fin-pessoas li > span:nth-child(3) { color: var(--texto-3); font-size: 12.5px; }
.fin-pessoas b { text-align: right; font-variant-numeric: tabular-nums; }

/* Orçamentos */
.fin-orcamentos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fin-orc-topo { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.fin-orc-topo .i { width: 15px; height: 15px; color: var(--texto-3); }
.fin-orc-topo > span:last-child { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.fin-orc-topo small { color: var(--texto-3); font-weight: 450; }
.fin-orc-nota { display: block; margin-top: 4px; font-size: 11.5px; color: var(--texto-3); }
.fin-orc-nota[data-estado='alerta'] { color: var(--ambar-texto); }
.fin-orc-nota[data-estado='estourou'] { color: var(--perigo-texto); }

.fin-vazio-bloco { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 12px; color: var(--texto-3); font-size: 13.5px; line-height: 1.45; }
.fin-vazio-bloco > .i { color: var(--texto-3); }
.fin-vazio b { color: var(--texto); }

/* Lançamentos */
.fin-busca { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); min-width: min(100%, 300px); }
.fin-busca .i { color: var(--texto-3); flex: none; }
.fin-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--texto); font: inherit; font-size: 14px; }
.fin-busca:focus-within { border-color: var(--foco-campo-borda); box-shadow: var(--foco-campo); }
.fin-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.fin-chips::-webkit-scrollbar { display: none; }
.fin-chip {
	flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--borda-forte); background: var(--superficie-2); color: var(--texto-2); font: inherit; font-size: 12.5px; font-weight: 550; white-space: nowrap;
}
.fin-chip[aria-pressed='true'] { background: var(--acento-fundo); border-color: var(--acento-borda); color: var(--acento-texto); }
.fin-lancamentos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fin-dia ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fin-dia-cabeca { display: flex; justify-content: space-between; padding: 0 10px 6px; font-size: 12px; font-weight: 600; color: var(--texto-3); border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.fin-dia-cabeca b { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.fin-lanc { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) { .fin-lanc:hover { background: var(--realce); } }
.fin-lanc:focus-visible { outline: none; box-shadow: var(--foco); }
.fin-lanc-icone { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); }
.fin-lanc-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fin-lanc-texto strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-lanc-texto strong::first-letter { text-transform: uppercase; }
.fin-lanc-texto small { font-size: 12px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-lanc-valor { flex: none; font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Folhas: lançar/editar e orçamento */
.fin-form { display: flex; flex-direction: column; gap: 12px; }
.fin-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.fin-campo > span { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.fin-campo .campo, .fin-form-categorias .campo { width: 100%; padding: 0 14px; min-height: 46px; }
.fin-form-categorias .campo { min-height: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.fin-campo-valor { font-size: 22px !important; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fin-form-linha { display: flex; gap: 10px; }
.fin-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.fin-form-titulo { margin: 6px 0 0; font-size: 13px; font-weight: 650; color: var(--texto-2); }
.fin-form-categorias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fin-form-categorias li { display: grid; grid-template-columns: minmax(0, 1fr) 140px; align-items: center; gap: 10px; }
.fin-form-categorias li > span { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.fin-form-categorias small { margin-left: auto; color: var(--texto-3); font-size: 11.5px; white-space: nowrap; }
.fin-form-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.fin-form-acoes .botao { flex: 1; }
.fin-apagar { color: var(--perigo-texto); }
.fin-apagar .i { color: var(--perigo-texto); }
.fin-apagar[data-armado] { background: var(--perigo-fundo); border-color: var(--perigo-borda); }

@media (max-width: 1100px) {
	.fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.fin-grade { grid-template-columns: minmax(0, 1fr); }
	.fin-acoes { margin-left: 0; }
}
@media (max-width: 560px) {
	.fin-periodos { width: 100%; }
	.fin-navegar { flex: 1; }
	.fin-navegar strong { flex: 1; text-align: center; font-size: 16px; }
	.fin-acoes { width: 100%; }
	.fin-acoes .botao { flex: 1; }
	.fin-novo span { display: none; }
	.fin-novo { width: 40px; padding: 0; }
	.fin-kpi { padding: 13px; }
	.fin-kpi-valor { font-size: 22px; }
	.fin-cartao { padding: 14px; }
	.fin-sparkline { display: none; }
	.fin-cat { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nome valor' 'barra barra' 'orc orc'; }
	.fin-pessoas li { grid-template-columns: auto minmax(0, 1fr) auto 84px; }
	.fin-form-linha { flex-direction: column; }
	.fin-form-categorias li { grid-template-columns: minmax(0, 1fr) 110px; }
	.fin-busca { min-width: 100%; }
}
@media (max-width: 340px) {
	.fin-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Aura da Astra (web/js/astra-aura.js) ──────────────────────────────────
   Orbe no canto inferior esquerdo (ao lado da lateral no desktop, acima das abas no celular) que abre
   o "corpo" da Astra para conversar por voz. Sempre escuro (é o espaço), nos dois temas. */
.astra-aura { --aa-roxo: #a855f7; --aa-lilas: #e9d5ff; --aa-azul: #6366f1; }
body.deslogado .astra-aura, .astra-aura.escondida { display: none; }

/* Orbe */
.aa-orbe {
	position: fixed; z-index: 45; left: calc(var(--largura-lateral) + 20px); bottom: calc(env(safe-area-inset-bottom) + var(--altura-abas) + 20px);
	width: 62px; height: 62px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent;
	display: grid; place-items: center; isolation: isolate;
	transition: transform 0.35s var(--suave), opacity 0.25s;
}
.aa-orbe > span { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.aa-orbe-nucleo {
	inset: 9px !important;
	/* O rosto dela dentro do orbe (Forma Essência): a mesma arte do palco, recortada nos olhos. */
	background: radial-gradient(circle at 50% 50%, transparent 45%, rgb(30 16 80 / 70%) 85%, #0b0620 100%), url(/icones/astra/astra-base.webp) 50% 33% / 330% auto no-repeat, #0b0620;
	box-shadow: 0 0 18px 4px rgb(168 85 247 / 55%), 0 0 42px 10px rgb(99 102 241 / 28%), inset 0 0 12px rgb(255 255 255 / 35%);
	animation: aaRespira 3.2s ease-in-out infinite;
}
.aa-orbe-anel { border: 1.5px solid transparent; }
.aa-orbe-anel.um { inset: 4px; border-top-color: rgb(233 213 255 / 85%); border-right-color: rgb(168 85 247 / 50%); animation: aaGira 4.5s linear infinite; filter: drop-shadow(0 0 4px #a855f7); }
.aa-orbe-anel.dois { inset: -2px; border-bottom-color: rgb(129 140 248 / 80%); border-left-color: rgb(99 102 241 / 30%); animation: aaGira 7s linear infinite reverse; transform: rotateX(65deg); filter: drop-shadow(0 0 4px #6366f1); }
.aa-orbe-faisca {
	inset: -14px !important; z-index: -1;
	background: conic-gradient(from 0deg, transparent, rgb(168 85 247 / 35%), transparent 30%, rgb(99 102 241 / 30%), transparent 60%, rgb(192 132 252 / 30%), transparent);
	filter: blur(10px); animation: aaGira 9s linear infinite; opacity: 0.85;
}
@media (hover: hover) { .aa-orbe:hover { transform: scale(1.08); } }
.aa-orbe:active { transform: scale(0.94); }
.aa-orbe:focus-visible { outline: none; box-shadow: var(--foco); }
/* Em conversa e minimizada: a aura pulsa mais forte (ela continua ouvindo). */
.astra-aura.em-conversa .aa-orbe-nucleo { animation: aaRespira 1.2s ease-in-out infinite; box-shadow: 0 0 22px 7px rgb(168 85 247 / 75%), 0 0 60px 16px rgb(99 102 241 / 40%), inset 0 0 12px rgb(255 255 255 / 45%); }
.astra-aura.aberta .aa-orbe { opacity: 0; transform: scale(2.4); pointer-events: none; }

@keyframes aaGira { to { rotate: 360deg; } }
@keyframes aaRespira { 50% { transform: scale(1.08); filter: brightness(1.2); } }

/* Palco: o corpo */
.aa-palco {
	position: fixed; z-index: 55; left: calc(var(--largura-lateral) + 20px); bottom: calc(env(safe-area-inset-bottom) + var(--altura-abas) + 20px);
	width: min(420px, calc(100vw - var(--largura-lateral) - 40px)); height: min(680px, calc(100dvh - 40px));
	border-radius: 26px; overflow: hidden; color: #f3eaff;
	background: radial-gradient(120% 80% at 50% 38%, #1b1240 0%, #0a0820 45%, #04030c 100%);
	border: 1px solid rgb(168 85 247 / 28%);
	box-shadow: 0 30px 80px -20px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 3%) inset, 0 0 calc(30px + var(--aa-fala, 0) * 50px) rgb(124 58 237 / calc(0.25 + var(--aa-fala, 0) * 0.35));
	display: flex; flex-direction: column;
	transform-origin: 31px calc(100% - 31px); transform: scale(0.15); opacity: 0;
	transition: transform 0.42s var(--suave), opacity 0.3s;
}
.aa-palco.visivel { transform: none; opacity: 1; }
.aa-palco[hidden] { display: none; }
.aa-nebulosa { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.aa-topo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0 20px; }
.aa-nome { display: flex; flex-direction: column; gap: 1px; }
.aa-nome b { font-size: 15px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: #f5ecff; text-shadow: 0 0 12px rgb(168 85 247 / 70%); }
.aa-nome small { font-size: 12px; color: rgb(233 213 255 / 70%); letter-spacing: 0.02em; transition: color 0.2s; }
.aa-palco[data-estado='falando'] .aa-nome small { color: #e9d5ff; }
.aa-palco[data-estado='escutando'] .aa-nome small { color: #a5b4fc; }

.aa-botao {
	width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgb(233 213 255 / 14%); cursor: pointer;
	display: grid; place-items: center; background: rgb(255 255 255 / 5%); color: #e9d5ff; backdrop-filter: blur(8px);
	transition: background 0.15s, transform 0.12s;
}
.aa-botao .i { color: inherit; }
.aa-botao.grande { width: 52px; height: 52px; border-radius: 50%; }
.aa-botao.perigo { background: rgb(229 72 77 / 85%); border-color: transparent; color: #fff; }
.aa-botao[aria-pressed='true'] { background: rgb(233 213 255 / 90%); color: #1e1050; }
@media (hover: hover) { .aa-botao:hover { background: rgb(255 255 255 / 12%); } .aa-botao.perigo:hover { background: #e5484d; } }
.aa-botao:active { transform: scale(0.94); }
.aa-botao:focus-visible { outline: none; box-shadow: 0 0 0 2px #0a0820, 0 0 0 4px #a855f7; }


.aa-legenda {
	position: relative; z-index: 1; margin: 0 20px; min-height: 42px; max-height: 64px; overflow: hidden;
	text-align: center; font-size: 14px; line-height: 1.45; color: rgb(243 234 255 / 88%); text-wrap: balance;
	text-shadow: 0 1px 10px rgb(0 0 0 / 80%);
}
.aa-legenda[data-quem='voce'] { color: #c7d2fe; font-style: italic; }
.aa-acoes { position: relative; z-index: 1; display: flex; justify-content: center; gap: 18px; padding: 14px 0 20px; }

/* Retrato: a arte cobre o palco (largura e altura vêm do palco: container query), com as luzes por cima.
   Escalada para mostrar da cabeça à estrela do peito; o resto fica sob o degradê de baixo. */
.aa-palco { container-type: size; }
.aa-corpo { position: absolute; inset: 0; perspective: 1100px; overflow: hidden; display: block; }
.aa-retrato {
	position: absolute; top: 0; left: 50%; height: min(100cqh, 158cqw); aspect-ratio: 1024 / 1536;
	transform: translateX(-50%);
	-webkit-mask-image: radial-gradient(120% 92% at 50% 40%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 92% at 50% 40%, #000 62%, transparent 100%);
}
.aa-retrato img, .aa-gl { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.aa-gl[hidden], .aa-retrato img[hidden] { display: none; }
.aa-nebulosa { z-index: 1; mix-blend-mode: screen; }
/* Degradês para o texto e os botões ficarem legíveis sobre a arte */
.aa-palco::before, .aa-palco::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.aa-palco::before { top: 0; height: 90px; background: linear-gradient(#04030c 10%, rgb(4 3 12 / 0%)); }
.aa-palco::after { bottom: 0; height: 27%; background: linear-gradient(rgb(4 3 12 / 0%), rgb(4 3 12 / 72%) 40%, #04030c 80%); }
.aa-topo, .aa-legenda, .aa-acoes { z-index: 2; }
.aa-legenda { margin-top: auto; }
.aa-palco { background: #04030c; }

/* Celular: o corpo ocupa a tela */
@media (max-width: 640px) {
	.aa-orbe { left: 16px; width: 56px; height: 56px; bottom: calc(env(safe-area-inset-bottom) + var(--altura-abas) + 28px); }
	.aa-palco { left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); transform-origin: 44px calc(100% - 120px); }
	.aa-legenda { font-size: 15px; }
	.aa-retrato { top: env(safe-area-inset-top); height: min(100cqh, 192cqw); }
	.aa-palco::after { height: 30%; }
}

/* Quem pediu menos movimento: sem giro nem respiração (a reação à voz continua, é a função). */
:root[data-movimento='desligado'] .aa-orbe > span, :root[data-movimento='desligado'] .aa-circuito { animation: none; }
@media (prefers-reduced-motion: reduce) { :root:not([data-movimento='ligado']) .aa-orbe > span, :root:not([data-movimento='ligado']) .aa-circuito { animation: none; } }