/* Central de Projetos — SaaS clean: canvas cinza, superfícies brancas
   flutuantes, raios generosos, pills e badges com tinta suave. */
:root {
  /* Camadas do print: página master QUASE BRANCA → superfícies cinzas
     (sidebar e colunas do quadro) → folhas brancas de conteúdo. */
  --fundo-pagina: #fafaf9;
  --superficie: #ffffff;
  --superficie-2: #f3f3f1;
  --tinta: #1c1c1a;
  /* #78716c dava 4,32:1 sobre --superficie-2 (#f3f3f1), abaixo do mínimo AA de
     4,5:1 — e é justamente esse o par do menu lateral e dos contadores. Este
     valor dá 4,78:1 ali, 5,09 sobre a página e 5,31 sobre o branco. A folga é
     de propósito: se um dia a superfície clarear ou escurecer um pouco, o
     contraste não cai abaixo do mínimo sem ninguém notar.
     Não atinge o relatório de Entregas: entregas.css declara o seu próprio. */
  --mudo: #716a65;
  --borda: #e9e7e4;
  --positivo: #15803d;
  --positivo-fundo: #e7f8ef;
  --erro: #b91c1c;
  --erro-fundo: #fee2e2;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sombra-painel: 0 1px 2px rgba(28, 25, 23, 0.03), 0 16px 40px rgba(28, 25, 23, 0.06);
  --sombra-cartao: 0 1px 2px rgba(28, 25, 23, 0.05);
  --raio-painel: 24px;
  --raio-cartao: 16px;
  /* Altura dos chips da barra do topo. Virou token porque a faixa da marca, na
     coluna da esquerda, precisa ter exatamente esta altura: é o que faz o
     painel do menu começar na mesma linha da folha branca do conteúdo ao lado.
     Número solto em dois lugares = desalinho na primeira vez que um mudar. */
  --altura-topo: 38px;
  /* O respiro em volta da página inteira. Virou token porque a lateral agora
     ocupa a altura da tela MENOS ele, dos dois lados — e um número solto em
     três lugares é desalinho garantido na primeira vez que um mudar. */
  --respiro-pagina: clamp(0.35rem, 0.7vw, 0.6rem);
  /* Série do gráfico de ritmo: uma cor por frente. Escurece do topo pro fim da
     lista em vez de usar matiz aleatório — a frente que mais entrega fica mais
     forte, e a leitura funciona mesmo pra quem não distingue cor, porque a
     ordem da pilha e a legenda seguem a mesma sequência. */
  /* Quatro tokens que a folha do roadmap (assets/roadmap.css) exige e que a
     Central não tinha. Mesmos valores da entregas.css de propósito: é o mesmo
     componente desenhado nas duas páginas, e divergir aqui faria o gráfico do
     Panorama ter outra cor de "em teste" que a do relatório. */
  --atencao: #92400e;
  --atencao-fundo: #fdf0d5;
  --neutro: rgba(120, 113, 108, 0.3);
  --fio: 1px solid var(--borda);
  --serie-1: #1c1c1a;
  --serie-2: #44403c;
  --serie-3: #78716c;
  --serie-4: #a8a29e;
  --serie-5: #d6d3d1;
  --serie-6: #e9e7e4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: var(--respiro-pagina);
  background: var(--fundo-pagina);
  color: var(--tinta);
  font: 15px/1.5 var(--sans);
  min-height: 100vh;
}
h1, h2, h3, h4 { letter-spacing: -0.01em; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 650; }
.mudo { color: var(--mudo); }
.erro { color: var(--erro); }

/* ---------- Barra superior ---------- */
/* Fica na coluna do conteúdo, não mais espalhada pela largura toda: sem
   padding horizontal próprio, pra alinhar exatamente com as folhas brancas
   do main logo abaixo — quem dá a margem lateral é o padding do .corpo. */
.coluna-principal > header.topo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0;
  margin-bottom: 1.1rem;
}
/* O nome do produto é RÓTULO, não manchete: a marca da casa, logo acima, é
   quem assina a tela. Com os dois em preto cheio e peso 700 eles disputavam a
   mesma atenção e nenhum vencia. O tratamento é o mesmo dos títulos de bloco
   (.blocos .bloco > h3, "SPRINTS", "AGORA") — papel igual, estilo igual, sem
   inventar valor novo. */
/* A sobra na faixa é de 7px. Com a Plus Jakarta Sans carregada o nome cabe;
   se ela falhar, a fonte de sistema é mais larga e ele vazaria por cima da
   coluna do conteúdo. Truncar com reticências é um defeito menor que invadir
   a página, e some assim que a fonte chega. */
.nome-app {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mudo);
}
.acoes { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
/* Chips do topo: cinza sobre a página clara, como "Search"/"Create Job" */
.acoes button, #alternar-lateral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--altura-topo);
  height: var(--altura-topo);
  /* Numa linha apertada o flex encolhe o chip pela largura e ele deixa de ser
     quadrado — aconteceu com o recolher na coluna estreita, que saiu 37,1 de
     38. A medida é fixa, não uma sugestão. */
  flex: none;
  font-size: 1rem;
  border: none;
  background: var(--superficie-2);
  border-radius: 12px;
  cursor: pointer;
  color: var(--tinta);
}
.acoes button:hover, #alternar-lateral:hover { background: #ebebe8; }
/* Dentro do painel, o cinza dos chips (--superficie-2) é a cor do próprio
   painel: o botão sumia e sobrava só o ícone solto. Branco é o mesmo fundo do
   item de menu ativo, logo abaixo — lê como chip de novo. */
#alternar-lateral { color: var(--mudo); background: var(--superficie); }
#alternar-lateral:hover { background: #ebebe8; }
/* Painel lateral com barra — mesma família de linha dos ícones da nav */
#alternar-lateral::before {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M9 3v18'/%3E%3C/svg%3E");
  -webkit-mask: var(--icone) no-repeat center / contain;
  mask: var(--icone) no-repeat center / contain;
}

/* Filtro global no topo: é escopo, não ação — fica à esquerda das ações.
   Seletor composto (não só .filtro-topo) pra vencer o margin-bottom de
   .filtros mais abaixo no arquivo — mesma especificidade, então quem vier
   depois no CSS ganha; sem isso o filtro ficava desalinhado no topo. */
.filtros.filtro-topo { margin: 0; }
.filtro-topo select { font-weight: 600; }

/* .app carrega a altura da viewport (descontado o padding do body) até
   .corpo, que a repassa pra .coluna-principal (align-self:stretch — só ela,
   a lateral continua do tamanho do próprio conteúdo) e daí pra main (flex).
   Sem isso, nenhuma seção consegue saber "até onde vai a tela" pra usar
   min-height: 100% e preencher o espaço vazio de uma lista curta. */
.app { display: flex; flex-direction: column; min-height: calc(100vh - var(--respiro-pagina) * 2); }

/* ---------- Corpo: sidebar + conteúdo (como na referência) ---------- */
/* Sidebar vai até o topo — o header antes ficava por cima das duas colunas
   e empurrava a lateral pra baixo; agora ela é a própria primeira linha do
   grid, no mesmo nível do header da coluna de conteúdo. */
/* Sem padding próprio: ele moraria ENTRE a borda da tela e a lateral, e a
   lateral precisa alcançar o topo e o rodapé. O respiro do conteúdo passou a
   ser da .coluna-principal, que é quem de fato precisa dele. */
.corpo {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  flex: 1;
}
.coluna-principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-self: stretch;
  padding: 0.9rem clamp(0.8rem, 1vw, 1.1rem) 1.6rem 0;
}
/* Marca + nome do produto, um sobre o outro, no alto do painel. Ficam no
   MESMO bloco porque são par: a casa e o produto dela. O botão de recolher
   divide a linha do logo porque os três lado a lado não cabem — logo (62px) +
   nome (143px) + botão (38px) dá 254 numa coluna de 232. */
/* Gap curto de propósito (16/10/2026): a linha do logo tem a altura do botão de
   recolher (38px) e o logo (24px) fica centrado nela, então ~7px de folga já
   vêm de graça entre o logo e o nome. Com 0.45rem somados, o nome parecia solto. */
.marca { display: flex; flex-direction: column; gap: 0.1rem; padding: 0 0.35rem; }
/* Altura travada com `width: auto` é o que preserva a proporção do arquivo de
   360x139; travar a largura entortaria a marca. E `align-self` não é enfeite:
   o padrão do flex é `stretch`, que vence a largura automática e achata o
   wordmark — já aconteceu duas vezes aqui. */
.marca-logo { display: block; align-self: center; height: 24px; width: auto; }
/* Sidebar: painel cinza próprio, da altura da tela — a nav ativa (branca)
   salta dele. A altura é fixa (viewport menos o respiro de cima e de baixo) e
   não "o tamanho do conteúdo": é isso que faz o painel encostar no rodapé
   mesmo com sete itens de menu numa tela grande.
   `sticky` mantém o painel parado enquanto o conteúdo rola; com
   altura cheia ele nunca sai da tela, mas sem o sticky ele subiria junto numa
   página longa. `overflow-y: auto` é a saída de emergência de uma tela baixa:
   a nav rola dentro do painel em vez de vazar por cima da página. */
