/* SIAP CONFIARii — layout das telas. Só tokens do sgprev-design.css; nenhuma cor fixa. */
.siap-topo {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem; background: rgb(var(--surface)); border-bottom: 1px solid rgb(var(--line));
}
.siap-marca { display: flex; align-items: center; gap: .625rem; }
.siap-marca small { display: block; color: rgb(var(--muted)); font-size: .75rem; }
.siap-logo {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem;
  background: rgb(var(--btn-bg)); color: rgb(var(--on-accent)); font-weight: 800;
}
.siap-contexto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.siap-usuario { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.siap-usuario form { margin: 0; }
.siap-main { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.siap-h1 { font-size: 1.375rem; font-weight: 800; margin: .5rem 0 1rem; }
.siap-main h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; }
.siap-estreito { max-width: 26rem; margin: 2rem auto; }
.siap-form { display: flex; flex-direction: column; gap: .5rem; }
.siap-form .btn { align-self: flex-start; margin-top: .5rem; }
.siap-grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-bottom: 1rem; }
.siap-ug-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.siap-mods { display: grid; gap: .75rem; margin-top: .75rem; }
.siap-mod { display: flex; flex-direction: column; gap: .375rem; margin: 0; }
.siap-mod .btn, .siap-mod .chip { align-self: flex-start; }
.siap-mod-destaque { outline: 2px solid rgb(var(--accent)); }
.siap-nav { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid rgb(var(--line)); }
.siap-aviso { display: block; margin: 0 0 1rem; padding: .5rem .75rem; }
.siap-linha { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin: 0 0 .25rem; }
.siap-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .875rem; }
.siap-rodape { max-width: 72rem; margin: 0 auto; padding: 1rem; color: rgb(var(--muted)); font-size: .75rem; }
@media (max-width: 40rem) { .siap-usuario { margin-left: 0; } }
/* siap-02 — telas de remessa */
.siap-trilha { font-size: .8125rem; color: rgb(var(--muted)); margin-bottom: .5rem; }
.siap-trilha a { color: rgb(var(--accent-ink)); }
.siap-titulo { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: space-between; }
.siap-grade-4 { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.siap-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.siap-acoes form { margin: 0; }
.siap-main .card + .card, .siap-main .siap-grade + .card { margin-top: 1rem; }
.siap-det { margin-top: .75rem; }
.siap-det summary { cursor: pointer; color: rgb(var(--accent-ink)); font-weight: 600; font-size: .875rem; }
.siap-det .siap-form { margin-top: .5rem; max-width: 40rem; }
.siap-busca { display: flex; gap: .5rem; margin-top: .75rem; max-width: 32rem; }
.siap-pend { margin: .375rem 0 0; padding-left: 1.125rem; font-size: .8125rem; }
.siap-pend li { margin: .125rem 0; }
.siap-ajuda { color: rgb(var(--muted)); font-size: .75rem; margin: .25rem 0 0; }
.siap-obrig { color: rgb(var(--accent-ink)); }
.siap-form-registro .siap-acoes { margin-top: 1rem; }
.siap-estreito-l { max-width: 40rem; }