/* Estilo comum do SEMPER. Tokens e regras descritos em DESIGN.md.
   Cor de destaque verde: o texto sobre --accent é sempre branco. */
:root {
  --accent: #377D22;
  --accent-hover: #2F6B1D;
  --accent-bright: #5FAE3E;
  --accent-ink: #2B6119;
  --accent-deep: #1F4712;
  --accent-tint: #EEF5EA;
  --on-accent: #FFFFFF;
  --dark: #1A1916;
  --card: #2C2A26;
  --ink: #1A1916;
  --text: #3D3B36;
  --text2: #57554F;
  --muted: #6B6A63;
  --faint: #8A8981;
  --gray: #A8A79F;
  --line: #EBEBE6;
  --line2: #DCDCD4;
  --soft: #F5F5F2;
  --bg: #FBFBF9;
  --white: #FFFFFF;
  --ok: #2E7D4F;
  --ok-bg: #E8F4EC;
  --ok-ink: #1F5C38;
  --warn-bg: #FFF4EA;
  --warn-ink: #7A3E0C;
  --erro: #B42318;
  --erro-bg: #FDECEA;
  --font: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; line-height: 1.5 }
body.sem-rolagem { overflow: hidden }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font-family: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.num, td, .coluna-n { font-variant-numeric: tabular-nums }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ---------- textos ---------- */
.olho { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted) }
.titulo { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance }
.titulo .ponto { color: var(--accent) }
.lead { margin: 10px 0 0; font-size: 17px; color: var(--text2); max-width: 640px }
h2.secao { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em }
.rotulo-caps { display: block; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.nota { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.6 }
.link { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 700; font-size: 14px; cursor: pointer; border-bottom: 1px solid currentColor }
.carregando { color: var(--muted); font-size: 15px }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line2); background: var(--white); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap }
.btn:hover:not(:disabled) { background: var(--soft) }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 900 }
.btn.pri:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover) }
.btn.esc { background: var(--dark); border-color: var(--dark); color: #fff }
.btn.esc:hover:not(:disabled) { background: #000 }
.btn.perigo { border-color: #F3C1BC; color: var(--erro) }
.btn.perigo:hover:not(:disabled) { background: var(--erro-bg) }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px }
.btn:disabled { opacity: .5; cursor: not-allowed }
.mini { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; color: var(--ink) }
.mini:hover:not(:disabled) { background: var(--soft) }
.mini.perigo { border-color: #F3C1BC; color: var(--erro) }
.mini.perigo.confirmar, .btn.perigo.confirmar { background: var(--erro); border-color: var(--erro); color: #fff }
.mini:disabled { opacity: .45; cursor: not-allowed }
.icone-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line2); background: #fff; color: var(--text); cursor: pointer }
.icone-btn:hover { background: var(--soft) }

/* ---------- campos ---------- */
.campo, .campos input, .campos select, .campos textarea { width: 100%; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line2); background: #fff; font-size: 15px; color: var(--ink) }
.campos textarea, textarea.campo { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical }
.campo:focus, .campos input:focus, .campos select:focus, .campos textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent }
.campos label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text) }
.campos label small { font-weight: 400; color: var(--muted) }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px }

