/* Prumo — estrutura e componentes. Os temas completos e suas cores semânticas moram em temas.css. */

/* A Exo 2 auto-hospedada (SIL OFL 1.1), os mesmos arquivos do Astro Foundry. Sem eles em wwwroot/fonts, vale a
   fonte do sistema. */
@font-face {
  font-family: "Exo 2"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: local("Exo 2"), url("/fonts/exo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Exo 2"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: local("Exo 2"), url("/fonts/exo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --raio: 4px;
  --fonte: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Casca: topo e rodapé fixos; o menu da esquerda, o corpo e os detalhes rolam cada um por dentro ── */
html, body { height: 100%; }
body {
  margin: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--fundo);
  color: var(--tinta);
  font: 14px/1.5 var(--fonte);
  font-variant-numeric: tabular-nums;
}

a { color: var(--realce); text-decoration: none; }
a:hover { color: var(--azul-claro); }
/* A referência ao Prumo que não resolve (cap:prumo/referencias-no-markdown): não existe ou está fora do alcance. */
a.ref-quebrada, a.ref-quebrada:hover { color: var(--cor-red); text-decoration: line-through; cursor: help; }
/* A referência a outro workspace (PM-258): o selo do workspace no link, e o texto neutro, sem link, de fora do alcance. */
a .ref-selo {
  margin-left: 4px; padding: 0 5px; border: 1px solid var(--linha-2); border-radius: var(--raio);
  font-size: 0.8em; color: var(--tinta-3); white-space: nowrap;
}
a:hover .ref-selo { color: var(--tinta-2); border-color: var(--roxo); }
.ref-fora { color: var(--tinta-3); cursor: help; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
.icone { --tom: var(--icone-tom); flex: none; vertical-align: -2px; }

.casca { display: flex; min-height: 0; }

.trilho {
  flex: none; width: 240px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  padding: 18px 12px; background: var(--painel); border-right: 1px solid var(--linha);
}
.trilho .secao-trilho { display: flex; flex-direction: column; gap: 2px; }
.trilho .titulo-trilho { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); padding: 0 10px 6px; }
.trilho a.item-trilho {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--tinta-2);
}
.trilho a.item-trilho:hover { background: var(--cartao-2); color: var(--tinta); }
.trilho a.item-trilho .icone { color: var(--tinta-3); }
.trilho a.item-trilho.ativo {
  background: linear-gradient(90deg, color-mix(in srgb, var(--roxo) 20%, transparent), color-mix(in srgb, var(--roxo) 4%, transparent));
  color: var(--roxo-claro); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--roxo) 35%, transparent);
}
.trilho a.item-trilho.ativo .icone { color: var(--realce); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--realce) 80%, transparent)); }
.trilho a.item-trilho .n { margin-left: auto; }
/* O índice do documento que se reordena: o pegador fica à esquerda do item, e o link ocupa o resto. */
.trilho .item-ordenavel { display: flex; align-items: center; gap: 2px; }
.trilho .item-ordenavel a.item-trilho { flex: 1; min-width: 0; }
.trilho .item-ordenavel.arrastando { opacity: .5; }
.trilho .pe-trilho { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--linha); font-size: 12px; color: var(--tinta-3); }
/* O botão que recolhe o menu (trilho.js) e o menu recolhido, só com os ícones e o nome no title: o item sem ícone, os
   títulos e o pé somem. Na tela estreita o menu vira faixa no topo, e não recolhe. */
.trilho .recolher-trilho {
  align-self: flex-end; display: inline-flex; margin: -10px -4px -14px 0; padding: 4px;
  border: 0; border-radius: 6px; background: none; color: var(--tinta-3); cursor: pointer;
}
.trilho .recolher-trilho:hover { color: var(--tinta); background: var(--cartao-2); }
@media (min-width: 901px) {
  .trilho.recolhido { width: 38px; padding-inline: 2px; }
  .trilho.recolhido .recolher-trilho { align-self: center; margin-inline: 0; }
  .trilho.recolhido .recolher-trilho .icone { transform: rotate(180deg); }
  .trilho.recolhido .titulo-trilho, .trilho.recolhido .pe-trilho, .trilho.recolhido .item-ordenavel,
  .trilho.recolhido a.item-trilho:not(:has(> .icone)) { display: none; }
  .trilho.recolhido a.item-trilho { justify-content: center; gap: 0; padding: 8px 0; font-size: 0; }
  .trilho.recolhido a.item-trilho > :not(.icone) { display: none; }
}

/* O palco é o corpo. Página com detalhes (.com-detalhes) divide o palco em corpo e painel direito, cada um com a
   própria rolagem; sem detalhes, o palco inteiro rola. O --pe-rolagem repete o padding de baixo de quem rola: o
   sticky conta o bottom a partir dele, e o mapa do diagrama o desconta para encostar no pé visível (2026-11-04). */
.palco {
  flex: 1; min-width: 0; overflow-y: auto; padding: 24px 32px 40px; --pe-rolagem: 40px;
  background: var(--palco-fundo);
}
.palco:has(> .com-detalhes) { overflow: hidden; padding: 0; }
.com-detalhes { display: flex; height: 100%; }
.com-detalhes > .corpo { flex: 1; min-width: 0; overflow-y: auto; padding: 24px 32px 40px; --pe-rolagem: 40px; }
.com-detalhes > .detalhes {
  flex: none; width: var(--largura-detalhes, 360px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 22px 20px; --pe-rolagem: 22px; background: var(--painel); border-left: 1px solid var(--linha);
}
/* A borda esquerda do painel muda a largura dele (detalhes.ts): perto dela, o cursor vira o de redimensionar e a borda
   acende; a largura escolhida vai no --largura-detalhes do body, pelo cookie prumo-detalhes. */
.com-detalhes.na-borda, .com-detalhes.na-borda * { cursor: col-resize; }
.com-detalhes.na-borda > .detalhes, .com-detalhes.redimensionando > .detalhes { border-left: 2px solid var(--realce); }
.com-detalhes.redimensionando { user-select: none; }
.miolo { max-width: 1280px; }

/* ── Topo ── */
.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); font-weight: 700; font-size: 15px; letter-spacing: 0.14em; }
.marca:hover { color: var(--tinta); }
/* O selo é o ícone da aba (Icones.Marca), com o fundo dele: sem borda, e o desenho ocupa o selo inteiro. */
.marca .selo-marca { display: grid; place-items: center; width: 28px; height: 28px; }
.marca .selo-marca svg { display: block; width: 100%; height: 100%; }
/* Timer e tarefas aguardando integração no topo. */
.timer:empty { display: none; }
.timer-rodando { display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 10px; border: 1px solid var(--realce); border-radius: 999px; }
.timer-rodando a { color: var(--roxo-claro); font-weight: 600; }
.aguarda-integracao { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px dashed var(--cor-orange);
  border-radius: 999px; color: var(--tinta); font-size: 13px; white-space: nowrap; }
