/* estilo.css — o painel do VPS no system design do painel anterior (web/estatico/
 * estilo.css; agent-observer#30). Tokens, fontes, cores, casca e componentes sao
 * os de la, com os mesmos nomes; so entra o que as telas daqui usam.
 *
 * REGRA DE COR, a do desenho (web/, korc, ycognio):
 *   verde  = o accent: a acao principal e o que esta bem
 *   ambar  = atencao: o ato sensivel e o que espera alguem
 *   cinza  = o resto
 *   vermelho so para erro. Nao ha azul.
 *
 * CRITERIO DOS BOTOES (decisao do dono, agent-observer#30):
 *   .btn-accent    verde cheio: a acao principal da tela, uma por tela
 *                  (Entrar, Seguir, Assinar com passkey, Seguir a adesao);
 *   .btn-positivo  verde suave: o ato que concede ou cria
 *                  (Autorizar, Aprovar, Admitir, Cadastrar, Publicar);
 *   .btn-sensivel  ambar: o ato que tira ou desfaz (Revogar, Retirar, Remover);
 *   sem classe     contorno neutro: navegacao e o secundario (Cancelar, Tema, Sair).
 *
 * NAO escrever glob com asterisco dentro de comentario: o par asterisco+barra
 * fecha o comentario e o parser engole a regra seguinte sem erro.
 */

/* ------------------------------------------------------------------ fontes
 * Geist e Geist Mono variaveis, copias byte a byte de web/estatico/fontes/
 * (OFL-1.1 em fontes/OFL.txt). Auto-hospedadas: o painel nao depende de CDN. */
@font-face {
  font-family: 'Geist';
  src: url('fontes/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fontes/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ tokens
 * ESCURO E O PADRAO: o `:root` sozinho ja e o escuro. */
:root,
:root[data-tema="escuro"] {
  color-scheme: dark;
  --mono: 'Geist Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --color-bg: #0d0f12;
  --color-surface: #15181c;
  --color-text: #e8eaed;
  --color-divider: rgba(255, 255, 255, .08);
  --color-neutral-200: #1f2328;
  --color-neutral-400: #3a4048;
  --color-neutral-500: #5a616b;
  --color-neutral-600: #7d848e;
  --color-neutral-700: #9aa1ab;
  --color-neutral-800: #c2c7ce;
  --color-accent: oklch(0.74 0.17 150);
  --color-accent-100: oklch(0.27 0.05 150);
  --color-accent-200: oklch(0.32 0.07 150);
  --color-accent-300: oklch(0.40 0.09 150);
  --color-accent-400: oklch(0.50 0.12 150);
  --color-accent-600: oklch(0.68 0.16 150);
  --color-accent-700: oklch(0.80 0.15 150);
  --amb: oklch(0.70 0.15 65);
  --amb-t: oklch(0.82 0.12 72);
  --amb-bg: oklch(0.27 0.05 70);
  --amb-line: oklch(0.45 0.08 70);
  --amb-hover: oklch(0.32 0.06 70);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .55);
  --erro: oklch(0.68 0.19 25);
}
:root[data-tema="claro"] {
  color-scheme: light;
  --color-bg: #f6f7f8;
  --color-surface: #ffffff;
  --color-text: #15181c;
  --color-divider: rgba(0, 0, 0, .09);
  --color-neutral-200: #eceef1;
  --color-neutral-400: #c6cbd1;
  --color-neutral-500: #9aa1ab;
  --color-neutral-600: #7d848e;
  --color-neutral-700: #5d646e;
  --color-neutral-800: #3d434b;
  --color-accent: oklch(0.66 0.17 150);
  --color-accent-100: oklch(0.96 0.03 150);
  --color-accent-200: oklch(0.92 0.06 150);
  --color-accent-300: oklch(0.86 0.09 150);
  --color-accent-400: oklch(0.76 0.13 150);
  --color-accent-600: oklch(0.56 0.15 150);
  --color-accent-700: oklch(0.46 0.13 150);
  --amb-t: oklch(0.48 0.12 55);
  --amb-bg: oklch(0.95 0.04 80);
  --amb-line: oklch(0.82 0.09 70);
  --amb-hover: oklch(0.92 0.05 80);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .10);
  --erro: oklch(0.55 0.20 25);
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }
/* `display: flex` venceria o atributo hidden sem isto. */
[hidden] { display: none !important; }
.oculto { display: none !important; }
html, body {
  margin: 0; padding: 0;
  background: var(--color-bg); color: var(--color-text);
  font: 14px/1.4 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: 14px; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-300); }