.lateral {
  position: sticky;
  /* `top: 0` grudava o painel na borda da tela ao rolar: ele perdia o respiro
     de cima e sobrava o dobro embaixo. O deslocamento tem que ser o mesmo
     respiro que já existe na posição de repouso. */
  top: var(--respiro-pagina);
  height: calc(100vh - var(--respiro-pagina) * 2);
  display: flex;
  flex-direction: column;
  /* O vão entre o bloco da marca e o menu é o que separa identidade de
     navegação — são duas zonas, não uma lista de cinco coisas. Com 1rem o
     rótulo encostava no primeiro item e os dois liam como um bloco só. A
     coluna tem altura de tela e sobram ~300px no rodapé: o espaço aqui não
     custa nada a ninguém. */
  gap: 1.9rem;
  overflow-y: auto;
  background: var(--superficie-2);
  border-radius: 20px;
  padding: 0.95rem 0.7rem 1rem;
}
/* A linha de cima do bloco da marca: logo à esquerda, recolher à direita. */
.lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.paginas { display: flex; flex-direction: column; gap: 0.3rem; }
.paginas a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--mudo);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
}
/* Ícones de linha embutidos (sem lib): máscara herda a cor do texto */
.paginas a::before {
  content: '';
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icone) no-repeat center / contain;
  mask: var(--icone) no-repeat center / contain;
  opacity: 0.85;
}
/* Meus itens: lista com checks (minhas tarefas) */
#nav-meus-itens {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 2 2 4-4'/%3E%3Cpath d='m3 17 2 2 4-4'/%3E%3Cpath d='M13 6h8'/%3E%3Cpath d='M13 18h8'/%3E%3C/svg%3E");
}
/* Panorama: medidor — a leitura do estado num relance */
#nav-panorama {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18a8 8 0 1 1 16 0'/%3E%3Cpath d='m12 18 4.5-5.5'/%3E%3C/svg%3E");
}
/* Pendências: triângulo de atenção (o que exige ação) */
#nav-pendencias {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.5 18a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
/* Produtos: caixa (o produto em si) */
#nav-produtos {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8a2 2 0 0 1-1 1.7l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.7l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}
/* Roadmap: barras empilhadas numa linha do tempo — é o que a página mostra */
#nav-roadmap {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h10'/%3E%3Cpath d='M8 12h12'/%3E%3Cpath d='M4 19h7'/%3E%3C/svg%3E");
}
/* Relatórios: folha com lápis — a entrada do menu em que se LÊ e se ESCREVE.
   Eram três itens de papel (Documentos, Entregas, Status); o lápis ficou porque
   escrever é o que só acontece aqui dentro. */
#nav-relatorios {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v3'/%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M18.4 14.6a2 2 0 0 1 3 3L17 22h-3v-3Z'/%3E%3C/svg%3E");
}
/* Projetos: kanban (colunas do board) */
#nav-projetos {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 7v10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M16 7v8'/%3E%3C/svg%3E");
}
.paginas a:hover { color: var(--tinta); }
.paginas a.ativa {
  color: var(--tinta);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}
.conta-nav { margin-left: auto; font-size: 0.8rem; color: var(--mudo); font-variant-numeric: tabular-nums; }
/* Status da conexão: no topo, à esquerda das ações — linha com bolinha */
#badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 550; color: var(--tinta); white-space: nowrap; }
#badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #a8a29e; flex: none; }
#badge[data-estado='conectado']::before { background: #22c55e; }
#badge[data-estado='atualizando']::before { background: #eab308; }
#badge[data-estado='vencido'], #badge[data-estado='sem-token'], #badge[data-estado='offline'] { color: var(--erro); }
#badge[data-estado='vencido']::before, #badge[data-estado='sem-token']::before, #badge[data-estado='offline']::before { background: #ef4444; }
#carimbo { font-size: 0.78rem; margin-right: 0.3rem; white-space: nowrap; }

/* ---------- Páginas como painéis flutuantes ---------- */
main { min-width: 0; flex: 1; min-height: 0; }
main > section {
  background: var(--superficie);
  border: 1px solid rgba(28, 25, 23, 0.05); /* folha branca sobre página quase branca */
  border-radius: var(--raio-painel);
  box-shadow: var(--sombra-painel);
  padding: 1.6rem 1.7rem 1.7rem;
}

/* ---------- Sidebar recolhida: só os ícones ---------- */
body.lateral-recolhida .corpo { grid-template-columns: 62px minmax(0, 1fr); }
body.lateral-recolhida .lateral { padding: 0.8rem 0.45rem 1rem; }
body.lateral-recolhida .rotulo-nav,
body.lateral-recolhida .conta-nav,
body.lateral-recolhida .nome-app { display: none; }
/* Recolhida, a coluna mostra só o botão de recolher: a marca sai.
   Tentei duas saídas pra mantê-la aqui e as duas custaram mais do que valiam.
   O wordmark inteiro só cabia em 15px de altura, ilegível. O Y recortado dele
   ficava legível, mas tem 20,5px de largura e, ao lado do chip de 38, obrigava
   a coluna a abrir de 62 pra 84px — larga demais pro que uma coluna recolhida
   serve, que é devolver espaço pro conteúdo.
   Pra marca voltar a aparecer aqui ela precisa ser um arquivo próprio e
   quadrado; recorte de wordmark não resolve nesta largura. */
body.lateral-recolhida .marca { padding: 0; }
body.lateral-recolhida .marca-logo { display: none; }
body.lateral-recolhida .lateral-topo { justify-content: center; }
body.lateral-recolhida .paginas a { justify-content: center; padding: 0.7rem 0; gap: 0; }
h2 { font-size: 1.25rem; margin: 0 0 1rem; }
/* Troca de página: esconde todas e mostra só a ativa. Antes era par a par
   ("meus-itens esconde projetos"…), o que multiplicava regras a cada página
   nova. O board tem o próprio atributo hidden e não entra aqui. */
#secao-panorama, #secao-pendencias, #secao-produtos, #secao-roadmap, #secao-report, #secao-meus-itens, #secao-projetos, #secao-relatorios { display: none; }
body[data-pagina='panorama'] #secao-panorama,
body[data-pagina='pendencias'] #secao-pendencias,
body[data-pagina='produtos'] #secao-produtos,
body[data-pagina='roadmap'] #secao-roadmap,
body[data-pagina='report'] #secao-report,
body[data-pagina='projetos'] #secao-projetos,
body[data-pagina='relatorios'] #secao-relatorios { display: block; }
/* Precisa de display:flex (não block) pra esticar as colunas do quadro —
   por isso fora da lista acima, que é toda display:block. Mesma
   especificidade de #secao-panorama,...,#secao-meus-itens{display:none} lá
   em cima (um seletor de ID cada); como esta regra vem depois no arquivo, é
   ela quem vale nas outras páginas — então o display:none daquela lista
   também tem que valer aqui, senão "Meus itens" nunca esconde. */
body[data-pagina='meus-itens'] #secao-meus-itens { display: flex; }
body:not([data-pagina='meus-itens']) #secao-meus-itens { display: none; }
/* Lista curta não deve deixar página cinza sobrando embaixo — a folha
   branca vai até o fim da tela mesmo com poucos itens. O resto da cadeia
   (quadro esticando, colunas acompanhando) é comportamento do componente
   — ver .quadro-etapas / .coluna acima. */
