/* app.css — revisão da folha. Medidas, cores e textos do protótipo (HANDOFF §6). */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: #fff; color: #111; font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; letter-spacing: -0.005em; overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input, textarea, select { font-family: inherit; }
a { color: #111; }
:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::placeholder { color: #767676; }
kbd { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #333; border: 1px solid #8f8f8f; background: #fff; border-radius: 4px; padding: 1px 5px; }
.espaco { flex-grow: 1; }

/* ---------- App e topo ---------- */
#app { height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; min-width: 0; }
.topo { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 20px; border-bottom: 1px solid #ececec; }
.topo-jogo { display: flex; align-items: center; gap: 12px; }
.topo-rotulo { display: flex; align-items: center; gap: 10px; }
.topo-select { font-size: 14px; font-weight: 600; color: #111; border: 1px solid #8f8f8f; border-radius: 8px; padding: 0 28px 0 12px; background: #fff; height: 38px; letter-spacing: -0.01em; }
.topo-prog { display: flex; align-items: center; gap: 10px; }
.progresso { width: 72px; height: 4px; border-radius: 2px; background: #e6e6e6; display: flex; overflow: hidden; }
.progresso > span { height: 100%; }
.topo-num { font-size: 13px; color: #111; font-weight: 600; white-space: nowrap; }
.topo-num span { color: #5c5c5c; font-weight: 500; }
.legenda-topo { display: flex; gap: 6px; font-size: 12px; color: #555; white-space: nowrap; }
.legenda-topo > span { display: flex; align-items: center; gap: 5px; }
.abas { display: flex; gap: 2px; padding: 3px; border: 1px solid #8f8f8f; border-radius: 9px; background: #fafafa; margin-left: auto; }
.aba { height: 32px; padding: 0 10px; white-space: nowrap; border: 0; border-radius: 6px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 5px; background: transparent; color: #4d4d4d; }
.aba[aria-selected="true"] { background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 0 0 1px #8f8f8f; }
.aba[aria-disabled="true"] { color: #767676; cursor: not-allowed; }
.btn-sec { height: 38px; padding: 0 10px; border: 1px solid #8f8f8f; border-radius: 8px; background: #fff; color: #111; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.btn-sec[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.aviso-salvar { position: absolute; left: 236px; bottom: 12px; z-index: 5; margin: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #c0392b; border-radius: 6px; font-size: 12px; color: #111; background: #fff; white-space: nowrap; }
.aviso-x { color: #c0392b; font-weight: 700; }

/* símbolos e cores de status */
.sim { width: 14px; height: 14px; border-radius: 7px; color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.bg-ok { background: #1a7f4b; }
.bg-adj { background: #a86a12; }
.bg-redo { background: #c0392b; }

/* ---------- Corpo: três colunas ---------- */
.corpo { flex: 1 1 auto; display: flex; min-height: 0; }

/* esquerda: miniaturas */
.nav { width: 220px; flex-shrink: 0; border-right: 1px solid #ececec; overflow-y: auto; overflow-x: hidden; padding: 18px 16px; display: flex; flex-direction: column; gap: 22px; }
.faixa { display: flex; flex-direction: column; gap: 10px; min-width: 188px; }
.faixa-cab { display: flex; align-items: center; gap: 8px; }
.faixa-dot { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }
.faixa-tit { margin: 0; font-size: 12px; font-weight: 600; color: #111; }
.faixa-tit span { font-weight: 400; color: #5c5c5c; }
.faixa-cont { margin-left: auto; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #5c5c5c; }
.miniaturas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 6px; }
.miniaturas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.mini { position: relative; display: block; width: 100%; padding: 2px; background: #fff; border-radius: 4px; border: 1px solid #c4c4c4; }
.mini[aria-current="page"] { border: 2px solid #111; }
.mini.ok:not([aria-current="page"]) { opacity: 0.6; }
.mini img { display: block; width: 100%; height: auto; border-radius: 2px; }
.mini-num { position: absolute; left: 2px; right: 2px; bottom: 2px; text-align: center; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; line-height: 14px; background: rgba(255,255,255,0.95); color: #111; font-weight: 500; }
.mini[aria-current="page"] .mini-num { font-weight: 700; }
.chefao .mini-num { text-decoration: underline; }
.mini-sel { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 7px; border: 2px solid #fff; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; }
.nav-leg { margin-top: auto; padding-top: 14px; border-top: 1px solid #ececec; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 11px; color: #555; min-width: 188px; }
.nav-leg > span { display: flex; align-items: center; gap: 6px; }
.nav-leg .sub { grid-column: span 2; color: #5c5c5c; }
.bol-vazia { width: 14px; height: 14px; border-radius: 7px; border: 1.5px solid #8f8f8f; box-sizing: border-box; flex-shrink: 0; }

/* centro: folhas */
.centro { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: #f5f5f4; }
.barra { min-height: 56px; flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 18px; box-sizing: border-box; }
.seta { width: 38px; height: 38px; border: 1px solid #8f8f8f; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #111; padding: 0; }
.seta:disabled { color: #9a9a9a; border-color: #c4c4c4; background: #fafafa; }
.pos { font-weight: 600; font-size: 14px; min-width: 92px; text-align: center; }
.pos span { color: #5c5c5c; font-weight: 500; }
.atalhos { display: flex; gap: 14px; margin-left: 8px; font-size: 12px; color: #555; }
.btn-geral { height: 38px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; background: #fff; color: #111; border: 1px solid #8f8f8f; }
.btn-comentar { height: 38px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; background: #fff; color: #111; border: 1px solid #8f8f8f; }
.btn-comentar[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.zoom { display: flex; align-items: center; border: 1px solid #8f8f8f; background: #fff; border-radius: 8px; height: 38px; }
.zoom button { width: 38px; height: 36px; border: 0; background: transparent; font-size: 16px; color: #111; padding: 0; }
.zoom-val { min-width: 44px; text-align: center; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #333; }
.painel-folhas { flex-grow: 1; min-height: 0; overflow: auto; display: flex; padding: 2px 18px 28px; box-sizing: border-box; }
.zoom-wrap { margin: 0 auto; }
.pares { display: flex; gap: 22px; align-items: flex-start; }
.pagina-col { display: flex; flex-direction: column; gap: 8px; }
.pagina-rot { font-size: 11px; font-weight: 500; color: #555; letter-spacing: 0.02em; }
.papel { position: relative; width: 420px; height: 594px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 6px 24px rgba(0,0,0,0.06); }
.papel.comentando { cursor: crosshair; outline: 2px solid #111; outline-offset: 6px; }
.papel img { display: block; width: 100%; height: 100%; border-radius: 1px; }
.vazio-centro { margin: 40px auto; font-size: 14px; color: #333; }
.pino { position: absolute; transform: translate(-50%, -100%); width: 32px; height: 32px; border-radius: 16px 16px 16px 2px; rotate: -45deg; border: 2px solid #fff; background: #111; color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); padding: 0; z-index: 2; }
.pino.aberto { background: #c0392b; }
.pino-n { rotate: 45deg; display: block; line-height: 1; }
.caixa { position: absolute; width: 272px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.16); padding: 10px 12px 12px 14px; display: flex; flex-direction: column; gap: 10px; z-index: 3; cursor: default; color: #111; font-size: 13px; text-align: left; }
.caixa-cab { display: flex; align-items: center; gap: 8px; }
.caixa-autor { font-size: 13px; font-weight: 600; }
.caixa-onde { font-size: 12px; color: #5c5c5c; }
.caixa-texto { font-size: 13px; line-height: 1.5; color: #222; white-space: pre-wrap; overflow-wrap: anywhere; }
.caixa-rotulo { display: flex; flex-direction: column; }
.caixa-botoes { display: flex; justify-content: flex-end; gap: 6px; }
.fechar { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; font-size: 18px; color: #555; padding: 0; }
.num-bolinha { width: 20px; height: 20px; border-radius: 10px; background: #111; color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rasc { font-family: inherit; font-size: 13px; border: 1px solid #8f8f8f; border-radius: 8px; padding: 9px 10px; height: 72px; resize: none; color: #111; background: #fff; width: 100%; display: block; }
.btn-linha { height: 36px; padding: 0 12px; border: 1px solid #8f8f8f; background: #fff; border-radius: 7px; font-size: 13px; font-weight: 500; color: #111; }
.btn-prim-sm { height: 36px; padding: 0 14px; border: 0; background: #111; color: #fff; border-radius: 7px; font-size: 13px; font-weight: 600; }
.btn-apagar { height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 500; color: #555; text-decoration: underline; }

/* direita: painel */
.painel { width: 360px; flex-shrink: 0; border-left: 1px solid #ececec; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.painel-corpo { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 20px; }
.painel-rodape { flex-shrink: 0; border-top: 1px solid #ececec; padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.cab-etapa { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; }
.cab-faixa { font-weight: 500; }
.sep { color: #8f8f8f; }
.chefao-tag { font-weight: 600; color: #111; }
.status-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #111; }
.status-tag.pend { color: #555; }
.status-bol { width: 14px; height: 14px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; box-sizing: border-box; }
.cabecalho-missao { display: flex; flex-direction: column; gap: 10px; }
.missao-tit { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.missao-tit.menor { font-size: 22px; }
.missao-sub { font-size: 13px; color: #555; }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.etapa { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: #111; padding-top: 8px; border-top: 2px solid #111; }
.etapa.prox { color: #5c5c5c; border-top-color: #e3e3e3; }
.etapa.atual { font-weight: 600; }
.etapa-num { width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; box-sizing: border-box; }
.etapa-num.atual { background: #111; color: #fff; }
.etapa-num.feito { background: #e8e8e8; color: #111; }
.etapa-num.prox { border: 1.5px solid #8f8f8f; color: #555; }
.bloco { display: flex; flex-direction: column; gap: 14px; }
.bloco.resolver { gap: 16px; }
.bloco-intro { display: flex; flex-direction: column; gap: 4px; }
.h2-grande { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.intro { font-size: 13px; color: #555; line-height: 1.45; }
.rotulo-secao { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #555; }
.cab-linha { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.contagem { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; color: #555; }
.link { min-height: 32px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: #111; text-decoration: underline; padding: 0 4px; }
.link-peq { min-height: 32px; border: 0; background: transparent; font-size: 12px; font-weight: 500; color: #111; text-decoration: underline; padding: 0 2px; }
.grupo { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.grupo-tit { padding: 0; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #555; }
.campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.c1 { grid-column: span 1; justify-content: flex-end; }
.campo.c3 { grid-column: span 3; }
.campo-rot { font-size: 12px; font-weight: 500; color: #333; }
.campo-num { font-family: "Geist Mono", ui-monospace, monospace; color: #555; }
.campo-in, .campo-ta { font-size: 14px; box-sizing: border-box; width: 100%; padding: 0 10px; border: 1px solid #8f8f8f; border-radius: 8px; color: #111; background: #fff; height: 40px; }
.campo-in.estreito { text-align: center; font-weight: 600; }
.campo-ta { height: auto; min-height: 56px; padding: 8px 10px; resize: vertical; line-height: 1.4; }
.aviso-tracejado { border: 1px dashed #8f8f8f; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: #333; }
.placar { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: #fafafa; border: 1px solid #e3e3e3; }
.placar-topo { display: flex; align-items: baseline; justify-content: space-between; }
.placar-num { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.placar-num span { font-size: 16px; color: #555; font-weight: 500; }
.barras { display: flex; gap: 3px; }
.barra-item { flex: 1; height: 6px; border-radius: 3px; }
.placar-det { font-size: 12px; color: #555; }
.resultados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid #e3e3e3; background: #fff; }
.item.erro { border-color: #e2b3ad; background: #fdf6f5; }
.item-topo { display: flex; gap: 10px; align-items: flex-start; }
.ic { width: 20px; height: 20px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.ic-pend { border: 1.5px solid #8f8f8f; color: #555; background: #fff; box-sizing: border-box; }
.ic-ok { background: #1a7f4b; color: #fff; }
.ic-redo { background: #c0392b; color: #fff; }
.item-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex-grow: 1; }
.item-rot { font-size: 12px; font-weight: 500; color: #333; }
.item-voce { font-size: 13px; color: #111; line-height: 1.4; }
.item-voce b { font-weight: 600; }
.item-esp { font-size: 13px; color: #1a5c3a; line-height: 1.4; }
.item-esp b { font-weight: 600; }
.item-alt, .item-crit { font-size: 12px; color: #555; }
.julgar { display: flex; gap: 6px; padding-left: 30px; }
.btn-julgar { height: 34px; padding: 0 12px; border-radius: 7px; font-size: 12px; font-weight: 500; background: #fff; color: #111; border: 1px solid #8f8f8f; }
.btn-julgar.j-sim[aria-pressed="true"] { background: #1a7f4b; color: #fff; border-color: #1a7f4b; }
.btn-julgar.j-nao[aria-pressed="true"] { background: #c0392b; color: #fff; border-color: #c0392b; }
.motivos { display: flex; flex-direction: column; gap: 6px; padding-left: 30px; }
.motivos-pergunta { font-size: 12px; color: #555; }
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilula { height: 32px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #fff; color: #111; border: 1px solid #8f8f8f; }
.pilula[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.check { display: flex; align-items: center; gap: 11px; min-height: 40px; font-size: 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.check input { width: 18px; height: 18px; accent-color: #111; margin: 0; }
.check span { color: #111; }
.vazio { margin: 0; font-size: 13px; color: #555; line-height: 1.5; }
.comentarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.com { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 12px; border-radius: 10px; font-family: inherit; background: #fff; border: 1px solid #c4c4c4; text-align: left; color: #111; }
button.com { cursor: pointer; }
.com.on { background: #f5f5f4; border: 1.5px solid #111; }
.com-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex-grow: 1; }
.com-onde { font-size: 11px; font-weight: 500; color: #555; }
.com-corpo { font-size: 13px; line-height: 1.45; color: #111; white-space: pre-wrap; overflow-wrap: anywhere; }
.com-acoes { display: flex; justify-content: flex-end; }
.rasc-bloco { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; min-width: 0; }
.sugestao { font-size: 12px; color: #7a5000; display: flex; align-items: center; gap: 6px; }
.sugestao::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: #a86a12; flex-shrink: 0; }
.btn-corrigir { width: 100%; height: 48px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: -0.01em; background: #111; color: #fff; }
.btn-corrigir:disabled { background: #e6e6e6; color: #5c5c5c; }
.ajuda { font-size: 12px; color: #555; text-align: center; }
.btn-aprovar { width: 100%; height: 46px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: -0.01em; color: #fff; background: #1a7f4b; }
.kbd-branca { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; background: rgba(255,255,255,0.16); border: 0; border-radius: 4px; padding: 1px 6px; color: #fff; }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.btn-ajustes { height: 44px; border-radius: 10px; background: #fff; color: #111; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #8f8f8f; }
.btn-ajustes.sugerido { border: 2px solid #a86a12; font-weight: 600; }
.btn-refazer { height: 44px; border: 1px solid #8f8f8f; border-radius: 10px; background: #fff; color: #111; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; }
.decisao { display: flex; flex-direction: column; gap: 8px; }
.btn-aprovar.sugerido-ok { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #1a7f4b; }
.sugestao.ok { color: #1a5c3a; }
.sugestao.ok::before { background: #1a7f4b; }
.caixa-decisao { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border: 1px solid #8f8f8f; border-radius: 10px; background: #fff; }
.caixa-decisao-rot { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: #111; }

/* ---------- Checklist: dica de cada item ---------- */
.check-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check .check-dica { font-size: 12px; line-height: 1.4; color: #555; }

/* ---------- Quadro "Olhe com atenção" ---------- */
.atencao { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #fff8e6; border-left: 3px solid #a86a12; border-radius: 6px; }
.atencao-tit { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #111; }
.atencao-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; color: #111; }

/* ---------- Topo: Guia ---------- */
.topo-acoes { display: flex; align-items: center; gap: 8px; }
.guia-ico { width: 18px; height: 18px; border-radius: 9px; border: 1.5px solid currentColor; font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Balão de orientação (guia) ---------- */
.coach { position: fixed; z-index: 20; width: 280px; max-width: calc(100vw - 16px); box-sizing: border-box; background: #111; color: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-family: inherit; font-size: 13px; letter-spacing: normal; text-align: left; }
.coach-seta { position: absolute; bottom: -6px; width: 12px; height: 12px; background: #111; transform: rotate(45deg); }
.coach.seta-cima .coach-seta { top: -6px; bottom: auto; }
.coach-txt { margin: 0; font-size: 13px; line-height: 1.45; color: #fff; }
.coach-botoes { display: flex; align-items: center; gap: 8px; }
.coach-pular { margin-right: auto; height: 30px; padding: 0 4px; border: 0; background: transparent; color: #fff; font-size: 12px; text-decoration: underline; }
.coach-ok { height: 30px; padding: 0 14px; border: 0; border-radius: 6px; background: #fff; color: #111; font-size: 13px; font-weight: 600; }
.coach :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.coach-alvo { outline: 2px solid #111; outline-offset: 3px; animation: coach-pulso 1.6s ease-in-out 3; }
@keyframes coach-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(17,17,17,0.22); } 50% { box-shadow: 0 0 0 6px rgba(17,17,17,0); } }
@media (prefers-reduced-motion: reduce) { .coach-alvo { animation: none; } }

/* ---------- Resumo, toast, anúncio ---------- */
.resumo-area { flex: 1 1 auto; min-height: 0; overflow: auto; background: #fff; }
.resumo-falta { margin: 40px; font-size: 14px; color: #333; }
.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; background: #111; color: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.25); font-size: 13px; z-index: 10; }
.toast-bola { width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; }
.toast-desfazer { height: 34px; padding: 0 12px; border: 1px solid #8f8f8f; border-radius: 7px; background: transparent; color: #fff; font-size: 13px; font-weight: 600; }