/* SIGAF Portí — app da operação interna. Design system Portí (tokens.css); mobile-first (390px), sem degradês. */
:root {
  --bg: var(--porti-bg, #F4F2F7); --text: var(--porti-text, #09030D); --text2: var(--porti-text-2, #3b2a49); --text3: var(--porti-text-3, #6b5a7a);
  --surface: var(--porti-surface, #fff); --surface-alt: var(--porti-surface-alt, #ECE8F0); --border: var(--porti-border, #D5D2D8); --border-strong: var(--porti-border-strong, #B4A0CD);
  --brand: var(--porti-indigo, #551388); --action: var(--porti-action, #6007C1); --action-hover: var(--porti-action-hover, #4a05a0); --dark: var(--porti-sidebar, #1E0C29);
  --ok: var(--porti-success, #1b7f4b); --warn: var(--porti-warning, #b36b00); --err: var(--porti-error, #b3261e);
  --sans: var(--porti-sans, 'Nata Sans', system-ui, sans-serif); --mono: var(--porti-mono, 'JetBrains Mono', ui-monospace, monospace); --display: var(--porti-display, var(--sans));
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; display: flex; flex-direction: column; }
#topo { background: var(--dark); color: #fff; padding: calc(10px + var(--safe-t)) 16px 10px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 5; }
#topo .logo { height: 22px; }
#topo .titulo { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
#topo .amb { font-family: var(--mono); font-size: 10px; padding: 2px 8px; border-radius: 999px; background: #3a1d57; color: #D5D2D8; }
#topo .amb.producao { background: var(--err); color: #fff; }
.spacer { flex: 1; }
#topo .quem { font-size: 12px; opacity: .8; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { flex: 1; padding: 16px 16px calc(84px + var(--safe-b)); max-width: 720px; width: 100%; margin: 0 auto; }
main.sem-abas { padding-bottom: 24px; }
h1 { font-family: var(--display); font-weight: 700; font-size: 22px; margin: 4px 0 14px; }
h2 { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 20px 0 8px; }
p { line-height: 1.45; } .meta { font-size: 12px; color: var(--text3); font-family: var(--mono); }
.carregando, .vazio { color: var(--text3); font-size: 13px; padding: 24px 0; text-align: center; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px; }
.card.destaque { background: var(--dark); color: #fff; border: 0; }
.card.destaque .meta { color: #B4A0CD; }
.card.destaque .num { color: #fff; }
.num { font-family: var(--mono); font-size: 26px; font-weight: 500; }
.num.sm { font-size: 17px; }
.linha { display: flex; align-items: center; gap: 10px; }
.linha .cresce { flex: 1; min-width: 0; }
.nome { font-weight: 600; font-size: 14px; }
.sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.sub.mono { font-family: var(--mono); }
.st { font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-alt); white-space: nowrap; color: var(--text2); }
.st.ok, .st.aprovado, .st.concluido, .st.ativo, .st.pago { background: var(--ok); color: #fff; }
.st.aguardando, .st.aguardando_2a, .st.enviado, .st.enviando, .st.aguardando_aprovacao, .st.em_credenciamento { background: var(--warn); color: #fff; }
.st.erro, .st.cancelado, .st.revogado, .st.reprovado { background: var(--err); color: #fff; }
.st.manual { background: var(--brand); color: #fff; }
button, .btn { font: inherit; font-size: 15px; font-weight: 600; background: var(--action); color: #fff; border: 0; border-radius: var(--r-sm); padding: 12px 16px; cursor: pointer; width: 100%; margin-top: 8px; text-align: center; text-decoration: none; display: block; }
button:hover { background: var(--action-hover); }
button.sec { background: var(--surface-alt); color: var(--text); }
button.perigo { background: var(--err); }
button.link { background: none; color: var(--action); padding: 6px 0; font-weight: 500; }
button.inline { width: auto; display: inline-block; padding: 8px 14px; font-size: 13px; margin: 6px 6px 0 0; }
button:disabled { opacity: .5; cursor: default; }
.acoes { display: flex; gap: 8px; } .acoes button { margin-top: 10px; }
label { display: block; font-size: 12px; color: var(--text2); margin: 12px 0 4px; font-weight: 600; }
input, select, textarea { font: inherit; font-size: 16px; width: 100%; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--action); outline-offset: 0; border-color: var(--action); }
input.codigo { font-family: var(--mono); font-size: 24px; letter-spacing: .3em; text-align: center; }
.foto { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: var(--surface); margin-top: 4px; }
.foto img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-alt); }
.foto input { display: none; }
.foto .btn-foto { font-size: 13px; padding: 8px 12px; width: auto; margin: 0; }
.aviso { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface-alt); font-size: 13px; margin: 10px 0; line-height: 1.4; }
.aviso.ok { border-color: var(--ok); } .aviso.erro { border-color: var(--err); background: #fbeceb; } .aviso.warn { border-color: var(--warn); }
.passos { display: flex; gap: 6px; margin: 0 0 16px; }
.passos span { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.passos span.on { background: var(--action); } .passos span.feito { background: var(--brand); }
.codigos { font-family: var(--mono); font-size: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; background: var(--surface-alt); padding: 12px; border-radius: var(--r-sm); }
.qr { display: block; width: 180px; height: 180px; margin: 10px auto; border-radius: var(--r-sm); background: #fff; }
.segredo { font-family: var(--mono); font-size: 12px; word-break: break-all; background: var(--surface-alt); padding: 8px; border-radius: var(--r-sm); }
.lista .card { padding: 12px 14px; }
.item { cursor: pointer; }
.item:active { background: var(--surface-alt); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13px; margin-top: 8px; }
.kv span:nth-child(odd) { color: var(--text3); } .kv span:nth-child(even) { font-family: var(--mono); text-align: right; }
.tabs { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; }
.tabs button { width: auto; margin: 0; padding: 7px 12px; font-size: 13px; background: var(--surface-alt); color: var(--text2); white-space: nowrap; }
.tabs button.on { background: var(--action); color: #fff; }
.toggle { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.toggle:last-child { border-bottom: 0; }
.toggle button { width: auto; margin: 0; padding: 7px 12px; font-size: 13px; }
.ev { font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; gap: 8px; }
.ev .meta { white-space: nowrap; }
.total { font-family: var(--mono); font-size: 32px; margin: 4px 0; }
.img-kyc { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--border); margin-top: 8px; }
nav#abas { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); display: flex; padding: 6px 4px calc(6px + var(--safe-b)); z-index: 5; }
nav#abas a { flex: 1; text-align: center; text-decoration: none; color: var(--text3); font-size: 10.5px; font-weight: 600; padding: 4px 0; position: relative; border-radius: var(--r-sm); }
nav#abas a .ic { display: block; font-size: 18px; line-height: 22px; }
nav#abas a.on { color: var(--action); }
nav#abas .badge { position: absolute; top: 0; right: 18%; background: var(--err); color: #fff; font-family: var(--mono); font-size: 10px; border-radius: 999px; padding: 1px 6px; font-weight: 500; }
#modal { position: fixed; inset: 0; background: rgba(9,3,13,.55); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
#modal .caixa { background: var(--surface); width: 100%; max-width: 720px; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 18px 18px calc(18px + var(--safe-b)); max-height: 90vh; overflow-y: auto; }
#modal h2 { margin-top: 0; }
#msg { position: fixed; top: calc(60px + var(--safe-t)); left: 16px; right: 16px; z-index: 30; padding: 12px 14px; border-radius: var(--r-sm); background: var(--dark); color: #fff; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
#msg.erro { background: var(--err); } #msg.ok { background: var(--ok); }
.entrar { max-width: 420px; margin: 8vh auto 0; }
.entrar .marca { text-align: center; margin-bottom: 24px; }
.entrar .marca img { height: 40px; }
.entrar .marca .t { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text3); margin-top: 8px; }
.dir { text-align: right; }
.chips { margin-top: 6px; gap: 4px; flex-wrap: wrap; }
.rodape-entrar { text-align: center; margin-top: 18px; }
.sep { display: flex; align-items: center; gap: 10px; color: var(--text3); font-size: 12px; margin: 14px 0; }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
@media (min-width: 721px) { main { padding-top: 24px; } }

/* atributo hidden vence qualquer display definido acima (modal, abas, msg) */
[hidden] { display: none !important; }