/* ===== in-app.css · design system LB in 1.9.1 (dcbf845) ===== */
/* LB in Design System · kit de produto (in-app-*)
 *
 * Telas de sistema: moldura (barra, trilho lateral, ⌘K, escopo), painéis, tabelas, formulários,
 * conta e permissões, acesso (entrar, código, convite) e retorno (aviso, faixa, confirmação, gaveta,
 * vazio, carregando, erro). Depende de in-tokens.css e in-kit.css carregados antes. Só papéis do tema:
 * funciona no claro e no escuro sem nada a mais. Documentação no grupo "Produto" do site.
 *
 * Regras que valem para todo o arquivo:
 * - Cor só por papel (--in-texto, --in-superficie, --in-app-*), nunca a escala direto num componente.
 *   A moldura (barra e trilho) leva a classe in-escuro no HTML: fica navy 900 nos dois temas.
 * - Status sempre com ícone e palavra; a cor vem dos papéis --in-app-sucesso, -atencao, -erro, -info.
 * - Texto em Mona Sans; número, código e data em Geist Mono com algarismos tabulares (.in-app-num).
 * - Densidade por atributo: data-densidade="confortavel" | "compacta" em qualquer contêiner.
 * - Ícones: lucide, traço 1,75, 20 px (.in-app-icone). Comportamento: in-app.js, por data-app.
 */

/* ---------- Papéis do produto · claro ---------- */
:root,
.in-claro,
[data-tema="claro"] {
  --in-app-fundo: var(--in-papel-100);
  --in-app-cartao: var(--in-papel-0);
  --in-app-afundado: var(--in-papel-50);
  --in-app-ativo: var(--in-papel-0);
  --in-app-hover: rgba(15, 28, 34, 0.045);
  --in-app-selecao: var(--in-laranja-50);
  --in-app-selecao-borda: var(--in-laranja-200);
  --in-app-esqueleto: rgba(15, 28, 34, 0.075);
  --in-app-esqueleto-luz: rgba(255, 255, 255, 0.55);
  --in-app-veu: rgba(8, 19, 24, 0.48);
  --in-app-sombra: 0 1px 2px rgba(8, 19, 24, 0.08), 0 24px 48px -24px rgba(8, 19, 24, 0.42);
  --in-app-destaque-fundo: var(--in-laranja-50);
  --in-app-destaque-borda: var(--in-laranja-200);
  --in-app-sucesso: var(--in-sucesso);  --in-app-sucesso-fundo: var(--in-sucesso-fundo);  --in-app-sucesso-borda: var(--in-sucesso-borda);
  --in-app-atencao: var(--in-atencao);  --in-app-atencao-fundo: var(--in-atencao-fundo);  --in-app-atencao-borda: var(--in-atencao-borda);
  --in-app-erro: var(--in-erro);        --in-app-erro-fundo: var(--in-erro-fundo);        --in-app-erro-borda: var(--in-erro-borda);
  --in-app-info: var(--in-info);        --in-app-info-fundo: var(--in-info-fundo);        --in-app-info-borda: var(--in-info-borda);
  --in-app-neutro: var(--in-navy-700);  --in-app-neutro-fundo: var(--in-navy-50);         --in-app-neutro-borda: var(--in-navy-100);
  --in-app-perigo: var(--in-erro);
  --in-app-perigo-hover: color-mix(in srgb, var(--in-erro) 80%, var(--in-navy-950));
  --in-app-avatar-fundo: var(--in-navy-100);
  --in-app-avatar-texto: var(--in-navy-800);
}

/* ---------- Papéis do produto · escuro ---------- */
.in-escuro,
[data-tema="escuro"] {
  --in-app-fundo: var(--in-navy-900);
  --in-app-cartao: var(--in-navy-800);
  --in-app-afundado: color-mix(in srgb, var(--in-navy-900) 55%, var(--in-navy-800));
  --in-app-ativo: var(--in-navy-700);
  --in-app-hover: rgba(250, 248, 245, 0.055);
  --in-app-selecao: rgba(255, 105, 0, 0.13);
  --in-app-selecao-borda: rgba(255, 105, 0, 0.42);
  --in-app-esqueleto: rgba(250, 248, 245, 0.085);
  --in-app-esqueleto-luz: rgba(250, 248, 245, 0.07);
  --in-app-veu: rgba(4, 10, 13, 0.66);
  --in-app-sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 28px 56px -24px rgba(0, 0, 0, 0.7);
  --in-app-destaque-fundo: rgba(255, 105, 0, 0.1);
  --in-app-destaque-borda: rgba(255, 105, 0, 0.38);
  --in-app-sucesso: var(--in-sucesso-borda); --in-app-sucesso-fundo: color-mix(in srgb, var(--in-dado-3) 20%, transparent); --in-app-sucesso-borda: color-mix(in srgb, var(--in-sucesso-borda) 32%, transparent);
  --in-app-atencao: var(--in-atencao-borda); --in-app-atencao-fundo: color-mix(in srgb, var(--in-dado-4) 20%, transparent); --in-app-atencao-borda: color-mix(in srgb, var(--in-atencao-borda) 32%, transparent);
  --in-app-erro: var(--in-erro-borda);       --in-app-erro-fundo: color-mix(in srgb, var(--in-dado-8) 20%, transparent);    --in-app-erro-borda: color-mix(in srgb, var(--in-erro-borda) 32%, transparent);
  --in-app-info: var(--in-info-borda);       --in-app-info-fundo: color-mix(in srgb, var(--in-dado-1) 22%, transparent);    --in-app-info-borda: color-mix(in srgb, var(--in-info-borda) 32%, transparent);
  --in-app-neutro: var(--in-navy-100);       --in-app-neutro-fundo: rgba(250, 248, 245, 0.07);                              --in-app-neutro-borda: rgba(250, 248, 245, 0.16);
  --in-app-perigo: color-mix(in srgb, var(--in-erro) 84%, var(--in-papel-50));
  --in-app-perigo-hover: var(--in-erro);
  --in-app-avatar-fundo: var(--in-navy-600);
  --in-app-avatar-texto: var(--in-papel-50);
}

/* ---------- Base ---------- */
.in-app {
  --in-app-linha: 44px; --in-app-controle: 36px; --in-app-pad: 16px; --in-app-vao: 16px;
  /* Indicador (v1.6.2): respiro mínimo entre o valor e a borda, menor e maior tamanho do valor, e a largura
     mínima do cartão na fileira (abaixo dela a fileira quebra em mais linhas). */
  --in-app-kpi-respiro: 16px; --in-app-kpi-valor-min: 20px; --in-app-kpi-valor-max: 30px; --in-app-kpi-min: 14rem;
  font-family: var(--in-fonte); font-size: 14px; line-height: 1.45; color: var(--in-texto);
  -webkit-font-smoothing: antialiased;
}
[data-densidade="confortavel"] { --in-app-linha: 52px; --in-app-controle: 40px; --in-app-pad: 20px; --in-app-vao: 20px; }
[data-densidade="compacta"] { --in-app-linha: 36px; --in-app-controle: 32px; --in-app-pad: 12px; --in-app-vao: 12px; }
/* Resets com especificidade zero (:where nos dois lados): qualquer classe do kit vence, inclusive o
 * rótulo branco do in-btn laranja. */
:where(.in-app) :where(h1, h2, h3, h4, p, dl, dd, figure, blockquote) { margin: 0; }
:where(.in-app) :where(h1, h2, h3, h4) { text-wrap: balance; }
:where(.in-app) :where(p) { text-wrap: pretty; }
:where(.in-app) :where(button, input, select, textarea) { font: inherit; color: inherit; }
/* hidden sempre esconde, mesmo em componente com display próprio (cartão, divisória, painel). */
.in-app [hidden], [hidden].in-app { display: none !important; }
.in-app :where(:focus-visible) { outline: 2px solid var(--in-foco); outline-offset: 2px; }
.in-app-num { font-family: var(--in-fonte-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
/* Vírgula decimal em número grande: a fonte mono dá à vírgula uma casa inteira; o span aperta. */
.in-app-sep { margin-inline: -0.2em; }
.in-app-telao-kpi .in-app-sep { margin-inline: -0.1em; }
/* Texto só para o leitor de tela. É absoluto: todo contêiner do kit que recorta ou rola (overflow hidden, auto,
 * scroll) é position: relative, senão o texto toma um ancestral de fora como referência, escapa e alarga a página
 * (v1.6.1: uma tabela com campos vazios levou a página a 1261 px em 390). `container` não segura absoluto.
 * Contêiner novo do kit segue a mesma regra; a guarda é o teste mcp/test/kit.test.ts e scripts/verificacao/kit-estouro.mjs. */
.in-app-so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.in-app-icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.in-app-icone--p { width: 16px; height: 16px; }
.in-app-icone--g { width: 24px; height: 24px; }
.in-app-tecla { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--in-raio-s); border: 1px solid var(--in-borda-forte); background: var(--in-app-afundado); color: var(--in-texto-2); font: 500 11px/1 var(--in-fonte-mono); }
.in-app-rotulo { font: 500 11px/1.2 var(--in-fonte-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--in-texto-2); }
.in-app-link { padding: 0; border: 0; background: none; color: var(--in-link); font: inherit; font-weight: 560; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; cursor: pointer; }
.in-app-link:hover { text-decoration-color: currentColor; }

/* ---------- Botões no produto ----------
 * O botão é o do kit (in-btn). Dentro de .in-app ele segue a densidade: 36 px no padrão.
 * Principal: in-btn · contorno: in-btn in-btn--secundario · suave: in-app-btn--suave ·
 * fantasma: in-app-btn--fantasma · perigo: in-app-btn--perigo. Só ícone: in-app-icone-btn. */
.in-app .in-btn { min-height: var(--in-app-controle); padding: 0 16px; gap: 8px; font-size: 14px; white-space: nowrap; }
.in-app .in-btn .in-app-icone { width: 18px; height: 18px; margin-inline: -2px; }
.in-app-btn--suave { background: var(--in-app-afundado); color: var(--in-texto); border-color: var(--in-borda); }
.in-app-btn--suave:hover { background: var(--in-app-hover); border-color: var(--in-borda-forte); }
.in-app-btn--fantasma { background: transparent; color: var(--in-texto); border-color: transparent; }
.in-app-btn--fantasma:hover { background: var(--in-app-hover); }
.in-app-btn--perigo { background: var(--in-app-perigo); color: var(--in-branco); }
.in-app-btn--perigo:hover { background: var(--in-app-perigo-hover); }
.in-app-btn--largo { width: 100%; }
.in-app .in-btn:is([disabled], [aria-disabled="true"]) { background: var(--in-app-afundado); color: var(--in-texto-2); border-color: var(--in-borda); cursor: not-allowed; transform: none; }
/* Ocupado (aria-busy): o principal continua laranja, com o girando e o verbo no gerúndio ("Salvando…"). */
.in-app .in-btn[aria-busy="true"]:not(.in-btn--secundario, .in-app-btn--suave, .in-app-btn--fantasma, .in-app-btn--perigo) { background: var(--in-acao); color: var(--in-acao-texto); border-color: transparent; cursor: progress; }
.in-app .in-btn[aria-busy="true"] .in-app-girando { width: 14px; height: 14px; }
.in-app-icone-btn { display: inline-grid; place-items: center; width: var(--in-app-controle, 36px); height: var(--in-app-controle, 36px); flex: none; padding: 0; border: 1px solid transparent; border-radius: var(--in-raio-pilula); background: transparent; color: var(--in-texto-2); cursor: pointer; transition: background-color var(--in-duracao-rapida) var(--in-curva), color var(--in-duracao-rapida) var(--in-curva); }
.in-app-icone-btn:hover, .in-app-icone-btn[aria-expanded="true"] { background: var(--in-app-hover); color: var(--in-texto); }
.in-app-icone-btn--borda { border-color: var(--in-borda-forte); }

/* ---------- Moldura: barra, trilho e conteúdo ----------
 * <div class="in-app in-app-moldura" data-app="moldura">
 *   <header class="in-app-barra in-escuro">…</header>
 *   <div class="in-app-corpo"><nav class="in-app-trilho in-escuro">…</nav><main class="in-app-conteudo">…</main></div>
 * </div>
 * Recolhido: data-trilho="fechado". Celular (moldura com menos de 760 px): o trilho vira gaveta.
 * Embutida numa página (prévia, documentação): in-app-moldura--contida, com altura dada pelo pai. */
.in-app-moldura { --in-app-barra: 56px; --in-app-trilho: 248px; container: in-app-moldura / inline-size; box-sizing: border-box; inline-size: 100%; display: grid; grid-template-rows: var(--in-app-barra) minmax(0, 1fr); min-height: 100svh; background: var(--in-app-fundo); color: var(--in-texto); }
.in-app-moldura[data-trilho="fechado"] { --in-app-trilho: 68px; }
.in-app-moldura--contida { position: relative; height: 100%; min-height: 0; overflow: hidden; }
.in-app-moldura--contida .in-app-corpo { grid-template-rows: minmax(0, 1fr); }
.in-app-corpo { position: relative; display: grid; grid-template-columns: var(--in-app-trilho) minmax(0, 1fr); min-height: 0; transition: grid-template-columns var(--in-duracao-media) var(--in-curva); }

.in-app-barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: var(--in-app-barra); padding: 0 14px 0 18px; background: var(--in-superficie); color: var(--in-texto); border-bottom: 1px solid var(--in-borda); }
.in-app-marca { display: flex; align-items: center; gap: 12px; flex: none; color: inherit; text-decoration: none; }
.in-app-marca .in-logo { width: 72px; }
.in-app-marca span { padding-left: 12px; border-left: 1px solid var(--in-borda-forte); font: 500 10.5px/1 var(--in-fonte-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--in-texto-2); }
.in-app-barra-menu { display: none !important; }
.in-app-barra-fim { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.in-app-escopo { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border-radius: var(--in-raio-pilula); border: 1px solid var(--in-borda-forte); background: rgba(250, 248, 245, 0.04); color: var(--in-texto); font: 560 13.5px/1 var(--in-fonte); cursor: pointer; transition: border-color var(--in-duracao-rapida) var(--in-curva); }
.in-app-escopo:hover, .in-app-escopo[aria-expanded="true"] { border-color: var(--in-laranja); }
.in-app-escopo > .in-app-icone:first-child { color: var(--in-laranja); }
.in-app-escopo > .in-app-icone:last-child { width: 16px; height: 16px; color: var(--in-texto-2); }
.in-app-escopo small { font: 500 10px/1 var(--in-fonte-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--in-texto-2); }
.in-app-busca-abre { display: flex; align-items: center; gap: 10px; flex: 0 1 380px; min-width: 0; height: 36px; margin-left: 4px; padding: 0 8px 0 12px; border-radius: var(--in-raio-pilula); border: 1px solid var(--in-borda-forte); background: rgba(250, 248, 245, 0.04); color: var(--in-texto-2); font: 400 13.5px/1 var(--in-fonte); cursor: pointer; transition: border-color var(--in-duracao-rapida) var(--in-curva), color var(--in-duracao-rapida) var(--in-curva); }
.in-app-busca-abre:hover { border-color: var(--in-laranja); color: var(--in-texto); }
.in-app-busca-abre > span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-barra .in-app-icone-btn { position: relative; }
.in-app-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--in-raio-pilula); background: var(--in-laranja); color: var(--in-navy-950); font: 600 10px/16px var(--in-fonte-mono); text-align: center; }
.in-app-usuario { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 2px 10px 2px 2px; border: 1px solid transparent; border-radius: var(--in-raio-pilula); background: transparent; color: var(--in-texto); cursor: pointer; }
.in-app-usuario:hover, .in-app-usuario[aria-expanded="true"] { background: var(--in-app-hover); }
.in-app-usuario > span:not(.in-app-avatar) { font: 560 13.5px/1 var(--in-fonte); }