.aguarda { margin-left: 4px; cursor: help; text-decoration: none; }
.aguarda-bloco { margin: 16px 0; padding: 12px 14px; border: 1px dashed var(--cor-orange); border-radius: 8px; }
.aguarda-bloco h2 { margin: 0 0 6px; font-size: 15px; }
.arquivos-pendentes { margin: 8px 0; padding-left: 18px; font-size: 13px; }
.timer-rodando .tempo { font-family: var(--mono); color: var(--tinta); }
.iniciar-timer { margin-top: 8px; }
/* A linha do tempo do dia (PM-55): o ponto e o anotado em faixas; a proposta da IA tracejada, a confirmar. */
.linha-do-tempo { margin: 14px 0 22px; display: flex; flex-direction: column; gap: 6px; }
.linha-do-tempo .faixa { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 10px; }
.linha-do-tempo .rotulo-faixa { font-size: 12px; color: var(--tinta-3); text-align: right; }
.linha-do-tempo .trilho-tempo { position: relative; height: 26px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie-translucida); }
.linha-do-tempo .horas .trilho-tempo { height: 16px; border: 0; background: none; }
.linha-do-tempo .bloco {
  position: absolute; top: 3px; bottom: 3px; min-width: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; line-height: 18px; padding: 0 4px; border-radius: 4px; color: var(--tinta);
}
.linha-do-tempo .bloco.ponto { background: color-mix(in srgb, var(--estado-executando) 35%, transparent); }
.linha-do-tempo .bloco.ponto.aberto { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--estado-executando) 35%, transparent) 0 6px, color-mix(in srgb, var(--estado-executando) 15%, transparent) 6px 12px); }
.linha-do-tempo .bloco.anotado { background: color-mix(in srgb, var(--roxo) 55%, transparent); }
.linha-do-tempo .bloco.anotado.proposta { background: none; border: 1px dashed var(--roxo-claro); color: var(--roxo-claro); }
.linha-do-tempo .hora { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--tinta-3); font-family: var(--mono); }
/* As horas da equipe (D8 e D9 da migração Fixtres): a cor do dia; o título da célula diz o mesmo em texto. */
.situacao-anotado { --dia-fundo: color-mix(in srgb, var(--cor-green) 13%, transparent); --dia-borda: color-mix(in srgb, var(--cor-green) 35%, transparent); }
.situacao-abaixo { --dia-fundo: color-mix(in srgb, var(--cor-yellow) 15%, transparent); --dia-borda: color-mix(in srgb, var(--cor-yellow) 45%, transparent); }
.situacao-sem-hora { --dia-fundo: color-mix(in srgb, var(--cor-red) 20%, transparent); --dia-borda: color-mix(in srgb, var(--cor-red) 55%, transparent); --dia-tinta: var(--cor-red); }
.situacao-justificado { --dia-fundo: color-mix(in srgb, var(--estado-executando) 14%, transparent); --dia-borda: color-mix(in srgb, var(--estado-executando) 40%, transparent); }
.situacao-feriado { --dia-fundo: var(--neutro-suave); --dia-borda: var(--tinta-3); --dia-tinta: var(--tinta-2); }
.calendario-horas .dia-cal.situacao-feriado, .grade-equipe td.situacao-feriado a, .legenda-equipe .amostra.situacao-feriado { border-style: dashed; }
.situacao-folga, .situacao-antes-do-uso, .situacao-futuro { --dia-fundo: transparent; --dia-borda: var(--linha); --dia-tinta: var(--tinta-3); }
.situacao-hoje { --dia-fundo: transparent; --dia-borda: var(--realce); }
.chip[class*="situacao-"] { background: var(--dia-fundo); border-color: var(--dia-borda); color: var(--dia-tinta, var(--tinta)); }
.filtro-equipe { flex-wrap: wrap; align-items: center; }
.filtro-equipe label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); }
.legenda-equipe { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--tinta-2); }
.legenda-equipe li { display: inline-flex; align-items: center; gap: 6px; }
.legenda-equipe .amostra { width: 14px; height: 14px; border-radius: 3px; background: var(--dia-fundo); border: 1px solid var(--dia-borda); }
.calendario-horas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 8px 0 22px; max-width: 840px; }
.calendario-horas .semana-cal { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); text-align: center; }
.calendario-horas .dia-cal {
  display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 5px 7px; min-width: 0;
  border: 1px solid var(--dia-borda); border-radius: var(--raio); background: var(--dia-fundo); color: var(--dia-tinta, var(--tinta));
}
.calendario-horas .dia-cal:hover { border-color: var(--roxo); color: var(--tinta); }
.calendario-horas .dia-cal.aberto, .grade-equipe td.aberto a { outline: 2px solid var(--roxo); outline-offset: 1px; }
.calendario-horas .num-cal { font-size: 12px; color: var(--tinta-3); }
.calendario-horas .horas-cal { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.calendario-horas .confirmar-cal { font-size: 11px; color: var(--roxo-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolagem-grade { overflow-x: auto; margin: 8px 0 22px; }
.grade-equipe { width: auto; }
.grade-equipe th, .grade-equipe td { padding: 4px 6px; }
.grade-equipe th[scope="row"] { white-space: nowrap; position: sticky; left: 0; background: var(--cartao); z-index: 1; }
.grade-equipe .dia-grade { text-align: center; font-family: var(--mono); padding: 4px 2px; }
.grade-equipe .dia-grade span { display: block; font-family: var(--fonte); font-size: 10px; font-weight: 400; }
.grade-equipe .dia-grade.fim-de-semana { color: var(--cor-nula); }
.grade-equipe td[class*="situacao-"] { padding: 2px; }
.grade-equipe td[class*="situacao-"] a {
  display: block; min-width: 40px; height: 28px; line-height: 26px; text-align: center; font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--dia-borda); border-radius: 3px; background: var(--dia-fundo); color: var(--dia-tinta, var(--tinta));
}
.grade-equipe td[class*="situacao-"] a:hover { border-color: var(--roxo); }
.dias-sem-hora { color: var(--cor-red); }
.calendario-horas .feriado-cal { font-size: 11px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A grade do ano (2026-10-27), como a de contribuições do GitHub: o verde mais forte quanto mais horas. */
.ano-horas { margin: 6px 0 18px; }
.ano-horas .rolagem-grade { margin: 4px 0 6px; }
.grade-ano { border-collapse: separate; border-spacing: 3px; }
.grade-ano th, .grade-ano td { padding: 0; }
.grade-ano thead th { font-size: 10px; font-weight: 400; color: var(--tinta-3); text-align: left; white-space: nowrap; }
.grade-ano tbody th { font-size: 10px; font-weight: 400; color: var(--tinta-3); padding-right: 4px; text-align: right; }
.grade-ano a, .legenda-ano .quadrado { display: block; width: 11px; height: 11px; border-radius: 2px; }
.legenda-ano { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--tinta-3); margin: 0; }
.legenda-ano .quadrado { display: inline-block; }
/* Só aqui: a grade de horas da tarefa (_GradeHoras) tem os seus .nivel-*, em roxo. */
.grade-ano a.nivel-0, .legenda-ano .nivel-0 { background: var(--neutro-suave); box-shadow: none; }
.grade-ano a.nivel-1, .legenda-ano .nivel-1 { background: color-mix(in srgb, var(--cor-green) 22%, transparent); }
.grade-ano a.nivel-2, .legenda-ano .nivel-2 { background: color-mix(in srgb, var(--cor-green) 42%, transparent); }
.grade-ano a.nivel-3, .legenda-ano .nivel-3 { background: color-mix(in srgb, var(--cor-green) 64%, transparent); }
.grade-ano a.nivel-4, .legenda-ano .nivel-4 { background: color-mix(in srgb, var(--cor-green) 88%, transparent); }
.grade-ano a.situacao-sem-hora, .legenda-ano .situacao-sem-hora { background: color-mix(in srgb, var(--cor-red) 75%, transparent); }
.grade-ano a.situacao-abaixo, .legenda-ano .situacao-abaixo { box-shadow: inset 0 0 0 2px var(--cor-yellow); }
.grade-ano a.situacao-justificado { background: color-mix(in srgb, var(--estado-executando) 50%, transparent); }
.grade-ano a.situacao-feriado, .legenda-ano .situacao-feriado { background: none; outline: 1px dashed var(--tinta-3); outline-offset: -1px; }
.grade-ano a.situacao-futuro, .grade-ano a.situacao-antes-do-uso { opacity: 0.35; }
.grade-ano a.situacao-hoje { outline: 1px solid var(--realce); }
.grade-ano a.aberto { outline: 2px solid var(--roxo); outline-offset: 0; }
.grade-ano a:hover { outline: 1px solid var(--roxo-claro); }
@media (max-width: 720px) {
  .calendario-horas { gap: 3px; }
  .calendario-horas .dia-cal { min-height: 52px; padding: 4px; }
  .calendario-horas .horas-cal { font-size: 12px; }
  .calendario-horas .confirmar-cal { display: none; }
}

/* ── Rodapé ── */
.rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 7px 20px; background: var(--painel); border-top: 1px solid var(--linha); font-size: 12px;
}
.rodape .rotulo-rodape { color: var(--tinta-3); letter-spacing: 0.14em; font-size: 11px; text-transform: uppercase; }
.rodape .rotulo-rodape b { color: var(--tinta); letter-spacing: 0; font-size: 13px; margin-left: 4px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px; }
.rodape-especie {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--cartao); color: var(--tinta-2);
}
.rodape-especie:hover { color: var(--tinta); border-color: var(--roxo); box-shadow: 0 0 10px color-mix(in srgb, var(--roxo) 30%, transparent); }
.rodape-especie .icone { color: var(--tinta-3); }
.rodape-especie b { color: var(--azul); font-weight: 600; }
.rodape .lado { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--tinta-3); }

.ao-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-3); }
.ao-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-nula); }
.ao-vivo[data-ao-vivo="ao vivo"] { color: var(--tinta-2); }
.ao-vivo[data-ao-vivo="ao vivo"]::before { background: var(--cor-green); box-shadow: 0 0 8px var(--cor-green); }
.ao-vivo[data-ao-vivo="reconectando"]::before { background: var(--cor-orange); }

/* ── Cantos marcados e título com degradê ── */
.cantos { position: relative; }
.cantos::before, .cantos::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.cantos::before { top: -1px; left: -1px; border-top: 1px solid var(--realce); border-left: 1px solid var(--realce); }
.cantos::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--azul); border-right: 1px solid var(--azul); }

.cabeca {
  position: relative; margin: 0 0 22px; padding: 18px 22px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--roxo) 22%, transparent), color-mix(in srgb, var(--roxo) 6%, transparent) 45%, color-mix(in srgb, var(--azul) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--roxo) 18%, transparent);
}
.cabeca::before, .cabeca::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.cabeca::before { top: -1px; left: -1px; border-top: 1px solid var(--realce); border-left: 1px solid var(--realce); }
.cabeca::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--azul); border-right: 1px solid var(--azul); }
.cabeca h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: 0.01em; }
.cabeca .sub { margin: 4px 0 0; }
.cabeca .kicker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--realce); margin-bottom: 2px; }
.cabeca.com-icone { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Base de 260px, e não 0: em tela estreita o texto quebra para a linha de baixo, em vez de virar uma coluna de uma palavra. */
.cabeca.com-icone > .texto { flex: 1 1 260px; min-width: 0; }
.selo-icone {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--raio);
  background: color-mix(in srgb, var(--roxo) 16%, transparent); border: 1px solid color-mix(in srgb, var(--roxo) 45%, transparent); color: var(--roxo-claro);
  box-shadow: 0 0 20px color-mix(in srgb, var(--roxo) 25%, transparent);
}

/* ── Entrar e trocar senha ── */
.acesso { max-width: 380px; margin: 48px auto; }
.acesso h1 { font-size: 20px; margin: 0 0 16px; }
/* A segunda forma de entrar (PM-111): abaixo do formulário da senha, da largura dele. */
.acesso .ou { text-align: center; color: var(--tinta-3); margin: 14px 0; font-size: 13px; }
.acesso .botao.microsoft { display: flex; justify-content: center; align-items: baseline; gap: 8px; padding: 10px; }
.acesso .botao.microsoft .dica { color: var(--tinta-3); font-size: 12px; }
.formulario {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px;
}
.formulario label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.formulario .dica { font-weight: 400; color: var(--tinta-3); }
/* A caixa de marcar fica na linha do rótulo, e não em cima dele. */
.formulario label.opcao { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.formulario label.opcao input { padding: 0; accent-color: var(--roxo); }
.formulario input, .formulario select, .formulario textarea, .campo-texto {
  font: 14px var(--fonte); color: var(--tinta); background: var(--campo);
  border: 1px solid var(--linha-2); border-radius: var(--raio); padding: 8px 10px; outline: none;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus, .campo-texto:focus {
  border-color: var(--roxo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 18%, transparent), 0 0 18px color-mix(in srgb, var(--roxo) 22%, transparent);
}
.formulario input::placeholder, .formulario textarea::placeholder, .campo-texto::placeholder { color: var(--tinta-3); }
.formulario button, .botao-roxo {
  font: 600 14px var(--fonte); color: var(--acao-tinta); cursor: pointer;
  background: var(--acao-fundo); box-shadow: 0 0 20px color-mix(in srgb, var(--roxo) 45%, transparent);
  border: 0; border-radius: var(--raio); padding: 9px 18px;
}
.formulario button:hover, .botao-roxo:hover { background: var(--acao-hover); color: var(--acao-tinta); }
.erro { color: var(--cor-red); margin: 0; font-size: 13px; }

/* ── Admin: workspaces, usuários, membros, configurações ── */
.formulario.largo { max-width: 860px; }
.formulario.largo > button { align-self: flex-start; }
.formulario .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
/* Com dica ou sem, os campos lado a lado alinham pela base. */
.formulario .campos label { justify-content: space-between; }
.formulario textarea { resize: vertical; }
.formulario textarea.mono { font-family: var(--mono); font-size: 13px; }
.formulario input:disabled, .formulario select:disabled, .formulario textarea:disabled { color: var(--tinta-3); }
.formulario p.dica { margin: 0; font-size: 13px; }
.acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.acoes form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.email-alternativo { margin: 2px 0 0; display: flex; gap: 6px; align-items: center; }
.novo-email-alternativo { margin-top: 4px; font-size: 12px; color: var(--tinta-3); }
.novo-email-alternativo form { margin: 4px 0 0; display: flex; gap: 6px; align-items: center; }
.novo-email-alternativo .dica { margin: 4px 0 0; max-width: 340px; }
.acoes select {
  font: 12px var(--fonte); color: var(--tinta); background: var(--campo);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 3px 6px;
}
.botao {
  display: inline-flex; align-items: center; gap: 6px;
  font: 12px var(--fonte); color: var(--tinta-2); background: var(--superficie-translucida); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 4px 10px;
}
.botao:hover { color: var(--roxo-claro); border-color: var(--roxo); box-shadow: 0 0 12px color-mix(in srgb, var(--roxo) 30%, transparent); }
.botao.perigo { color: var(--cor-red); }
.botao.perigo:hover { border-color: var(--cor-red); box-shadow: none; }
.tabela .slug { display: block; font-size: 12px; color: var(--tinta-3); }
.estados-codigo { list-style: none; margin: 0; padding: 0; }
.estados-codigo li + li { margin-top: 8px; }
.resultado-ok { color: var(--cor-green); white-space: nowrap; }
.resultado-falha { color: var(--cor-red); white-space: nowrap; }
.tabela tr.arquivado td { color: var(--tinta-3); }
.feito { color: var(--cor-green); margin: 0 0 12px; }
.aviso-admin { margin: 0 0 12px; }
.entregue {
  background: var(--cartao); border: 1px solid var(--linha); border-left: 3px solid var(--estado-aguarda_dono);
  border-radius: var(--raio); padding: 12px 16px; margin: 0 0 16px;
}
.entregue p { margin: 0 0 8px; color: var(--tinta-2); }
.entregue .senha { font-size: 18px; letter-spacing: 0.08em; user-select: all; }

/* ── Conteúdo ── */
.sub, .legenda { color: var(--tinta-2); margin: 4px 0 20px; }
.legenda { max-width: 80ch; }
.vazio { color: var(--tinta-3); font-style: italic; }
h2 { font-size: 16px; margin: 28px 0 12px; display: flex; align-items: baseline; gap: 8px; }
h3.grupo { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-3); margin: 20px 0 8px; }
.n {
  font-size: 11px; font-weight: 600; color: var(--tinta-3);
  border: 1px solid var(--linha-2); border-radius: 10px; padding: 0 7px;
}
.comando {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 12px 16px; font-family: var(--mono); overflow-x: auto;
}

[data-trecho].refeito { animation: refeito 1.2s ease-out; }
@keyframes refeito {
  from { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--roxo) 45%, transparent); }
  to { box-shadow: inset 0 0 0 2px transparent; }
}