#secao-meus-itens { min-height: 100%; flex-direction: column; }
#meus-itens { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---------- Barra de filtros ---------- */
.filtros {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.filtros input[type='search'] {
  font: inherit;
  font-size: 0.86rem;
  padding: 0.45rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: var(--superficie-2);
  min-width: 230px;
  color: var(--tinta);
}
.filtros input[type='search']::placeholder { color: var(--mudo); }
.filtros input[type='search']:focus { outline: 2px solid #d4d4d8; }
/* Vale pros três selects do projeto: o dos filtros, o mês no documento e o
   recorte na barra de ferramentas. Fora daqui eles caíam na aparência nativa,
   com a seta colada na borda e o controle mais alto que o resto. */
.filtros select{
  font: inherit;
  font-size: 0.86rem;
  font-weight: 550;
  padding: 0.45rem 2.2rem 0.45rem 0.95rem; /* espaço reservado pra seta */
  border: none;
  /* O MESMO CANTO DOS BOTÕES DE ÍCONE do topo (↻ e ⚙), que são 12px. Em
     pílula, o seletor era a única peça totalmente redonda da faixa e não
     parecia do mesmo conjunto que os dois vizinhos. */
  border-radius: 12px;
  background-color: var(--superficie-2);
  color: var(--tinta);
  appearance: none;
  -webkit-appearance: none;
  /* seta própria, com folga da borda — a nativa colava e esticava o controle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  width: auto;
  max-width: 15rem;
  flex: none;
  align-self: flex-start;
  cursor: pointer;
  text-overflow: ellipsis;
}
.chips-filtro { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.chip-filtro {
  font: inherit;
  font-size: 0.79rem;
  font-weight: 550;
  border: none;
  background: var(--superficie-2);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  cursor: pointer;
  color: var(--mudo);
}
.chip-filtro::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4d4d8;
  margin-right: 0.4rem;
}
.chip-filtro.tipo-epic::before { background: #ff7b00; }
.chip-filtro.tipo-feature::before { background: #773b93; }
.chip-filtro.tipo-pbi::before { background: #009ccc; }
.chip-filtro.tipo-bug::before { background: #cc293d; }
.chip-filtro.tipo-task::before { background: #eab308; }
.chip-filtro .n { font-weight: 400; }
.chip-filtro:hover { color: var(--tinta); }
.chip-filtro.ativo { background: var(--tinta); color: #fff; }
.chip-filtro.ativo .n { color: #d4d4d8; }

/* ---------- Quadro (Meus itens e Board) ---------- */
.quadro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 0.9rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}
/* Meus itens: três colunas fixas por etapa — sempre cabem, sem scroll lateral.
   flex:1 é o que deixa o quadro aceitar altura de um wrapper flex-column que
   queira esticá-lo (hoje só #secao-meus-itens faz isso) — sem um wrapper
   assim, o flex:1 não tem efeito e o quadro segue do tamanho do conteúdo. */
.quadro-etapas { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; min-height: 0; }
.coluna-vazia { margin: 0.2rem 0.2rem 0.3rem; font-size: 0.82rem; }
/* flex-column: quando o grid estica a coluna (align-items:stretch, padrão),
   é isso que deixa a <ul> crescer junto — senão o fundo cinza ficava mais
   alto mas a lista continuava presa no tamanho do próprio conteúdo. */
.coluna {
  background: var(--superficie-2);
  border-radius: 18px;
  padding: 1rem 0.9rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.coluna > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.2rem 0.7rem;
  margin: 0;
}
.coluna h4 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.45rem; }
.ponto {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.conta { font-size: 0.8rem; color: var(--mudo); font-variant-numeric: tabular-nums; }
.coluna ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.item {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 0.85rem 0.95rem 0.9rem;
  text-decoration: none;
  color: var(--tinta);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.item .cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.item .titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}
.item .id { font-size: 0.74rem; color: var(--mudo); font-variant-numeric: tabular-nums; flex: none; }
/* Badge de tipo em linha própria, como o "84% Match" da referência */
.badge-tipo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.16rem 0.6rem;
  background: var(--superficie-2);
  color: var(--mudo);
}
.item .badge-tipo { margin-top: 0.5rem; align-self: flex-start; }
/* Selos lado a lado: tipo + sprint/backlog */
.item .selos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.item .selos .badge-tipo { margin-top: 0; }
.badge-tipo.tipo-epic { background: #ffefdd; color: #b45309; }
.badge-tipo.tipo-feature { background: #f3e8fa; color: #7e22ce; }
.badge-tipo.tipo-pbi { background: #e0f2fe; color: #0369a1; }
.badge-tipo.tipo-bug { background: #fee2e2; color: #b91c1c; }
.badge-tipo.tipo-task { background: #fef9c3; color: #a16207; }
.item .linha { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 0.45rem; font-size: 0.8rem; }
.item .linha .rot { color: var(--mudo); flex: none; }
.item .linha .val {
  text-align: right;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* pai com título longo não dobra o cartão */
}
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* Estados de atenção (Impediment, Blocked…) */
.coluna.atencao { background: #fdf1f1; }
.coluna.atencao h4 { color: var(--erro); }

/* ---------- Cartões de projeto ---------- */
#grid {
  display: grid;
  /* auto-fit (não auto-fill): trilhas vazias colapsam e os cartões
     existentes esticam — com 2 times, cada um toma metade do painel */
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1rem;
}
.card {
  background: var(--superficie-2);
  border-radius: 16px;
  padding: 1.1rem 1.15rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.card h3 { margin: 0; font-size: 1.05rem; }
/* Estatísticas: três células iguais, quebra empilhada — nada de linhas que dobram.
   .vivo e .niveis crescem pra que a faixa de sprint e o rodapé fiquem
   ancorados embaixo — cartões lado a lado alinham zona a zona. */
.vivo { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.87rem; flex: 1; }
.vivo > .erro { margin: 0; }
.niveis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; flex: 1; }
/* Rótulo e total na MESMA linha (21/10/2026): o rótulo é pequeno e deixava uma
   faixa vazia à direita dele, com o número grande sozinho na linha de baixo.
   Lado a lado, o cartão ganha uma linha de altura e a leitura vira uma frase
   só — "Épicos: 8". Alinhados pela base, não pelo meio: são dois tamanhos bem
   diferentes, e centralizar faria o rótulo flutuar no meio do número. */
.nivel {
  background: var(--superficie);
  border-radius: 12px;
  padding: 0.75rem 0.8rem 0.7rem;
  box-shadow: var(--sombra-cartao);
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 0.5rem;
}
.nivel-rot {
  color: var(--mudo);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 0;
}
.nivel-total {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.nivel.vazio .nivel-total { color: var(--mudo); }
/* A quebra é uma TABELINHA de duas colunas, não três frases empilhadas.
   O fio separa o total do detalhe: o número grande é o assunto, a lista é a
   repartição dele. Sem o fio os quatro números pareciam uma lista só, e o
   primeiro competia com os de baixo. */
.nivel-quebra {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--borda);
  color: var(--mudo);
  font-size: 0.73rem;
  line-height: 1.5;
  /* UM grid pra lista inteira, não um por linha (21/10/2026). Com um grid por
     <li> a coluna do número precisava de largura FIXA — `auto` media cada linha
     sozinha e a de 19 abria mais que as de 3 e 5, desalinhando os rótulos. Mas
     a largura fixa cabia três dígitos SEMPRE: num cartão de um dígito só, a
     lista nascia recuada do total grande e da régua acima dela, e a de dois
     dígitos ficava com a borda esquerda serrilhada. Era o que parecia defeito.

     Com o grid na <ul>, `auto` mede a coluna uma vez, pela maior célula DAQUELE
     cartão: a lista encosta na esquerda do cartão e os rótulos alinham. */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.4em;
  align-items: baseline;
  /* O cartão virou grid de duas colunas (rótulo | total); a lista atravessa as
     duas, senão nasceria espremida na primeira. */
  grid-column: 1 / -1;
}
/* As duas células de cada linha participam do grid da lista. O <li> continua
   existindo pro leitor de tela; o que ele perde é a caixa, que aqui não pinta
   nada — cor e peso do `.bloq-linha` seguem por herança. */
.nivel-quebra li { display: contents; }
.nivel-quebra b {
  font-weight: 700;
  text-align: right;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
/* Sem número, a palavra ocupa as duas colunas em vez de ficar recuada
   esperando um dígito que não existe. */
.nivel-quebra .sem-nada span { grid-column: 1 / -1; }
.nivel-quebra .bloq-linha { color: var(--erro); font-weight: 600; }
/* O número do bloqueado herda o vermelho da linha: pintá-lo de tinta separaria
   o dígito do rótulo que o explica. */
.nivel-quebra .bloq-linha b { color: inherit; }
/* Sprint: faixa cheia com barra de progresso */
.sprint-link {
  display: block;
  background: var(--superficie);
  border-radius: 12px;
  padding: 0.6rem 0.75rem 0.65rem;
  box-shadow: var(--sombra-cartao);
  text-decoration: none;
  color: var(--tinta);
}
.sprint-link:hover { background: #fafafa; }
/* O TÍTULO E A RETRANCA na mesma linha, ele à esquerda e ela encostada na
   direita. `flex-start` e não `baseline`: com um nome de sprint que quebre em
   duas linhas, o baseline desceria o selo até a última delas e o olho perderia a
   correspondência entre os dois. */
.sprint-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}
/* 0.95rem põe o nome um degrau ACIMA do título dos itens da prévia (0.85rem, em
   .lista-linhas .item-linha). Ele vinha em 0.8rem, dentro da .sprint-linha —
   menor que o título de cada item que o cartão lista. */
.sprint-nome {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}
/* A DATA é legenda do título: fica na linha de baixo, à esquerda, e o placar
   segue à direita, perto da barra que ele descreve.

   A FOLGA É MEDIDA PELA DIREITA, não pela esquerda. Com 0.15rem o vão dava 5px
   embaixo do título e só 2px embaixo do selo — porque o selo é 2px mais alto que
   o texto e come o respiro da coluna dele. O olho lê o aperto no lado do selo,
   que é o elemento mais pesado da linha. Em 0.5rem são ~8px embaixo do selo, o
   mesmo vão que a data já tem até a barra. */
.sprint-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-size: 0.8rem; margin-top: 0.5rem; }
.sprint-datas { min-width: 0; }
.sprint-prog { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mudo); font-weight: 600; }
.sprint-link .seta { color: var(--mudo); }
/* ---------- Panorama: ritmo (gráfico) e roadmap ---------- */
/* Colunas de altura proporcional, empilhadas por frente. Sem SVG e sem
   biblioteca: o projeto não tem build, e barra em CSS já é o vocabulário da
   casa (a de progresso, logo abaixo, é a mesma ideia deitada). */
.ritmo {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 150px;
  margin-top: 0.25rem;
}
.ritmo-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 0.3rem;
}
/* O padding-top reserva a linha do número do mês mais alto — sem ele a barra
   de pico encosta no teto e o número sai do bloco. */
.ritmo-area {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 1.1rem;
}
/* A barra tem a altura da PROPORÇÃO contra o mês de pico; o número se pendura
   nela por bottom: 100%, então acompanha o topo da barra em qualquer altura. */
.ritmo-barra { position: relative; width: 100%; max-width: 44px; }
.ritmo-valor {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 0.25rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tinta);
  line-height: 1;
}
/* column-reverse: a primeira fatia (a frente que mais entregou) fica embaixo,
   na mesma ordem da legenda. */
.ritmo-pilha {
  display: flex;
  flex-direction: column-reverse;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}
.ritmo-fatia { display: block; width: 100%; }
.ritmo-mes { font-size: 0.72rem; color: var(--mudo); line-height: 1; }
.ritmo-legenda { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.9rem; }
.ritmo-chave { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--mudo); }
.ritmo-chave i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.ritmo-nota { margin: 0.7rem 0 0; font-size: 0.72rem; line-height: 1.5; }

.barra { display: block; height: 5px; border-radius: 999px; background: #e4e4e7; margin-top: 0.5rem; overflow: hidden; }
.barra-cheia { display: block; height: 100%; border-radius: 999px; background: var(--positivo); }
/* Variante do card de sprint com prévia dos PBIs — mesma folha visual do
   .sprint-link, mas o link vira só a parte de cima (nome/progresso/barra)
   pra caber uma lista de links próprios embaixo, com seu próprio rodapé. */
.sprint-card {
  background: var(--superficie);
  border-radius: 12px;
  padding: 0.6rem 0.75rem 0.65rem;
  box-shadow: var(--sombra-cartao);
}
.sprint-card-link { display: block; text-decoration: none; color: var(--tinta); }
/* Prévia dos itens abertos: mesma linha-cartão do Report/tela do épico
   (.lista-linhas .item-linha) — só duas coisas mudam por estar dentro de um
   card que já é --superficie (branco): a folga acima (linha divisória depois
   da barra de progresso) e o fundo da linha, senão ela desaparece dentro do
   próprio card (branco sobre branco). */
/* O fio entre a barra de progresso e os cartões precisa de ar dos dois lados —
   com 0.55/0.5rem ele encostava na barra em cima e no primeiro cartão embaixo,
   e um divisor espremido lê como borda de caixa, não como separação. */
.sprint-card .lista-linhas { margin-top: 0.95rem; padding-top: 0.9rem; border-top: 1px solid #e6e6e9; }
.sprint-card .lista-linhas .item-linha { background: var(--superficie-2); box-shadow: none; }
.sprint-card .lista-linhas .item-linha:hover { background: #ececea; }
/* O "+N mais" virou botão e tem que continuar parecendo a linha discreta que
   era — ele conta um resto, não convida a uma ação. O que muda em relação ao
   <li> de antes é só o que torna um botão clicável: cursor, alvo maior e o
   sublinhado pontilhado que diz "isto responde". */
.sprint-pbis-mais {
  font: inherit;
  font-size: 0.75rem;
  color: var(--mudo);
  border: none;
  background: none;
  padding: 0.25rem 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.sprint-pbis-mais:hover { color: var(--tinta); }

/* ---------- A sprint inteira, no diálogo ---------- */
/* Mais larga que os outros dois diálogos: eles são formulário, este é lista —
   e lista de títulos longos num 560px volta a cortar o que o cartão já cortava,
   que é justamente o motivo deste diálogo existir. */
.sprint-tudo { max-width: 720px; padding: 1.25rem 1.4rem 1.4rem; }
.sprint-tudo-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
/* O selo de fase repete o do cartão, pra quem abriu saber de qual dos três veio.

   AQUI ele continua empilhado acima do título — o diálogo tem o botão de fechar
   no canto direito, e o selo ao lado dele apertaria os dois. É a única folga de
   baixo que o selo tem: a base deixou de ter margem quando, no cartão, ele virou
   o item direito da linha do título. */
.sprint-tudo-cab .sprint-fase { margin-bottom: 0.5rem; }
.sprint-tudo-cab h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; }
.sprint-tudo-cab p { margin: 0.15rem 0 0; font-size: 0.82rem; }
.sprint-tudo-fechar {
  flex: none;
  border: none;
  background: none;
  padding: 0.2rem 0.35rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--mudo);
  cursor: pointer;
}
.sprint-tudo-fechar:hover { color: var(--tinta); background: none; }
/* A lista rola DENTRO do diálogo, não a página: o cabeçalho com o nome da
   sprint e o link do board ficam à vista numa sprint de 60 itens. */
.sprint-tudo-corpo {
  margin-top: 1rem;
  max-height: 60vh;
  overflow: auto;
  /* Ar à direita pro trilho de rolagem não encostar nas linhas. */
  padding-right: 0.3rem;
}
.sprint-tudo-corpo .lista-linhas .item-linha { background: var(--superficie-2); box-shadow: none; }
.sprint-tudo-corpo .lista-linhas .item-linha:hover { background: #ececea; }
/* No cartão o título é cortado numa linha porque a coluna é estreita; aqui ele
   cabe inteiro, e é esse o ganho do diálogo. */
/* `display: block` junto: o título e a linha da descrição são dois textos
   empilhados dentro desta coluna, cada um com o seu próprio corte. */
.sprint-tudo-corpo .item-linha .titulo { display: block; white-space: normal; }
.sprint-tudo-board {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--mudo);
  text-decoration: none;
}
.sprint-tudo-board:hover { color: var(--tinta); }
/* NO TELEFONE A LINHA EMPILHA. Ela foi desenhada pra uma coluna larga — tipo,
   título, estado e #id lado a lado —, e em 375px sobram ~200px pro título:
   medido, "Assinatura Inteligente (PDP + Checkout)" virava três linhas e a de
   um Bug longo virava cinco, com estado e #id ocupando a largura ao lado.

   Aqui o título toma a linha inteira e os três selos descem pra uma segunda,
   com o #id empurrado pra direita. O título em primeiro (`order: -1`) porque é
   ele que a pessoa está procurando; os selos qualificam o que ela já leu. */
@media (max-width: 560px) {
  .sprint-tudo-corpo .item-linha { flex-wrap: wrap; row-gap: 0.35rem; }
  .sprint-tudo-corpo .item-linha .titulo { flex-basis: 100%; order: -1; }
  .sprint-tudo-corpo .item-linha .id { margin-left: auto; }
}
/* Rodapé: atalhos do DevOps rebaixados a links de texto */
.atalhos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.9rem;
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid #e6e6e9;
}
.atalhos a { font-size: 0.78rem; font-weight: 550; color: var(--mudo); text-decoration: none; }
.atalhos a::after { content: ' ↗'; font-size: 0.7em; opacity: 0.7; }
.atalhos a:hover { color: var(--tinta); }

/* ---------- Panorama ---------- */
.blocos { display: flex; flex-direction: column; gap: 0.85rem; }
.bloco { background: var(--superficie-2); border-radius: 18px; padding: 1rem 0.95rem; }
/* Tela do épico: grupos por status empilhados no mesmo bloco — mesmo
   cabeçalho (ponto + rótulo + contagem) das colunas de Meus itens/board,
   só que um embaixo do outro em vez de lado a lado. */
#epico-lista .epico-grupo + .epico-grupo { margin-top: 1.1rem; }
#epico-lista .epico-grupo > header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0 0.2rem 0.5rem; }
#epico-lista .epico-grupo h4 { margin: 0; font-size: 0.9rem; display: flex; align-items: center; gap: 0.45rem; }
/* seletor com .blocos na frente pra vencer ".card h3" sem depender da ordem */
.blocos .bloco > h3 {
  margin: 0 0 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mudo);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.55rem; }
.tile {
  background: var(--superficie);
  border-radius: 12px;
  padding: 0.7rem 0.8rem 0.75rem;
  box-shadow: var(--sombra-cartao);
  min-width: 0;
}
.tile-rot {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mudo);
}
.tile-num { display: block; font-size: 1.55rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile-num.alerta { color: var(--erro); }
.tile-nota { display: block; margin-top: 0.15rem; font-size: 0.68rem; line-height: 1.35; color: var(--mudo); }
.sprints { display: flex; flex-direction: column; gap: 0.5rem; }
/* Quadro de sprints: anterior, em curso e próxima lado a lado. `auto-fit` com
   piso de 230px porque o número de colunas VARIA — time que não selecionou a
   iteração anterior no DevOps vê duas, e duas colunas devem ocupar a largura
   toda em vez de deixar um vão do tamanho da que não existe. */
.sprints-quadro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.6rem;
  align-items: start;
}
/* A retranca de fase é o que diferencia as três colunas num relance — sem ela
   o leitor teria que ler o nome da sprint e saber de cabeça qual é qual.

   É selo nas TRÊS, com a MESMA caixa: antes só a do meio era selo e as
   vizinhas eram texto solto, mais baixo. A diferença de altura ia parar na
   barra de progresso, que descia alguns pixels só na coluna do meio e
   desalinhava as três no topo do bloco. Quem separa as colunas é a cor do
   selo, não o tamanho dele. */
/* A CAIXA DO SELO, comum às três retrancas — é a cor que separa "em curso" das
   outras, nunca o tamanho. Caixa diferente numa delas desalinha o topo das três
   colunas, e desalinha em silêncio: continua bonito, só torto.

   A margem de baixo saiu da base em 09/10/2026: no cartão o selo deixou de ser
   etiqueta acima do bloco e passou a ser o item direito da linha do título. Quem
   ainda o usa empilhado é o diálogo da sprint, e a folga mora lá agora. */
.sprint-fase {
  display: inline-block;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--superficie-2);
  color: var(--mudo);
}
/* A coluna em curso é a que o time olha todo dia. O destaque mora na cor do
   selo e na elevação, não numa borda: "EM CURSO" em tinta cheia e o cartão um
   degrau acima, enquanto as vizinhas ficam em selo neutro e rentes ao bloco.
   A régua preta à esquerda saiu porque lia como borda de caixa — brigava com o
   raio do cartão e pesava mais que o próprio conteúdo da coluna. */