.in-app-trilho { position: sticky; top: var(--in-app-barra); height: calc(100svh - var(--in-app-barra)); z-index: 15; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 14px 10px 10px; background: var(--in-superficie); color: var(--in-texto); border-right: 1px solid var(--in-borda); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--in-navy-700) transparent; }
.in-app-moldura--contida .in-app-trilho { position: relative; top: 0; height: auto; }
.in-app-trilho-grupo { display: grid; gap: 2px; }
.in-app-trilho-secao { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.in-app-trilho-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; margin: 0 0 4px; padding: 0 4px 0 12px; font: 500 10px/1 var(--in-fonte-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--in-navy-300); }
.in-app-trilho-titulo button { padding: 5px 7px; border: 0; border-radius: var(--in-raio-s); background: none; color: var(--in-navy-200); font: 500 10px/1 var(--in-fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.in-app-trilho-titulo button:hover, .in-app-trilho-titulo button[aria-pressed="true"] { color: var(--in-texto); background: var(--in-app-hover); }
.in-app-trilho-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; padding: 0 10px 0 12px; border: 0; border-radius: var(--in-raio-m); background: transparent; color: var(--in-navy-100); font: 450 14px/1.2 var(--in-fonte); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--in-duracao-rapida) var(--in-curva), color var(--in-duracao-rapida) var(--in-curva); }
.in-app-trilho-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-trilho-item .in-app-icone { color: var(--in-navy-300); }
.in-app-trilho-item:hover { background: var(--in-app-hover); color: var(--in-texto); }
.in-app-trilho-item:hover .in-app-icone { color: var(--in-texto); }
.in-app-trilho-item[aria-current="page"] { background: var(--in-navy-800); color: var(--in-texto); font-weight: 600; }
.in-app-trilho-item[aria-current="page"] .in-app-icone { color: var(--in-laranja); }
.in-app-trilho-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.in-app-trilho-item[aria-disabled="true"] { cursor: default; color: var(--in-navy-300); }
.in-app-trilho-item[aria-disabled="true"]:hover { background: transparent; color: var(--in-navy-300); }
.in-app-trilho-item small { flex: none; padding: 3px 6px; border-radius: var(--in-raio-s); border: 1px solid var(--in-borda-forte); font: 500 9.5px/1 var(--in-fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--in-navy-200); }
.in-app-trilho-item .in-selo-ia { flex: none; }
.in-app-trilho-item .in-app-trilho-seta { width: 16px; height: 16px; transition: transform var(--in-duracao-rapida) var(--in-curva); }
.in-app-trilho-item[aria-expanded="true"] .in-app-trilho-seta { transform: rotate(90deg); }
.in-app-trilho-sub { display: grid; gap: 1px; margin: 2px 0 6px; padding: 0 0 0 44px; list-style: none; }
.in-app-trilho-sub[hidden] { display: none; }
.in-app-trilho-sub a { position: relative; display: block; padding: 7px 10px; border-radius: var(--in-raio-m); color: var(--in-navy-200); font-size: 13.5px; text-decoration: none; }
.in-app-trilho-sub a::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 1px; background: var(--in-borda-forte); }
.in-app-trilho-sub a:hover { background: var(--in-app-hover); color: var(--in-texto); }
.in-app-trilho-sub a[aria-current="page"] { color: var(--in-texto); font-weight: 600; }
.in-app-trilho-sub a[aria-current="page"]::before { width: 2px; left: -14.5px; background: var(--in-laranja); }
.in-app-trilho-sub-titulo { display: none; }
.in-app-trilho-fim { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--in-borda); }
.in-app-fav { display: flex; align-items: center; gap: 4px; }
.in-app-fav .in-app-trilho-item { flex: 1; min-width: 0; }
.in-app-ordena-botoes { display: none; gap: 2px; flex: none; }
.in-app-trilho-secao.ordenando .in-app-ordena-botoes { display: inline-flex; }
.in-app-ordena-botoes button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--in-borda-forte); border-radius: var(--in-raio-s); background: transparent; color: var(--in-texto); cursor: pointer; }
.in-app-ordena-botoes button:hover { border-color: var(--in-laranja); }
.in-app-ordena-botoes button[disabled] { opacity: 0.35; cursor: default; border-color: var(--in-borda); }
.in-app-ordena-botoes .in-app-icone { width: 14px; height: 14px; }

/* Trilho recolhido: só o ícone, com o nome em dica; a gaveta da área abre ao lado. */
.in-app-moldura[data-trilho="fechado"] .in-app-trilho { overflow: visible; }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-item { justify-content: center; padding: 0; gap: 0; }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-item > :not(.in-app-icone:first-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-titulo { justify-content: center; padding: 0; }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-titulo > * { display: none; }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-titulo::before { content: ""; width: 20px; height: 1px; background: var(--in-borda-forte); }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-item[data-dica]:is(:hover, :focus-visible)::after { content: attr(data-dica); position: absolute; left: calc(100% + 12px); top: 50%; z-index: 40; transform: translateY(-50%); padding: 6px 9px; border-radius: var(--in-raio-m); background: var(--in-navy-950); border: 1px solid var(--in-borda-forte); color: var(--in-papel-50); font: 500 12.5px/1 var(--in-fonte); white-space: nowrap; pointer-events: none; }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho li { position: relative; }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-sub { position: absolute; z-index: 45; top: -4px; left: calc(100% + 8px); margin: 0; padding: 6px; min-width: 210px; border-radius: var(--in-raio-l); background: var(--in-navy-900); border: 1px solid var(--in-borda-forte); box-shadow: var(--in-app-sombra); }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-sub a::before { display: none; }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-sub a[aria-current="page"] { background: var(--in-navy-800); }
.in-app-moldura[data-trilho="fechado"] .in-app-trilho-sub-titulo { display: block; padding: 8px 10px 6px; font: 500 10px/1 var(--in-fonte-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--in-navy-300); }
.in-app-moldura[data-trilho="fechado"] .in-app-ordena-botoes { display: none; }

.in-app-conteudo { min-width: 0; min-height: 0; padding: 28px clamp(16px, 3cqi, 36px) 40px; }
.in-app-moldura--contida .in-app-conteudo { position: relative; overflow-y: auto; overscroll-behavior: contain; }
.in-app-pagina { display: grid; gap: 24px; max-width: 1440px; margin-inline: auto; }
.in-app-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--in-borda); font: 400 12px/1.4 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-veu { display: none; }

/* Celular: o trilho vira gaveta por cima do conteúdo; a busca vira ícone. */
@container in-app-moldura (max-width: 760px) {
  .in-app-corpo { grid-template-columns: minmax(0, 1fr); }
  .in-app-barra { gap: 4px; padding: 0 8px 0 6px; }
  .in-app-barra-menu { display: inline-grid !important; }
  .in-app-marca { gap: 0; margin-right: 4px; }
  .in-app-marca .in-logo { width: 56px; }
  .in-app-marca span, .in-app-usuario > span:not(.in-app-avatar), .in-app-escopo small, .in-app-busca-abre > :not(.in-app-icone) { display: none; }
  .in-app-busca-abre { flex: none; width: 36px; margin: 0; padding: 0; justify-content: center; }
  .in-app-escopo { min-width: 0; max-width: clamp(96px, 31cqi, 150px); padding: 0 8px 0 10px; }
  .in-app-escopo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .in-app-barra-fim { gap: 0; }
  .in-app-usuario { padding: 2px; }
  .in-app-trilho { position: fixed; top: var(--in-app-barra); left: 0; bottom: 0; height: auto; width: min(304px, 86%); z-index: 30; transform: translateX(-102%); visibility: hidden; transition: transform var(--in-duracao-media) var(--in-curva), visibility 0s var(--in-duracao-media); box-shadow: var(--in-app-sombra); }
  .in-app-moldura--contida .in-app-trilho { position: absolute; top: 0; bottom: 0; }
  .in-app-menu-aberto .in-app-trilho { transform: none; visibility: visible; transition-delay: 0s; }
  .in-app-menu-aberto .in-app-veu { display: block; position: fixed; inset: var(--in-app-barra) 0 0 0; z-index: 25; background: var(--in-app-veu); border: 0; padding: 0; }
  .in-app-moldura--contida.in-app-menu-aberto .in-app-veu { position: absolute; inset: 0; }
  .in-app-moldura[data-trilho="fechado"] .in-app-trilho { overflow-y: auto; }
  .in-app-moldura[data-trilho="fechado"] .in-app-trilho-item { justify-content: flex-start; padding: 0 10px 0 12px; gap: 12px; }
  .in-app-moldura[data-trilho="fechado"] .in-app-trilho-item > :not(.in-app-icone:first-child) { position: static; width: auto; height: auto; overflow: hidden; clip-path: none; }
  .in-app-moldura[data-trilho="fechado"] .in-app-trilho-titulo { justify-content: space-between; padding: 0 4px 0 12px; }
  .in-app-moldura[data-trilho="fechado"] .in-app-trilho-titulo > * { display: revert; }
  .in-app-moldura[data-trilho="fechado"] .in-app-trilho-titulo::before { display: none; }
  .in-app-moldura[data-trilho="fechado"] .in-app-trilho-sub { position: static; min-width: 0; padding: 0 0 0 44px; margin: 2px 0 6px; border: 0; background: none; box-shadow: none; }
  .in-app-moldura[data-trilho="fechado"] .in-app-trilho-sub-titulo { display: none; }
  .in-app-trilho-fim [data-app-acao="trilho"] { display: none; }
  .in-app-conteudo { padding: 20px 16px 32px; }
}

/* ---------- Cabeçalho de página ---------- */
.in-app-cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.in-app-cabecalho-texto { display: grid; gap: 6px; min-width: 0; max-width: 72ch; }
.in-app-sobretitulo { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.2 var(--in-fonte-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--in-link); }
.in-app-sobretitulo::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.in-app-titulo { font: var(--in-peso-titulo) clamp(22px, 2.4vw, 28px)/1.15 var(--in-fonte); font-stretch: var(--in-largura-titulo); letter-spacing: -0.015em; }
.in-app-subtitulo { color: var(--in-texto-2); font-size: 14.5px; }
.in-app-cabecalho-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.in-app-migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 2px; padding: 0; list-style: none; font: 400 12.5px/1.3 var(--in-fonte); color: var(--in-texto-2); }
.in-app-migalhas li + li::before { content: "/"; margin-right: 6px; color: var(--in-texto-2); opacity: 0.6; }
.in-app-migalhas a { color: var(--in-texto-2); text-decoration: none; }
.in-app-migalhas a:hover { color: var(--in-texto); text-decoration: underline; }