/* Markdown dos campos *_md */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 6px; }
/* Caminho e identificador longos quebram onde precisar, em vez de alargar a coluna; o bloco de código rola. */
.md { overflow-wrap: anywhere; }
.md pre { max-width: 100%; overflow-x: auto; overflow-wrap: normal; }
.md ul, .md ol { margin: 0 0 6px; padding-left: 20px; }

/* O bloco ```mermaid desenhado (diagramas.ts): a vista corta o diagrama na largura da coluna, e o palco anda e escala
   por dentro dela. O rótulo que ainda for HTML (foreignObject, em tipo de diagrama que o pede): o .md não quebra nem
   afasta os parágrafos dele, porque o mermaid mediu sem isso. */
.md .diagrama { margin: 0 0 8px; max-width: 100%; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); }
.diagrama-barra {
  display: flex; justify-content: flex-end; gap: 2px; padding: 2px 4px;
  background: var(--cartao-2); border-bottom: 1px solid var(--linha);
}
.diagrama-barra button, .diagrama-mapa button {
  font: 600 12px var(--fonte); min-width: 26px; height: 24px; padding: 0 8px; cursor: pointer; color: var(--tinta-2);
  background: transparent; border: 1px solid transparent; border-radius: 5px;
}
.diagrama-barra button:hover, .diagrama-barra button:focus-visible,
.diagrama-mapa button:hover, .diagrama-mapa button:focus-visible { color: var(--tinta); border-color: var(--linha-2); background: var(--cartao); }
.diagrama-barra button[aria-pressed="true"], .diagrama-mapa button[aria-pressed="true"] { color: var(--roxo-claro); border-color: var(--roxo); }
/* O quadro põe a vista e o mapa na mesma célula: o mapa fica no canto de baixo, à direita, por cima do diagrama. Ele é
   sticky: no diagrama mais alto que a área rolável, sobe junto com o pé dela e fica à vista (2026-11-04). O bottom
   desconta o padding de baixo de quem rola (--pe-rolagem): sem isso, o mapa ficava 48 px acima do rodapé da página,
   "voando" sobre o diagrama, e só encostava no fim da rolagem. */
.diagrama-quadro { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
.diagrama-quadro > * { grid-area: 1 / 1; }
.diagrama-mapa {
  position: sticky; bottom: calc(6px - var(--pe-rolagem, 0px)); z-index: 1; align-self: end; justify-self: end; margin: 6px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding: 3px;
  background: color-mix(in srgb, var(--cartao-2) 94%, transparent); border: 1px solid var(--linha-2); border-radius: var(--raio);
  box-shadow: 0 4px 14px color-mix(in srgb, black 30%, transparent);
}
.diagrama-mapa-zoom { display: flex; gap: 2px; }
.diagrama-mapa button.diagrama-mapa-pct { min-width: 48px; font-variant-numeric: tabular-nums; }
.diagrama-mapa-miniatura {
  position: relative; overflow: hidden; cursor: pointer; touch-action: none; user-select: none;
  border-radius: 4px; background: var(--cartao); outline: 1px solid var(--linha);
}
.diagrama-mapa-miniatura img { display: block; width: 100%; height: 100%; pointer-events: none; }
.diagrama-mapa-janela {
  position: absolute; box-sizing: border-box; cursor: grab; border-radius: 2px;
  border: 2px solid var(--roxo); background: color-mix(in srgb, var(--roxo) 16%, transparent);
}
.diagrama-mapa-miniatura.arrastando, .diagrama-mapa-miniatura.arrastando .diagrama-mapa-janela { cursor: grabbing; }
/* A legenda do workflow do plano (2026-11-04): a amostra de cada caixa com os tokens do caixasDoWorkflow do
   diagramas.ts, e a seta, cinza (a linha do mermaid, --tinta-2) ou verde (a liberada, --cor-green). */
.legenda-workflow {
  display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 4px 0 8px; padding: 0;
  font-size: 12px; color: var(--tinta-2);
}
.legenda-workflow li { display: inline-flex; align-items: center; gap: 6px; }
.legenda-workflow .amostra { flex: none; box-sizing: border-box; width: 20px; height: 12px; border-radius: 2px; border: 1px solid; }
.amostra.pronta { background: var(--cartao-2); border: 2px solid var(--roxo); }
.amostra.andamento { background: var(--caixa-andamento); border: 2px solid var(--estado-executando); }
.amostra.espera { background: var(--campo); border: 1px dashed var(--cor-nula); }
.amostra.bloqueada { background: var(--caixa-bloqueada); border-color: var(--cor-orange); }
.amostra.feita { background: var(--caixa-feita); border-color: var(--cor-green); }
.legenda-workflow .amostra.seta { position: relative; width: 24px; height: 0; border: 0; border-top: 2px solid var(--tinta-2); border-radius: 0; }
.legenda-workflow .amostra.seta::after {
  content: ""; position: absolute; right: -1px; top: -5px;
  border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent var(--tinta-2);
}
.legenda-workflow .amostra.seta.liberada { border-top-color: var(--cor-green); }
.legenda-workflow .amostra.seta.liberada::after { border-left-color: var(--cor-green); }
/* O balão da caixa (2026-11-04): o resumo da tarefa ao parar o mouse em cima dela, no workflow do plano. Fixo na janela,
   o diagramas.ts o põe embaixo da caixa ou em cima; não pega o mouse, para não roubar o arraste nem o próprio hover. */
.diagrama-balao {
  position: fixed; z-index: 70; pointer-events: none; box-sizing: border-box;
  width: max-content; max-width: min(380px, calc(100vw - 16px)); padding: 8px 11px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--cartao-2); color: var(--tinta-2); border: 1px solid var(--linha-2); border-radius: var(--raio);
  box-shadow: 0 6px 20px color-mix(in srgb, black 35%, transparent); font-size: 12.5px; line-height: 1.45;
}
.diagrama-balao[hidden] { display: none; }
.diagrama-balao strong { color: var(--tinta); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.diagrama-balao-meta { color: var(--tinta-3); font-size: 11.5px; }
.diagrama-balao p {
  margin: 4px 0 0; padding-top: 6px; border-top: 1px solid var(--linha);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.diagrama-vista { position: relative; overflow: hidden; cursor: grab; touch-action: none; user-select: none; }
.diagrama-vista.arrastando { cursor: grabbing; }
.diagrama-palco { width: max-content; transform-origin: 0 0; overflow-wrap: normal; }
.diagrama-palco svg { display: block; max-width: none; }
.diagrama-palco p { margin: 0; }
.md .diagrama > pre { margin: 0; border-top: 1px solid var(--linha); }
.md .diagrama-erro { margin: 0 0 4px; font-size: 12px; color: var(--cor-orange); }
.diagrama-separador { width: 1px; margin: 4px 4px; background: var(--linha-2); }
.diagrama-aviso { margin-right: auto; align-self: center; font-size: 12px; color: var(--cor-orange); }
/* A tela cheia (⤢, 2026-10-30): a figura cobre o palco da página, e o diagramas.ts põe nela o top, o left, a largura e a
   altura do main.palco. O código, aberto, fica ao lado do diagrama. O palco (e o corpo da página com detalhes) para de
   rolar por baixo. F leva a figura ao monitor inteiro (:fullscreen), e o navegador passa por cima do tamanho. */
.md .diagrama.cheia {
  position: fixed; z-index: 50; margin: 0; max-width: none; border-radius: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) auto;
}
.md .diagrama.cheia > .diagrama-barra { grid-column: 1 / -1; }
/* Na tela cheia a vista inteira está à vista: o mapa não precisa grudar no pé da página de trás. */
.md .diagrama.cheia .diagrama-quadro { grid-template-rows: minmax(0, 1fr); }
.md .diagrama.cheia .diagrama-mapa { position: relative; bottom: auto; }
.md .diagrama.cheia > pre { width: min(40vw, 560px); max-height: none; overflow: auto; border-top: 0; border-left: 1px solid var(--linha); }
.palco:has(.diagrama.cheia), .corpo:has(.diagrama.cheia) { overflow: hidden; }

/* ── Abas ── */
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin-bottom: 8px; flex-wrap: wrap; }
.abas a { padding: 8px 14px; color: var(--tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a:hover { color: var(--tinta); }
.abas a.ativa { color: var(--tinta); border-bottom-color: var(--roxo); font-weight: 600; }

/* Botões de um grupo só, como o filtro de tipo no mapa. */
.segmentos {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: 6px; font-size: 13px;
}
.segmentos a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 4px; color: var(--tinta-2); }
.segmentos a:hover { color: var(--tinta); }
.segmentos a.ativo { background: color-mix(in srgb, var(--roxo) 16%, transparent); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--roxo) 45%, transparent); }

/* ── Painel de Bordo ── */
details.secao > summary { list-style: none; cursor: pointer; }
details.secao > summary::-webkit-details-marker { display: none; }
details.secao > summary h2::before { content: "▸"; color: var(--tinta-3); font-size: 12px; transition: transform 0.15s; }
details.secao[open] > summary h2::before { transform: rotate(90deg); }
details.secao > summary h2 { margin: 24px 0 12px; }

.frentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.frente {
  background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: var(--raio);
  border-left: 3px solid var(--estado, var(--linha));
  padding: 12px 14px; min-width: 0;
}
.frente header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.frente h3 { margin: 0; font-size: 14px; flex: 1; }
.frente .tarefas { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.frente .sistemas-da-frente { margin: 0 0 10px; }
.frente dl { margin: 0; display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; }
.frente dt { font-size: 12px; font-weight: 600; color: var(--tinta-3); padding-top: 1px; }
.frente dd { margin: 0; color: var(--tinta-2); overflow-wrap: anywhere; }
.frente dt.voce { color: var(--estado-aguarda_dono); }
.frente dd.voce { color: var(--tinta); }

.estado-aguarda_dono { --estado: var(--estado-aguarda_dono); }
.estado-executando { --estado: var(--estado-executando); }
.estado-aprovado { --estado: var(--estado-aprovado); }
.estado-rascunho { --estado: var(--estado-rascunho); }
.estado-concluido { --estado: var(--estado-concluido); }
details.secao > summary h2 .n { border-color: var(--estado); color: var(--estado); }

/* ── Planos (era o Andamento até 2026-10-26): a lista por situação ── */
.lista-frentes { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.frente-linha {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px 14px; color: var(--tinta);
  background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: var(--raio);
  transition: border-color 0.12s, box-shadow 0.12s; scroll-margin-top: 12px;
}
.frente-linha:hover { color: var(--tinta); border-color: var(--linha-2); }
.frente-linha.escolhida { border-color: var(--roxo); box-shadow: 0 0 0 1px color-mix(in srgb, var(--roxo) 55%, transparent), 0 0 28px color-mix(in srgb, var(--roxo) 20%, transparent); }
.frente-linha .ordem { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); }
.frente-linha .texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frente-linha .titulo-frente { font-weight: 650; }
.frente-linha .resumo { font-size: 12px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frente-linha .prefixo { color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; margin-right: 4px; }
.selo-estado {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  padding: 2px 8px; border-radius: 3px; color: var(--estado);
  background: color-mix(in srgb, var(--estado) 14%, transparent); border: 1px solid color-mix(in srgb, var(--estado) 35%, transparent);
}
.com-detalhes > .detalhes.largo { width: var(--largura-detalhes, 500px); }
.com-detalhes > .detalhes.entregas { width: var(--largura-detalhes, 600px); }
.estado-kicker { color: var(--estado); }
.campos-frente { margin: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px 12px; font-size: 13px; }
.campos-frente dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); padding-top: 2px; }
.campos-frente dd { margin: 0; color: var(--tinta-2); overflow-wrap: anywhere; }
.campos-frente dt.voce { color: var(--estado-aguarda_dono); }
.campos-frente dd.voce { color: var(--tinta); font-weight: 600; }
.detalhes details.bloco { margin: 0; }

/* A linha do plano: ordem, o que espera, o progresso e, à direita, o estado e quem criou. */
.frente-linha.plano-linha { grid-template-columns: 30px minmax(0, 1fr) auto auto; border-left: 3px solid var(--estado, var(--linha)); }
.progresso-plano { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--tinta-3); }
.lado-plano { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 110px; }
.lado-plano .criador, .cabeca-plano .criador { font-size: 12px; color: var(--tinta-3); }
.lado-plano .autoria { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.lado-plano .quando { font-variant-numeric: tabular-nums; }
.sem-capability { color: var(--cor-orange); font-size: 12px; white-space: nowrap; }
a.sem-capability:hover { color: var(--cor-yellow); }
.estado-arquivado { --estado: var(--estado-rascunho); }

/* A página do plano: as fases com quem as executa, e o que falta para o plano sair. */
.cabeca-plano .kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--realce); }
.cabeca-plano .kicker code { text-transform: none; letter-spacing: 0; color: var(--tinta-3); }
.cabeca-plano .conta-estado { font-size: 12px; }
.fase-plano h2 { flex-wrap: wrap; }
.fase-plano h2 .barra { font-size: 12px; font-weight: 400; }
.fase-plano .quem { font-size: 12px; font-weight: 400; color: var(--tinta-3); font-family: var(--mono); }

/* O workflow do plano (2026-10-30): o que pode começar agora, as ondas, o diagrama e as fases; a dependência riscada já
   liberou quem esperava por ela. */
.workflow-plano { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.workflow-plano .prontas { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 0; font-size: 13px; }
.workflow-plano .ondas summary { cursor: pointer; font-size: 13px; color: var(--tinta-2); }
.workflow-plano .ondas ol { margin: 6px 0 0; padding-left: 22px; font: 12px var(--mono); color: var(--tinta-2); }
.aviso-workflow { color: var(--cor-orange); }
.lista-fases { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-fases li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lista-fases form, .nova-fase { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.lista-fases input, .nova-fase input {
  font: 12px var(--fonte); color: var(--tinta); background: var(--campo); width: 150px;
  border: 1px solid var(--linha-2); border-radius: var(--raio); padding: 3px 6px;
}
.espera-por { font: 12px var(--mono); white-space: nowrap; }
.espera-por .resolvida, .setas-da-tarefa .resolvida, .depende-de .resolvida { text-decoration: line-through; color: var(--tinta-3); }
.setas-da-tarefa .rotulo { font-size: 12px; color: var(--tinta-3); }
.workflow-da-tarefa .depende-de { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 8px; }
.workflow-da-tarefa .depende-de label { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.workflow-da-tarefa .depende-de .numero { font-family: var(--mono); color: var(--tinta-2); }
.tarefas-plano tr.falta-capability td:first-child { box-shadow: inset 3px 0 0 var(--cor-orange); }
.ligar-capability { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.ligar-capability select {
  font: 12px var(--fonte); color: var(--tinta); background: var(--campo); width: 100%; max-width: 220px;
  border: 1px solid var(--cor-orange); border-radius: var(--raio); padding: 3px 6px;
}
.detalhes-plano { display: flex; flex-direction: column; gap: 16px; }
.detalhes-plano details.bloco { margin: 0; }
.apagar-plano { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-2); }
.apagar-plano p { margin: 0; }
.confirmar-apagar > summary { list-style: none; width: max-content; }
.confirmar-apagar > summary::-webkit-details-marker { display: none; }
.confirmar-apagar[open] > summary { margin-bottom: 8px; }
.confirmar-apagar form { margin: 8px 0 0; }
.aviso-abertas { color: var(--cor-yellow); }

/* A capability removida (2026-10-26): fica para auditoria, apagada no tom, com o aviso de quando, quem e por quê. */
.cabeca-removida h1 { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: var(--tinta-3); }
.cabeca-removida .kicker { color: var(--cor-orange); }
.removida-aviso {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 12px 16px;
  background: var(--cartao); border: 1px solid var(--linha); border-left: 3px solid var(--cor-orange); border-radius: var(--raio);
  color: var(--tinta-2);
}
.removida-aviso p { margin: 0; }
.removida-aviso form { margin: 0; }
.remover-capability { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-2); }
.remover-capability p { margin: 0; }
.remover-capability .formulario { gap: 8px; margin-top: 8px; }
.remover-capability .formulario button.perigo { background: var(--superficie-translucida); align-self: flex-start; }
.tabela.removidas td a { color: var(--tinta-2); }
.aviso-abertas .area { color: var(--tinta-3); }

.conta th { font-size: 11px; font-weight: 600; color: var(--tinta-3); text-align: left; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.conta th.n2 { text-align: right; }
.conta td.nome .area { display: block; font-size: 11px; color: var(--tinta-3); }

/* ── Busca do Mapa (busca-mapa.js): só esconde; o trecho refeito pelo /ws volta inteiro ── */
.busca-mapa { display: flex; min-width: 220px; }
.busca-mapa input { width: 100%; font-size: 13px; padding: 6px 10px; }
[data-busca-tipo][hidden], [data-busca-grupo][hidden], [data-busca-nome][hidden] { display: none !important; }

/* ── Barra de 0 a 100 ── */
.barra { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.barra-trilho { display: inline-block; width: 90px; height: 5px; border-radius: 3px; background: var(--trilho); overflow: hidden; }
.barra-cheia { display: block; height: 100%; background: var(--cor); border-radius: 3px; box-shadow: 0 0 8px var(--cor); }
.barra-num { font-size: 12px; font-weight: 600; color: var(--cor); min-width: 34px; }

.cor-red { --cor: var(--cor-red); }
.cor-orange { --cor: var(--cor-orange); }
.cor-yellow { --cor: var(--cor-yellow); }
.cor-lime { --cor: var(--cor-lime); }
.cor-green { --cor: var(--cor-green); }
.cor-nula { --cor: var(--cor-nula); }

/* ── Mapa: grupos e cartões de objetivo ── */
.tipo-mapa { display: flex; align-items: center; gap: 10px; margin: 26px 0 4px; font-size: 18px; }
.tipo-mapa .icone { color: var(--realce); }
.cabeca-grupo { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; }
.cabeca-grupo .icone { color: var(--realce); }
.cabeca-grupo h3 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--roxo-claro); white-space: nowrap; text-shadow: 0 0 12px color-mix(in srgb, var(--roxo) 60%, transparent);
}
.cabeca-grupo .fio { flex: 1; height: 1px; background: linear-gradient(90deg, var(--roxo), transparent); }

.objetivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.objetivo {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--superficie-translucida); backdrop-filter: blur(6px);
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.objetivo:hover { border-color: var(--linha-2); }
.objetivo.escolhido { border-color: var(--roxo); box-shadow: 0 0 0 1px color-mix(in srgb, var(--roxo) 55%, transparent), 0 0 32px color-mix(in srgb, var(--roxo) 22%, transparent); }
.objetivo header { display: flex; align-items: center; gap: 10px; }
.objetivo header a.abre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--tinta); }
.objetivo header a.abre:hover h4 { color: var(--roxo-claro); }
.objetivo h4 { margin: 0; font-size: 15px; font-weight: 650; flex: 1; }
.objetivo .barra-trilho { width: 64px; }
.objetivo .num { font-size: 12px; color: var(--tinta-3); }
.objetivo .desc { margin: 0; color: var(--tinta-2); font-size: 13px; }
.hoje { font-size: 13px; color: var(--tinta-2); margin: 6px 0; }
.hoje .rotulo, .dependentes .rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-3); margin-right: 4px; }
.hoje.md > p:first-of-type { display: inline; }

.reqs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.planos-do-objetivo { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.planos-do-objetivo a { display: inline-flex; align-items: center; gap: 6px; }
.planos-do-objetivo .conta { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
/* O esforço do objetivo: o real contra o planejado (plano esforco-planejado-do-objetivo). Acima de 100%, em vermelho. */
.esforco-objetivo { --cor: var(--roxo); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-3); }
.esforco-objetivo .conta { font-family: var(--mono); white-space: nowrap; }
.esforco-objetivo .conta b { color: var(--tinta); font-weight: 600; }
.esforco-objetivo.estourou { --cor: var(--cor-red); }
.esforco-objetivo.estourou .conta b { color: var(--cor-red); }
.esforco-painel .esforco-objetivo .barra-trilho { width: 100%; max-width: 160px; }
/* As necessidades do objetivo no painel do Mapa (D12 a D16): uma por linha, com o estado, a prontidão e o real contra o planejado. */
.needs-do-objetivo { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.needs-do-objetivo li { display: flex; flex-direction: column; gap: 2px; }
.needs-do-objetivo .conta { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); }
.needs-do-objetivo .conta b { color: var(--tinta); font-weight: 600; }
.needs-do-objetivo .conta b.estourou { color: var(--cor-red); }
.needs-do-objetivo li.descartada a { color: var(--tinta-3); text-decoration: line-through; }
.req, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--superficie-translucida); color: var(--tinta-2);
}
.req b { color: var(--cor); font-weight: 600; }
.req.papel-essencial { border-color: var(--cor); color: var(--tinta); }
.req.papel-apoio { border-style: dashed; }
.req a, .chip { color: inherit; }
.chip .icone { color: var(--tinta-3); }
.chip.papel-apoio { border-style: dashed; }
.chip b { color: var(--realce); font-weight: 600; }

