/* =====================================================================
   Gestão do Desbagunça — dashboard do dono
   Requer tokens.css (cópia de ../css/tokens.css). Só tokens: sem cor,
   espaço ou raio soltos. Pensado primeiro para 360px.
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; width: 100%; max-width: 100%; overflow-x: clip; }
body {
  min-height: 100dvh;
  font-family: var(--fonte);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1 { margin: 0; font-family: var(--fonte-titulo); font-size: var(--fs-xl); line-height: 1.18; letter-spacing: -.015em; }
p { margin: 0; }
a { color: var(--primaria-texto); }
.dica { color: var(--texto-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* ---------- Botões e campos ---------- */
.btn {
  min-height: var(--toque-min); padding: var(--e-2) var(--e-4);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--texto);
  background: var(--bg-elevado); border: 1px solid var(--borda-forte); border-radius: var(--raio);
  cursor: pointer; transition: background-color var(--mov-rapido) ease;
}
.btn:hover { background: var(--bg-hover); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-primario { color: var(--texto-inverso); background: var(--primaria); border-color: var(--primaria); }
.btn-primario:hover { background: var(--primaria-hover); }
:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

/* ---------- Login, "Sem acesso" e erro ---------- */
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: var(--e-4); }
.cartao-entrada {
  width: 100%; max-width: 26rem; display: grid; gap: var(--e-4); padding: var(--e-6);
  background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-sm);
}
.cartao-entrada h1 { font-size: var(--fs-lg); }
.cartao-entrada p { overflow-wrap: anywhere; }
.form-entrada { display: grid; gap: var(--e-2); }
.form-entrada label { font-size: var(--fs-sm); font-weight: 600; }
.form-entrada input {
  width: 100%; min-height: var(--toque-min); padding: var(--e-2) var(--e-3);
  font: inherit; font-size: var(--fs-campo-toque); color: var(--texto);
  background: var(--bg-sutil); border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.form-entrada .btn { margin-top: var(--e-2); }
.saidas-entrada { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); }
.btn-link {
  min-height: var(--toque-min); padding: var(--e-2); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--primaria-texto); background: none; border: 0; border-radius: var(--raio); cursor: pointer; text-decoration: underline;
}
.btn-link:disabled { opacity: .6; cursor: default; }
.aviso { min-height: 1.5em; font-size: var(--fs-sm); color: var(--texto-2); }
.aviso--erro { color: var(--perigo-texto); }

/* ---------- Layout do dono ---------- */
.topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4);
  padding: var(--e-3) var(--e-4); background: var(--bg-elevado); border-bottom: 1px solid var(--borda);
}
.topo-titulo { font-family: var(--fonte-titulo); font-size: var(--fs-md); margin-inline-end: auto; }
/* Abas: no celular fixas embaixo (4 colunas), no desktop em linha sob o título */
.abas {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-nav); display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom); background: var(--bg-elevado); border-top: 1px solid var(--borda);
}
.abas a {
  display: flex; align-items: center; justify-content: center; min-height: var(--toque-min); padding: 0 var(--e-1);
  font-size: var(--fs-sm); font-weight: 600; text-align: center; text-decoration: none; color: var(--texto-2);
}
.abas a[aria-current="page"] { color: var(--primaria-texto); background: var(--primaria-suave); }
body { padding-bottom: calc(var(--toque-min) + env(safe-area-inset-bottom)); }
@media (min-width: 48rem) {
  body { padding-bottom: 0; }
  .abas { position: static; flex-basis: 100%; display: flex; gap: var(--e-2); padding: 0; background: none; border-top: 0; }
  .abas a { padding: 0 var(--e-3); border-radius: var(--raio); }
}

