/* Design system Ambiental — identidade visual oficial (ambiental.sc).
   Compartilhado pela landing, pelo formulário genérico e pelo admin.

   Três desvios conscientes do guia da marca, todos anotados no ponto de uso:
   1. `.section` aqui é um CARTÃO, não uma faixa de página — o padding de 76px do
      guia vale para `.page-section`, usada na landing.
   2. `h2`/`h3` recebem tamanho e peso do guia, mas a cor branca só sobre fundo
      colorido: `.validation-summary h3` fica sobre fundo claro e desapareceria.
   3. O header do formulário não é sticky: ele carrega logo, progresso e aviso de
      rascunho, e fixo comeria metade da tela num questionário longo. */

:root{
  /* Cores oficiais da marca */
  --color-blue:          #164194;  /* Azul institucional — textos, títulos, links, footer */
  --color-blue-dark:     #003087;  /* Hover / variação escura */
  --color-green:         #A8C950;  /* Verde lima — CTAs, destaques, acentos */
  --color-green-mid:     #95C11F;  /* Variação de botão/badge */
  --color-green-dark:    #9BBF3B;  /* Hover de botão */
  --color-green-natural: #63B869;  /* Acentos, ícones */

  --color-white:         #FFFFFF;
  --color-gray-light:    #F7F7F7;  /* Fundo de página e de seção alternada */
  --color-gray-mid:      #808080;  /* Textos secundários */
  --color-gray-blue:     #7C91BB;  /* Texto de apoio sobre azul */
  --color-text:          #312D31;
  --color-black:         #000000;

  /* Derivadas — o guia não define tints nem cores de estado, e uma interface de
     formulário precisa das duas coisas. Mesma convenção de nome. */
  --color-green-tint:    #F1F6E1;  /* Fundo de cabeçalho de seção e de avisos */
  --color-green-tint-2:  #FAFCF3;  /* Fundo de cartão aninhado */
  --color-blue-tint:     #EEF2FA;  /* Realce discreto sobre branco */
  --color-border:        #E1E1E1;  /* Mesma neutra que o guia usa em nav-link */
  --color-gray-text:     #5F5F5F;  /* Letra miúda: --color-gray-mid (#808080) tem
                                      3,95:1 sobre branco e reprova no WCAG AA */
  --color-danger:        #B42318;
  --color-danger-bg:     #FFF1F0;
  --color-danger-border: #E2A1A1;
  --color-danger-text:   #6B1D18;
}

*{box-sizing:border-box}

body{
  margin:0;
  /* Coluna flex + `margin-top:auto` no footer: em página curta o footer azul
     encosta no fim da tela em vez de flutuar no meio. */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'Poppins', sans-serif;
  font-size:14px;
  font-weight:300;
  line-height:1.4;
  background:var(--color-gray-light);
  color:var(--color-text);
  text-transform:none;
  letter-spacing:normal;
}

h1{font-size:28px;font-weight:700;color:var(--color-text)}
/* Peso 100 é proposital no guia: cria contraste com o h3 bold. */
h2{font-size:40px;font-weight:100;line-height:44px;color:var(--color-blue)}
h3{font-size:16.4px;font-weight:700;color:var(--color-blue)}
a{color:var(--color-blue)}
a:hover{color:var(--color-blue-dark)}

/* ---------------------------------------------------------------- header
   Fundo branco com o logo à esquerda, como no site institucional. */
header{
  position:relative;
  background:var(--color-white);
  border-bottom:1px solid var(--color-border);
  color:var(--color-text);
  padding:20px 24px 24px;
  text-align:left;
}
/* Canto superior direito, fora do fluxo do header-wrap — assim não interfere no
   alinhamento vertical do logo com o título. Visível por padrão (quem preenche
   um formulário está anônimo, é o caso comum); js/brand-link.js esconde este
   link só quando confirma sessão de admin ativa, já que aí o logo já é o atalho. */