.sprint-atual { box-shadow: 0 2px 8px rgba(28, 25, 23, 0.09); }
.sprint-anterior, .sprint-proxima { box-shadow: none; }
.sprint-atual .sprint-fase { background: var(--tinta); color: var(--fundo-pagina); }
/* Item que saiu desta sprint pra outra. Ocupa o lugar do estado na linha,
   porque o estado dele é de OUTRA sprint agora — mostrar "In Progress" ali
   sugeriria que ele ainda está aqui. A cor é a de atenção, não a de erro:
   transbordar é informação de planejamento, não defeito. */
.selo-transbordo {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--atencao-fundo);
  color: var(--atencao);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Sprint anterior que não deixou nada pra trás é notícia boa e merece uma
   linha, não uma lista vazia. */
.sprint-limpa { margin: 0.5rem 0 0; font-size: 0.8rem; }
/* Aviso permanente da coluna da próxima: vem abaixo da lista e em voz mais
   baixa que ela — é contexto do que está acima, não um item a mais. */
.sprint-nota { margin: 0.55rem 0 0; font-size: 0.72rem; line-height: 1.45; }
.sprint-anterior .sprint-prog, .sprint-proxima .sprint-prog { color: var(--mudo); }
/* A linha de item foi desenhada pra uma coluna larga: tipo, título, estado e
   #id lado a lado. Em três colunas de 230px sobravam ~90px pro título e ele
   saía cortado em duas palavras ("Integrar cu…"), que é o mesmo que não ter
   título. Duas medidas, nesta ordem de importância: o #id sai (é o dado menos
   útil dos quatro, e o link já leva a ele) e o título passa a quebrar em até
   duas linhas em vez de truncar. Linhas de alturas diferentes custam menos que
   títulos ilegíveis. */
