/* Ficha (T-013): painel no chat, página de versões e diálogo de publicação.
   Só usa os tokens de style.css (claro/escuro). Sem style= inline (CSP). */

/* ---------- selos de estado (sempre com texto, nunca só cor) ---------- */
.badge { display: inline-block; font-size: .8rem; font-weight: 700; line-height: 1.3; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; vertical-align: middle; }
.b-rascunho { background: var(--warn-bg); color: var(--warn-text); }
.b-publicada { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.b-arquivada { background: transparent; color: var(--muted); border-color: var(--field); }
.b-desatualizada { background: var(--err-bg); color: var(--text); border-color: var(--err); }
.b-desatualizada::before { content: "⚠ "; content: "⚠ " / ""; }

.ficha-aviso { padding: 8px 12px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-text); border: 1px solid currentColor; font-size: .92rem; margin: 8px 0; }
.ficha-aviso[hidden] { display: none; }

.erro-bloco { padding: 10px 14px; border-radius: var(--radius); background: var(--err-bg); border: 1px solid var(--err); color: var(--text); margin: 8px 0; overflow-wrap: anywhere; }
.erro-bloco:empty { display: none; }
.erro-bloco > p:first-child::before { content: "Erro: "; font-weight: 700; color: var(--err); }
.erro-bloco .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ok-bloco { padding: 8px 12px; border-radius: var(--radius); background: var(--bot); border: 1px solid var(--line); margin: 8px 0; overflow-wrap: anywhere; }
.ok-bloco:empty { display: none; }

/* ---------- conteúdo da Ficha (compartilhado) ---------- */
.fv-h { font-size: .95rem; margin: 12px 0 4px; }
.fv-dl { margin: 0; display: grid; gap: 6px; }
.fv-par { display: grid; gap: 0; }
.fv-par dt { font-weight: 600; font-size: .88rem; color: var(--muted); }
.fv-par dd { margin: 0; overflow-wrap: anywhere; }
.fv-lista { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.fv-md { margin: 12px 0 4px; }
.fv-md summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; }
.fv-pre { margin: 6px 0 0; padding: 10px 12px; max-height: 40dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- painel no chat (#ficha) ---------- */
.ficha-head { gap: 8px; }
.ficha-head h2:focus { outline: none; }
.ficha-head h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ficha-badges { margin: 8px 0 2px; }
.ficha-meta { font-size: .88rem; overflow-wrap: anywhere; }
.ficha-prog { display: grid; gap: 8px; margin: 8px 0; }
.ficha-prog[hidden] { display: none; }
.ficha-barra { width: 100%; height: 12px; accent-color: var(--accent); }
.ficha-prog-texto { font-size: .92rem; overflow-wrap: anywhere; }
.ficha:focus-visible { outline-offset: -3px; }
.ficha-acoes .btn { flex: 1 1 auto; }

/* ---------- página de versões ---------- */
.fichas-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px var(--pad-x); background: var(--panel); border-bottom: 1px solid var(--line); }
.fichas-topo h1 { font-size: 1.2rem; line-height: 1.3; }
.fichas-main { width: min(860px, 100%); margin: 0 auto; padding: 16px var(--pad-x) 40px; display: grid; gap: 12px; }
.fichas-main h2 { font-size: 1.1rem; margin-bottom: 8px; }
.fichas-main h2:focus { outline: none; }
.fichas-main h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.resumo-lista { font-weight: 600; }
.resumo-lista:empty { display: none; }
.vazio { padding: 16px; border: 1px dashed var(--field); border-radius: var(--radius); color: var(--muted); }
.fichas-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 12px; }
.ficha-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 6px; min-width: 0; }
.ficha-item.e-publicada { border-color: var(--accent); border-width: 2px; }
.ficha-item:focus { outline: none; }
.ficha-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.item-titulo { font-size: 1.05rem; }
.item-meta { font-size: .88rem; overflow-wrap: anywhere; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.acoes .btn { flex: 1 1 auto; }
.detalhe { padding-top: 6px; border-top: 1px solid var(--line); }
.detalhe[hidden] { display: none; }
#btn-mais { justify-self: center; width: 100%; }

/* ---------- diálogo de publicação ---------- */
.dlg-publicar { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.dlg-publicar h2:focus { outline: none; }
.dlg-publicar h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dlg-publicar .revisao { margin-bottom: 10px; }
.dlg-publicar .revisao .fv-h { margin-top: 8px; }
.dlg-publicar .row .btn { flex: 1 1 auto; }

@media (max-width: 760px) {
  .ficha-acoes .btn, .acoes .btn { flex: 1 1 100%; }
  .dlg-publicar { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha-barra { display: none; } /* a barra indeterminada anima; o texto de progresso basta */
}
@media (forced-colors: active) {
  .badge, .ficha-aviso, .erro-bloco, .ok-bloco, .ficha-item { border: 1px solid CanvasText; }
}

/* alvo de toque >= 44 px também no checkbox de confirmação */
.dlg-publicar .check { align-items: center; gap: 8px; }
.dlg-publicar .check input { width: var(--tap); height: var(--tap); margin: 0; }
.dlg-publicar .check label { flex: 1; min-width: 0; }