/* =========================================================================
MetaSus — Design System
Identidade Meta Sustentável: teal sóbrio + acento lima, semáforo de risco
isolado nos dados. Tokens em :root e html[data-theme="dark"].
Referência visual: mockup aprovado (2026-10-28).
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');
/* ============ Tokens — tema claro ============ */
:root{
--bg:#EDF2F0; --surface:#FFFFFF; --surface-2:#F5F8F7; --surface-3:#EEF3F1;
--ink:#10211C; --ink-2:#475750; --ink-3:#71817A;
--line:#E0E8E4; --line-strong:#CDD9D3;
--brand:#0E6E62; --brand-700:#0A564D; --brand-050:#E2F0ED; --brand-100:#CDE6E0;
--accent:#8CBB1E; --accent-ink:#3B5205;
--navy:#0B2E6E; --cyan:#0C93B4;
/* Semáforo de risco (só nos dados) */
--r1:#2E9E6B; --r2:#8DBE3C; --r3:#E6AE07; --r4:#E8792B; --r5:#D23B34;
/* Aliases semânticos usados pelos badges legados */
--verde:var(--r1); --verde-claro:var(--r2); --amarelo:var(--r3);
--laranja:var(--r4); --vermelho:var(--r5); --perigo:#b91c1c;
--azul:var(--brand);
/* Aliases legados (telas antigas / estilos inline) */
--borda:var(--line); --texto:var(--ink); --texto-suave:var(--ink-3);
--fundo:var(--bg); --azul-escuro:var(--brand-700);
--shadow-sm:0 1px 2px rgba(16,33,28,.06);
--shadow-md:0 10px 30px -12px rgba(16,33,28,.22);
--rail:linear-gradient(185deg,#0E6E62 0%,#0B4F52 55%,#0B2E6E 140%);
--heat:#C8372F; --cool:#0E7C8C; --neutro:#E9EEEC; --bom:#1F7A4F; --ruim:#B42F28;
--radius:14px;
}
/* ============ Tokens — tema escuro ============ */
html[data-theme="dark"]{
--bg:#09120F; --surface:#0F1E19; --surface-2:#13241E; --surface-3:#172b24;
--ink:#E9F1ED; --ink-2:#A6B7B0; --ink-3:#7A8A83;
--line:#1E302A; --line-strong:#2B3E37;
--brand:#38BAA4; --brand-700:#2C9B8A; --brand-050:#113029; --brand-100:#17413a;
--accent:#A9D63A; --accent-ink:#DCF0A6;
--navy:#2a4fa0; --cyan:#2BBEDC;
--perigo:#ef4444;
--shadow-sm:0 1px 2px rgba(0,0,0,.3);
--shadow-md:0 16px 40px -18px rgba(0,0,0,.6);
--rail:linear-gradient(185deg,#0C3F3C 0%,#0A2E33 55%,#071d3f 140%);
--heat:#F0625A; --cool:#3FB6C6; --neutro:#22332D; --bom:#5FD39A; --ruim:#FF8178;
}
/* ============ Base ============ */
*{box-sizing:border-box}
html,body{margin:0}
body{
font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--ink); line-height:1.5; font-size:15px;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em}
.serif{font-family:"Fraunces",Georgia,serif; font-weight:600; letter-spacing:-.01em}
a{color:var(--brand)}
code{background:var(--brand-050); color:var(--brand); padding:.1rem .35rem; border-radius:.25rem; font-size:.85em}
small{color:var(--ink-3)}
h1{font-size:1.5rem; margin:0 0 1rem}
h2{font-size:1.15rem; margin:1.75rem 0 .75rem}
h3{font-size:1rem; margin:1.25rem 0 .5rem}
/* Foco de teclado visível em tudo que é interativo */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--brand); outline-offset:2px; border-radius:6px;
}
/* ============ Casca do app: rail + topbar ============ */
.app{display:grid; grid-template-columns:248px 1fr; min-height:100vh}
.rail{background:var(--rail); color:#dff3ee; padding:20px 16px; display:flex; flex-direction:column; gap:4px}
.rail .brand{display:flex; align-items:center; gap:11px; padding:6px 8px 18px; text-decoration:none}
.rail .brand img{height:34px; width:auto; filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.rail .brand .wordmark{font-weight:800; font-size:19px; color:#fff; letter-spacing:-.02em}
.rail .brand .wordmark span{color:var(--accent)}
.rail .group{font-size:11px; color:#9fd6cb; margin:16px 8px 6px; font-weight:600; opacity:.75}
.navitem{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; color:#cfeae3; text-decoration:none; font-size:14px; font-weight:500}
.navitem svg{width:18px; height:18px; opacity:.9; flex:none}
.navitem:hover{background:rgba(255,255,255,.08); color:#fff}
.navitem.active{background:rgba(255,255,255,.14); color:#fff; font-weight:600; box-shadow:inset 3px 0 0 var(--accent)}
.rail .foot{margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 8px; border-top:1px solid rgba(255,255,255,.12)}
.rail .foot a{color:#eaf6f2}
.avatar{width:34px; height:34px; border-radius:50%; background:var(--accent); color:#1f2d04; display:grid; place-items:center; font-weight:700; font-size:14px; flex:none}
.rail .foot .who{font-size:13px; color:#eaf6f2; line-height:1.2}
.rail .foot .who small{color:#9fd6cb; font-size:11px}
.main{display:flex; flex-direction:column; min-width:0}
.topbar{display:flex; align-items:center; gap:16px; padding:16px 28px; border-bottom:1px solid var(--line); background:var(--surface)}
.topbar h1{font-size:20px}
.topbar .crumb{font-size:12px; color:var(--ink-3); margin-bottom:2px}
.search{margin-left:auto; display:flex; align-items:center; gap:8px; min-width:230px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 12px; color:var(--ink-3); font-size:13px}
.topbar .search input[type=search]{flex:1; min-width:0; width:300px; height:auto; margin:0; border:0; border-radius:0; padding:0; background:transparent; box-shadow:none; color:var(--ink); font:inherit; outline:0}
.search:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.busca-grupo{margin-top:22px}
.busca-grupo h2{font-size:16px; margin:0 0 8px}
.busca-lista{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.busca-lista li + li{border-top:1px solid var(--line)}
.busca-lista a{display:block; padding:10px 14px; color:var(--ink); text-decoration:none}
.busca-lista a:hover{background:var(--surface-2)}
.busca-lista small{display:block; color:var(--ink-3); margin-top:2px}
.icon-btn{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); display:grid; place-items:center; cursor:pointer}
.theme-btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); padding:8px 12px; border-radius:10px; font-size:13px; font-weight:600}
.content{padding:26px 28px; overflow:auto}
.page-intro{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.page-intro p{margin:4px 0 0; color:var(--ink-2); font-size:14px; max-width:60ch}
/* Conteúdo das páginas públicas / centralizadas (sem rail) */
.conteudo{max-width:1100px; margin:0 auto; padding:1.5rem}
.conteudo.publico{max-width:760px}
/* ============ Botões ============ */
.botao,.btn{
display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
background:var(--brand); color:#fff; padding:10px 16px; border-radius:10px;
font-weight:600; font-size:14px; font-family:inherit; text-decoration:none;
box-shadow:var(--shadow-sm); white-space:nowrap; justify-content:center; line-height:1.25;
}
html[data-theme="dark"] .botao,html[data-theme="dark"] .btn{color:#06201c}
.botao:hover,.btn:hover{background:var(--brand-700)}
.botao.secundario,.botao.ghost,.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); box-shadow:none}
html[data-theme="dark"] .botao.secundario,html[data-theme="dark"] .botao.ghost,html[data-theme="dark"] .btn.ghost{color:var(--ink)}
.botao.secundario:hover,.botao.ghost:hover,.btn.ghost:hover{background:var(--surface-2)}
.botao.pequeno{font-size:13px; padding:6px 12px; color:#fff}
html[data-theme="dark"] .botao.pequeno{color:#06201c}
.botao.perigo{background:var(--perigo); color:#fff}
.botao.perigo:hover{background:#991b1b}
.acoes{display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap}
/* ============ Ações em ícone (tabelas) ============ */
.acoes-linha{display:inline-flex; gap:2px; align-items:center}
.acao{
display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px;
border:1px solid transparent; background:transparent; color:var(--ink-2); cursor:pointer;
text-decoration:none; position:relative; padding:0; font-family:inherit;
}
.acao svg{width:17px; height:17px}
.acao:hover{background:var(--surface-2); color:var(--brand); border-color:var(--line)}
.acao.perigo{color:var(--ink-2)}
.acao.perigo:hover{color:var(--perigo); background:color-mix(in srgb,var(--perigo) 10%,transparent); border-color:color-mix(in srgb,var(--perigo) 25%,transparent)}
.acao:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.acao[data-tip]::after{
content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%;
transform:translateX(-50%) translateY(2px);
background:var(--ink); color:var(--surface); font-size:11.5px; font-weight:600; line-height:1;
white-space:nowrap; padding:5px 8px; border-radius:6px; opacity:0; pointer-events:none;
transition:opacity .12s ease, transform .12s ease; z-index:20; box-shadow:var(--shadow-md);
}
.acao[data-tip]:hover::after,.acao[data-tip]:focus-visible::after{opacity:1; transform:translateX(-50%) translateY(0)}
.link{background:none; border:none; color:var(--brand); cursor:pointer; padding:0; font-size:.9rem; font-family:inherit}
.link.perigo{color:var(--perigo)}
/* ============ Cartões / KPIs ============ */
.cartoes{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; margin:1rem 0}
.cartao,.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm)}
.cartao > span:first-child,.kpi .lbl{display:block; font-size:13px; color:var(--ink-2); font-weight:500; margin-bottom:.25rem}
.cartao strong,.kpi .val{font-size:30px; font-weight:700; letter-spacing:-.02em; font-family:"Fraunces",serif; line-height:1.1}
.cartao strong.menor{font-size:1rem; word-break:break-all; font-family:inherit}
.kpi .delta{font-size:12.5px; margin-top:6px; color:var(--ink-3)}
.kpi .delta .up{color:#1f8f5f; font-weight:600}
.kpi.feature{background:linear-gradient(160deg,var(--brand) 0%,var(--brand-700) 100%); border:0; color:#eafaf6}
html[data-theme="dark"] .kpi.feature{background:linear-gradient(160deg,#0f4b45,#0c3a4f)}
.kpi.feature .lbl,.kpi.feature .delta{color:#bfeadf}
.kpi.feature .val{color:#fff}
.cartoes .cartao-largo{grid-column:1 / -1}
/* Painéis (blocos com cabeçalho) */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line)}
.panel-head h3{font-size:15px; margin:0}
.panel-head a{font-size:13px; color:var(--brand); font-weight:600; text-decoration:none}
.panel-body{padding:6px}
.grid2{display:grid; grid-template-columns:1.55fr 1fr; gap:16px; margin:1rem 0}
/* Distribuição de risco (painel) */
.dist{padding:18px}
.dist .bar{display:flex; height:16px; border-radius:999px; overflow:hidden; margin:4px 0 18px; background:var(--surface-3)}
.dist .bar i{display:block}
.dist .legend{display:flex; flex-direction:column; gap:12px}
.dist .legend .row{display:flex; align-items:center; gap:10px; font-size:13.5px}
.dist .legend .row .nm{color:var(--ink-2)}
.dist .legend .row b{margin-left:auto; font-weight:700}
.pill.neutra{background:var(--surface-3); color:var(--ink-3)}
/* Classificação do laudo do respondente (cartão) */
.valor-card{display:inline-block; font-size:1.2rem; font-weight:700; line-height:1.3; font-family:"Fraunces",serif}
.badge-classificacao{padding:.25rem .75rem; border-radius:999px; font-size:1rem}
.badge-cor-verde,.badge-cor-verde-claro{background:color-mix(in srgb,var(--r1) 16%,transparent); color:var(--r1)}
.badge-cor-amarelo{background:color-mix(in srgb,var(--r3) 20%,transparent); color:#9a7400}
.badge-cor-laranja{background:color-mix(in srgb,var(--r4) 18%,transparent); color:var(--r4)}
.badge-cor-vermelho{background:color-mix(in srgb,var(--r5) 16%,transparent); color:var(--r5)}
html[data-theme="dark"] .badge-cor-amarelo{color:var(--r3)}
/* ============ Tabelas ============ */
table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:.75rem 0 1.5rem}
.panel table,.panel-body table{border:0; border-radius:0; margin:0}
th{font-size:11.5px; color:var(--ink-3); font-weight:600; text-align:left; padding:10px 14px; background:var(--surface-2)}
.panel th{background:transparent}
td{padding:12px 14px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:top}
tbody tr:hover{background:var(--surface-2)}
.co{display:flex; align-items:center; gap:10px; font-weight:600}
.co .mono{width:30px; height:30px; border-radius:8px; background:var(--brand-050); color:var(--brand); display:grid; place-items:center; font-size:12px; font-weight:700}
/* ============ Badges / Pills (semáforo + status) ============ */
.badge,.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.3}
.badge{color:#fff}
.pill .dot,.badge .dot{width:8px; height:8px; border-radius:50%}
/* Pills com fundo suave (texto na cor) — usadas nas tabelas */
.pill.b1{background:color-mix(in srgb,var(--r1) 16%,transparent); color:var(--r1)}
.pill.b2{background:color-mix(in srgb,var(--r2) 20%,transparent); color:#5d7a16}
.pill.b3{background:color-mix(in srgb,var(--r3) 20%,transparent); color:#9a7400}
.pill.b4{background:color-mix(in srgb,var(--r4) 18%,transparent); color:var(--r4)}
.pill.b5{background:color-mix(in srgb,var(--r5) 16%,transparent); color:var(--r5)}
html[data-theme="dark"] .pill.b2{color:var(--r2)}
html[data-theme="dark"] .pill.b3{color:var(--r3)}
/* Badges legados (fundo forte) — semáforo */
.badge-verde{background:var(--r1)} .badge-verde_claro{background:var(--r2)}
.badge-amarelo{background:var(--r3)} .badge-laranja{background:var(--r4)}
.badge-vermelho{background:var(--r5)}
/* Badges de status */
.badge-disponivel,.badge-ativo{background:var(--r1)}
.badge-em_uso,.badge-em_andamento,.badge-inconsistente,.badge-inconclusivo{background:var(--r3)}
.badge-negativa{background:var(--r4)}
.badge-concluido,.badge-concluida,.badge-corporativo{background:var(--brand)}
.badge-expirado{background:var(--r4)}
.badge-cancelado,.badge-encerrado,.badge-inativo,.badge-abandonada{background:var(--ink-3)}
.badge-publico{background:var(--r2)}
/* ============ Formulários ============ */
:root{ --control-h:44px; --label-h:30px; }
/* Grid de 12 colunas: filhos diretos ocupam a linha toda; .campo.col-N encurta. */
.formulario{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; margin:1rem 0; display:grid; grid-template-columns:repeat(12,1fr); gap:.9rem 1.1rem; align-items:start}
.formulario.estreito{max-width:480px}
.formulario.linha{display:flex; align-items:end; gap:.5rem}
.formulario > *{grid-column:1 / -1}
/* botões/links fluem lado a lado em largura natural, à esquerda */
.formulario > button,.formulario > .botao,.formulario > a.botao{grid-column:auto; justify-self:start; align-self:end}
/* grupo de botões ao lado de campos: alinhado à base dos inputs */
.formulario > .form-acoes.alinhado-base{grid-column:auto / span 3; align-self:end; margin-top:0; flex-wrap:nowrap}
.formulario textarea,.questionario textarea{grid-column:1 / -1}
.campo{grid-column:1 / -1; display:flex; flex-direction:column; min-width:0}
.campo.col-1{grid-column:span 1}.campo.col-2{grid-column:span 2}.campo.col-3{grid-column:span 3}
.campo.col-4{grid-column:span 4}.campo.col-5{grid-column:span 5}.campo.col-6{grid-column:span 6}
.campo.col-7{grid-column:span 7}.campo.col-8{grid-column:span 8}.campo.col-9{grid-column:span 9}
.campo.col-10{grid-column:span 10}.campo.col-11{grid-column:span 11}.campo.col-12{grid-column:1 / -1}
/* rótulo com altura reservada, alinhado à base: campos da mesma linha nascem alinhados */
.campo > span,.field label{display:flex; align-items:flex-end; flex-wrap:wrap; gap:.15rem .5rem; min-height:var(--label-h); margin-bottom:.35rem; font-size:13px; color:var(--ink-2); font-weight:600; line-height:1.2}
.campo .hint{margin-top:.35rem; font-size:11.5px; color:var(--ink-3); font-weight:500; line-height:1.3}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=datetime-local],input[type=search],input:not([type]),select,.field input{
height:var(--control-h); padding:0 .8rem; border:1px solid var(--line-strong); border-radius:11px;
font-size:.95rem; font-family:inherit; background:var(--surface); color:var(--ink); width:100%;
}
input[readonly]{background:color-mix(in srgb,var(--line-strong) 18%,var(--surface)); color:var(--ink-2); cursor:default}
/* grupo de ações do formulário: botões juntos, espaçamento constante */
.form-acoes{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.4rem}
textarea{padding:.65rem .8rem; border:1px solid var(--line-strong); border-radius:11px; font-size:.95rem; font-family:inherit; background:var(--surface); color:var(--ink); width:100%; min-height:88px; resize:vertical}
/* seta própria do select (consistente entre navegadores); cor acompanha o tema */
select{appearance:none; -webkit-appearance:none; padding-right:2.1rem;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right .8rem center}
html[data-theme="dark"] select{background-image:url("data:image/svg+xml;utf8,")}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent); outline-offset:0; border-color:var(--brand)}
.linha{display:flex; align-items:center; gap:.4rem; font-size:.9rem}
.inline{display:inline}
.inline,form.inline{margin:0}
/* colapso em telas estreitas: cada campo ocupa a linha toda */
@media (max-width:640px){ .formulario > .campo[class*="col-"]{grid-column:1 / -1} }
/* ============ Abas de cadastro ============ */
.abas{display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--line); margin:0 0 1.1rem}
.aba{appearance:none; border:0; background:transparent; font:inherit; font-weight:700; color:var(--ink-2); padding:.8rem 1rem; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-1px}
.aba:hover{color:var(--brand)}
.aba.ativa{color:var(--brand); border-bottom-color:var(--brand)}
/* sem JS: painéis empilhados (degradação graciosa). Com JS: só o ativo. */
.abas-wrap .painel{display:block}
.abas-wrap.js .painel{display:none}
.abas-wrap.js .painel.ativo{display:block}
/* grade de campos reutilizável (dentro de abas/painéis): .campo e .campo.col-N valem aqui também */
.grade{display:grid; grid-template-columns:repeat(12,1fr); gap:.9rem 1.1rem; align-items:start}
.painel > .grade + .grade{margin-top:1.1rem}
/* linhas de contato (lista dinâmica) */
.contatos-lista{display:flex; flex-direction:column; gap:.55rem; margin:.3rem 0 .7rem}
.contato-linha{display:grid; grid-template-columns:150px 1fr 1fr auto; gap:.6rem; align-items:end}
.contato-linha .campo{grid-column:auto; margin:0}
@media (max-width:640px){ .contato-linha{grid-template-columns:1fr 1fr auto} }
/* ============ Avisos (flash) ============ */
.aviso{border-radius:11px; padding:.8rem 1rem; margin:.75rem 0; font-size:.9rem; border:1px solid transparent}
.aviso-ok{background:color-mix(in srgb,var(--r1) 12%,var(--surface)); color:var(--r1); border-color:color-mix(in srgb,var(--r1) 30%,transparent)}
.aviso-erro{background:color-mix(in srgb,var(--perigo) 10%,var(--surface)); color:var(--perigo); border-color:color-mix(in srgb,var(--perigo) 30%,transparent)}
/* ============ Barras de progresso ============ */
.barra{background:var(--surface-3); border-radius:999px; height:10px; overflow:hidden; min-width:80px}
.barra-preenchida{height:100%; background:var(--brand); border-radius:999px}
.barra-curta{max-width:200px}
/* ============ Escala de risco (peça-assinatura do laudo) ============ */
.scale{padding:6px 0 10px}
.scale-track{position:relative; display:flex; height:52px; margin-top:22px}
.scale-track i{flex:1; position:relative}
.scale-track i:first-child{border-radius:12px 0 0 12px}
.scale-track i:last-child{border-radius:0 12px 12px 0}
.scale-track i span{position:absolute; left:10px; bottom:7px; font-size:11px; color:rgba(255,255,255,.92); font-weight:600}
.marker{position:absolute; top:-10px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; z-index:2}
.marker .flag{background:var(--ink); color:var(--surface); font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:7px; white-space:nowrap}
.marker .needle{width:3px; height:42px; background:var(--ink); border-radius:2px 2px 0 0; margin-top:-2px}
.scale-caption{display:flex; justify-content:space-between; margin-top:10px; font-size:11.5px; color:var(--ink-3)}
/* ============ Dimensões (meters) ============ */
.dims h3{font-size:14px; margin-bottom:4px}
.dims .sub{color:var(--ink-3); font-size:13px; margin-bottom:16px}
.dim{display:grid; grid-template-columns:230px 1fr 64px; gap:16px; align-items:center; padding:13px 0; border-top:1px solid var(--line)}
.dim .nm{font-size:13.5px; font-weight:600}
.dim .nm small{display:block; font-weight:400; color:var(--ink-3); font-size:12px}
.meter{height:9px; border-radius:999px; background:var(--surface-3); overflow:hidden}
.meter i{display:block; height:100%; border-radius:999px}
.dim .sc{text-align:right; font-weight:700; font-family:"Fraunces",serif; font-size:16px}
/* ============ Documento do laudo ============ */
.laudo-wrap{max-width:900px; margin:0 auto}
.doc,.pagina-laudo{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-md); overflow:hidden}
.doc-top{padding:26px 34px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; align-items:flex-start}
.doc-top .k{font-size:12.5px; color:var(--ink-3)}
.doc-top h2{font-size:15px; margin-top:4px}
.doc-logo{height:30px}
.logo-empresa-atual{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:8px 0 12px}
.logo-empresa-atual img{max-width:240px; max-height:80px; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.doc-hero{padding:30px 34px; display:grid; grid-template-columns:1fr 300px; gap:30px; align-items:center}
.doc-hero .eyebrow{color:var(--ink-3); font-size:13px}
.doc-hero .class{font-size:46px; line-height:1.02; margin:8px 0 10px}
.doc-hero p{margin:0; color:var(--ink-2); font-size:14px; max-width:46ch}
.score-ring{justify-self:center; text-align:center}
.score-ring .num{font-family:"Fraunces",serif; font-size:40px; font-weight:700}
.score-ring .den{color:var(--ink-3); font-size:13px}
.scale,.dims{padding-left:34px; padding-right:34px}
.doc-section{padding:6px 34px 26px; border-top:1px solid var(--line)}
.doc-section h2{font-size:15px; margin:12px 0 6px}
.doc-section:first-of-type{border-top:0}
/* Relatório técnico do GES (snapshot emitido) */
.relatorio-ges{padding:22px 30px 26px; margin:0 0 24px; overflow:visible}
.relatorio-ges h2{margin-top:0}
.relatorio-ges h3{font-size:14px; margin:20px 0 6px}
tr.linha-pendente td{background:color-mix(in srgb,var(--r3) 8%,transparent)}
.rodape-laudo{color:var(--ink-3); margin-top:1.5rem}
/* ============ Página pública (respondente) ============ */
.cabecalho-pesquisa{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; margin-bottom:1rem}
.subtitulo{color:var(--ink-3); margin-top:-.5rem}
.pequeno{font-size:.85rem; color:var(--ink-3)}
.bloco{margin-top:2rem}
.questao{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:1rem 1.25rem; margin-bottom:1rem}
.questao.obrigatoria{border-left:4px solid var(--brand)}
.questao legend,.pergunta-titulo{font-weight:700; font-size:1rem; line-height:1.45}
.pergunta-titulo{margin-bottom:.9rem}
.estrela{color:var(--perigo); margin-left:.2rem}
.opcao{display:block; padding:.4rem 0; cursor:pointer}
.opcao input{margin-right:.5rem}
.questionario{margin-top:1rem}
.inline-bloco{border-bottom:1px solid var(--line); padding-bottom:.75rem; margin-bottom:.75rem}
#formQuestionario fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.1rem 1.25rem; margin:0}
.ok{color:var(--r1); font-weight:600}
.erro{color:var(--perigo); font-weight:600}
/* ============ Login dividido ============ */
.login{display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh}
.login-brand{position:relative; background:var(--rail); color:#eafaf5; padding:56px 54px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden}
.login-brand::after{content:""; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(140,187,30,.45),transparent 65%)}
.login-brand .top{display:flex; align-items:center; gap:12px; position:relative; z-index:1}
.login-brand .top img{height:40px}
.login-brand .top b{font-size:22px; font-weight:800}
.login-brand .top b span{color:var(--accent)}
.login-brand .mid{position:relative; z-index:1; max-width:30ch}
.login-brand .mid h2{font-size:34px; line-height:1.12; font-weight:600}
.login-brand .mid p{color:#bfe8de; font-size:15px; margin-top:14px; line-height:1.6}
.login-brand .seal{position:relative; z-index:1; display:flex; align-items:center; gap:12px; font-size:13px; color:#cdeee6}
.login-brand .seal img{height:54px}
.login-form{display:grid; place-items:center; padding:40px}
.login-card{width:100%; max-width:360px}
.login-card .lead{color:var(--ink-2); margin:8px 0 26px; font-size:14px}
.field{margin-bottom:16px}
.login-card .row{display:flex; align-items:center; justify-content:space-between; margin:4px 0 22px; font-size:13px}
.login-card .row a{color:var(--brand); font-weight:600; text-decoration:none}
.login-card .botao,.login-card .btn{width:100%; justify-content:center; padding:13px}
.login-foot{margin-top:22px; text-align:center; font-size:12.5px; color:var(--ink-3)}
/* ============ Login em duas etapas ============ */
.aviso-alerta{background:color-mix(in srgb,var(--accent) 14%,var(--surface)); color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 45%,transparent); font-weight:600}
.login-card .field label.campo{align-items:stretch} /* rótulo à esquerda (o .field label alinha à direita) */
.login-card-2fa .login-foot + .login-foot{margin-top:10px}
.login-card-2fa .login-foot a{color:var(--brand); font-weight:600; text-decoration:none}
/* código de 6 dígitos em caixas (codigo_otp.js): o input real fica transparente por cima */
.otp{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:8px}
.otp-caixa{display:grid; place-items:center; height:58px; border:1px solid var(--line-strong); border-radius:11px; background:var(--surface); color:var(--ink); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums; transition:border-color .12s,box-shadow .12s}
.otp-caixa.cheia{border-color:color-mix(in srgb,var(--brand) 55%,var(--line-strong))}
.otp:focus-within .otp-caixa.atual{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.login-card .field .otp input.otp-input{position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; outline:0; background:transparent; color:transparent; caret-color:transparent; font-size:16px; cursor:text}
.otp-input::selection{background:transparent}
.passos-2fa{margin:-10px 0 18px; padding-left:1.2rem; font-size:13.5px; color:var(--ink-2); line-height:1.5; display:grid; gap:4px}
.qr-2fa{display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.qr-2fa .qr{padding:8px; line-height:0}
.qr-2fa .qr img,.qr-2fa .qr canvas{display:block}
.chave-2fa{flex:1; min-width:140px; display:flex; flex-direction:column; gap:6px}
.chave-2fa span{font-size:12px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.chave-2fa code,.codigos-2fa code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px; line-height:1.6; word-break:break-word; user-select:all}
.codigos-2fa{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 20px; padding:0; list-style:none}
.codigos-2fa code{display:block; text-align:center; letter-spacing:.04em}
/* ============ QR Code ============ */
.qr{background:#fff; border:1px solid var(--line); border-radius:.5rem; padding:.4rem; display:inline-block}
.qr-url{font-size:.72rem; color:var(--ink-3); word-break:break-all; max-width:220px}
/* ============ Home ============ */
.hero{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; margin-bottom:1rem}
.hero h1{margin-bottom:.25rem}
.duas-colunas{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0}
.duas-colunas > div{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem}
/* ============ Auditoria de instrumentos ============ */
.lista-achados{list-style:none; padding:0; margin:.5rem 0 1.5rem; display:grid; gap:.5rem}
.lista-achados li{border:1px solid var(--line); border-radius:.5rem; padding:.7rem .9rem; background:var(--surface); font-size:.88rem}
.lista-achados li.achado-erro{border-left:4px solid var(--r5)}
.lista-achados li.achado-aviso{border-left:4px solid var(--r3)}
.lista-achados li.achado-nota{border-left:4px solid var(--ink-3)}
/* ============ Tela centralizada (login antigo / troca de senha) ============ */
body.corpo-centralizado{min-height:100vh; display:flex; align-items:center; justify-content:center}
body.corpo-centralizado .conteudo{width:100%; max-width:520px; margin:0; padding:1.5rem}
body.corpo-centralizado .titulo-centralizado{text-align:center; margin-bottom:1.25rem}
/* ============ Responsivo ============ */
@media(max-width:860px){
.app,.login{grid-template-columns:1fr}
.login-brand{display:none}
/* menu lateral vira gaveta sobre a página, aberta pelo botão da barra do topo */
.rail{position:fixed; left:0; top:0; height:100vh; height:100dvh; width:min(280px,84vw); transform:translateX(-105%); z-index:80}
html[data-menu-aberto] .rail{transform:none; box-shadow:0 0 40px rgba(0,0,0,.35)}
html.menu-pronto .rail{transition:transform .22s ease}
.menu-fundo{position:fixed; inset:0; background:rgba(8,24,20,.55); z-index:70}
.topbar .menu-abrir{display:grid}
.topbar{padding:12px 16px; gap:10px}
.topbar .search{display:none}
.topbar .theme-btn{margin-left:auto}
.grid2{grid-template-columns:1fr}
.doc-hero{grid-template-columns:1fr}
.dim{grid-template-columns:1fr 60px}
.dim .meter{grid-column:1 / -1; order:3}
.duas-colunas{grid-template-columns:1fr}
.content{padding:18px 16px}
.doc-top,.doc-hero,.scale,.dims,.doc-section{padding-left:18px; padding-right:18px}
}
/* ============ Movimento reduzido ============ */
@media(prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}
/* ============ Análise técnica por GES ============ */
.nota{border:1px solid var(--line); background:var(--brand-050); color:var(--ink); border-radius:12px; padding:12px 14px; margin:.75rem 0; font-size:.92rem; line-height:1.5}
.nota.alerta{background:color-mix(in srgb,var(--r3) 12%,var(--surface)); border-color:color-mix(in srgb,var(--r3) 35%,transparent)}
.nota.critica{background:color-mix(in srgb,var(--r5) 10%,var(--surface)); border-color:color-mix(in srgb,var(--r5) 32%,transparent)}
.caixa{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:.75rem 0}
.caixa h4{font-size:12.5px; color:var(--ink-2); font-weight:700; margin:.6rem 0 .2rem}
.caixa h4:first-child{margin-top:0}
.caixa p{margin:0; font-size:.92rem; line-height:1.5}
.dim-meta{display:block; font-size:12px; color:var(--ink-3); margin-top:2px; font-weight:500}
.filtros-linha{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px}
.filtros-linha input[type=search]{flex:1; min-width:220px; width:auto}
.chip{appearance:none; font:inherit; font-size:12.5px; font-weight:600; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:6px 12px; cursor:pointer}
.chip:hover{border-color:var(--brand); color:var(--brand)}
.chip.ativo{background:var(--brand); border-color:var(--brand); color:#fff}
html[data-theme="dark"] .chip.ativo{color:#06201c}
dialog.modal{border:0; padding:0; border-radius:16px; width:min(860px,calc(100% - 32px)); max-height:92vh; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-md)}
dialog.modal::backdrop{background:rgba(8,24,20,.55)}
/* sem JavaScript: o modal aberto pelo servidor fica centralizado sobre a página */
dialog.modal[open]:not(:modal){position:fixed; inset:0; margin:auto; z-index:60; box-shadow:0 0 0 100vmax rgba(8,24,20,.55)}
dialog.modal[open]{display:flex; flex-direction:column}
.modal-head,.modal-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px}
.modal-head{border-bottom:1px solid var(--line)}
.modal-head h2{margin:.1rem 0 .2rem; font-size:1.25rem}
.modal-head .contexto-linha{font-size:12.5px; color:var(--ink-3)}
.modal-body{padding:6px 22px 18px; overflow:auto}
.modal-foot{border-top:1px solid var(--line); flex-wrap:wrap}
.modal-foot .form-acoes{margin:0; margin-left:auto}
.modal-body .formulario{border:0; padding:0; margin:.5rem 0 0; background:transparent}
dialog.modal.largo{width:min(1180px,calc(100% - 32px))}
.lote-topo{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.lote-topo .nome{flex:1; min-width:200px}
.lote-item .aviso{margin:.5rem 0 0}
.modal-form{display:contents}
.just-outra{margin-top:6px}
.just-outra[hidden]{display:none}
.sp-oculto{display:none !important}
.linha-dim[hidden]{display:none}
/* ============ Impressão (PDF do laudo) ============ */
/* Visão do grupo */
.vg-topo{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:flex-end; justify-content:space-between}
.vg-filtros{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end}
.vg-filtros label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink-3); font-weight:600}
.vg-filtros select{height:38px; min-width:120px}
.vg-filtros .vg-chave{flex-direction:row; align-items:center; gap:8px; height:38px; padding:0 12px; border:1px dashed var(--line-strong); border-radius:10px; background:var(--surface); font-size:12.5px}
.vg-trilha{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:14px 0; font-size:13px}
.vg-trilha a{color:var(--brand); font-weight:600; text-decoration:none; padding:3px 6px; border-radius:6px}
.vg-trilha a:hover{background:var(--brand-050)}
.vg-trilha .atual{font-weight:700; padding:3px 6px}
.vg-trilha .sep{color:var(--ink-3)}
.vg-fonte{margin-left:auto; font-size:12px; color:var(--ink-3)}
.vg-selo{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:color-mix(in srgb,var(--r3) 18%,transparent); color:var(--ink); border:1px dashed color-mix(in srgb,var(--r3) 70%,transparent)}
.vg-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.vg-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow-md); min-width:0}
.vg-card h2{font-size:15px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin:0 0 12px}
.vg-card h2 small{font-weight:500; color:var(--ink-3); font-size:12px}
.vg-card h2.vg-sub{margin-top:16px; padding-top:12px; border-top:1px solid var(--line)}
.vg-rot{font-size:12.5px; color:var(--ink-2); font-weight:600; display:flex; gap:8px; align-items:center}
.vg-val{font-size:30px; font-weight:800; letter-spacing:-.02em; margin:6px 0 2px}
.vg-val small{font-size:14px; font-weight:600; color:var(--ink-3)}
.vg-det{font-size:12px; color:var(--ink-3); margin-top:2px}
.vg-delta{font-size:12.5px; font-weight:700}
.vg-delta.ruim{color:var(--ruim)} .vg-delta.bom{color:var(--bom)} .vg-delta.neu{color:var(--ink-3)}
.vg-mini{display:flex; height:8px; gap:2px; margin-top:10px}
.vg-mini span{border-radius:3px}
.vg-grade2{display:grid; grid-template-columns:1.25fr 1fr; gap:14px; margin-top:14px}
.vg-ctrl{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-weight:500}
.vg-ctrl .chip{text-decoration:none; padding:4px 10px}
.vg-ctrl .chip.ativo{background:var(--brand); color:#fff; border-color:var(--brand)}
.vg-ctrl input[type=search]{height:32px; width:200px}
.vg-rank{display:grid; grid-template-columns:minmax(120px,190px) 1fr 74px; gap:10px; align-items:center; padding:5px 6px; border-radius:8px; color:inherit; text-decoration:none}
.vg-rank:hover,.vg-rank:focus-visible{background:var(--surface-2)}
.vg-rank .nome{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vg-rank .nome small{display:block; font-weight:500; color:var(--ink-3); font-size:11.5px}
.vg-rank .dlt{font-size:12px; text-align:right}
.vg-barra{position:relative; height:12px; background:var(--surface-3); border-radius:4px}
.vg-barra i{position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0; background:var(--brand)}
.vg-barra i.pre{background:repeating-linear-gradient(45deg,var(--brand) 0 4px,color-mix(in srgb,var(--brand) 45%,transparent) 4px 8px)}
.vg-barra b{position:absolute; top:-3px; font-size:12px; font-weight:700; white-space:nowrap}
.vg-sxp{display:flex; height:26px; gap:2px; margin:4px 0 10px}
.vg-sxp div{border-radius:4px; min-width:3px}
.vg-legenda{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--ink-2); font-weight:500}
.vg-legenda span{display:inline-flex; gap:6px; align-items:center}
.vg-legenda i{width:10px; height:10px; border-radius:3px; display:inline-block}
.vg-ofens{list-style:none; margin:0; padding:0}
.vg-ofens li{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--line)}
.vg-heat-wrap,.vg-tempo{margin-top:14px}
.vg-heat-rolagem{overflow-x:auto}
table.vg-heat{border-collapse:separate; border-spacing:2px; width:auto; font-size:12px; box-shadow:none; background:transparent}
table.vg-heat th{font-weight:600; color:var(--ink-2); text-align:left; padding:4px 6px; white-space:nowrap; background:transparent; border:0}
table.vg-heat thead th{vertical-align:bottom; padding:0 4px 6px}
table.vg-heat thead th.vg-dim{width:84px; min-width:72px; white-space:normal; text-align:center; font-size:11px; line-height:1.25}
table.vg-heat thead th.vg-dim a{color:var(--ink-2); text-decoration:none}
table.vg-heat thead th.vg-dim a:hover{color:var(--brand)}
table.vg-heat thead th.vg-dim.foco a{color:var(--brand); font-weight:800}
table.vg-heat tbody th{min-width:170px}
table.vg-heat tbody th a{color:inherit; text-decoration:none}
table.vg-heat tbody th a:hover{color:var(--brand)}
table.vg-heat tbody th small{color:var(--ink-3); font-weight:500}
table.vg-heat td{height:30px; min-width:44px; text-align:center; border-radius:5px; font-weight:700; font-variant-numeric:tabular-nums; border:0; padding:0 4px}
table.vg-heat td.vazio{background:var(--surface-2); color:var(--ink-3); font-weight:500}
table.vg-heat td.pre{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 3px,transparent 3px 7px)}
.vg-escala{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-3); margin-top:10px}
.vg-escala .faixa{display:flex; gap:2px}
.vg-escala .faixa i{width:28px; height:10px; border-radius:2px}
.vg-tempo svg{width:100%; height:auto; max-height:340px; display:block} /* escala proporcional: texto e pontos sem distorção */
.vg-eixo text{font-size:11px; fill:var(--ink-3)}
.vg-eixo line{stroke:var(--line)}
.vg-rodape{margin-top:18px; color:var(--ink-3); font-size:12px}
.vg-tip{position:fixed; z-index:60; pointer-events:none; background:var(--ink); color:var(--surface); padding:8px 10px; border-radius:8px; font-size:12px; line-height:1.4; max-width:270px; box-shadow:var(--shadow-md); display:none}
.vg-tip b{display:block; font-size:12.5px}
@media (max-width:1100px){ .vg-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .vg-grade2{grid-template-columns:1fr} }
@media (max-width:640px){ .vg-kpis{grid-template-columns:1fr} .vg-rank{grid-template-columns:1fr 1fr} .vg-rank .dlt{display:none} }
@media print{
body{background:#fff}
.rail,.topbar,.nao-imprimir,.aviso,form,.search,.icon-btn,.theme-btn{display:none !important}
.app{display:block}
.content{padding:0; overflow:visible}
.laudo-wrap{max-width:100%}
.doc,.pagina-laudo{border:none; border-radius:0; box-shadow:none}
table{box-shadow:none}
.relatorio-ges{padding:0}
.relatorio-ges + .relatorio-ges{break-before:page}
th,td{color:#000}
}
/* Biblioteca do inventário: abas como links e blocos por dimensão */
a.aba{text-decoration:none}
.bib-dim{border-top:1px solid var(--line); padding:1rem 0}
.bib-dim h3{margin:.2rem 0 .6rem}
/* Inventário do GES: funções da caracterização, domínios e sugestões de medida */
fieldset.funcao-ges{border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem 1rem; margin:0}
fieldset.funcao-ges legend{font-weight:700; padding:0 .4rem}
.dominio{border-top:1px solid var(--line); padding-top:.5rem; margin-top:1.25rem}
.plano-perigo{border-top:1px solid var(--line); padding:.75rem 0}
.sugestao-medida{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:.45rem 0; border-bottom:1px dashed var(--line)}
.dim-meta.interno,.nota.interno{color:var(--ink-2); font-style:italic}
.botao.pequeno.secundario,html[data-theme="dark"] .botao.pequeno.secundario{color:var(--ink)}
.botao[disabled],.botao:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.vg-heat .vg-dominios th.vg-dom{font-size:11.5px; font-weight:700; color:var(--ink-2); text-align:center; border-bottom:2px solid var(--line-strong); padding:.35rem .25rem; white-space:normal}
/* Frente D2: relatório gerado por modelo (HTML do admin) e editor de modelos */
.relatorio-modelo{padding:26px 34px 30px; margin:0 0 24px; overflow:visible; font-size:14px; line-height:1.55}
.relatorio-modelo h1{font-size:22px; margin:.2rem 0}
.relatorio-modelo h2{font-size:17px; margin:28px 0 8px; padding-bottom:6px; border-bottom:2px solid var(--brand-100); color:var(--brand-700)}
.relatorio-modelo h3{font-size:14.5px; margin:20px 0 6px}
.relatorio-modelo p{margin:.45rem 0}
.relatorio-modelo table{width:100%; border-collapse:collapse; margin:.6rem 0 1rem; font-size:13px}
.relatorio-modelo th,.relatorio-modelo td{border:1px solid var(--line-strong); padding:6px 9px; vertical-align:top; text-align:left}
.relatorio-modelo thead th{background:var(--brand); color:#fff; font-weight:600}
.relatorio-modelo th.campo{display:table-cell; grid-column:auto; background:var(--surface-2); color:var(--ink-2); font-weight:600; width:32%}
.relatorio-modelo tr.linha-dominio th{background:var(--brand-050); color:var(--brand-700)}
.relatorio-modelo table.inventario thead th{font-size:14px}
.relatorio-modelo table.tabela-larga{font-size:11px; table-layout:fixed}
.relatorio-modelo table.tabela-larga th,.relatorio-modelo table.tabela-larga td{padding:5px 6px; overflow-wrap:break-word; hyphens:auto}
.relatorio-modelo th.campo{font-size:12.5px}
.relatorio-modelo .nowrap{white-space:nowrap; hyphens:none}
.relatorio-modelo blockquote.nota,.relatorio-modelo .nota{margin:.6rem 0; padding:10px 14px; border-left:4px solid var(--brand); background:var(--surface-2); border-radius:0 10px 10px 0}
.relatorio-modelo .formula{font-family:ui-monospace,Menlo,Consolas,monospace; background:var(--surface-2); padding:8px 12px; border-radius:8px}
.relatorio-modelo .cabecalho-doc{display:flex; gap:18px; align-items:center; padding-bottom:14px; border-bottom:3px solid var(--accent)}
.relatorio-modelo .cabecalho-doc img{width:72px; height:72px; object-fit:contain}
.relatorio-modelo .cabecalho-doc .marca{margin:0; color:var(--brand); font-weight:700; letter-spacing:.02em}
.relatorio-modelo .assinatura{margin:36px 0 10px; text-align:center}
.relatorio-modelo .assinatura p{margin:.15rem 0}
.relatorio-modelo .moldura-validacao{margin:0 0 14px; padding-bottom:10px; border-bottom:1px dashed var(--line)}
.relatorio-modelo .classe-risco,.relatorio-modelo .situacao-critica{color:var(--r5); font-weight:700}
.relatorio-modelo .classe-atencao{color:#9a6b00; font-weight:600}
.relatorio-modelo .classe-seguro{color:var(--r1); font-weight:600}
html[data-theme="dark"] .relatorio-modelo .classe-atencao{color:var(--r3)}
html[data-theme="dark"] .relatorio-modelo thead th{background:#0E6E62; color:#fff}
html[data-theme="dark"] .relatorio-modelo h2{color:var(--brand)}
/* Matriz S×P e classes de risco: cores do modelo do engenheiro */
.relatorio-modelo .mc-trivial{background:#29C0E8; color:#10211C}
.relatorio-modelo .mc-toleravel{background:#92CE4A; color:#10211C}
.relatorio-modelo .mc-moderado{background:#FDE47F; color:#10211C}
.relatorio-modelo .mc-substancial{background:#FCBF33; color:#10211C}
.relatorio-modelo .mc-intoleravel{background:#D0393B; color:#fff}
.relatorio-modelo table.matriz{width:auto; min-width:min(100%,640px)}
.relatorio-modelo table.matriz td{text-align:center; font-weight:700; font-size:15px; min-width:72px}
.relatorio-modelo table.matriz tbody th{background:var(--surface-2); color:var(--ink); white-space:nowrap}
.relatorio-modelo .legenda-matriz span{display:inline-block; padding:2px 10px; border-radius:6px; margin:0 4px 4px 0; font-size:12px; font-weight:600}
.editor-modelo{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:22px; align-items:start}
.codigo-modelo{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.5; white-space:pre-wrap; tab-size:2}
pre.codigo-modelo{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; overflow:auto; max-height:70vh}
.catalogo-campos{position:sticky; top:12px; max-height:calc(100vh - 40px); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px}
.catalogo-campos h2{font-size:15px; margin:0 0 6px}
.catalogo-campos h3{font-size:13px; margin:14px 0 4px}
.catalogo-campos details{border-top:1px solid var(--line); padding:6px 0}
.catalogo-campos details details{margin-left:10px; border-top:1px dashed var(--line)}
.catalogo-campos summary{cursor:pointer; font-weight:600; font-size:13px}
.catalogo-campos ul{list-style:none; margin:4px 0; padding:0}
.catalogo-campos li{display:flex; flex-direction:column; gap:1px; padding:4px 0}
.catalogo-campos li span{font-size:11.5px; color:var(--ink-3)}
.catalogo-campos .marca{align-self:flex-start; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; background:var(--brand-050); color:var(--brand-700); border:1px solid var(--brand-100); border-radius:6px; padding:2px 6px; cursor:pointer}
.catalogo-campos .marca:hover,.catalogo-campos .marca:focus-visible{background:var(--brand-100)}
label.campo.check{flex-direction:row; align-items:center; gap:8px}
@media (max-width:1100px){ .editor-modelo{grid-template-columns:1fr} .catalogo-campos{position:static; max-height:none} }
@media (max-width:640px){ .relatorio-modelo{padding:16px} .relatorio-modelo table{display:block; overflow-x:auto} }
@media print{
.relatorio-modelo{padding:0; font-size:11.5pt; color:#000}
.relatorio-modelo h2{color:#000; break-after:avoid}
.relatorio-modelo tr{break-inside:avoid}
.relatorio-modelo table.matriz{break-inside:avoid}
.relatorio-modelo thead th{background:#0E6E62 !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
.relatorio-modelo [class^="mc-"],.relatorio-modelo [class*=" mc-"]{-webkit-print-color-adjust:exact; print-color-adjust:exact}
.relatorio-modelo + .relatorio-modelo{break-before:page}
}
/* Frente D3: visualização em tela/impressão sem validade (o oficial é o PDF assinado) */
.laudo-wrap.marca-dagua{position:relative}
.laudo-wrap.marca-dagua::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:20; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='380'%3E%3Ctext x='310' y='200' text-anchor='middle' transform='rotate(-24 310 190)' font-family='Arial,sans-serif' font-size='30' font-weight='700' fill='%2310211C' fill-opacity='0.08'%3EDocumento sem validade%3C/text%3E%3C/svg%3E"); background-repeat:repeat; -webkit-print-color-adjust:exact; print-color-adjust:exact}
html[data-theme="dark"] .laudo-wrap.marca-dagua::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='380'%3E%3Ctext x='310' y='200' text-anchor='middle' transform='rotate(-24 310 190)' font-family='Arial,sans-serif' font-size='30' font-weight='700' fill='%23FFFFFF' fill-opacity='0.08'%3EDocumento sem validade%3C/text%3E%3C/svg%3E")}
.aviso-validade{margin:.6rem 0 1rem}
.quadro-assinados{margin:0 0 1.25rem; padding:1rem 1.25rem}
.quadro-assinados h2{font-size:16px; margin:0 0 .4rem}
@media print{ .laudo-wrap.marca-dagua::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='380'%3E%3Ctext x='310' y='200' text-anchor='middle' transform='rotate(-24 310 190)' font-family='Arial,sans-serif' font-size='30' font-weight='700' fill='%23000000' fill-opacity='0.08'%3EDocumento sem validade%3C/text%3E%3C/svg%3E")} .aviso-validade{display:block !important} }
/* Versionamento: versão no menu (todos) e revisão da tela (administração) */
.rail .rail-versao{font-size:11px; color:#9fd6cb; opacity:.85; padding:8px 8px 2px; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rail .selo-dev{display:inline-block; margin-left:4px; padding:0 5px; border-radius:4px; background:var(--accent); color:#10211C; font-weight:700; font-size:10px}
.rodape-revisao{margin-top:28px; padding-top:8px; border-top:1px dashed var(--line); font-size:11px; color:var(--ink-3); font-family:ui-monospace,Menlo,Consolas,monospace; text-align:right}
.rail .rail-versao{margin-top:auto}
.rail .rail-versao + .foot{margin-top:0}
/* Perguntas: colunas de largura fixa (Conjunto alinhado entre as tabelas por dimensão) */
table.tabela-perguntas{table-layout:fixed; width:100%}
table.tabela-perguntas col.c-ordem{width:56px}
table.tabela-perguntas col.c-conjunto{width:22%}
table.tabela-perguntas col.c-sim{width:64px}
table.tabela-perguntas col.c-acoes{width:96px}
table.tabela-perguntas td{overflow-wrap:break-word}
.grade-referencia{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
/* Cartões que são atalhos (ex.: página da avaliação) */
a.cartao{text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s}
a.cartao strong{color:var(--ink)}
a.cartao:hover,a.cartao:focus-visible{border-color:var(--brand); box-shadow:var(--shadow-md)}
/* Inventário: colunas de largura fixa (alinhadas entre as tabelas de cada domínio) */
table.tabela-dims,table.tabela-linhas{table-layout:fixed; width:100%}
table.tabela-dims col.c-dim{width:30%} table.tabela-dims col.c-pesquisa{width:26%} table.tabela-dims col.c-dist{width:26%} table.tabela-dims col.c-acao{width:18%}
table.tabela-linhas col.c-perigo{width:32%} table.tabela-linhas col.c-dims{width:22%} table.tabela-linhas col.c-decisao{width:15%} table.tabela-linhas col.c-classe{width:17%} table.tabela-linhas col.c-acao{width:14%}
table.tabela-dims td,table.tabela-linhas td{overflow-wrap:break-word}
/* Editor de modelos em tela dividida: código | prévia ao vivo */
.editor-dividido{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; margin-top:.5rem}
.editor-codigo{display:flex; flex-direction:column; gap:10px; min-width:0}
.editor-codigo textarea.codigo-modelo{min-height:68vh; resize:vertical; white-space:pre; overflow:auto; border:1px solid var(--line-strong); border-radius:11px; padding:12px; background:var(--surface); color:var(--ink)}
.barra-blocos{display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:6px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); position:sticky; top:8px; z-index:5}
.barra-blocos button{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:7px; padding:5px 9px; font:600 12.5px/1.2 inherit; cursor:pointer; white-space:nowrap}
.barra-blocos button:hover,.barra-blocos button:focus-visible{border-color:var(--brand); color:var(--brand)}
.barra-blocos select{height:30px; width:auto; padding:0 .5rem; font-size:12.5px; border-radius:7px}
.barra-sep{width:1px; height:22px; background:var(--line-strong); margin:0 4px}
.editor-previa{position:sticky; top:8px; display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 24px); min-width:0}
.previa-topo{display:flex; align-items:end; gap:12px; flex-wrap:wrap}
.previa-topo .campo{grid-column:auto; flex:1; min-width:220px; margin:0}
.previa-status{font-size:12px; color:var(--ink-3); padding-bottom:10px}
.previa-erros:empty{display:none}
.previa-erros{border:1px solid var(--r5); background:color-mix(in srgb,var(--r5) 8%,var(--surface)); color:var(--ink); border-radius:10px; padding:8px 12px; font-size:13px}
.previa-erros ul{margin:.3rem 0 0 1rem; padding:0}
#previa-viva{overflow:auto; flex:1; min-height:300px; margin:0; font-size:12.5px}
.editor-codigo .catalogo-campos{position:static; max-height:none}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media (max-width:1100px){ .editor-dividido{grid-template-columns:1fr} .editor-previa{position:static; max-height:none} .barra-blocos{position:static} }
/* ============ Menu lateral: fixo ou recolhido (computador), gaveta (celular) ============ */
.rail{overflow-y:auto; overflow-x:hidden}
.rail > *{flex-shrink:0}
/* Barra de rolagem do menu: no Windows (Edge/Chrome) ela fica sempre à mostra; fina e na cor do menu. */
.rail{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent}
.rail:hover{scrollbar-color:rgba(255,255,255,.35) transparent}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:999px}
.rail:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35)}
@media (min-width:861px){ .rail{position:sticky; top:0; height:100vh; z-index:40} }
.rail-topo{display:flex; align-items:center; justify-content:space-between; gap:6px; padding-bottom:12px}
.rail .rail-topo .brand{padding:6px 8px}
.rail .rotulo,.rail .wordmark,.rail .who{white-space:nowrap}
.menu-fixar{flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#eaf6f2; cursor:pointer}
.menu-fixar:hover,.menu-fixar:focus-visible{background:rgba(255,255,255,.18)}
.menu-fixar svg{width:16px; height:16px; transition:transform .2s}
html[data-menu="recolhido"] .menu-fixar svg{transform:rotate(180deg)}
.menu-abrir{display:none; place-items:center; width:40px; height:40px; flex:none; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer}
.menu-abrir svg{width:20px; height:20px}
.rail .foot .sair{margin-left:auto}
@media (min-width:861px){
html[data-menu="recolhido"] .app{grid-template-columns:76px 1fr}
html[data-menu="recolhido"] .rail{width:76px; padding-left:14px; padding-right:14px}
html.menu-pronto[data-menu="recolhido"] .rail{transition:width .18s ease, box-shadow .18s ease}
/* recolhido: só ícones e o "M" da Meta; passa o mouse (ou o foco do teclado) e expande por cima do conteúdo */
html[data-menu="recolhido"] .rail:not(:hover):not(:focus-within) :is(.rotulo,.wordmark,.rail-versao,.who,.sair,.menu-fixar){display:none}
html[data-menu="recolhido"] .rail:not(:hover):not(:focus-within) .group{height:1px; margin:12px 6px; background:rgba(255,255,255,.18)}
html[data-menu="recolhido"] .rail:not(:hover):not(:focus-within) .rail-topo{justify-content:center}
html[data-menu="recolhido"] .rail:not(:hover):not(:focus-within) .foot{justify-content:center; padding-left:0; padding-right:0}
html[data-menu="recolhido"] .rail:is(:hover,:focus-within){width:248px; padding-left:16px; padding-right:16px; box-shadow:12px 0 40px rgba(0,0,0,.28)}
}
/* Nome e avatar no menu levam a "Minha senha" */
.rail .foot a.who,.rail .foot a.avatar{text-decoration:none}
.rail .foot a.who:hover,.rail .foot a.who:focus-visible{color:#fff}
.rail .foot a.who:hover small{text-decoration:underline}
/* ============ Segurança de acesso ============ */
.faixa-sessao{margin:0 0 16px}
.tabela-rolagem{overflow-x:auto; margin:.75rem 0 1.5rem}
.tabela-rolagem > table{margin:0}
td.nao-quebra{white-space:nowrap}
.paginacao{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.codigo-ativacao{margin:.5rem 0 1rem}
.codigo-ativacao code{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1.4rem; letter-spacing:.08em; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px 16px; user-select:all}
.seguranca-2fa .codigos-2fa{max-width:420px}
.modal-body .hint-2fa{margin:-.6rem 0 0}
.acao.acao-vaga{pointer-events:none; cursor:default}
/* Central do root: log de SQL */
.tipo-sql{display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.03em; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2)}
.tipo-sql.tipo-insert{color:var(--brand); border-color:color-mix(in srgb,var(--brand) 40%,transparent); background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.tipo-sql.tipo-update{color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 50%,transparent); background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.tipo-sql.tipo-delete{color:var(--perigo); border-color:color-mix(in srgb,var(--perigo) 35%,transparent); background:color-mix(in srgb,var(--perigo) 8%,var(--surface))}
.tabela-log-sql .grupo-transacao td{background:var(--surface-2); font-weight:600; font-size:13px; color:var(--ink-2)}
.tabela-log-sql .comando-sql{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; word-break:break-all; min-width:280px}
.cabecalho-detalhe{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.acoes-detalhe{display:flex; gap:8px; flex-wrap:wrap}
.ficha-log{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px 18px; margin:1rem 0 1.5rem; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.ficha-log dt{font-size:12px; color:var(--ink-3)}
.ficha-log dd{margin:2px 0 0; font-weight:600; word-break:break-all}
.bloco-sql{white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.55; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; color:var(--ink)}
.bloco-sql .sql-chave{color:var(--brand); font-weight:700}
.bloco-sql .sql-texto{color:var(--accent-ink)}
.rastreamento{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.6; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px 12px 16px; list-style:none; margin:0 0 1.5rem; word-break:break-all}
.rastreamento .trace-destaque{color:var(--perigo); font-weight:700}
.bloco-log{white-space:pre-wrap; word-break:break-all; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.55; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; color:var(--ink); max-height:70vh; overflow:auto}
.grade-sistema{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin:1rem 0}
.cartao-sistema{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px}
.cartao-sistema h2{margin-top:0; font-size:1rem}
.cartao-sistema .ficha-log{grid-template-columns:1fr; border:0; padding:0; margin:0; background:none}
.barra-uso{display:inline-block; width:120px; height:8px; border-radius:999px; background:var(--surface-3); vertical-align:middle; overflow:hidden}
.barra-uso > span{display:block; height:100%; background:var(--brand); border-radius:999px}
.phpinfo{overflow-x:auto}
.phpinfo table{width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:13px; table-layout:fixed}
.phpinfo td,.phpinfo th{border:1px solid var(--line); padding:6px 8px; vertical-align:top; word-break:break-word; text-align:left}
.phpinfo td.e{width:32%; font-weight:600; background:var(--surface-2); color:var(--ink)}
.phpinfo td.v{color:var(--ink-2)}
.phpinfo .h td,.phpinfo .h th{background:var(--brand-050); color:var(--ink)}
.phpinfo h1,.phpinfo h2{font-size:1.05rem; margin:1.5rem 0 .5rem}
.phpinfo img{display:none}
.phpinfo pre{white-space:pre-wrap; font-size:12px}