.sprints-quadro .lista-linhas .id { display: none; }
.sprints-quadro .lista-linhas .item-linha { align-items: flex-start; }
.sprints-quadro .lista-linhas .badge-tipo, .sprints-quadro .lista-linhas .quando { margin-top: 0.1rem; }
/* O TÍTULO VIRA COLUNA, e o corte em duas linhas desce pro texto dele.

   Era o próprio `.titulo` que carregava o `-webkit-line-clamp: 2`. Com a linha
   da descrição entrando embaixo, o corte passaria a contar as duas juntas: um
   título de duas linhas comeria a descrição inteira, e um de uma linha deixaria
   só o primeiro pedaço dela. O clamp tem que morar em cada texto, separado. */
.sprints-quadro .lista-linhas .titulo { display: block; white-space: normal; }
.sprints-quadro .lista-linhas .titulo-txt,
.sprint-tudo-corpo .item-linha .titulo-txt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
/* O RESUMO DA PBI: anotação do título, nunca um segundo título. Menor, apagado
   e colado nele.

   SEM CORTE AQUI, de propósito. O corte vivia nesta regra, em duas linhas, e
   medi o estrago: numa coluna de board de 300 a 380px — que é a largura real —
   64 dos 71 resumos terminavam em reticência. O lugar onde a pessoa vai pra
   entender o item era justamente o que mostrava menos. Quem corta é só a prévia
   densa do Panorama, logo abaixo, porque lá o diálogo mostra o resto.

   `em` e não `rem`: é relativo ao corpo da linha, então acompanha se o tamanho
   do item mudar. */
.item-linha-desc {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.78em;
  font-weight: 400;
  line-height: 1.35;
  color: var(--mudo);
}
/* A PRÉVIA do cartão de sprint do Panorama, e só ela: quatro itens, linha
   estreita, e o "+N mais" abrindo o diálogo com a lista inteira. Cortar aqui não
   esconde nada — o texto completo está a um clique, no diálogo e no board. */
.sprints-quadro .lista-linhas .item-linha-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* No cartão do board o resumo é o conteúdo, não um detalhe: mais ar acima,
   porque ali ele divide a vertical com o selo de tipo e os metadados. */