/* ---------- Avatar, status, obra, ficha e verificado ---------- */
.in-app-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--in-app-avatar-fundo); color: var(--in-app-avatar-texto); font: 600 12px/1 var(--in-fonte); letter-spacing: 0.02em; text-transform: uppercase; }
.in-app-avatar--p { width: 24px; height: 24px; font-size: 10px; }
.in-app-avatar--g { width: 72px; height: 72px; font-size: 24px; font-weight: 640; }
.in-app-avatar--laranja { background: var(--in-laranja); color: var(--in-navy-950); }
.in-app-status { display: inline-flex; align-items: center; gap: 5px; width: max-content; max-width: 100%; padding: 3px 8px 3px 6px; border-radius: var(--in-raio-pilula); border: 1px solid var(--in-app-neutro-borda); background: var(--in-app-neutro-fundo); color: var(--in-app-neutro); font: 560 12px/1.3 var(--in-fonte); white-space: nowrap; }
.in-app-status .in-app-icone { width: 14px; height: 14px; stroke-width: 2; }
.in-app-status--sucesso { background: var(--in-app-sucesso-fundo); border-color: var(--in-app-sucesso-borda); color: var(--in-app-sucesso); }
.in-app-status--atencao { background: var(--in-app-atencao-fundo); border-color: var(--in-app-atencao-borda); color: var(--in-app-atencao); }
.in-app-status--erro { background: var(--in-app-erro-fundo); border-color: var(--in-app-erro-borda); color: var(--in-app-erro); }
.in-app-status--info { background: var(--in-app-info-fundo); border-color: var(--in-app-info-borda); color: var(--in-app-info); }
.in-app-status--destaque { background: var(--in-app-destaque-fundo); border-color: var(--in-app-destaque-borda); color: var(--in-texto); }
.in-app-status--destaque .in-app-icone { color: var(--in-link); }
.in-app-obra { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.in-app-obra::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.in-app-ficha { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 2px 3px 2px 3px; border-radius: var(--in-raio-pilula); border: 1px solid var(--in-borda-forte); background: var(--in-app-cartao); color: var(--in-texto); font: 500 13px/1.2 var(--in-fonte); }
.in-app-ficha:not(:has(.in-app-avatar)) { padding-left: 10px; }
.in-app-ficha > span:not(.in-app-avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-ficha button { display: grid; place-items: center; width: 22px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: 0.75; cursor: pointer; }
.in-app-ficha button:hover { background: var(--in-app-hover); opacity: 1; }
.in-app-ficha button .in-app-icone { width: 14px; height: 14px; }
.in-app-ficha--erro { border-color: var(--in-app-erro-borda); background: var(--in-app-erro-fundo); color: var(--in-app-erro); }
.in-app-ficha--atencao { border-color: var(--in-app-atencao-borda); background: var(--in-app-atencao-fundo); color: var(--in-app-atencao); }
.in-app-verificado { display: inline-flex; align-items: center; gap: 4px; color: var(--in-app-sucesso); font: 560 12.5px/1 var(--in-fonte); white-space: nowrap; }
.in-app-verificado .in-app-icone { width: 16px; height: 16px; }

/* ---------- IA sempre marcada ---------- */
.in-app-ia { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--in-raio-l); border: 1px dashed var(--in-app-destaque-borda); background: var(--in-app-destaque-fundo); }
.in-app-ia-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 13px/1.3 var(--in-fonte); }
.in-app-ia-cab .in-selo-ia { vertical-align: 0; }
.in-app-ia-fonte { font: 400 12px/1.45 var(--in-fonte-mono); color: var(--in-texto-2); }

/* ---------- Cartão, grade e widget ---------- */
.in-app-cartao { min-width: 0; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda); background: var(--in-app-cartao); }
.in-app-grade { container: in-app-grade / inline-size; box-sizing: border-box; inline-size: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--in-app-vao); align-items: stretch; }
.in-app-grade > * { grid-column: span var(--col, 4); min-width: 0; }
/* Médio: até 4 colunas vira meia linha, acima de 4 vira linha inteira. Estreito: tudo em linha inteira. */
@container in-app-grade (max-width: 900px) { .in-app-grade > * { grid-column: span min(12, max(6, calc(var(--col, 4) * 6 - 18))); } }
@container in-app-grade (max-width: 560px) { .in-app-grade > * { grid-column: span 12; } }
.in-app-widget { display: flex; flex-direction: column; min-width: 0; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda); background: var(--in-app-cartao); }
.in-app-widget-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: var(--in-app-pad) var(--in-app-pad) 0; }
.in-app-widget-cab > div { display: grid; gap: 3px; min-width: 0; }
.in-app-widget-titulo { font: 600 14.5px/1.3 var(--in-fonte); }
.in-app-widget-sub { font-size: 12.5px; color: var(--in-texto-2); }
.in-app-widget-cab .in-app-icone-btn { width: 32px; height: 32px; margin: -6px -8px 0 0; }
.in-app-widget-corpo { flex: 1; display: grid; align-content: start; gap: 14px; min-width: 0; padding: 14px var(--in-app-pad) var(--in-app-pad); }
.in-app-widget-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px var(--in-app-pad); border-top: 1px solid var(--in-borda); font: 400 11.5px/1.35 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-widget-pe a { color: var(--in-link); }

/* KPI e número grande */
/* Indicador (v1.6.2). O valor nunca vaza, nunca é cortado e nunca vira reticências: valor financeiro se lê inteiro.
 * O tamanho segue a largura do PRÓPRIO cartão (container, unidade cqi), não a da janela: 10,2cqi cabe
 * "R$ 999.999.999,99" (17 caracteres em mono) com folga. Entre o valor e a borda fica sempre
 * --in-app-kpi-respiro. Cartões lado a lado vão na fileira .in-app-kpis, que quebra em mais linhas antes de
 * o cartão ficar estreito demais para o tamanho mínimo. Guarda: scripts/verificacao/kit-indicadores.mjs.
 * container sem largura própria encolhe num pai flex ou centralizado: por isso inline-size 100% e border-box. */
.in-app-kpi { container: in-app-kpi / inline-size; box-sizing: border-box; inline-size: 100%; display: grid; align-content: start; gap: 8px; min-width: 0; padding: var(--in-app-pad, 16px) max(var(--in-app-pad, 16px), var(--in-app-kpi-respiro, 16px)); border-radius: var(--in-raio-l); border: 1px solid var(--in-borda); background: var(--in-app-cartao); }
.in-app-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--in-app-kpi-min, 14rem)), 1fr)); gap: var(--in-app-vao, 16px); }
.in-app-kpi-rotulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; font: 500 12.5px/1.3 var(--in-fonte); color: var(--in-texto-2); overflow-wrap: anywhere; text-wrap: pretty; }
.in-app-kpi-rotulo > :not(.in-app-icone) { min-width: 0; }
.in-app-kpi-rotulo .in-app-icone { flex: none; width: 16px; height: 16px; }
.in-app-kpi-valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; min-width: 0; font: 500 clamp(var(--in-app-kpi-valor-min, 20px), 10.2cqi, var(--in-app-kpi-valor-max, 30px))/1.05 var(--in-fonte-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.06em; overflow-wrap: anywhere; }
.in-app-kpi-valor small { font: 500 13px/1 var(--in-fonte-mono); letter-spacing: 0; color: var(--in-texto-2); }
.in-app-kpi-contexto { min-width: 0; font-size: 12.5px; color: var(--in-texto-2); overflow-wrap: anywhere; text-wrap: pretty; }
.in-app-kpi--destaque { background: var(--in-app-destaque-fundo); border-color: var(--in-app-destaque-borda); }
.in-app-kpi--destaque .in-app-kpi-rotulo { color: var(--in-link); }
.in-app-kpi--forte { background: var(--in-navy-900); border-color: var(--in-navy-900); color: var(--in-papel-50); --in-texto: var(--in-papel-50); --in-texto-2: var(--in-navy-200); --in-link: var(--in-laranja); --in-app-sucesso: var(--in-sucesso-borda); --in-app-erro: var(--in-erro-borda); --in-app-atencao: var(--in-atencao-borda); }
.in-escuro .in-app-kpi--forte, [data-tema="escuro"] .in-app-kpi--forte { background: var(--in-navy-950); border-color: var(--in-borda-forte); }
.in-claro .in-app-kpi--forte { background: var(--in-navy-900); border-color: var(--in-navy-900); }
.in-app-delta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; font: 600 12.5px/1.3 var(--in-fonte); }
.in-app-delta .in-app-icone { width: 16px; height: 16px; stroke-width: 2; }
.in-app-delta span { font-weight: 400; color: var(--in-texto-2); }
.in-app-delta--bom { color: var(--in-app-sucesso); }
.in-app-delta--ruim { color: var(--in-app-erro); }
.in-app-delta--neutro { color: var(--in-texto-2); }
.in-app-numero { display: grid; gap: 10px; align-content: start; }
.in-app-numero-valor { font: 500 clamp(40px, 5vw, 64px)/0.95 var(--in-fonte-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.045em; }
.in-app-numero-valor small { margin-inline: 0.1em; font-size: 0.4em; letter-spacing: -0.01em; color: var(--in-texto-2); }
.in-app-numero-legenda { font-size: 13px; color: var(--in-texto-2); max-width: 40ch; }

/* Gráfico (SVG à mão ou recharts): séries pela paleta de dados, rótulo direto, grade discreta. */
.in-app-grafico { position: relative; display: grid; gap: 12px; min-width: 0; }
.in-app-grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.in-app-g-grade { stroke: var(--in-borda); stroke-width: 1; shape-rendering: crispEdges; }
.in-app-g-base { stroke: var(--in-borda-forte); stroke-width: 1; shape-rendering: crispEdges; }
.in-app-g-eixo { fill: var(--in-texto-2); font: 400 11px var(--in-fonte-mono); font-feature-settings: "tnum" 1; }
.in-app-g-rotulo { fill: var(--in-texto); font: 600 11.5px var(--in-fonte-mono); font-feature-settings: "tnum" 1; }
.in-app-g-hoje { stroke: var(--in-texto-2); stroke-width: 1; stroke-dasharray: 2 3; }
.in-app-g-1 { --cor: var(--in-dado-1); } .in-app-g-2 { --cor: var(--in-dado-2); } .in-app-g-3 { --cor: var(--in-dado-3); } .in-app-g-4 { --cor: var(--in-dado-4); }
.in-app-g-5 { --cor: var(--in-dado-5); } .in-app-g-6 { --cor: var(--in-dado-6); } .in-app-g-7 { --cor: var(--in-dado-7); } .in-app-g-8 { --cor: var(--in-dado-8); }
.in-app-g-barra { fill: var(--cor); }
.in-app-g-linha { fill: none; stroke: var(--cor); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.in-app-g-linha--prevista { stroke-dasharray: 5 5; stroke-width: 1.75; }
.in-app-g-area { fill: var(--cor); opacity: 0.1; }
.in-app-g-ponto { fill: var(--in-app-cartao); stroke: var(--cor); stroke-width: 2; }
.in-app-g-fatia { fill: none; stroke: var(--cor); }
.in-app-grafico [data-dica] { outline: none; }
.in-app-grafico [data-dica]:focus-visible { stroke: var(--in-foco); stroke-width: 2; }
.in-app-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--in-texto-2); }
.in-app-legenda li { display: inline-flex; align-items: center; gap: 7px; }
.in-app-legenda b { font: 500 12px var(--in-fonte-mono); color: var(--in-texto); }
.in-app-amostra { width: 10px; height: 10px; flex: none; border-radius: 2px; background: var(--cor, var(--in-dado-1)); }
.in-app-amostra--tracejada { height: 0; width: 16px; border-top: 2px dashed var(--cor, var(--in-dado-1)); border-radius: 0; background: none; }
.in-app-dica-grafico { position: absolute; z-index: 60; pointer-events: none; padding: 7px 10px; border-radius: var(--in-raio-m); background: var(--in-navy-950); border: 1px solid rgba(250, 248, 245, 0.16); color: var(--in-papel-50); font: 500 12px/1.35 var(--in-fonte-mono); white-space: nowrap; box-shadow: var(--in-app-sombra); transform: translate(-50%, calc(-100% - 10px)); }
.in-app-dica-grafico[hidden] { display: none; }