.mono, pre, td.credencial, dd.tenant { font-family: var(--mono); font-variant-numeric: tabular-nums; }
* { scrollbar-width: thin; scrollbar-color: var(--color-neutral-400) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-400); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
h1, h2 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
.erro { color: var(--erro); }
/* O aviso vazio nao ocupa lugar: no login, abria um vao entre a senha e o Entrar. */
.erro:empty { display: none; }
.apagado, .idade { color: var(--color-neutral-700); }

/* ------------------------------------------------------------------ botoes
 * O botao comum e o de contorno do web/; `.btn-accent` e a acao principal;
 * `.btn-mini.urgente` e o ato que espera o dono. */
button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; white-space: nowrap; cursor: pointer;
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-neutral-500); border-radius: 8px;
}
button:hover { background: var(--color-neutral-200); }
button:disabled { opacity: .5; cursor: default; }
.btn-accent { background: var(--color-accent); color: #06140b; border: 0; font-weight: 600; }
.btn-accent:hover { background: var(--color-accent-600); }
.btn-positivo { background: var(--color-accent-100); color: var(--color-accent-700); border-color: var(--color-accent-300); font-weight: 600; }
.btn-positivo:hover { background: var(--color-accent-200); }
.btn-sensivel { background: transparent; color: var(--amb-t); border-color: var(--amb-line); }
.btn-sensivel:hover { background: var(--amb-hover); }
.btn-mini { height: 30px; padding: 0 10px; font-size: 13px; }
/* Na celula da tabela o rotulo longo quebra a linha, e o botao nao vaza do cartao (agent-observer#31). */
td .btn-mini { white-space: normal; height: auto; min-height: 30px; padding: 4px 10px; text-align: left; }

/* ------------------------------------------------------------------ campos */
input, select, textarea {
  padding: 8px 10px; border: 1px solid var(--color-divider); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text); max-width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-accent-400); outline: none; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--color-neutral-800); }