.login-link{
  display:inline-flex;
  position:absolute;
  top:20px;
  right:24px;
  align-items:center;
  border:1px solid var(--color-border);
  border-radius:5px;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--color-blue);
  background:var(--color-gray-light);
  transition:background-color .2s ease;
}
.login-link:hover{background:var(--color-blue-tint);color:var(--color-blue-dark)}
.login-link:focus-visible{outline:2px solid var(--color-green-mid);outline-offset:2px}
.login-link.is-hidden{display:none}
@media(max-width:768px){
  .login-link{position:static;display:flex;justify-content:center;margin:0 0 16px}
}
/* Sobre fundo colorido o h2/h3 vira branco — é o uso do guia. */
.on-blue h2,.on-blue h3{color:var(--color-white)}
.header-wrap{width:100%;display:flex;align-items:center;gap:28px;text-align:left}
.brand-logo{flex:0 0 auto;width:200px;max-width:42vw}
.brand-logo svg,.brand-logo img{display:block;width:100%;height:auto}
/* Só existe quando há sessão de admin: js/brand-link.js envolve o logo num <a>
   para o painel. `display:block` mantém a caixa idêntica, sem deslocar o header. */
.brand-logo-link{display:block;border-radius:5px;transition:opacity .2s ease}
.brand-logo-link:hover{opacity:.75}
.brand-logo-link:focus-visible{outline:2px solid var(--color-green-mid);outline-offset:3px}
.header-copy{flex:1}
.header-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.meta-chip{
  background:var(--color-green-tint);
  border:1px solid var(--color-green);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:400;
  color:var(--color-blue);
}
header h1{margin:0 0 8px}
header p{margin:0;max-width:850px;font-size:14px;color:var(--color-gray-text)}
@media(max-width:768px){
  .header-wrap{flex-direction:column;text-align:center}
  .brand-logo{width:180px;max-width:70vw}
  .header-copy{text-align:center}
}

/* ------------------------------------------------------------- progresso */
.progress-shell{
  width:100%;
  margin:18px 0 0;
  background:var(--color-gray-light);
  border:1px solid var(--color-border);
  padding:12px 14px;
  border-radius:5px;
}
.progress-row{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;font-weight:600;color:var(--color-blue);margin-bottom:8px}
.progress-track{height:10px;background:var(--color-border);border-radius:999px;overflow:hidden}
.progress-bar{width:0;height:100%;background:var(--color-green-mid);border-radius:999px;transition:width .25s ease}
.progress-detail{margin-top:8px;font-size:12px;font-weight:400;color:var(--color-gray-text)}

/* ------------------------------------------------------------- validação */
.validation-summary{
  display:none;
  margin:0 0 18px;
  padding:16px 18px;
  border:1px solid var(--color-danger-border);
  border-left:6px solid var(--color-danger);
  border-radius:5px;
  background:var(--color-danger-bg);
  color:var(--color-danger-text);
}
.validation-summary.show{display:block}
.validation-summary h3{margin:0 0 8px;font-size:16px;color:var(--color-danger-text)}
.validation-summary p{margin:0 0 8px}
.validation-summary ul{margin:0;padding-left:20px}
.validation-summary li{margin:4px 0}
.field-error{border-color:var(--color-danger)!important;background:#fff8f7!important;box-shadow:0 0 0 3px rgba(180,35,24,.12)!important}
.field-error-label{color:var(--color-danger)!important}

/* -------------------------------------------------------- aviso de rascunho */
.save-info{
  width:100%;
  margin:12px 0 0;
  background:var(--color-white);
  color:var(--color-text);
  border:1px solid var(--color-border);
  border-left:5px solid var(--color-green);
  border-radius:5px;
  padding:12px 14px;
  font-size:13px;
  line-height:1.5;
}
.save-info strong{color:var(--color-blue);font-weight:600}
.save-info-title{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:4px;color:var(--color-blue)}

/* ---------------------------------------------------------------- layout
   Conteúdo em 100% da largura: nada de max-width criando vãos nas laterais. */
main{width:100%;margin:24px 0;padding:0 24px 40px}
.container{width:100%;padding-left:24px;padding-right:24px}
/* Só para texto corrido longo, onde a linha comprida atrapalha a leitura. */
.container-narrow{max-width:800px;margin:0 auto;padding-left:24px;padding-right:24px}
.page-section{width:100%;padding-top:76px;padding-bottom:76px}
.page-section-compact{width:100%;padding-top:24px;padding-bottom:24px}

/* `.section` é um cartão de formulário, por isso o padding é o do cartão e não
   os 76px de faixa de página do guia. */
.section{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:5px;
  margin-bottom:20px;
  box-shadow:0 2px 8px rgba(22,65,148,.06);
  overflow:hidden;
}
.section-title{
  display:flex;align-items:center;gap:9px;
  background:var(--color-green-tint);
  border-left:7px solid var(--color-green);
  padding:15px 18px;
  font-size:16.4px;
  font-weight:700;
  color:var(--color-blue);
}
.section-body{padding:20px}
/* O ícone do título compete com um texto 700; 1.15em fica franzino ao lado dele.
   Margem zerada porque estes contêineres são flex com `gap` — somar os dois
   dobraria o espaço. */
.section-title .ti,.mini-title .ti{--ti-size:1.3em;margin-right:0}
.save-info-title .ti{margin-right:0}

/* auto-fit em vez de 2 ou 3 fixas: em tela larga o formulário ganha colunas
   em vez de esticar um campo até virar uma faixa de 1200px. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;width:100%}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.full{grid-column:1/-1}

/* --------------------------------------------------------------- campos */
label{display:block;font-weight:600;margin-bottom:6px;color:var(--color-blue)}
input, select, textarea{
  width:100%;
  border:1px solid var(--color-border);
  border-radius:5px;
  padding:11px 12px;
  font-family:'Poppins', sans-serif;
  font-size:14px;
  font-weight:300;
  color:var(--color-text);
  background:var(--color-white);
}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--color-green-mid);
  box-shadow:0 0 0 3px rgba(149,193,31,.22);
}
.hint{font-size:12px;color:var(--color-gray-text);margin-top:5px}
.required::after{content:" *";color:var(--color-danger)}

