/*
 * 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 = dourado da logo OtavioDS (#FFD086, public/*.png): ação principal, seleção (filtro,
 *   aba, item da lateral), contadores, foco e destaques "para você". Texto em cima do dourado
 *   é escuro (--sobre-acento), nunca branco (o dourado é claro);
 * - 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: #09090b;
	--superficie: #111113;
	--superficie-2: #18181b;
	--superficie-3: #212125;
	--elevada: #151517; /* 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: #ffd086;
	--acento-forte: #ffdcaa;
	--acento-texto: #ffd086;
	--acento-fundo: rgb(255 208 134 / 11%);
	--acento-borda: rgb(255 208 134 / 30%);
	--sobre-acento: #1c1405; /* texto/ícone em cima do dourado (contraste ~13:1) */
	/* 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 dourado sólido de 2px (~13:1; o dourado translúcido
	   dava 1.5:1 e sumia). O vão separa o anel dos botões dourados. */
	--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: #ffd086;
	/* 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: #0c0c0e;
	/* Kanban (computador): degraus de luminância — separa coluna e card por contraste, não por moldura. */
	--coluna-fundo: #0c0c0e; /* = --lateral-fundo */
	--coluna-borda: rgb(255 255 255 / 4%);
	--card-kanban: #131316;
	--sombra-card: 0 1px 2px rgb(0 0 0 / 35%);
	--sombra-voo: 0 18px 40px -16px rgb(0 0 0 / 85%); /* card "erguido" voando entre colunas */
	color-scheme: dark;
}

/* ─── Cores: tema CLARO ─────────────────────────────────────────────────────
   Mesmas variáveis, mesma lógica: dourado da marca como PREENCHIMENTO (botão principal, chips,
   selos, sempre com texto escuro por cima) e um dourado escuro para TEXTO/ÍCONE (o dourado claro
   sobre branco some). Textos com ≥4.5:1 (WCAG AA) sobre fundo e superfícies. */
: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: #f6c15b;
	--acento-forte: #f3b445;
	--acento-texto: #8f5b00;
	--acento-icone: #b87a00;
	--acento-fundo: rgb(246 193 91 / 18%);
	--acento-borda: rgb(214 150 40 / 45%);
	--sobre-acento: #1c1405;
	--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%);
	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), 400px); height: var(--altura-abas);
	/* 3 colunas do quadro + atalho do Terminal */
	display: grid; grid-template-columns: repeat(4, 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) / 4); 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; }
.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%; }