/* trilha/public/trilha.css · tema claro da marca (sistema). Laranja só no passo atual e no botão principal. */
body { margin: 0; background: var(--gm-tinta-25, #F6F7FB); color: var(--gm-tinta-900, #0A1022); font-family: var(--gm-font-sans, system-ui, sans-serif); font-size: 15px; line-height: 1.5; }
.mono { font-family: var(--gm-font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--gm-tinta-400, #5b6582); }
.topo { position: sticky; top: 0; display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--gm-tinta-100, #e6e9f2); }
.barra { flex: 1; height: 6px; background: var(--gm-tinta-100, #e6e9f2); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; width: var(--p, 0%); background: var(--gm-tinta-900, #0A1022); }
.aviso { margin: 12px 20px; padding: 10px 14px; background: #fff; border: 1px solid var(--gm-tinta-100, #e6e9f2); border-radius: 10px; }
main { padding: 20px; max-width: 1080px; margin: 0 auto; }
.proximo { background: #fff; border: 1px solid var(--gm-tinta-100, #e6e9f2); border-radius: 16px; padding: 20px 22px; display: grid; gap: 10px; }
.proximo h1, .conteudo h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.verificacao { margin: 0; color: var(--gm-tinta-700, #2b3450); }
.fases { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fases li { background: #fff; border: 1px solid var(--gm-tinta-100, #e6e9f2); border-radius: 12px; padding: 12px; }
.fases b { display: block; margin: 2px 0 8px; }
.fases .mini { height: 5px; background: var(--gm-tinta-100, #e6e9f2); border-radius: 99px; overflow: hidden; }
.fases .mini i { display: block; height: 100%; background: var(--gm-tinta-900, #0A1022); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.btn, .btn-principal, .voltar { font: inherit; font-weight: 600; border-radius: 10px; padding: 9px 14px; cursor: pointer; border: 1px solid var(--gm-tinta-900, #0A1022); background: #fff; color: var(--gm-tinta-900, #0A1022); }
.btn-principal { background: var(--gm-brasa-500, #FF5A1F); border-color: var(--gm-brasa-500, #FF5A1F); color: #fff; }
.voltar { border: 0; padding: 0; background: none; font-weight: 400; color: var(--gm-tinta-400, #5b6582); justify-self: start; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gm-tinta-900, #0A1022); outline-offset: 2px; }
#passo:not([hidden]) { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
.lateral { background: #fff; border: 1px solid var(--gm-tinta-100, #e6e9f2); border-radius: 14px; padding: 12px; align-self: start; }
.lateral h2 { margin: 12px 0 4px; }
.lateral button { display: flex; width: 100%; gap: 8px; align-items: center; text-align: left; font: inherit; font-size: 14px; background: none; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: inherit; }
.lateral button[aria-current="step"] { background: var(--gm-tinta-50, #EEF1F8); font-weight: 600; }
.marca { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--gm-tinta-300, #b8bfd3); flex: none; }
.marca.feito { background: var(--gm-tinta-900, #0A1022); border-color: var(--gm-tinta-900, #0A1022); }
.marca.atual { border-color: var(--gm-brasa-500, #FF5A1F); box-shadow: 0 0 0 3px rgb(255 90 31 / .18); }
.conteudo { background: #fff; border: 1px solid var(--gm-tinta-100, #e6e9f2); border-radius: 14px; padding: 20px 24px; display: grid; gap: 12px; align-content: start; }
.guia img { max-width: 100%; border-radius: 8px; border: 1px solid var(--gm-tinta-100, #e6e9f2); }
.guia code { font-family: var(--gm-font-mono, monospace); background: var(--gm-tinta-50, #EEF1F8); padding: 1px 5px; border-radius: 4px; }
.assistida { border: 1px solid var(--gm-tinta-100, #e6e9f2); background: #fff; border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.concluida { font-size: 20px; font-weight: 600; }
@media (max-width: 760px) { #passo:not([hidden]) { grid-template-columns: 1fr; } .lateral { order: 2; } }