/* ------------------------------------------------- instâncias de grupo */
.subprocess-card{
  border:1px solid var(--color-border);
  border-left:4px solid var(--color-green-natural);
  border-radius:5px;
  margin:18px 0;
  background:var(--color-green-tint-2);
}
.subprocess-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:var(--color-green-tint);
  border-bottom:1px solid var(--color-border);
  font-weight:600;
  color:var(--color-blue);
}
.subprocess-header>span:first-child{flex:1}
.subprocess-content{padding:18px}
.mini-title{
  margin:22px 0 12px;
  padding-bottom:7px;
  border-bottom:2px solid var(--color-green-tint);
  color:var(--color-blue);
  font-size:16.4px;
  font-weight:700;
}
.scale-row{display:grid;grid-template-columns:1fr 150px;gap:14px;align-items:center;margin-bottom:12px}
.scale-row label{margin:0}

/* -------------------------------------------------------------- rascunho */
.draft-status{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  min-height:22px;margin-top:10px;
  color:var(--color-gray-text);font-size:12px;font-weight:600;
}
.draft-dot{width:8px;height:8px;border-radius:50%;background:var(--color-green-mid);display:inline-block}

/* --------------------------------------------------------------- botões */
.buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-top:20px}
button{
  border:none;
  border-radius:5px;
  padding:8px 15px;
  font-family:'Poppins', sans-serif;
  font-size:16px;
  font-weight:300;
  text-transform:none;
  cursor:pointer;
  transition:background-color .2s ease;
}
button:disabled{opacity:.6;cursor:not-allowed}
.primary{background:var(--color-green);color:var(--color-white)}
.primary:hover:not(:disabled){background:var(--color-green-dark)}
.secondary{background:var(--color-blue);color:var(--color-white)}
.secondary:hover:not(:disabled){background:var(--color-blue-dark)}
.light{background:var(--color-gray-light);color:var(--color-blue);border:1px solid var(--color-border)}
.light:hover:not(:disabled){background:var(--color-blue-tint)}
.danger{background:var(--color-danger);color:var(--color-white)}
.hidden{display:none!important}

/* --------------------------------------------------------------- avisos */
.notice{
  padding:12px 15px;
  background:var(--color-green-tint);
  border:1px solid var(--color-green);
  border-radius:5px;
  color:var(--color-text);
  margin-bottom:16px;
}