.apontado { outline: 2px solid var(--roxo); outline-offset: 2px; }
.frente, .objetivo, .sistema { scroll-margin-top: 12px; }

/* ── Painel direito: detalhes ── */
.detalhes .cabeca { margin: 0; }
.detalhes .bloco-titulo { padding: 14px 16px; }
.detalhes .bloco-titulo h2 { margin: 0; font-size: 22px; display: block; }
.detalhes .bloco-titulo p { margin: 4px 0 0; color: var(--tinta-2); font-size: 13px; }
.detalhes .kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--realce); }
.linha-entre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.linha-entre .dica { font-size: 11px; color: var(--tinta-3); }
.contagem-tipo { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--tinta-2); }
.contagem-tipo .icone { color: var(--realce); }
.rotulo-detalhe, .detalhes .rotulo-detalhe { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); }
.numero-grande {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: linear-gradient(160deg, color-mix(in srgb, var(--roxo) 14%, transparent), var(--cartao) 60%);
}
.numero-grande .valor { font-size: 36px; font-weight: 700; line-height: 1; color: var(--cor); text-shadow: 0 0 18px var(--cor); }
.numero-grande .lado { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--tinta-3); }
.numero-grande .barra-trilho { width: 100%; }
.caixa-hoje { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--trilho); font-size: 13px; color: var(--tinta-2); }
.conta { width: 100%; border-collapse: collapse; font-size: 12px; }
.conta td { padding: 6px 0; border-bottom: 1px solid var(--linha-suave); vertical-align: middle; }
.conta td.nome { color: var(--tinta-2); overflow-wrap: anywhere; padding-right: 8px; }
.conta td.n2 { text-align: right; white-space: nowrap; padding-left: 8px; color: var(--tinta-2); }
.conta td.forca { color: var(--tinta-3); white-space: nowrap; }
.conta td.valor { color: var(--cor); font-weight: 600; text-align: right; white-space: nowrap; padding-left: 8px; }
.conta tfoot td { border-bottom: 0; color: var(--tinta-2); padding-top: 8px; }
.acoes-detalhe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.acoes-detalhe > a { flex: 1; text-align: center; }
.legenda-regua { display: flex; flex-direction: column; gap: 6px; }
.legenda-regua .faixas { display: flex; gap: 4px; }
.legenda-regua .faixas span { flex: 1; height: 4px; border-radius: 2px; background: var(--cor); box-shadow: 0 0 6px var(--cor); }
.legenda-regua .limites { display: flex; justify-content: space-between; font-size: 11px; color: var(--tinta-3); }

/* ── Cadastro de objetivos ── */
.icone-botao {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--raio);
  color: var(--tinta-3); background: none; border: 0; cursor: pointer;
}
.icone-botao:hover { color: var(--roxo-claro); background: var(--cartao-2); }
.icone-botao.perigo:hover { color: var(--cor-red); background: var(--perigo-fundo); }

.editor { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.editor .formulario { background: none; border: 0; padding: 0; }
.cabeca-secao { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; }
.cabeca-secao h2 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--roxo-claro); text-shadow: 0 0 12px color-mix(in srgb, var(--roxo) 60%, transparent);
}
.cabeca-secao .fio { flex: 1; height: 1px; background: linear-gradient(90deg, var(--roxo), transparent); }
.cabeca-secao .dica { font-size: 12px; color: var(--tinta-3); font-weight: 400; }

.requisitos { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--campo); }
.requisito { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--linha-suave); }
.requisito .icone { color: var(--tinta-3); }
.requisito .nome { flex: 1 1 220px; min-width: 0; font-size: 13px; }
.requisito .nome small { display: block; color: var(--tinta-3); font-size: 11px; }
.requisito .barra-trilho { width: 72px; }
.papel { display: inline-flex; padding: 2px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--linha); }
.papel label { display: inline-flex; cursor: pointer; font-size: 12px; color: var(--tinta-3); font-weight: 400; }
.papel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.papel span { padding: 3px 10px; border-radius: 3px; }
.papel input:checked + span { background: color-mix(in srgb, var(--roxo) 20%, transparent); color: var(--roxo-claro); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--roxo) 55%, transparent); }
.papel input:focus-visible + span { outline: 2px solid var(--realce); }
.novo-requisito { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--painel); }
.novo-requisito .icone { color: var(--realce); }
.novo-requisito input { flex: 1; border-color: transparent !important; background: transparent !important; box-shadow: none !important; padding: 4px 0 !important; font-size: 13px !important; }

.barra-salvar {
  position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 8px -32px -40px; padding: 12px 32px;
  background: var(--painel); border-top: 1px solid var(--linha);
}
.barra-salvar .estado-edicao { flex: 1; font-size: 13px; color: var(--tinta-2); }
.barra-salvar .botao { padding: 9px 16px; font-size: 13px; }

.zona-perigo { margin-top: 10px; }
.zona-perigo > summary { cursor: pointer; color: var(--tinta-3); font-size: 13px; }
.zona-perigo > div { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--tinta-2); font-size: 13px; }

.fatias { display: flex; flex-direction: column; gap: 8px; }
.fatia { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.fatia .linha-fatia { display: flex; justify-content: space-between; gap: 8px; color: var(--tinta-2); }
.fatia .linha-fatia span:last-child { color: var(--tinta-2); flex: none; }
.fatia .trilho-fatia { height: 3px; border-radius: 2px; background: var(--trilho); overflow: hidden; }
.fatia .trilho-fatia span { display: block; height: 100%; background: var(--roxo); box-shadow: 0 0 6px var(--roxo); }
.confere { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--tinta-2); }
.confere span { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.confere .ok { color: var(--cor-green); }
.confere code { color: var(--tinta-3); }

.grupos-cadastro { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.grupo-cadastro {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: var(--raio);
}
.grupo-cadastro h3 { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--roxo-claro); }
.grupo-cadastro ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
/* ── Arrastar para ordenar (ordenavel.js, D9 da F2) ── */
/* button.pegador, e não só .pegador: dentro do editor, o .formulario button o pintaria de botão roxo. */
button.pegador, .formulario button.pegador {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 24px; padding: 0;
  font: inherit; color: var(--tinta-3); background: none; box-shadow: none; border: 0; border-radius: var(--raio);
  cursor: grab; touch-action: none;
}
button.pegador:hover, button.pegador:focus-visible,
.formulario button.pegador:hover, .formulario button.pegador:focus-visible { color: var(--roxo-claro); background: var(--cartao-2); }
.pegador:active { cursor: grabbing; }
[data-ordenavel-item].arrastando { opacity: 0.45; outline: 1px dashed var(--roxo-claro); outline-offset: -1px; }
.col-pegador { width: 28px; padding-right: 0 !important; }
.estado-ordem { font-size: 12px; color: var(--tinta-3); margin: 6px 0 0; min-height: 18px; }
.estado-ordem.erro { color: var(--cor-red); }
.lista-ordem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-width: 720px; }
.lista-ordem li {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px;
  background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio);
}
.lista-ordem .codigo { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); min-width: 22px; }
.lista-ordem .nome { flex: 1; min-width: 0; }

.sem-moldura { background: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cresce { flex: 1; display: flex; }
.numero-cabeca { font-size: 26px; font-weight: 700; color: var(--cor); text-shadow: 0 0 16px var(--cor); }
.pct { font-size: 12px; font-weight: 600; color: var(--cor); }

/* ── Tabelas ── */
.tabela { width: 100%; border-collapse: collapse; background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela th, .tabela td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela th { font-size: 12px; font-weight: 600; color: var(--tinta-3); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: color-mix(in srgb, var(--roxo) 4%, transparent); }
.tabela .num { text-align: right; }
.tabela .pos { color: var(--tinta-3); width: 32px; }
.gargalos .ganho { font-weight: 700; }
.beneficiados { display: flex; flex-wrap: wrap; gap: 4px; }
.mais { font-size: 12px; color: var(--tinta-3); align-self: center; }
.aviso {
  font-size: 11px; color: var(--cor-orange); border: 1px solid currentColor; border-radius: 10px;
  padding: 0 6px; margin-left: 6px; white-space: nowrap;
}

/* ── Sistemas ── */
.sistemas { display: flex; flex-direction: column; gap: 6px; }
.sistema { background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: var(--raio); }
.sistema > summary {
  display: grid; grid-template-columns: 1fr 140px 260px; align-items: center; gap: 12px;
  padding: 8px 14px; cursor: pointer; list-style: none;
}
.sistema > summary::-webkit-details-marker { display: none; }
.sistema > summary .nome { font-weight: 600; }
.sistema > summary .nome::before { content: "▸ "; color: var(--tinta-3); }
.sistema[open] > summary .nome::before { content: "▾ "; }
.sistema > summary .meta { font-size: 12px; color: var(--tinta-3); text-align: right; }
.sistema .corpo { padding: 4px 14px 14px; border-top: 1px solid var(--linha); }
.sistema .caps { margin-top: 8px; }
.sistema .caps .area { color: var(--tinta-3); font-size: 12px; }
.req-obj, .dependentes { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* ── Filtros e caminho ── */
.filtros-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.filtros-linha .rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--tinta-3); margin: 0 2px 0 8px; }
.filtros-linha .rotulo:first-child { margin-left: 0; }
.chip.ativo { border-color: var(--realce); color: var(--roxo-claro); font-weight: 600; box-shadow: 0 0 10px color-mix(in srgb, var(--roxo) 30%, transparent); }
a.chip:hover { border-color: var(--roxo); color: var(--tinta); }

.trilha { display: flex; gap: 8px; font-size: 13px; color: var(--tinta-3); margin-bottom: 8px; }

.filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; margin-bottom: 12px;
}
.filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); }
.filtros select, .filtros input, .filtros button {
  font: 13px var(--fonte); color: var(--tinta); background: var(--campo);
  border: 1px solid var(--linha-2); border-radius: var(--raio); padding: 5px 8px; max-width: 240px;
}
.filtros .busca input { width: 220px; }
.filtros button { cursor: pointer; background: var(--acao-fundo); color: var(--acao-tinta); border-color: transparent; font-weight: 600; }
.contagem { color: var(--tinta-2); margin: 0 0 8px; }
.contagem .outros-estados { margin-left: 12px; font-size: 13px; }

/* ── Área e capability ── */
.titulo-com-numeros .numeros { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 8px 0 16px; color: var(--tinta-2); font-size: 13px; }
.selo {
  font-size: 11px; color: var(--cor-green); border: 1px solid currentColor; border-radius: 10px;
  padding: 0 6px; margin-left: 6px; white-space: nowrap;
}
.cores { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.bolinha { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); display: inline-block; box-shadow: 0 0 6px var(--cor); }

