:root{
  --petroleo:#10343F; --petroleo-2:#1B4A5A; --tinta:#1D2730; --cinza:#5A6872; --linha:#D9E0E4;
  --fundo:#F7F8F6; --papel:#FFFFFF; --ambar:#E9A23B; --ambar-2:#C9841F; --ambar-claro:#FFF4DF;
  --alto:#B42318; --medio:#B54708; --baixo:#5A6872; --ok:#067647;
  --alto-bg:#FDECEA; --medio-bg:#FFF1E3; --baixo-bg:#EEF1F3; --ok-bg:#E6F4EA;
  --raio:8px; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--sans);color:var(--tinta);background:var(--fundo);line-height:1.55;font-size:16px}
body.tem-barra{padding-bottom:76px}
a{color:var(--petroleo-2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}
code{font-family:var(--mono);font-size:.92em}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h2{font-size:1.45rem}
h3{font-size:1.1rem}
p{margin:0 0 1em;max-width:72ch}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.estreito{max-width:640px}
.mini{font-size:.85rem;color:var(--cinza)}
.lead{font-size:1.1rem;color:#2A3842}
.rotulo{font-size:.9rem;font-weight:600;color:var(--ambar-2);margin-bottom:.4em}
.link{font-weight:500}
.inline{display:inline}

/* topo */
.topo{background:var(--petroleo);color:#fff}
.topo-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.marca{color:#fff;text-decoration:none;font-size:1.2rem;display:flex;align-items:center;gap:.5rem}
.logo{width:20px;height:20px;border-radius:50%;border:3px solid var(--ambar);position:relative;display:inline-block}
.logo::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ambar)}
.topo nav{display:flex;gap:1.4rem}
.topo nav a{color:#D5E1E7;text-decoration:none;font-size:.95rem;padding:.3rem 0;border-bottom:2px solid transparent}
.topo nav a:hover,.topo nav a[aria-current]{color:#fff;border-color:var(--ambar)}

/* botões */
.btn{display:inline-block;padding:.7rem 1.1rem;border-radius:var(--raio);font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font:inherit;font-weight:600;line-height:1.2;color:inherit;background:transparent}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--ambar);border-color:var(--ambar);color:var(--petroleo)}
.btn-pri:hover{background:var(--ambar-2);border-color:var(--ambar-2)}
.btn-pri:disabled{opacity:.6;cursor:wait}
.btn-sec{border-color:var(--petroleo-2);color:var(--petroleo-2);background:#fff}
.btn-sec:hover,.btn-sec.ativo{background:var(--petroleo);color:#fff;border-color:var(--petroleo)}
.btn-grande{width:100%;padding:.95rem 1.2rem;font-size:1.05rem;margin-top:14px}
.pill{display:inline-block;padding:.3em .7em;border-radius:999px;background:var(--baixo-bg);color:var(--cinza);font-size:.82rem;font-weight:600}
.caixa{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:24px}
.caixa .btn{display:block;text-align:center;margin-bottom:.6rem}

/* portal */
.portal-hero{background:var(--petroleo);color:#fff;padding:72px 0 64px}
.portal-hero h1{max-width:18ch;font-size:clamp(2rem,4.4vw,3.2rem)}
.portal-hero .lead{color:#D5E1E7;max-width:60ch;margin-bottom:1.6em}
.ferramentas{list-style:none;padding:0;margin:0;border-top:1px solid var(--linha)}
.ferramenta{display:grid;grid-template-columns:1fr 200px;gap:32px;padding:28px 0;border-bottom:1px solid var(--linha);align-items:start}
.ferramenta h3{font-size:1.25rem}
.ferramenta h3 a{color:var(--petroleo);text-decoration:none}
.ferramenta h3 a:hover{text-decoration:underline}
.ferramenta.em_breve h3{color:var(--cinza)}
.ferramenta-acao{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.ferramenta-acao .btn{width:100%;text-align:center}

/* blocos */
.bloco{padding:52px 0}
.bloco.alt{background:var(--papel);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.lista{padding-left:1.1em;margin:0}
.lista li{margin-bottom:.55em}

/* radar: envio é o herói */
.radar-hero{background:var(--papel);border-bottom:1px solid var(--linha);padding:56px 0}
.radar-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.radar-txt h1{max-width:22ch}
.passos-lista{padding-left:1.3em;margin:1.2em 0 .8em}
.passos-lista li{margin-bottom:.5em}
.envio{position:sticky;top:20px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-height:260px;border:2px dashed #9FB0BA;border-radius:12px;background:var(--fundo);cursor:pointer;text-align:center;padding:28px;transition:border-color .15s,background .15s}
.drop:hover,.drop.arrastando{border-color:var(--ambar-2);background:var(--ambar-claro)}
.drop.tem-arquivo{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop-ico{width:56px;height:56px;border-radius:50%;border:4px solid var(--ambar);position:relative;margin-bottom:.6rem}
.drop-ico::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--ambar)}
.drop-titulo{font-size:1.15rem;font-weight:600;color:var(--petroleo)}
.drop-sub{color:var(--cinza);font-size:.9rem}
.drop-nome{font-family:var(--mono);font-size:.9rem;color:var(--ok);font-weight:500;margin-top:.4rem}
.erro{background:var(--alto-bg);color:#7A1C12;padding:.6em .9em;border-radius:var(--raio);font-size:.92rem;margin:.8em 0 0}
.sucesso{background:var(--ok-bg);color:#05552F;padding:.6em .9em;border-radius:var(--raio);font-size:.95rem}
.glossario{margin:0}
.glossario dt{float:left;clear:left;width:70px;margin-top:.15em}
.glossario dd{margin:0 0 .9em 84px}

/* severidade e risco */
.sev{display:inline-block;font-size:.74rem;font-weight:700;padding:.18em .55em;border-radius:5px;line-height:1.3;white-space:nowrap}
.s-alto{background:var(--alto-bg);color:var(--alto)} .s-medio{background:var(--medio-bg);color:var(--medio)} .s-baixo{background:var(--baixo-bg);color:var(--baixo)}
.risco{display:inline-block;font-size:.74rem;font-weight:700;padding:.2em .6em;border-radius:5px;color:#fff;background:var(--baixo);white-space:nowrap}
.r-critico{background:var(--alto)} .r-alto{background:#D2491E} .r-medio{background:var(--medio)} .r-baixo{background:var(--baixo)} .r-nenhum{background:var(--ok)}
.n-alto{color:var(--alto);font-weight:700} .n-medio{color:var(--medio);font-weight:700} .n-baixo{color:var(--baixo);font-weight:600}

/* relatório */
.rel-cabeca{background:var(--papel);border-bottom:1px solid var(--linha);padding:44px 0 32px}
.aviso-exemplo{background:var(--ambar-claro);border-left:4px solid var(--ambar);padding:.6em .9em;border-radius:0 var(--raio) var(--raio) 0;max-width:none}
.kpis{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{border-radius:var(--raio);padding:14px 16px;background:var(--fundo);border-left:5px solid var(--linha)}
.kpi b{display:block;font-size:2rem;line-height:1;font-weight:600}
.kpi span{display:block;font-weight:600;margin-top:.3em}
.kpi small{color:var(--cinza)}
.kpi.alto{border-color:var(--alto)} .kpi.alto b{color:var(--alto)}
.kpi.medio{border-color:var(--medio)} .kpi.medio b{color:var(--medio)}
.kpi.baixo{border-color:var(--baixo)} .kpi.baixo b{color:var(--baixo)}
.kpi.ok{border-color:var(--ok)} .kpi.ok b{color:var(--ok)}
.kpi.neutro{border-color:var(--petroleo-2)} .kpi.neutro b{color:var(--petroleo)}

.comece{background:var(--ambar-claro);border-bottom:1px solid #F0D9AE}
.comece-lista{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.comece-lista li{background:var(--papel);border:1px solid #F0D9AE;border-radius:var(--raio);padding:18px}
.comece-cab{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.6em}
.comece-cab code{font-weight:500}
.acao{background:var(--fundo);border-left:3px solid var(--ambar);padding:.5em .8em;border-radius:0 6px 6px 0;font-size:.93rem}

.filtros{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:14px 0 18px;border-bottom:1px solid var(--linha);margin-bottom:10px;position:sticky;top:0;background:var(--fundo);z-index:5}
.filtros-grupo{display:flex;gap:6px}
.chip{font:inherit;font-size:.9rem;font-weight:500;padding:.45em .8em;border-radius:999px;border:1.5px solid var(--linha);background:#fff;color:var(--cinza);cursor:pointer}
.chip b{font-weight:700;margin-left:.3em}
.chip.ativo{border-color:var(--petroleo);color:var(--petroleo);background:#E8EFF2}
.chip[data-sev=alto].ativo{border-color:var(--alto);color:var(--alto);background:var(--alto-bg)}
.chip[data-sev=medio].ativo{border-color:var(--medio);color:var(--medio);background:var(--medio-bg)}
.filtro-sel,.filtro-busca{display:flex;flex-direction:column;font-size:.82rem;color:var(--cinza);gap:.25em}
.filtro-sel select,.filtro-busca input{font:inherit;font-size:.95rem;color:var(--tinta);padding:.45em .6em;border:1.5px solid var(--linha);border-radius:var(--raio);background:#fff;min-width:220px}
.filtro-res{margin-left:auto;font-size:.9rem;color:var(--cinza);align-self:center}

.fonte{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);margin:10px 0}
.fonte>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;flex-wrap:wrap}
.fonte>summary::-webkit-details-marker{display:none}
.fonte>summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--cinza);border-bottom:2px solid var(--cinza);transform:rotate(-45deg);transition:transform .15s;flex:none}
.fonte[open]>summary::before{transform:rotate(45deg)}
.fonte-nome{font-weight:500;font-size:.95rem}
.fonte-meta{margin-left:auto;display:flex;gap:.7rem;align-items:center;font-size:.9rem}
.fonte.ok{background:#F6FBF7}
.fonte>p{padding:0 16px 12px}
.achados{list-style:none;padding:0 16px 8px;margin:0}
.achado{padding:12px 0;border-top:1px solid var(--linha)}
.achado-cab{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.achado-linha{font-family:var(--mono);font-size:.85rem;color:var(--cinza);min-width:3.2em}
.achado-titulo{font-weight:500}
.achado-cat{margin-left:auto;font-size:.8rem;color:var(--cinza)}
.trecho{display:block;margin:.5em 0 0;white-space:pre-wrap;word-break:break-all;background:#0F2A34;color:#E6EEF2;padding:.5em .7em;border-radius:6px;font-size:.84rem}
.entenda{margin-top:.5em}
.entenda summary{cursor:pointer;color:var(--petroleo-2);font-size:.9rem;font-weight:500}
.entenda p{margin:.5em 0 0;font-size:.93rem}
.aviso{background:var(--ambar-claro);border:1px solid #F0D9AE;border-radius:var(--raio);padding:.6em 1em;margin-top:1em;font-size:.9rem}

.barra-acoes{position:fixed;left:0;right:0;bottom:0;background:var(--petroleo);color:#fff;box-shadow:0 -4px 20px rgba(16,52,63,.25);z-index:20}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.barra-info{font-size:.85rem;color:#C9D7DE}
.barra-info code{color:#fff}
.barra-btns{display:flex;gap:8px;flex-wrap:wrap}
.barra-acoes .btn-sec{background:transparent;color:#fff;border-color:#ffffff66}
.barra-acoes .btn-sec:hover{background:#ffffff1a}
.barra{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:12px}

/* formulários */
.form label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.8em}
.form input:not([type=checkbox]){display:block;width:100%;margin-top:.3em;padding:.6em .7em;border:1.5px solid #B9C6CF;border-radius:var(--raio);font:inherit}
.form .chk{display:flex;gap:.6em;align-items:flex-start;font-weight:500}
.form .chk input{margin-top:.25em}
.form .btn{width:100%}

/* tabelas e painel */
.tabela{width:100%;border-collapse:collapse;background:#fff;font-size:.9rem}
.tabela th,.tabela td{padding:.5em .7em;border-bottom:1px solid var(--linha);text-align:left;vertical-align:top}
.tabela th{font-size:.78rem;color:var(--cinza);font-weight:600}
.rolagem{overflow:auto;border:1px solid var(--linha);border-radius:var(--raio)}
.nowrap{white-space:nowrap}
.quebra{word-break:break-all}
.barras{display:flex;align-items:flex-end;gap:6px;height:160px;padding:10px 0 24px;border-bottom:1px solid var(--linha);margin-bottom:28px;overflow-x:auto}
.barra-dia{flex:1 0 22px;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;position:relative}
.barra-col{width:100%;max-width:38px;background:var(--petroleo-2);border-radius:4px 4px 0 0;min-height:2px}
.barra-dia span{position:absolute;bottom:-22px;font-size:.7rem;color:var(--cinza);white-space:nowrap}

/* rodapé */
.rodape{background:#0C2630;color:#A9BAC3;padding:30px 0;font-size:.9rem}
.rodape p{margin:0 0 .5em;max-width:none}

@media (max-width:880px){
  .radar-grid,.duas,.ferramenta{grid-template-columns:1fr;gap:28px}
  .envio{position:static}
  .kpis,.comece-lista{grid-template-columns:1fr 1fr}
  .topo nav{gap:.9rem}
  .fonte-meta{margin-left:0;width:100%}
  .achado-cat{margin-left:0;width:100%}
  .barra-in{height:auto;padding:10px 0;flex-direction:column;align-items:stretch}
  .barra-info{display:none}
  .barra-btns .btn{flex:1;text-align:center}
  body.tem-barra{padding-bottom:70px}
}
@media (max-width:520px){ .kpis,.comece-lista{grid-template-columns:1fr} .filtro-sel select,.filtro-busca input{min-width:0;width:100%} }