/* ---------- avisos ---------- */
.aviso { padding: 12px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5 }
.aviso.erro { background: var(--erro-bg); color: var(--erro) }
.aviso.ok { background: var(--ok-bg); color: var(--ok-ink) }
.aviso.info { background: var(--warn-bg); color: var(--warn-ink) }
#avisos { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(100vw - 32px)) }
.toast { pointer-events: auto; background: var(--dark); color: #FBFBF9; padding: 12px 18px; border-radius: 10px; font-size: 14px; line-height: 1.45; box-shadow: 0 12px 36px rgba(0,0,0,.28); animation: sobe .25s ease-out; text-align: center }
.toast.erro { background: #5C1610 }
.toast.sai { opacity: 0; transform: translateY(8px); transition: .3s }
@keyframes sobe { from { opacity: 0; transform: translateY(8px) } }

/* ---------- cartões, tabelas, selos ---------- */
.cartao { border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 24px }
.vazio { padding: 24px; border: 1px dashed var(--line2); border-radius: 12px; color: var(--muted); font-size: 15px; line-height: 1.6 }
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px }
.resumo .cartao { padding: 18px 20px }
.resumo b { display: block; font-size: 32px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums }
.resumo span { font-size: 13px; font-weight: 700; color: var(--muted) }
.tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff }
.tabela table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px }
.tabela th { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; background: #fff; position: sticky; top: 0 }
.tabela td { padding: 12px 16px; border-bottom: 1px solid var(--soft); vertical-align: middle }
.tabela tr:last-child td { border-bottom: 0 }
.tabela tbody tr.clicavel { cursor: pointer }
.tabela tbody tr.clicavel:hover td { background: var(--soft) }
.tabela tbody tr.marcada td { background: var(--accent-tint) }
.tabela .nome { font-weight: 700; color: var(--ink) }
.tabela .sub { font-size: 13px; color: var(--muted) }
.tabela input[type="checkbox"], .marca { width: 18px; height: 18px; accent-color: var(--dark); cursor: pointer }
.selo { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: var(--soft); color: var(--text2) }
.selo.ok { background: var(--ok-bg); color: var(--ok-ink) }
.selo.pend { background: var(--warn-bg); color: var(--warn-ink) }
.selo.erro { background: var(--erro-bg); color: var(--erro) }
.selo.escuro { background: var(--dark); color: #fff }
.selo.arq { background: var(--soft); color: var(--muted); border: 1px dashed var(--line2) }
.codigo { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums }

/* ---------- avatares ---------- */
.avatar { width: var(--av, 28px); height: var(--av, 28px); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: calc(var(--av, 28px) * .38); font-weight: 900; letter-spacing: .02em; line-height: 1; user-select: none }
.avatar.mais { background: var(--line2); color: var(--text) }
.avatares { display: inline-flex; align-items: center }
.avatares .avatar { box-shadow: 0 0 0 2px #fff }
.avatares .avatar + .avatar { margin-left: -6px }

/* ---------- casca do aplicativo ---------- */
.app { display: flex; min-height: 100vh }
.side { width: 264px; flex-shrink: 0; background: var(--soft); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; position: sticky; top: 0; height: 100vh; overflow: auto }
.side > * { flex-shrink: 0 }
.marca-app { display: flex; align-items: center; gap: 10px; padding: 10px 10px 14px }
.marca-app .ini { width: 28px; height: 28px; border-radius: 6px; background: var(--dark); color: var(--accent-bright); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; flex-shrink: 0 }
.marca-app b { display: block; font-weight: 900; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.marca-app small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink) }
.nav { display: flex; flex-direction: column; gap: 2px }
.nav a, .nav button { display: flex; align-items: center; gap: 10px; padding: 0 10px; min-height: 36px; border-radius: 6px; color: var(--text); background: none; border: 0; font-size: 14px; cursor: pointer; text-align: left; width: 100% }
.nav a:hover, .nav button:hover { background: var(--line) }
.nav a[aria-current="page"] { background: var(--line); font-weight: 700; color: var(--ink) }
.nav svg { flex-shrink: 0 }
.nav-linha { display: flex; align-items: center; gap: 2px }
.nav-linha > a:first-child { flex: 1; min-width: 0 }
.nav .nav-mais { width: 28px; min-height: 28px; height: 28px; padding: 0; flex: 0 0 28px; justify-content: center; border-radius: 999px; border: 1px solid var(--line2); background: #fff; color: var(--accent-ink) }
.nav .nav-mais:hover { background: var(--accent); border-color: var(--accent); color: #fff }
.side-rodape { margin-top: auto; padding-top: 24px }
.usuario { display: flex; gap: 10px; align-items: flex-start; padding: 10px; font-size: 13px; color: var(--muted); line-height: 1.4 }
.usuario b { color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.usuario .arroba { display: block; font-size: 12px }
.papel { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: var(--dark); color: #fff }
.papel.comum { background: var(--line2); color: var(--text) }

.conteudo { flex: 1; min-width: 0; padding: 48px clamp(16px, 5vw, 64px) 72px }
.miolo { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px }
.miolo.largo { max-width: none }
.secao-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap }
.destaque { background: var(--dark); color: #FBFBF9; border-radius: 16px; padding: clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px }
.destaque h2 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gray) }
.destaque p { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; letter-spacing: -.02em; max-width: 620px }
.destaque .acoes { display: flex; gap: 10px; flex-wrap: wrap }
.destaque .btn:not(.pri) { background: transparent; color: #FBFBF9; border-color: rgba(255,255,255,.35) }
.destaque .btn:not(.pri):hover { background: rgba(255,255,255,.08) }

.topo-cel { display: none }
@media (max-width: 900px) {
  .app { flex-direction: column }
  .side { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(300px, 86vw); height: auto; transform: translateX(-102%); transition: transform .25s; box-shadow: 8px 0 30px rgba(0,0,0,.15) }
  .side.aberta { transform: none }
  .topo-cel { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 30; padding: 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--soft); border-bottom: 1px solid var(--line) }
  .topo-cel button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line2); background: var(--white); cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
  .conteudo { padding-top: 28px }
}

/* ---------- barra de ferramentas e filtros ---------- */
.barra-ferr { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center }
.busca-campo { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; color: var(--muted) }
.busca-campo:focus-within { outline: 2px solid var(--accent); border-color: transparent }
.busca-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ink); height: 100% }
.filtro { height: 44px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; padding: 0 14px; font-size: 14px; color: var(--ink); max-width: 100% }
.abas { display: inline-flex; gap: 4px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px }
.abas button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px }
.abas button[aria-pressed="true"], .abas button[aria-selected="true"] { background: var(--dark); color: #fff }
.lote { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 14px 12px 22px; border-radius: 16px; background: var(--dark); color: #FBFBF9; box-shadow: 0 12px 36px rgba(0,0,0,.22) }
.lote b { font-size: 20px; font-weight: 900 }
.lote .acoes-lote { display: flex; gap: 8px; flex-wrap: wrap }
.lote .mini { background: #2C2A26; color: #FBFBF9; border-color: rgba(255,255,255,.25) }
.lote .mini:hover:not(:disabled) { background: #3a3833 }
.lote .mini.perigo { color: #FFB4AB; border-color: rgba(255,180,171,.5) }
.lote .mini.perigo.confirmar { background: var(--erro); color: #fff; border-color: var(--erro) }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted) }

/* ---------- quadro kanban ---------- */
.quadro { display: flex; gap: 12px; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; min-height: 360px; scroll-behavior: smooth }
.coluna { flex: 0 0 284px; display: flex; flex-direction: column; max-height: 100%; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; min-width: 0 }
.coluna.sem-etapa { background: #F1F1ED }
.coluna-topo { display: flex; align-items: center; gap: 8px; padding: 12px 10px 8px 14px; flex-shrink: 0 }
.coluna-topo h3 { margin: 0; flex: 1; min-width: 0; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.coluna-n { font-size: 12px; font-weight: 700; color: var(--muted); padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line) }
.coluna-menu { width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
.coluna-menu:hover { background: var(--line) }
.coluna-lista { flex: 1; min-height: 40px; overflow-y: auto; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 8px }
.coluna-vazia { margin: 4px 6px; font-size: 13px; color: var(--faint) }
.coluna-vazia.erro { color: var(--erro) }
.coluna-pe { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 10px; flex-shrink: 0 }
.coluna-pe button { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 0 8px; text-align: left }
.coluna-pe button:hover { background: var(--line) }
.kcartao { background: #fff; border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s, border-color .15s }
.kcartao:hover { border-color: var(--faint) }
.kcartao:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.kcartao.arrastando { opacity: .45; transform: rotate(1.5deg); box-shadow: 0 12px 36px rgba(0,0,0,.18) }
.kcartao .kt { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere }
.kcartao .km { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 10px }
.kcartao .kp { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; min-height: 26px }
.kmarcador { height: 4px; border-radius: 4px; background: var(--accent); margin: 2px 4px; flex-shrink: 0 }
.nova-coluna { background: transparent; border-style: dashed; border-color: var(--line2); padding: 14px; gap: 14px; overflow-y: auto }
.nova-form { display: flex; flex-direction: column; gap: 8px }
.ocultas { display: flex; flex-wrap: wrap; gap: 6px }
.ocultas .rotulo-caps { flex-basis: 100% }
.chip-oculta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; font-size: 13px; color: var(--text2); cursor: pointer }
.chip-oculta:hover { border-color: var(--faint) }
.kmenu { position: absolute; z-index: 60; min-width: 220px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.2); display: flex; flex-direction: column }
.kmenu button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left }
.kmenu button:hover, .kmenu button:focus-visible { background: var(--soft); outline: 0 }
.kmenu button.perigo { color: var(--erro) }
@media (max-width: 900px) { .coluna { flex-basis: min(85vw, 320px) } }

/* ---------- painel do cartão ---------- */
.veu, .veu-janela { position: fixed; inset: 0; background: rgba(26,25,22,.45); z-index: 70 }
.veu { opacity: 0; transition: opacity .2s }
.veu.on { opacity: 1 }
.cartao-painel { position: fixed; z-index: 71; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: #fff; border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.18); overflow-y: auto; transform: translateX(24px); opacity: 0; transition: transform .25s, opacity .25s; outline: 0 }
.cartao-painel.on { transform: none; opacity: 1 }
.cartao-fechar { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
.cartao-fechar:hover { background: var(--soft) }
.cartao-corpo { padding: 28px clamp(18px, 4vw, 32px) 40px; display: flex; flex-direction: column; gap: 26px }
.cartao-cabeca h2 { margin: 6px 0 0; font-size: 24px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; padding-right: 44px }
.cartao-cabeca .linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.cartao-acoes { display: flex; flex-wrap: wrap; gap: 8px }
.bloco { display: flex; flex-direction: column; gap: 10px }
.bloco > h3 { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); display: flex; align-items: center; gap: 8px }
.qualificacao { background: var(--soft); border-radius: 12px; padding: 16px 18px; font-size: 15px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere }
.dados { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 0; margin: 0; font-size: 14px }
.dados dt, .dados dd { padding: 8px 0; border-bottom: 1px solid var(--soft); margin: 0 }
.dados dt { color: var(--muted); padding-right: 12px }
.dados dd { color: var(--ink); overflow-wrap: anywhere }
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.hist li { padding: 2px 0 2px 12px; border-left: 2px solid var(--line2); font-size: 14px; line-height: 1.5 }
.hist .quando { display: block; font-size: 12px; color: var(--muted) }
.hist .de { color: var(--muted); text-decoration: line-through }
.sigilo { background: var(--warn-bg); border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--ink); display: flex; flex-direction: column; gap: 8px }
.sigilo .meta { font-size: 12px; color: var(--warn-ink); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between }
.responsaveis { display: flex; flex-wrap: wrap; gap: 8px }
.resp-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 4px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; font-size: 13px }
.resp-chip button { width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
.resp-chip button:hover { background: var(--soft); color: var(--erro) }
.cartao-rodape { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted) }

/* ---------- janelas ---------- */
.veu-janela { display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 80 }
.janela { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 12px 36px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 16px }
.janela h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.01em }
.janela-corpo { font-size: 15px; line-height: 1.6; color: var(--text) }
.janela-corpo p { margin: 0 0 8px }
.janela-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap }

/* ---------- formulário em etapas ---------- */
.passos { max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 28px }
.passos-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; font-weight: 700; color: var(--muted) }
.progresso { flex: 1; max-width: 260px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden }
.progresso > i { display: block; height: 100%; background: var(--accent); transition: width .3s }
.etapa { display: none; flex-direction: column; gap: 28px }
.etapa.ativa { display: flex; animation: entra .35s cubic-bezier(.16,1,.3,1) }
@keyframes entra { from { opacity: 0; transform: translateY(16px) } }
.etapa > header h2 { margin: 0; font-size: clamp(24px, 3vw, 30px); font-weight: 900; letter-spacing: -.02em }
.etapa > header p { margin: 6px 0 0; color: var(--muted); font-size: 15px }
.pergunta { display: flex; flex-direction: column; gap: 8px }
.pergunta > label, .pergunta > .rot { font-size: 15px; font-weight: 700; color: var(--ink) }
.pergunta .req { color: var(--erro); margin-left: 2px }
.pergunta .dica { font-size: 13px; color: var(--muted); margin: -2px 0 2px; line-height: 1.5 }
.pergunta input[type="text"], .pergunta input[type="email"], .pergunta input[type="tel"], .pergunta select, .pergunta textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line2); background: #fff; font-size: 16px; color: var(--ink) }
.pergunta textarea { height: auto; min-height: 90px; padding: 12px 14px }
.pergunta input:focus, .pergunta select:focus, .pergunta textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent }
.pergunta.erro input, .pergunta.erro select { border-color: var(--erro); outline-color: var(--erro) }
.pergunta .msg-erro { font-size: 13px; font-weight: 700; color: var(--erro); display: none }
.pergunta.erro .msg-erro { display: block }
.caixa-alta { text-transform: uppercase }
.linha-campo { display: flex; gap: 10px }
.linha-campo > input { flex: 1; min-width: 0 }
.escolhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.escolhas.coluna-unica { grid-template-columns: 1fr }
.escolhas label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line2); border-radius: 12px; background: #fff; cursor: pointer; font-size: 15px; color: var(--ink); user-select: none; transition: border-color .15s, background .15s }
.escolhas label:hover { border-color: var(--faint) }
.escolhas input { position: absolute; opacity: 0; pointer-events: none }
.escolhas label::before { content: ''; width: 18px; height: 18px; flex-shrink: 0; border-radius: 999px; border: 2px solid var(--line2); background: #fff; transition: .15s }
.escolhas.multipla label::before { border-radius: 5px }
.escolhas label:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent) }
.escolhas label:has(input:checked)::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px #fff }
.escolhas.multipla label:has(input:checked)::before { box-shadow: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat }
.escolhas label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
.lista-tel { display: flex; flex-direction: column; gap: 8px }
.lista-tel .linha-campo button { flex-shrink: 0 }
.retorno { padding: 10px 14px; border-radius: 8px; font-size: 14px; line-height: 1.5 }
.navegar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line) }
.navegar .btn { height: 48px; padding: 0 26px }
.marcar { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer }
.marcar input { width: 18px; height: 18px; accent-color: var(--accent) }
@media (max-width: 640px) {
  .navegar .btn { flex: 1 }
  .linha-campo { flex-wrap: wrap }
  .linha-campo > .btn { flex: 1 }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important } }