/* Topo: "Aguardando você" (sempre visível) e link dos gestores */
.aguardando, .topo-link {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--toque-min);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; color: var(--texto-2);
}
.aguardando-numero {
  min-width: var(--e-6); padding: 0 var(--e-2); text-align: center; font-family: var(--fonte-mono); font-size: var(--fs-xs); font-weight: 800;
  color: var(--texto-inverso); background: var(--perigo-hover); border-radius: var(--raio-pilula);
}
.aguardando-numero:empty { display: none; }
.topo-email { min-width: 0; font-size: var(--fs-xs); color: var(--texto-3); overflow-wrap: anywhere; }
/* Celular: o e-mail ocupa a última linha do topo, para os links e os botões caberem juntos */
@media (max-width: 47.99rem) {
  .topo { padding-block: var(--e-2); row-gap: var(--e-1); }
  .topo-email { order: 1; flex-basis: 100%; line-height: 1.2; }
}
#conteudo { display: grid; gap: var(--e-3); max-width: 72rem; margin: 0 auto; padding: var(--e-4); }

/* ---------- Visão geral ---------- */
.conexao { font-size: var(--fs-sm); color: var(--destaque-texto); background: var(--destaque-suave); border-radius: var(--raio); }
.conexao:empty { display: none; }
.conexao:not(:empty) { padding: var(--e-2) var(--e-3); }
.conexao .btn { margin-inline-start: var(--e-2); }
.secao { display: grid; gap: var(--e-1-5); }
.secao-titulo { margin: 0; font-family: var(--fonte-titulo); font-size: var(--fs-base); line-height: 1.2; }
.secao > div { display: grid; gap: var(--e-2); }
.lista { display: grid; margin: 0; padding: 0; list-style: none; background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: var(--raio); }
.item { display: grid; gap: var(--e-1); padding: var(--e-2) var(--e-3); line-height: 1.3; }
.item + .item { border-top: 1px solid var(--borda); }
.item-linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); min-width: 0; }
.item-titulo { min-width: 0; overflow-wrap: anywhere; }
.item-valor { flex: none; font-family: var(--fonte-mono); font-size: var(--fs-sm); font-weight: 700; color: var(--texto-2); }
.item-link { display: grid; gap: var(--e-1); color: inherit; text-decoration: none; }
.item-link:hover .item-titulo { color: var(--primaria-texto); }
.selo {
  padding: 0 var(--e-2); font-size: var(--fs-xs); font-weight: 700;
  color: var(--destaque-texto); background: var(--destaque-suave); border-radius: var(--raio-pilula);
}

/* Barras de progresso (limite, contexto, plano) */
.barra { position: relative; height: var(--e-2); background: var(--bg-hover); border-radius: var(--raio-pilula); }
.barra-preenchimento { display: block; height: 100%; background: var(--primaria); border-radius: var(--raio-pilula); }
.barra[data-nivel="alerta"] .barra-preenchimento { background: var(--destaque); }
.barra[data-nivel="perigo"] .barra-preenchimento { background: var(--perigo); }
.marca { position: absolute; top: calc(var(--e-1) * -1); bottom: calc(var(--e-1) * -1); width: 2px; background: var(--texto-2); }
.marca-rotulos { position: relative; height: 1.2em; font-size: var(--fs-2xs); color: var(--texto-3); }
.marca-rotulo { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* Limites: dois cartões lado a lado, mesmo em 360px */
.grade-limites { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); max-width: 36rem; }
.cartao {
  display: grid; align-content: start; gap: var(--e-1); min-width: 0; padding: var(--e-2-5) var(--e-3);
  background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra-xs);
}
.cartao[data-alerta] { border-color: var(--destaque); background: var(--destaque-suave); }
.limite-alerta { margin: 0; font-size: var(--fs-sm); line-height: 1.3; color: var(--destaque-texto); font-weight: 600; }
.cartao-titulo { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--texto-2); }
.cartao .dica { line-height: 1.3; }
.limite-pct { font-family: var(--fonte-titulo); font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.grafico { display: block; width: 100%; height: auto; }
.grafico-base { stroke: var(--borda-forte); stroke-width: 1; }
.grafico-linha { fill: none; stroke: var(--primaria); stroke-width: 2; }
.grafico-ponto { fill: var(--primaria); stroke: var(--bg-elevado); stroke-width: 1.5; }

/* Eventos */
.evento { gap: 0; padding-block: var(--e-1-5); }
.evento-meta { min-width: 0; font-size: var(--fs-xs); color: var(--texto-2); overflow-wrap: anywhere; }
.evento-hora { flex: none; font-size: var(--fs-xs); color: var(--texto-3); }
.evento-resumo { font-size: var(--fs-sm); overflow-wrap: anywhere; white-space: pre-line; } /* preserva quebras de linha do resumo */

#conteudo > h1 { font-size: var(--fs-lg); }

/* ---------- Plano e Tarefa ---------- */
.tela { display: grid; gap: var(--e-3); min-width: 0; }
.tela > h1 { overflow-wrap: anywhere; }
.plano-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.voltar { justify-self: start; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.codigo { font-family: var(--fonte-mono); }

/* Fase tocável (filtra a lista) */
.item-botao {
  display: grid; gap: var(--e-1); width: 100%; min-height: var(--toque-min); padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: start; background: none; border: 0; border-radius: var(--raio); cursor: pointer;
}
.item:has(> .item-botao[aria-pressed="true"]) { background: var(--primaria-suave); }
.item-botao[aria-pressed="true"] .item-titulo { color: var(--primaria-texto); }

/* Filtro de situação */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.chip {
  min-height: var(--toque-min); padding: 0 var(--e-3);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--texto);
  background: var(--bg-elevado); border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula); cursor: pointer;
}
.chip[aria-pressed="true"] { color: var(--texto-inverso); background: var(--primaria); border-color: var(--primaria); }