details.bloco {
  background: var(--superficie-translucida); border: 1px solid var(--linha); border-radius: var(--raio);
  margin: 12px 0; padding: 0 14px;
}
details.bloco > summary { cursor: pointer; padding: 10px 0; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
details.bloco[open] > summary { border-bottom: 1px solid var(--linha); margin-bottom: 10px; }
details.bloco > .md, details.bloco > .lista-tarefas { padding-bottom: 12px; }
details.bloco .md table { border-collapse: collapse; margin: 6px 0; }
details.bloco .md th, details.bloco .md td { border: 1px solid var(--linha); padding: 3px 6px; }

.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.lateral h2:first-child { margin-top: 0; }
.rotulo-lateral { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--tinta-3); margin: 10px 0 4px; }
.refs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.refs li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 13px; }
.refs li b { color: var(--cor); font-size: 12px; }
.refs li.papel-apoio a { opacity: 0.8; }
.refs .area { font-size: 12px; color: var(--tinta-3); }

/* ── Código da capability (F2): Mapa de implementação, testes e linha do tempo dos commits ── */
.codigo-cap h3.papel-codigo {
  display: flex; gap: 8px; align-items: baseline; margin: 14px 0 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-3);
}
/* anywhere, e não break-word: só ele entra na largura mínima da célula, e o nome mono comprido quebra. */
.tabela.codigo td { font-size: 13px; overflow-wrap: anywhere; }
.testes-codigo .caminho { display: block; font-size: 12px; color: var(--tinta-3); }
.dica-codigo { font-size: 12px; font-weight: 400; color: var(--tinta-3); margin: 0 0 8px; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.linha-tempo > li { border-left: 2px solid var(--linha-2); padding-left: 10px; }
.cabeca-commit { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }
.cabeca-commit time { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cabeca-commit .autor { font-size: 12px; color: var(--tinta-3); }
.arquivos-commit { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--tinta-2); }
.arquivos-commit li { display: flex; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
.arquivos-commit .mais { color: var(--cor-green); }
.arquivos-commit .menos { color: var(--cor-red); }
.sem-codigo { font-style: italic; color: var(--tinta-3); }

.notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nota { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 10px; font-size: 13px; color: var(--tinta-2); }
.nota .tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--tinta-3); display: block; margin-bottom: 2px; }
.nota-decisao { border-left: 3px solid var(--estado-aguarda_dono); }
.nota-decisao .tipo { color: var(--estado-aguarda_dono); }

/* ── Tarefas ── */
.lista-tarefas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tarefa {
  display: grid; grid-template-columns: 70px 22px minmax(0, 1fr) auto auto; gap: 6px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--linha); scroll-margin-top: 12px;
}
.tarefa:last-child { border-bottom: 0; }
.numero { font-family: var(--mono); font-size: 12px; color: var(--realce); white-space: nowrap; }
.especie { text-align: center; color: var(--tinta-3); }
.tarefa .titulo, .tarefas .titulo { overflow-wrap: anywhere; }
.tarefa details > summary, .tarefas details > summary { cursor: pointer; }
.tarefa details > .md, .tarefas details > .md { margin: 6px 0; font-size: 13px; color: var(--tinta-2); }
.desfecho .rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--tinta-3); margin-right: 4px; }
.desfecho > p:first-of-type { display: inline; }
.data { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
.tarefa .horas, .tarefas td.horas { font-family: var(--mono); font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.tarefas td.horas { text-align: right; }
.estado-tarefa-feita .titulo, .estado-tarefa-descartada .titulo { color: var(--tinta-2); }
.estado-tarefa-descartada .titulo { text-decoration: line-through; }

.tarefas td { vertical-align: top; }
.tarefas .estado { font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.tarefas .area { display: block; font-size: 12px; color: var(--tinta-3); }
/* O cabeçalho que ordena a lista (2026-10-30): a seta da coluna ativa diz o sentido; a das outras só aparece no hover. */
.tabela th.ordena a { color: inherit; white-space: nowrap; }
.tabela th.ordena a:hover, .tabela th.ordena.ativa a { color: var(--tinta); }
.tabela th.ordena .seta { margin-left: 4px; font-size: 10px; opacity: 0; }
.tabela th.ordena a:hover .seta { opacity: .6; }
.tabela th.ordena.ativa .seta { opacity: 1; color: var(--realce); }

/* A paginação numerada (_Paginacao, 2026-10-30): o que não leva a lugar nenhum fica no lugar, apagado. */
.paginacao { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; margin: 12px 0; font-size: 13px; }
.paginacao > a, .paginacao > span { min-width: 32px; padding: 4px 10px; border-radius: 4px; text-align: center; white-space: nowrap; }
.paginacao > a { color: var(--tinta-2); border: 1px solid var(--linha); }
.paginacao > a:hover { color: var(--tinta); border-color: color-mix(in srgb, var(--roxo) 45%, transparent); }
.paginacao .atual { color: var(--tinta); font-weight: 600; background: color-mix(in srgb, var(--roxo) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--roxo) 45%, transparent); }
.paginacao .desligado { color: var(--tinta-3); border: 1px solid transparent; opacity: .5; }
.paginacao .salto { color: var(--tinta-3); min-width: 0; padding: 4px 2px; }
.tabela.areas td:first-child a, .tabela.caps td a { font-weight: 500; }

/* ── A página da tarefa (2026-10-27): casa ao lado, horas em grade por dia, por pessoa e apontamento a apontamento ── */
.cabeca-tarefa .kicker .numero { font-size: 11px; letter-spacing: 0.04em; }
.cabeca-tarefa .especie-tarefa { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-3); }
.cabeca-tarefa .criador { font-size: 12px; color: var(--tinta-3); }
.cabeca-tarefa.estado-tarefa-descartada h1 { text-decoration: line-through; text-decoration-color: var(--tinta-3); }
.corpo-tarefa { margin: 0 0 12px; }
.principal > .desfecho { margin: 0 0 12px; }
.edicao-tarefa { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0 0 8px; }
.edicao-tarefa > details.editar-tarefa[open] { flex-basis: 100%; }
.casa-tarefa .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); }
.casa-tarefa .sem-capability { font-size: 12px; color: var(--cor-orange); }
.horas-por-pessoa, .apontamentos-da-tarefa { margin-bottom: 18px; }
.horas-por-pessoa .num, .apontamentos-da-tarefa .num { text-align: right; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.apontamentos-da-tarefa td { font-size: 13px; vertical-align: top; }
.apontamentos-da-tarefa .slug { font-size: 11px; color: var(--tinta-3); }
/* Os comentários da tarefa (D6 da F5): sem versão; quem escreve comenta e remove. */
.comentarios-tarefa { margin: 0 0 18px; }
.comentarios { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comentario { padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); }
.comentario-cabeca { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.comentario-cabeca .data { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); }
.comentario-cabeca .remover-comentario { margin-left: auto; }
.comentario-cabeca .remover-comentario .botao { font-size: 12px; padding: 2px 8px; }
.comentario > .md { margin-top: 4px; }

/* A aba Histórico (_Versoes, P3 da F5): uma versão por operação, com quem, o agente e o motivo; o texto mostra o diff
   (htmldiff.net: <ins> entrou, <del> saiu) e o campo simples, antes → depois. */
.versoes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.versao { padding: 8px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); }
.versao-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.versao-cabeca .data { font-family: var(--mono); font-size: 12px; color: var(--tinta-3); }
.versao-cabeca .agente { font-family: var(--mono); font-size: 11px; padding: 0 6px; border: 1px solid var(--linha-2); border-radius: var(--raio); color: var(--realce); }
.versao-cabeca .motivo { color: var(--tinta-2); }
.item-versao { margin-top: 6px; }
.filho-versao { margin: 0 0 2px; font-size: 12px; color: var(--tinta-2); }
.filho-versao .acao { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); margin-right: 4px; }
.campos-versao { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.campos-versao dt { color: var(--tinta-3); font-size: 12px; }
.campos-versao dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.campos-versao .seta { color: var(--tinta-3); }
.campos-versao .simples .antes { color: var(--tinta-2); }
.campos-versao del, .diff del { color: var(--cor-red); background: color-mix(in srgb, var(--cor-red) 12%, transparent); text-decoration: line-through; }
.diff ins { color: var(--cor-green); background: color-mix(in srgb, var(--cor-green) 12%, transparent); text-decoration: none; }
.diff > :first-child { margin-top: 0; }
.diff > :last-child { margin-bottom: 0; }
.paginas-versoes { display: flex; gap: 16px; font-size: 13px; }
/* A volta (P4 da F5): quem escreve marca os campos de uma coisa da versão e os volta; o valor trocado diz "voltada em". */
.campos-versao .marcar-campo { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.campos-versao .voltada { display: block; font-size: 11px; color: var(--realce); }
.voltar-versao { margin-top: 4px; }
.voltar-versao .botao { font-size: 12px; padding: 2px 8px; }

/* A grade de horas por dia (_GradeHoras): uma coluna por semana, como o gráfico de contribuições do GitHub. */
.grade-horas-caixa { margin: 6px 0 18px; }
.periodo-grade { margin: 0 0 4px; font-size: 12px; color: var(--tinta-3); }
.rolagem-grade-horas { overflow-x: auto; max-width: 100%; }
.grade-horas { border-collapse: separate; border-spacing: 3px; font-size: 10px; color: var(--tinta-3); }
.grade-horas th { font-weight: 400; text-align: left; padding: 0 4px 0 0; white-space: nowrap; line-height: 11px; }
.grade-horas thead th { padding: 0 0 2px; }
.grade-horas td { width: 11px; min-width: 11px; height: 11px; padding: 0; border-radius: 2px; }
.grade-horas td a { display: block; width: 100%; height: 100%; border-radius: 2px; }
.grade-horas td[class*="nivel-"]:hover { box-shadow: 0 0 0 1px var(--realce); }
.grade-horas td.fora { background: none; }
/* Presos à grade e à legenda dela: a grade do ano do painel da equipe também usa nivel-N, com as cores dela. */
:is(.grade-horas, .legenda-grade) .nivel-0 { background: var(--campo); box-shadow: inset 0 0 0 1px var(--linha); }
:is(.grade-horas, .legenda-grade) .nivel-1 { background: color-mix(in srgb, var(--roxo) 28%, transparent); }
:is(.grade-horas, .legenda-grade) .nivel-2 { background: color-mix(in srgb, var(--roxo) 50%, transparent); }
:is(.grade-horas, .legenda-grade) .nivel-3 { background: color-mix(in srgb, var(--roxo) 75%, transparent); }
:is(.grade-horas, .legenda-grade) .nivel-4 { background: var(--realce); }
.legenda-grade { display: flex; align-items: center; gap: 3px; margin: 4px 0 0; font-size: 11px; color: var(--tinta-3); }
.legenda-grade .amostra { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.legenda-grade .amostra:first-child { margin-left: 4px; }
.legenda-grade .amostra:last-of-type { margin-right: 4px; }
/* O dia aberto embaixo do quadriculado (a página Mudanças, P7 da F5). */
.grade-horas td.aberto { outline: 2px solid var(--roxo); outline-offset: 1px; }

/* A página Mudanças (P7 da F5): o quadriculado das versões do ano e, no dia clicado, as versões, com as coisas mudadas
   numa linha cada, e o link para o Histórico da página dela. */
.versoes-do-dia h2 .n { font-size: 13px; font-weight: 400; color: var(--tinta-3); margin-left: 6px; }
.coisas-versao { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.coisas-versao .acao { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-3); margin-right: 2px; }
.coisas-versao .tipo, .coisas-versao .em { color: var(--tinta-3); }
.coisas-versao .campos { color: var(--tinta-2); font-size: 12px; }
.coisas-versao .campos::before { content: "· "; color: var(--tinta-3); }

/* ── Mapa das áreas (Views/Areas/_MapaAreas): a mandala, a legenda e o painel que segue o mouse (mapa-areas.js).
   .focado esmaece o que não é a área apontada nem uma ligada a ela, no arco e na legenda ── */
/* O mapa usa a largura toda do corpo, sem o teto do .miolo e com margem menor: com o menu recolhido, a legenda abre a
   quarta coluna. */
.com-detalhes > .corpo:has(.mapa-areas) { padding: 16px 16px 12px; }
.com-detalhes:has(.mapa-areas) > .detalhes { padding-block: 14px; }
.corpo:has(.mapa-areas) .miolo { max-width: none; }
.mapa-areas { display: grid; grid-template-columns: minmax(0, 640px) minmax(220px, 1fr); gap: 20px; align-items: start; }
.mandala { display: block; width: 100%; height: auto; }
.mandala .arco { cursor: pointer; outline: none; transition: opacity 0.12s; }
.mandala .fundo { fill: var(--trilho); fill-opacity: 0.75; stroke: var(--fundo); stroke-width: 1; }
.mandala .cheio { fill: var(--cor); fill-opacity: 0.9; pointer-events: none; }
.mandala .arco:hover .fundo, .mandala .arco:focus-visible .fundo, .mandala .arco.em-foco .fundo { stroke: var(--tinta); stroke-width: 1.5; }
.mandala .arco.ligada .fundo { stroke: var(--realce); stroke-width: 1.5; }
.mandala .rotulo-anel {
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-anchor: middle; fill: var(--tinta-2); pointer-events: none;
  paint-order: stroke; stroke: var(--fundo); stroke-width: 3px;
}
.mandala .elo { fill: none; stroke: var(--realce); stroke-linecap: round; stroke-opacity: 0; pointer-events: none; transition: stroke-opacity 0.12s; }
.mapa-areas.focado .elo.acesa { stroke-opacity: 0.8; }
.mandala .nucleo { pointer-events: none; }
.mandala .nucleo circle { fill: var(--cartao); stroke: var(--linha-2); stroke-width: 1.5; }
.mandala .nucleo-valor { font-size: 38px; font-weight: 800; text-anchor: middle; fill: var(--cor); }
.mandala .nucleo-sub { font-size: 11px; text-anchor: middle; fill: var(--tinta-3); }
.mapa-areas.focado [data-area]:not(.em-foco):not(.ligada) { opacity: 0.25; }

.legenda-areas h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--roxo-claro); }
.legenda-areas h3 .n, .legenda-areas h3 .dica { font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--tinta-3); font-weight: 400; }
.legenda-areas ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 10px; }
.legenda-areas a { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: var(--raio); font-size: 12.5px; color: var(--tinta); transition: opacity 0.12s; }
.legenda-areas a:hover, .legenda-areas a.em-foco { background: var(--cartao-2); }
.legenda-areas a.ligada { box-shadow: inset 2px 0 0 var(--realce); }
.legenda-areas .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda-areas b { color: var(--cor); font-weight: 600; font-size: 12px; }
.legenda-areas .peso { min-width: 26px; text-align: right; font-size: 11px; color: var(--tinta-3); }

