/* spdi-guiado.css — Modo guiado da SPDI (ver assets/js/spdi-guiado.js).
   A classe html.spdi-modo-guiado é posta no <head> (sem piscar) e mantida pelo módulo. */
html.spdi-modo-guiado .method-tabs,
html.spdi-modo-guiado .tab-panel { display: none !important; }
html:not(.spdi-modo-guiado) #spdi-guiado,
html:not(.spdi-modo-guiado) #spdi-guiado-passos { display: none; }

.spdi-g-passos { display: flex; gap: 6px; padding: 8px 0; overflow-x: auto; scrollbar-width: thin; }
.spdi-g-passo { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-light); font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.spdi-g-passo:hover { border-color: var(--primary-light); color: var(--primary); }
.spdi-g-passo.ativo { border-color: var(--primary); background: var(--primary); color: #fff; }
.spdi-g-feito .spdi-g-passo-icone { color: var(--success); }
.spdi-g-falta .spdi-g-passo-icone { color: var(--warning); }
.spdi-g-erro .spdi-g-passo-icone { color: var(--danger); }
.spdi-g-passo.ativo .spdi-g-passo-icone { color: #fff; }

#spdi-guiado { margin: 16px 0 24px; }
.spdi-g-cartao-passo { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px; }
.spdi-g-titulo { font-size: 1.15rem; color: var(--primary-dark); margin: 0 0 6px; }
.spdi-g-pergunta { font-weight: 700; color: var(--text); margin: 18px 0 8px; }
.spdi-g-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.spdi-g-cartao { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer; font-family: inherit; font-size: .95rem; color: var(--text); }
.spdi-g-cartao span { font-size: .8rem; color: var(--text-light); }
.spdi-g-cartao:hover { border-color: var(--primary-light); }
.spdi-g-cartao.sel { border: 2px solid var(--primary); background: var(--blue-pale); }
.spdi-g-cartao:focus-visible, .spdi-g-passo:focus-visible, .spdi-g-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.spdi-g-nota { font-size: .85rem; color: var(--text-light); margin: 10px 0 0; line-height: 1.5; }
.spdi-g-nota a { color: var(--primary-light); font-weight: 600; }
.spdi-g-porque { margin-top: 8px; font-size: .85rem; color: var(--text-light); }
.spdi-g-porque summary { cursor: pointer; color: var(--primary-light); font-weight: 600; }
.spdi-g-aviso { background: #fff8e1; border: 1px solid #f5c97a; border-radius: var(--radius); padding: 12px 14px; font-size: .88rem; color: #5a4000; margin: 8px 0 12px; line-height: 1.5; }
.spdi-g-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.spdi-g-btn { padding: 9px 16px; border: 1px solid var(--primary); border-radius: 6px; background: #fff; color: var(--primary); font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.spdi-g-btn-primario { background: var(--primary); color: #fff; }
.spdi-g-mapa { margin-top: 12px; }
.spdi-g-mapa-mais { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 8px 0; }
.spdi-g-abas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.spdi-g-aba { padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--text-light); cursor: pointer; }
.spdi-g-aba.sel { background: var(--primary); border-color: var(--primary); color: #fff; }
.spdi-g-copiar { margin-left: auto; padding: 6px 12px; }
.spdi-g-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin-top: 10px; }
.spdi-g-bloco { margin-top: 10px; }
.spdi-g-campos > * { min-width: 0; }
#spdi-guiado canvas { max-width: 100%; }
#spdi-g-terra-esq canvas { max-width: 460px; }
.spdi-g-ok, .spdi-g-mal, .spdi-g-atencao { border-radius: var(--radius); padding: 10px 14px; font-size: .88rem; line-height: 1.5; margin: 10px 0; }
.spdi-g-ok { background: #e8f8ef; border: 1px solid #a3d9b8; color: #14532d; }
.spdi-g-mal { background: #fde8e8; border: 1px solid #f5a3a3; color: #7f1d1d; }
.spdi-g-atencao { background: #fff8e1; border: 1px solid #f5c97a; color: #5a4000; }
.spdi-g-mal .spdi-g-btn, .spdi-g-atencao .spdi-g-btn, .spdi-g-ok .spdi-g-btn { margin-left: 8px; padding: 4px 10px; }
.spdi-g-lista { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.spdi-g-lista li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .92rem; }
.spdi-g-lista small { color: var(--text-light); }
.spdi-g-btn-peq { padding: 3px 10px; font-size: .78rem; }
.spdi-g-saidas { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.spdi-g-tabela-caixa { overflow-x: auto; }
.spdi-g-tabela { width: 100%; border-collapse: collapse; font-size: .85rem; }
.spdi-g-tabela th, .spdi-g-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.spdi-g-tabela th { color: var(--text-light); font-weight: 600; font-size: .78rem; }
.spdi-g-tabela tr.ativo td:first-child { font-weight: 700; color: var(--primary); }
.spdi-g-tabela tr.obs td { white-space: normal; font-size: .78rem; color: #92400e; }
.spdi-g-selo { display: inline-block; margin: 0; padding: 2px 8px; font-size: .78rem; }
/* Dicas «?» fechadas não ocupam espaço (com visibility:hidden alargavam a página para a direita). */
#spdi-guiado .tooltip-wrap:not(:hover):not(:focus-within):not(.open) .tip { display: none; }
.spdi-g-dist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-light); margin: 4px 0 8px; }
.spdi-g-dist input { width: 90px; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 6px; font-size: .88rem; }
/* Separação com condutor nu: saídas e desenho «condutor nu afastado vs cabo isolado encostado». */
.spdi-g-saidas-sep { margin: 6px 0 0; padding-left: 18px; }
.spdi-g-saidas-sep li { margin: 4px 0; }
.spdi-g-desenho { display: block; width: 100%; max-width: 560px; height: auto; margin: 10px 0 4px; }

@media (max-width: 600px) {
  /* A barra de projeto (pdr-project-bar.js, modo compacto) fica numa linha: nome, Guardar, «⋯» e o botão
     de modo (data-pbar-sempre), sem CSS próprio aqui. */
  .spdi-g-passo { padding: 5px 10px; font-size: .75rem; }
  .spdi-g-cartao-passo { padding: 16px; }
  .spdi-g-cartoes { grid-template-columns: 1fr 1fr; }
  #spdi-guiado #rp-map { height: 380px !important; }
  /* Linhas das baixadas: os campos encolhem para caber em 375 px. */
  #spdi-guiado .baixada-row { gap: 6px !important; padding: 8px !important; }
  #spdi-guiado .baixada-row > div { min-width: 0; }
  #spdi-guiado .baixada-row input { width: 100%; min-width: 0; box-sizing: border-box; }
}