/* ------------------------------------------------------------------ marca */
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-selo {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: var(--color-accent); color: #06140b; display: grid; place-items: center;
}
.marca strong { font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ casca
 * Topo de 64px + grade `232px | 1fr`, com a lateral das vistas fixa. */
.topo {
  position: sticky; top: 0; z-index: 40;
  min-height: 64px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 20px; background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}
.pilula {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--color-divider); border-radius: 10px; padding: 6px 12px;
  background: var(--color-surface); font-size: 12px; color: var(--color-neutral-800); white-space: nowrap;
}
/* O ponto de estado, o mesmo em pilula, lateral, cartao e selo. */
.ponto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-neutral-600); display: inline-block; }
.ponto.bom { background: var(--color-accent); }
.ponto.atencao { background: var(--amb); }
.ponto.ruim { background: var(--erro); }
.fonte { color: var(--color-neutral-700); }
.fonte.boa { color: var(--color-accent-700); }
.fonte.ruim { color: var(--erro); }
.espaco { flex: 1; }
.controles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#usuario { font-size: 13px; color: var(--color-neutral-700); white-space: nowrap; }
.corpo { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.lateral {
  border-right: 1px solid var(--color-divider); padding: 18px 12px 14px;
  position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto;
  display: flex; flex-direction: column;
}
.lat-rotulo { display: flex; justify-content: space-between; padding: 14px 10px 8px; font-size: 12px; letter-spacing: .08em; color: var(--color-neutral-700); }
.lat-rotulo:first-child { padding-top: 0; }
.lat-chave { font-family: var(--mono); font-size: 11px; color: var(--color-neutral-600); }
.lat-org { justify-content: flex-start; gap: 10px; width: 100%; height: auto; padding: 9px 10px; border: 0; border-radius: 8px; text-align: left; }
.lat-org-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* O cartao da conta, embaixo (korc, ycognio). */
.lat-rodape { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; }
.lat-conta {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-surface);
}
.lat-conta-selo { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--color-accent-100); color: var(--color-accent-700); }
.lat-conta-txt { display: grid; min-width: 0; line-height: 1.25; }
.lat-conta-txt strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.lat-conta-txt span { font-size: 12px; color: var(--color-neutral-700); overflow: hidden; text-overflow: ellipsis; }
.lat-mono { margin: 0; padding: 0 4px; font-size: 12px; gap: 4px 12px; }
.lat-mono dd { text-align: right; color: var(--color-neutral-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-vistas { display: flex; flex-direction: column; gap: 2px; }
.lat-vistas button {
  justify-content: flex-start; width: 100%; height: auto; padding: 9px 10px;
  border: 0; border-radius: 8px; text-align: left;
}
.lat-vistas button.ativo { background: var(--color-accent-100); color: var(--color-accent-700); font-weight: 600; }
.conteudo { padding: 24px 28px 40px; min-width: 0; }

/* ------------------------------------------------------------------ conteudo */
/* O cabecalho de pagina: trilha em mono, titulo grande e uma linha embaixo. */
.cab-pagina { margin-bottom: 22px; }
.trilha { font-size: 13px; color: var(--color-neutral-700); margin-bottom: 10px; }
.cab-pagina h1 { font-size: 34px; line-height: 1.15; font-weight: 700; }
.cab-sub { margin: 8px 0 0; font-size: 15px; color: var(--color-neutral-700); }
/* A faixa de atencao, ambar (korc). */
.aviso {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; padding: 16px 20px;
  border: 1px solid var(--amb-line); border-radius: 12px; background: var(--amb-bg);
}
.aviso-marca { width: 14px; height: 14px; border-radius: 3px; background: var(--amb); flex: none; margin-top: 3px; }
.aviso strong { display: block; font-size: 15px; }
.aviso #aviso-txt { color: var(--color-neutral-800); }
/* O cartao: superficie, borda e raio 12, cabecalho com titulo e meta. */
.cartao { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 12px; margin-bottom: 18px; min-width: 0; }
.cartao-cab { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--color-divider); }
.cartao-cab h2 { font-size: 18px; margin: 0; }
/* O cartao retratil (agent-observer#34): o titulo e o botao, com a seta. */
.cartao-alterna {
  display: inline-flex; align-items: center; gap: 10px; height: auto; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
}
.cartao-alterna:hover { background: none; }
.cartao-alterna:hover h2 { color: var(--color-accent-700); }
.cartao-seta {
  width: 8px; height: 8px; flex: none; border-right: 2px solid var(--color-neutral-600); border-bottom: 2px solid var(--color-neutral-600);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.cartao.retraido .cartao-seta { transform: rotate(-45deg); }
.cartao.retraido .cartao-cab { border-bottom: 0; }
.cartao-extra { margin-left: auto; }
/* O modo da federacao na barra da Presenca: bloqueio em ambar, o resto neutro. */
.rotulo-modo {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--color-divider); color: var(--color-neutral-800); font-family: var(--mono);
}
.rotulo-modo-k { color: var(--color-neutral-600); }
.rotulo-modo.bloqueio { border-color: var(--amb-line); background: var(--amb-bg); color: var(--amb-t); }
.cartao-meta { color: var(--color-neutral-700); }
.cartao-corpo { padding: 16px 22px; overflow-x: auto; }
.cartao-corpo > dl:last-child { margin-bottom: 0; }
.cartao-pe { padding: 0 22px 16px; margin: 0; }
/* A tabela dentro do cartao encosta nas bordas dele. */
.cartao-corpo > table { margin: -16px -22px; width: calc(100% + 44px); border: 0; border-radius: 0; background: transparent; }
/* O selo de estado com ponto (o "● ACTIVE" do ycognio) e o selo de papel. */
.selo-estado { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.selo-papel {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px;
  border: 1px solid var(--color-accent-300); color: var(--color-accent-700); background: var(--color-accent-100);
}
table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 10px;
}
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
th { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-700); }
th, td { padding: 12px 22px; }
tr:last-child td { border-bottom: 0; }
dl { margin: 0 0 12px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; }
dt { color: var(--color-neutral-700); }
dd { margin: 0; min-width: 0; }
.acoes, .botoes-esq { display: flex; gap: 6px; flex-wrap: wrap; }
.botoes-esq { margin: 12px 0; }
.botoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
td.credencial, dd.tenant { word-break: break-all; font-size: 13px; }
dd.tenant { user-select: all; }
pre { white-space: pre-wrap; word-break: break-all; background: var(--color-bg); border: 1px solid var(--color-divider); padding: 12px; border-radius: 8px; font-size: 13px; }

