:root {
  --azul: #0d4f8b;
  --azul-escuro: #093761;
  --azul-claro: #e8f1fa;
  --verde: #1e9e5a;
  --amarelo: #e0a800;
  --vermelho: #c0392b;
  --cinza-texto: #2c3e50;
  --cinza-suave: #6b7a89;
  --borda: #dde5ec;
  --fundo: #f4f7fa;
  --branco: #ffffff;
  --sombra: 0 1px 3px rgba(13, 79, 139, .08), 0 4px 12px rgba(13, 79, 139, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--cinza-texto);
  line-height: 1.55;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Cabeçalho ---- */
.topbar {
  background: var(--azul);
  color: #fff;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--sombra);
}
.topbar .brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .brand .badge-nr {
  background: #fff;
  color: var(--azul);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .5px;
}
.topbar .userbox { display: flex; align-items: center; gap: 16px; font-size: .9rem;
  flex-wrap: wrap; justify-content: flex-end; }
.topbar .userbox a, .topbar .userbox span { color: #fff; }
.topbar .userbox .empresa { opacity: .85; }
/* P1: em telas estreitas o card largo do logo (150px) e o nome longo não podem
   estourar — reduz o card e trunca o nome. (Larguras base ficam inline.) */
@media (max-width: 640px) {
  .topbar .empresa .logo-cliente { width: 116px !important; }
  .topbar .empresa .empresa-nome { display: inline-block; max-width: 40vw; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
}
/* botão "Sair" visível no topo azul (antes ficava azul sobre azul) */
.topbar .userbox .btn-link { color: #fff; border: 1px solid rgba(255,255,255,.55);
  border-radius: 6px; padding: 5px 14px; }
.topbar .userbox .btn-link:hover { background: rgba(255,255,255,.16); text-decoration: none; }

/* Sino de denúncias em aberto (item 37) */
.sino-denuncias { position: relative; font-size: 1.15rem; line-height: 1; text-decoration: none; }
.sino-denuncias:hover { text-decoration: none; filter: brightness(1.15); }
.sino-badge { position: absolute; top: -8px; right: -10px; background: #e74c3c; color: #fff;
  font-size: .68rem; font-weight: 800; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(0,0,0,.15); }

/* Escolha da modalidade de denúncia no portal (item 38) */
.modalidades { display: grid; gap: 10px; margin-top: 4px; }
.modalidade-op { display: grid; grid-template-columns: auto 1fr; column-gap: 10px;
  align-items: start; border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.modalidade-op:hover { border-color: var(--azul, #1c5f9e); background: #f8fbff; }
.modalidade-op input { margin-top: 3px; grid-row: 1 / span 2; }
.modalidade-op .mod-titulo { font-weight: 700; }
.modalidade-op .mod-desc { font-size: .86rem; color: var(--cinza-suave, #667); }

/* ---- Conteúdo ---- */
.container { max-width: 1080px; margin: 0 auto; padding: 32px 24px; }

/* ---- Navegação voltar/início ---- */
.nav-voltar { display: flex; gap: 8px; margin-bottom: 16px; }
.nv-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--branco);
  border: 1px solid var(--borda); color: var(--cinza-texto); padding: 7px 13px; border-radius: 8px;
  font-size: .85rem; font-family: inherit; cursor: pointer; text-decoration: none; }
.nv-btn:hover { background: var(--azul-claro); border-color: #cfe2f3; text-decoration: none; }
.nrs-topo { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 14px; }

/* ---- Planos / pagamento ---- */
.modo-compra { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.modo-op { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 16px; cursor: pointer; }
.modo-op:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.modo-op input { width: auto; margin: 3px 0 0; }
.modo-op span { display: flex; flex-direction: column; }
.modo-op small { color: var(--cinza-suave); }
.modulo-ativo { background: #f3faf5; border-color: #cfe9d8; }

.periodos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.periodo-op { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 16px; cursor: pointer; }
.periodo-op:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.periodo-op input { width: auto; margin: 0; }
.periodo-nome { font-weight: 600; }

.modulos-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.modulo-op { display: flex; align-items: center; gap: 12px; border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 16px; cursor: pointer; }
.modulo-op:has(input:checked) { border-color: var(--azul); background: #f6fbff; }
.modulo-op input { width: auto; margin: 0; }
.modulo-ic { font-size: 1.5rem; }
.modulo-txt { flex: 1; display: flex; flex-direction: column; }
.modulo-txt small { color: var(--cinza-suave); }
.modulo-preco { font-weight: 700; color: var(--azul); white-space: nowrap; }
.modulo-preco small { color: var(--cinza-suave); font-weight: 400; }

.total-box { display: flex; justify-content: space-between; align-items: center; background: var(--azul-claro);
  border-radius: 12px; padding: 16px 20px; margin: 18px 0; }
.total-label { font-size: .8rem; text-transform: uppercase; color: var(--cinza-suave); font-weight: 700; }
.total-cheio { color: var(--cinza-suave); font-size: .9rem; text-decoration: line-through; }
.total-sub { color: var(--cinza-suave); font-size: .85rem; }
.total-valor { font-size: 1.8rem; font-weight: 800; color: var(--azul-escuro); }

.formas-pgto { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.forma-op { display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 14px; cursor: pointer; }
.forma-op:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.forma-op input { width: auto; margin: 0; }
.aviso-simulado { background: #fff7e0; border: 1px solid #f0d98a; border-radius: 8px; padding: 12px 14px;
  font-size: .88rem; margin-bottom: 16px; }
.aviso-pix { background: var(--azul-claro); border: 1px solid #cfe2f3; border-radius: 8px; padding: 12px 14px;
  font-size: .9rem; margin: 16px 0 10px; }
h1 { font-size: 1.7rem; margin: 0 0 4px; }
.subtitulo { color: var(--cinza-suave); margin: 0 0 28px; }

/* ---- Cartões de módulos ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--sombra);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card .icone { font-size: 2rem; }
.card h3 { margin: 12px 0 6px; font-size: 1.1rem; }
.card p { margin: 0; color: var(--cinza-suave); font-size: .92rem; }
.card.clicavel:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(13,79,139,.14); }
.card .em-breve {
  display: inline-block; margin-top: 12px; font-size: .72rem; font-weight: 700;
  color: var(--amarelo); background: #fff7e0; padding: 3px 8px; border-radius: 20px;
}
.card-bloqueado { background: #fafbfc; }
.card-bloqueado h3 { color: var(--cinza-suave); }
.tag-contratar { display: inline-block; margin-top: 12px; font-size: .72rem; font-weight: 700;
  color: #9a5b00; background: #fde9d8; padding: 3px 10px; border-radius: 20px; }

/* ---- Banner de assinatura ---- */
.assinatura {
  display: flex; align-items: center; gap: 12px;
  background: var(--azul-claro); border: 1px solid #cfe2f3;
  border-radius: 10px; padding: 14px 18px; margin-bottom: 28px;
}
.pill { padding: 3px 12px; border-radius: 20px; font-size: .8rem; font-weight: 700; }
.pill.ok { background: #d8f3e3; color: var(--verde); }
.pill.alerta { background: #fff7e0; color: var(--amarelo); }
.pill.erro { background: #fde2de; color: var(--vermelho); }

/* ---- Cartão de perfil do cliente ---- */
.perfil-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
  padding: 16px 20px; box-shadow: var(--sombra); margin-bottom: 22px; }
.perfil-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.perfil-nome { font-size: 1.1rem; font-weight: 700; }
.perfil-tag { font-size: .72rem; font-weight: 700; background: var(--azul-claro); color: var(--azul-escuro);
  padding: 2px 10px; border-radius: 20px; }
.perfil-dados { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--cinza-suave); font-size: .9rem; }

/* ---- Mensagens ---- */
.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.messages li { padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; font-size: .92rem; }
.messages .success { background: #d8f3e3; color: #14703f; }
.messages .danger  { background: #fde2de; color: #922b21; }
.messages .warning { background: #fff7e0; color: #8a6d00; }
.messages .info    { background: var(--azul-claro); color: var(--azul-escuro); }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: var(--branco); border-radius: 14px; box-shadow: var(--sombra);
  width: 100%; max-width: 400px; padding: 36px; border: 1px solid var(--borda);
}
.login-card .brand { text-align: center; margin-bottom: 6px; }
.login-card .brand .badge-nr {
  background: var(--azul); color: #fff; border-radius: 8px; padding: 4px 12px;
  font-weight: 800; font-size: 1.3rem; letter-spacing: 1px;
}
.login-card h2 { text-align: center; font-size: 1.2rem; margin: 14px 0 4px; }
.login-card .sub { text-align: center; color: var(--cinza-suave); font-size: .9rem; margin-bottom: 24px; }

label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=date], select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--borda); border-radius: 8px;
  font-size: .95rem; margin-bottom: 16px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(13,79,139,.12); }
/* Campos numéricos sem as setas (aparência de campo de formulário do sistema) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.btn {
  display: inline-block; background: var(--azul); color: #fff; border: none;
  padding: 12px 20px; border-radius: 8px; font-size: .95rem; font-weight: 600;
  cursor: pointer; width: 100%; transition: background .12s;
}
.btn:hover { background: var(--azul-escuro); }
.btn-link { background: none; color: var(--azul); width: auto; padding: 0; }

.erro-form { color: var(--vermelho); font-size: .85rem; margin: -8px 0 14px; }

.login-rodape { text-align: center; margin-top: 18px; font-size: .9rem; color: var(--cinza-suave); }

/* mostrar/ocultar senha */
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 46px; }
.ver-senha {
  position: absolute; right: 6px; top: 6px;
  background: none; border: none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; padding: 6px 8px; border-radius: 6px;
  color: var(--cinza-suave);
}
.ver-senha:hover { background: rgba(0,0,0,.06); }

/* ---- Cadastro ---- */
.cadastro-wrap { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 16px; }
.cadastro-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: var(--sombra); width: 100%; max-width: 600px; padding: 34px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.radio-tipo { display: flex; gap: 18px; margin-bottom: 16px; }
.radio-tipo label { font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.radio-tipo input { width: auto; margin: 0; }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } }

/* ---- Navegador da norma (Consultar) ---- */
.norma-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.norma-topo .voltar { font-size: .85rem; color: var(--cinza-suave); }
.norma-topo h1 { margin-top: 6px; font-size: 1.45rem; }

.busca { display: flex; gap: 10px; margin: 18px 0 26px; align-items: center; flex-wrap: wrap; }
.busca input[type=search] { margin: 0; flex: 1; min-width: 0; }

.grupo { font-size: 1.05rem; color: var(--azul); border-bottom: 2px solid var(--azul-claro);
  padding-bottom: 6px; margin: 26px 0 14px; }

.norma-layout { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }

.norma-nav {
  position: sticky; top: 16px; background: var(--branco); border: 1px solid var(--borda);
  border-radius: 10px; padding: 14px; box-shadow: var(--sombra); max-height: 82vh; overflow: auto;
}
.norma-nav .nav-titulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--cinza-suave); font-weight: 700; margin-bottom: 8px; }
.norma-nav a { display: block; padding: 6px 8px; border-radius: 6px; font-size: .85rem;
  color: var(--cinza-texto); }
.norma-nav a:hover { background: var(--azul-claro); text-decoration: none; }

.norma-conteudo { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
  padding: 10px 28px 28px; box-shadow: var(--sombra); }

.item { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid #f0f4f8; scroll-margin-top: 14px; }
.item .num { font-weight: 700; color: var(--azul); font-size: .85rem; padding-top: 1px; }
.item .corpo { white-space: pre-line; }
.item.nivel-2 { grid-template-columns: 1fr; margin-top: 22px; }
.item.nivel-2 .num { display: none; }
.item.nivel-2 .corpo { font-size: 1.15rem; font-weight: 700; color: var(--azul-escuro);
  border-left: 4px solid var(--azul); padding-left: 12px; }
.item.nivel-3 .corpo { margin-left: 0; }
.item.nivel-4 .corpo { margin-left: 14px; }
.item.nivel-5 .corpo { margin-left: 28px; }
.item.nivel-6 .corpo { margin-left: 42px; }

.bloco { margin-top: 36px; padding-top: 18px; border-top: 2px solid var(--azul-claro);
  color: var(--azul-escuro); scroll-margin-top: 14px; }

.definicao { padding: 10px 0; border-bottom: 1px solid #f0f4f8; scroll-margin-top: 14px; }
.definicao strong { color: var(--azul-escuro); }
.definicao .corpo { white-space: pre-line; color: var(--cinza-texto); margin-top: 2px; }

mark { background: #fff2a8; padding: 0 2px; border-radius: 3px; }

@media (max-width: 760px) {
  .norma-layout { grid-template-columns: 1fr; }
  .norma-nav { position: static; max-height: none; }
}

/* ---- Assistente de IA (Entender) ---- */
.cota { color: var(--cinza-suave); }
.chat { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: var(--sombra); overflow: hidden; }
.chat-msgs { max-height: 56vh; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.chat-vazio { color: var(--cinza-suave); text-align: center; padding: 20px 0; }
.exemplos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.chip-ex { background: var(--azul-claro); border: 1px solid #cfe2f3; color: var(--azul-escuro);
  padding: 8px 14px; border-radius: 20px; font-size: .85rem; cursor: pointer; text-align: left; }
.chip-ex:hover { background: #d8e8f7; }

.bolha { max-width: 80%; padding: 12px 16px; border-radius: 14px; white-space: pre-line; line-height: 1.5; }
.bolha .rotulo { font-size: .72rem; font-weight: 700; opacity: .7; margin-bottom: 4px; }
.bolha-user { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; }
.bolha-user .rotulo { color: #fff; }
.bolha-ia { align-self: flex-start; background: var(--azul-claro); color: var(--cinza-texto); border-bottom-left-radius: 4px; }

.chat-form { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--borda); background: #fbfdff; }
.chat-form textarea { margin: 0; flex: 1; resize: vertical; }
.chat-form .btn { width: auto; align-self: stretch; padding: 0 22px; }
.chat-aviso { font-size: .78rem; color: var(--cinza-suave); padding: 0 14px 12px; margin: 0; }

/* ---- PGR (Implementar) ---- */
.pgr-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.etapas { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.etapa { display: flex; align-items: center; gap: 16px; background: var(--branco);
  border: 1px solid var(--borda); border-radius: 12px; padding: 16px 20px; box-shadow: var(--sombra);
  color: var(--cinza-texto); transition: transform .12s, box-shadow .12s; }
a.etapa:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,79,139,.14); text-decoration: none; }
.etapa-num { width: 38px; height: 38px; border-radius: 50%; background: var(--azul); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.etapa-info { flex: 1; }
.etapa-info h3 { margin: 0 0 2px; font-size: 1.05rem; }
.etapa-info p { margin: 0; color: var(--cinza-suave); font-size: .9rem; }
.etapa-cont { font-size: 1.6rem; font-weight: 800; color: var(--azul); }
.etapa-breve { opacity: .75; }

.niveis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.nivel-card { border-radius: 10px; padding: 16px; font-weight: 700; color: #fff; }
.nivel-card .qtd { display: block; font-size: 2rem; }

/* cores dos níveis de risco */
.n-baixo  { background: var(--verde) !important; color: #fff !important; }
.n-medio  { background: var(--amarelo) !important; color: #5a4500 !important; }
.n-alto   { background: #e67e22 !important; color: #fff !important; }
.n-critico{ background: var(--vermelho) !important; color: #fff !important; }

.badge-nivel { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: .82rem;
  font-weight: 700; background: #e9eef3; color: var(--cinza-texto); }

/* tabela genérica */
.tabela { width: 100%; border-collapse: collapse; background: var(--branco);
  border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; box-shadow: var(--sombra); }
.tabela th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
  color: var(--cinza-suave); background: #f7fafd; padding: 11px 14px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 11px 14px; border-bottom: 1px solid #f0f4f8; vertical-align: top; }
.tabela tr:last-child td { border-bottom: none; }
.tabela .centro { text-align: center; }
.sub-linha { color: var(--cinza-suave); font-size: .82rem; margin-top: 2px; }
.acoes-celula { white-space: nowrap; text-align: right; }
.link-acao { font-size: .85rem; margin-right: 10px; }
.btn-excluir { background: none; border: none; color: var(--vermelho); cursor: pointer; font-size: .85rem; }
.btn-excluir:hover { text-decoration: underline; }

/* formulário */
.form-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
  padding: 22px; box-shadow: var(--sombra); margin-bottom: 24px; max-width: 720px; }
.campo { margin-bottom: 14px; }
.campo > label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.campo .dica, .dica { font-size: .78rem; color: var(--cinza-suave); margin-top: -8px; }
.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.previa-nivel { background: var(--azul-claro); border-radius: 8px; padding: 12px 16px; margin: 4px 0 16px;
  font-weight: 600; }
.vazio-dica { color: var(--cinza-suave); background: var(--branco); border: 1px dashed var(--borda);
  border-radius: 10px; padding: 18px; }

@media (max-width: 620px) { .linha-dupla { grid-template-columns: 1fr; } }

/* barra de conformidade */
.conformidade { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
  padding: 16px 20px; box-shadow: var(--sombra); margin-bottom: 22px; }
.conf-topo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-bottom: 10px; font-size: .92rem; color: var(--cinza-suave); }
.barra { height: 12px; background: #eef3f8; border-radius: 8px; overflow: hidden; }
.barra-fill { height: 100%; background: var(--verde); border-radius: 8px; transition: width .3s; }

/* mapa de calor (matriz 5×5) */
.matriz-wrap { display: inline-block; }
.matriz { border-collapse: separate; border-spacing: 4px; }
.matriz .eixo-sev { color: var(--cinza-suave); font-size: .8rem; width: 22px; text-align: center; }
.matriz .celula { width: 52px; height: 44px; border-radius: 8px; text-align: center; vertical-align: middle;
  opacity: .55; }
.matriz .celula.n-baixo, .matriz .celula.n-medio, .matriz .celula.n-alto, .matriz .celula.n-critico { opacity: .5; }
.matriz .celula-qtd { display: inline-block; min-width: 26px; padding: 3px 0; background: rgba(0,0,0,.78);
  color: #fff; border-radius: 14px; font-weight: 800; font-size: .9rem; }
.matriz .eixo-prob-linha th { color: var(--cinza-suave); font-size: .8rem; font-weight: 600; padding-top: 2px; }
.matriz-legenda { display: flex; gap: 16px; margin-top: 10px; font-size: .82rem; color: var(--cinza-suave); }
.matriz-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px;
  vertical-align: middle; }

/* cartões-resumo do plano */
.resumo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;
  margin-bottom: 20px; }
.resumo-card { background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; padding: 14px;
  box-shadow: var(--sombra); font-size: .85rem; color: var(--cinza-suave); }
.resumo-card .rc-num { display: block; font-size: 1.7rem; font-weight: 800; color: var(--cinza-texto); }
.resumo-card.ok .rc-num { color: var(--verde); }
.resumo-card.alerta { border-color: #f0c9c2; }
.resumo-card.alerta .rc-num { color: var(--vermelho); }
.resumo-card.destaque { background: var(--azul); color: #fff; }
.resumo-card.destaque .rc-num { color: #fff; }

/* status e ações */
.status-badge { padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.s-pendente { background: #fde9d8; color: #9a5b00; }
.s-em_andamento { background: var(--azul-claro); color: var(--azul-escuro); }
.s-concluida { background: #d8f3e3; color: #14703f; }
.linha-atrasada { background: #fff6f4; }
.check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--borda); background: #fff;
  color: transparent; cursor: pointer; font-weight: 800; line-height: 1; }
.check:hover { border-color: var(--verde); color: #bfe6cf; }
.check-on { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---- Monitoramento ---- */
.status-hero { display: flex; gap: 18px; align-items: flex-start; border-radius: 14px; padding: 22px 24px;
  margin: 20px 0 24px; box-shadow: var(--sombra); border: 1px solid var(--borda); }
.status-hero .status-icone { font-size: 2.4rem; line-height: 1; }
.status-titulo { font-size: 1.4rem; font-weight: 800; }
.status-lista { margin: 8px 0 0; padding-left: 18px; }
.status-lista li { margin: 3px 0; }
.status-lista .g-erro { color: var(--vermelho); font-weight: 600; }
.status-lista .g-alerta { color: #8a6d00; }
.status-ok { margin: 6px 0 0; color: #14703f; }
.st-em_dia { background: #ecfaf1; border-color: #b9e6cc; }
.st-em_dia .status-titulo { color: var(--verde); }
.st-atencao { background: #fff8e8; border-color: #f0dca0; }
.st-atencao .status-titulo { color: #9a6d00; }
.st-nao_conforme { background: #fdeeec; border-color: #f0c2ba; }
.st-nao_conforme .status-titulo { color: var(--vermelho); }

.revisao-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 22px;
  box-shadow: var(--sombra); margin-bottom: 12px; }
.revisao-card h3 { margin: 0; font-size: 1.05rem; }
.pill.alerta { background: #fff7e0; color: #8a6d00; }

/* =====================================================================
   Responsividade (item 14) — celular e tablet, sem alterar o desktop.
   ===================================================================== */
@media (max-width: 900px) {
  .container { padding: 20px 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .norma-topo { flex-direction: column; align-items: stretch; }
}

@media (max-width: 720px) {
  /* height: auto — sem isso a barra fica presa em 60px e "corta" o botão Sair
     quando os itens quebram em várias linhas no celular. */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; height: auto; }
  .topbar .userbox { flex-wrap: wrap; gap: 10px 14px; font-size: .82rem; width: 100%;
    justify-content: flex-start; }
  .topbar .userbox form { margin-left: auto; }  /* empurra o "Sair" para o canto */
  /* espaço no rodapé p/ os botões flutuantes (Início/Notas) não taparem os
     botões de ação (ex.: Salvar) no celular. */
  .container { padding-bottom: 92px; }
  h1 { font-size: 1.35rem; }
  .nrs-topo { flex-wrap: wrap; gap: 10px; }

  /* Tabelas ficam roláveis na horizontal (não estouram a tela) */
  .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Chat da IA confortável no celular */
  .chat-msgs { max-height: 48vh; }
  .chat-form { flex-direction: column; }
  .chat-form .btn { padding: 12px; }

  /* Planos e pagamento empilham */
  .total-box { flex-direction: column; align-items: flex-start; gap: 8px; }
  .periodos { flex-direction: column; }
  .formas-pgto label, .modulo-op { font-size: .9rem; }

  .login-card, .cadastro-card { padding: 22px 18px; }
  .perfil-dados { flex-direction: column; gap: 6px; }
  .nav-voltar { flex-wrap: wrap; }
}

@media (max-width: 400px) {
  .container { padding: 14px 10px 92px; }  /* mantém o respiro do rodapé */
  .topbar .brand { font-size: .95rem; }
}

/* =====================================================================
   Help contextual por campo (item N2) — ícone "?" com balão de exemplo.
   ===================================================================== */
.ajuda-wrap { position: relative; display: inline-block; }
.ajuda { width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--azul,#1c5f9e);
  color: #fff; font-size: .72rem; font-weight: 800; cursor: pointer; line-height: 18px; padding: 0;
  vertical-align: middle; margin-left: 6px; }
.ajuda:hover { background: var(--azul-escuro,#0e3a66); }
.ajuda-bolha { display: none; position: absolute; z-index: 55; left: 24px; top: -6px; width: 280px;
  background: #0e2a45; color: #fff; border-radius: 10px; padding: 12px 14px; font-size: .83rem;
  line-height: 1.45; font-weight: 400; box-shadow: 0 8px 24px rgba(0,0,0,.28); text-align: left; }
.ajuda-bolha.aberto { display: block; }
.ajuda-bolha strong { color: #ffd479; }
.ajuda-bolha .ex { display: block; margin-top: 6px; color: #bfe0ff; }
@media (max-width: 720px) {
  .ajuda-bolha { left: auto; right: 0; top: 24px; width: min(280px, 80vw); }
}

/* =====================================================================
   M7 — Consultar mais largo e com fonte maior (melhor leitura).
   ===================================================================== */
.container-consulta { max-width: 1240px; }
.container-consulta .norma-layout { grid-template-columns: 230px 1fr; gap: 32px; }
.container-consulta .norma-conteudo { padding: 28px 32px; }
.container-consulta .item .corpo,
.container-consulta .definicao .corpo { font-size: 1.06rem; line-height: 1.62; }
.container-consulta .item .num { font-size: .95rem; }
.container-consulta .item.nivel-2 .corpo { font-size: 1.28rem; }
.container-consulta .definicao strong { font-size: 1.08rem; }
.container-consulta .busca input[type=search] { font-size: 1.02rem; padding: 12px 14px; }
/* No celular, a consulta também colapsa para uma coluna (a regra acima tem
   especificidade maior que a genérica do .norma-layout e venceria a media
   query de cima — por isso o colapso é repetido aqui, com o mesmo seletor). */
@media (max-width: 760px) {
  .container-consulta .norma-layout { grid-template-columns: 1fr; }
}

/* =====================================================================
   M3 — Atalho flutuante para o início (todas as telas, responsivo).
   ===================================================================== */
.voltar-inicio { position: fixed; left: 16px; bottom: 16px; z-index: 58; background: #fff;
  border: 1px solid var(--borda,#e3e9f0); color: var(--azul,#1c5f9e); border-radius: 999px;
  padding: 10px 16px; font-weight: 700; text-decoration: none; font-size: .9rem;
  box-shadow: 0 4px 14px rgba(20,58,92,.18); font-family: inherit; cursor: pointer; }
.voltar-inicio:hover { background: var(--azul-claro,#eef3f9); text-decoration: none; }
@media (max-width: 720px) {
  .voltar-inicio { left: 12px; bottom: 12px; padding: 9px 13px; font-size: .85rem; }
}

/* =====================================================================
   M2 — Modo Tutor: balão explicativo no hover + interruptor global.
   ===================================================================== */
.tutor-balao { position: fixed; z-index: 80; display: none; max-width: 300px;
  background: #0e2a45; color: #fff; border-radius: 10px; padding: 11px 13px;
  font-size: .83rem; line-height: 1.42; box-shadow: 0 8px 26px rgba(0,0,0,.32); }
.tutor-balao .tb-titulo { font-weight: 700; color: #ffd479; margin-bottom: 3px; }
.tutor-balao .tb-texto { max-height: 92px; overflow: hidden; }
.tutor-balao.expandido .tb-texto { max-height: 240px; overflow: auto; }
.tutor-balao .tb-acoes { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-top: 8px; }
.tutor-balao .tb-mais { color: #7fc4ff; font-size: .78rem; text-decoration: underline; cursor: pointer; }
.tutor-balao .tb-ouvir { background: rgba(255,255,255,.14); color: #fff; border: none;
  border-radius: 6px; padding: 3px 9px; font-size: .75rem; cursor: pointer; }
.tutor-balao .tb-ouvir:hover { background: rgba(255,255,255,.26); }

.tutor-toggle { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px; padding: 5px 12px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.tutor-toggle:hover { background: rgba(255,255,255,.24); }
.tutor-toggle.off { opacity: .62; }

/* M2b — Tutorial da tela (guiado): painel + destaque do recurso. */
.tutor-coach { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 85;
  width: min(440px, 92vw); background: #fff; border-radius: 14px; padding: 16px 18px; display: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.32); }
.tutor-coach .tc-topo { display: flex; justify-content: space-between; align-items: center; }
.tutor-coach .tc-titulo { color: #143a5c; font-size: 1.05rem; }
.tutor-coach .tc-x { background: none; border: none; font-size: 1.15rem; cursor: pointer; color: #8a97a5; }
.tutor-coach .tc-texto { color: #4a5b6c; font-size: .92rem; line-height: 1.5; margin: 6px 0 12px; }
.tutor-coach .tc-nav { display: flex; justify-content: space-between; align-items: center; }
.tutor-coach .tc-nav button { border: none; border-radius: 8px; padding: 9px 15px; font-weight: 700; cursor: pointer; }
.tutor-coach .tc-prev { background: #eef3f9; color: #143a5c; }
.tutor-coach .tc-next { background: var(--azul,#1c5f9e); color: #fff; }
.tutor-coach .tc-pos { font-size: .8rem; color: #8a97a5; }
.tutor-destaque { outline: 3px solid #ffb020 !important; outline-offset: 3px; border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(255,176,32,.25); position: relative; z-index: 6; }

/* Item 43 — referências da norma citadas pela IA (link) + janela flutuante. */
.ref-norma { color: var(--azul, #1c5f9e); font-weight: 700; text-decoration: underline dotted;
  cursor: pointer; white-space: nowrap; }
.ref-norma:hover { text-decoration: underline; background: #eaf2fb; border-radius: 4px; }

.nr-ref-panel { position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: min(380px, 92vw); max-height: 72vh; background: #fff; border: 1px solid var(--borda, #d9dee5);
  border-radius: 14px; box-shadow: 0 16px 46px rgba(20,58,92,.34);
  display: none; flex-direction: column; overflow: hidden; }
.nr-ref-panel.aberto { display: flex; }
.nr-ref-cab { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px; background: #143a5c; color: #fff; cursor: move; }
.nr-ref-cab .nr-ref-titulo { font-size: .92rem; }
.nr-ref-acoes { display: flex; align-items: center; gap: 6px; }
.nr-ref-ouvir { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.nr-ref-ouvir:hover { background: rgba(255,255,255,.28); }
.nr-ref-fechar { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 2px 4px; }
.nr-ref-corpo { padding: 12px 14px; overflow-y: auto; }
.nr-ref-item { font-size: .9rem; line-height: 1.5; color: #33475b; margin-bottom: 10px; }
.nr-ref-item.titulo { font-weight: 700; color: #143a5c; }
.nr-ref-num { display: inline-block; background: #eaf2fb; color: var(--azul, #1c5f9e);
  border-radius: 5px; padding: 0 6px; font-weight: 700; font-size: .82rem; margin-right: 2px; }
.nr-ref-vazio { color: var(--cinza-suave, #8a97a5); font-size: .88rem; }
@media (max-width: 640px) {
  .nr-ref-panel { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 62vh; }
}

/* Preços (item 41.c) — painel do dono, no padrão dos formulários do sistema. */
.preco-card { margin-bottom: 16px; }
.preco-titulo { margin: 0 0 14px; font-size: 1.05rem; }
.preco-titulo span { color: var(--cinza-suave); font-weight: 400; font-size: .9rem; }
/* Campos compactos que quebram em linha (não esticam pela largura toda). */
.preco-grid { display: flex; flex-wrap: wrap; gap: 16px 22px; }
.preco-grid .campo { margin: 0; width: 210px; max-width: 100%; }
.preco-grid > .campo > label { font-size: .82rem; }
.preco-grid label small { color: var(--cinza-suave); font-weight: 400; }
.preco-box { position: relative; max-width: 210px; }
.preco-box .rs { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--cinza-suave); font-size: .92rem; pointer-events: none; z-index: 1; }
/* valor logo após o "R$" (sem o vão gigante de antes) */
.preco-box input { margin-bottom: 0 !important; padding-left: 40px !important; }
/* dica volta a respirar: o input do preço não tem margem inferior, então a
   .dica (que usa margin-top negativo no formulário geral) não pode colar nele. */
.preco-grid .campo .dica, .preco-card .dica { margin-top: 8px; }
.preco-acoes { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.grupo-sub { font-weight: 400; color: var(--cinza-suave); font-size: .85rem; }

/* Assistente de IA flutuante (item 44) — pop-up no canto, acima do botão Notas. */
.ia-launcher { position: fixed; right: 18px; bottom: 18px; z-index: 61;
  background: var(--azul, #1c5f9e); color: #fff; border: none; border-radius: 999px;
  padding: 11px 18px; font-weight: 700; cursor: pointer; font-size: .92rem;
  display: flex; align-items: center; gap: 6px; box-shadow: 0 6px 20px rgba(20,58,92,.4); }
.ia-launcher:hover { background: var(--azul-escuro, #0e3a66); }
.ia-painel { position: fixed; right: 18px; bottom: 18px; z-index: 62; width: min(372px, 94vw);
  height: min(70vh, 552px); background: #fff; border: 1px solid var(--borda, #e3e9f0);
  border-radius: 16px; box-shadow: 0 16px 46px rgba(0,0,0,.32);
  display: flex; flex-direction: column; overflow: hidden; }
.ia-painel[hidden] { display: none; }
.ia-cab { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: var(--azul, #1c5f9e); color: #fff; }
.ia-x { background: none; border: none; color: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1; }
.ia-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column;
  gap: 8px; background: #f7f9fc; }
.ia-bolha { padding: 9px 12px; border-radius: 12px; font-size: .9rem; line-height: 1.45;
  white-space: pre-wrap; max-width: 92%; }
.ia-user { align-self: flex-end; background: var(--azul, #1c5f9e); color: #fff; border-bottom-right-radius: 3px; }
.ia-ia, .ia-sys { align-self: flex-start; background: #fff; border: 1px solid var(--borda, #e3e9f0);
  color: #233; border-bottom-left-radius: 3px; }
.ia-pagar { display: inline-block; margin-top: 6px; background: #ffb020; color: #143a5c;
  font-weight: 700; padding: 8px 14px; border-radius: 8px; text-decoration: none; }
.ia-pagar:hover { text-decoration: none; filter: brightness(1.05); }
.ia-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--borda, #e3e9f0); background: #fff; }
.ia-form textarea { flex: 1; resize: none; margin: 0; padding: 9px 11px; max-height: 90px; font-size: .92rem; }
.ia-enviar { background: var(--azul, #1c5f9e); color: #fff; border: none; border-radius: 8px;
  padding: 0 16px; font-size: 1.1rem; cursor: pointer; }
.ia-enviar:disabled { opacity: .5; cursor: default; }
@media (max-width: 720px) {
  .ia-launcher { bottom: 16px; }
  .ia-painel { right: 8px; left: 8px; bottom: 16px; width: auto; height: min(66vh, 520px); }
}

/* Diálogos no padrão do sistema (item 47) — substituem alert/confirm nativos. */
.nrui-overlay { position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(14, 42, 69, .5); }
.nrui-overlay.aberto { display: flex; }
.nrui-box { background: #fff; border-radius: 14px; width: min(420px, 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 22px 22px 18px;
  animation: nrui-pop .12s ease-out; }
@keyframes nrui-pop { from { transform: translateY(8px) scale(.98); opacity: .4; } to { transform: none; opacity: 1; } }
.nrui-msg { color: #233; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; }
.nrui-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.nrui-acoes button { border-radius: 8px; padding: 10px 20px; font-size: .92rem;
  font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.nrui-cancel { background: #eef3f9; color: #143a5c; border-color: var(--borda, #e3e9f0); }
.nrui-cancel:hover { background: #e2eaf3; }
.nrui-ok { background: var(--azul, #1c5f9e); color: #fff; }
.nrui-ok:hover { background: var(--azul-escuro, #0e3a66); }
.nrui-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  z-index: 210; background: #143a5c; color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: .92rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity: 0; transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center; }
.nrui-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Bloco de exportação do PGR (item 49) — tela / PDF / Word. */
.pgr-export { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; background: #eef6ef; border: 1px solid #cfe6d4; border-radius: 12px;
  padding: 16px 18px; margin: 4px 0 18px; }
.pgr-export strong { color: #143a5c; }
.pgr-export-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Aviso de obrigatoriedade do PGR / riscos psicossociais (item 49). */
.pgr-obrig { background: #eef3f9; border: 1px solid #d3e0ee; border-left: 4px solid var(--azul, #1c5f9e);
  border-radius: 10px; padding: 14px 18px; margin: 4px 0 16px; }
.pgr-obrig > strong { color: #143a5c; display: block; margin-bottom: 6px; }
.pgr-obrig p { font-size: .9rem; color: #33475b; margin: 6px 0 0; line-height: 1.5; }
.pgr-obrig-psi { background: #fff7e6; border: 1px solid #f0d98a; border-radius: 8px;
  padding: 8px 12px; margin-top: 10px !important; }
.pgr-obrig-alerta { color: #8a4b00; font-weight: 600; }

/* ---- Acessos rápidos (Tarefa 55) ---- */
/* Botões discretos que abrem recursos relacionados num painel lateral,
   sem sair da tela atual. Escopado: não altera nada do layout existente. */
.acessos-rapidos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 18px; }
.acessos-rapidos .ar-rotulo { font-size: .78rem; color: var(--cinza-suave);
  text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.ar-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--branco);
  border: 1px solid var(--borda); color: var(--cinza-texto); padding: 6px 12px;
  border-radius: 8px; font-size: .82rem; cursor: pointer; text-decoration: none; }
.ar-btn:hover { background: var(--azul-claro); border-color: #cfe2f3; text-decoration: none; }

.janela-overlay { position: fixed; inset: 0; background: rgba(13, 30, 45, .45);
  z-index: 300; display: none; }
.janela-overlay.aberta { display: block; }
.janela { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 94vw);
  background: var(--fundo, #f4f6f9); z-index: 301; display: none;
  flex-direction: column; box-shadow: -10px 0 30px rgba(0, 0, 0, .25); }
.janela.aberta { display: flex; }
.janela-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--azul); color: #fff; }
.janela-cab strong { flex: 1; font-size: .95rem; }
.janela-cab a { color: #fff; font-size: .8rem; border: 1px solid rgba(255,255,255,.5);
  border-radius: 6px; padding: 4px 10px; text-decoration: none; white-space: nowrap; }
.janela-cab a:hover { background: rgba(255,255,255,.16); }
.janela-fechar { background: none; border: none; color: #fff; font-size: 1.3rem;
  cursor: pointer; line-height: 1; padding: 2px 6px; }
.janela-corpo { flex: 1; }
.janela-corpo iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 760px) {
  .janela { width: 100vw; }             /* mobile: painel em tela cheia */
}

/* Página aberta DENTRO do painel (iframe): só o conteúdo, sem o chrome. */
.em-janela .topbar, .em-janela .nav-voltar, .em-janela .voltar-inicio,
.em-janela .notas-btn, .em-janela .notas-painel, .em-janela .ia-launcher,
.em-janela .ia-painel { display: none !important; }
.em-janela .container { padding: 18px 16px; }

/* GRO — selo do estado + validação de eficácia (Demanda 62.a, UX). */
.gro-cel { min-width: 140px; }
.gro-badge { display: inline-block; padding: 3px 11px; border-radius: 20px;
  font-size: .74rem; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  background: #eef1f5; color: #5a6b7b; white-space: nowrap; }
.gro-badge.validado   { background: #d8f3e3; color: var(--verde); }
.gro-badge.monitorado { background: #fff7e0; color: #8a6d00; }
.gro-badge.revisao    { background: #fde2de; color: var(--vermelho); }
.gro-badge.aguardando { background: var(--azul-claro); color: var(--azul); }
.gro-resultado { margin-top: 5px; }
.gro-obs { margin-top: 4px; }
.gro-obs > summary { cursor: pointer; font-size: .8rem; color: var(--azul); width: max-content; }
.gro-obs-txt { white-space: pre-line; margin-top: 3px; max-width: 260px; }
.gro-val-form { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.gro-val-form select, .gro-val-form input { font-size: .82rem; padding: 3px 6px;
  border: 1px solid var(--borda, #e3e9f0); border-radius: 6px; }
.gro-val-form input { width: 130px; max-width: 40vw; }
.gro-val-btn { font-size: .82rem; font-weight: 700; padding: 4px 10px; cursor: pointer;
  border: none; border-radius: 6px; background: var(--azul); color: #fff; }
.gro-val-btn:hover { background: var(--azul-escuro); }

/* Centro de Monitoramento do GRO (Demanda 63) — leve, sem libs externas. */
.gro-centro { margin: 8px 0 20px; }
.resumo-card.clic { text-decoration: none; color: inherit; transition: transform .08s, box-shadow .12s; }
.resumo-card.clic:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,58,92,.14); }
.gro-c-validado .rc-num { color: var(--verde); }
.gro-c-aguardando .rc-num { color: var(--azul); }
.gro-c-monitorado .rc-num { color: #8a6d00; }
.gro-c-revisao .rc-num { color: var(--vermelho); }
.gro-paineis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.gro-painel { background: #fff; border: 1px solid var(--borda, #e3e9f0); border-radius: 12px; padding: 14px 16px; }
.gro-painel h3 { margin: 0 0 10px; font-size: 1rem; color: #143a5c; }
.gro-barra-linha { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: 8px;
  margin: 6px 0; text-decoration: none; color: inherit; }
.gro-barra-rot { font-size: .82rem; color: var(--cinza-suave); }
.gro-barra { background: #eef1f5; border-radius: 20px; height: 12px; overflow: hidden; }
.gro-barra-fill { display: block; height: 100%; border-radius: 20px; min-width: 2px; }
.gro-barra-fill.validado { background: var(--verde); }
.gro-barra-fill.monitorado { background: var(--amarelo); }
.gro-barra-fill.aguardando { background: var(--azul); }
.gro-barra-fill.revisao { background: var(--vermelho); }
.gro-barra-num { font-weight: 700; font-size: .85rem; text-align: right; }
.gro-val-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.gro-val-grid a { text-decoration: none; color: inherit; }
.gro-pendencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gro-pend { display: inline-block; padding: 7px 12px; border-radius: 10px; font-size: .86rem;
  font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.gro-pend.g-alerta { background: #fff7e0; color: #8a6d00; border-color: #f0d98a; }
.gro-pend.g-erro { background: #fde2de; color: var(--vermelho); border-color: #f3b6ae; }
.gro-pend:hover { filter: brightness(.97); }
.gro-filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.gro-filtros select, .gro-filtros input { font-size: .85rem; padding: 5px 8px;
  border: 1px solid var(--borda, #e3e9f0); border-radius: 6px; }
.gro-filtros input { min-width: 130px; }
.tabela-scroll { overflow-x: auto; }
@media (max-width: 720px) { .gro-paineis { grid-template-columns: 1fr; }
  .gro-barra-linha { grid-template-columns: 110px 1fr 30px; }
  .gro-filtros select, .gro-filtros input { flex: 1 1 44%; min-width: 0; } }

/* Refinamento visual do Centro do GRO (Demanda 63.b) — só UX, escopado. */
.gro-centro { margin: 10px 0 26px; padding-bottom: 22px; border-bottom: 1px solid #eef2f6; }
.gro-header { margin: 6px 0 16px; }
.gro-titulo { font-size: 1.42rem; font-weight: 800; color: #143a5c; letter-spacing: .2px;
  margin: 0; line-height: 1.25; display: inline-block; }
.gro-titulo::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 8px;
  border-radius: 3px; background: var(--azul, #0d4f8b); opacity: .85; }
.gro-frase { margin: 12px 0 2px; font-size: 1.02rem; line-height: 1.5; color: var(--cinza-texto, #2c3e50); }
.gro-legenda { margin: 4px 0 0; font-size: .85rem; color: var(--cinza-suave, #6b7a89); }
.gro-sub { font-size: 1.08rem; font-weight: 700; color: #143a5c; margin: 22px 0 2px; }
/* Cards executivos: SaaS moderno — sombra suave, cantos, respiro (escopado). */
.gro-cards { gap: 12px; margin: 6px 0 4px; }
.gro-cards .resumo-card { border: 1px solid #e9eef4; border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(20,58,92,.05); }
.gro-cards .resumo-card.destaque { box-shadow: 0 4px 14px rgba(13,79,139,.22); }
.gro-cards .resumo-card.clic:hover { box-shadow: 0 8px 20px rgba(20,58,92,.14); }
.gro-cards .rc-num { line-height: 1.1; }
/* Painéis com respiro e sombra discreta, consistentes com os cards. */
.gro-paineis { gap: 16px; margin-top: 16px; }
.gro-painel { border-color: #e9eef4; border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(20,58,92,.05); }
.gro-painel h3 { font-size: .98rem; letter-spacing: .2px; }
.gro-pendencias { margin-top: 16px; }
/* Lista de atenção: linhas mais limpas e legíveis. */
.gro-lista-tab { border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(20,58,92,.05); }
.gro-lista-tab th { background: #f4f7fb; color: #4a5b6c; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .3px; border-color: #eef2f6; }
.gro-lista-tab td { border-color: #f0f3f7; padding: 11px 12px; }
.gro-lista-tab tbody tr:hover { background: #f9fbfd; }
@media (max-width: 720px) {
  .gro-titulo { font-size: 1.24rem; }
  .gro-frase { font-size: .96rem; }
  .gro-centro { padding-bottom: 16px; }
}

/* KPIs gerenciais do GRO (Demanda 64) — leves, cores discretas de interpretação. */
.cor-verde { color: var(--verde, #1e9e5a); }
.cor-amarelo { color: #8a6d00; }
.cor-vermelho { color: var(--vermelho, #c0392b); }
.cor-neutro { color: #4a5b6c; }
.gro-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 0; }
.gro-kpi { background: #fff; border: 1px solid #e9eef4; border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(20,58,92,.05); display: flex; flex-direction: column; gap: 3px; }
.gro-kpi.kpi-destaque { border-color: #dbe6f2; background: linear-gradient(180deg,#fbfdff,#fff); }
.gro-kpi-rot { font-size: .82rem; color: var(--cinza-suave, #6b7a89); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; }
.gro-kpi-num { font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.gro-kpi-nota { font-size: .78rem; color: var(--cinza-suave, #6b7a89); }
.gro-kpi-vazio { font-size: .92rem; color: var(--cinza-suave, #6b7a89); font-style: italic; padding: 6px 0; }
.gro-kpi-ok { font-size: .95rem; color: var(--verde, #1e9e5a); font-weight: 700; padding: 6px 0; }
.gro-kpis-sec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.gro-kpi-mini { background: #f7fafc; border: 1px solid #eef2f6; border-radius: 10px; padding: 9px 12px;
  display: flex; flex-direction: column; gap: 1px; }
.mini-rot { font-size: .74rem; color: var(--cinza-suave, #6b7a89); }
.mini-val { font-size: 1.1rem; font-weight: 800; color: #143a5c; }
@media (max-width: 900px) { .gro-kpis-sec { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .gro-kpis { grid-template-columns: 1fr; }
  .gro-kpis-sec { grid-template-columns: repeat(2, 1fr); }
  .gro-kpi-num { font-size: 1.5rem; }
}

/* UX 64.b — rótulos de grupo e trio de tempos (só apresentação). */
.gro-mini-titulo { margin: 16px 0 6px; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-suave, #6b7a89); }
.gro-kpis-sec.sec-3 { grid-template-columns: repeat(3, 1fr); }
.gro-kpi-rot .ajuda-wrap { margin-left: 5px; }
.gro-kpi-rot .ajuda { width: 16px; height: 16px; font-size: .72rem; line-height: 15px; }
@media (max-width: 720px) { .gro-kpis-sec.sec-3 { grid-template-columns: repeat(3, 1fr); } }

/* Reabertura inteligente (Demanda 65) — o sistema sugere, o gestor decide. */
.gro-reabrir { background: #fff8ef; border: 1px solid #f0d9b8; border-radius: 14px;
  padding: 14px 16px; margin-top: 16px; }
.gro-reabrir-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; padding: 8px 0; border-top: 1px solid #f2e4cf; }
.gro-reabrir-item:first-of-type { border-top: none; }
.gro-reabrir-txt { flex: 1 1 240px; }
.gro-reabrir-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gro-reabrir-acoes form { margin: 0; }
.gro-manter-form { display: flex; gap: 6px; align-items: center; }
.gro-manter-form input { font-size: .82rem; padding: 5px 8px; border: 1px solid var(--borda,#e3e9f0);
  border-radius: 6px; width: 150px; max-width: 42vw; }
@media (max-width: 720px) { .gro-reabrir-acoes { width: 100%; } .gro-manter-form input { flex: 1; } }

/* ===== Refinamento de UX do Centro de Monitoramento (Demanda 65.1) ===== */
/* Hierarquia: Resumo → Atenção → Central de Riscos → Indicadores. Só apresentação. */
.gro-secao { margin-top: 24px; }
.gro-secao-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gro-verlink { font-size: .88rem; font-weight: 700; text-decoration: none; color: var(--azul, #0d4f8b); white-space: nowrap; }
.gro-verlink:hover { text-decoration: underline; }

/* 2. Situações que exigem atenção — verdict compacto + pendências + revisão */
.gro-atencao { display: grid; grid-template-columns: 1fr 220px; gap: 14px; align-items: start; margin-top: 6px; }
.gro-atencao-main { min-width: 0; }
.gro-status-line { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px;
  font-size: .95rem; border: 1px solid transparent; }
.gro-status-line .gsl-icone { font-size: 1.1rem; line-height: 1; }
.gro-status-line.st-em_dia { background: #e9f8f0; border-color: #bfe8d2; color: #1e7a4c; }
.gro-status-line.st-atencao { background: #fff7e6; border-color: #f0dcae; color: #8a6d00; }
.gro-status-line.st-nao_conforme { background: #fdecea; border-color: #f2c4bd; color: var(--vermelho, #c0392b); }
.gro-atencao .gro-pendencias { margin-top: 10px; }
.gro-atencao-ok { margin: 10px 0 0; font-size: .95rem; color: #1e7a4c; font-weight: 600; }
.gro-atencao-leve { margin: 8px 0 0; font-size: .84rem; color: var(--cinza-suave, #6b7a89); }

/* Revisão do PGR — card compacto */
.gro-rev-mini { background: #fff; border: 1px solid #e9eef4; border-radius: 12px; padding: 12px 14px; }
.gro-rev-mini .grm-top { font-size: .8rem; font-weight: 700; color: #143a5c; }
.gro-rev-mini .grm-status { font-size: 1.02rem; font-weight: 800; color: #143a5c; margin-top: 4px; }
.gro-rev-mini .grm-sub { font-size: .78rem; color: var(--cinza-suave, #6b7a89); margin-top: 2px; }
.gro-rev-mini .grm-status.vermelho, .gro-rev-mini .grm-sub.vermelho { color: var(--vermelho, #c0392b); }
.gro-rev-mini .grm-status.amarelo, .gro-rev-mini .grm-sub.amarelo { color: #8a6d00; }
.gro-rev-mini.rev-vencida { border-color: #f2c4bd; background: #fdecea; }
.gro-rev-mini.rev-pendente { border-color: #f0dcae; background: #fff7e6; }
.gro-rev-mini .btn-mini { width: auto; margin-top: 10px; padding: 6px 12px; font-size: .82rem; white-space: nowrap; }

/* 3. Central de Riscos — filtros recolhíveis + tabela com ações explícitas */
.gro-filtros-det { margin: 4px 0 10px; }
.gro-filtros-det > summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: #143a5c;
  list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid #e3e9f0; border-radius: 8px; background: #f7fafc; user-select: none; }
.gro-filtros-det > summary::-webkit-details-marker { display: none; }
.gro-filtros-det > summary::before { content: "▶"; font-size: .7rem; transition: transform .15s; }
.gro-filtros-det[open] > summary::before { transform: rotate(90deg); }
.gro-lista-tab .acoes-celula .link-acao { white-space: nowrap; }

/* Detalhes operacionais — recolhidos por padrão */
.gro-detalhes { margin-top: 20px; }
.gro-detalhes > summary { cursor: pointer; font-size: .9rem; font-weight: 700; color: #4a5b6c;
  list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid #e3e9f0; border-radius: 8px; background: #f7fafc; user-select: none; }
.gro-detalhes > summary::-webkit-details-marker { display: none; }
.gro-detalhes > summary::before { content: "▶"; font-size: .7rem; transition: transform .15s; }
.gro-detalhes[open] > summary::before { transform: rotate(90deg); }
.gro-detalhes .grupo { margin-top: 18px; }

@media (max-width: 720px) {
  .gro-atencao { grid-template-columns: 1fr; }
  .gro-rev-mini { order: -1; }
}

/* ===== Lapidação de UX — Painel de Decisão (Demanda 65.2) ===== */
/* Só apresentação/microinterações. Nenhum dado, cálculo ou consulta muda. */

/* 1. Resumo: 3 cartões de conclusão + estados como apoio discreto */
.gro-cards-topo { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gro-cards-topo .resumo-card { padding: 16px 20px; }
.gro-c-atencao { text-decoration: none; color: inherit; }
.gro-c-atencao.tem-atencao { border-color: #f0d3a8; background: linear-gradient(180deg,#fffaf2,#fff); }
.gro-c-atencao.tem-atencao .rc-num { color: #b26a00; }
.gro-estados-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.gro-estados-chips .gec { display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 11px; border-radius: 20px; background: #f4f7fb; border: 1px solid #e7edf4;
  font-size: .8rem; color: var(--cinza-suave, #6b7a89); text-decoration: none;
  transition: background .12s, border-color .12s, color .12s; }
.gro-estados-chips .gec b { font-weight: 800; color: #143a5c; font-size: .9rem; }
.gro-estados-chips .gec:hover { background: #eaf1f9; border-color: #d6e3f0; color: #143a5c; }

/* 1b. Nota do significado da métrica (Demanda 65.3) — evita ler "100%" como
   conformidade geral quando a empresa está "Não conforme". */
.gro-nota-metrica { margin: 8px 0 0; font-size: .78rem; line-height: 1.45;
  color: var(--cinza-suave, #6b7a89); }

/* Marca registrada (INPI): ® discreto após o nome NR Tutor. `line-height:0`
   evita que o sobrescrito estique a altura da linha em qualquer contexto. */
.marca-r { font-size: .52em; line-height: 0; vertical-align: super;
  margin-left: 1px; font-weight: 600; letter-spacing: 0; }

/* Revisão do GRO/PGR — processo estruturado (Demanda 66). Só apresentação. */
.gro-rev-mini .grm-link { display: inline-block; margin-top: 8px; font-size: .76rem;
  color: var(--cinza-suave, #6b7a89); text-decoration: underline; }
.rev-cabeca { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: #fff; border: 1px solid #e9eef4; border-radius: 12px;
  padding: 12px 16px; margin: 10px 0 4px; }
.rev-tag { display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: .78rem; font-weight: 700; background: var(--azul-claro, #e6f0fa);
  color: var(--azul, #0d4f8b); }
.rev-tag.extra { background: #fff7e6; color: #8a6d00; }
.rev-tag.est-CONCLUIDA { background: #d8f3e3; color: #1e7a4c; }
.rev-tag.est-EM_ANDAMENTO { background: #fff7e6; color: #8a6d00; }
.rev-tag.est-CANCELADA { background: #eef1f5; color: #6b7a89; }
.rev-meta { font-size: .84rem; color: var(--cinza-suave, #6b7a89); }
.rev-motivo { flex: 1 1 100%; font-size: .86rem; color: var(--cinza-texto, #2c3e50); }
/* Fila de análise dos achados (Demanda 66.2) */
.rev-progresso { font-size: .84rem; font-weight: 700; color: #143a5c;
  background: #f4f7fb; border: 1px solid #e7edf4; border-radius: 20px;
  padding: 5px 12px; }
.rev-fila { display: grid; gap: 10px; }
.rev-item { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: #fff; border: 1px solid #e9eef4;
  border-left: 4px solid #cbd6e2; border-radius: 12px; padding: 12px 16px; }
.rev-item.pendente { border-left-color: #e0a33a; background: #fffdf8; }
.rev-item-txt { min-width: 0; flex: 1 1 320px; }
.rev-item-txt strong { color: #143a5c; }
.rev-selo { display: inline-block; margin-top: 6px; margin-right: 6px;
  padding: 3px 10px; border-radius: 20px; font-size: .74rem; font-weight: 700; }
.rev-selo.est-PENDENTE { background: #fff7e6; color: #8a6d00; }
.rev-selo.est-ANALISADO { background: #e9f1fb; color: var(--azul, #0d4f8b); }
.rev-selo.est-ENCAMINHADO { background: #d8f3e3; color: #1e7a4c; }
.rev-selo.est-MANTIDO_COM_JUSTIFICATIVA { background: #eef1f5; color: #4a5b6c; }
.rev-origem, .rev-decisao { font-size: .74rem; color: var(--cinza-suave, #6b7a89); }
/* 66.3: o formulário de análise é montado no SERVIDOR (?analisar=<pk>), já
   contextualizado — o :target servia só para rolar/mostrar e foi aposentado. */
.rev-item.analisando { border-left-color: var(--azul, #0d4f8b); background: #f4f9ff; }
.rev-analisar-ctx { background: #fbfdff; border: 1px solid #dbe6f2;
  border-left: 4px solid var(--azul, #0d4f8b); border-radius: 12px;
  padding: 14px 16px; margin-top: 10px; }
.rev-analisando { margin: 0 0 8px; font-size: 1rem; color: #143a5c; }
.rev-ctx-fatos { display: grid; gap: 4px; margin: 0 0 12px; padding: 10px 12px;
  background: #f4f7fb; border-radius: 10px; font-size: .86rem;
  color: var(--cinza-texto, #2c3e50); }
.rev-ctx-fatos b { color: #143a5c; }
/* Fechamento 66: grade DINÂMICA de até 2 colunas — os campos ocultos saem do
   fluxo (nada de trilha vazia) e, sozinho, o campo ocupa a largura toda. */
/* Flex (e não grid): a trilha de um campo OCULTO simplesmente não existe —
   nada de coluna vazia. O max-width impede que um campo sozinho fique
   absurdamente largo; o basis garante no máximo 2 por linha. */
.rev-form-2col { display: flex; flex-wrap: wrap; gap: 12px 16px;
  align-items: flex-start; }
.rev-form-2col > label { flex: 1 1 260px; max-width: 460px; min-width: 0; }
.rev-analisar-ctx [hidden], .rev-form [hidden] { display: none !important; }
.rev-analisar-ctx label, .rev-analisar-ctx .rev-campo {
  display: block; font-size: .82rem; font-weight: 600; color: #143a5c;
  margin-bottom: 8px; }
.rev-analisar-ctx select, .rev-analisar-ctx input[type=text] {
  width: 100%; margin-top: 4px; font-size: .88rem; padding: 7px 9px;
  font-weight: 400; border: 1px solid var(--borda, #e3e9f0);
  border-radius: 8px; box-sizing: border-box; }
/* Tablet e celular: uma coluna, sem teto de largura. */
@media (max-width: 900px) {
  .rev-form-2col > label { flex: 1 1 100%; max-width: none; }
}

/* Erro de validação inline (correção 66.3): o campo é destacado e a mensagem
   fica junto dele — o toast temporário deixa de ser a única pista. */
.campo-erro select, .campo-erro input {
  border-color: var(--vermelho, #c0392b) !important;
  background: #fff7f6; }
.rev-erro { display: block; margin-top: 4px; font-size: .8rem; font-weight: 700;
  color: var(--vermelho, #c0392b); }
.rev-resumo { margin: 0 0 12px; padding-left: 18px; font-size: .9rem; }
.rev-resumo li { margin: 3px 0; }
.rev-bloqueio { background: #fff7e6; border: 1px solid #f0dcae; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; font-size: .88rem; color: #8a6d00; }
.rev-bloqueio ul { margin: 6px 0 0; padding-left: 18px; }
.rev-cancelar > summary { cursor: pointer; font-size: .84rem; color: var(--cinza-suave, #6b7a89);
  margin-top: 12px; }

.rev-achados { display: grid; gap: 8px; }
.rev-achado { padding: 9px 13px; border-radius: 10px; font-size: .88rem;
  border: 1px solid transparent; }
.rev-achado.g-erro { background: #fdecea; border-color: #f2c4bd; color: #a33a2c; }
.rev-achado.g-alerta { background: #fff7e6; border-color: #f0dcae; color: #8a6d00; }
.rev-achado.g-ok { background: #e9f8f0; border-color: #bfe8d2; color: #1e7a4c; }
.rev-deltas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; }
.rev-delta { background: #fff; border: 1px solid #e9eef4; border-left: 4px solid #cbd6e2;
  border-radius: 10px; padding: 9px 13px; }
.rev-delta.bom { border-left-color: var(--verde, #1e9e5a); }
.rev-delta.ruim { border-left-color: var(--vermelho, #c0392b); }
.rev-delta .rd-rot { display: block; font-size: .78rem; color: var(--cinza-suave, #6b7a89); }
.rev-delta .rd-val { font-size: .95rem; color: #143a5c; }
.rev-form { background: #fff; border: 1px solid #e9eef4; border-radius: 12px; padding: 14px 16px; }
.rev-form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; }
.rev-form label, .rev-campo { display: block; font-size: .82rem; font-weight: 600;
  color: #143a5c; margin-bottom: 8px; }
.rev-form select, .rev-form input[type=text], .rev-form textarea {
  width: 100%; margin-top: 4px; font-size: .88rem; padding: 7px 9px; font-weight: 400;
  border: 1px solid var(--borda, #e3e9f0); border-radius: 8px; box-sizing: border-box; }
.rev-check { display: block; font-size: .85rem; font-weight: 400; margin: 4px 0 12px; }
.rev-conclusao { background: #fff; border: 1px solid #e9eef4; border-radius: 12px;
  padding: 14px 16px; }
@media (max-width: 720px) { .rev-form-linha { grid-template-columns: 1fr; } }

/* 2. Próxima ação recomendada — o âncora de decisão da tela */
.gro-proxima { margin-top: 12px; background: #fff; border: 1px solid #e6edf5;
  border-left: 4px solid var(--azul, #0d4f8b); border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(20,58,92,.06); }
.gro-proxima .gpx-rot { display: block; font-size: .72rem; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: var(--cinza-suave, #6b7a89); }
.gro-proxima .gpx-corpo { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.gro-proxima .gpx-txt { min-width: 0; }
.gro-proxima .gpx-risco { display: block; font-size: 1.06rem; color: #143a5c; line-height: 1.3; }
.gro-proxima .gpx-meta { display: block; margin-top: 5px; font-size: .82rem;
  color: var(--cinza-suave, #6b7a89); }
/* Motivo da pendência (65.3): diz POR QUE aquilo exige ação. */
.gro-proxima .gpx-motivo { display: block; margin-top: 5px; font-size: .88rem;
  color: var(--cinza-texto, #2c3e50); }
.gro-proxima .gpx-meta .badge-nivel, .gro-proxima .gpx-meta .gro-badge { vertical-align: middle; }

/* 3. Microinterações: ações como botões discretos */
.btn-acao { display: inline-block; padding: 6px 13px; border-radius: 8px; font-size: .82rem;
  font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid #d7e2ee; background: #f7fafc; color: #143a5c;
  transition: background .12s, border-color .12s, transform .08s, box-shadow .12s; }
.btn-acao + .btn-acao { margin-left: 6px; }
.btn-acao:hover { background: #eef4fa; border-color: #bcd2e6; transform: translateY(-1px);
  box-shadow: 0 3px 9px rgba(20,58,92,.10); }
.btn-acao-forte { background: var(--azul, #0d4f8b); border-color: var(--azul, #0d4f8b); color: #fff; }
.btn-acao-forte:hover { background: #0b4478; border-color: #0b4478; color: #fff; }
.btn-acao-sec { background: #fff; color: var(--cinza-suave, #6b7a89); }
.btn-acao-sec:hover { color: #143a5c; }

/* 4. Indicadores Gerenciais recolhidos (brevidade inteligente) */
.gro-indic-det > summary { cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border: 1px solid #e6edf5; border-radius: 12px; background: #fbfdff;
  transition: background .12s, border-color .12s; }
.gro-indic-det > summary::-webkit-details-marker { display: none; }
.gro-indic-det > summary::before { content: "▶"; font-size: .7rem; color: var(--cinza-suave,#6b7a89);
  transition: transform .15s; }
.gro-indic-det[open] > summary::before { transform: rotate(90deg); }
.gro-indic-det > summary:hover { background: #f4f9ff; border-color: #d8e5f2; }
.gro-indic-det .gid-titulo { font-size: 1.08rem; font-weight: 700; color: #143a5c; }
.gro-indic-det .gid-hint { font-size: .8rem; color: var(--cinza-suave, #6b7a89); }
.gro-indic-det .gid-corpo { padding-top: 4px; }

/* 5. Elegância: respiros consistentes entre as seções */
.gro-centro .gro-secao { margin-top: 26px; }
.gro-atencao { margin-top: 8px; }
.gro-rev-mini { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.gro-lista-tab td { vertical-align: middle; }
.gro-reabrir { margin-top: 14px; }

/* 6. Mensagens como notificações discretas (auto-somem via ui do base) */
.messages { position: fixed; top: 76px; right: 18px; z-index: 90; margin: 0;
  width: min(360px, calc(100vw - 36px)); pointer-events: none; }
.messages li { pointer-events: auto; padding: 11px 15px; border-radius: 10px; margin-bottom: 9px;
  font-size: .88rem; font-weight: 600; box-shadow: 0 8px 24px rgba(20,58,92,.16);
  border: 1px solid rgba(255,255,255,.6); animation: msgEntra .22s ease-out;
  transition: opacity .45s ease, transform .45s ease; }
.messages li.sumindo { opacity: 0; transform: translateX(14px); }
@keyframes msgEntra { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .messages { top: auto; bottom: 14px; right: 12px; left: 12px; width: auto; } }

/* 7. Responsividade (notebook/tablet) sem perder a hierarquia */
@media (max-width: 1024px) {
  .gro-cards-topo { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .gro-cards-topo .resumo-card { padding: 14px 16px; }
}
@media (max-width: 860px) {
  .gro-cards-topo { grid-template-columns: 1fr 1fr; }
  .gro-cards-topo .resumo-card.destaque { grid-column: 1 / -1; }
}
/* Tablet: atenção em coluna única e, sobretudo, a hierarquia da Etapa 9 —
   situação → próxima ação → revisão (a 65.1 subia a revisão com order:-1). */
@media (max-width: 820px) {
  .gro-atencao { grid-template-columns: 1fr; }
  .gro-rev-mini { order: 0; }
}
@media (max-width: 560px) {
  .gro-cards-topo { grid-template-columns: 1fr; }
  .gro-proxima .gpx-corpo { align-items: stretch; }
  .gro-proxima .btn-acao { text-align: center; width: 100%; }
  .acoes-celula .btn-acao { display: block; margin: 4px 0 0; text-align: center; }
  .acoes-celula .btn-acao + .btn-acao { margin-left: 0; }
}

/* Encaminhamento pendente e constatação manual recolhida (Demanda 66.4) */
.rev-selo.pendente-enc { background: #fff1e0; color: #b26a00; }
.rev-item .rev-selo.pendente-enc + .rev-origem { margin-left: 2px; }
.rev-manual > summary { cursor: pointer; font-size: .9rem; font-weight: 700;
  color: #143a5c; list-style: none; display: inline-flex; align-items: center;
  gap: 6px; padding: 9px 14px; border: 1px solid #e3e9f0; border-radius: 10px;
  background: #f7fafc; user-select: none; }
.rev-manual > summary::-webkit-details-marker { display: none; }
.rev-manual > summary::before { content: "▶"; font-size: .7rem;
  color: var(--cinza-suave, #6b7a89); transition: transform .15s; }
.rev-manual[open] > summary::before { transform: rotate(90deg); }
.rev-manual > summary:hover { background: #eef4fa; border-color: #d8e5f2; }

/* ===================================================================== */
/* Alertas inteligentes de conformidade (Demanda 67)                     */
/* ===================================================================== */
/* --- Bloco compacto no Centro de Monitoramento --- */
.gro-alertas-mini { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px;
  padding: 12px 16px; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--branco); text-decoration: none; color: inherit;
  box-shadow: var(--sombra); transition: border-color .15s, box-shadow .15s; }
.gro-alertas-mini:hover { text-decoration: none; border-color: #cddcec;
  box-shadow: 0 2px 6px rgba(13,79,139,.1), 0 8px 20px rgba(13,79,139,.08); }
.gro-alertas-mini.tem-critico { border-color: #f3b6ae; background: linear-gradient(180deg,#fff6f4,#fff); }
.gro-alertas-mini.tem-atencao { border-color: #f0d3a8; background: linear-gradient(180deg,#fffaf2,#fff); }
.gam-icone { font-size: 1.5rem; line-height: 1; flex: none; }
.gam-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gam-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gam-topo strong { font-size: 1rem; color: #143a5c; }
.gam-quebra { font-size: .84rem; color: var(--cinza-suave); }
.gro-alertas-mini.tem-critico .gam-quebra { color: #b23021; font-weight: 700; }
.gam-lista { display: flex; flex-direction: column; gap: 2px; }
.gam-item { font-size: .84rem; color: var(--cinza-texto); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; padding-left: 12px; position: relative; }
.gam-item::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--amarelo); }
.gam-item.g-critico::before { background: var(--vermelho); }
.gam-item.g-alto::before { background: #e07b00; }
.gam-item.g-atencao::before { background: var(--amarelo); }
.gam-ref { color: var(--cinza-suave); }
.gam-vazio { font-size: .86rem; color: var(--verde); }
.gam-cta { flex: none; font-weight: 700; color: var(--azul); font-size: .9rem; white-space: nowrap; }

/* --- Central de Alertas --- */
.ca-resumo { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 18px; }
.ca-kpi { flex: 1 1 140px; background: var(--branco); border: 1px solid var(--borda);
  border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); font-size: .9rem;
  color: var(--cinza-suave); }
.ca-num { display: block; font-size: 1.7rem; font-weight: 800; color: #143a5c; line-height: 1.1; }
.ca-kpi.crit .ca-num { color: var(--vermelho); }
.ca-kpi.aten .ca-num { color: #b26a00; }
.ca-kpi.zero .ca-num { color: var(--cinza-suave); }
.ca-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ca-fil { padding: 7px 14px; border: 1px solid var(--borda); border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--cinza-texto); background: var(--branco);
  text-decoration: none; transition: background .15s, border-color .15s; }
.ca-fil:hover { text-decoration: none; background: #eef4fa; border-color: #d8e5f2; }
.ca-fil.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.ca-fil.resolv { margin-left: auto; }
.ca-legenda { font-size: .86rem; color: var(--cinza-suave); margin: -6px 0 12px; }
.ca-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ca-alerta { display: flex; align-items: flex-start; gap: 14px; background: var(--branco);
  border: 1px solid var(--borda); border-left: 5px solid var(--amarelo); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--sombra); }
.ca-alerta.grav-critico { border-left-color: var(--vermelho); }
.ca-alerta.grav-alto { border-left-color: #e07b00; }
.ca-alerta.grav-atencao { border-left-color: var(--amarelo); }
.ca-alerta.resolvido { border-left-color: #b9c4cf; background: #fbfcfd; opacity: .92; }
.ca-grav { flex: none; align-self: flex-start; font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
  background: #fff4d6; color: #8a6d00; }
.ca-alerta.grav-critico .ca-grav { background: #fde2de; color: var(--vermelho); }
.ca-alerta.grav-alto .ca-grav { background: #ffe9d1; color: #9a5400; }
.ca-alerta.resolvido .ca-grav { background: #eef2f6; color: var(--cinza-suave); }
.ca-corpo { flex: 1 1 auto; min-width: 0; }
.ca-titulo { font-weight: 700; color: #143a5c; font-size: .98rem; }
.ca-desc { font-size: .9rem; color: var(--cinza-texto); margin-top: 2px; }
.ca-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: .82rem;
  color: var(--cinza-suave); }
.ca-ent { font-weight: 600; color: #4a5a6a; }
.ca-cta, .ca-cta-form { flex: none; align-self: center; }
.ca-cta-form { margin: 0; }
.ca-vazio { background: var(--branco); border: 1px dashed var(--borda); border-radius: 12px;
  padding: 28px 16px; text-align: center; color: var(--cinza-suave); }
.ca-tudo-ok { color: var(--verde); font-weight: 600; margin: 0; }
.ca-nota { margin-top: 20px; font-size: .8rem; color: var(--cinza-suave); line-height: 1.5; }

@media (max-width: 620px) {
  .ca-alerta { flex-wrap: wrap; }
  .ca-cta, .ca-cta-form { align-self: stretch; width: 100%; margin-top: 6px; }
  .ca-cta, .ca-cta-form .btn-acao { display: block; text-align: center; }
  .ca-fil.resolv { margin-left: 0; }
  .gro-alertas-mini { flex-wrap: wrap; }
  .gam-cta { width: 100%; margin-top: 4px; }
}

/* ---- Demanda 67.1: acessos rápidos do GRO + tela Tratar eficácia ---- */
.acessos-rapidos.ar-gro { margin: 10px 0 18px; }
.te-contexto { background: var(--branco); border: 1px solid var(--borda);
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 10px; }
.te-linha { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; }
.te-rot { font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--cinza-suave); }
.te-val { color: var(--cinza-texto); }
.te-setor { color: var(--cinza-suave); }
.te-selo { display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: .8rem; font-weight: 700; }
.te-selo.parcial { background: #fff4d6; color: #8a6d00; }
.te-selo.ineficaz { background: #fde2de; color: var(--vermelho); }
.te-quando { margin-left: 8px; font-size: .82rem; color: var(--cinza-suave); }
.te-explica { margin: 16px 2px 10px; color: var(--cinza-texto); }
.te-prov { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.te-nota { font-size: .8rem; color: var(--cinza-suave); }
@media (max-width: 560px) {
  .te-linha { grid-template-columns: 1fr; gap: 2px; }
  .te-prov .btn-acao { width: 100%; text-align: center; }
}

/* ---- Demanda 67.2: mensagem de situação, âncora de sugestão, revisão ---- */
.gro-situacao-msg { margin: 8px 0 4px; font-size: .95rem; font-weight: 600; }
.gro-situacao-msg.tom-ok { color: var(--verde); }
.gro-situacao-msg.tom-atencao { color: #9a6a00; }
.gro-situacao-msg.tom-erro { color: var(--vermelho); }
.gro-sug-aviso { margin: 10px 0; padding: 10px 14px; border-radius: 10px;
  background: #eef6ee; border: 1px solid #cfe6cf; color: #2f6b3a; font-size: .9rem; }
.gro-reabrir-item.alvo { outline: 2px solid #e0a800; outline-offset: 2px;
  border-radius: 10px; background: #fffaf0; }
.rev-concluir { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--borda);
  border-radius: 14px; background: var(--branco); box-shadow: var(--sombra); }
.rev-concluir-tit { margin: 0 0 10px; font-weight: 700; color: #143a5c; }
.rev-concluir-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.rev-efic { margin-bottom: 6px; }
.rev-ja { margin-top: 16px; color: var(--verde); font-weight: 600; }
@media (max-width: 560px) {
  .rev-concluir-form .btn-acao { width: 100%; text-align: center; }
}

/* ---- Demanda 67.3: risco com ação de tratamento em andamento ---- */
.gro-acomp-row { background: #fbfcfe; }
.gro-acomp-nota { margin-top: 4px; font-size: .8rem; color: var(--cinza-suave); }

/* ===================================================================== */
/* Demanda 68 — Manual Interativo do NR Tutor                            */
/* ===================================================================== */
.man-topo { margin-bottom: 8px; }
.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; }
.man-busca { display: flex; gap: 8px; margin: 12px 0 20px; max-width: 640px; }
.man-busca input { flex: 1 1 auto; padding: 11px 14px; border: 1px solid var(--borda);
  border-radius: 10px; font-size: 1rem; background: var(--branco); color: var(--cinza-texto); }
.man-busca input:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.man-busca .btn { width: auto; white-space: nowrap; }
.man-secao { margin: 22px 0; }
.man-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; }
.man-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 12px;
  box-shadow: var(--sombra); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.man-card:hover { text-decoration: none; border-color: #cddcec;
  box-shadow: 0 2px 6px rgba(13,79,139,.1), 0 8px 20px rgba(13,79,139,.08); }
.man-card strong { color: #143a5c; font-size: .98rem; }
.man-card span { font-size: .86rem; color: var(--cinza-suave); }
.man-faq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.man-faq a { display: inline-block; padding: 8px 12px; border-radius: 8px; background: var(--azul-claro);
  color: var(--azul-escuro); font-weight: 600; font-size: .9rem; }
.man-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.man-cat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--branco);
  border: 1px solid var(--borda); border-radius: 12px; text-decoration: none; color: inherit; box-shadow: var(--sombra); }
.man-cat:hover { text-decoration: none; border-color: #cddcec; }
.man-cat-emoji { font-size: 1.4rem; }
.man-cat-nome { font-weight: 700; color: #143a5c; flex: 1 1 auto; }
.man-cat-qtd { font-size: .78rem; color: var(--cinza-suave); }
.man-voltar-sis { margin-top: 24px; }
/* Breadcrumb + tema */
.man-bread { font-size: .84rem; color: var(--cinza-suave); margin-bottom: 10px; }
.man-bread a { color: var(--azul); }
.man-tema { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
  padding: 22px 24px; box-shadow: var(--sombra); max-width: 820px; }
.man-tema-titulo { margin: 0 0 8px; color: #143a5c; }
.man-resposta { font-size: 1.05rem; color: var(--cinza-texto); background: var(--azul-claro);
  border-left: 4px solid var(--azul); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.man-bloco { margin: 16px 0; }
.man-bloco h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cinza-suave); margin: 0 0 4px; }
.man-bloco p { margin: 0; color: var(--cinza-texto); }
.man-passos { margin: 4px 0 0; padding-left: 22px; color: var(--cinza-texto); }
.man-passos li { margin-bottom: 6px; }
.man-atencao { margin: 16px 0; padding: 12px 14px; background: #fff7e0; border: 1px solid #f0d98a;
  border-radius: 10px; color: #8a6d00; font-size: .92rem; }
.man-cta { margin: 18px 0 4px; }
.man-sem-perm { font-size: .9rem; color: var(--cinza-suave); font-style: italic; }
.man-relacionados { margin-top: 20px; border-top: 1px solid var(--borda); padding-top: 12px; }
.man-relacionados ul { margin: 6px 0 0; padding-left: 20px; }
.man-relacionados a { color: var(--azul); }
.man-nav-tema { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 18px 0; max-width: 820px; font-size: .9rem; }
.man-nav-tema span { flex: 1 1 0; }
.man-nav-tema span:last-child { text-align: right; }
.man-indice-link { font-weight: 700; }

/* Manual da NR-1 (Demanda 69) — jornada guiada, progresso e etapas. Reaproveita
   as classes .man-* acima; adiciona só o que é específico da implantação. */
.man-sep { color: var(--cinza-suave); margin: 0 6px; }
.man-jornada-callout { background: var(--azul-claro); border: 1px solid #cddcec;
  border-radius: 14px; padding: 16px 18px; }
.man-jornada-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 10px; }
.man-continuar { font-weight: 700; color: var(--azul); }
.man-progresso { margin: 14px 0 6px; }
.man-progresso-barra { height: 10px; border-radius: 6px; background: #e6edf5;
  overflow: hidden; }
.man-progresso-barra span { display: block; height: 100%; background: #2e9c5a;
  border-radius: 6px; transition: width .3s ease; }
.man-progresso-txt { margin: 6px 0 0; font-size: .86rem; color: var(--cinza-suave); }
.man-proxima { margin: 16px 0; padding: 14px 16px; border: 1px solid #f0d98a;
  background: #fff7e0; border-radius: 12px; }
.man-proxima strong { color: #7a5b00; text-transform: uppercase; font-size: .74rem;
  letter-spacing: .05em; }
.man-proxima p { margin: 4px 0 10px; color: var(--cinza-texto); }
.man-etapas { list-style: none; margin: 16px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; counter-reset: none; }
.man-etapa { border: 1px solid var(--borda); border-radius: 12px; background: var(--branco);
  border-left-width: 5px; }
.man-etapa > a { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  color: var(--cinza-texto); }
.man-etapa > a:hover { text-decoration: none; background: #f7fafd; border-radius: 12px; }
.man-etapa-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--azul-claro); color: #143a5c; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; font-size: .9rem; }
.man-etapa-tit { flex: 1 1 auto; font-weight: 600; color: #143a5c; }
.man-etapa-tit em { font-weight: 400; color: var(--cinza-suave); font-style: normal; }
.man-etapa-st { flex: 0 0 auto; font-size: .76rem; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; white-space: nowrap; }
.man-etapa-transversal { margin-top: 10px; border-style: dashed; }
/* Estados do item 7 (concluído / em andamento / não iniciado / requer atenção). */
.man-st-concluido { border-left-color: #2e9c5a; }
.man-st-concluido .man-etapa-st { background: #e3f5ea; color: #1f7a45; }
.man-st-em_andamento { border-left-color: #2f6fb0; }
.man-st-em_andamento .man-etapa-st { background: #e6eef7; color: #1f4e82; }
.man-st-atencao { border-left-color: #d9820a; }
.man-st-atencao .man-etapa-st { background: #fff2db; color: #8a5300; }
.man-st-nao_iniciado { border-left-color: #c8d2dc; }
.man-st-nao_iniciado .man-etapa-st { background: #eef2f6; color: var(--cinza-suave); }
.man-fontes { margin-top: 18px; border-top: 1px solid var(--borda); padding-top: 10px; }
.man-fontes ul { margin: 6px 0 0; padding-left: 20px; font-size: .88rem;
  color: var(--cinza-suave); }
@media (max-width: 560px) {
  .man-etapa > a { flex-wrap: wrap; }
  .man-etapa-st { margin-left: 42px; }
}
/* Entrada discreta do Manual da NR-1 no hub da NR-1 (não compete com os cards). */
.nr1-manual-faixa { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 12px 16px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--branco); color: var(--cinza-texto); }
.nr1-manual-faixa:hover { text-decoration: none; border-color: #cddcec;
  background: #f7fafd; }
.nr1-manual-ic { font-size: 1.4rem; }
.nr1-manual-txt { flex: 1 1 auto; display: flex; flex-direction: column; }
.nr1-manual-txt strong { color: #143a5c; }
.nr1-manual-txt span { font-size: .86rem; color: var(--cinza-suave); }
.nr1-manual-seta { color: var(--azul); font-weight: 700; }
/* Ajuda contextual → tema exato do Manual da NR-1 (discreto, sem poluir a tela). */
.ajuda-manual-nr1 { display: inline-block; margin-top: 6px; font-size: .82rem;
  color: var(--azul); }
.man-busca-resumo { color: var(--cinza-suave); margin: 4px 0 14px; }
.man-vazio { background: var(--branco); border: 1px dashed var(--borda); border-radius: 12px;
  padding: 20px; color: var(--cinza-suave); }
/* Entrada do Manual no Painel */
.man-entrada { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 620px) {
  .man-busca { flex-wrap: wrap; }
  .man-busca .btn { width: 100%; }
  .man-nav-tema { flex-direction: column; align-items: stretch; text-align: left; }
  .man-nav-tema span:last-child { text-align: left; }
}

/* Demanda 68 — link contextual para o Manual + botão do Manual no Painel */
.ajuda-manual { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .82rem;
  color: var(--azul); }
.ajuda-bolha .ajuda-manual { color: #cfe4ff; }

/* ---------------------------------------------------------------------------
   Documentos do Programa de Parceiros (Demanda 77).

   O conteúdo era exibido com white-space: pre-wrap — bastava para textos
   jurídicos curtos, mas a proposta comercial tem 11 mil caracteres, 21
   subtítulos e 102 itens de lista. O leitor via asteriscos literais e
   nenhuma hierarquia, logo na primeira coisa que um parceiro lê.

   O HTML vem de parceiros.formatacao, que escapa tudo antes de montar.
--------------------------------------------------------------------------- */
.doc-conteudo .doc-paragrafo { margin: 0 0 .85em; line-height: 1.62; }
.doc-conteudo .doc-subtitulo {
  margin: 1.6em 0 .5em; font-size: 1.05rem; font-weight: 600;
  color: var(--azul-escuro, #143a5c); letter-spacing: .1px;
}
.doc-conteudo .doc-subtitulo:first-child { margin-top: 0; }
.doc-conteudo .doc-lista { margin: 0 0 1em; padding-left: 1.45em; }
.doc-conteudo .doc-lista li { margin-bottom: .34em; line-height: 1.55; }
/* Listas longas no celular: o recuo padrão come largura demais. */
@media (max-width: 768px) {
  .doc-conteudo .doc-lista { padding-left: 1.15em; }
}

/* ===========================================================================
   PROPOSTA COMERCIAL — apresentação executiva (Demandas 77.1 e 78)

   Exclusiva do tipo PROPOSTA_COMERCIAL. Documentos jurídicos NÃO usam nada
   daqui: seguem com .doc-conteudo, sóbrio de propósito. O prefixo `pc-` isola
   tudo — nenhuma regra global é redefinida.

   A Demanda 78 pediu padrão executivo. Três decisões governam o resultado:

   1. UMA ESCALA, não seis tamanhos improvisados. Título de seção, valor de
      card e texto guardam proporção fixa entre si (variáveis abaixo). Quem
      abre a página entende a estrutura ANTES de ler — que é o pedido.

   2. RESPIRO PROPORCIONAL AO NÍVEL. Seção respira mais que bloco, bloco mais
      que parágrafo. Espaço uniforme achata a hierarquia: se tudo dista o
      mesmo, nada parece mais importante. Era isto que fazia o subtítulo
      colar no título e o H2 colar no primeiro card.

   3. UM PADRÃO DE SEÇÃO SÓ. Antes havia três (prosa, cards, fechamento) com
      margens e larguras próprias. Agora a diferença é só a GRADE interna.
   =========================================================================== */

:root {
  /* Escala tipográfica — razão ~1,25 entre níveis vizinhos. */
  --pc-t1: 2.6rem;      /* título do hero             */
  /* Assinatura do hero: 28% menor que o título. Não é um segundo título —
     é a assinatura da proposta, e o que a distingue do H1 não é só o tamanho
     (28%), e sim o peso (300 contra 700), a cor mais suave e as três linhas
     curtas. Tamanho sozinho não resolve hierarquia: com o mesmo peso, dois
     blocos grandes competem por mais diferente que seja a altura da letra. */
  --pc-t1b: 1.87rem;
  --pc-t2: 1.55rem;     /* título de seção            */
  --pc-t3: 1.05rem;     /* rótulo de card             */
  --pc-corpo: 1.05rem;
  --pc-mini: .78rem;    /* etiqueta em versalete      */

  /* Ritmo vertical. */
  --pc-secao: 76px;     /* entre seções               */
  --pc-bloco: 30px;     /* entre blocos de uma seção  */
  --pc-linha: 15px;     /* entre parágrafos           */

  --pc-tinta: #16283a;
  --pc-tinta-suave: #4d6274;
  --pc-marca: #1c5f9e;
  --pc-fundo: #143a5c;
  --pc-borda: #e0e8f0;
}

/* Largura de leitura. Texto atravessando 1440 px força o olho a varrer 200
   caracteres por linha; 66ch é onde a leitura corrida se sustenta. Grade de
   cards pode ser mais larga — card é escaneado, não lido linha a linha. */
.pc-larg { max-width: 66ch; margin: 0 auto; }
/* O hero é mais largo que a coluna de leitura: o H1 precisa caber em UMA
   linha no desktop. Título quebrado em duas linhas, em cima de uma
   assinatura de três, vira um bloco só de texto grande — era isso que
   parecia "título junto com subtítulo". */
.pc-hero .pc-larg { max-width: 700px; }
.pc-secao-valores .pc-larg,
.pc-secao-escala .pc-larg,
.pc-secao-beneficios .pc-larg { max-width: 1080px; }

/* ---- Hero: três níveis, e eles precisam SE VER como três --------------- */
/* Alinhado à ESQUERDA. Texto centralizado num bloco alto obriga o olho a
   procurar onde cada linha começa; a margem única é o que dá ao conjunto
   aparência de documento, não de cartaz. */
.pc-hero { background: linear-gradient(155deg, #10293f 0%, #143a5c 45%, #1c5f9e 100%);
  color: #fff; border-radius: 20px; padding: 72px 52px 66px;
  margin: 4px 0 var(--pc-secao); text-align: left; }
.pc-hero-titulo { font-size: var(--pc-t1); line-height: 1.08; margin: 0;
  color: #fff; font-weight: 700; letter-spacing: -1.1px; }
/* Nível 2 SEPARADO do H1: menor, mais leve, com respiro próprio e largura
   curta, para quebrar em duas linhas em vez de colar no título. */
.pc-hero-tagline { font-size: var(--pc-t1b); font-weight: 300; line-height: 1.38;
  margin: 30px 0 0; color: #9cc8ee; letter-spacing: -.2px; }
/* Uma frase por linha, como uma assinatura em três tempos. */
.pc-hero-frase { display: block; }
.pc-hero-regua { width: 54px; height: 3px; background: #4f9fe0; border-radius: 2px;
  margin: 44px 0 38px; }
.pc-hero-texto { font-size: 1.02rem; line-height: 1.8;
  margin: 0 0 var(--pc-linha); max-width: 58ch; color: #dbe9f6; }
.pc-hero-destaque { font-size: 1.16rem; line-height: 1.6; font-weight: 600;
  margin: 34px 0 0; max-width: 52ch; padding: 20px 24px; color: #fff;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; }

/* ---- Seção: um padrão só ---------------------------------------------- */
.pc-secao { margin: 0 0 var(--pc-secao); }
.pc-titulo { font-size: var(--pc-t2); line-height: 1.2; font-weight: 700;
  color: var(--pc-tinta); letter-spacing: -.5px;
  margin: 0 0 var(--pc-bloco); padding: 0 0 14px;
  border-bottom: 1px solid var(--pc-borda); }
.pc-p { font-size: var(--pc-corpo); line-height: 1.8; margin: 0 0 var(--pc-linha);
  color: var(--pc-tinta-suave); }
.pc-chamada { font-size: 1.08rem; line-height: 1.6; font-weight: 600;
  margin: var(--pc-bloco) 0 14px; color: var(--pc-tinta); }

/* ---- Lista com marca de conferido ------------------------------------- */
.pc-lista { list-style: none; margin: 0 0 var(--pc-bloco); padding: 0;
  display: grid; gap: 10px; }
.pc-lista li { position: relative; padding: 11px 14px 11px 42px;
  background: #f7fafd; border: 1px solid var(--pc-borda); border-radius: 10px;
  font-size: 1rem; line-height: 1.5; color: var(--pc-tinta); font-weight: 500; }
.pc-lista li::before { content: "\2713"; position: absolute; left: 15px; top: 11px;
  color: var(--pc-marca); font-weight: 700; }

.pc-faixa { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 var(--pc-bloco); }
.pc-chip { display: inline-block; background: #eef4fa; color: var(--pc-fundo);
  border: 1px solid #d3e2ef; border-radius: 999px; padding: 8px 16px;
  font-size: .93rem; font-weight: 600; }

/* ---- Fluxo: roadmap, não checklist ------------------------------------
   Seis caixas iguais empilhadas leem-se como lista de tarefas. O que dá
   sentido de PERCURSO é o trilho que liga uma etapa à seguinte. */
.pc-fluxo { list-style: none; margin: 0 0 var(--pc-bloco); padding: 0; }
.pc-passo { display: flex; align-items: center; gap: 16px; padding: 13px 0;
  font-size: 1rem; line-height: 1.45; color: var(--pc-tinta); font-weight: 500;
  position: relative; }
.pc-passo-n { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--pc-marca); color: var(--pc-marca);
  font-size: .84rem; font-weight: 700; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; }
/* O trilho sai do número e alcança o próximo. O último não continua. */
.pc-passo::before { content: ""; position: absolute; left: 16px; top: 50%;
  width: 2px; height: 100%; background: #cfe0ee; z-index: 0; }
.pc-passo:last-child::before { display: none; }

/* ---- Cards ------------------------------------------------------------- */
.pc-cards { display: grid; gap: 18px; margin: 0 0 var(--pc-bloco); }
.pc-cards-valor { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); }
.pc-cards-escala { grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); }
.pc-cards-beneficio { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }

.pc-card { background: #fff; border: 1px solid var(--pc-borda);
  border-radius: 16px; padding: 26px 22px; }
.pc-card-rotulo { margin: 0 0 10px; font-size: var(--pc-mini); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: #7b93a8; }
.pc-card-valor { margin: 0 0 12px; font-size: 2.05rem; font-weight: 800;
  color: var(--pc-fundo); line-height: 1.05; letter-spacing: -1px; }
.pc-card-desc { margin: 0; font-size: .93rem; line-height: 1.65;
  color: var(--pc-tinta-suave); }

.pc-degrau { background: #f7fafd; border: 1px solid var(--pc-borda);
  border-radius: 16px; padding: 24px 20px; }
.pc-degrau-n { margin: 0; font-size: 2.3rem; font-weight: 800;
  color: var(--pc-marca); line-height: 1; letter-spacing: -1.6px; }
.pc-degrau-u { margin: 4px 0 12px; font-size: var(--pc-mini); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: #7b93a8; }
.pc-degrau-d { margin: 0; font-size: .94rem; line-height: 1.65;
  color: var(--pc-tinta-suave); }

.pc-beneficio { background: #fff; border: 1px solid var(--pc-borda);
  border-radius: 16px; padding: 24px 20px; border-top: 3px solid var(--pc-marca); }
.pc-beneficio-rotulo { margin: 0 0 10px; font-size: var(--pc-t3);
  font-weight: 700; color: var(--pc-tinta); }
.pc-beneficio-desc { margin: 0; font-size: .94rem; line-height: 1.7;
  color: var(--pc-tinta-suave); }

.pc-nota { font-size: .85rem; line-height: 1.7; color: #7b93a8; margin: 6px 0 0; }

/* ---- Institucional: seção que precisa de peso comercial ---------------- */
.pc-secao-marca .pc-larg { background: #f4f8fc; border: 1px solid var(--pc-borda);
  border-radius: 20px; padding: 44px 38px; max-width: 860px; }
.pc-secao-marca .pc-titulo { border-bottom-color: #d5e3f0; }
.pc-citacao { margin: var(--pc-bloco) 0 0; padding: 24px 26px; background: #fff;
  border-left: 4px solid var(--pc-marca); border-radius: 0 14px 14px 0;
  font-size: 1.18rem; line-height: 1.6; font-weight: 600; color: var(--pc-fundo); }

/* ---- Fechamento -------------------------------------------------------- */
.pc-fechamento { background: linear-gradient(155deg, #10293f 0%, #143a5c 55%, #1c5f9e 100%);
  color: #fff; border-radius: 20px; padding: 62px 34px; margin: 0 0 26px;
  text-align: center; }
.pc-fech-marca { margin: 0 0 26px; font-size: var(--pc-mini); font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: #7fc4ff; }
.pc-fech-linha { margin: 0 auto 12px; max-width: 34ch; font-size: 1.42rem;
  line-height: 1.45; font-weight: 600; color: #fff; letter-spacing: -.3px; }
.pc-fech-linha:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  :root { --pc-t1: 1.85rem; --pc-t1b: 1.33rem; --pc-t2: 1.3rem;
          --pc-secao: 52px; --pc-bloco: 24px; }
  .pc-hero { padding: 44px 24px 40px; border-radius: 16px; }
  .pc-hero-tagline { margin-top: 20px; }
  .pc-hero-regua { margin: 32px 0 26px; }
  .pc-hero-destaque { font-size: 1.04rem; padding: 18px; }
  .pc-card-valor { font-size: 1.75rem; }
  .pc-degrau-n { font-size: 2rem; }
  .pc-secao-marca .pc-larg { padding: 28px 20px; border-radius: 16px; }
  .pc-citacao { font-size: 1.06rem; padding: 18px 20px; }
  /* Cards empilhados: em 375 px duas colunas espremem "R$ 150,00" a ponto
     de quebrar no meio. */
  .pc-cards { grid-template-columns: 1fr; gap: 14px; }
  .pc-fechamento { padding: 42px 20px; }
  .pc-fech-linha { font-size: 1.12rem; }
}

/* ---- Duas colunas da seção institucional (Demanda 78, item 5) ----------
   Grade de duas colunas em que cada par (título + lista) ocupa uma. Em tela
   estreita vira uma coluna só: comparar lado a lado em 375 px espremeria os
   dois lados a ponto de nenhum se ler. */
.pc-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px;
  align-items: start; margin: var(--pc-bloco) 0 0; }
.pc-col-titulo { margin: 0 0 14px; font-size: 1.02rem; font-weight: 700;
  color: var(--pc-fundo); padding-bottom: 10px;
  border-bottom: 2px solid var(--pc-marca); }
.pc-colunas .pc-lista { margin: 0; }
.pc-colunas .pc-lista li { background: #fff; }
@media (max-width: 760px) {
  .pc-colunas { grid-template-columns: 1fr; gap: 22px; }
}

.pc-coluna { min-width: 0; }

/* ---- D78.1: as duas seções do dinheiro ---------------------------------
   "Quando você recebe" ganha fluxo HORIZONTAL no desktop (como o dinheiro
   caminha) e "Quando seu investimento retorna?" ganha a escada de payback.
   As duas deixam de dividir a mesma forma: repetir o roadmap faria as duas
   seções dizerem a mesma coisa.

   Só regras novas, em append — nada do que já foi aprovado é redefinido,
   exceto o comportamento do fluxo QUANDO carrega a classe pc-fluxo-h. */

/* A seção do fluxo horizontal precisa de largura de grade, não de coluna
   de leitura: seis passos em 66ch viram espremido. Os textos dela seguem
   presos à medida de leitura. */
.pc-secao-recebe .pc-larg { max-width: 1080px; }
.pc-secao-recebe .pc-chamada,
.pc-secao-recebe .pc-portal,
.pc-secao-recebe .pc-resumo { max-width: 66ch; }

/* Fluxo horizontal: passos em coluna, ligados por uma linha que atravessa
   os círculos. A linha pertence a cada passo e vem do anterior — por isso o
   primeiro a esconde e o último a MOSTRA (invertendo a regra do trilho
   vertical, onde é o último que não continua). */
.pc-fluxo-h { display: flex; align-items: flex-start; gap: 0;
  padding: 8px 0 2px; }
.pc-fluxo-h .pc-passo { flex: 1 1 0; min-width: 0; flex-direction: column;
  align-items: center; text-align: center; gap: 12px; padding: 0 8px;
  font-size: .9rem; line-height: 1.35; font-weight: 600; }
.pc-fluxo-h .pc-passo::before { left: -50%; top: 17px; width: 100%;
  height: 2px; }
.pc-fluxo-h .pc-passo:first-child::before { display: none; }
.pc-fluxo-h .pc-passo:last-child::before { display: block; }
.pc-passo-t { display: block; }

/* Destaque do Portal: uma frase, não uma fileira de chips. */
.pc-portal { margin: var(--pc-bloco) 0 14px; padding: 16px 20px;
  background: #f4f8fc; border-left: 4px solid var(--pc-marca);
  border-radius: 0 12px 12px 0; font-size: 1.04rem; font-weight: 600;
  color: var(--pc-fundo); }
.pc-resumo { color: var(--pc-tinta); font-weight: 500; }

/* Escada de payback: descida vertical em cinco degraus. A entrada carrega o
   valor VIVO da configuração; o marco e o desfecho sobem de intensidade. */
.pc-payback { list-style: none; margin: 4px auto var(--pc-bloco); padding: 0;
  max-width: 560px; }
.pc-pb-item { background: #f7fafd; border: 1px solid var(--pc-borda);
  border-radius: 12px; padding: 15px 20px; text-align: center;
  font-size: 1rem; font-weight: 600; color: var(--pc-tinta); }
.pc-pb-item + .pc-pb-item { margin-top: 30px; position: relative; }
.pc-pb-item + .pc-pb-item::before { content: "\2193"; position: absolute;
  top: -27px; left: 50%; transform: translateX(-50%);
  color: var(--pc-marca); font-weight: 700; }
.pc-pb-rotulo { display: block; font-size: var(--pc-mini); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: #7b93a8;
  margin-bottom: 6px; }
.pc-pb-valor { display: block; font-size: 1.9rem; font-weight: 800;
  color: var(--pc-fundo); letter-spacing: -.8px; line-height: 1.1; }
.pc-pb-sub { display: block; font-size: .85rem; font-weight: 500;
  color: var(--pc-tinta-suave); margin-top: 6px; }
.pc-pb-marco { border-color: var(--pc-marca); background: #eef4fa;
  color: var(--pc-fundo); }
.pc-pb-final { background: var(--pc-fundo); border-color: var(--pc-fundo);
  color: #fff; }

@media (max-width: 760px) {
  /* No celular o fluxo horizontal volta a ser o trilho vertical aprovado. */
  .pc-fluxo-h { display: block; padding: 0; }
  .pc-fluxo-h .pc-passo { flex-direction: row; align-items: center;
    text-align: left; gap: 16px; padding: 13px 0; font-size: 1rem;
    font-weight: 500; }
  .pc-fluxo-h .pc-passo::before { left: 16px; top: 50%; width: 2px;
    height: 100%; }
  .pc-fluxo-h .pc-passo:first-child::before { display: block; }
  .pc-fluxo-h .pc-passo:last-child::before { display: none; }
  .pc-pb-item + .pc-pb-item { margin-top: 26px; }
  .pc-pb-valor { font-size: 1.6rem; }
}

/* ---- D78.2: "Sua marca na frente" consolidada --------------------------
   A grade de beneficios saiu da apresentacao (redundante com a coluna
   "O NR Tutor entrega"); a abertura virou mensagem comercial curta e o
   fecho ganhou um eco leve sob a citacao. Regras novas, em append. */
.pc-marca-chamada { font-size: 1.34rem; line-height: 1.4; font-weight: 700;
  color: var(--pc-fundo); letter-spacing: -.3px; margin: 0 0 12px; }
.pc-marca-eco { margin: 14px 0 0; font-size: .98rem; line-height: 1.6;
  font-weight: 500; color: var(--pc-tinta-suave); padding-left: 30px; }
.pc-col-titulo { text-transform: uppercase; letter-spacing: .6px;
  font-size: .92rem; }
@media (max-width: 760px) {
  .pc-marca-chamada { font-size: 1.16rem; }
  .pc-marca-eco { padding-left: 24px; }
}

/* ---- D78.3: simulacao nos degraus da escala ----------------------------
   Bloco de dados abaixo da frase qualitativa de cada cenario. O layout dos
   cards nao muda; entra um rodape de numeros separado por um fio. */
.pc-degrau-sim { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #dbe6f1; }
.pc-sim-rotulo { margin: 0 0 2px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; color: #7b93a8; }
.pc-sim-valor { margin: 0 0 8px; font-size: 1.45rem; font-weight: 800;
  color: var(--pc-fundo); letter-spacing: -.5px; line-height: 1.1; }
.pc-sim-payback { margin: 0; font-size: .82rem; line-height: 1.5;
  color: var(--pc-tinta-suave); }
.pc-sim-payback strong { color: var(--pc-marca); }
@media (max-width: 760px) {
  .pc-sim-valor { font-size: 1.3rem; }
}


/* ---- D78.4: ajustes ditados na validacao final da proposta -------------
   "+1 ponto" e literal: calc(tamanho vigente + 1pt), nunca um numero novo
   escrito por cima do aprovado. A moldura da secao de abertura e um quadrado
   de UMA linha (1px, sem raio), na cor de borda ja usada pelos cards. */
.pc-secao-ganha .pc-larg { border: 1px solid var(--pc-borda);
  padding: 26px 30px 12px; }
.pc-secao-ganha .pc-p { font-size: calc(var(--pc-corpo) + 1pt); }
.pc-nota { font-size: calc(.85rem + 1pt); }
.pc-aviso-formal { font-size: calc(1em + 1pt); }

@media (max-width: 760px) {
  .pc-secao-ganha .pc-larg { padding: 20px 16px 8px; }
}