/* Previsto contra realizado: a barra do kit (in-progresso) e um traço no previsto. */
.in-app-meta { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.in-app-meta li { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; }
.in-app-meta-nome { display: grid; gap: 2px; min-width: 0; font-weight: 560; }
.in-app-meta-nome small { font: 400 11.5px/1.2 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-meta-barra { position: relative; display: block; min-width: 0; }
.in-app-meta-barra .in-progresso { display: block; }
.in-app-meta-barra .in-progresso { height: 14px; }
.in-app-meta-previsto { position: absolute; top: -5px; bottom: -5px; left: var(--previsto, 0%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--in-texto); }
.in-app-meta-numeros { display: grid; justify-items: end; gap: 3px; min-width: 96px; }
.in-app-meta-numeros b { font: 500 14px/1 var(--in-fonte-mono); font-feature-settings: "tnum" 1; }
.in-app-meta-numeros small { font: 400 11.5px/1.2 var(--in-fonte-mono); color: var(--in-texto-2); white-space: nowrap; }
@container (max-width: 520px) { .in-app-meta li { grid-template-columns: minmax(0, 1fr) auto; } .in-app-meta-barra { grid-column: 1 / -1; grid-row: 2; } }

/* Segmentado (período, densidade, tema): role="radiogroup" com botões role="radio". */
.in-app-segmento { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--in-raio-pilula); border: 1px solid var(--in-borda); background: var(--in-app-afundado); }
.in-app-segmento > button { display: inline-flex; align-items: center; gap: 6px; min-height: calc(var(--in-app-controle, 36px) - 8px); padding: 0 12px; border: 0; border-radius: var(--in-raio-pilula); background: transparent; color: var(--in-texto-2); font: 560 13px/1 var(--in-fonte); white-space: nowrap; cursor: pointer; transition: background-color var(--in-duracao-rapida) var(--in-curva), color var(--in-duracao-rapida) var(--in-curva); }
.in-app-segmento > button:hover { color: var(--in-texto); }
.in-app-segmento > button[aria-checked="true"] { background: var(--in-app-ativo); color: var(--in-texto); box-shadow: 0 1px 2px rgba(8, 19, 24, 0.12), 0 0 0 1px var(--in-borda); }
.in-app-segmento > button .in-app-icone { width: 16px; height: 16px; }

/* ---------- Esqueleto, girando e estados de cartão ---------- */
.in-app-esqueleto { display: block; height: 12px; border-radius: var(--in-raio-s); background: var(--in-app-esqueleto) linear-gradient(90deg, transparent 0, var(--in-app-esqueleto-luz) 50%, transparent 100%) no-repeat; background-size: 40% 100%; background-position: -60% 0; animation: in-app-brilho 1.6s var(--in-curva) infinite; }
.in-app-esqueleto--titulo { height: 16px; width: 55%; }
.in-app-esqueleto--numero { height: 30px; width: 45%; }
.in-app-esqueleto--bloco { height: 120px; border-radius: var(--in-raio-m); }
.in-app-esqueleto--redondo { width: 32px; height: 32px; border-radius: 50%; }
@keyframes in-app-brilho { to { background-position: 160% 0; } }
.in-app-girando { display: inline-block; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: in-app-gira 0.8s linear infinite; }
@keyframes in-app-gira { to { transform: rotate(360deg); } }
.in-app-estado { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 180px; padding: 20px 16px; text-align: center; }
.in-app-estado > .in-app-icone { width: 24px; height: 24px; color: var(--in-texto-2); }
.in-app-estado b { font: 600 14px/1.3 var(--in-fonte); }
.in-app-estado p { max-width: 34ch; font-size: 13px; color: var(--in-texto-2); }
.in-app-estado .in-btn { margin-top: 4px; }
.in-app-estado--erro > .in-app-icone { color: var(--in-app-erro); }

/* ---------- Telão: tela de TV, sem interação, letra grande, sempre no escuro ---------- */
.in-app-telao { container: in-app-telao / inline-size; box-sizing: border-box; inline-size: 100%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2.2cqi; padding: 3cqi 3.4cqi 2.4cqi; background: var(--in-navy-900); color: var(--in-papel-50); font-family: var(--in-fonte); --in-logo-lb: var(--in-creme); --in-logo-in: var(--in-laranja); }
.in-app-telao-cab { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; }
.in-app-telao-cab .in-logo { width: 9cqi; }
.in-app-telao-titulo { display: grid; gap: 0.6cqi; text-align: right; }
.in-app-telao-titulo b { font: var(--in-peso-titulo) 2.6cqi/1.1 var(--in-fonte); font-stretch: var(--in-largura-titulo); }
.in-app-telao-titulo span { font: 400 1.5cqi/1 var(--in-fonte-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--in-navy-200); }
.in-app-telao-quadros { position: relative; min-height: 0; }
.in-app-telao-quadro { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); gap: 1.8cqi; opacity: 0; visibility: hidden; transition: opacity 0.8s var(--in-curva), visibility 0s 0.8s; }
.in-app-telao-quadro.atual { opacity: 1; visibility: visible; transition-delay: 0s; }
.in-app-telao-kpi { display: grid; align-content: space-between; gap: 1cqi; padding: 1.8cqi 2cqi; border-radius: 1cqi; background: var(--in-navy-800); border: 1px solid rgba(250, 248, 245, 0.1); }
.in-app-telao-kpi span { font: 500 1.6cqi/1.25 var(--in-fonte); color: var(--in-navy-100); }
.in-app-telao-kpi b { font: 500 6.4cqi/0.9 var(--in-fonte-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.05em; }
.in-app-telao-kpi b small { font-size: 0.36em; letter-spacing: 0; color: var(--in-navy-200); }
.in-app-telao-kpi em { font: 500 1.5cqi/1.3 var(--in-fonte); font-style: normal; color: var(--in-navy-100); }
.in-app-telao-kpi em.ruim { color: var(--in-erro-borda); }
.in-app-telao-kpi em.bom { color: var(--in-sucesso-borda); }
.in-app-telao-lista { grid-column: 1 / -1; display: grid; gap: 0.8cqi; margin: 0; padding: 0; list-style: none; align-content: start; }
.in-app-telao-lista li { display: grid; grid-template-columns: 9cqi minmax(0, 1fr) auto; align-items: center; gap: 1.6cqi; padding: 1.2cqi 1.8cqi; border-radius: 0.8cqi; background: var(--in-navy-800); font: 500 1.9cqi/1.2 var(--in-fonte); }
.in-app-telao-lista li > b { font: 500 1.6cqi/1 var(--in-fonte-mono); color: var(--in-laranja); }
.in-app-telao-lista li > span:last-child { font: 500 1.6cqi/1 var(--in-fonte-mono); color: var(--in-navy-100); }
.in-app-telao-lista li > span:last-child.ruim { color: var(--in-erro-borda); }
.in-app-telao-pe { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; font: 400 1.4cqi/1 var(--in-fonte-mono); color: var(--in-navy-200); }
.in-app-telao-passos { display: flex; gap: 0.8cqi; }
.in-app-telao-passos i { position: relative; width: 4cqi; height: 0.5cqi; border-radius: 1px; background: rgba(250, 248, 245, 0.18); overflow: hidden; }
.in-app-telao-passos i::before { content: ""; display: block; height: 100%; width: 0; background: var(--in-laranja); }
.in-app-telao-passos i.feito::before { width: 100%; }
.in-app-telao-passos i.atual::before { width: var(--andou, 100%); }

/* ---------- Tabela ----------
 * <div class="in-app-tabela-moldura" data-app="tabela"> ferramentas · lote · <div class="in-app-tabela-rola">
 * <table class="in-app-tabela"> · paginação. A tabela fica sempre dentro do .in-app-tabela-rola: a rolagem
 * de lado é dela, nunca da página. Número à direita em mono; ordenação por botão no cabeçalho (aria-sort). */
.in-app-tabela-moldura { position: relative; display: grid; min-width: 0; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda); background: var(--in-app-cartao); overflow: hidden; }
.in-app-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--in-borda); }
.in-app-ferramentas-fim { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.in-app-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.in-app-filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--in-raio-pilula); border: 1px dashed var(--in-borda-forte); background: transparent; color: var(--in-texto); font: 500 13px/1 var(--in-fonte); white-space: nowrap; cursor: pointer; transition: background-color var(--in-duracao-rapida) var(--in-curva), border-color var(--in-duracao-rapida) var(--in-curva); }
.in-app-filtro:hover { background: var(--in-app-hover); }
.in-app-filtro[aria-pressed="true"] { border-style: solid; border-color: var(--in-app-selecao-borda); background: var(--in-app-selecao); }
.in-app-filtro[aria-pressed="true"]::before { content: ""; width: 7px; height: 7px; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.in-app-filtro small { font: 500 11px/1 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-busca { position: relative; display: flex; align-items: center; flex: 1 1 220px; max-width: 320px; min-width: 0; }
.in-app-busca > .in-app-icone { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--in-texto-2); pointer-events: none; }
.in-app-busca input { width: 100%; height: var(--in-app-controle); padding: 0 12px 0 34px; border-radius: var(--in-raio-pilula); border: 1px solid var(--in-borda-forte); background: var(--in-app-afundado); color: var(--in-texto); font: 400 13.5px/1 var(--in-fonte); }
.in-app-busca input::placeholder { color: var(--in-texto-2); opacity: 0.85; }
.in-app-busca input:focus-visible { outline: none; border-color: var(--in-laranja); box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.18); }
.in-app-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--in-app-selecao-borda); background: var(--in-app-selecao); }
.in-app-lote[hidden] { display: none; }
.in-app-lote b { font: 600 13px/1 var(--in-fonte); margin-right: 4px; }
.in-app-lote .in-app-link { margin-left: auto; font-size: 13px; }
.in-app-tabela-rola { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.in-app-tabela-rola > .in-app-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.35; }
.in-app-tabela-rola .in-app-tabela :is(th, td) { height: var(--in-app-linha); padding: 0 12px; border-bottom: 1px solid var(--in-borda); text-align: left; vertical-align: middle; white-space: nowrap; }
.in-app-tabela-rola .in-app-tabela th { position: sticky; top: 0; z-index: 1; height: 36px; background: var(--in-app-afundado); color: var(--in-texto-2); font: 500 10.5px/1.2 var(--in-fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.in-app-tabela-rola .in-app-tabela :is(th, td):first-child { padding-left: 16px; }
.in-app-tabela-rola .in-app-tabela tbody tr:last-child td { border-bottom: 0; }
.in-app-tabela-rola .in-app-tabela tbody tr:hover td { background: var(--in-app-hover); }
.in-app-tabela-rola .in-app-tabela tbody tr[aria-selected="true"] td { background: var(--in-app-selecao); }
.in-app-tabela-rola .in-app-tabela .in-app-num { text-align: right; }
.in-app-tabela-rola .in-app-tabela td.in-app-num { font: 450 13px/1 var(--in-fonte-mono); font-feature-settings: "tnum" 1; }
.in-app-tabela-rola .in-app-tabela .in-app-col-check { width: 44px; padding-right: 0; }
.in-app-tabela-rola .in-app-tabela .in-app-col-acao { width: 52px; padding-left: 4px; text-align: right; }
.in-app-tabela-rola .in-app-tabela td.in-app-quebra { min-width: 200px; white-space: normal; }
.in-app-tabela td small { display: block; margin-top: 2px; font-size: 12px; color: var(--in-texto-2); }
.in-app-tabela td .in-app-icone-btn { width: 32px; height: 32px; }
.in-app-ordena { display: inline-flex; align-items: center; gap: 4px; margin: 0 -6px; padding: 6px; border: 0; border-radius: var(--in-raio-s); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
th.in-app-num .in-app-ordena { flex-direction: row-reverse; }
.in-app-ordena:hover { color: var(--in-texto); background: var(--in-app-hover); }
.in-app-ordena .in-app-icone { width: 14px; height: 14px; opacity: 0.6; }
th[aria-sort="ascending"] .in-app-ordena, th[aria-sort="descending"] .in-app-ordena { color: var(--in-texto); }
th[aria-sort="ascending"] .in-app-ordena .in-app-icone, th[aria-sort="descending"] .in-app-ordena .in-app-icone { opacity: 1; color: var(--in-link); }
th[aria-sort="descending"] .in-app-ordena .in-app-icone { transform: scaleY(-1); }
.in-app-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.in-app-pessoa > span:last-child { display: grid; min-width: 0; }
.in-app-pessoa b { font-weight: 560; }
.in-app-tabela-rola .in-app-tabela tr.in-app-tabela-vazia td { height: auto; padding: 0; white-space: normal; }
.in-app-tabela-rola .in-app-tabela tr.in-app-tabela-vazia:hover td { background: none; }
.in-app-paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 12px 8px 16px; border-top: 1px solid var(--in-borda); font: 400 12.5px/1.2 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-paginacao > div { display: flex; align-items: center; gap: 4px; }
.in-app-paginacao .in-app-icone-btn { width: 32px; height: 32px; }
.in-app-paginacao .in-app-icone-btn[disabled] { opacity: 0.4; cursor: default; background: transparent; }
/* Tabela que vira lista de cartões quando o contêiner é estreito (rótulo de cada célula em data-rotulo). */
.in-app-tabela-moldura--empilha { container: in-app-tabela / inline-size; box-sizing: border-box; inline-size: 100%; }
@container in-app-tabela (max-width: 600px) {
  .in-app-tabela-moldura--empilha .in-app-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .in-app-tabela-moldura--empilha .in-app-tabela, .in-app-tabela-moldura--empilha .in-app-tabela tbody { display: block; }
  .in-app-tabela-moldura--empilha .in-app-tabela tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--in-borda); }
  .in-app-tabela-moldura--empilha .in-app-tabela tbody tr:last-child { border-bottom: 0; }
  .in-app-tabela-moldura--empilha .in-app-tabela-rola .in-app-tabela :is(th, td) { height: auto; padding: 0; border: 0; white-space: normal; background: none; }
  .in-app-tabela-moldura--empilha .in-app-tabela td.in-app-col-check { grid-row: 1 / span 9; padding-left: 14px; }
  .in-app-tabela-moldura--empilha .in-app-tabela td.in-app-col-acao { grid-column: 3; grid-row: 1; width: auto; }
  .in-app-tabela-moldura--empilha .in-app-tabela td:not(.in-app-col-check, .in-app-col-acao) { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 8px; min-width: 0; text-align: right; }
  .in-app-tabela-moldura--empilha .in-app-tabela td[data-rotulo]::before { content: attr(data-rotulo); flex: none; margin-right: auto; font: 500 10.5px/1.6 var(--in-fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--in-texto-2); }
  .in-app-tabela-moldura--empilha .in-app-tabela td > small { margin: 0; }
  .in-app-tabela-moldura--empilha .in-app-tabela td .in-app-status { align-self: center; }
  .in-app-tabela-moldura--empilha .in-app-tabela td.in-app-empilha-titulo { justify-content: flex-start; text-align: left; font-weight: 600; }
  .in-app-tabela-moldura--empilha .in-app-tabela tr[aria-selected="true"] { background: var(--in-app-selecao); }
  .in-app-tabela-moldura--empilha .in-app-tabela tr.in-app-tabela-vazia { display: block; padding: 0; }
  .in-app-tabela-moldura--empilha .in-app-tabela tr.in-app-tabela-vazia td { display: block; }
}

/* ---------- Campos do produto (modificador do in-campo do kit) ---------- */
.in-app-campo :is(input, select, textarea), .in-app-campo .in-selecao-botao { min-height: calc(var(--in-app-controle) + 4px); padding: 8px 12px; border-radius: var(--in-raio-m); font-size: 14px; }
.in-app-campo select, .in-app-campo .in-selecao-botao { padding-right: 40px; background-position: right 14px center; }
.in-app-campo textarea { min-height: 88px; resize: vertical; }
.in-app-campo > span { display: flex; align-items: baseline; gap: 8px; }
.in-app-campo > :is(span, label) em { margin-left: auto; font: 400 11.5px/1 var(--in-fonte); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--in-texto-2); }
.in-app-campo small { display: flex; gap: 6px; align-items: flex-start; }
.in-app-campo[data-erro] small::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.in-app .in-campo[data-erro] small { color: var(--in-app-erro); }
.in-app .in-campo[data-erro] :is(input, select, textarea), .in-app .in-campo[data-erro] .in-app-combo-caixa { border-color: var(--in-app-erro); }
.in-app-campo-grupo, .in-campo > span.in-app-campo-grupo { display: flex; align-items: stretch; min-width: 0; font: inherit; letter-spacing: 0; text-transform: none; color: var(--in-texto); }
.in-app-campo-grupo > span { display: grid; place-items: center; padding: 0 12px; border: 1.5px solid var(--in-borda); background: var(--in-app-afundado); color: var(--in-texto-2); font: 500 13px/1 var(--in-fonte-mono); white-space: nowrap; }
.in-app-campo-grupo > span:first-child { border-right: 0; border-radius: var(--in-raio-m) 0 0 var(--in-raio-m); }
.in-app-campo-grupo > span:last-child { border-left: 0; border-radius: 0 var(--in-raio-m) var(--in-raio-m) 0; }
.in-app-campo-grupo > input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.in-app-campo-grupo > input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.in-app-campo-grupo input { min-width: 0; }
.in-app-campo-grupo input.in-app-num { text-align: right; }
.in-app-form { display: grid; gap: 18px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; }
.in-app-form > .in-app-largo { grid-column: 1 / -1; }
.in-app-check, .in-app-radio { appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; margin: 0; border: 1.5px solid var(--in-borda-forte); background: var(--in-app-cartao); cursor: pointer; transition: background-color var(--in-duracao-rapida) var(--in-curva), border-color var(--in-duracao-rapida) var(--in-curva); }
.in-app-check { border-radius: var(--in-raio-s); }
.in-app-radio { border-radius: 50%; }
.in-app-check:hover, .in-app-radio:hover { border-color: var(--in-texto-2); }
.in-app-check:checked, .in-app-check:indeterminate { border-color: var(--in-laranja); background: var(--in-laranja); }
.in-app-check:checked::after, .in-app-check:indeterminate::after { content: ""; width: 12px; height: 12px; background: var(--in-branco); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.in-app-check:indeterminate::after { width: 10px; height: 2px; border-radius: 1px; -webkit-mask: none; mask: none; }
.in-app-radio:checked { border: 5px solid var(--in-laranja); background: var(--in-branco); }
.in-app-opcao-linha { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.in-app-opcao-linha > input { margin-top: 1px; }
.in-app-opcao-linha > span { display: grid; gap: 1px; }
.in-app-opcao-linha small { font-size: 12.5px; color: var(--in-texto-2); }
.in-app-chave { position: relative; display: inline-flex; align-items: center; width: 40px; height: 24px; flex: none; padding: 0; border: 0; border-radius: var(--in-raio-pilula); background: var(--in-borda-forte); cursor: pointer; transition: background-color var(--in-duracao-rapida) var(--in-curva); }
.in-app-chave::after { content: ""; position: absolute; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--in-branco); box-shadow: 0 1px 2px rgba(8, 19, 24, 0.3); transition: transform var(--in-duracao-rapida) var(--in-curva); }
.in-app-chave[aria-checked="true"] { background: var(--in-laranja); }
.in-app-chave[aria-checked="true"]::after { transform: translateX(16px); }
.in-app-erros { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--in-raio-l); border: 1px solid var(--in-app-erro-borda); background: var(--in-app-erro-fundo); color: var(--in-app-erro); }
.in-app-erros[hidden] { display: none; }
.in-app-erros b { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--in-fonte); }
.in-app-erros b:focus { outline: none; }
.in-app-erros ul { display: grid; gap: 4px; margin: 0; padding-left: 28px; }
.in-app-erros a { color: inherit; font-weight: 560; }