dialog {
  border: 0; border-radius: 12px; padding: 20px 22px;
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md);
  max-width: min(720px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(0, 0, 0, .5); }
dialog h2 { font-size: 18px; margin-bottom: 8px; }
/* o formulario dos atos com campos (agent-observer#29) */
#dialogo-campos { width: min(720px, 92vw); }
#campos-lista .campo { display: grid; gap: 6px; margin: 12px 0; }
#campos-lista label { display: block; }
#campos-lista input, #campos-lista textarea { width: 100%; }
#campos-lista textarea { font-family: var(--mono); font-size: 13px; }
.obrigatorio { color: var(--erro); }

/* ------------------------------------------------------------------ login
 * Como o do korc-platform (apps/web/src/vistas/Entrar.tsx, `.entrar` do app.css). */
.entrar {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.entrar__caixa { width: min(400px, 100%); display: grid; gap: 28px; }
.entrar h1 { margin: 16px 0 8px; font-size: 26px; line-height: 32px; font-weight: 700; }
.entrar__sub { margin: 0; line-height: 22px; color: var(--color-neutral-700); }
.entrar form { display: grid; gap: 16px; }
.entrar form .btn-accent { height: 40px; }
.entrar ul {
  list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--color-divider);
  display: grid; gap: 8px; font-size: 13px; line-height: 18px; color: var(--color-neutral-700);
}
.entrar li b { display: inline-block; min-width: 92px; color: var(--color-neutral-800); font-weight: 600; }

/* ------------------------------------------------------------------ orgs
 * Como o do ycognio (frontend/src/features/orgs/OrgListPage.tsx): cabecalho
 * com a contagem e cartoes em grade. */