/* Mini-barra de etapas na lista de tarefas */
.mini-etapas { display: flex; gap: var(--e-1); }
.mini-etapa { flex: none; width: var(--e-5); height: var(--e-1); background: var(--bg-hover); border-radius: var(--raio-pilula); }
.mini-etapa[data-alcancada="sim"] { background: var(--primaria); }
.item[data-especial="bloqueada"] .mini-etapa[data-alcancada="sim"] { background: var(--perigo); }
.item[data-especial="aguardando_limite"] .mini-etapa[data-alcancada="sim"] { background: var(--destaque); }

/* Trilha de etapas da tarefa */
.trilha { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.trilha-etapa {
  display: grid; align-content: start; gap: var(--e-1); min-width: 0; padding-top: var(--e-2);
  font-size: var(--fs-sm); color: var(--texto-2); border-top: var(--e-1) solid var(--borda-forte); overflow-wrap: anywhere;
}
.trilha-etapa[data-etapa-estado="feita"] { border-top-color: var(--primaria); }
.trilha-etapa[data-etapa-estado="atual"] { font-weight: 700; color: var(--texto); border-top-color: var(--primaria); }
.trilha-etapa[data-especial="bloqueada"] { border-top-color: var(--perigo); }
.trilha-etapa[data-especial="aguardando_limite"] { border-top-color: var(--destaque); }
.trilha-etapa .selo { justify-self: start; }
.parte-atual { margin: 0; color: var(--primaria-texto); font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }

/* Números e links de commit */
.numeros { gap: var(--e-1-5); font-size: var(--fs-sm); max-width: 36rem; }
.links-commit { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin: 0; padding: 0; list-style: none; font-family: var(--fonte-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }

/* Linha do tempo: decisões em destaque */
.linha-do-tempo .item { border-inline-start: var(--e-1) solid var(--borda-forte); }
.linha-do-tempo .item[data-tipo="decisao"] { background: var(--destaque-suave); border-inline-start-color: var(--destaque); }
.linha-do-tempo .item[data-tipo="decisao"] .evento-meta { color: var(--destaque-texto); }

/* Notas do dono: destaque próprio (azul), diferente da decisão (laranja) */
.linha-do-tempo .item[data-tipo="nota"] { background: var(--info-suave); border-inline-start-color: var(--info); }
.linha-do-tempo .item[data-tipo="nota"] .evento-meta { color: var(--info-texto); }
.evento[data-tipo="nota"] .evento-resumo { white-space: pre-wrap; } /* preserva quebras e espaços do que foi digitado */

/* Ações do dono: pausar/retomar o plano e nota da tarefa */
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.acao-plano { display: grid; gap: var(--e-2); justify-items: start; }
.confirmacao { display: grid; gap: var(--e-2); max-width: 36rem; padding: var(--e-3); background: var(--destaque-suave); border-radius: var(--raio); }
.confirmacao p { overflow-wrap: anywhere; }
.form-nota { display: grid; gap: var(--e-2); max-width: 36rem; }
.form-nota label { font-size: var(--fs-sm); font-weight: 600; }
.form-nota textarea {
  width: 100%; min-height: calc(var(--toque-min) * 2); padding: var(--e-2) var(--e-3); resize: vertical;
  font: inherit; font-size: var(--fs-campo-toque); color: var(--texto);
  background: var(--bg-sutil); border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.nota-aviso { min-height: 1.5em; font-size: var(--fs-sm); color: var(--texto-2); }

/* ---------- Notas ---------- */
.nota-texto { white-space: pre-wrap; overflow-wrap: anywhere; } /* preserva as quebras de linha digitadas */
.form-nota input[type="search"] {
  width: 100%; min-height: var(--toque-min); padding: var(--e-2) var(--e-3);
  font: inherit; font-size: var(--fs-campo-toque); color: var(--texto);
  background: var(--bg-sutil); border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.nota .evento-meta { color: var(--texto-2); }
.lista[hidden] { display: none; }

/* ---------- Ideias ---------- */
.campo { display: grid; gap: var(--e-1); }
.campo > label, .grupo-branch legend { font-size: var(--fs-sm); font-weight: 600; }
.campo input:not([type="radio"]), .campo select {
  width: 100%; min-height: var(--toque-min); padding: var(--e-2) var(--e-3);
  font: inherit; font-size: var(--fs-campo-toque); color: var(--texto);
  background: var(--bg-sutil); border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.campo textarea {
  width: 100%; min-height: calc(var(--toque-min) * 2); padding: var(--e-2) var(--e-3); resize: vertical;
  font: inherit; font-size: var(--fs-campo-toque); color: var(--texto);
  background: var(--bg-sutil); border: 1px solid var(--borda-forte); border-radius: var(--raio);
}
.form-ideia, .form-filtros { max-width: 36rem; }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e-2); }
.ideia-titulo { font-weight: 700; text-decoration: none; color: inherit; }
.ideia-titulo:hover { color: var(--primaria-texto); text-decoration: underline; }
.selo--neutro { color: var(--texto-2); background: var(--bg-hover); }
.selo--etiqueta { color: var(--info-texto); background: var(--info-suave); }
.selo--ia { color: var(--primaria-texto); background: var(--primaria-suave); }
.fontes { display: grid; gap: var(--e-1); min-width: 0; }
.fontes-lista { display: grid; gap: var(--e-1); margin: 0; padding-left: var(--e-4); }
.fontes-lista a { overflow-wrap: anywhere; }
.ideia-detalhes { display: grid; gap: var(--e-2); min-width: 0; }
.comentarios-secao { display: grid; gap: var(--e-2); }
.comentarios { background: var(--bg-sutil); }
.comentarios[hidden] { display: none; }
.comentario .evento-meta { color: var(--texto-2); }

/* Diálogo "Planejar esta ideia" */
.dialogo {
  width: min(32rem, calc(100% - var(--e-6))); max-height: calc(100dvh - var(--e-6)); padding: var(--e-4); overflow: auto;
  color: var(--texto); background: var(--bg-elevado); border: 1px solid var(--borda-forte); border-radius: var(--raio-lg);
}
.dialogo::backdrop { background: var(--overlay); }
.dialogo[open] { display: grid; gap: var(--e-3); }
.grupo-branch { display: grid; gap: var(--e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.grupo-branch legend { padding: 0; }
.opcao { display: flex; align-items: center; gap: var(--e-2); min-height: var(--toque-min); }
.opcao input { width: var(--e-5); height: var(--e-5); margin: 0; accent-color: var(--primaria); }
.opcao label { font-size: var(--fs-base); font-weight: 400; }
.campo-grupo { display: grid; gap: var(--e-2); }
.campo-grupo[hidden] { display: none; }
.form-ideia[hidden] { display: none; }

/* ---------- Página da ideia ---------- */
.ideia-cabecalho { display: grid; gap: var(--e-2); min-width: 0; }
.ideia-cabecalho > p { margin: 0; overflow-wrap: anywhere; }
.rotulo-situacao { font-size: var(--fs-sm); font-weight: 600; }
.sessao-situacao[data-situacao="aguardando"] { color: var(--destaque-tinta); background: var(--destaque); }
.sessao-situacao[data-situacao="trabalhando"] { color: var(--primaria-texto); background: var(--primaria-suave-2); }
.sessao-situacao[data-situacao="limite"] { color: var(--info-texto); background: var(--info-suave-2); }
.sessao-situacao[data-situacao="encerrada"], .sessao-situacao[data-situacao="sem-sessao"] { color: var(--texto-2); background: var(--bg-hover); }
.plano-progresso { display: grid; gap: var(--e-1); max-width: 36rem; }

/* Conversa com a sessão: rola dentro da caixa; as mensagens da sessão têm destaque por tipo */
.chat-log { max-height: min(60dvh, 34rem); overflow-y: auto; background: var(--bg-elevado); border: 1px solid var(--borda); border-radius: var(--raio); }
.chat-lista { border: 0; border-radius: 0; background: none; }
.msg { gap: var(--e-1-5); border-inline-start: 3px solid transparent; }
.msg > p { margin: 0; }
.msg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-width: 0; }
.msg[data-autor="sessao"] { background: var(--primaria-suave); border-inline-start-color: var(--primaria); }
.msg[data-autor="gestor"] { background: var(--bg-elevado); }
.msg[data-tipo="pergunta"], .msg[data-tipo="aprovacao"] { background: var(--destaque-suave); border-inline-start-color: var(--destaque); }
.msg[data-tipo="merge_main"] { background: var(--info-suave); border-inline-start-color: var(--info); }
.msg[data-tipo="sistema"] { background: var(--bg-hover); border-inline-start-color: var(--borda-forte); }
.msg .evento-meta { color: var(--texto-2); }
.msg-decisao-bloco { display: grid; gap: var(--e-2); justify-items: start; min-width: 0; }
.msg-decisao { margin: 0; font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.msg-decisao-bloco .form-nota { width: 100%; }
.merge-destaque { display: grid; gap: var(--e-1); padding: var(--e-2) var(--e-3); background: var(--bg-elevado); border: 2px solid var(--info); border-radius: var(--raio); min-width: 0; }
.merge-destaque p { margin: 0; }
.merge-commit { font-family: var(--fonte-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* ---------- Gestores ---------- */
.gestores-tela { display: grid; gap: var(--e-4); }
.gestores-tela[hidden] { display: none; }
.gestores-secao { display: grid; gap: var(--e-2); max-width: 36rem; }
.codigo { font-family: var(--fonte-mono); font-weight: 700; letter-spacing: .08em; overflow-wrap: anywhere; }

/* ---------- Como funciona (guia do colaborador) ---------- */
.guia { display: grid; gap: var(--e-3); max-width: 44rem; line-height: 1.55; overflow-wrap: anywhere; }
.guia h1, .guia h2, .guia h3, .guia p, .guia ul, .guia ol { margin: 0; }
.guia h2 { padding-top: var(--e-3); font-family: var(--fonte-titulo); font-size: var(--fs-lg); line-height: 1.2; border-top: 1px solid var(--borda); }
.guia h3 { font-family: var(--fonte-titulo); font-size: var(--fs-md); line-height: 1.25; }
.guia ul, .guia ol { display: grid; gap: var(--e-1-5); padding-inline-start: var(--e-5); }
.guia ul ul { margin-top: var(--e-1-5); }
.guia a { color: var(--primaria-texto); }
.guia code { padding: 0 var(--e-1); font-family: var(--fonte-mono); font-size: .9em; background: var(--bg-sutil); border-radius: var(--raio-xs); }