/* ---------- Assistente em passos ---------- */
.in-app-assistente { position: relative; display: grid; min-width: 0; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda); background: var(--in-app-cartao); overflow: hidden; }
.in-app-passos { position: relative; display: flex; gap: 8px; margin: 0; padding: 14px 20px; list-style: none; border-bottom: 1px solid var(--in-borda); background: var(--in-app-afundado); overflow-x: auto; }
.in-app-passos li { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: max-content; color: var(--in-texto-2); font: 500 13px/1.2 var(--in-fonte); }
.in-app-passos li:not(:last-child)::after { content: ""; flex: 1; min-width: 16px; height: 1px; background: var(--in-borda-forte); }
.in-app-passos li > i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--in-borda-forte); font: 600 11px/1 var(--in-fonte-mono); font-style: normal; }
.in-app-passos li[data-estado="feito"] { color: var(--in-texto); }
.in-app-passos li[data-estado="feito"] > i { border-color: var(--in-texto); background: var(--in-texto); color: var(--in-app-cartao); }
.in-app-passos li[aria-current="step"] { color: var(--in-texto); font-weight: 640; }
.in-app-passos li[aria-current="step"] > i { border-color: var(--in-laranja); background: var(--in-laranja); color: var(--in-navy-950); }
@container (max-width: 560px) { .in-app-passos li:not([aria-current="step"]) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .in-app-passos li { flex: none; } .in-app-passos li[aria-current="step"] { flex: 1 1 auto; } }
.in-app-passo { display: grid; gap: 18px; padding: 22px 20px; }
.in-app-passo[hidden] { display: none; }
.in-app-passo-titulo { font: 640 17px/1.25 var(--in-fonte); font-stretch: var(--in-largura-titulo); }
.in-app-passo-titulo:focus { outline: none; }
.in-app-assistente-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--in-borda); }
.in-app-assistente-pe > span { font: 400 12px/1.3 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-assistente-pe > div { display: flex; gap: 8px; margin-left: auto; }
.in-app-resumo { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.in-app-resumo dt { font: 500 10.5px/1.75 var(--in-fonte-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--in-texto-2); }
.in-app-resumo dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Seletores: pessoa (combo), intervalo de datas e lista com busca ---------- */
.in-app-combo { position: relative; display: grid; gap: 8px; min-width: 0; }
.in-app-combo-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: calc(var(--in-app-controle) + 4px); padding: 5px 10px 5px 6px; border-radius: var(--in-raio-m); border: 1.5px solid var(--in-borda); background: var(--in-superficie-2); cursor: text; }
.in-app-combo-caixa:focus-within { border-color: var(--in-laranja); background: var(--in-superficie-elevada); box-shadow: 0 0 0 4px rgba(255, 105, 0, 0.16); }
.in-app-combo-caixa input { flex: 1 1 120px; min-width: 80px; height: 26px; padding: 0 4px; border: 0; outline: 0; background: transparent; color: var(--in-texto); font: 400 14px/1 var(--in-fonte); }
.in-app-combo-caixa input::placeholder { color: var(--in-texto-2); opacity: 0.85; }
.in-app-fichas { display: contents; }
.in-app-opcoes { position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 1px; max-height: 280px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda-forte); background: var(--in-app-cartao); box-shadow: var(--in-app-sombra); }
.in-app-opcoes[hidden] { display: none; }
.in-app-opcoes [role="option"] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--in-raio-m); cursor: pointer; }
.in-app-opcoes [role="option"][hidden] { display: none; }
.in-app-opcoes [role="option"] > span:not(.in-app-avatar) { display: grid; flex: 1; min-width: 0; }
.in-app-opcoes [role="option"] small { font-size: 12px; color: var(--in-texto-2); }
.in-app-opcoes [role="option"].ativo { background: var(--in-app-hover); box-shadow: inset 2px 0 0 var(--in-laranja); }
.in-app-opcoes [role="option"][aria-selected="true"]::after { content: ""; width: 16px; height: 16px; flex: none; background: var(--in-link); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.in-app-opcoes-vazio { padding: 12px 10px; color: var(--in-texto-2); font-size: 13px; }
.in-app-opcoes-vazio[hidden] { display: none; }
.in-app-intervalo { container: in-app-intervalo / inline-size; box-sizing: border-box; inline-size: 100%; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda); background: var(--in-app-cartao); overflow: hidden; }
.in-app-intervalo-atalhos { position: relative; display: grid; align-content: start; gap: 2px; margin: 0; padding: 10px; list-style: none; border-right: 1px solid var(--in-borda); background: var(--in-app-afundado); }
.in-app-intervalo-atalhos button { width: 100%; padding: 8px 10px; border: 0; border-radius: var(--in-raio-m); background: transparent; color: var(--in-texto); font: 500 13px/1.2 var(--in-fonte); text-align: left; white-space: nowrap; cursor: pointer; }
.in-app-intervalo-atalhos button:hover { background: var(--in-app-hover); }
.in-app-intervalo-atalhos button[aria-pressed="true"] { background: var(--in-app-ativo); box-shadow: 0 0 0 1px var(--in-borda); }
.in-app-calendario { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px 14px 14px; }
.in-app-calendario-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.in-app-calendario-cab b { font: 600 14px/1 var(--in-fonte); }
.in-app-calendario-cab .in-app-icone-btn { width: 32px; height: 32px; }
.in-app-calendario [role="grid"] { display: grid; gap: 2px; }
.in-app-calendario [role="row"] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.in-app-calendario [role="columnheader"] { padding: 4px 0; font: 500 10.5px/1.4 var(--in-fonte-mono); letter-spacing: 0.06em; text-align: center; color: var(--in-texto-2); }
.in-app-calendario [role="gridcell"] { display: grid; }
.in-app-calendario [role="gridcell"] button { height: 34px; padding: 0; border: 0; border-radius: var(--in-raio-m); background: transparent; color: var(--in-texto); font: 450 13px/1 var(--in-fonte-mono); font-feature-settings: "tnum" 1; cursor: pointer; }
.in-app-calendario [role="gridcell"] button:hover { background: var(--in-app-hover); }
.in-app-calendario [role="gridcell"] button[data-fora] { color: var(--in-texto-2); }
.in-app-calendario [role="gridcell"] button[data-hoje] { box-shadow: inset 0 0 0 1px var(--in-borda-forte); }
.in-app-calendario [role="gridcell"][data-intervalo="meio"] button { border-radius: 0; background: var(--in-app-selecao); }
.in-app-calendario [role="gridcell"][data-intervalo~="inicio"] button, .in-app-calendario [role="gridcell"][data-intervalo~="fim"] button { background: var(--in-laranja); color: var(--in-navy-950); font-weight: 600; }
.in-app-calendario [role="gridcell"][data-intervalo="inicio"] button { border-radius: var(--in-raio-m) 0 0 var(--in-raio-m); }
.in-app-calendario [role="gridcell"][data-intervalo="fim"] button { border-radius: 0 var(--in-raio-m) var(--in-raio-m) 0; }
.in-app-intervalo-resumo { grid-column: 1 / -1; padding: 10px 14px; border-top: 1px solid var(--in-borda); font: 500 12.5px/1.3 var(--in-fonte-mono); color: var(--in-texto); }

/* ---------- Data: DD/MM/AAAA, nunca o campo nativo (v1.7.0) ----------
 * O input type="date" segue o idioma do navegador e, em inglês, troca dia e mês. Toda data da LB é texto com máscara
 * (.in-campo-data, comportamento no in-app.js, data-app="data"), com a data por extenso logo abaixo para conferir.
 * O calendário é opcional e começa no domingo, como o do intervalo. */
.in-campo-data { position: relative; }
.in-campo-data > label { font: 500 var(--in-texto-eyebrow)/1.2 var(--in-fonte-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--in-texto-2); }
.in-app-campo.in-campo-data > label { display: flex; align-items: baseline; gap: 8px; }
.in-campo-data-caixa { position: relative; display: flex; align-items: center; min-width: 0; }
.in-campo-data-caixa > input { flex: 1; min-width: 0; font-family: var(--in-fonte-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: 0.02em; }
.in-campo-data-caixa > input:has(+ [data-app-calendario]) { padding-right: 46px; }
.in-campo-data-caixa > [data-app-calendario] { position: absolute; right: 5px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; }
.in-campo-data-extenso { min-height: 1.45em; }
.in-campo-data-calendario { position: absolute; z-index: var(--in-z-sobreposto, 60); top: calc(100% + 6px); left: 0; box-sizing: border-box; inline-size: min(304px, calc(100vw - 32px)); border-radius: var(--in-raio-l); border: 1px solid var(--in-borda-forte); background: var(--in-app-cartao, var(--in-superficie-elevada)); box-shadow: var(--in-app-sombra, 0 18px 40px -18px rgba(8, 19, 24, 0.45)); }
.in-campo-data-calendario[hidden] { display: none; }
.in-app-calendario [role="gridcell"][aria-selected="true"]:not([data-intervalo]) button { background: var(--in-laranja); color: var(--in-navy-950); font-weight: 600; }
.in-app-calendario [role="gridcell"] button:disabled { opacity: 0.35; cursor: not-allowed; }
.in-app-calendario [role="gridcell"] button:disabled:hover { background: transparent; }
.in-app-calendario [role="gridcell"] button:focus-visible { outline: 2px solid var(--in-foco, var(--in-laranja)); outline-offset: 1px; }
.in-campo-data-intervalo { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.in-campo-data-intervalo > legend { padding: 0; margin-bottom: 10px; font: 500 var(--in-texto-eyebrow)/1.2 var(--in-fonte-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--in-texto-2); }
.in-campo-data-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 12px; }
.in-campo-data-resumo { min-height: 1.4em; font: 500 12.5px/1.4 var(--in-fonte); color: var(--in-texto); text-wrap: pretty; }
@container in-app-intervalo (max-width: 460px) { .in-app-intervalo { grid-template-columns: minmax(0, 1fr); } .in-app-intervalo-atalhos { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--in-borda); } .in-app-intervalo-atalhos li { flex: none; } }
.in-app-escolha { position: relative; display: grid; min-width: 0; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda); background: var(--in-app-cartao); overflow: hidden; }
.in-app-escolha > .in-app-busca { max-width: none; padding: 10px; border-bottom: 1px solid var(--in-borda); }
.in-app-escolha > .in-app-busca > .in-app-icone { left: 21px; }
.in-app-escolha ul { position: relative; display: grid; max-height: 260px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.in-app-escolha li[hidden] { display: none; }
.in-app-escolha li label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--in-raio-m); cursor: pointer; }
.in-app-escolha li label:hover { background: var(--in-app-hover); }
.in-app-escolha li label > span { flex: 1; min-width: 0; }
.in-app-escolha li label small { font: 400 11.5px/1 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-escolha-pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--in-borda); font: 400 12px/1.2 var(--in-fonte-mono); color: var(--in-texto-2); }