.orgs { list-style: none; margin: 0; padding: 18px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.org-cartao {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  width: 100%; height: auto; min-height: 120px; padding: 16px 18px; text-align: left;
  background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 12px;
}
.org-cartao:hover { background: var(--color-bg); border-color: var(--color-accent-400); }
.org-nome { display: flex; align-items: center; gap: 8px; }
.org-nome strong { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.org-seta { color: var(--color-neutral-600); }
.org-selos { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ teia
 * O grafo da aba Teia (teia.js; agent-observer#32). A cor segue a regra do
 * desenho: issue aberta e o que espera alguem (ambar), mensagem e o que flui
 * (verde), barrada e erro (vermelho). O no fora da lista de nos e tracejado. */
.teia-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.teia-grade > .cartao { margin-bottom: 0; }
.teia-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.teia-fundo { fill: transparent; }
.teia-aresta .linha { fill: none; stroke-linecap: round; transition: opacity .15s; }
.teia-aresta.issue .linha { stroke: var(--amb); }
.teia-aresta.mensagem .linha { stroke: var(--color-accent-600); opacity: .85; }
.teia-alvo { fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
.teia-seta.issue path { fill: var(--amb); }
.teia-seta.mensagem path { fill: var(--color-accent-600); }
.teia-rot {
  font: 600 11px var(--mono); text-anchor: middle; dominant-baseline: central; pointer-events: none;
  paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; stroke-linejoin: round;
}
.teia-rot.issue { fill: var(--amb-t); }
.teia-rot.mensagem { fill: var(--color-accent-700); }
.teia-rot.barrada { fill: var(--erro); }
.teia-no { cursor: grab; outline: none; }
.teia-svg.arrastando, .teia-svg.arrastando .teia-no { cursor: grabbing; }
.teia-no .disco { fill: var(--color-surface); stroke: var(--color-accent-400); stroke-width: 2px; transition: fill .15s; }
.teia-no:hover .disco, .teia-no:focus-visible .disco { fill: var(--color-accent-100); }
.teia-no.sel .disco { stroke: var(--color-accent); stroke-width: 3.5px; fill: var(--color-accent-100); }
.teia-no.fora .disco { stroke: var(--color-neutral-500); stroke-dasharray: 4 3; }
.teia-no .conta { fill: var(--amb-t); font: 700 14px var(--mono); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.teia-no .nome {
  fill: var(--color-text); font-size: 13px; font-weight: 600; pointer-events: none;
  paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; stroke-linejoin: round;
}
.teia-no.fora .nome { fill: var(--color-neutral-700); font-weight: 500; }
/* O foco: o que nao toca no selecionado (ou no que esta sob o mouse) se apaga. */
.teia-svg.com-foco .teia-aresta:not(.acesa), .teia-svg.com-foco .teia-rot:not(.acesa) { opacity: .1; }
.teia-svg.com-foco .teia-no:not(.aceso) { opacity: .3; }
.teia-aresta, .teia-rot, .teia-no { transition: opacity .15s; }
.teia-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; font-size: 12px; color: var(--color-neutral-700); }
.teia-leg { display: inline-flex; align-items: center; gap: 6px; }
.teia-dica { margin-left: auto; color: var(--color-neutral-600); }
.teia-amostra { display: inline-block; flex: none; width: 18px; height: 0; border-top: 3px solid var(--color-neutral-600); border-radius: 2px; }
.teia-amostra.issue { border-top-color: var(--amb); }
.teia-amostra.mensagem { border-top-color: var(--color-accent-600); }
.teia-amostra.barrada { border-top: 3px dashed var(--erro); }
.teia-amostra.no, .teia-amostra.fora { width: 14px; height: 14px; border: 2px solid var(--color-accent-400); border-radius: 50%; }
.teia-amostra.fora { border: 2px dashed var(--color-neutral-500); }
.teia-detalhe h3 { margin: 14px 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-700); }
.teia-det-cab { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.teia-det-sub { margin: 6px 0 10px; color: var(--color-neutral-700); }
.teia-detalhe dl { margin-top: 12px; }
.teia-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.teia-linha { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.teia-linha:hover, .teia-linha:focus-visible { background: var(--color-neutral-200); }
.teia-quem { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teia-n { font-weight: 600; }
.teia-quando { color: var(--color-neutral-600); font-size: 12px; min-width: 56px; text-align: right; }
@media (max-width: 1100px) { .teia-grade { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ cascata
 * A aba Cascata (cascata.js; agent-observer#35): abrir um rastro pela ref, a
 * arvore em lista indentada e o detalhe da issue ao lado. A issue que trava o
 * rastro (aberta, sem derivada aberta) leva a borda ambar. */
.cascata-form { display: flex; gap: 8px; flex-wrap: wrap; }
.cascata-form input { flex: 1; min-width: 240px; font-family: var(--mono); font-size: 13px; }
.cascata-lista-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 6px; }
.cascata-lista-tit { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-700); }
.cascata-rastros { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cascata-rastro-linha { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.cascata-rastro-linha:hover, .cascata-rastro-linha:focus-visible, .cascata-rastro-linha.atual { background: var(--color-neutral-200); }
.cascata-quem { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cascata-conta { font-weight: 600; }
.cascata-quando { color: var(--color-neutral-600); font-size: 12px; }
.cascata-nota { margin: 12px 0 0; font-size: 12px; color: var(--color-neutral-600); }
.cascata-grade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.cascata-grade > .cartao { margin-bottom: 0; }
.cascata-rastro { font-size: 12px; color: var(--color-neutral-600); }
/* A arvore: cada nivel recua, com o fio do pai descendo pela esquerda. */
.cascata-arvore, .cascata-filhas { list-style: none; margin: 0; padding: 0; }
.cascata-filhas { margin-left: 13px; padding-left: 18px; border-left: 1px solid var(--color-neutral-400); }
.cascata-filhas > .cascata-item { position: relative; }
.cascata-filhas > .cascata-item::before {
  content: ''; position: absolute; left: -18px; top: 24px; width: 14px; border-top: 1px solid var(--color-neutral-400);
}
.cascata-filhas > .cascata-item:last-child::after {
  content: ''; position: absolute; left: -19px; top: 25px; bottom: 0; border-left: 3px solid var(--color-surface);
}
.cascata-no {
  display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; padding: 9px 10px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
}
.cascata-no:hover, .cascata-no:focus-visible { background: var(--color-neutral-200); }
.cascata-no.sel { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.cascata-no.trava { border-color: var(--amb-line); }
.cascata-no.trava.sel { border-color: var(--amb); }
.cascata-no.fechada .cascata-assunto { color: var(--color-neutral-700); }
.cascata-alterna {
  width: 22px; height: 22px; flex: none; padding: 0; margin-top: 1px; border-radius: 6px; display: grid; place-items: center;
}
.cascata-alterna::before {
  content: ''; width: 7px; height: 7px; border-right: 2px solid var(--color-neutral-700); border-bottom: 2px solid var(--color-neutral-700);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.cascata-alterna.recolhido::before { transform: rotate(-45deg); }
.cascata-alterna-vazio { width: 22px; flex: none; }
.cascata-no-corpo { min-width: 0; display: grid; gap: 4px; }
.cascata-l1, .cascata-l2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.cascata-l2 { font-size: 12px; color: var(--color-neutral-700); }
.cascata-ref { font-size: 12px; color: var(--color-neutral-700); }
.cascata-assunto { font-weight: 600; }
.cascata-trava { font-size: 12px; font-weight: 600; color: var(--amb-t); }
.cascata-bola {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--amb-line); background: var(--amb-bg); color: var(--amb-t);
}
.cascata-contexto { font-family: var(--mono); font-size: 11px; }
.cascata-det-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cascata-det-assunto { margin: 10px 0 2px; font-size: 16px; font-weight: 600; }
.cascata-det-sub { margin: 2px 0 10px; color: var(--color-neutral-700); font-size: 12px; word-break: break-word; }
.cascata-detalhe h3 { margin: 16px 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-700); }
.cascata-detalhe dl { margin-top: 12px; }
.cascata-tempo { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--color-neutral-400); display: grid; gap: 8px; }
.cascata-tempo li { position: relative; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cascata-tempo li::before {
  content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-neutral-500);
}
.cascata-tempo li.feito::before { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.cascata-tempo li.falta { color: var(--color-neutral-600); }
.cascata-tempo-rot { min-width: 76px; font-weight: 500; }
.cascata-ligas, .cascata-registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cascata-liga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.cascata-liga:hover, .cascata-liga:focus-visible { background: var(--color-neutral-200); }
.cascata-registro li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 5px 0; border-bottom: 1px solid var(--color-divider); }
.cascata-registro li:last-child { border-bottom: 0; }
.cascata-reg-em { min-width: 82px; font-size: 12px; }
.cascata-reg-por { font-weight: 500; }
.cascata-reg-verbo { color: var(--color-neutral-700); }
.cascata-texto { white-space: pre-wrap; word-break: break-word; }
.cascata-github { display: inline-block; margin-top: 16px; color: var(--color-accent-700); }
@media (max-width: 1100px) { .cascata-grade { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ alerta
 * Quem aguarda o dono (alerta.js; agent-observer#36): o toast por cima de
 * qualquer aba, em ambar, e a contagem ao lado da aba Aguardando Você. */
.toasts {
  position: fixed; top: 76px; right: 20px; z-index: 50; display: grid; gap: 8px;
  width: min(560px, calc(100vw - 32px)); pointer-events: none;
}
/* Horizontal (agent-observer#37). O ambar cheio ficou agressivo, disse o dono:
 * o fundo e o ambar esmaecido do tema (--amb-bg), a borda e o ponto sao o
 * ambar, e o texto e o claro do tema, com o nome de quem aguarda em ambar. */
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 100%;
  padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--amb-bg); color: var(--color-text);
  border: 1px solid var(--amb-line); border-left: 3px solid var(--amb);
  box-shadow: var(--shadow-md); animation: toast-entra .25s ease-out;
}
@keyframes toast-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast-marca { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--amb); animation: toast-pulsa 1.6s ease-in-out infinite; }
@keyframes toast-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.toast-texto { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; min-width: 0; flex: 1; }
.toast-texto strong { white-space: nowrap; color: var(--amb-t); font-weight: 600; }
.toast-sub { font-size: 12px; color: var(--color-neutral-700); white-space: nowrap; }
.toast-som { color: var(--amb-t); }
.toast-issue {
  height: auto; padding: 0; border: 0; background: none; color: var(--color-text); font: 500 12px var(--mono);
  text-decoration: underline; text-decoration-color: var(--amb-line); text-underline-offset: 3px; cursor: pointer; white-space: nowrap;
}
.toast-issue:hover { background: none; color: var(--amb-t); }
/* A ref de issue numa tabela: link para a Cascata (agent-observer#37). */
.link-ref {
  height: auto; padding: 0; border: 0; background: none; color: var(--color-accent-700); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-ref:hover { background: none; color: var(--color-accent); }
.toast .btn-accent { background: transparent; color: var(--amb-t); border: 1px solid var(--amb-line); flex: none; }
.toast .btn-accent:hover { background: var(--amb-hover); }
.toast-fecha { width: 28px; height: 28px; flex: none; padding: 0; border: 0; background: none; font-size: 18px; color: var(--color-neutral-700); }
.toast-fecha:hover { background: var(--amb-hover); color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .toast, .toast-marca { animation: none; } }
.aba-contagem {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--amb); color: #0d0f12;
}
.lat-vistas button { display: flex; align-items: center; }

/* ------------------------------------------------------------------ telas estreitas
 * A lateral vira uma linha de botoes que quebra, acima do conteudo. */
@media (max-width: 760px) {
  .corpo { grid-template-columns: minmax(0, 1fr); min-height: 0; align-content: start; }
  table { display: block; overflow-x: auto; }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--color-divider); padding: 10px 12px; }
  .lat-rotulo, .lat-rodape .lat-conta, .lat-mono { display: none; }
  .lat-vistas { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .lat-vistas button, .lat-org { width: auto; }
  .lat-rodape { margin-top: 8px; padding-top: 0; }
  .conteudo { padding: 16px; }
  .cab-pagina h1 { font-size: 26px; }
  .topo { padding: 10px 16px; }
  #usuario { display: none; }
  .cartao-cab, .cartao-corpo { padding-left: 16px; padding-right: 16px; }
  .cartao-corpo > table { margin: -16px; width: calc(100% + 32px); }
}

/* ------------------------------------------------------------------ contratos (agent-observer#38) */
.contratos-form { display: grid; gap: 14px; max-width: 640px; margin: 12px 0; }
.cartao-corpo > .contratos-form { margin: 0; }
.contratos-barra { margin-bottom: 16px; }
.contratos-barra + div:empty { display: none; }
/* o botao de republicar fica longe do cartao das passkeys (agent-observer#39) */
.republicar-barra { margin-top: 16px; }
.contratos-form h3 { margin: 0; font-size: 15px; }
.contratos-form textarea { font-family: var(--mono); font-size: 13px; }
.contratos-form small { font-size: 12px; line-height: 1.4; }
.contratos-form input[type="checkbox"] { justify-self: start; }
.contratos-aceite { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--amb-line); border-radius: 8px; background: var(--amb-bg); }
.contratos-texto { max-height: 180px; overflow: auto; white-space: pre-wrap; margin: 0; font-size: 12px; }
.contratos-check { display: flex; gap: 6px; align-items: center; }
.contratos-recusa summary { cursor: pointer; color: var(--color-neutral-700); margin-top: 4px; }
.contratos-recusa pre { max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12px; }