.coluna .item .item-linha-desc { margin-top: 0.3rem; }
.pan-atencao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.5rem;
}
/* "ver todas" no cabeçalho de um bloco do Panorama */
.ver-todas {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mudo);
  text-decoration: none;
}
.ver-todas:hover { color: var(--tinta); }
.blocos .bloco > h3 { display: flex; align-items: center; gap: 0.5rem; }
/* Prazo vencido: a única informação da linha que grita */
.item .linha .val-alerta { color: #b45309; font-weight: 650; }
/* Selo do motivo (bloqueado/atrasado): vermelho de alerta, nunca cor de tipo */
.badge-tipo.selo-alerta { background: var(--erro-fundo); color: var(--erro); }

/* ---------- Produtos ---------- */
.grid-produtos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0.8rem; }
.card.produto {
  gap: 0.5rem;
  background: var(--superficie); /* o bloco do time já é cinza — cinza sobre cinza desaparecia */
  box-shadow: var(--sombra-cartao);
}
.card.produto h3 { font-size: 0.98rem; line-height: 1.35; }
.card.produto h3 a { color: inherit; text-decoration: none; }
.card.produto h3 a:hover { text-decoration: underline; }
.card.produto h3 .id { font-size: 0.74rem; color: var(--mudo); font-weight: 550; }
.produto .selos { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.produto .linha { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; }
.produto .linha .rot { color: var(--mudo); flex: none; }
.produto .linha .val {
  text-align: right;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* margin-top:auto encosta a barra na base — cartões vizinhos alinham.
   Virou link pra tela do épico (Features/PBIs), por isso reseta estilo de <a>. */
.progresso {
  display: block;
  background: var(--superficie-2); /* cinza dentro do cartão branco */
  border-radius: 12px;
  padding: 0.55rem 0.7rem 0.65rem;
  margin-top: auto;
  text-decoration: none;
  color: inherit;
}
.progresso:hover { background: #ececea; }
.progresso .seta { color: var(--mudo); }
/* contador ao lado do nome do time, no cabeçalho do bloco */
.blocos .bloco > h3 .conta { margin-left: auto; }
#baixar { background: var(--tinta); color: #fff; }
#baixar:hover { background: #3f3f46; }

/* Impressão: a página vira o documento que vai pro stakeholder. Fora navegação,
   sombras e tudo que só serve na tela; os meses recolhidos abrem. */
@media print {
  body { padding: 0; background: #fff; }
  .app > header.topo, .lateral { display: none !important; }
  .corpo { display: block; padding: 0; }
  main > section { box-shadow: none; border: none; padding: 0; }
  #secao-report { display: block !important; }
  .lista-linhas .item-linha { box-shadow: none; border: 1px solid #eee; }
}

/* ---------- Report: listas ---------- */
.lista-linhas {
  list-style: none;
  margin: 0;
  padding: 0 0.4rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.lista-linhas .item-linha {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--superficie);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  box-shadow: var(--sombra-cartao);
  text-decoration: none;
  color: var(--tinta);
  font-size: 0.85rem;
}
.lista-linhas .badge-tipo { flex: none; }
.lista-linhas .titulo {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lista-linhas .quando, .lista-linhas .id {
  flex: none;
  font-size: 0.74rem;
  color: var(--mudo);
  font-variant-numeric: tabular-nums;
}

/* ---------- Board dedicado ---------- */
.board-topo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
/* A seta de voltar, dos dois cabeçalhos que usam .board-topo.

   Era regra de ID (#board-voltar) e valia só pro board: a seta do épico, com
   a mesma marcação no mesmo cabeçalho, caía sem estilo nenhum e saía desenhada
   pelo navegador — quadrada, com borda fina e fora do eixo dos outros botões.
   Por classe, a próxima tela que reaproveitar .board-topo já nasce certa. */
.board-topo .voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  border: none;
  background: var(--superficie-2);
  border-radius: 999px;
  cursor: pointer;
  color: var(--tinta);
}
.board-topo .voltar:hover { background: #e9e9eb; }
.board-topo .voltar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.board-titulos h2 { margin: 0; font-size: 1.15rem; }
#board-sub { margin: 0.05rem 0 0; font-size: 0.8rem; }
.board-acoes { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.board-acoes a,
.board-acoes button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--tinta);
  background: var(--superficie-2);
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.board-acoes a:hover,
.board-acoes button:hover { background: #e9e9eb; }
#board-filtro-sprint.ativo { background: var(--tinta); color: #fff; }
/* NAVEGAÇÃO ENTRE SPRINTS. Primeira do grupo da direita, na mesma linha do
   "Abrir no DevOps": ela diz pra onde IR, e as duas seguintes são o que fazer
   com a sprint que já está na tela.

   O par fica mais leve que as ações: mesma pílula, sem fundo. Duas setas
   nomeadas competindo em peso com "Abrir no DevOps" dariam três botões de igual
   importância num cabeçalho que já tem o botão de voltar.

   `gap: 0` entre as duas setas, e o respiro dos lados vem do padding delas: sem
   fundo, a folga do .board-acoes abriria um vão grande demais entre um par que
   é uma coisa só. */
.board-sprint-nav { display: flex; align-items: center; gap: 0; }
.board-sprint-nav button {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--mudo);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}
.board-sprint-nav button:hover { background: var(--superficie-2); color: var(--tinta); }
.board-sprint-nav button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
/* No telefone o grupo da direita já quebra sozinho (.board-acoes é flex-wrap);
   a nav vira a primeira linha dele, encostada à esquerda do grupo. */
@media (max-width: 640px) {
  .board-sprint-nav { flex-basis: 100%; }
  .board-sprint-nav button:first-child { padding-left: 0; }
}
.quadro-board .coluna ul { max-height: calc(100vh - 320px); }
/* Coluna vazia no board do sprint: o aviso ocupa o lugar da lista e centra nos
   dois eixos. Só aqui — nas outras telas o `.coluna-vazia` é uma linha curta
   encostada à esquerda, e o board é o único quadro em que a coluna vazia fica
   ao lado de colunas cheias e precisa ler como etapa sem nada, não como erro.

   `flex: 1` porque a .coluna é flex-column: sem isso o parágrafo ficaria no
   topo e a altura que o grid dá à coluna sobraria vazia embaixo.
   `min-height: 7rem` segura a coluna quando TODAS estão vazias e não há
   vizinha cheia pra esticá-la. */
.quadro-board .coluna-vazia {
  flex: 1;
  min-height: 7rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---------- Diálogos ---------- */
dialog {
  border: none;
  border-radius: var(--raio-painel);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  padding: 1.4rem 1.5rem;
  max-width: 560px;
  width: calc(100vw - 2rem);
  max-height: 85vh;
  overflow: auto;
}
dialog::backdrop { background: rgba(24, 24, 27, 0.4); }
dialog h2 { margin-top: 0; }
dialog label { display: block; margin: 0.6rem 0; font-size: 0.9rem; }
dialog input[type='text'], dialog input[type='password'], dialog input:not([type]) {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: none;
  border-radius: 10px;
  background: var(--superficie-2);
  font: inherit;
  margin-top: 0.25rem;
}
dialog input:focus { outline: 2px solid #d4d4d8; }
dialog button, .botao {
  font: inherit;
  font-size: 0.87rem;
  font-weight: 550;
  border: none;
  background: var(--superficie-2);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: var(--tinta);
}
dialog button:hover, .botao:hover { background: #e9e9eb; }
#wizard-descobrir, #wizard-concluir, #conf-salvar { background: var(--tinta); color: #fff; }
#wizard-descobrir:hover, #wizard-concluir:hover, #conf-salvar:hover { background: #3f3f46; }
#wizard-lista fieldset { border: none; background: var(--superficie-2); border-radius: 12px; margin: 0.6rem 0; padding: 0.6rem 0.9rem; }
#wizard-lista legend { font-weight: 650; padding: 0 0.3rem; }
#wizard-lista label { display: block; margin: 0.2rem 0; }
details summary { cursor: pointer; color: var(--mudo); font-size: 0.88rem; }
.linha-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
#conf-lista { list-style: none; padding: 0; }
#conf-lista li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.6rem;
  background: var(--superficie-2);
  border-radius: 10px;
  margin-bottom: 0.35rem;
}
.ordem button { padding: 0.15rem 0.55rem; margin-left: 0.25rem; border-radius: 8px; background: var(--superficie); }

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  .coluna-principal > header.topo { flex-wrap: wrap; } /* o seletor global cabe na 2ª linha */
  /* Título do produto ganha a linha inteira; situação desce pra própria linha */
  
  
  main > section { padding: 1.1rem 1rem 1.2rem; }
  #grid { grid-template-columns: 1fr; }
  .atalhos a { padding: 0.45rem 0; font-size: 0.85rem; } /* alvo de toque maior */
  .niveis { gap: 0.45rem; }
  /* Rótulo e total voltam a empilhar: com três cartões lado a lado o cartão
     fica com uns 90px, e na mesma linha "FEATURES" encosta no número. A linha
     a mais vale menos que a colisão. */
  .nivel { grid-template-columns: 1fr; }
  .nivel { padding: 0.55rem 0.6rem 0.5rem; }
  /* Quadro vira deck de swipe horizontal com snap */
  .quadro { grid-auto-columns: 84vw; scroll-snap-type: x mandatory; }
  .quadro-etapas { grid-template-columns: repeat(3, 84vw); } /* etapas seguem o deck no celular */
  .coluna { scroll-snap-align: start; }
  /* No celular a lateral não é coluna: vira um bloco acima do conteúdo, com a
     marca numa linha e os itens em tira de pílulas na outra. Altura cheia e
     sticky saem — numa tela de 812px um painel de altura de viewport empurra
     todo o conteúdo pra fora. O recolher não se aplica aqui e some. */
  .corpo { display: block; }
  .coluna-principal { padding: 0; }
  .lateral {
    position: static;
    height: auto;
    overflow: visible;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    padding: 0.6rem 0.6rem 0.55rem;
  }
  /* `contents` dissolve a linha do logo: o logo passa a ser irmão do nome e os
     dois ficam lado a lado. O botão é o outro filho, mas está escondido. */
  .marca { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0 0.2rem; }
  .lateral-topo { display: contents; }
  .paginas { flex-direction: row; gap: 0.35rem; }
  .paginas a { padding: 0.5rem 0.85rem; }
  #carimbo { display: none; } /* no topo só cabe a bolinha + estado */
  #alternar-lateral { display: none; }
  body.lateral-recolhida .rotulo-nav, body.lateral-recolhida .conta-nav { display: inline; }
  body.lateral-recolhida .paginas a { justify-content: flex-start; padding: 0.5rem 0.85rem; gap: 0.6rem; }
}
/* Por frente: um card por iniciativa, no mesmo cartão branco do Resumo (duas
   colunas, empilha no celular). Dentro, pares rótulo/texto — o rótulo usa a
   mesma retranca dos cartões do Resumo, pra o olho reconhecer o padrão. */
.frentes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
@media (max-width: 640px) { .frentes { grid-template-columns: 1fr; } }
.frente {
  background: #fff;
  border: 1px solid var(--doc-linha);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
}

/* Impressão do documento: sem tinta desperdiçada na capa */
@media print {
  
  
  
  
  /* No papel o gradiente sairia invisível (o texto é transparente com recorte)
     e a tarja só gastaria tinta: título preto, marcação fora. */
  
  /* Mesma lógica do fim: rodapé escuro também não gasta tinta no papel */
  
  
  
  /* Salmão sobre branco é ilegível no papel: alerta vira o vermelho de tela */
  
  
  /* Quebra por bloco, não por seção: "Entregas do mês" pode ter uma página
     inteira — travar a seção criava vão em branco e estouro. */
  
   .frente, .lista-linhas li { break-inside: avoid; }
   .frente { border: 1px solid #e5e5e5; }
  /* Barras do comparativo são só background — sem isto o papel sai em branco */
  
  
  
}

/* O TOPO DE CADA TELA (16/10/2026). Os links do menu são `#panorama`,
   `#pendencias`… e esses ids são os dos blocos de CONTEÚDO, logo abaixo do
   título da seção. O navegador trata o hash como âncora e rola até o bloco: com
   a tela alta, o título e o respiro de cima ficavam escondidos e o Panorama
   abria já no card "Agora".

   Cada tela da Central é uma página inteira, não um trecho de uma maior. Uma
   margem de rolagem de uma tela inteira faz a posição pedida ficar ACIMA do
   topo, e o navegador a trava em zero — a âncora passa a levar ao começo, e
   isso vale também quando ele rola depois do evento (tela que estava escondida
   e acabou de aparecer), onde um scrollTo nosso chegava tarde. */
#panorama, #pendencias, #produtos, #roadmap, #meus-itens, #relatorios { scroll-margin-top: 100vh; }

/* O bloco "Times" do Panorama (16/10/2026): os atalhos que eram dos cards da
   página Projetos, que saiu do menu. Uma linha por time. */
.times-atalhos { display: flex; flex-direction: column; gap: 0.6rem; }
.time-atalhos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; }
.time-atalhos-nome { font-size: 0.86rem; font-weight: 650; color: var(--tinta); }
.time-atalhos .atalhos { margin: 0; padding: 0; border: 0; }

/* A explicação curta da coluna Sem movimento, logo abaixo do título dela. */
.coluna-dica { margin: 0 0 0.6rem; font-size: 0.78rem; line-height: 1.4; }

/* "Do que se trata" no cartão do produto (16/10/2026): a linha de resumo do épico. */
.produto-desc { margin: 0.1rem 0 0.2rem; font-size: 0.82rem; line-height: 1.45; color: var(--tinta); }
.produto-desc.mudo { color: var(--mudo); }

/* ---------- O EDITOR DOS DOCUMENTOS (29/10/2026) ----------

   Três telas numa seção só: lista de documentos, cartões de um documento,
   formulário de um cartão. Sem diálogo — diálogo serve pra uma decisão, e isto
   é área de trabalho, com ida e volta.

   Tudo com os tokens que já existem. O editor não é um produto à parte: quem
   está nele continua dentro da Central. */
.ed-aviso { max-width: 58ch; margin: 0 0 1rem; }
.ed-recado {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--superficie-2);
  font-size: 0.88rem;
}
/* O rascunho avisa em âmbar, não em vermelho: é estado de trabalho, não erro.
   Baixar e descartar vivem AQUI DENTRO: são as duas saídas do rascunho, e lá em
   cima, soltas, o "Baixar" repetia o que este texto já diz. */
.ed-aviso {
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border-left: 3px solid var(--atencao);
  background: var(--superficie-2);
  font-size: 0.88rem;
}
.ed-aviso p { margin: 0; }
.ed-aviso-acoes { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.7rem; }
/* `.board-acoes button` dá fundo cinza a tudo o que entra no cabeçalho; sem
   esta, "Novo cartão" perdia a tinta cheia que o marca como a ação da tela. */
.board-acoes .ed-principal { background: var(--tinta); color: #fff; }
.board-acoes .ed-principal:hover { background: #3f3f46; }

.ed-cartoes, .ed-auto { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.ed-cartao {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  background: var(--superficie);
  border: var(--fio);
  border-radius: 12px;
}
/* O botão ocupa a linha inteira: alvo pequeno em lista longa é onde o clique
   erra. O que sobra à direita são as ações, que não disputam com ele. */
.ed-editar {
  flex: 1;
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--tinta);
}
.ed-editar:hover { background: var(--superficie-2); }
.ed-cartao-titulo { font-weight: 600; font-size: 0.95rem; }
.ed-cartao-meta { font-size: 0.82rem; }

.ed-ordem { display: flex; align-items: center; gap: 0.1rem; padding-right: 0.5rem; }
.ed-ordem button {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mudo);
  cursor: pointer;
  font-size: 0.9rem;
}
.ed-ordem button:hover:not(:disabled) { background: var(--superficie-2); color: var(--tinta); }
.ed-ordem button:disabled { opacity: 0.3; cursor: default; }

.ed-titulo { margin: 0 0 1rem; font-size: 1.15rem; }
/* `.board-titulos h2` zera a margem do título do board; o desta tela é um h3. */
.board-titulos .ed-titulo { margin: 0; }
.ed-sub { margin: 1.5rem 0 0.6rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mudo); }
.ed-vazio { padding: 0.9rem; border: 1px dashed var(--borda); border-radius: 12px; font-size: 0.88rem; }

.ed-acoes { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0; flex-wrap: wrap; }
/* `.botao` é a pílula da Central (a mesma dos diálogos). A ação que FECHA o
   passo vai em tinta cheia, como "Montar a central" e "Salvar" fazem lá — e a
   que desfaz fica discreta, sem moldura, pra não disputar com ela.

   Antes estes botões usavam `botao-texto`, que é classe das PÁGINAS DE
   RELATÓRIO e mora no entregas.css: na Central ela não existe, e os três
   saíam com o visual cru do navegador. */
.ed-principal { background: var(--tinta); color: #fff; }
.ed-principal:hover:not(:disabled) { background: #3f3f46; }
.ed-acoes .botao:disabled { opacity: 0.45; cursor: default; }
.ed-discreto {
  border: 0;
  background: transparent;
  padding: 0.5rem 0.2rem;
  color: var(--mudo);
  cursor: pointer;
  font: inherit;
  font-size: 0.87rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ed-discreto:hover { color: var(--tinta); }
/* O pedido de confirmação ocupa o lugar das setas, na própria linha: diálogo
   pra isto tiraria a pessoa do contexto e esconderia justamente o cartão que
   ela está decidindo se apaga. */
.ed-confirma { gap: 0.4rem; padding-right: 0.8rem; font-size: 0.82rem; white-space: nowrap; }
/* Os dois botões da confirmação são TEXTO, e herdavam o quadrado de 1.9rem da
   regra das setas — "remover" e "manter" saíam um por cima do outro. */
.ed-confirma .ed-discreto { width: auto; height: auto; padding: 0.2rem 0; }
.ed-confirma .ed-remover-sim { color: var(--erro); }

/* O erro do formulário fica COLADO no campo que o causou, e não no rodapé:
   mensagem longe do campo faz a pessoa procurar o que corrigir. */
.ed-erro {
  margin: -0.6rem 0 1rem;
  font-size: 0.82rem;
  color: var(--erro);
}

/* O contexto do board: cinza e sem ação, porque não se edita. Mostrar sem
   deixar mexer é o ponto — quem escreve precisa ver o que já está contado
   sozinho, senão escreve de novo o que o relatório já diz. */
.ed-auto li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  background: var(--superficie-2);
  font-size: 0.88rem;
}
.ed-auto-nome { min-width: 0; }

.ed-campo { display: grid; gap: 0.25rem; margin-bottom: 1rem; max-width: 46rem; }
.ed-rot { font-size: 0.82rem; font-weight: 600; }
.ed-dica { font-size: 0.78rem; }
.ed-campo input[type="text"], .ed-campo select, .ed-campo textarea {
  padding: 0.5rem 0.65rem;
  border: var(--fio);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--tinta);
  font: inherit;
  font-size: 0.92rem;
}
.ed-campo textarea { resize: vertical; line-height: 1.5; }
.ed-campo-check { grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; }
.ed-campo-check input { justify-self: start; }

/* Dois campos curtos lado a lado quando a tela permite: selo e cor são a mesma
   decisão, e em duas faixas pareciam duas. */
.ed-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 560px) { .ed-par { grid-template-columns: 1fr; } }
/* O rótulo da linha (a palavra em negrito que abre "Retorno:", "Previsão:")
   fica abaixo do texto dela, discreto: é escolha de escrita, não campo que se
   preenche todo dia. */
.ed-rotulo-linha {
  margin: -0.6rem 0 1rem;
  padding: 0.3rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: var(--superficie-2);
  font: inherit;
  font-size: 0.78rem;
  color: var(--mudo);
  width: 12rem;
  max-width: 100%;
}

.ed-avancado { margin-bottom: 1rem; }
.ed-avancado summary { cursor: pointer; font-size: 0.85rem; color: var(--mudo); margin-bottom: 0.8rem; }
.ed-avancado summary:hover { color: var(--tinta); }

/* ---------- A página de Relatórios ---------- */
/* Um bloco por relatório, uma linha por edição. "abrir" e "escrever" ficam na
   MESMA LINHA porque são o mesmo documento visto dos dois lados — separados em
   itens diferentes do menu, dava pra escrever novembro e abrir outubro sem
   perceber. */
/* CADA RELATÓRIO NUM BLOCO CINZA, com as linhas brancas dentro — o mesmo
   arranjo dos times em Produtos (.bloco + .card.produto). Em branco sobre
   branco, "Entregas" e "Status de demandas" eram duas listas separadas só por
   espaço; o bloco faz de cada um um objeto.

   Sem limite de largura, e isso é uma volta atrás consciente: o vazio de 562px
   no meio da linha era culpa do fluxo antigo, em que a contagem vinha logo
   depois do nome e as ações eram empurradas pro extremo oposto. Com a grade de
   três colunas a coluna do meio tem posição fixa, o conteúdo se distribui, e o
   limite só servia pra deixar metade do painel branca. */
/* Dentro de um documento a seção perde o próprio título: quem manda na tela é
   o nome da edição, com a seta de voltar na mesma linha. Ver o comentário em
   editor.js, no `pintar`. */
#secao-relatorios.ed-no-documento > h2 { display: none; }

/* CABEÇALHO DE UMA LINHA SÓ: seta, nome da edição e as ações, os três no mesmo
   eixo. Em grade, e não em flex, porque o `align-items: center` do .board-topo
   centrava a seta no bloco inteiro — e, com uma linha de apoio embaixo do
   título, ela ficava entre as duas, pertencendo a nenhuma. */
#relatorios .board-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
#relatorios .board-titulos { display: contents; }
#relatorios .board-topo .voltar { grid-column: 1; grid-row: 1; }
#relatorios .board-titulos .ed-titulo { grid-column: 2; grid-row: 1; }
#relatorios .board-acoes { grid-column: 3; grid-row: 1; }

.rp-bloco {
  background: var(--superficie-2);
  border-radius: 18px;
  padding: 1rem 0.95rem;
  margin-bottom: 0.85rem; /* mesma distância entre blocos que o .blocos usa */
}
/* Nome e descrição à esquerda, ação no canto superior direito — alinhada com
   o título, e não jogada embaixo da descrição. `flex-start` e não `center`:
   com a descrição em duas linhas, centrado o botão descia pro meio do texto. */
.rp-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
/* O NOME DO RELATÓRIO É TÍTULO. Era `.ed-sub`, que é rótulo de seção: o texto
   que a pessoa procura ao abrir a página saía como o MENOR da tela. Mesmo
   tamanho do título da edição na tela seguinte — os dois são documento. */
.rp-titulo { margin: 0 0 0.2rem; font-size: 1.15rem; }
/* Uma linha só: a medida de 52ch era de parágrafo e quebrava a frase curta em
   duas sem precisar. */
.rp-sobre p { margin: 0; font-size: 0.85rem; max-width: 80ch; }
.rp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
/* TRÊS COLUNAS, e não um fluxo. Em flex, a contagem começava logo depois do
   nome — e o nome muda de largura a cada linha, então ela aterrissava num ponto
   diferente em cada uma. Com a coluna fixa, as três alinham de cima a baixo. */
.rp-linha {
  display: grid;
  /* A terceira coluna tem LARGURA FIXA, e não `auto`. Com `auto` ela media o
     conteúdo de cada linha, e a congelada — que só tem "abrir" — empurrava as
     outras duas colunas 88px pra direita. Cada `<li>` é uma grade própria;
     alinhar entre linhas só acontece se as três colunas forem iguais em todas. */
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 20rem) 10rem;
  align-items: center;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.1rem;
  padding: 0.75rem 0.9rem;
  /* Sombra no lugar do fio: sobre o cinza do bloco, o contorno endurecia a
     linha sem precisar separá-la de nada — é a mesma troca do .card.produto. */
  background: var(--superficie);
  border-radius: 12px;
  box-shadow: var(--sombra-cartao);
}
/* A CONTAGEM FICA EMBAixo DO NOME, não ao lado das pastilhas: ela descreve o
   documento, e as pastilhas dizem em que pé ele está. Na mesma faixa, as duas
   coisas se liam como uma lista de quatro itens soltos.

   A linha tem altura mínima pra não encolher quando não há contagem — sem ela,
   o mês que ainda não começou saía mais baixo que os vizinhos. */
.rp-linha > * { grid-row: 1; }
.rp-nome { grid-column: 1; font-weight: 600; font-size: 0.95rem; align-self: end; }
.rp-meta { grid-column: 1; grid-row: 2; font-size: 0.82rem; align-self: start; }
.rp-estado { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; min-width: 0; }
/* A fase herda a pastilha do selo de rascunho, em cinza: as duas se parecem
   porque as duas são estado, e a cor é que diz qual pede ação. */
.rp-fase {
  padding: 0.16rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--mudo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* NENHUMA FASE SAI DO CINZA. "Próximo mês" e "mês atual" são fato de
   calendário, não pedido de ação — destacar uma delas dava à posição no
   calendário um peso que ela não tem. O único colorido da linha passa a ser
   o âmbar do "não publicado", que é o que pede alguma coisa de alguém. */
/* O rascunho é âmbar, mas CLARO. Em âmbar cheio ele virava a coisa mais forte
   da página — mais que os botões pretos — e o texto inteiro ("rascunho não
   baixado") estourava a coluna e caía numa segunda linha, desalinhando a
   altura daquela linha. O que ele não cabia dizer está no `title` e, por
   extenso, no aviso de dentro do documento. */
.rp-fase-rascunho { background: var(--atencao-fundo); color: var(--atencao); }
/* As ações ficam juntas: lidas como um par, e não como dois links soltos. E
   alinham pela DIREITA da coluna, porque "abrir" é o último dos dois: assim ele
   cai no mesmo ponto em todas as linhas, inclusive nas congeladas, que não têm
   "escrever" ao lado. Pela esquerda, o "abrir" da congelada pousaria onde está
   o "escrever" das outras. */
.rp-acoes { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 0.3rem; justify-content: flex-end; }
.rp-acao {
  border: 0;
  background: var(--superficie-2);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 550;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.rp-acao:hover { background: #e9e9eb; }
/* Escrever é o que só acontece aqui dentro; abrir leva pra fora. O peso fica
   com quem fica. */
.rp-escrever { background: var(--tinta); color: #fff; }
.rp-escrever:hover { background: #3f3f46; }

/* O arquivo das edições antigas. A lista cresce um mês por mês; dobrada, a
   página tem o mesmo tamanho daqui a três anos. */
.rp-arquivo { margin-top: 0.5rem; }
.rp-arquivo summary { padding: 0.4rem 0.2rem; }
.rp-arquivo .rp-lista { margin-top: 0.5rem; }

@media (max-width: 640px) {
  /* Em 375px não cabem três colunas: nome (130px) + estado (95px) + as duas
     ações (140px) pedem 365px num espaço de 314. Medido: todo arranjo de uma
     linha só quebra o nome do mês em duas. Então empilha, e as três partes
     ficam na mesma altura em todas as linhas. */
  /* Volta a ser fluxo, e não três faixas empilhadas: em faixa, nome, estado e
     ações ocupavam três alturas SEMPRE, e a lista de doze cresceu 48% (1164px
     → 1724px). Em fluxo, nome e estado dividem a primeira linha quando cabem,
     e só as ações descem — foi o arranjo mais baixo entre os medidos. */
  /* No telefone as ações descem pra própria faixa: na mesma linha do título
     elas comiam a largura dele e "Novembro de 2026" quebrava em três. */
  #relatorios .board-topo { grid-template-columns: auto minmax(0, 1fr); }
  #relatorios .board-acoes { grid-column: 1 / -1; grid-row: 2; margin-top: 0.7rem; }

  /* Mesma leitura do desktop, empilhada: nome, depois contagem e pastilhas na
     mesma altura, depois as ações. Três faixas em TODAS as linhas — deixando
     o nome dividir a primeira com o que coubesse, cada linha ficava com uma
     altura diferente (85, 113, 113, 84 na medição). */
  .rp-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
  .rp-nome { width: 100%; }
  /* O estado deixa de ser um item só: a contagem e a pastilha viram itens da
     própria linha. Como bloco, ele media contagem + pastilha e nunca cabia ao
     lado do nome, forçando uma terceira altura em todas as linhas. */
  .rp-estado { display: contents; }
  /* Embaixo do nome, o par volta a começar na esquerda: encostado na direita
     ele ficaria longe do nome a que pertence. */
  .rp-acoes { width: 100%; justify-content: flex-start; }
}

/* ---------- O diálogo do cartão ---------- */
/* O formulário abre POR CIMA do documento, e não no lugar dele: a lista de
   cartões atrás é o que diz o que já foi escrito e em que ordem. Herda o
   `dialog` da Central (sombra, raio, fundo escurecido) e troca só o que o
   formulário alto precisa — corpo que rola, rodapé parado. */
#ed-dialogo {
  padding: 0;
  max-width: 640px;
  background: var(--superficie);
  overflow: hidden; /* quem rola é o corpo; o rodapé fica no lugar */
}
#ed-dialogo[open] { display: flex; flex-direction: column; }
.ed-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem 0.9rem;
}
.ed-cabeca .ed-titulo { margin: 0; }
.ed-cabeca .ed-titulo:focus-visible { outline: 2px solid var(--borda); outline-offset: 4px; }
.ed-fechar {
  border: 0;
  background: transparent;
  color: var(--mudo);
  font-size: 1rem;
  line-height: 1;
  padding: 0.3rem;
  cursor: pointer;
  border-radius: 8px;
}
.ed-fechar:hover { background: var(--superficie-2); color: var(--tinta); }
.ed-corpo { overflow-y: auto; min-height: 0; padding: 0 1.5rem 0.4rem; }
.ed-corpo .ed-campo { max-width: none; }
.ed-rodape {
  padding: 0.9rem 1.5rem 1.1rem;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
}
.ed-rodape .ed-acoes { margin: 0; }
/* `.ed-acoes` é `display: flex`, e classe ganha do `[hidden]` do navegador:
   sem esta regra os dois rodapés apareciam juntos, a pergunta do descarte
   embaixo dos botões normais. */
.ed-rodape .ed-acoes[hidden] { display: none; }
/* No rodapé a pergunta tem espaço pra quebrar linha — "continuar editando" não
   cabe numa linha só de celular, e nowrap a empurrava pra fora da tela. */
.ed-rodape .ed-confirma { white-space: normal; padding-right: 0; }
.ed-rodape .ed-descarte-sim { color: var(--erro); }

/* No celular ele é a tela inteira. Caixa flutuante com rolagem interna num
   formulário deste tamanho é pior que a tela cheia que havia antes. */
@media (max-width: 640px) {
  #ed-dialogo {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .ed-cabeca { padding: 1rem 1rem 0.8rem; }
  .ed-corpo { padding: 0 1rem 0.4rem; }
  .ed-rodape { padding: 0.8rem 1rem calc(0.9rem + env(safe-area-inset-bottom)); }
}