/* ---------- Abas ---------- */
.in-app-abas { position: relative; display: flex; gap: 4px; margin: 0; padding: 0; border-bottom: 1px solid var(--in-borda); overflow-x: auto; scrollbar-width: none; }
.in-app-abas [role="tab"] { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--in-texto-2); font: 560 13.5px/1 var(--in-fonte); white-space: nowrap; cursor: pointer; }
.in-app-abas [role="tab"] .in-app-icone { width: 18px; height: 18px; }
.in-app-abas [role="tab"]:hover, .in-app-abas [role="tab"][aria-selected="true"] { color: var(--in-texto); }
.in-app-abas [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--in-laranja); }
.in-app-abas [role="tab"]:focus-visible { outline-offset: -2px; }
.in-app-abas--lateral { flex-direction: column; gap: 2px; border-bottom: 0; overflow: visible; }
.in-app-abas--lateral [role="tab"] { justify-content: flex-start; width: 100%; height: 38px; border-radius: var(--in-raio-m); }
.in-app-abas--lateral [role="tab"][aria-selected="true"] { background: var(--in-app-hover); }
.in-app-abas--lateral [role="tab"][aria-selected="true"]::after { left: 0; right: auto; top: 50%; bottom: auto; width: 7px; height: 7px; margin-top: -3.5px; clip-path: polygon(0 0, 100% 0, 0 100%); }
[role="tabpanel"][hidden] { display: none; }

/* ---------- Lista de linhas (sessões, pendências) e preferência ---------- */
.in-app-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.in-app-lista > li { display: flex; align-items: center; gap: 12px; min-height: var(--in-app-linha); padding: 10px 0; border-bottom: 1px solid var(--in-borda); }
.in-app-lista > li:last-child { border-bottom: 0; }
.in-app-lista-icone { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--in-raio-m); background: var(--in-app-afundado); border: 1px solid var(--in-borda); color: var(--in-texto-2); }
.in-app-lista-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.in-app-lista-texto b { font-weight: 560; }
.in-app-lista-texto small { font-size: 12.5px; color: var(--in-texto-2); }
.in-app-lista-meta { flex: none; font: 400 12px/1.3 var(--in-fonte-mono); color: var(--in-texto-2); text-align: right; }
.in-app-preferencia { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--in-borda); }
.in-app-preferencia:last-child { border-bottom: 0; }
.in-app-preferencia > span { display: grid; gap: 2px; min-width: 0; }
.in-app-preferencia b { font-weight: 560; }
.in-app-preferencia small { font-size: 12.5px; color: var(--in-texto-2); }

/* ---------- Matriz de acesso (módulo × nível) e sigilo ---------- */
.in-app-tabela-rola .in-app-matriz :is(th, td).in-app-nivel { width: 76px; padding: 0 4px; text-align: center; }
.in-app-matriz td.in-app-nivel label { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.in-app-matriz td.in-app-nivel label:hover { background: var(--in-app-hover); }
.in-app-ajuste { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 6px; border-radius: var(--in-raio-s); border: 1px solid var(--in-app-destaque-borda); background: var(--in-app-destaque-fundo); font: 500 10px/1.2 var(--in-fonte-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--in-texto); vertical-align: 1px; }
.in-app-nivel-tag { display: inline-block; min-width: 56px; padding: 4px 6px; border-radius: var(--in-raio-s); font: 500 11px/1.2 var(--in-fonte-mono); text-align: center; color: var(--in-texto-2); }
.in-app-nivel-tag[data-nivel="ver"] { background: var(--in-app-afundado); color: var(--in-texto); box-shadow: inset 0 0 0 1px var(--in-borda-forte); }
.in-app-nivel-tag[data-nivel="editar"] { background: var(--in-app-neutro-fundo); color: var(--in-texto); box-shadow: inset 0 0 0 1px var(--in-texto-2); font-weight: 600; }
.in-app-nivel-tag[data-nivel="admin"] { background: var(--in-texto); color: var(--in-app-cartao); font-weight: 600; }
.in-app-sigilo { container: in-app-sigilo / inline-size; box-sizing: border-box; inline-size: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.in-app-sigilo li { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 12px; border-radius: var(--in-raio-m); background: var(--in-app-afundado); border: 1px solid var(--in-borda); font-size: 12.5px; color: var(--in-texto-2); }
.in-app-sigilo li b { font: 600 13.5px/1.2 var(--in-fonte); color: var(--in-texto); }
.in-app-sigilo li i { display: block; height: 4px; border-radius: 2px; background: var(--in-borda-forte); }
.in-app-sigilo li.liberado i { background: var(--in-texto); }
.in-app-sigilo li.atual { border-color: var(--in-laranja); background: var(--in-app-destaque-fundo); }
.in-app-sigilo li.atual i { background: var(--in-laranja); }
@media (max-width: 720px) { .in-app-sigilo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Menu suspenso (escopo, usuário, ações da linha) ---------- */
.in-app-ancora { position: relative; display: inline-flex; }
.in-app-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; display: grid; gap: 1px; min-width: 228px; max-width: min(320px, 90vw); margin: 0; padding: 6px; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda-forte); background: var(--in-app-cartao); color: var(--in-texto); box-shadow: var(--in-app-sombra); }
.in-app-menu[hidden] { display: none; }
.in-app-menu--direita { left: auto; right: 0; }
.in-app-menu [role^="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--in-raio-m); background: transparent; color: var(--in-texto); font: 450 13.5px/1.2 var(--in-fonte); text-align: left; text-decoration: none; cursor: pointer; }
.in-app-menu [role^="menuitem"] > span { flex: 1; min-width: 0; }
.in-app-menu [role^="menuitem"] .in-app-icone { width: 18px; height: 18px; color: var(--in-texto-2); }
.in-app-menu [role^="menuitem"]:is(:hover, :focus) { outline: none; background: var(--in-app-hover); }
.in-app-menu [role^="menuitem"]:focus-visible { box-shadow: inset 0 0 0 2px var(--in-foco); }
.in-app-menu [role="menuitemradio"][aria-checked="true"]::after, .in-app-menu [role="menuitemcheckbox"][aria-checked="true"]::after { content: ""; width: 8px; height: 8px; flex: none; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.in-app-menu [role="menuitem"].perigo { color: var(--in-app-erro); }
.in-app-menu [role="menuitem"].perigo .in-app-icone { color: currentColor; }
.in-app-menu [role="group"] { display: grid; gap: 1px; }
.in-app-menu-rotulo { padding: 8px 10px 4px; font: 500 10px/1.2 var(--in-fonte-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--in-texto-2); }
.in-app-menu-linha { height: 1px; margin: 5px 4px; background: var(--in-borda); border: 0; }
.in-app-menu-quem { display: grid; gap: 2px; margin-bottom: 5px; padding: 8px 10px 10px; border-bottom: 1px solid var(--in-borda); }
.in-app-menu-quem b { font-weight: 600; }
.in-app-menu-quem small { font: 400 12px/1.3 var(--in-fonte-mono); color: var(--in-texto-2); overflow-wrap: anywhere; }

/* ---------- Diálogo, gaveta e paleta ⌘K (sempre <dialog>) ---------- */
.in-app-dialogo, .in-app-gaveta, .in-app-comando { padding: 0; border: 1px solid var(--in-borda-forte); background: var(--in-app-cartao); color: var(--in-texto); font-family: var(--in-fonte); font-size: 14px; line-height: 1.45; box-shadow: var(--in-app-sombra); }
:is(.in-app-dialogo, .in-app-gaveta, .in-app-comando)::backdrop { background: rgba(8, 19, 24, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
/* margin: auto explícito (v1.6): o reset do Tailwind (* { margin: 0 }) tira a margem que o navegador dá ao
 * <dialog> modal, e o diálogo ia para o canto superior esquerdo. A caixa rola por dentro quando o conteúdo é longo. */
.in-app-dialogo { width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 48px); margin: auto; border-radius: 14px; }
.in-app-dialogo[open] { display: grid; animation: in-app-surge 0.28s var(--in-curva); }
.in-app-dialogo-caixa { position: relative; display: grid; gap: 18px; max-height: calc(100svh - 48px); overflow-y: auto; padding: 22px 22px 18px; }
.in-app-dialogo-cab { display: flex; gap: 14px; align-items: flex-start; }
.in-app-dialogo-cab > div { display: grid; gap: 6px; min-width: 0; }
.in-app-dialogo-cab h2 { font: 640 18px/1.25 var(--in-fonte); font-stretch: var(--in-largura-titulo); }
.in-app-dialogo-cab p { color: var(--in-texto-2); }
.in-app-dialogo-icone { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--in-app-erro-fundo); color: var(--in-app-erro); }
.in-app-dialogo-icone--info { background: var(--in-app-info-fundo); color: var(--in-app-info); }
.in-app-dialogo-pe { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 8px; }
.in-app-gaveta { width: min(480px, 100vw); height: 100svh; max-height: none; margin: 0 0 0 auto; border-width: 0 0 0 1px; border-radius: 0; }
.in-app-gaveta[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: in-app-gaveta 0.34s var(--in-curva); }
.in-app-gaveta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 16px 22px; border-bottom: 1px solid var(--in-borda); }
.in-app-gaveta-cab > div { display: grid; gap: 6px; min-width: 0; }
.in-app-gaveta-cab h2 { font: 640 19px/1.25 var(--in-fonte); font-stretch: var(--in-largura-titulo); }
.in-app-gaveta-corpo { position: relative; display: grid; align-content: start; gap: 24px; padding: 20px 22px; overflow-y: auto; overscroll-behavior: contain; }
.in-app-gaveta-corpo > section, .in-app-gaveta-corpo > div { display: grid; gap: 10px; }
.in-app-gaveta-pe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--in-borda); background: var(--in-app-afundado); }
.in-app-historico { display: grid; margin: 0; padding: 0; list-style: none; }
.in-app-historico li { position: relative; display: grid; gap: 2px; padding: 0 0 16px 22px; }
.in-app-historico li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--in-texto-2); }
.in-app-historico li:first-child::before { background: var(--in-laranja); }
.in-app-historico li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 17px; bottom: 2px; width: 1px; background: var(--in-borda-forte); }
.in-app-historico small { font: 400 11.5px/1.3 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-comando { width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100svh - 96px)); margin: 12vh auto auto; border-radius: 14px; }
.in-app-comando[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: in-app-surge 0.28s var(--in-curva); }
.in-app-comando-campo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--in-borda); }
.in-app-comando-campo > .in-app-icone { color: var(--in-link); }
.in-app-comando-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--in-texto); font: 400 17px/1.2 var(--in-fonte); }
.in-app-comando-campo input::placeholder { color: var(--in-texto-2); opacity: 0.8; }
.in-app-comando-lista { position: relative; display: grid; align-content: start; gap: 6px; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.in-app-comando-lista [role="listbox"] { display: grid; gap: 6px; }
.in-app-comando-lista [role="group"] { display: grid; gap: 1px; }
.in-app-comando-lista [role="group"][hidden], .in-app-comando-lista [role="option"][hidden] { display: none; }
.in-app-comando-grupo { padding: 8px 10px 4px; font: 500 10px/1.2 var(--in-fonte-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--in-texto-2); }
.in-app-comando-lista [role="option"] { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--in-raio-m); color: var(--in-texto); text-decoration: none; cursor: pointer; }
.in-app-comando-lista [role="option"] .in-app-icone { color: var(--in-texto-2); }
.in-app-comando-lista [role="option"] > span { flex: 1; min-width: 0; }
.in-app-comando-lista [role="option"] > small { font: 400 11.5px/1 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-comando-lista [role="option"][aria-selected="true"] { background: var(--in-app-hover); box-shadow: inset 2px 0 0 var(--in-laranja); }
.in-app-comando-lista [role="option"][aria-selected="true"] .in-app-icone { color: var(--in-link); }
.in-app-comando-vazio { padding: 18px 12px; color: var(--in-texto-2); }
.in-app-comando-vazio[hidden] { display: none; }
.in-app-comando-pe { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; border-top: 1px solid var(--in-borda); font: 400 11.5px/1 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-comando-pe span { display: inline-flex; align-items: center; gap: 5px; }
@keyframes in-app-surge { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes in-app-gaveta { from { transform: translateX(32px); opacity: 0; } }

/* ---------- Aviso (toast) e faixa (banner) ---------- */
.in-app-avisos { position: fixed; z-index: 1600; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(400px, calc(100vw - 32px)); margin: 0; padding: 0; list-style: none; pointer-events: none; }
@media (max-width: 640px) { .in-app-avisos { left: 16px; right: 16px; bottom: 16px; width: auto; } }
.in-app-aviso { display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px 12px 14px; border-radius: var(--in-raio-l); border: 1px solid var(--in-borda-forte); background: var(--in-app-cartao); color: var(--in-texto); font: 400 14px/1.4 var(--in-fonte); box-shadow: var(--in-app-sombra); pointer-events: auto; animation: in-app-aviso 0.3s var(--in-curva); }
.in-app-aviso > .in-app-icone { margin-top: 1px; }
.in-app-aviso-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.in-app-aviso-texto b { font-weight: 600; }
.in-app-aviso-texto span { font-size: 13px; color: var(--in-texto-2); }
.in-app-aviso-acao { flex: none; align-self: center; padding: 7px 10px; border: 0; border-radius: var(--in-raio-pilula); background: transparent; color: var(--in-link); font: 600 13px/1 var(--in-fonte); cursor: pointer; }
.in-app-aviso-acao:hover { background: var(--in-app-hover); }
.in-app-aviso .in-app-icone-btn { width: 28px; height: 28px; }
.in-app-aviso .in-app-icone-btn .in-app-icone { width: 16px; height: 16px; }
.in-app-aviso--sucesso > .in-app-icone { color: var(--in-app-sucesso); }
.in-app-aviso--erro { border-color: var(--in-app-erro-borda); }
.in-app-aviso--erro > .in-app-icone { color: var(--in-app-erro); }
.in-app-aviso--atencao > .in-app-icone { color: var(--in-app-atencao); }
.in-app-aviso--info > .in-app-icone { color: var(--in-app-info); }
.in-app-aviso.saindo { opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
@keyframes in-app-aviso { from { opacity: 0; transform: translateY(12px); } }
.in-app-faixa { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 14px; border-radius: var(--in-raio-l); border: 1px solid var(--in-app-info-borda); background: var(--in-app-info-fundo); color: var(--in-texto); }
.in-app-faixa > .in-app-icone { margin-top: 1px; color: var(--in-app-info); }
.in-app-faixa-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.in-app-faixa-texto b { font-weight: 600; }
.in-app-faixa-texto span { color: var(--in-texto-2); }
.in-app-faixa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: none; }
.in-app-faixa .in-app-icone-btn { width: 30px; height: 30px; }
.in-app-faixa--atencao { border-color: var(--in-app-atencao-borda); background: var(--in-app-atencao-fundo); }
.in-app-faixa--atencao > .in-app-icone { color: var(--in-app-atencao); }
.in-app-faixa--erro { border-color: var(--in-app-erro-borda); background: var(--in-app-erro-fundo); }
.in-app-faixa--erro > .in-app-icone { color: var(--in-app-erro); }
.in-app-faixa--sucesso { border-color: var(--in-app-sucesso-borda); background: var(--in-app-sucesso-fundo); }
.in-app-faixa--sucesso > .in-app-icone { color: var(--in-app-sucesso); }
.in-app-faixa[hidden] { display: none; }
@container (max-width: 520px) { .in-app-faixa { flex-wrap: wrap; } .in-app-faixa-acoes { order: 3; width: 100%; padding-left: 32px; } }

/* ---------- Vazio, erro de página e 404 ---------- */
.in-app-vazio { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 260px; padding: 32px 20px; text-align: center; }
.in-app-vazio-icone { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; background: var(--in-app-destaque-fundo); color: var(--in-link); }
.in-app-vazio-icone .in-app-icone { width: 26px; height: 26px; }
.in-app-vazio :is(h2, h3) { font: 640 16px/1.3 var(--in-fonte); font-stretch: var(--in-largura-titulo); }
.in-app-vazio p { max-width: 42ch; color: var(--in-texto-2); }
.in-app-vazio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
/* v1.6.2: container sem largura própria encolhe até quase zero num pai flex ou centralizado (o 404 do DUBAI
 * saía com uma palavra por linha). Largura cheia com teto em rem; título equilibrado, parágrafo sem viúva. */
.in-app-erro { container: in-app-erro / inline-size; box-sizing: border-box; inline-size: 100%; max-inline-size: 35rem; display: grid; justify-items: start; align-content: center; gap: 14px; min-height: 340px; padding: 32px 0; }
.in-app-erro-codigo { font: 500 clamp(56px, 17cqi, 96px)/0.9 var(--in-fonte-mono); letter-spacing: -0.06em; color: var(--in-link); }
.in-app-erro :is(h1, h2) { font: var(--in-peso-titulo) clamp(22px, 5.4cqi, 30px)/1.15 var(--in-fonte); font-stretch: var(--in-largura-titulo); letter-spacing: -0.015em; text-wrap: balance; }
.in-app-erro p { max-width: 52ch; color: var(--in-texto-2); text-wrap: pretty; }
.in-app-erro-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.in-app-erro-id { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: var(--in-raio-m); border: 1px solid var(--in-borda); background: var(--in-app-afundado); font: 400 12px/1.3 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-erro-id b { font-weight: 500; color: var(--in-texto); }
.in-app-erro-id button { padding: 6px 8px; border: 1px solid var(--in-borda-forte); border-radius: var(--in-raio-s); background: var(--in-app-cartao); color: var(--in-texto); font: 500 11px/1 var(--in-fonte-mono); cursor: pointer; }
.in-app-erro-id button:hover { border-color: var(--in-texto-2); }

/* ---------- Entrar e acessos: telas de fora do sistema ----------
 * <main class="in-app in-app-entrada"><div class="in-app-entrada-grade"> com a marca à esquerda
 * (in-escuro in-malha) e o cartão à direita. Em tela cheia ocupa 100svh; dentro de outra página use
 * in-app-entrada--contida, com a altura dada pelo pai. Abaixo de 820 px de largura só o cartão. */
.in-app-entrada { container: in-app-entrada / inline-size; box-sizing: border-box; inline-size: 100%; display: grid; min-height: 100svh; background: var(--in-app-fundo); color: var(--in-texto); }
.in-app-entrada--contida { height: 100%; min-height: 0; }
.in-app-entrada-grade { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
.in-app-entrada-marca { display: none; }
@container in-app-entrada (min-width: 820px) {
  .in-app-entrada-grade:has(> .in-app-entrada-marca) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .in-app-entrada-marca { position: relative; isolation: isolate; display: grid; align-content: space-between; gap: 32px; padding: 40px; overflow: hidden; background-color: var(--in-navy-900); color: var(--in-texto); }
  .in-app-entrada-grade:has(> .in-app-entrada-marca) .in-app-entrada-cartao > .in-logo { display: none; }
}
.in-app-entrada-marca .in-logo { width: 104px; }
.in-app-entrada-frase { position: relative; font: var(--in-peso-display) clamp(28px, 3.6cqi, 44px)/1.02 var(--in-fonte); font-stretch: var(--in-largura-display); letter-spacing: -0.03em; max-width: 11ch; }
.in-app-entrada-arco { position: absolute; z-index: -1; right: 40px; bottom: 40px; width: min(34%, 180px); aspect-ratio: 1; background: var(--in-laranja); }
.in-app-entrada-rodape { position: relative; max-width: 24ch; font: 400 11.5px/1.5 var(--in-fonte-mono); color: var(--in-navy-100); }
.in-app-entrada-lado { display: grid; place-items: center; padding: 32px 20px; }
.in-app-entrada-cartao { display: grid; gap: 18px; width: min(400px, 100%); }
.in-app-entrada-cartao > .in-logo { width: 80px; margin-bottom: 10px; }
.in-app-entrada-produto { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--in-fonte-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--in-link); }
.in-app-entrada-produto::before { content: ""; width: 7px; height: 7px; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }
.in-app-entrada-cartao :is(h1, h2, h3) { font: var(--in-peso-titulo) clamp(24px, 3cqi, 30px)/1.12 var(--in-fonte); font-stretch: var(--in-largura-titulo); letter-spacing: -0.02em; }
.in-app-entrada-cartao > p { color: var(--in-texto-2); }
.in-app-entrada-cartao .in-btn { min-height: 44px; }
.in-app-entrada-cartao .in-campo :is(input, select) { min-height: 48px; }
.in-app-entrada-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--in-app-afundado); border: 1px solid var(--in-borda); color: var(--in-texto); }
.in-app-entrada-icone .in-app-icone { width: 24px; height: 24px; }
.in-app-entrada-icone--atencao { background: var(--in-app-atencao-fundo); border-color: var(--in-app-atencao-borda); color: var(--in-app-atencao); }
.in-app-entrada-icone--erro { background: var(--in-app-erro-fundo); border-color: var(--in-app-erro-borda); color: var(--in-app-erro); }
.in-app-entrada-icone--sucesso { background: var(--in-app-sucesso-fundo); border-color: var(--in-app-sucesso-borda); color: var(--in-app-sucesso); }
.in-app-entrada-icone--destaque { background: var(--in-app-destaque-fundo); border-color: var(--in-app-destaque-borda); color: var(--in-link); }
.in-app-entrada-pe { padding-top: 14px; border-top: 1px solid var(--in-borda); font-size: 12.5px; color: var(--in-texto-2); }
.in-app-entrada-pe a, .in-app-entrada-pe .in-app-link { color: var(--in-link); font-weight: 560; }
.in-app-ou { display: flex; align-items: center; gap: 12px; font: 500 10.5px/1 var(--in-fonte-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--in-texto-2); }
.in-app-ou::before, .in-app-ou::after { content: ""; flex: 1; height: 1px; background: var(--in-borda); }
.in-app-quem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--in-raio-m); background: var(--in-app-afundado); border: 1px solid var(--in-borda); font-size: 13.5px; }
.in-app-quem > span:not(.in-app-avatar) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.in-app-quem .in-app-link { flex: none; font-size: 13px; }