/* ── Esforço das áreas (Views/Areas/Esforco): o ano no quadriculado, o mês por tipo de área e as entregas do dia ── */
.cabeca-esforco { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cabeca-esforco .sub { margin: 0; color: var(--tinta-2); }
.cabeca-esforco .sem-data, .cabeca-esforco .estimadas { color: var(--tinta-3); }
.gravar-datas { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 14px; font-size: 13px; color: var(--tinta-2);
  border: 1px dashed var(--linha-2); border-radius: var(--raio); background: var(--cartao); }
.gravar-datas span { flex: 1; }
.entregas-do-dia tr.estimada td.num { color: var(--tinta-3); font-style: italic; }
.esforco-meses { max-width: 900px; margin-top: 8px; }
.esforco-meses h2 { margin: 0; }
.tipo-feature { --tipo: var(--roxo); }
.tipo-tech { --tipo: var(--tipo-tech); }
.tipo-referencia { --tipo: var(--tinta-3); }
.legenda-tipos { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tinta-3); }
.legenda-tipos > span { width: 10px; height: 10px; border-radius: 2px; background: var(--tipo); margin-left: 8px; }
.meses-esforco th, .meses-esforco td { padding: 3px 10px; font-size: 13px; }
.meses-esforco td.barra-mes { width: 40%; white-space: nowrap; font-size: 0; }
/* As entregas do dia, no painel da direita: a tarefa numa linha só, cortada com "…" (o título inteiro, a capability e a
   área vão no title), e os pontos. */
.entregas-do-dia { table-layout: fixed; }
.entregas-do-dia th.num, .entregas-do-dia td.num { width: 64px; }
.entregas-do-dia td.entrega { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.entregas-do-dia td.entrega .icone { margin-right: 6px; }
.meses-esforco .barra-mes span { display: inline-block; height: 8px; background: var(--tipo); vertical-align: middle; }
.meses-esforco tr.vazio-mes td { color: var(--tinta-3); }
.painel-area { display: flex; flex-direction: column; gap: 14px; }
.painel-area[hidden] { display: none; }
.numeros-area { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.numeros-area > div { padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); }
.numeros-area dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3); }
.numeros-area dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }
.ligadas-area, .onde-mexo { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ligadas-area li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; }
.ligadas-area .bolinha { margin-top: 5px; }
.ligadas-area .dica, .onde-mexo .dica, .painel-area p.dica { font-size: 11px; color: var(--tinta-3); }
.onde-mexo li { display: flex; flex-direction: column; gap: 1px; }
.onde-mexo .caminho { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .mapa-areas { grid-template-columns: minmax(0, 1fr); }
  .com-detalhes > .detalhes { width: var(--largura-detalhes, 300px); }
  .com-detalhes > .detalhes.largo, .com-detalhes > .detalhes.entregas { width: var(--largura-detalhes, 380px); }
}

/* Tela estreita: a página volta a rolar inteira, com o topo preso; as colunas viram pilha. */
@media (max-width: 900px) {
  body { display: block; height: auto; overflow: visible; }
  .casca { flex-direction: column; }
  .trilho { width: auto; border-right: 0; border-bottom: 1px solid var(--linha); }
  .trilho .pe-trilho, .trilho .recolher-trilho { display: none; }
  .palco, .palco:has(> .com-detalhes) { overflow: visible; }
  /* Quem rola é a janela, sem padding: o mapa do diagrama encosta no pé dela. */
  .palco, .com-detalhes > .corpo, .com-detalhes > .detalhes { --pe-rolagem: 0px; }
  .com-detalhes { flex-direction: column; height: auto; }
  .com-detalhes > .corpo, .com-detalhes > .detalhes { overflow: visible; width: auto; }
  .com-detalhes > .detalhes { border-left: 0; border-top: 1px solid var(--linha); }
  /* minmax(0, 1fr), e não 1fr: o 1fr não encolhe abaixo do conteúdo mais largo, e um código longo numa tarefa
     levava a coluna a 512 px num celular de 375 (pendência 3 da F2, 2026-10-23). */
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .barra-salvar { bottom: 0; margin: 8px -16px 0; padding: 12px 16px; }
}

@media (max-width: 720px) {
  .palco, .com-detalhes > .corpo { padding: 16px; }
  .frentes, .objetivos { grid-template-columns: 1fr; }
  .frente dl { grid-template-columns: 1fr; }
  .frente-linha.plano-linha { grid-template-columns: 30px minmax(0, 1fr); }
  .plano-linha .progresso-plano, .plano-linha .lado-plano { grid-column: 2; align-items: flex-start; }
  .sistema > summary { grid-template-columns: 1fr; }
  .sistema > summary .meta { text-align: left; }
  .tabela { display: block; overflow-x: auto; }
}

/* ── Vínculo manual de commit (pendência 4 da F2) ── */
.ligar-commit { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0 12px; }
.ligar-commit label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 240px; min-width: 0; font-size: 13px; }
.ligar-commit input { width: 100%; font-size: 13px; padding: 6px 10px; }
.desligar-commit { display: inline-flex; margin-left: auto; }
.desligar-commit .botao { font-size: 12px; padding: 2px 8px; }

/* ── Tarefa pela tela ── */
.nova-tarefa { margin: 12px 0 16px; }
.form-tarefa { margin-top: 10px; padding: 14px; gap: 10px; }
.form-tarefa > button { align-self: flex-start; }
.editar-tarefa { margin-top: 8px; }
.editar-tarefa > summary { list-style: none; width: max-content; }
.editar-tarefa > summary::-webkit-details-marker { display: none; }
.editar-tarefa[open] > summary { color: var(--roxo-claro); border-color: var(--roxo); }

/* ── Ícone duo-tone e o dropdown com ícone (2026-10-23) ── */
/* O traço é roxo (currentColor do symbol); a camada .tom é azul-claro por padrão, ou a cor semântica do IconeAttribute. Na tarefa
   fechada, os dois apagam juntos. */
.icone.duo { flex: none; vertical-align: -2px; color: var(--realce); }
.estado-tarefa-feita .icone.duo, .estado-tarefa-descartada .icone.duo { opacity: .55; }
.nota .tipo .icone.duo { margin-right: 2px; }

/* O select nativo sai da vista mas fica no formulário: é ele que vai no POST e que valida o required. */
.select-icone-nativo {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important;
  opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); border: 0 !important;
}
.select-icone { position: relative; }
.select-icone-botao {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  font: 14px var(--fonte) !important; color: var(--tinta) !important; background: var(--campo) !important;
  border: 1px solid var(--linha-2) !important; border-radius: var(--raio) !important; padding: 8px 30px 8px 10px !important;
  box-shadow: none !important;
}
.select-icone-botao::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 1.5px solid var(--tinta-2); border-bottom: 1.5px solid var(--tinta-2); transform: rotate(45deg);
}
.select-icone-botao:focus-visible, .select-icone-botao[aria-expanded="true"] {
  outline: none; border-color: var(--roxo) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 18%, transparent), 0 0 18px color-mix(in srgb, var(--roxo) 22%, transparent) !important;
}
.select-icone-icone { display: inline-flex; width: 16px; justify-content: center; flex: none; }
.select-icone-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  max-height: 300px; overflow-y: auto; background: var(--menu); border: 1px solid var(--roxo); border-radius: var(--raio);
  box-shadow: 0 12px 32px rgb(0 0 0 / 55%), 0 0 18px color-mix(in srgb, var(--roxo) 25%, transparent);
}
.select-icone-lista li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--tinta-2);
}
.select-icone-lista li.ativo, .select-icone-lista li:hover { background: color-mix(in srgb, var(--roxo) 22%, transparent); color: var(--tinta); }
.select-icone-lista li[aria-selected="true"] { color: var(--roxo-claro); font-weight: 600; }
/* No filtro da lista de tarefas, o botão tem a altura dos outros selects. */
.filtros .select-icone-botao { font-size: 13px !important; padding: 6px 30px 6px 10px !important; min-width: 130px; }

