/* Mosaico Sala · Planejamento (pensado para o PC; funciona no celular) */
.plan-pagina { max-width: 1280px; margin: 0 auto; padding: 0 16px 96px; }
.plan-barra { max-width: 1280px !important; flex-wrap: wrap; }
.plan-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.plan-acoes .btn { min-height: 42px; padding: 0 14px; font-size: .92rem; }
.plan-login { max-width: 520px; margin: 40px auto; }

.plan-inicio { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-top: 18px; }
.plan-inicio .cartao { margin: 0; }
.lista-bib { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lista-bib li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--linha); }
.lista-bib li .tit { flex: 1; min-width: 0; }
.lista-bib li .tit strong { display: block; overflow-wrap: anywhere; }
.lista-bib li .mini { flex: none; }
.etiqueta { font-size: .75rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #13263d; color: var(--acento-2); }

.plan-grade { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; margin-top: 16px; align-items: start; }
.plan-nav { position: sticky; top: 76px; display: grid; gap: 6px; }
.plan-nav button { text-align: left; min-height: 44px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--texto-2); font: 600 .98rem var(--fonte); padding: 8px 12px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.plan-nav button:hover { background: var(--fundo-2); }
.plan-nav button[aria-current=true] { background: linear-gradient(180deg, #26324f, #1d2740); color: var(--texto); border-color: var(--linha); box-shadow: inset 3px 0 0 var(--acento), 0 3px 0 #0c111d; }
.plan-nav .sub { padding-left: 20px; font-size: .92rem; }
.plan-nav .num { font-family: var(--fonte-titulo); font-weight: 800; color: var(--acento); min-width: 1.4em; }
.plan-nav .rot { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-nav .selo { font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; }
.plan-nav .selo.erro { background: #3b1414; color: var(--erro); }
.plan-nav .selo.ok { background: #0f3b2a; color: var(--ok); }
.plan-nav .divisor { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin: 10px 4px 2px; }

.plan-editor .cartao { margin: 0 0 16px; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campos-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.linha-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 8px 0; }
.linha-item input { min-height: 46px; }
.mini { display: flex; gap: 4px; }
.mini .btn { min-height: 40px; min-width: 40px; padding: 0 10px; }
.opcao-edit { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; margin: 8px 0; }
.opcao-edit .correta { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--texto-2); margin: 12px 0 0; }
.opcao-edit .correta input { width: 22px; height: 22px; accent-color: var(--ok); }
.opcao-edit textarea { min-height: 54px; }

.peca-edit { background: #f6f1e7; color: #1b1b1b; border-radius: 12px; padding: 12px; margin: 12px 0; box-shadow: 0 3px 0 #b9ab92, 0 10px 18px rgba(0,0,0,.3); }
.peca-edit textarea { background: #fffdf8; color: #1b1b1b; border-color: #d8ccb4; min-height: 80px; }
.peca-edit select { background: #fffdf8; color: #1b1b1b; border-color: #d8ccb4; min-height: 42px; }
.peca-edit label { color: #5a4a2e; margin: 8px 0 4px; font-size: .88rem; }
.peca-edit .rodape { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; justify-content: space-between; }
.alvos { display: flex; flex-wrap: wrap; gap: 6px; }
.alvo { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 2px solid #d8ccb4; background: #fff; color: #333; font: 700 .85rem var(--fonte); cursor: pointer; }
.alvo[aria-pressed=true] { border-color: var(--cor, #ff8a3d); background: color-mix(in srgb, var(--cor, #ff8a3d) 22%, #fff); color: #111; }
.alvo img { width: 24px; height: 24px; }

.resumo-dist { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.tipo-cartoes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tipo-cartao { text-align: left; padding: 14px; border-radius: 14px; border: 2px solid var(--linha); background: var(--fundo-2); color: var(--texto); cursor: pointer; font: inherit; box-shadow: 0 3px 0 #0c111d; }
.tipo-cartao:hover { border-color: var(--acento-2); }
.tipo-cartao strong { display: block; font-family: var(--fonte-titulo); margin-bottom: 4px; }
.tipo-cartao small { color: var(--texto-2); }

@media (max-width: 860px) {
  .plan-grade { grid-template-columns: 1fr; }
  .plan-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .plan-nav button { white-space: nowrap; flex: none; }
  .plan-nav .divisor { display: none; }
  .plan-nav .sub { padding-left: 12px; }
  .campos-2, .campos-3 { grid-template-columns: 1fr; }
}

/* Cadeado do grupo e Quiz entre grupos */
.pergunta-edit { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px; margin: 10px 0; display: grid; gap: 6px; }
.pergunta-edit .opcao-edit input[type=text] { margin: 0; }
.fragmentos-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.fragmento.mini { display: inline-block; padding: 6px 12px; margin: 0; font-family: var(--fonte-titulo, 'Archivo'), system-ui, sans-serif; font-weight: 800; font-size: 1.05em; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.cad-exemplo { background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px 12px; }
.cad-exemplo ul { margin: 6px 0; padding-left: 18px; }
.cad-exemplo li { font-size: .92em; }

/* Cartões de arrastar (editor) */
.linha-item .num { font-family: var(--fonte-titulo); font-weight: 800; color: var(--acento); min-width: 1.6em; text-align: center; }
.cartao-edit { grid-template-columns: auto 1fr auto auto; }
.cartao-edit select, .cartao-edit input[type=number] { min-height: 46px; }
@media (max-width: 640px) { .cartao-edit { grid-template-columns: auto 1fr; } .cartao-edit > :nth-child(n+3) { grid-column: 2; } }
/* tipos novos (editor) */
.par-edit { grid-template-columns: 1fr auto 1.4fr auto; }
.direcao-edit { grid-template-columns: 1fr auto auto; }
.direcao-edit .direcao { width: 46px; height: 46px; }
.opcao-ramo { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: 6px; align-items: center; }
.cenario-edit.final { border-color: rgba(77,255,176,.35); }
.cenario-edit .mini select { min-height: 40px; width: auto; }
.cenario-edit .mini label { display: none; }
@media (max-width: 640px) { .par-edit, .opcao-ramo { grid-template-columns: 1fr; } }
.seq-termo-edit { grid-template-columns: minmax(8em, 1fr) 2fr auto; }
@media (max-width: 640px) { .seq-termo-edit { grid-template-columns: 1fr auto; } .seq-termo-edit input:nth-child(2) { grid-column: 1; grid-row: 2; } }

/* ---------- Navegação e visual do Planejamento ---------- */
.plan-pagina > .fluxo { margin-top: 4px; }
.plan-migalhas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; min-height: 44px; }
.plan-migalhas .sep { color: var(--texto-2); font-weight: 800; }
.plan-migalhas .tit { font-family: var(--fonte-titulo); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-nav button .ico { width: 1.2em; height: 1.2em; color: var(--acento-2); }
.plan-nav button[aria-current=true] .ico { color: var(--acento); }
.plan-nav .ilu svg { filter: none; }
.plan-nav .nova { color: var(--acento-2); }
.tipo-cartao { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; transition: transform .08s, border-color .08s; }
.tipo-cartao:hover { transform: translateY(-2px); }
.tipo-cartao .ilu { margin-top: 2px; }
.plan-inicio .cartao h2 { display: flex; align-items: center; gap: 10px; }
.plan-inicio .cartao h2 .ilu svg { filter: none; }
.plan-acoes .btn .ico { width: 1.1em; height: 1.1em; }

/* Os 3 passos do planejamento */
.plan-passos3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 16px; }
.passo3 { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n rot" "n est"; column-gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); color: var(--texto-2); font: 700 .95rem var(--fonte); cursor: pointer; }
.passo3:hover { border-color: var(--acento-2); }
.passo3[aria-current=step] { color: var(--texto); border-color: var(--acento); box-shadow: inset 0 -3px 0 var(--acento); }
.passo3 .n { grid-area: n; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fundo-2); font-family: var(--fonte-titulo); font-weight: 800; }
.passo3[aria-current=step] .n { background: var(--acento); color: #1a0d00; }
.passo3 .rot { grid-area: rot; }
.passo3 small { grid-area: est; font-weight: 700; font-size: .78rem; }
.passo3 small.ok { color: var(--ok); }
.passo3 small.pend { color: var(--alerta, #f3bf0a); }
@media (max-width: 640px) { .passo3 { grid-template-columns: 1fr; grid-template-areas: "n" "rot" "est"; justify-items: center; text-align: center; font-size: .85rem; } }
.tipo-cartao .tipo-quem { display: block; color: var(--acento-2); font-weight: 700; font-size: .85rem; margin: 2px 0 4px; }
/* Ergonomia docente: conteúdo, navegação e menus compactos. */
.plan-nav { min-width: 0; }
.plan-nav button { min-width: 0; width: 100%; max-width: 100%; }
.plan-nav .rot { min-width: 0; }
.plan-nav .selo { flex: none; }
.plan-acoes { align-items: center; }
.estado-salvamento { font-size: .8rem; color: var(--ok); flex-basis: 100%; text-align: right; }
.estado-salvamento[data-tipo=erro] { color: var(--erro); }
.acoes-mais { position: relative; }
.acoes-mais > summary { list-style: none; cursor: pointer; }
.acoes-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; padding: 12px; min-width: 230px; max-height: 65vh; overflow-y: auto; display: grid; gap: 8px; border: 1px solid var(--linha); border-radius: 14px; background: var(--cartao); box-shadow: 0 12px 28px #0008; }
.inicio-docente .linha-botoes { margin-bottom: 0; }
.revisao-item { border: 1px solid var(--linha); border-radius: 10px; padding: 12px; margin: 12px 0; }
.revisao-item > summary { font-weight: 700; cursor: pointer; }
.resposta-docente { white-space: pre-wrap; overflow-wrap: anywhere; font: .92rem/1.5 var(--fonte); background: var(--fundo-2); padding: 12px; border-radius: 10px; }
.evidencia-revisao { padding: 12px; margin: 10px 0; border-left: 3px solid var(--acento-2); background: var(--fundo-2); }
.evidencia-revisao blockquote { margin: 10px 0 0; font-size: .9rem; }
.autoria-dialog { width: min(1000px, calc(100% - 24px)); max-height: 92dvh; overflow-y: auto; padding: 22px; background: var(--cartao); color: var(--texto); border: 1px solid var(--acento); border-radius: 18px; }
.autoria-cab { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.autoria-cab h2 { margin: 0; }
.autoria-passos { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.autoria-passos [aria-current=step] { border-color: var(--acento); box-shadow: inset 0 -3px var(--acento); }
.autoria-dialog textarea { min-height: 100px; }
.autoria-dialog .opcoes { margin-top: 12px; }
.autoria-dialog .opcao span { min-width: 0; }
.autoria-externa { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--linha); }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--acento-2); outline-offset: 3px; }
@media(max-width:860px) { .plan-nav button { width: auto; max-width: 85vw; } }
@media(max-width:640px) {
  .plan-barra { padding: 8px 12px !important; gap: 6px !important; }
  .plan-barra .marca { font-size: .95rem; }
  .plan-barra > .status { font-size: .75rem; max-width: 48%; }
  .plan-acoes { width: 100%; margin: 0; gap: 6px; }
  .plan-acoes .btn { min-height: 40px; padding: 0 10px; font-size: .8rem; }
  .estado-salvamento { text-align: left; }
  .plan-acoes > .btn.discreto { display: none; }
  .plan-acoes > .btn:nth-of-type(2) { display: none; }
  .autoria-dialog { padding: 14px; }
  .autoria-cab h2 { font-size: 1.1rem; }
}
.so-celular { display: none; }
@media(max-width:640px) {
  .plan-acoes > .btn:nth-of-type(1), .plan-acoes > .btn:nth-of-type(2) { display:none; }
  .plan-acoes .acoes-menu .so-celular { display:inline-flex; }
}
.plan-editor { min-width: 0; }
.linha-item > * { min-width: 0; }
.opcao-edit { grid-template-columns: auto minmax(0, 1fr) auto; }
.linha-item input, .opcao-edit textarea { min-width: 0; }
.tipo-cartoes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.plan-barra .status { overflow-wrap: anywhere; }
@media(max-width:640px) {
  .planejando .plan-pagina > .fluxo { display:none; }
  .planejando .plan-migalhas .tit, .planejando .plan-migalhas .tit + .sep { display:none; }
  .planejando .plan-migalhas { gap:6px; font-size:.85rem; }
  .passo3 { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"n rot" "n est"; justify-items:stretch; text-align:left; column-gap:6px; padding:8px 6px; font-size:.75rem; }
  .passo3 .n { width:22px; height:22px; align-self:center; }
  .passo3 small { font-size:.7rem; }
}
/* Início docente e orientação no assistente de autoria. */
.escolhas-autoria { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; margin-top:18px; }
.escolha-autoria { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px; background:var(--fundo-2); border:1px solid var(--linha); border-radius:18px; }
.escolha-autoria.principal { border:2px solid var(--acento); }
.escolha-autoria h3 { margin:0; font-size:1.12rem; }
.escolha-autoria p { margin:0; color:var(--texto-2); }
.escolha-autoria .btn { margin-top:auto; min-height:48px; white-space:normal; text-align:left; width:100%; }
.escolha-autoria small { color:var(--texto-2); }
.autoria-etapa-cab { display:flex; align-items:center; gap:14px; margin:16px 0; }
.autoria-etapa-cab h3 { margin:4px 0; font-size:1.2rem; }
.autoria-passos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.autoria-passos .btn { white-space:normal; text-align:center; min-height:46px; }
@media(max-width:900px) { .escolhas-autoria { grid-template-columns:1fr; }.escolha-autoria { display:grid; grid-template-columns:68px minmax(0,1fr); gap:8px 14px; }.escolha-autoria .ilu { grid-column:1; grid-row:1/4; --tam:64px!important; }.escolha-autoria h3,.escolha-autoria p,.escolha-autoria .guia-selo { grid-column:2; }.escolha-autoria .btn,.escolha-autoria small { grid-column:1/-1; } }
@media(max-width:480px) { .autoria-passos { gap:4px; }.autoria-passos .btn { font-size:.75rem; padding:8px 5px; }.autoria-etapa-cab .ilu { --tam:48px!important; }.autoria-etapa-cab h3 { font-size:1.05rem; }.escolha-autoria { padding:14px; } }
.autoria-dialog .autoria-gerar { position:sticky; bottom:0; z-index:2; width:100%; margin:16px 0 6px; box-shadow:0 -8px 18px var(--cartao),0 4px 0 #0005; }

.escolha-autoria > .ilu { --tam:64px!important; }
.autoria-etapa-cab > .ilu { --tam:56px!important; }
@media(max-width:480px) { .autoria-etapa-cab > .ilu { --tam:48px!important; } }

/* Números de orientação nos três caminhos de preparação. */
.escolha-autoria { position:relative; }
.numero-opcao { position:absolute; right:14px; top:14px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--acento); color:var(--fundo); font:900 1.1rem var(--fonte); box-shadow:inset 0 2px 2px #fff7,0 3px 0 #0004; }
.escolha-autoria h3 { padding-right:32px; }
@media(max-width:900px) { .escolha-autoria .guia-selo { padding-right:30px; }.numero-opcao { width:30px; height:30px; top:12px; right:12px; font-size:1rem; } }
.finalizar-grade { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.finalizar-passo { display:flex; flex-direction:column; padding:16px; border:1px solid var(--linha); border-radius:14px; background:var(--fundo-2); min-width:0; }
.finalizar-passo h3 { display:flex; align-items:center; gap:3px; margin:0 0 8px; font-size:1rem; }
.finalizar-passo p { color:var(--texto-2); line-height:1.45; text-align:left; margin:0 0 14px; }
.finalizar-passo .btn { margin-top:auto; width:100%; white-space:normal; }
.alternativa-fluxo { position:absolute; right:14px; top:16px; font-size:.72rem; font-weight:700; color:var(--texto-2); }
.autoria-dialog .percurso-docente { margin:10px 0; }
.autoria-passos .numero-fluxo { margin:0; }
@media(max-width:900px) { .finalizar-grade { grid-template-columns:1fr; }.alternativa-fluxo { font-size:.65rem; right:12px; top:12px; } }

.anexo-docente{margin:12px 0;padding:14px;border:1px solid var(--linha);border-radius:14px;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:16px;align-items:start}.anexo-docente img{display:block;max-width:100%;max-height:220px;object-fit:contain;border-radius:8px}.anexo-docente figcaption{overflow-wrap:anywhere}.anexo-docente p{margin:8px 0}@media(max-width:560px){.anexo-docente{grid-template-columns:1fr}.anexo-docente img{max-height:180px}}

html{scroll-padding-top:var(--topo-docente,160px)} .plan-migalhas button,.plan-nav button,.plan-editor h2{scroll-margin-top:var(--topo-docente,160px)}

/* ---------- Área do professor já logado: três ações grandes, depois as atividades ---------- */
.painel-professor > h1 { margin: 18px 0 14px; font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.acoes-professor { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 760px) { .acoes-professor { grid-template-columns: 1.15fr 1fr 1fr; } }
.acao-professor { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; padding: 22px 18px; min-height: 200px; cursor: pointer;
  border-radius: 22px; border: 1px solid var(--linha); background: linear-gradient(160deg, var(--cartao-2), var(--fundo-2)); color: var(--texto); font: inherit;
  box-shadow: inset 0 1px #ffffff1c, 0 12px 24px #0003; transition: transform .08s, border-color .08s; }
.acao-professor:hover, .acao-professor:focus-visible { transform: translateY(-2px); border-color: var(--acento-2); }
.acao-professor.principal { border: 2px solid var(--acento); }
.acao-professor strong { font: 800 1.35rem var(--fonte-titulo); }
.acao-professor span { color: var(--texto-2); font-size: 1rem; line-height: 1.4; }
@media (max-width: 759px) { .acao-professor { grid-template-columns: auto 1fr; justify-items: start; text-align: left; min-height: 0; padding: 16px; column-gap: 14px; }
  .acao-professor > .ilu { grid-row: 1 / 3; } .acao-professor strong { align-self: end; } }
.mais-opcoes > summary { font-weight: 700; cursor: pointer; }
.mais-opcoes .plan-inicio { margin-top: 12px; }
.lista-bib .mini a.btn { text-decoration: none; }

/* ---------- Administração ---------- */
.cab-professor { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cab-professor h1 { margin: 18px 0 14px; }
.painel-admin > h1 { margin: 14px 0; }
.adm-resumo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.adm-num { display: grid; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--linha); background: var(--cartao); min-width: 120px; }
.adm-num strong { font: 800 1.6rem var(--fonte-titulo); }
.adm-num span { color: var(--texto-2); font-size: .9rem; }
.manual-atalho { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); }
.manual-atalho:hover { border-color: var(--acento-2); }
.manual-atalho strong { display: block; font: 800 1.15rem var(--fonte-titulo); }
.manual-atalho span { color: var(--texto-2); }

/* ---------- Celular: cartões da biblioteca (título em cima, ações embaixo) ----------
   Antes, a fileira de botões não encolhia e espremia o título até uma letra por linha,
   empurrando a página para além da largura da tela. */
.lista-bib li { min-width: 0; }
@media (max-width: 640px) {
  .lista-bib li { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 12px; }
  .lista-bib li .tit { flex: 1 1 100%; }
  .lista-bib li .tit strong { overflow-wrap: break-word; line-height: 1.25; }
  .lista-bib li .tit small { display: block; margin-top: 2px; }
  .lista-bib li > .etiqueta { align-self: center; }
  .lista-bib li .mini { flex: 1 1 100%; display: flex; gap: 8px; }
  .lista-bib li .mini .btn { min-height: 46px; justify-content: center; }
  .lista-bib li .mini .btn:not(.discreto) { flex: 1 1 0; min-width: 0; }
  .lista-bib li .mini .btn.discreto { flex: none; width: 48px; padding: 0; }
  /* Modelos prontos: só um botão — fica à direita, sem roubar largura do texto */
  #modelosProntos .lista-bib li .mini { justify-content: flex-end; }
  #modelosProntos .lista-bib li .mini .btn { flex: 0 0 auto; padding: 0 22px; }
}

/* ---------- Aviso de etapas parecidas muito perto ---------- */
.plan-nav .selo.alerta { background: #3b2f0a; color: var(--alerta); }
.aviso-semelhanca { border-color: var(--alerta); }
.aviso-semelhanca h3 { margin-top: 0; }
.item-semelhanca + .item-semelhanca { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.item-semelhanca .linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.item-semelhanca .btn { white-space: normal; text-align: left; min-height: 44px; }
.aviso-semelhanca p { text-align: left; hyphens: auto; }

/* ---------- Arrastar etapas na lista para mudar a ordem ---------- */
.plan-nav .etapa-nav { display: flex; align-items: center; gap: 2px; min-width: 0; border-radius: 12px; }
.plan-nav .etapa-nav > button { flex: 1; min-width: 0; }
.plan-nav .pega { flex: none; display: grid; place-items: center; width: 30px; min-height: 44px; margin-left: 4px; border-radius: 8px;
  color: var(--texto-2); font-size: 1.05rem; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.plan-nav .pega:hover { background: var(--fundo-2); color: var(--texto); }
.plan-nav .etapa-nav.arrastando { position: relative; z-index: 4; background: var(--cartao-2, #26324f); box-shadow: 0 10px 24px #0008; outline: 2px solid var(--acento); }
.plan-nav .etapa-nav.arrastando .pega { cursor: grabbing; color: var(--acento); }
.plan-nav.reordenando { user-select: none; -webkit-user-select: none; }
.plan-nav.reordenando .etapa-nav:not(.arrastando) { transition: transform .12s; }
.plan-nav .etapa-nav > button.sub { padding-left: 8px; }
@media (max-width: 860px) {
  .plan-nav .etapa-nav { flex: none; }
  .plan-nav .etapa-nav > button { flex: none; }
  .plan-nav .pega { width: 34px; margin-left: 0; }
}
.ordem-dialog { max-height: 90dvh; overflow: auto; }
.lista-ordem { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.lista-ordem .etapa-nav { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--fundo-2); border: 1px solid var(--linha); border-radius: 12px; min-width: 0; }
.lista-ordem .pega { flex: none; display: grid; place-items: center; width: 40px; min-height: 48px; border-radius: 8px; color: var(--texto-2); font-size: 1.2rem; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.lista-ordem .num { font-family: var(--fonte-titulo); font-weight: 800; color: var(--acento); min-width: 1.4em; }
.lista-ordem .rot { flex: 1; min-width: 0; font-weight: 700; line-height: 1.25; }
.lista-ordem .rot small { display: block; font-weight: 400; color: var(--texto-2); }
.lista-ordem .selo.alerta { flex: none; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: #3b2f0a; color: var(--alerta); }
.lista-ordem .etapa-nav.arrastando { position: relative; z-index: 4; box-shadow: 0 10px 24px #0008; outline: 2px solid var(--acento); }
.lista-ordem .etapa-nav.arrastando .pega { color: var(--acento); cursor: grabbing; }
.lista-ordem.reordenando { user-select: none; -webkit-user-select: none; }
.ordem-dialog p { text-align: left; }

/* ---------- Celular: barra que rola com a página e uma navegação a menos no editor ---------- */
@media (max-width: 640px) {
  /* a barra com as ações (Revisar, Ver como fica, Imprimir, Guardar) ocupava ~40% da tela fixa no topo:
     no celular ela rola junto com a página; as mesmas ações seguem no início e no fim da Revisão */
  .planejando .topo { position: static; }
  html:has(body.planejando) { scroll-padding-top: 12px; }
  .planejando :is(.plan-migalhas button, .plan-nav button, .plan-editor h2) { scroll-margin-top: 12px; }
  .planejando .percurso-docente.compacto { display: none; }
}