/* Botão do Google, nas cores e medidas da marca do Google ("Sign in with Google", diretrizes de marca).
 * Claro: fundo #FFF, borda #747775, texto #1F1F1F. Escuro: sem preenchimento, só o fio (papel a 26%) e o
 * texto em papel: o #131314 do Google vira uma caixa quase preta sobre o navy (reprovado em 09/11/2026,
 * "fino, decente"). Neutro: fundo #F2F2F2, sem borda. Nunca o botão desenhado pelo Google (iframe com o
 * "G" num círculo branco): o clique chama o token client do Google. Logo "G" em quatro cores, 20 px; Roboto Medium 14/20 (carregar a
 * Roboto 500 onde o botão existir). São as cores do Google, não as da LB in: a única exceção ao
 * "só papel" deste arquivo. O botão segue o tema; --escuro e --neutro fixam a versão. */
.in-app-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; padding: 0 12px; border-radius: var(--in-raio-pilula); border: 1px solid #747775; background: #FFFFFF; color: #1F1F1F; font: 500 14px/20px Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.25px; cursor: pointer; transition: background-color 0.218s, box-shadow 0.218s; }
.in-app-google:hover { background: #F8F8F8; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.in-app-google svg { width: 20px; height: 20px; flex: none; }
.in-escuro .in-app-google, [data-tema="escuro"] .in-app-google { border-color: rgba(250, 248, 245, 0.26); background: transparent; color: var(--in-papel-50); }
.in-escuro .in-app-google:hover, [data-tema="escuro"] .in-app-google:hover { border-color: rgba(250, 248, 245, 0.45); background: rgba(250, 248, 245, 0.05); box-shadow: none; }
.in-claro .in-app-google { border-color: #747775; background: #FFFFFF; color: #1F1F1F; }
.in-claro .in-app-google:hover { background: #F8F8F8; }
.in-app-google.in-app-google--escuro { border-color: rgba(250, 248, 245, 0.26); background: transparent; color: var(--in-papel-50); }
.in-app-google.in-app-google--neutro { border-color: #F2F2F2; background: #F2F2F2; color: #1F1F1F; }
.in-app-google[aria-busy="true"] { cursor: progress; }

/* Código de 6 dígitos: um campo de verdade (cola, preenchimento automático, leitor de tela) por cima
 * de seis casas desenhadas. data-estado="erro" | "verificando" | "certo" no contêiner. */
.in-app-codigo { position: relative; display: grid; gap: 10px; }
.in-app-codigo-casas { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 10px repeat(3, minmax(0, 1fr)); gap: 6px; pointer-events: none; }
.in-app-codigo-casas span { display: grid; place-items: center; height: 56px; border-radius: var(--in-raio-m); border: 1.5px solid var(--in-borda-forte); background: var(--in-superficie-2); font: 500 24px/1 var(--in-fonte-mono); color: var(--in-texto); transition: border-color var(--in-duracao-rapida) var(--in-curva), box-shadow var(--in-duracao-rapida) var(--in-curva); }
.in-app-codigo-casas i { align-self: center; height: 2px; background: var(--in-borda-forte); }
.in-app-codigo input { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 56px; padding: 0; border: 0; outline: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; }
.in-app-codigo input::selection { background: transparent; }
.in-app-codigo:focus-within .in-app-codigo-casas span.atual { border-color: var(--in-laranja); box-shadow: 0 0 0 4px rgba(255, 105, 0, 0.16); }
.in-app-codigo:focus-within .in-app-codigo-casas span.atual:empty::after { content: ""; width: 2px; height: 24px; background: var(--in-texto); animation: in-app-pisca 1s steps(1) infinite; }
@keyframes in-app-pisca { 50% { opacity: 0; } }
.in-app-codigo[data-estado="erro"] .in-app-codigo-casas span { border-color: var(--in-app-erro); }
.in-app-codigo[data-estado="certo"] .in-app-codigo-casas span { border-color: var(--in-app-sucesso); }
.in-app-codigo[data-estado="verificando"] .in-app-codigo-casas span { border-style: dashed; }
.in-app-codigo-msg { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 13px; color: var(--in-texto-2); }
.in-app-codigo[data-estado="erro"] .in-app-codigo-msg { color: var(--in-app-erro); }
.in-app-codigo[data-estado="certo"] .in-app-codigo-msg { color: var(--in-app-sucesso); }

/* Convite: e-mails em fichas. */
.in-app-emails { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 7px 10px 7px 8px; border-radius: var(--in-raio-m); border: 1.5px solid var(--in-borda); background: var(--in-superficie-2); cursor: text; }
.in-app-emails:focus-within { border-color: var(--in-laranja); background: var(--in-superficie-elevada); box-shadow: 0 0 0 4px rgba(255, 105, 0, 0.16); }
.in-app-emails input { flex: 1 1 180px; min-width: 120px; height: 30px; padding: 0 4px; border: 0; outline: 0; background: transparent; color: var(--in-texto); font: 400 14px/1 var(--in-fonte); }
.in-app-emails input::placeholder { color: var(--in-texto-2); opacity: 0.85; }
.in-app-emails .in-app-ficha > span { font: 450 12.5px/1.2 var(--in-fonte-mono); }

/* ---------- Seleção e detalhe (v1.6): peças que o DUBAI precisou e o kit não tinha ----------
 * Documentação na página "Seleção e detalhe" (selecao) do grupo Produto. Comportamento em in-app.js
 * (data-app="dica", "acordeao", "escolhas" e "barras-linha"). Só papéis do tema. */

/* Dica (tooltip): data-dica com o texto, data-lado = cima (padrão), baixo, direita ou esquerda. Aparece no
 * hover e no foco, some com Esc. Não é o nome do controle: o botão só de ícone continua com aria-label. */
.in-app-dica { position: relative; display: inline-flex; }
.in-app-dica::after { content: attr(data-dica); position: absolute; z-index: var(--in-z-sobreposto); left: 50%; bottom: calc(100% + 8px); width: max-content; max-width: 260px; padding: 6px 9px; border-radius: var(--in-raio-m); background: var(--in-superficie-invertida); color: var(--in-texto-inverso); font: 500 12.5px/1.3 var(--in-fonte); white-space: normal; text-align: left; pointer-events: none; opacity: 0; transform: translateX(-50%) translateY(2px); transition: opacity var(--in-duracao-rapida) var(--in-curva), transform var(--in-duracao-rapida) var(--in-curva); }
.in-app-dica[data-lado="baixo"]::after { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-2px); }
.in-app-dica[data-lado="direita"]::after { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(-2px, -50%); }
.in-app-dica[data-lado="esquerda"]::after { left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(2px, -50%); }
.in-app-dica:is(:hover, :focus-within)::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.in-app-dica:is([data-lado="direita"], [data-lado="esquerda"]):is(:hover, :focus-within)::after { transform: translate(0, -50%); }
.in-app-dica.in-app-dica--oculta::after { opacity: 0; }

/* Opção de escopo: lista de escolha única (role="option") dentro do menu de escopo da moldura. */
.in-app-escopo-opcao { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--in-raio-m); background: transparent; color: var(--in-texto); font: 450 13.5px/1.2 var(--in-fonte); text-align: left; cursor: pointer; }
.in-app-escopo-opcao > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-escopo-opcao small { flex: none; font: 450 11px/1 var(--in-fonte-mono); color: var(--in-texto-2); }
.in-app-escopo-opcao:is(:hover, :focus-visible, .ativo) { outline: none; background: var(--in-app-hover); }
.in-app-escopo-opcao[aria-selected="true"]::after { content: ""; width: 8px; height: 8px; flex: none; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 0 100%); }

/* Cartão de escolha: opção rica (ícone, título, texto), um botão com aria-pressed. Em grupo de escolha única
 * use role="radiogroup" e role="radio" com aria-checked; o visual é o mesmo. */
.in-app-cartoes-escolha { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.in-app-cartao-escolha { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--in-borda); border-radius: var(--in-raio-l); background: var(--in-app-cartao); color: var(--in-texto); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--in-duracao-rapida) var(--in-curva), background-color var(--in-duracao-rapida) var(--in-curva); }
.in-app-cartao-escolha > .in-app-icone, .in-app-cartao-escolha > .in-app-cartao-escolha-icone { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--in-texto-2); }
.in-app-cartao-escolha > b, .in-app-cartao-escolha > strong { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.in-app-cartao-escolha > small, .in-app-cartao-escolha > span { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--in-texto-2); text-wrap: pretty; }
.in-app-cartao-escolha:hover { border-color: var(--in-borda-forte); background: var(--in-app-hover); }
.in-app-cartao-escolha:focus-visible { outline: 2px solid var(--in-foco); outline-offset: 2px; }
.in-app-cartao-escolha:is([aria-pressed="true"], [aria-checked="true"]) { border-color: var(--in-app-selecao-borda); background: var(--in-app-selecao); }
.in-app-cartao-escolha:is([aria-pressed="true"], [aria-checked="true"]) > .in-app-icone { color: var(--in-link); }
.in-app-cartao-escolha:is([aria-pressed="true"], [aria-checked="true"])::after { content: ""; position: absolute; top: 10px; right: 10px; width: 9px; height: 9px; background: var(--in-laranja); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.in-app-cartao-escolha:disabled, .in-app-cartao-escolha[aria-disabled="true"] { cursor: not-allowed; background: var(--in-app-afundado); color: var(--in-texto-2); }

/* Linha selecionável: opção de lista suspensa de busca (role="option") e item de lista mestre-detalhe (botão ou
 * link com aria-current). .ativo é o realce do teclado; aria-selected e aria-current, a escolha. */
.in-app-lista-selecionavel { display: grid; gap: 2px; margin: 0; padding: 4px; list-style: none; }
.in-app-linha-selecionavel { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 7px 10px; border: 0; border-radius: var(--in-raio-m); background: transparent; color: var(--in-texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.in-app-linha-selecionavel > span:not(.in-app-avatar):not(.in-app-status) { display: grid; flex: 1; min-width: 0; }
.in-app-linha-selecionavel b { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-linha-selecionavel small { font-size: 12.5px; color: var(--in-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-linha-selecionavel > .in-app-num, .in-app-linha-selecionavel > em { flex: none; font: 450 12px/1 var(--in-fonte-mono); font-style: normal; font-feature-settings: "tnum" 1; color: var(--in-texto-2); }
.in-app-linha-selecionavel:is(:hover, .ativo) { background: var(--in-app-hover); }
.in-app-linha-selecionavel:focus-visible { outline: 2px solid var(--in-foco); outline-offset: -2px; }
.in-app-linha-selecionavel.ativo { box-shadow: inset 2px 0 0 var(--in-laranja); }
.in-app-linha-selecionavel:is([aria-selected="true"], [aria-current="true"], [aria-current="page"]) { background: var(--in-app-selecao); box-shadow: inset 2px 0 0 var(--in-laranja); }

/* Cartão de pessoa clicável: avatar, nome (14 px, sempre), cargo em texto secundário e o vínculo em mono.
 * O laranja fica só na borda de ênfase do escolhido. */
.in-app-cartao-pessoa { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--in-borda); border-radius: var(--in-raio-l); background: var(--in-app-cartao); color: var(--in-texto); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color var(--in-duracao-rapida) var(--in-curva), background-color var(--in-duracao-rapida) var(--in-curva); }
.in-app-cartao-pessoa > .in-app-avatar { width: 40px; height: 40px; font-size: 13px; }
.in-app-cartao-pessoa > span:not(.in-app-avatar):not(.in-app-status) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.in-app-cartao-pessoa b { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-cartao-pessoa small { font-size: 12.5px; color: var(--in-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-cartao-pessoa em { font: 450 11px/1.3 var(--in-fonte-mono); font-style: normal; letter-spacing: 0.02em; color: var(--in-texto-2); }
.in-app-cartao-pessoa:hover { border-color: var(--in-borda-forte); background: var(--in-app-hover); }
.in-app-cartao-pessoa:focus-visible { outline: 2px solid var(--in-foco); outline-offset: 2px; }
.in-app-cartao-pessoa:is([aria-pressed="true"], [aria-current="true"]) { border-color: var(--in-app-selecao-borda); background: var(--in-app-selecao); box-shadow: inset 3px 0 0 var(--in-laranja); }

/* Acordeão: o cabeçalho é um botão com aria-expanded e aria-controls; o corpo usa hidden. */
.in-app-acordeao { position: relative; display: grid; border: 1px solid var(--in-borda); border-radius: var(--in-raio-l); background: var(--in-app-cartao); overflow: hidden; }
.in-app-acordeao > * + * { border-top: 1px solid var(--in-borda); }
.in-app-acordeao-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 16px; border: 0; background: transparent; color: var(--in-texto); font: 600 14px/1.3 var(--in-fonte); text-align: left; cursor: pointer; }
.in-app-acordeao-cab > span { flex: 1; min-width: 0; }
.in-app-acordeao-cab small { font: 450 12px/1 var(--in-fonte-mono); font-feature-settings: "tnum" 1; color: var(--in-texto-2); }
.in-app-acordeao-cab::after { content: ""; width: 16px; height: 16px; flex: none; background: var(--in-texto-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--in-duracao-rapida) var(--in-curva); }
.in-app-acordeao-cab[aria-expanded="true"]::after { transform: rotate(180deg); }
.in-app-acordeao-cab:hover { background: var(--in-app-hover); }
.in-app-acordeao-cab:focus-visible { outline: 2px solid var(--in-foco); outline-offset: -2px; }
.in-app-acordeao-corpo { padding: 14px 16px 16px; }
.in-app-acordeao-corpo[hidden] { display: none; }

/* Linha-barra de gráfico: rótulo, barra e valor numa linha que se escolhe (aria-pressed). Com uma escolhida,
 * as outras barras recuam; o texto não perde contraste. --valor (0 a 100%) e --cor (padrão --in-dado-1). */
.in-app-barras-linha { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.in-app-barra-linha { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 4px 8px; border: 0; border-radius: var(--in-raio-m); background: transparent; color: var(--in-texto); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.in-app-barra-linha > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-app-barra-linha > i { position: relative; height: 10px; border-radius: 0 4px 4px 0; background: var(--in-app-afundado); overflow: hidden; }
.in-app-barra-linha > i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--valor, 0%); border-radius: inherit; background: var(--cor, var(--in-dado-1)); transition: width var(--in-duracao-lenta) var(--in-curva), opacity var(--in-duracao-rapida) var(--in-curva); }
.in-app-barra-linha > b, .in-app-barra-linha > .in-app-num { font: 500 12.5px/1 var(--in-fonte-mono); font-feature-settings: "tnum" 1; text-align: right; }
.in-app-barra-linha:hover { background: var(--in-app-hover); }
.in-app-barra-linha:focus-visible { outline: 2px solid var(--in-foco); outline-offset: -2px; }
.in-app-barra-linha[aria-pressed="true"] { background: var(--in-app-selecao); box-shadow: inset 2px 0 0 var(--in-laranja); }
.in-app-barras-linha[data-app-com-escolha] .in-app-barra-linha:not([aria-pressed="true"]) > i::before { opacity: 0.35; }

/* Valor vazio: campo sem dado. Vê-se "·", o leitor de tela lê "Sem registro". Nunca travessão. */
.in-app-valor-vazio { position: relative; color: var(--in-texto-2); }

/* Presença: situação da pessoa no dia, sempre com ponto de cor e palavra (e ícone quando couber).
 * data-presenca = ponto, almoco, saiu, ferias, folga, dispensa, afastado ou falta. */
.in-app-presenca { --cor: var(--in-texto-2); display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; padding: 3px 9px 3px 7px; border-radius: var(--in-raio-pilula); border: 1px solid color-mix(in srgb, var(--cor) 38%, transparent); background: color-mix(in srgb, var(--cor) 14%, var(--in-app-cartao)); color: var(--in-texto); font: 500 12px/1.3 var(--in-fonte); white-space: nowrap; }
.in-app-presenca::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--cor); }
.in-app-presenca .in-app-icone { width: 14px; height: 14px; color: var(--cor); }
.in-app-presenca:has(.in-app-icone)::before { display: none; }
[data-presenca="ponto"] { --cor: var(--in-presenca-ponto); }
[data-presenca="almoco"] { --cor: var(--in-presenca-almoco); }
[data-presenca="saiu"] { --cor: var(--in-presenca-saiu); }
[data-presenca="ferias"] { --cor: var(--in-presenca-ferias); }
[data-presenca="folga"] { --cor: var(--in-presenca-folga); }
[data-presenca="dispensa"] { --cor: var(--in-presenca-dispensa); }
[data-presenca="afastado"] { --cor: var(--in-presenca-afastado); }
[data-presenca="falta"] { --cor: var(--in-presenca-falta); }

/* ---------- Menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .in-app-dica::after, .in-app-cartao-escolha, .in-app-cartao-pessoa, .in-app-acordeao-cab::after, .in-app-barra-linha > i::before { transition: none !important; }
  .in-app-corpo, .in-app-trilho, .in-app-trilho-seta, .in-app-segmento > button, .in-app-chave, .in-app-chave::after, .in-app-telao-quadro, .in-app-filtro, .in-app-codigo-casas span, .in-app-icone-btn, .in-app-trilho-item { transition: none !important; }
  .in-app-esqueleto { animation: none; background-image: none; }
  .in-app-telao-passos i.atual::before { width: 100% !important; }
  .in-app-girando { animation-duration: 2.4s; }
  .in-app-dialogo[open], .in-app-gaveta[open], .in-app-comando[open], .in-app-aviso { animation: none; }
  .in-app-codigo:focus-within .in-app-codigo-casas span.atual:empty::after { animation: none; }
}