/* ── O seletor de ícone (2026-10-23) ── */
.seletor-icone { position: relative; }
.seletor-icone-botao {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  font: 14px var(--fonte) !important; color: var(--tinta) !important; background: var(--campo) !important;
  border: 1px solid var(--linha-2) !important; border-radius: var(--raio) !important; padding: 7px 10px !important; box-shadow: none !important;
}
.seletor-icone-botao[aria-expanded="true"], .seletor-icone-botao:focus-visible {
  outline: none; border-color: var(--roxo) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 18%, transparent) !important;
}
.seletor-icone-atual { display: inline-flex; color: var(--realce); }
.seletor-icone-painel {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); width: min(420px, 90vw); padding: 10px;
  background: var(--menu); border: 1px solid var(--roxo); border-radius: var(--raio);
  box-shadow: 0 12px 32px rgb(0 0 0 / 55%), 0 0 18px color-mix(in srgb, var(--roxo) 25%, transparent);
  display: flex; flex-direction: column; gap: 8px;
}
.seletor-icone-painel[hidden] { display: none; }
.seletor-icone-painel input[type=search] { width: 100%; font-size: 13px; }
.seletor-icone-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; max-height: 260px; overflow-y: auto; }
.seletor-icone-grade [role=option] {
  display: grid; place-items: center; height: 38px; padding: 0 !important; cursor: pointer; color: var(--realce);
  background: transparent !important; border: 1px solid transparent !important; border-radius: 6px !important; box-shadow: none !important;
}
.seletor-icone-grade [role=option][hidden] { display: none; }
.seletor-icone-grade [role=option]:hover, .seletor-icone-grade [role=option]:focus-visible {
  outline: none; background: color-mix(in srgb, var(--roxo) 18%, transparent) !important; border-color: color-mix(in srgb, var(--roxo) 50%, transparent) !important;
}
.seletor-icone-grade [role=option][aria-selected="true"] { background: color-mix(in srgb, var(--roxo) 28%, transparent) !important; border-color: var(--roxo) !important; }
.seletor-icone-vazio { margin: 0; font-size: 13px; }
.nome-grupo .icone { margin-right: 6px; color: var(--realce); }

/* ── Documentos (PM-199, 2026-10-27): a lista em tabela e o leitor com o índice no trilho ── */
/* A primeira coluna fica com a sobra da largura (o max-width: 0 deixa o resumo cortar em vez de esticar a tabela): cada documento em duas linhas, e o resumo inteiro no title. */
.documentos td { vertical-align: top; }
.documentos tr.recebido td { background: color-mix(in srgb, var(--realce) 7%, transparent); }
.documentos td:first-child { width: 100%; max-width: 0; }
.documentos .titulo-documento { font-weight: 600; margin-right: 8px; }
.documentos .resumo { margin: 3px 0 0; color: var(--tinta-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documentos .area-documento { max-width: 220px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documentos .tamanho, .documentos .data { font-size: 12px; color: var(--tinta-3); white-space: nowrap; }
@media (max-width: 900px) {
  .documentos td:first-child { width: auto; max-width: none; min-width: 260px; }
  .documentos .resumo { white-space: normal; }
}
.documentos-da-area { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.trilho .indice-documento a.item-trilho .titulo-secao { min-width: 0; overflow-wrap: anywhere; }
.trilho .referencias-documento a.item-trilho { overflow-wrap: anywhere; font-size: 12px; }
.leitor-documento { max-width: 860px; }
.leitor-documento .secao-documento { margin-bottom: 28px; scroll-margin-top: 12px; }
.leitor-documento .secao-documento h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* O visual enriquecido (plano documento-visual, 2026-10-29): o iframe sandbox do leitor, o selo com a alternância
   visual/seções, o aviso de defasado e a caixa "O visual não muda com esta edição". Sem CSP global no site. Os 80vh são
   só o começo: o visual.js põe a altura do HTML no iframe (PM-346), e a rolagem fica só na página. A caixa do índice é
   compacta, numa linha abaixo da lista. */
.visual-doc { display: block; width: 100%; height: 80vh; border: 1px solid var(--linha); border-radius: 6px; background: #fff; }
/* Baixar .md e Compartilhar (2026-10-30): o painel abre por baixo do botão, por cima do texto. */
.acoes-documento { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12px; }
.selo-privado { color: var(--cor-orange); border-color: currentColor; }
.selo-fora { color: var(--realce); border-color: currentColor; }
.selo-recebido { color: var(--cor-yellow); border-color: currentColor; }
.contador-menu { margin-left: 5px; padding: 0 5px; border-radius: 8px; background: var(--realce); color: var(--tinta-sobre-acento); font-size: 11px; font-weight: 700; }
.compartilhar { position: relative; }
.compartilhar > summary { list-style: none; }
.compartilhar > summary::-webkit-details-marker { display: none; }
.compartilhar[open] > summary { color: var(--roxo-claro); border-color: var(--roxo); }
.painel-compartilhar {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(420px, 86vw);
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--painel); border: 1px solid var(--linha-2); border-radius: var(--raio); box-shadow: 0 12px 32px rgb(0 0 0 / 55%);
}
.painel-compartilhar .titulo-painel { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); }
.painel-compartilhar p { margin: 0; }
.painel-compartilhar form { margin: 0; }
.link-compartilhar { display: flex; gap: 6px; }
.link-compartilhar input { flex: 1; min-width: 0; font: 12px var(--fonte-mono, monospace); }
.vistas-documento { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; font-size: 12px; }
.vistas-documento .botao[aria-current="page"] { border-color: currentColor; font-weight: 600; }
.visual-defasado { margin: 8px 0 0; }
.visual-inalterado { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; margin: 6px 0; }
.visual-inalterado.compacta { flex-wrap: nowrap; align-items: center; white-space: nowrap; font-size: 12px; color: var(--tinta-3); margin: 6px 0 0; }
/* A edição do documento pela tela (2026-10-28): os botões da seção, a prévia do corpo e a lista de organizar. */
.acoes-secao { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12px; }
.form-secao .previa { min-height: 48px; padding: 10px 12px; border: 1px dashed var(--linha-2); border-radius: 6px; }
.form-secao .previa.erro { color: var(--tinta-3); }
/* O editor de markdown (_EditorMd, 2026-10-28): uma caixa com a barra na faixa do topo e a textarea embaixo, como num
   editor de texto; a prévia fica ao lado em tela larga e embaixo na estreita. A textarea vem antes da barra no HTML (o
   <label> em volta aponta para ela); aqui a barra sobe. O foco em qualquer parte acende a borda da caixa inteira. */
.editor-md { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.editor-md-caixa {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--linha-2); border-radius: 8px; background: var(--cartao);
}
.editor-md-caixa:focus-within { border-color: var(--roxo); }
.editor-md-barra {
  order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px;
  background: var(--cartao-2); border-bottom: 1px solid var(--linha-2);
}
.formulario .editor-md-barra button, .editor-md-barra button {
  font: 600 13px var(--fonte); min-width: 30px; height: 28px; padding: 0 8px; cursor: pointer; color: var(--tinta-2);
  background: transparent; border: 1px solid transparent; border-radius: 5px; box-shadow: none;
}
.formulario .editor-md-barra button:hover, .editor-md-barra button:focus-visible {
  color: var(--tinta); border-color: var(--linha-2); background: var(--cartao);
}
.formulario .editor-md-barra button[data-md-acao="link"], .editor-md-barra button[data-md-acao="link"] { margin-left: auto; }
.formulario .editor-md-caixa textarea, .editor-md-caixa textarea {
  min-height: 14em; resize: vertical; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.formulario .editor-md-caixa textarea:focus, .editor-md-caixa textarea:focus { outline: none; box-shadow: none; }
.editor-md .previa { min-height: 48px; padding: 10px 12px; border: 1px dashed var(--linha-2); border-radius: 6px; font-weight: 400; color: var(--tinta); }
.editor-md .previa:empty::before { content: "A prévia aparece aqui."; color: var(--tinta-3); }
.editor-md .previa.erro { color: var(--tinta-3); }
@media (min-width: 901px) {
  .editor-md { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .editor-md .previa { min-height: 14em; }
}
/* O seletor de link interno: um <dialog> só, aberto pelo [[ ou pelo botão Link. */
dialog.seletor-referencia {
  width: min(560px, 92vw); padding: 16px; color: var(--tinta); background: var(--cartao);
  border: 1px solid var(--roxo); border-radius: var(--raio); box-shadow: 0 0 24px var(--brilho);
}
dialog.seletor-referencia::backdrop { background: var(--fundo-modal); }
.seletor-rotulo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.seletor-rotulo .dica { font-weight: 400; color: var(--tinta-3); }
.seletor-rotulo input { font: 14px var(--fonte); color: var(--tinta); background: var(--campo); border: 1px solid var(--linha-2); border-radius: var(--raio); padding: 8px 10px; }
.seletor-rotulo input:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo) 18%, transparent); }
#seletor-lista { list-style: none; margin: 8px 0 0; padding: 0; max-height: 40vh; overflow-y: auto; }
#seletor-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
#seletor-lista li[aria-selected="true"], #seletor-lista li:hover { background: var(--cartao-2); outline: 1px solid var(--roxo); }
#seletor-lista .seletor-tipo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--realce); min-width: 76px; }
#seletor-lista small { flex-basis: 100%; padding-left: 84px; color: var(--tinta-3); }
.seletor-aviso { margin: 8px 0 0; min-height: 1.2em; font-size: 12px; color: var(--tinta-3); }
.ordenar-secoes { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; max-width: 860px; }
.ordenar-secoes > li { display: flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .documento { grid-template-columns: 1fr; } }

/* As "Ligações" (PM-283): os elos e as citações da página, com o h3 pelo tipo da outra ponta, a seta no lugar do marcador
   (→ sai, ← chega, nas cores dos tokens --seta-*), o selo do workspace fora do link e o "e mais". */
#ligacoes h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-3); margin: 14px 0 6px; }
#ligacoes ul.ligacoes { list-style: none; margin: 0; padding-left: 0; }
#ligacoes ul.ligacoes > li { margin: 2px 0; padding-left: 20px; text-indent: -20px; }
#ligacoes .seta { display: inline-block; width: 20px; text-indent: 0; font-weight: 700; }
#ligacoes li.sai > .seta { color: var(--seta-sai); }
#ligacoes li.chega > .seta { color: var(--seta-chega); }
#ligacoes .dica { font-size: 12px; color: var(--tinta-3); }
#ligacoes .trecho { color: var(--tinta-2); }
#ligacoes .ref-selo {
  margin-left: 4px; padding: 0 5px; border: 1px solid var(--linha-2); border-radius: var(--raio);
  font-size: 0.8em; color: var(--tinta-3); white-space: nowrap;
}
#ligacoes .e-mais { margin: 2px 0 8px; font-size: 12px; color: var(--tinta-3); }

/* A segunda cor orienta o foco e a leitura de detalhes; estados conservam suas cores semânticas. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.filtros input:focus, .filtros select:focus { outline: 1px solid var(--azul); outline-offset: 1px; }
.trilha { color: var(--azul); }