/* comunicacoes.css — as Comunicações do autor (2026-10-14): assinatura na home,
   aba e detalhe no mural, diário de obra no /roadmap. Desenho aprovado no
   protótipo _proto/comunicacoes/. Serifa no conteúdo, mono só na moldura. */

/* ---------- home: a linha de assinatura no informativo ---------- */
.home-banner-assina { font-size: var(--t-xs); color: var(--ink-dim); margin: 2px 0 0; font-style: italic; line-height: 1.4; }
/* o style.css dá display:flex ao quadro, o que venceria o atributo hidden */
.home-banner-box[hidden], #home-screen .home-banner-box[hidden] { display: none !important; }
.home-banner-controles[hidden] { display: none; }

/* ---------- estado: forma além da cor ---------- */
.com-estado { display: inline-block; line-height: 1.5; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 1px 8px; border: 1px solid currentColor; white-space: nowrap; }
.com-estado-em-obra, .com-estado-ajuste { color: var(--accent); }
.com-estado-no-ar { color: var(--ink-strong); }
.com-estado-parado { color: var(--ink-dim); border-style: dashed; }

/* ---------- mural: lista ---------- */
.com-aba { display: grid; gap: 12px; }
.com-cabeca { border-bottom: 2px solid var(--accent); margin-bottom: 4px; }
.com-cabeca h2 { display: inline-block; margin: 0; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; background: var(--surface-2); color: var(--accent); padding: 8px 14px 6px; }
/* flex: o botão de 44px fica do lado do texto sem esticar a linha dele */
.com-regra { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; margin: 0 0 4px; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-dim); max-width: 72ch; }
.com-regra-link { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; }
.com-regra-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.com-cartao { background: var(--surface); border: 1px solid var(--line-strong); padding: 16px 18px; }
.com-cartao.com-vencida { opacity: .78; }
.com-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--t-xs); color: var(--ink-dim); letter-spacing: .05em; }
.com-tipo { color: var(--accent); font-weight: 700; }
.com-titulo { margin: 6px 0 4px; font-size: var(--t-lg); line-height: 1.3; color: var(--ink-strong); }
.com-titulo a { color: inherit; text-decoration: none; }
.com-titulo a:hover, .com-titulo a:focus-visible { text-decoration: underline; }
.com-resumo { margin: 0 0 8px; line-height: 1.6; max-width: 65ch; color: var(--ink); }
.com-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: var(--t-xs); }
.com-pe a { color: var(--accent); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.com-n { color: var(--ink-dim); }
.com-vazio { border: 1px dashed var(--line-strong); padding: 16px 18px; color: var(--ink-dim); line-height: 1.6; }

/* ---------- assinatura ---------- */
.com-assina { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.com-av { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface-2); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-strong); flex: none; object-fit: cover; }
.com-quem { line-height: 1.3; min-width: 0; }
.com-quem b { display: block; color: var(--ink-strong); font-weight: 600; }
.com-quem small { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-dim); }

/* ---------- mural: detalhe ---------- */
.com-voltar { font-size: var(--t-xs); color: var(--ink-dim); text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; min-height: 44px; }
.com-det { background: var(--surface); border: 1px solid var(--line-strong); padding: 24px; }
.com-det-titulo { margin: 10px 0 12px; font-size: var(--t-xl); color: var(--ink-strong); line-height: 1.25; }
.com-texto p { line-height: 1.7; max-width: 65ch; margin: 0 0 12px; }
.com-parado { font-size: var(--t-xs); color: var(--ink-dim); margin: 0 0 8px; }
.com-sub { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 700; }
.com-andamento { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-strong); }
.com-andamento li { position: relative; padding: 0 0 14px 18px; max-width: 65ch; }
.com-andamento li::before { content: ''; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 50%; }
.com-andamento li.com-ultima::before { background: var(--accent); border-color: var(--accent); }
.com-andamento time { display: block; font-size: var(--t-xs); color: var(--ink-dim); letter-spacing: .04em; }
.com-andamento p { margin: 0 0 6px; line-height: 1.6; }
.com-fb { display: grid; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); padding: 16px; }
.com-fb p { margin: 0; line-height: 1.6; }
.com-fb small { font-size: var(--t-xs); color: var(--ink-dim); line-height: 1.5; }
.com-bts { display: flex; flex-wrap: wrap; gap: 10px; }
.com-btn { font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: .04em; text-transform: uppercase; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 2px; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; }
.com-btn-primario { background: var(--accent); color: var(--surface); border-color: var(--accent); }
/* «btn» no nome da classe: a regra global de link do style.css
   (a:not([class*="btn"])…) pula o botão, que é um <a>. Sem isso ela vencia e o
   primário saía com letra da cor do fundo. */
[data-theme="dark"] .com-btn-primario { color: #1C1916; }
.com-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.com-coments { margin-top: 14px; display: grid; gap: 10px; }
.com-coment { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 14px; }
.com-coment b { color: var(--ink-strong); }
.com-coment small { font-size: var(--t-xs); color: var(--ink-dim); margin-left: 6px; }
.com-coment p { margin: 4px 0 0; line-height: 1.6; max-width: 65ch; }

/* ---------- roadmap: diário de obra dentro da estação ---------- */
.com-diario { margin-top: 22px; border-top: 1px solid var(--line-strong); padding-top: 16px; }
.com-diario-curto { margin-top: 12px; padding-top: 10px; }
.com-diario h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-strong); margin: 0 0 4px; }
.com-diario-sub { font-size: var(--t-sm); color: var(--ink-dim); margin: 0 0 12px; line-height: 1.5; }
.com-diario-rot { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 6px; }
.com-obra { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.com-obra li a { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; min-height: 44px; }
.com-obra li a > span { text-decoration: none; }
.com-obra li a:hover, .com-obra li a:focus-visible { border-color: var(--line-strong); }
.com-obra li a:hover .com-t, .com-obra li a:focus-visible .com-t { text-decoration: underline; }
.com-obra li.com-feita a { background: transparent; }
.com-t { color: var(--ink-strong); font-weight: 600; }
.com-q { grid-column: 2; font-size: var(--t-xs); color: var(--ink-dim); }
.com-ver-tudo { font-size: var(--t-xs); color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 520px) {
  .com-det { padding: 18px 16px; }
  .com-obra li a { grid-template-columns: 1fr; }
  .com-q { grid-column: 1; }
}