/* -------------------------------------------------------- placar calculado */
.criticality-box{
  margin-top:16px;
  padding:16px;
  border:1px solid var(--color-border);
  border-radius:5px;
  background:var(--color-gray-light);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  text-align:center;
}
.criticality-box strong{display:block;color:var(--color-blue);font-size:13px;font-weight:600;margin-bottom:5px}
.criticality-value{font-size:20px;font-weight:700;color:var(--color-text)}
.criticality-level{font-size:18px;font-weight:700;color:var(--color-text)}
@media(max-width:768px){.criticality-box{grid-template-columns:1fr}}

/* --------------------------------------------------------------- footer
   Azul institucional, como no site. */
footer{
  margin-top:auto;
  background:var(--color-blue);
  color:var(--color-white);
  text-align:center;
  font-size:13px;
  padding:28px 24px;
}
footer a{color:var(--color-white)}
.footer-brand{font-weight:600;color:var(--color-white);margin-bottom:4px}
.footer-meta{font-size:12px;color:var(--color-gray-blue)}

@media(max-width:768px){
  .scale-row{grid-template-columns:1fr}
  h2{font-size:30px;line-height:34px}
}
@media(max-width:576px){
  /* Título longo em 28px come quatro linhas no celular e empurra a primeira
     pergunta para fora da tela. O guia prevê ajuste por breakpoint. */
  header h1{font-size:22px}
}
@media print{
  body{background:var(--color-white)}
  header{background:var(--color-white);color:var(--color-black);border-bottom:2px solid var(--color-black)}
  footer{background:var(--color-white);color:var(--color-black)}
  .buttons,.remove-btn{display:none!important}
  .section,.subprocess-card{box-shadow:none;break-inside:avoid}
  .section-body,.subprocess-content{display:block!important}
  .toggle-arrow{display:none!important}
}

/* ===========================================================================
   Motor genérico de formulários.
   =========================================================================== */

/* Wrapper de campo. Marcador sem estilo próprio: existe para que uma regra
   condicional consiga esconder rótulo e input juntos. */
.fe-field{}

/* Rótulo de um GRUPO de opções (radio/checkbox). Não pode ser <label>, senão
   clicar no texto marcaria a primeira opção — daí a cópia da regra de label. */
.fe-label{display:block;font-weight:600;margin-bottom:6px;color:var(--color-blue)}
.fe-radio-group,.fe-checkbox-group{display:flex;flex-wrap:wrap;gap:14px;padding-top:2px}
.fe-choice{display:flex;align-items:center;gap:6px;font-weight:300;color:var(--color-text);cursor:pointer}
.fe-choice input{width:auto;margin:0}

.criticality-box[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.criticality-box[data-state="pending"] .score-level{opacity:.75}

.fe-instances:empty::after{
  content:"Nenhum item aberto ainda.";
  display:block;
  font-size:12px;
  color:var(--color-gray-text);
  padding:4px 0;
}

/* Recolher/expandir — só nos blocos que o próprio motor desenha
   ([data-section]/[data-group]), nunca nos painéis estáticos de estado
   (carregando/indisponível/erro) nem na landing, que reaproveitam .section. */
.section[data-section]>.section-title,.section[data-group]>.section-title{cursor:pointer;user-select:none}
.section[data-section]>.section-title::after,.section[data-group]>.section-title::after{
  content:'▾';margin-left:auto;font-size:16px;transition:transform .2s ease;
}
.section[data-section].collapsed>.section-title::after,.section[data-group].collapsed>.section-title::after{transform:rotate(-90deg)}
.section[data-section].collapsed>.section-body,.section[data-group].collapsed>.section-body{display:none}

.subprocess-card[data-group]>.subprocess-header{cursor:pointer;user-select:none}
.subprocess-card .toggle-arrow{font-size:15px;transition:transform .2s ease}
.subprocess-card.collapsed .toggle-arrow{transform:rotate(-90deg)}
.subprocess-card.collapsed>.subprocess-content{display:none}

/* Painéis de estado do formulário (indisponível / erro / rota inválida). */
.form-state{width:100%;margin:24px 0;padding:0 24px}
.form-state .section-body p{margin:0 0 12px}

/* Landing informativa. Os cartões viram colunas em tela larga em vez de três
   faixas de 1900px, uma embaixo da outra. */
.landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;align-items:start}
.landing-grid .section{margin-bottom:0}
.landing-lead{margin:0 0 4px;font-size:14px}
.landing-list{margin:8px 0 0;padding-left:20px}
.landing-list li{margin:6px 0}