/* SICEP — identidade "tinta, papel e selo".
   Papel levemente quente, tinta quase preta, azul-marinho só para ação e seleção, vermelho-lacre só na marca e no
   selo. Linhas finas em vez de sombras; sombra apenas no que flutua (modal, menu, aviso). Títulos em serifa, como
   num documento; números tabulares; códigos em monoespaçada. Movimento curto e sóbrio (escala "produtiva"). */

@font-face { font-family: "Source Sans 3"; src: url(/assets/fonts/source-sans-3.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(/assets/fonts/source-sans-3-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/assets/fonts/source-serif-4.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url(/assets/fonts/source-code-pro-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url(/assets/fonts/source-code-pro-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --papel: #faf8f4; --folha: #fff; --papel-2: #f3f0ea;
  --tinta: #1a1f26; --tinta-2: #4a5260; --apagado: #6b7280;
  --linha: #e4e1da; --linha-forte: #d6d3cc; --borda-campo: #858b94;
  --marinho: #22324a; --marinho-2: #31466a; --marinho-claro: #e9edf3;
  --lacre: #7a2234;
  --ok: #1d6b3f; --ok-fundo: #e8f2ec; --ok-borda: #bfd9c8;
  --atencao: #8a5a00; --atencao-fundo: #fbf1dc; --atencao-borda: #e8d2a6;
  --perigo: #b3261e; --perigo-fundo: #fbeae8; --perigo-borda: #edc3bf;
  --info: #25577f; --info-fundo: #e7eff6; --info-borda: #c3d4e6;
  --neutro: #5b6472; --neutro-fundo: #eef0f2; --neutro-borda: #d5d9df;
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "Source Code Pro", ui-monospace, Menlo, monospace;
  --raio: 3px;
  --t-rapido: 70ms; --t-curto: 150ms; --t-medio: 240ms;
  --e-padrao: cubic-bezier(.2, 0, .38, .9); --e-entra: cubic-bezier(0, 0, .38, .9); --e-sai: cubic-bezier(.2, 0, 1, .9);
  /* nomes antigos, ainda usados em estilos embutidos nas telas */
  --ink: var(--tinta); --ink-2: var(--tinta-2); --muted: var(--apagado); --paper: var(--folha); --canvas: var(--papel);
  --rule: var(--linha-forte); --rule-soft: var(--linha); --teal: var(--marinho); --teal-soft: var(--marinho-claro);
  --red: var(--perigo); --red-soft: var(--perigo-fundo); --green: var(--ok); --green-soft: var(--ok-fundo);
  --amber: var(--atencao); --amber-soft: var(--atencao-fundo); --gray-soft: var(--neutro-fundo);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.5 var(--sans); color: var(--tinta); background: var(--papel); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--marinho); text-decoration: underline; text-decoration-color: #22324a40; text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
::selection { background: #22324a26; }

/* ---------- estrutura ---------- */
.layout { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
aside { background: var(--folha); border-right: 1px solid var(--linha); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { padding: 18px 20px 16px; border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.brand::before { content: ""; grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--lacre); box-shadow: inset 0 0 0 3px var(--folha), inset 0 0 0 4px #ffffff66; }
.brand b { font: 600 21px/1 var(--serif); letter-spacing: .06em; color: var(--tinta); }
.brand small { font-size: 12.5px; line-height: 1.3; color: var(--apagado); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav.side { padding: 8px 10px 16px; overflow-y: auto; flex: 1; }
nav.side .grp { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--apagado); font-weight: 600; padding: 16px 10px 5px; }
nav.side a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; margin: 1px 0; border-radius: var(--raio); color: var(--tinta-2); text-decoration: none; font-size: 14.5px; transition: background var(--t-rapido) var(--e-padrao), color var(--t-rapido) var(--e-padrao); }
nav.side a:hover { background: var(--papel); color: var(--tinta); }
nav.side a.on { background: var(--marinho-claro); color: var(--marinho); font-weight: 600; box-shadow: inset 3px 0 0 var(--marinho); }
nav.side .ico { width: 17px; height: 17px; flex: none; opacity: .7; }
nav.side a.on .ico { opacity: 1; }
.side-foot { padding: 12px 20px 14px; font-size: 12.5px; color: var(--apagado); border-top: 1px solid var(--linha); line-height: 1.4; }
.side-foot i { font-style: normal; color: var(--lacre); font-weight: 600; }

main { min-width: 0; }
header.top { background: var(--folha); border-bottom: 1px solid var(--linha); padding: 12px 32px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 5; }
header.top .crumbs { font-size: 12.5px; color: var(--apagado); letter-spacing: .01em; }
header.top h1 { margin: 1px 0 0; font: 600 23px/1.2 var(--serif); letter-spacing: -.005em; color: var(--tinta); }
header.top .meta { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 13.5px; color: var(--tinta-2); }
header.top .meta a { text-decoration: none; }
.avatar { width: 32px; height: 32px; border-radius: var(--raio); background: var(--marinho); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12.5px; letter-spacing: .04em; }
.content { padding: 24px 32px 64px; }
.content.entra { animation: surgir var(--t-curto) var(--e-entra); }
@keyframes surgir { from { opacity: 0; } }

/* ---------- blocos ---------- */
.card { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; }
.card h2 { margin: 0 0 12px; font: 600 18px/1.3 var(--serif); color: var(--tinta); }
.card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); }
.g-main { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
.mb { margin-bottom: 16px; }

/* indicadores: uma faixa única, com linhas finas entre os números (não uma grade de cartões) */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 16px; overflow: hidden; }
.kpis > .kpi, .kpis > .card.kpi { background: var(--folha); border: 0; border-radius: 0; padding: 14px 18px 15px; box-shadow: none; }
.kpi .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--apagado); font-weight: 600; }
.kpi .v { font: 600 25px/1.15 var(--serif); margin: 6px 0 3px; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.kpi .s { font-size: 13px; color: var(--tinta-2); }
a.kpi { display: block; color: inherit; text-decoration: none; transition: background var(--t-rapido) var(--e-padrao); }
a.kpi:hover { background: var(--papel); }
.kpi-alerta .v { color: var(--perigo); }
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* tabelas: livro-razão */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--apagado); font-weight: 600; padding: 8px 9px; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; }
td { padding: 7px 9px; border-bottom: 1px solid var(--linha); vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--papel); }
tr.sel td { background: var(--marinho-claro) !important; }
tfoot td { font-weight: 600; border-top: 1px solid var(--tinta-2); border-bottom: 3px double var(--linha-forte); }

/* situação: carimbo retangular com ponto, sempre com texto */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1.5; padding: 0 7px; border-radius: 2px; white-space: nowrap; font-weight: 600; border: 1px solid; letter-spacing: .01em; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.t-ok { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok-borda); }
.t-warn { background: var(--atencao-fundo); color: var(--atencao); border-color: var(--atencao-borda); }
.t-bad { background: var(--perigo-fundo); color: var(--perigo); border-color: var(--perigo-borda); }
.t-info { background: var(--info-fundo); color: var(--info); border-color: var(--info-borda); }
.t-mute { background: var(--neutro-fundo); color: var(--neutro); border-color: var(--neutro-borda); }
.t-info::before, .t-mute::before { border-radius: 1px; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--borda-campo); background: var(--folha); color: var(--tinta); border-radius: var(--raio); padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.3; text-decoration: none; transition: background var(--t-rapido) var(--e-padrao), border-color var(--t-rapido) var(--e-padrao); }
.btn:hover { background: var(--papel); border-color: var(--tinta-2); text-decoration: none; }
.btn.pri { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.btn.pri:hover { background: var(--marinho-2); border-color: var(--marinho-2); }
.btn.danger { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.btn.danger:hover { background: #971f18; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.sm { padding: 4px 10px; font-size: 13px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; align-items: center; }
.chip { border: 1px solid var(--linha-forte); background: var(--folha); border-radius: var(--raio); padding: 5px 11px; cursor: pointer; font-size: 13.5px; color: var(--tinta-2); text-decoration: none; transition: background var(--t-rapido), border-color var(--t-rapido); }
.chip:hover { border-color: var(--tinta-2); color: var(--tinta); text-decoration: none; }
.chip.on { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.filters input { margin-left: auto; border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 6px 10px; width: 280px; background: var(--folha); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pcard { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color var(--t-rapido) var(--e-padrao); }
.pcard:hover { border-color: var(--marinho); }
.pcard .top { display: flex; justify-content: space-between; align-items: center; }
.pcard .num { font: 600 17px var(--serif); }
.pcard .obj { color: var(--tinta-2); font-size: 14px; }
.pcard .row { display: flex; justify-content: space-between; font-size: 13px; }
.pcard .nota { font-size: 12.5px; color: var(--apagado); border-top: 1px solid var(--linha); padding-top: 6px; margin-top: 2px; }
.bar { height: 4px; background: var(--linha); border-radius: 0; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--marinho); transition: width var(--t-medio) var(--e-padrao); }

/* formulários */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form .full { grid-column: 1 / -1; }
.f label { display: block; font-size: 13px; color: var(--tinta-2); margin-bottom: 4px; font-weight: 600; }
.f input, .f select, .f textarea { width: 100%; border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 7px 10px; background-color: var(--folha); transition: border-color var(--t-rapido), box-shadow var(--t-rapido); }
.f input:focus, .f select:focus, .f textarea:focus, .filters input:focus, td select:focus { outline: none; border-color: var(--marinho); box-shadow: 0 0 0 3px #22324a24; }
.f textarea { min-height: 64px; resize: vertical; }
.f .hint { font-size: 12.5px; color: var(--apagado); margin-top: 3px; min-height: 16px; }
.f .hint.bad { color: var(--perigo); } .f .hint.warn { color: var(--atencao); }
.f.err input, .f.err select { border-color: var(--perigo); background: #fffafa; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.check input { accent-color: var(--marinho); }

.rules { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.rules li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linha); align-items: flex-start; }
.rules li:last-child { border: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; }
.d-ok { background: var(--ok); } .d-alerta { background: #c08a1e; } .d-bloqueio { background: var(--perigo); } .d-na { background: var(--linha-forte); }
.rules .id { font-family: var(--mono); font-size: 12px; color: var(--tinta-2); flex: none; width: 54px; }
.rules .msg { color: var(--apagado); display: block; font-size: 12.5px; }
.summary { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

/* avisos no fluxo da página: régua lateral, texto em tinta */
.banner { border-radius: var(--raio); padding: 10px 14px; font-size: 14px; margin-bottom: 16px; border: 1px solid; border-left-width: 3px; color: var(--tinta-2); }
.banner.bad { background: var(--perigo-fundo); border-color: var(--perigo-borda); border-left-color: var(--perigo); }
.banner.ok { background: var(--ok-fundo); border-color: var(--ok-borda); border-left-color: var(--ok); }
.banner.warn { background: var(--atencao-fundo); border-color: var(--atencao-borda); border-left-color: var(--atencao); }
.banner.info { background: var(--folha); border-color: var(--linha); border-left-color: var(--marinho); }
.banner b { color: var(--tinta); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linha-forte); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 12px; color: var(--tinta-2); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; font-weight: 600; font-size: 14px; }
.tabs a.on { color: var(--marinho); border-bottom-color: var(--marinho); }
.tabs a:hover { color: var(--tinta); }
.dhead { display: grid; grid-template-columns: repeat(5, auto); gap: 8px 32px; justify-content: start; margin-bottom: 16px; }
.dhead .l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--apagado); font-weight: 600; } .dhead .v { font: 600 17px var(--serif); }

.chain { display: flex; gap: 0; overflow-x: auto; padding: 4px 0 8px; }
.step { flex: 1; min-width: 124px; position: relative; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--folha); margin-right: 18px; font-size: 13px; }
.step:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; width: 12px; border-top: 1px solid var(--borda-campo); }
.step b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.step .d { color: var(--apagado); min-height: 34px; }
.step .tag { margin-top: 6px; }
.step.s-bad { border-color: var(--perigo-borda); border-top: 3px solid var(--perigo); } .step.s-warn { border-color: var(--atencao-borda); border-top: 3px solid #c08a1e; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.list li:last-child { border: 0; }
.list .sub { color: var(--apagado); font-size: 12.5px; display: block; margin-top: 1px; }
.list li a { text-decoration: none; }
.list li a:hover { text-decoration: underline; }
.muted { color: var(--apagado); } .small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px; margin-top: 10px; }
.inline-form .f { min-width: 120px; }
.split { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.docs a.card { display: block; color: inherit; text-decoration: none; }
.docs a.card:hover { border-color: var(--marinho); }

/* aviso passageiro: só depois de uma ação; some sozinho, pausa com o mouse em cima */
.toast { position: fixed; bottom: 22px; right: 22px; background: var(--tinta); color: #fff; padding: 11px 16px 11px 14px; border-radius: var(--raio); font-size: 14px; box-shadow: 0 8px 24px #1a1f2633; z-index: 50; border-left: 4px solid #6fb28b; max-width: 420px; animation: aviso-entra var(--t-curto) var(--e-entra); }
.toast.sai { opacity: 0; transform: translateY(6px); transition: opacity 110ms var(--e-sai), transform 110ms var(--e-sai); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(8px); } }

@media print {
  aside, header.top .meta, .tabs, .noprint { display: none !important; }
  .layout { display: block; } header.top { position: static; } body { background: #fff; }
}
.f label.check { display: flex; font-size: 14px; color: var(--tinta); font-weight: 400; margin-bottom: 6px; }
.f .check input { width: auto; margin: 0; }
.card:has(> table), .card:has(> div > table) { overflow-x: auto; }
td.mono { white-space: nowrap; }

/* ---------- login / MFA ---------- */
.user { display: flex; gap: 9px; align-items: center; line-height: 1.2; color: var(--tinta); }
.user small { display: block; color: var(--apagado); font-size: 12px; }
.auth { display: grid; grid-template-columns: minmax(300px, 42%) 1fr; min-height: 100vh; background: var(--papel); }
.auth-side { background: var(--folha); border-right: 1px solid var(--linha); padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between; color: var(--tinta-2); }
.auth-side b { font: 600 34px/1 var(--serif); letter-spacing: .06em; color: var(--tinta); display: flex; align-items: center; gap: 12px; }
.auth-side b::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--lacre); box-shadow: inset 0 0 0 3px var(--folha), inset 0 0 0 4px #ffffff66; }
.auth-side span { display: block; font-size: 14px; margin-top: 10px; color: var(--apagado); }
.auth-side p { font: 400 25px/1.4 var(--serif); color: var(--tinta); max-width: 440px; margin: 0; border-left: 3px solid var(--lacre); padding-left: 18px; }
.auth-side small { color: var(--apagado); font-size: 13px; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 14px; }
.auth-card { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 32px 34px; width: 100%; max-width: 440px; animation: surgir var(--t-medio) var(--e-entra); }
.auth-card h1 { margin: 0 0 6px; font: 600 25px/1.2 var(--serif); }
.auth-card > p { margin: 0 0 18px; color: var(--tinta-2); }
.auth-step { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--lacre); margin-bottom: 8px; font-weight: 600; }
.auth-form { display: grid; gap: 14px; }
.btn.wide { width: 100%; padding: 10px; }
.link { background: none; border: 0; padding: 0; color: var(--marinho); cursor: pointer; text-decoration: underline; font-size: inherit; }
.demo-hint { font-size: 13px; color: var(--tinta-2); background: var(--folha); border: 1px solid var(--linha); border-top: 3px solid var(--atencao); border-radius: var(--raio); padding: 10px 12px; max-width: 440px; width: 100%; text-align: center; }
.demo-hint .btn { margin: 2px; }
.otp { font-size: 26px !important; letter-spacing: 10px; text-align: center; font-family: var(--mono) !important; }
.auth-ol { padding-left: 20px; margin: 0 0 14px; font-size: 14.5px; }
.auth-ol li { margin-bottom: 8px; }
.qr { display: flex; justify-content: center; margin: 10px 0 6px; }
.qr svg { width: 180px; height: 180px; border: 1px solid var(--linha); border-radius: var(--raio); }
.secret { display: block; margin-top: 6px; background: var(--papel); border: 1px solid var(--linha); padding: 8px; border-radius: var(--raio); font-family: var(--mono); font-size: 13px; letter-spacing: 1px; word-break: break-all; }
.push-num { font: 600 66px/1 var(--serif); text-align: center; letter-spacing: 6px; margin: 14px 0 10px; color: var(--tinta); }
.push-wait { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--tinta-2); margin-bottom: 18px; }
.spin { width: 14px; height: 14px; border: 2px solid var(--linha-forte); border-top-color: var(--marinho); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-link { color: var(--tinta-2); } .auth-link:hover { color: var(--marinho); }
@media (max-width: 760px) { .auth { grid-template-columns: 1fr; } .auth-side { padding: 20px 16px; border-right: 0; border-bottom: 1px solid var(--linha); } .auth-side p { display: none; } .auth-side b { font-size: 26px; } }

/* ---------- abertura ---------- */
#splash { position: fixed; inset: 0; z-index: 100; background: var(--papel); color: var(--tinta); display: grid; place-items: center; cursor: pointer; transition: opacity 200ms var(--e-sai), visibility 200ms; padding: 16px; }
#splash.out { opacity: 0; visibility: hidden; }
.splash-inner { text-align: center; animation: surgir 300ms var(--e-entra) both; }
.splash-mark { display: block; margin: 0 auto 16px; }
.sm-anel { stroke: var(--lacre); stroke-dasharray: 176; stroke-dashoffset: 176; animation: draw .7s .1s var(--e-padrao) forwards; }
.sm-disco { fill: var(--lacre); transform-origin: 32px 32px; transform: scale(.6); opacity: 0; animation: selar .35s .55s var(--e-entra) forwards; }
.sm-check { stroke: #fff; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .3s .85s var(--e-padrao) forwards; }
.splash-name { font: 600 clamp(36px, 8vw, 48px)/1 var(--serif); letter-spacing: .12em; }
.splash-sub { font-size: clamp(13px, 3.4vw, 15.5px); color: var(--tinta-2); margin-top: 8px; }
.splash-bar { width: min(200px, 60vw); height: 2px; background: var(--linha); margin: 26px auto 14px; overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 0; background: var(--marinho); animation: load 1.5s .1s var(--e-padrao) forwards; }
.splash-tag { font: italic 400 15px var(--serif); color: var(--apagado); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes selar { to { transform: scale(1); opacity: 1; } }
@keyframes load { to { width: 100%; } }

/* ---------- responsivo ---------- */
.menu-btn, .nav-backdrop { display: none; }
.menu-btn { background: var(--folha); border: 1px solid var(--linha-forte); border-radius: var(--raio); width: 38px; height: 38px; font-size: 18px; cursor: pointer; flex: none; }
header.top .ttl { min-width: 0; }
header.top h1 { overflow-wrap: anywhere; }

@media (max-width: 1280px) {
  .g-main { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (max-width: 1080px) {
  .g-main { grid-template-columns: 1fr; }
  .dhead { grid-template-columns: repeat(3, auto); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  aside { position: fixed; left: 0; top: 0; bottom: 0; width: 268px; max-width: 84vw; z-index: 40; transform: translateX(-100%); transition: transform var(--t-medio) var(--e-padrao); }
  .layout.nav-open aside { transform: none; box-shadow: 8px 0 32px #1a1f2629; }
  .nav-backdrop { position: fixed; inset: 0; background: #1a1f2659; z-index: 30; }
  .layout.nav-open .nav-backdrop { display: block; animation: surgir var(--t-curto) var(--e-entra); }
  .menu-btn { display: grid; place-items: center; }
  header.top { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  header.top .meta { gap: 8px; }
  header.top .meta > span:first-child, .user > span:not(.avatar) { display: none; }
  header.top h1 { font-size: 20px; }
  .content { padding: 16px 16px 48px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .kpis, .kpis.k4, .kpis.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi .v { font-size: 21px; }
  .card { padding: 14px; }
  .card table { min-width: 620px; }
  .filters input { margin-left: 0; width: 100%; }
  .dhead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs a { white-space: nowrap; }
  .step { min-width: 132px; }
  .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
  .kpi .l, .kpi .s { font-size: 11.5px; }
  .kpis > .kpi, .kpis > .card.kpi { padding: 12px 14px; }
  .dhead { grid-template-columns: 1fr 1fr; }
  .split { flex-wrap: wrap; }
  .split > div:last-child { display: flex; gap: 8px; width: 100%; }
  .split > div:last-child .btn { flex: 1; }
  .cards { grid-template-columns: 1fr; }
  .auth-card { padding: 22px 18px; }
  .push-num { font-size: 52px; }
  .otp { letter-spacing: 6px; }
  .inline-form .f { flex: 1 1 100%; }
  .chip { font-size: 13px; }
}
.form > *, .grid > *, .g-main > * { min-width: 0; }
.f select { max-width: 100%; text-overflow: ellipsis; }

/* ---------- diálogos: entram em 200ms, saem em 110ms ---------- */
.mdl-backdrop { position: fixed; inset: 0; z-index: 90; background: #1a1f2666; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity 110ms var(--e-sai); }
.mdl-backdrop.in { opacity: 1; transition: opacity 200ms var(--e-entra); }
.mdl { background: var(--folha); border-radius: 4px; width: 100%; max-width: 480px; box-shadow: 0 24px 64px #1a1f2640, 0 2px 6px #1a1f261a; overflow: hidden; transform: translateY(8px); transition: transform 110ms var(--e-sai); border-top: 3px solid var(--marinho); }
.mdl-backdrop.in .mdl { transform: none; transition: transform 200ms var(--e-entra); }
.mdl-danger { border-top-color: var(--perigo); } .mdl-warn { border-top-color: #c08a1e; } .mdl-ok { border-top-color: var(--ok); }
.mdl-head { display: flex; gap: 12px; align-items: flex-start; padding: 20px 20px 0; }
.mdl-icon { width: 36px; height: 36px; border-radius: var(--raio); display: grid; place-items: center; flex: none; background: var(--marinho-claro); color: var(--marinho); }
.mdl-danger .mdl-icon { background: var(--perigo-fundo); color: var(--perigo); }
.mdl-warn .mdl-icon { background: var(--atencao-fundo); color: var(--atencao); }
.mdl-ok .mdl-icon { background: var(--ok-fundo); color: var(--ok); }
.mdl-titles { flex: 1; min-width: 0; padding-top: 1px; }
.mdl-titles h2 { margin: 0; font: 600 19px/1.3 var(--serif); }
.mdl-rule { display: inline-block; font-family: var(--mono); font-size: 12px; background: var(--neutro-fundo); color: var(--tinta-2); border: 1px solid var(--neutro-borda); border-radius: 2px; padding: 0 6px; margin-bottom: 5px; }
.mdl-danger .mdl-rule { background: var(--perigo-fundo); color: var(--perigo); border-color: var(--perigo-borda); }
.mdl-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--apagado); cursor: pointer; padding: 2px 6px; border-radius: var(--raio); }
.mdl-x:hover { background: var(--papel); color: var(--tinta); }
.mdl-body { padding: 12px 20px 4px 68px; font-size: 15px; color: var(--tinta-2); }
.mdl-body p { margin: 0 0 12px; }
.mdl-detail { margin-bottom: 12px; }
.mdl-card { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; display: grid; gap: 6px; color: var(--tinta); }
.mdl-cmp { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.mdl-cmp div { display: flex; justify-content: space-between; background: var(--folha); padding: 7px 12px; font-size: 14px; }
.mdl-cmp b { font-variant-numeric: tabular-nums; color: var(--tinta); } .mdl-cmp b.neg { color: var(--perigo); }
.mdl-body .f textarea { min-height: 84px; }
.mdl-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 16px; background: var(--papel); border-top: 1px solid var(--linha); margin-top: 8px; }
@media (max-width: 560px) {
  .mdl-backdrop { place-items: end center; padding: 0; }
  .mdl { max-width: none; border-radius: 6px 6px 0 0; transform: translateY(24px); }
  .mdl-body { padding-left: 20px; }
  .mdl-foot { flex-direction: column-reverse; } .mdl-foot .btn { width: 100%; padding: 10px; }
}

/* ---------- custos e prazos ---------- */
.cst-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
th.cst-on, td.cst-on { background: var(--marinho-claro); font-weight: 600; }
tr.cst-grp td { background: var(--papel); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--apagado); font-weight: 600; padding: 6px 10px; }
.gantt { display: grid; gap: 6px; overflow-x: auto; }
.gantt-row, .gantt-scale { display: grid; grid-template-columns: 230px minmax(360px, 1fr); gap: 12px; align-items: center; }
.gantt-row > span b { display: block; font-size: 14px; font-weight: 600; }
.gantt-row > span small { color: var(--apagado); font-size: 12.5px; }
.gantt-row > div, .gantt-scale > div { position: relative; height: 24px; background: var(--papel); border: 1px solid var(--linha); border-radius: 2px; }
.gantt-scale > div { height: 18px; background: none; border: 0; }
.gantt-scale i { position: absolute; font-style: normal; font-size: 11.5px; color: var(--apagado); transform: translateX(-2px); white-space: nowrap; }
.gb { position: absolute; top: 3px; bottom: 3px; border-radius: 1px; background: var(--marinho); }
.gb0 { background: #8a93a0; } .gb1 { background: #22324a; } .gb2 { background: #3e5a82; } .gb3 { background: #1d6b3f; } .gb4 { background: #8a5a00; } .gb5 { background: #7a2234; }
.gantt-ms > div { background: none; border: 0; }
.ms { position: absolute; top: 5px; width: 12px; height: 12px; background: var(--lacre); transform: rotate(45deg); }
@media (max-width: 900px) { .cst-form { grid-template-columns: 1fr 1fr; } .gantt-row, .gantt-scale { grid-template-columns: 150px minmax(300px, 1fr); } }

/* campo monetário com prefixo R$ */
.money { position: relative; }
.money span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--apagado); font-size: 14px; pointer-events: none; }
.f .money input { padding-left: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Sentinela ---------- */
.s-fontes { display: grid; gap: 8px; margin-top: 12px; }
.s-fontes .check { align-items: baseline; flex-wrap: wrap; }
.s-item { border: 1px solid var(--linha); border-left: 3px solid var(--linha-forte); border-radius: var(--raio); padding: 12px 14px; margin: 10px 0; background: var(--folha); }
.s-direta { border-left-color: var(--perigo); } .s-impacto { border-left-color: #c08a1e; } .s-filtrado { border-left-color: var(--linha-forte); }
.s-item h4 { margin: 6px 0 2px; font: 600 16px/1.35 var(--serif); }
.s-item h4 a { text-decoration: none; color: var(--tinta); } .s-item h4 a:hover { color: var(--marinho); text-decoration: underline; }
.s-top { display: flex; gap: 4px; flex-wrap: wrap; }
.s-trecho { font-size: 14px; color: var(--tinta-2); margin: 8px 0; overflow-wrap: anywhere; }
.s-trecho mark { background: #f3e2b3; color: inherit; padding: 0 2px; border-radius: 1px; }
.s-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.s-act select { border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 4px 8px; font-size: 13px; max-width: 100%; background-color: var(--folha); }
.s-filt summary { cursor: pointer; margin-top: 18px; }
.s-filtros { margin-bottom: 4px; }
.s-per { max-width: none; grid-template-columns: 1fr 1fr 2fr; }
@media (max-width: 700px) { .s-per { grid-template-columns: 1fr 1fr; } .s-per > :last-child { grid-column: 1 / -1; } }
.s-filtros select { border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 5px 10px; font-size: 13.5px; background-color: var(--folha); max-width: 100%; }
.s-logf summary { cursor: pointer; font-size: 14px; padding: 6px 0; }
.s-logf .list { max-height: 220px; overflow-y: auto; }
@media (max-width: 900px) { .s-fontes .check span { flex-basis: 100%; } }
.s-run { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; background: var(--papel); }
.s-run-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.s-run-f { display: grid; grid-template-columns: 72px minmax(80px, 1fr) 50px minmax(0, 2fr); gap: 10px; align-items: center; padding: 5px 0; font-size: 13.5px; }
.s-run-f .bar { height: 4px; }
.spin-w { border-color: #ffffff55; border-top-color: #fff; display: inline-block; vertical-align: -2px; }
@media (max-width: 560px) { .s-run-f { grid-template-columns: 64px 1fr 44px; } .s-run-f > :last-child { grid-column: 1 / -1; } }

/* ---------- multi-cliente / administração ---------- */
.troca-cli { border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 5px 8px; font-size: 13px; max-width: 220px; background-color: var(--folha); }
a.user { color: inherit; text-decoration: none; }
a.user:hover .avatar { box-shadow: 0 0 0 2px var(--folha), 0 0 0 3px var(--marinho); }
.vazio { text-align: center; padding: 36px 18px; }
.vazio p { color: var(--tinta-2); margin: 0 0 14px; }
.demo-contas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.demo-contas .chip { font-size: 13px; padding: 4px 10px; background: var(--folha); }
.card-form { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-top: 12px; background: var(--papel); }
td.acoes { white-space: nowrap; text-align: right; }
td select { border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 4px 6px; font-size: 13px; background-color: var(--folha); }
.filters .btn.pri { margin-left: 8px; }
@media (max-width: 900px) { .card-form .form { grid-template-columns: 1fr 1fr !important; } td.acoes { white-space: normal; } .troca-cli { max-width: 140px; } }
@media (max-width: 560px) { .card-form .form { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) {
  header.top .meta { flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
  header.top .meta .troca-cli { max-width: 100%; flex: 1 1 160px; }
}
.aud-pre { font-family: var(--mono); font-size: 12px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 520px; margin: 6px 0 0; }
.ct-msg { white-space: pre-wrap; margin: 12px 0 8px; font-size: 15px; }
.ct-lgpd { border-left: 3px solid var(--perigo); }

/* régua do ciclo da emenda no dossiê */
.ciclo-card { padding: 14px 16px; }
.ciclo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; counter-reset: c; }
.ciclo li { position: relative; text-align: center; padding: 0 4px; }
.ciclo li::before { content: ""; position: absolute; top: 13px; left: -50%; right: 50%; height: 2px; background: var(--linha-forte); z-index: 0; }
.ciclo li:first-child::before { display: none; }
.ciclo li.feito::before, .ciclo li.atual::before, .ciclo li.erro::before { background: var(--marinho); }
.ciclo .pt { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 6px; font-size: 13px; font-weight: 600; background: var(--folha); border: 2px solid var(--linha-forte); color: var(--apagado); }
.ciclo li.feito .pt { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.ciclo li.atual .pt { background: var(--folha); border-color: var(--marinho); color: var(--marinho); box-shadow: 0 0 0 4px var(--marinho-claro); }
.ciclo li.erro .pt { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.ciclo b { display: block; font-size: 13px; color: var(--tinta-2); font-weight: 600; }
.ciclo li.atual b { color: var(--marinho); }
.ciclo small { display: block; font-size: 11.5px; color: var(--apagado); line-height: 1.25; margin-top: 2px; }

/* painel: carteira por fase */
.funil { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1px; margin-top: 14px; background: var(--linha); border: 1px solid var(--linha); }
.fu { display: block; text-decoration: none; color: inherit; padding: 10px 12px; background: var(--folha); border-top: 3px solid var(--marinho); transition: background var(--t-rapido); }
.fu:hover { background: var(--papel); text-decoration: none; }
.fu.zero { border-top-color: var(--linha-forte); }
.fu.zero .fu-n, .fu.zero b { color: var(--apagado); }
.fu.fu-fim { border-top-color: var(--ok); }
.fu-n { display: block; font: 600 24px/1.1 var(--serif); }
.fu b { display: block; font-size: 13px; margin-top: 2px; }
.fu small { display: block; font-size: 12px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* cartão da carteira: minirrégua de fase */
.minifase { display: flex; align-items: center; gap: 3px; margin: 2px 0; }
.minifase i { flex: 1; height: 4px; background: var(--linha); max-width: 22px; }
.minifase i.feito { background: #8e9bb0; } .minifase i.atual { background: var(--marinho); } .minifase i.erro { background: var(--perigo); }
.minifase span { margin-left: 8px; font-size: 12px; color: var(--marinho); font-weight: 600; white-space: nowrap; }

@media (max-width: 1080px) { .funil { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ciclo { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .ciclo li:nth-child(5)::before { display: none; }
  .funil { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .ciclo small { display: none; } .funil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- B.I. (cores de série validadas para leitura de gráfico) ---------- */
:root { --serie-1: #2a78d6; --serie-1-clara: #b7d3f6; --serie-2: #eb6834; }
.bi-sub { margin: -6px 0 14px; }
.bi-barras { display: grid; gap: 8px; }
.bi-lin { display: grid; grid-template-columns: minmax(90px, 32%) 1fr 80px; gap: 10px; align-items: center; font-size: 14px; padding: 2px 0; border-radius: 2px; }
.bi-lin:hover, .bi-lin:focus { background: var(--papel); outline: none; }
.bi-rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-2); }
.bi-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; font-size: 13px; }
.bi-trilho { height: 12px; display: block; }
.bi-trilho > i { display: block; height: 100%; background: var(--serie-1); border-radius: 0 2px 2px 0; }
.bi-trilho > b { display: block; height: 100%; background: var(--serie-1-clara); border-radius: 0 2px 2px 0; overflow: hidden; }
.bi-trilho > b > i { display: block; height: 100%; background: var(--serie-1); border-right: 2px solid #fff; }
.bi-colunas { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 210px; align-items: end; padding: 18px 0 20px 0; margin: 8px 0 0 58px; }
.bi-eixo { position: absolute; left: 0; right: 0; top: 18px; bottom: 20px; pointer-events: none; }
.bi-grade { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--linha-forte); }
.bi-grade em { position: absolute; right: 100%; transform: translate(-6px, -50%); font-style: normal; font-size: 11px; color: var(--apagado); white-space: nowrap; }
.bi-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-radius: 2px; border-bottom: 1px solid var(--linha-forte); }
.bi-col:hover, .bi-col:focus { background: var(--papel); outline: none; }
.bi-col > i { position: relative; width: 70%; max-width: 34px; background: var(--serie-1); border-radius: 2px 2px 0 0; min-height: 0; }
.bi-col > small { position: absolute; bottom: -18px; font-size: 11px; color: var(--apagado); }
.bi-rotcol { font-style: normal; position: absolute; left: 50%; transform: translate(-50%, -100%); margin-top: -3px; font-size: 11px; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.bi-pilha { display: flex; height: 22px; gap: 2px; margin: 4px 0 10px; }
.bi-pilha i { display: block; height: 100%; }
.bi-pilha i:first-child { border-radius: 2px 0 0 2px; } .bi-pilha i:last-child { border-radius: 0 2px 2px 0; }
.s1 { background: var(--serie-1); } .s2 { background: var(--serie-2); }
.bi-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tinta-2); }
.bi-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.bi-legenda i { width: 10px; height: 10px; border-radius: 1px; display: inline-block; }
.bi-mini { display: inline-block; width: 70px; height: 6px; background: var(--linha); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.bi-mini i { display: block; height: 100%; background: var(--serie-1); }
.bi-tab { margin-top: 12px; } .bi-tab summary { cursor: pointer; color: var(--marinho); }
.bi-tip { position: fixed; z-index: 60; display: none; background: var(--tinta); color: #fff; font-size: 13px; line-height: 1.45; padding: 7px 10px; border-radius: var(--raio); pointer-events: none; box-shadow: 0 6px 18px #1a1f2633; max-width: 280px; }
@media (max-width: 560px) { .bi-lin { grid-template-columns: 38% 1fr 64px; } .bi-colunas { margin-left: 46px; height: 170px; gap: 3px; } .bi-col:nth-child(odd) > small { visibility: hidden; } }

/* ---------- valores fora da prestação e regularidade ---------- */
.neg { color: var(--perigo); }
td.pos { color: var(--ok); }
.cat-sel { border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 3px 4px; font-size: 13px; background-color: var(--folha); max-width: 180px; }
.mov-form { grid-template-columns: 1.3fr 1fr 1fr; align-items: end; }
.mov-form .mov-hist { grid-column: 1 / 3; }
.reg-tab td { vertical-align: top; }
.reg-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reg-acoes .btn { white-space: nowrap; }
.reg-tab .tag { white-space: normal; }
.reg-tab td.nw { white-space: nowrap; }
.reg-tab td:first-child { min-width: 180px; }
@media (max-width: 700px) { .mov-form { grid-template-columns: 1fr 1fr; } .mov-form .mov-hist { grid-column: 1 / -1; } }

/* quem pede menos movimento: sem deslocamento nem escala, só troca direta */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .mdl, .mdl-backdrop.in .mdl, .toast.sai { transform: none !important; }
}

/* ---------- campos de escolha ---------- */
/* select nativo: seta própria, mesma altura dos demais campos */
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234a5260' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px; padding-right: 30px !important; cursor: pointer; }
select:hover { border-color: var(--tinta-2) !important; }
/* escolha com busca (escolha.js): o select fica escondido, mas continua no formulário */
.esc { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.f .esc, .esc-s-vinc { display: block; }
.esc-nativo { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; width: 100% !important; }
.esc-bt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 7px 10px; background: var(--folha); color: var(--tinta); cursor: pointer; text-align: left; font-size: inherit; transition: border-color var(--t-rapido) var(--e-padrao), box-shadow var(--t-rapido) var(--e-padrao); }
.esc-bt span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-bt svg { flex: none; color: var(--tinta-2); transition: transform var(--t-curto) var(--e-padrao); }
.esc-bt:hover { border-color: var(--tinta-2); }
.esc-bt.vazio span { color: var(--apagado); }
.esc-bt:disabled { opacity: .5; cursor: not-allowed; }
.esc.aberta .esc-bt { border-color: var(--marinho); box-shadow: 0 0 0 3px #22324a24; }
.esc.aberta .esc-bt svg { transform: rotate(180deg); }
.filters .esc-bt, td .esc-bt, .s-act .esc-bt, .esc-troca-cli .esc-bt { min-height: 0; padding: 5px 9px; font-size: 13.5px; }
.esc-troca-cli { max-width: 240px; }
.esc-s-vinc .esc-bt { max-width: 340px; }
.esc-caixa { position: fixed; z-index: 95; background: var(--folha); border: 1px solid var(--linha-forte); border-radius: 4px; padding: 6px; box-shadow: 0 12px 32px #1a1f2629, 0 2px 6px #1a1f2614; max-width: calc(100vw - 16px); animation: esc-entra var(--t-curto) var(--e-entra); }
.esc-caixa.acima { animation-name: esc-entra-acima; }
.esc-caixa.sai { opacity: 0; transition: opacity 110ms var(--e-sai); }
@keyframes esc-entra { from { opacity: 0; transform: translateY(-4px); } }
@keyframes esc-entra-acima { from { opacity: 0; transform: translateY(4px); } }
.esc-busca { width: 100%; border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 7px 9px; margin-bottom: 6px; background: var(--papel); font-size: 14px; }
.esc-busca:focus { outline: none; border-color: var(--marinho); background: var(--folha); }
.esc-lista { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.esc-lista li { padding: 7px 9px; border-radius: 2px; cursor: pointer; font-size: 14px; line-height: 1.35; }
.esc-lista li.ativo { background: var(--marinho-claro); }
.esc-lista li[aria-selected="true"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--marinho); }
.esc-lista li.vazio { color: var(--apagado); }
.esc-lista li.novo { color: var(--marinho); font-weight: 600; border-top: 1px solid var(--linha); }
.esc-lista mark { background: #f3e2b3; color: inherit; padding: 0 1px; }
.esc-nada { padding: 10px 9px; color: var(--apagado); font-size: 14px; }

/* fornecedores */
.dados { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.dados dt { color: var(--apagado); } .dados dd { margin: 0; }
.surge { animation: surgir var(--t-medio) var(--e-entra); }

/* B.I.: fluxos */
.bi-sep { width: 1px; height: 22px; background: var(--linha-forte); margin: 0 6px; }
a.bi-lin { color: inherit; text-decoration: none; cursor: pointer; }
a.bi-lin:hover .bi-rot { color: var(--marinho); text-decoration: underline; }
.fx-caixa { overflow-x: auto; margin: 6px 0 10px; }
.fx, .cx { display: block; width: 100%; min-width: 700px; height: auto; }
.fx-l { opacity: .3; transition: opacity var(--t-curto) var(--e-padrao); animation: fx-entra .5s var(--e-entra) both; }
.fx-l:hover { opacity: .62; }
.fx-n { animation: surgir .3s var(--e-entra) both; }
.fx-rot { font: 600 13px var(--sans); fill: var(--tinta); paint-order: stroke; stroke: var(--folha); stroke-width: 4px; stroke-linejoin: round; }
.fx-val { font: 400 12px var(--sans); fill: var(--apagado); }
@keyframes fx-entra { from { opacity: 0; } }
.cx-e { fill: var(--serie-1); } .cx-s { fill: var(--serie-2); }
.cx-e, .cx-s { transform-box: fill-box; animation: cx-cresce .45s var(--e-entra) both; }
.cx-e { transform-origin: bottom; } .cx-s { transform-origin: top; }
@keyframes cx-cresce { from { transform: scaleY(0); } }
.cx-m:hover rect:first-child, .cx-m:focus rect:first-child { fill: var(--papel); }
.cx-m:focus { outline: none; }
.cx-zero { stroke: var(--tinta-2); stroke-width: 1; }
.cx-mes, .cx-y { font: 400 12px var(--sans); fill: var(--apagado); }

/* ---------- Sentinela (v3): varredura, resultados em abas com paginação, histórico ---------- */
.s-varr-g { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.s-rot { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--apagado); font-weight: 600; margin-bottom: 6px; }
.s-periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-periodo input { border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 6px 9px; background: var(--folha); }
.s-chips { display: inline-flex; gap: 6px; margin-left: 6px; flex-wrap: wrap; }
.s-fontes-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.s-fonte { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 9px 12px; background: var(--folha); cursor: pointer; transition: border-color var(--t-rapido), background var(--t-rapido); }
.s-fonte b { display: block; font-size: 14.5px; } .s-fonte small { display: block; font-size: 12.5px; color: var(--apagado); line-height: 1.25; }
.s-fonte:hover { border-color: var(--tinta-2); }
.s-chk { width: 16px; height: 16px; border: 1.5px solid var(--borda-campo); border-radius: 2px; flex: none; display: grid; place-items: center; transition: background var(--t-rapido), border-color var(--t-rapido); }
.s-fonte.on { border-color: var(--marinho); background: var(--marinho-claro); }
.s-fonte.on .s-chk { background: var(--marinho); border-color: var(--marinho); }
.s-fonte.on .s-chk::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.s-fonte:disabled { opacity: .5; cursor: not-allowed; }
.s-opcoes { display: flex; gap: 10px 24px; flex-wrap: wrap; align-items: center; margin-top: 14px; font-size: 14px; }
.s-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.s-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.s-sw { width: 34px; height: 20px; border-radius: 10px; background: var(--linha-forte); position: relative; flex: none; transition: background var(--t-curto) var(--e-padrao); }
.s-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #1a1f2633; transition: transform var(--t-curto) var(--e-padrao); }
.s-switch input:checked + .s-sw { background: var(--marinho); }
.s-switch input:checked + .s-sw::after { transform: translateX(14px); }
.s-switch input:focus-visible + .s-sw { outline: 2px solid var(--marinho); outline-offset: 2px; }
.s-switch .small { font-weight: 400; }
.s-secao { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); }
.s-secao select { border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 4px 8px; font-size: 13.5px; background-color: var(--folha); }
.s-run-bt { padding: 11px 18px; font-size: 15px; white-space: nowrap; }
.s-ultima { font-size: 13px; color: var(--apagado); margin-top: 12px; }
.s-run { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; background: var(--papel); margin-top: 14px; animation: surgir var(--t-curto) var(--e-entra); }
.s-run-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.s-run-h .btn { margin-left: auto; }
.s-run-n { font-size: 13.5px; color: var(--tinta-2); } .s-run-n b { font: 600 17px var(--serif); color: var(--tinta); }
.s-pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--marinho); box-shadow: 0 0 0 0 #22324a66; animation: pulso 1.4s ease-out infinite; flex: none; }
@keyframes pulso { 70% { box-shadow: 0 0 0 9px #22324a00; } 100% { box-shadow: 0 0 0 0 #22324a00; } }
.s-bar-viva { height: 6px; margin: 10px 0 12px; }
.s-bar-viva i { background-color: var(--marinho); background-image: linear-gradient(45deg, #ffffff33 25%, transparent 25%, transparent 50%, #ffffff33 50%, #ffffff33 75%, transparent 75%); background-size: 14px 14px; animation: listras .7s linear infinite; transition: width .3s var(--e-padrao); }
@keyframes listras { to { background-position: 14px 0; } }
.s-run-fs { display: grid; gap: 2px; }
.s-run-f .s-bar-viva { margin: 0; height: 4px; }
.s-run-f.fim .s-bar-viva i { background-image: none; background-color: var(--ok); animation: none; }
.s-kpis { margin: 16px 0 10px; }
.s-kpi { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; transition: background var(--t-rapido); }
.s-kpi:hover { background: var(--papel) !important; }

.s-tempo { display: flex; gap: 2px; height: 58px; align-items: stretch; margin: 6px 0 2px; }
.s-dia { flex: 1; min-width: 0; background: none; border: 0; padding: 0 1px; cursor: pointer; border-radius: 2px; display: flex; }
.s-dia:disabled { cursor: default; }
.s-dia:not(:disabled):hover, .s-dia.sel { background: var(--marinho-claro); }
.s-dia.sel { box-shadow: inset 0 -2px 0 var(--marinho); }
.s-dia-b { display: flex; flex-direction: column-reverse; width: 100%; height: 100%; }
.s-dia-b i { display: block; width: 100%; transform-origin: bottom; animation: cx-cresce .4s var(--e-entra) both; }
.s-dia-b .d { background: var(--perigo); } .s-dia-b .im { background: #c08a1e; } .s-dia-b .f { background: var(--linha-forte); }
.s-tempo-eixo { display: flex; justify-content: space-between; font-size: 12px; color: var(--apagado); }
.s-abas { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--linha-forte); margin: 14px 0 12px; overflow-x: auto; scrollbar-width: none; }
.s-abas button { background: none; border: 0; padding: 9px 12px; font: 600 14px var(--sans); color: var(--tinta-2); cursor: pointer; white-space: nowrap; transition: color var(--t-rapido); }
.s-abas button:hover { color: var(--tinta); }
.s-abas button b { display: inline-block; min-width: 22px; text-align: center; font-size: 12px; background: var(--neutro-fundo); border-radius: 10px; padding: 0 6px; margin-left: 4px; transition: background var(--t-curto), color var(--t-curto); }
.s-abas button.on { color: var(--marinho); }
.s-abas button.on b { background: var(--marinho); color: #fff; }
.s-ind { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--marinho); width: 0; transition: transform var(--t-medio) var(--e-padrao), width var(--t-medio) var(--e-padrao); }
.s-lista .s-item { animation: s-entra .26s var(--e-entra) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes s-entra { from { opacity: 0; transform: translateY(6px); } }
.s-meta { font-size: 13px; color: var(--apagado); }
.s-trecho.recolhido { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s-mais { font-size: 13px; margin: -4px 0 8px; display: inline-block; }
.s-motivo { font-size: 12.5px; color: var(--apagado); }
.s-vazio { text-align: center; padding: 26px 16px; border: 1px dashed var(--linha-forte); border-radius: var(--raio); color: var(--tinta-2); margin: 8px 0; }
.s-pag { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); }
.s-pag-bts { display: flex; gap: 4px; align-items: center; }
.s-pag-n { min-width: 32px; height: 32px; border: 1px solid var(--linha-forte); border-radius: var(--raio); background: var(--folha); cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--tinta-2); transition: background var(--t-rapido), border-color var(--t-rapido); }
.s-pag-n:hover:not(:disabled) { border-color: var(--tinta-2); color: var(--tinta); }
.s-pag-n.on { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.s-pag-n:disabled { opacity: .4; cursor: default; }
.s-pag-gap { color: var(--apagado); padding: 0 2px; }
.s-hist { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.s-hist-i { width: 100%; text-align: left; display: grid; gap: 3px; border: 1px solid var(--linha); border-radius: var(--raio); padding: 9px 11px; margin-bottom: 6px; background: var(--folha); cursor: pointer; font: inherit; color: inherit; transition: border-color var(--t-rapido), background var(--t-rapido); }
.s-hist-i:hover { border-color: var(--tinta-2); }
.s-hist-i.on { border-color: var(--marinho); background: var(--marinho-claro); box-shadow: inset 3px 0 0 var(--marinho); }
.s-hist-i.carregando { opacity: .55; cursor: progress; }
.s-hist-q { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.s-hist-n { display: flex; gap: 6px; font-size: 12.5px; font-weight: 600; }
.s-hist-n span { padding: 0 6px; border-radius: 2px; background: var(--neutro-fundo); color: var(--neutro); }
.s-hist-n .d { background: var(--perigo-fundo); color: var(--perigo); } .s-hist-n .im { background: var(--atencao-fundo); color: var(--atencao); } .s-hist-n .nv { background: var(--ok-fundo); color: var(--ok); }
.s-esqueleto { display: grid; gap: 8px; }
.s-esqueleto i { display: block; height: 54px; border-radius: var(--raio); background: linear-gradient(90deg, var(--papel) 0%, var(--papel-2) 50%, var(--papel) 100%); background-size: 200% 100%; animation: brilho 1.2s linear infinite; }
@keyframes brilho { to { background-position: -200% 0; } }
.s-det > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.s-det > summary::-webkit-details-marker { display: none; }
.s-det > summary h2 { margin: 0; }
.s-det > summary::after { content: ""; width: 8px; height: 8px; border: solid var(--tinta-2); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform var(--t-curto) var(--e-padrao); flex: none; margin-left: auto; }
.s-det[open] > summary::after { transform: rotate(-135deg); }
.s-det[open] > summary { margin-bottom: 12px; }
.s-exp { display: flex; gap: 6px; flex-wrap: wrap; }
.s-hist-aviso { margin: 12px 0 0; }
@media (max-width: 900px) { .s-varr-g { grid-template-columns: 1fr; } .s-run-bt { width: 100%; } .s-tempo { height: 44px; } }
@media (max-width: 560px) {
  .s-fontes-g { grid-template-columns: 1fr 1fr; } .s-fonte { padding: 8px 9px; gap: 8px; } .s-fonte small { font-size: 11.5px; }
  .s-switch { flex-wrap: wrap; } .s-switch .small { flex-basis: 100%; padding-left: 42px; margin-top: -2px; }
}