/* =====================================================================
   Painel interno: topo, menu lateral, cards de indicadores (8 = 4x2 /
   2x4), formularios em linha e tabelas. Sem estilos inline (CSP).
   ===================================================================== */
body.painel { background: var(--cor-fundo); }

/* ---------- Topo ---------- */
.painel-topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 10px 24px;
  background: var(--cor-primaria-escura); color: #fff;
}
.painel-marca { display: flex; align-items: center; gap: 12px; }
.painel-marca img { background: #fff; border-radius: 6px; padding: 2px; }
.painel-marca strong { display: block; font-size: 16px; color: #fff; }
.painel-marca small { display: block; font-size: 11px; color: #cfe8d9; }
.painel-usuario { display: flex; align-items: center; gap: 12px; font-size: var(--texto-sm); }
.painel-usuario form { margin: 0; }
.painel-usuario .btn.outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.painel-usuario .btn.outline:hover { background: rgba(255, 255, 255, .12); }
.painel-usuario .tag { background: rgba(255, 255, 255, .16); color: #fff; }
.painel-menu-toggle { display: none; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; min-height: 40px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--raio-sm); background: transparent; color: #fff; font-weight: 700; }

/* ---------- Corpo: menu lateral + conteudo ---------- */
.painel-corpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.painel-login .painel-corpo { grid-template-columns: 1fr; }
.painel-nav { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; background: #fff; border-right: 1px solid var(--cor-borda); }
.painel-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--raio-sm);
  color: var(--cor-texto); font-size: var(--texto-sm); font-weight: 600;
}
.painel-nav a:hover { background: var(--cor-superficie-2); text-decoration: none; }
.painel-nav a[aria-current="page"] { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }
.painel-nav a svg { flex-shrink: 0; color: var(--cor-primaria); }
.painel-conteudo { padding: 28px 32px 60px; min-width: 0; }
.painel-titulo { margin-bottom: 20px; }
.painel-titulo h1 { font-size: 26px; margin-bottom: 4px; }
.painel-titulo p { margin: 0; }
.painel-form { max-width: 560px; }

/* ---------- Login ---------- */
.painel-login-caixa { max-width: 420px; margin: 48px auto; }
.painel-login-caixa h1 { font-size: 24px; }

/* ---------- Abas de categoria ---------- */
.abas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.abas a { padding: 9px 16px; border: 1px solid var(--cor-borda-forte); border-radius: 100px; background: #fff; color: var(--cor-texto); font-size: var(--texto-sm); font-weight: 700; }
.abas a:hover { text-decoration: none; background: var(--cor-superficie-2); }
.abas a[aria-current="page"] { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

/* ---------- Cards de indicadores (sempre 8: 4x2 / 2x4) ---------- */
.metricas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Colunas conforme a quantidade de cards ativos (sempre sem sobra) */
.metricas.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metricas.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metricas.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .metricas.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 4.9.12: blocos de 6 (12 cards = 2 linhas); tablet 3, celular 2 */
.metricas.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.metricas.cols-6 .metrica { padding: 14px; }
@media (max-width: 1099px) { .metricas.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* totais: 6 cartoes (Total, Em aberto, Respondidos, Anonimas, Problemas, Satisfacao) */
.grid-totais { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1099px) { .grid-totais { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-totais { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.resumo-indices { display: block; font-size: var(--texto-xs, 12px); color: var(--cor-texto-suave, #5b6770); margin-top: 2px; }
.metrica {
  --ac: var(--cor-primaria); --soft: var(--cor-primaria-clara);
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 18px;
  background: #fff; color: var(--cor-texto); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.metrica::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--ac); }
a.metrica:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-lg); }
.metrica-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--soft); color: var(--ac); }
.metrica-valor { font-size: 32px; line-height: 1; color: var(--cor-titulo); margin-top: 6px; }
.metrica-rotulo { font-weight: 700; font-size: var(--texto-sm); }
.metrica-acao { margin-top: auto; font-size: var(--texto-xs); color: var(--cor-texto-suave); }
.metrica.alerta { border-color: #efc4c4; background: #fffafa; }
.metrica.cor-azul { --ac: #285f98; --soft: #edf3fb; }
.metrica.cor-roxo { --ac: #68518f; --soft: #f3eff8; }
.metrica.cor-vermelho { --ac: #aa4250; --soft: #fbeef0; }
.metrica.cor-ciano { --ac: #146c7b; --soft: #eaf5f6; }
.metrica.cor-laranja { --ac: #985c1b; --soft: #fbf3e8; }
.metrica.cor-verde { --ac: #257348; --soft: #edf6ef; }

/* Cards de resumo */
.resumo { display: flex; flex-direction: column; gap: 4px; padding: 18px; }
.resumo strong { font-size: 26px; color: var(--cor-titulo); line-height: 1.1; }

/* ---------- Formularios em linha ---------- */
.form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; align-items: end; }
.form-linha .field { margin-bottom: 12px; }
.field-botao { justify-content: flex-end; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.acoes-linha form { margin: 0; }
.senha-temp { display: inline-block; margin: 0 8px; padding: 4px 10px; background: #fff; border: 1px dashed var(--cor-aviso); border-radius: 6px; font-size: 16px; letter-spacing: 1px; }
.tabela-auditoria code { font-size: 11px; word-break: break-all; }
.mb-4 { margin-bottom: var(--esp-4); }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .painel-corpo { grid-template-columns: 1fr; }
  .painel-menu-toggle { display: inline-flex; }
  .painel-nav { display: none; border-right: 0; border-bottom: 1px solid var(--cor-borda); padding: 8px 12px; }
  .painel-nav.open { display: flex; }
  
  .painel-conteudo { padding: 20px 16px 48px; }
}
@media (max-width: 720px) {
  .painel-topo { padding: 10px 16px; }
  .metricas, .metricas.cols-3, .metricas.cols-5, .metricas.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* sempre 2 colunas (par) */
  .metrica { min-height: 130px; padding: 14px; }
  .metrica-valor { font-size: 26px; }
  .metrica-acao { display: none; }
  .painel-titulo h1 { font-size: 22px; }
}

/* ---------- Detalhe do atendimento ---------- */
.registro-topo { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.registro-topo h1 { margin: 4px 0; }
.registro-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.prazos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 16px 0 20px; }
.prazos > div { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.prazos strong { color: var(--cor-titulo); }
.prazos small { color: var(--cor-texto-suave); font-size: var(--texto-xs); }
.prazos .prazo-vencido { border-color: #efc4c4; background: #fffafa; }
.prazos .prazo-vencido small, .prazos .prazo-vencido strong { color: var(--cor-erro); }
.registro-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.registro-principal .card h2, .registro-acoes .card h2 { font-size: 18px; }
.registro-acoes { display: grid; gap: 12px; }
.acao-painel { padding: 0; }
.acao-painel > summary { cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--cor-titulo); list-style: none; }
.acao-painel > summary::-webkit-details-marker { display: none; }
.acao-painel > summary::after { content: "+"; float: right; color: var(--cor-texto-suave); }
.acao-painel[open] > summary::after { content: "−"; }
.acao-painel > form { padding: 0 20px 20px; }
.acao-item .acao-painel > summary { padding: 8px 0; font-size: var(--texto-sm); }
.acao-item .acao-painel > form { padding: 0; }
.acao-item { border-top: 1px solid var(--cor-borda); padding: 14px 0; }
.acao-item:first-of-type { border-top: 0; }
.acao-item.vencida { background: linear-gradient(90deg, #fff5f5, transparent 40%); }
.acao-cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.lista-simples { margin: 0; padding-left: 18px; }
.tag.prio-0 { background: #eceeed; color: #4b5550; }
.tag.prio-1, .tag.prio-2 { background: #edf3fb; color: #285f98; }
.tag.prio-3 { background: #fbf3e8; color: #985c1b; }
.tag.prio-4, .tag.prio-5 { background: #fbeef0; color: #aa4250; }
.tag.prio-6 { background: #aa4250; color: #fff; }
.filtros-painel { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtros-painel .field { margin: 0; min-width: 180px; }
@media (max-width: 1100px) { .registro-grid { grid-template-columns: 1fr; } }
.anon-corpo { padding: 0 20px 20px; }
.form-largo { max-width: 860px; }
.form-largo h2 { font-size: 18px; }

/* ---------- Configuracoes ---------- */
.abas-rolagem { overflow-x: auto; flex-wrap: nowrap; }
.abas-rolagem a { white-space: nowrap; }
.abas-sub { margin-top: 0; }
.config-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.config-bool { grid-column: 1 / -1; padding: 10px 0; border-bottom: 1px solid var(--cor-borda); margin: 0; }
.config-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.config-cards .checkrow { margin: 0; }
.config-cards svg { vertical-align: -3px; }
.d-block { display: block; }
.linha-cadastro { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; padding: 14px 0; border-bottom: 1px solid var(--cor-borda); }
.linha-cadastro input, .linha-cadastro select { flex: 1 1 160px; min-width: 0; width: auto; padding: 8px 10px; }
.linha-cadastro .campo-curto { flex: 0 0 80px; }
.linha-cadastro .campo-medio { flex: 0 1 170px; }
.linha-cadastro .checkrow { margin: 0; flex: 0 0 auto; }
.linha-cadastro.inativo { opacity: .6; }
.linha-cadastro.nova { border-bottom: 0; background: var(--cor-superficie-2); padding: 10px; border-radius: var(--raio-md); margin-top: 10px; }
@media (max-width: 720px) { .config-campos, .config-cards { grid-template-columns: 1fr; } }
/* Etiqueta de evento interno na linha do tempo (REQ-050) */
.tag.interno { background: #fff1d6; color: #7a4b00; margin-bottom: 4px; }
/* Pre-visualizacao de anexo sigiloso (REQ-051) */
dialog.previa { max-width: min(92vw, 900px); border: 0; border-radius: var(--raio-lg); padding: 16px; }
dialog.previa::backdrop { background: rgba(0, 0, 0, .6); }
dialog.previa img { display: block; max-width: 100%; max-height: 70vh; margin: 12px auto; user-select: none; }
.link-temp { word-break: break-all; font-size: 13px; letter-spacing: 0; }
/* Itens de menu previstos e ainda sem funcao (REQ-044/055/057) */
.menu-desabilitado { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--cor-texto-suave); opacity: .6; cursor: not-allowed; }
.menu-desabilitado small { display: block; font-size: var(--texto-xs); }
.login-info-link { color: #fff; text-decoration: underline; }
.aviso-email { margin-top: 16px; }

/* Linhas de cadastro com rotulo visivel acima de cada campo (3.1.1) */
.linha-cadastro .campo-linha { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 0; margin: 0; }
.linha-cadastro .campo-linha.curto { flex: 0 0 90px; }
.linha-cadastro .campo-linha.curto-m { flex: 0 0 130px; }
.linha-cadastro .campo-linha.medio { flex: 0 1 190px; }
.linha-cadastro .campo-linha.medio-g { flex: 1 1 240px; }
.linha-cadastro .campo-linha.largo { flex: 2 1 240px; }
.linha-cadastro .campo-linha input, .linha-cadastro .campo-linha select { flex: none; width: 100%; }
.linha-cadastro .campo-rotulo { font-size: .78rem; font-weight: 600; color: var(--cor-texto-suave); line-height: 1.2; }
.linha-cadastro input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; }
.linha-cadastro .checkrow.nova-aba { align-items: center; white-space: nowrap; padding-bottom: 9px; color: var(--cor-texto); }
.linha-cadastro .acoes-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 0 100%; }
.linha-cadastro .campo-titulo-nova { flex: 1 0 100%; margin: 0; font-weight: 700; font-size: var(--texto-sm); }
.icone-com-previa { display: flex; align-items: center; gap: 8px; }
.linha-cadastro .campo-linha .icone-com-previa select { flex: 1 1 auto; width: auto; min-width: 0; }
.icone-previa { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); color: var(--cor-primaria, currentColor); }
.ajuda-campos { margin: 8px 0 4px; padding-left: 18px; color: var(--cor-texto-suave); }
.ajuda-campos li { margin-bottom: 4px; }

/* ===== Leis e Documentos (3.2.0) ===== */
.barra-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.resumo-situacao { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tabela tr.linha-inativa td { opacity: .6; }
.grid-doc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .grid-doc { grid-template-columns: 1fr; } }
.historico-doc { list-style: none; margin: 0; padding: 0; }
.historico-doc li { padding: 8px 0; border-bottom: 1px solid var(--cor-borda); }
.historico-doc li:last-child { border-bottom: 0; }
.lista-seguranca { margin: 0; }
.lista-seguranca dt { font-weight: 700; font-size: var(--texto-sm); margin-top: 10px; }
.lista-seguranca dt:first-child { margin-top: 0; }
.lista-seguranca dd { margin: 2px 0 0; font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.seguranca-grid { align-items: start; }

/* Ajuda "?" no rodape das telas internas (REQ-003) */
.ajuda-tela { margin-top: 24px; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--cor-superficie-2); }
.ajuda-tela summary { cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: var(--texto-sm); display: flex; align-items: center; gap: 8px; }
.ajuda-tela summary:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; }
.ajuda-icone { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cor-primaria); color: #fff; font-size: 13px; }
.ajuda-tela dl { margin: 0; padding: 0 14px 14px; }
.ajuda-tela dt { font-weight: 700; font-size: var(--texto-sm); margin-top: 8px; }
.ajuda-tela dd { margin: 2px 0 0; font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.mb-2 { margin-bottom: var(--esp-2, 8px); }

/* Topo do painel: sessao + Trocar de perfil / Sair (3.3.0) */
.painel-usuario form { display: flex; gap: 8px; flex-wrap: wrap; }
/* Computador: uma linha unica, separada dos botoes por um divisor */
.painel-sessao { display: flex; align-items: center; gap: 10px; line-height: 1.2; padding-right: 14px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, .25); white-space: nowrap; }
.painel-sessao .sessao-nome { display: inline-flex; align-items: center; gap: 6px; }
.painel-sessao .tag { margin: 0; }
.painel-sessao .sessao-meta { color: rgba(255, 255, 255, .75); font-size: 12px; }
/* Tablet (ate 1100px, 3.6.1): linha 1 = marca + botao Menu; linha 2 = sessao (esq.) e botoes (dir.) */
@media (max-width: 1100px) {
  .painel-topo { flex-wrap: wrap; row-gap: 8px; padding: 10px 20px; }
  .painel-marca { flex: 1 1 auto; min-width: 0; }
  .painel-usuario { order: 3; flex: 1 0 100%; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .18); }
  .painel-sessao { border-right: 0; padding-right: 0; margin-right: 0; flex-wrap: wrap; gap: 4px 10px; }
}
/* Celular: sessao em uma linha e botoes logo abaixo */
@media (max-width: 560px) {
  .painel-sessao { width: 100%; white-space: normal; }
  .painel-usuario form { width: 100%; }
  .painel-usuario form .btn { flex: 1 1 0; }
}
.abas a.aba-icone { display: inline-flex; align-items: center; gap: 6px; }
.so-impressao { display: none; }
.rel-grupo .col-item { width: 46%; }
.rel-grupo .col-situacao { width: 24%; }

/* Impressao / PDF (A4): cabecalho proprio, resumo em tabela, tabelas que quebram por linha */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html, body { background: #fff !important; }
  .painel-topo, .painel-nav, .abas, .barra-acoes, .ajuda-tela, .skip, .nao-imprimir, .alert { display: none !important; }
  .so-impressao { display: block; }
  .painel-corpo { display: block; }
  .painel-conteudo { padding: 0; max-width: none; }
  .painel-titulo { display: none; }
  body { font-size: 10.5pt; color: #000; }
  .cabecalho-impressao { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 12px; }
  .cabecalho-impressao h2 { font-size: 15pt; margin: 4px 0; }
  .tabela-resumo-impressao { margin-top: 8px; width: 60%; }
  .card { box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 14px 0 0 !important; background: none !important; break-inside: auto; }
  .card h2 { font-size: 12pt; margin: 0 0 6px; break-after: avoid; }
  .table-responsive { overflow: visible !important; }
  .tabela { width: 100%; table-layout: fixed; border-collapse: collapse; }
  .tabela th, .tabela td { white-space: normal !important; word-break: normal; overflow-wrap: anywhere; font-size: 9pt; padding: 4px 6px; border-bottom: 1px solid #bbb; vertical-align: top; }
  .tabela th { color: #000; white-space: nowrap !important; overflow-wrap: normal; }
  .tabela td.nowrap { white-space: nowrap !important; overflow-wrap: normal; }
  .rel-grupo .col-item { width: 40%; }
  .rel-grupo .col-situacao { width: 20%; }
  .tabela tr { break-inside: avoid; }
  .tabela thead { display: table-header-group; }
  .tag { background: none !important; color: #000 !important; padding: 0 !important; white-space: normal !important; font-weight: 400; }
  .tiny, .muted { color: #333 !important; }
  a { color: inherit; text-decoration: none; }
}
.limite-info { display: block; margin-top: 6px; color: var(--cor-texto-suave); font-size: var(--texto-xs); line-height: 1.5; }
/* Aprovacoes pendentes e ato de nomeacao (3.3.0) */
.card-destaque { border-color: #e7c98f; background: #fffbf2; }
fieldset.nomeacao { border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio-md); padding: 12px 16px 4px; margin: 8px 0 16px; }
fieldset.nomeacao legend { font-weight: 700; font-size: var(--texto-sm); padding: 0 6px; }
.release { border-bottom: 1px solid var(--cor-borda); padding: 8px 0; }
.release summary { cursor: pointer; font-weight: 700; }
.release ul { margin: 8px 0 4px; }
fieldset.opcoes-aviso { border: 0; padding: 0; margin: 8px 0; } fieldset.opcoes-aviso legend { font-weight: 700; font-size: var(--texto-sm); margin-bottom: 6px; } fieldset.opcoes-aviso .checkrow { margin-bottom: 6px; }
/* Seguranca / Integracoes (3.4.0) */
.acao-detalhe { margin-top: 6px; font-size: var(--texto-sm); }
.acao-detalhe summary { cursor: pointer; color: var(--cor-primaria); font-weight: 700; }
.acao-detalhe form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-width: 240px; }
form.inline { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.integracao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.integracao-topo h2, .integracao-topo h3 { margin: 0; font-size: 1.05rem; }
.integracoes { align-items: start; }
/* Repositorio de normas e Carta de Servicos (3.5.0) */
.repo-filtros .repo-busca { flex: 1 1 260px; }
.repo-filtros .repo-inativos { margin: 0 0 8px; align-items: center; }
.paginacao { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.resumo-situacao a.tag:hover { text-decoration: none; filter: brightness(.96); }
.carta-doc .card h2 { font-size: 1.1rem; }
.carta-doc ol li, .carta-doc ul li { margin-bottom: 6px; }
@media (max-width: 720px) { .abas { gap: 6px; } .abas a { padding: 8px 12px; } }

/* ===== 3.6.1: grupos do menu lateral (Cadastros) e tablet ===== */
.menu-grupo { display: block; margin: 14px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); }
.painel-nav .menu-grupo:first-child { margin-top: 0; }
.painel-nav a.sub { padding-left: 20px; font-weight: 500; }
.painel-marca strong, .painel-marca small { white-space: nowrap; }
.painel-menu-toggle::before { content: "\2630"; font-size: 17px; line-height: 1; }
/* 3.7.0: secoes recolhiveis do menu (details/summary, sem JS) */
.menu-secao { border-bottom: 1px solid var(--cor-borda); padding: 2px 0 6px; }
.menu-secao:last-of-type { border-bottom: 0; }
.menu-secao > summary.menu-grupo { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 8px 12px; border-radius: var(--raio-sm); cursor: pointer; list-style: none; user-select: none; }
.menu-secao > summary.menu-grupo::-webkit-details-marker { display: none; }
.menu-secao > summary.menu-grupo::after { content: "\203A"; margin-left: auto; font-size: 18px; line-height: 1; transition: transform .15s ease; }
.menu-secao[open] > summary.menu-grupo::after { transform: rotate(90deg); }
.menu-secao > summary.menu-grupo:hover { background: var(--cor-superficie-2); color: var(--cor-texto); }
.menu-secao > summary.menu-grupo:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 1px; }
.menu-qtd { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--cor-superficie-2); color: var(--cor-texto-suave); letter-spacing: 0; }
.menu-itens { display: flex; flex-direction: column; gap: 2px; }
.painel-nav a.menu-previa { color: var(--cor-texto-suave); opacity: .75; border: 1px dashed var(--cor-borda-forte); }
.painel-nav a.menu-previa small { display: block; font-size: var(--texto-xs); font-weight: 500; }
.painel-nav a.menu-previa svg { color: var(--cor-texto-suave); }
@media (max-width: 960px) {
  /* menu aberto no tablet: itens de cada secao em duas colunas */
  .painel-nav.open { display: flex; }
  .menu-itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}
@media (max-width: 560px) { .menu-itens { grid-template-columns: 1fr; } }
/* Totais clicaveis do dashboard */
a.card.resumo { display: flex; color: inherit; } /* a.card (block) nao pode anular o layout em coluna */
a.card.resumo:hover { border-color: var(--cor-primaria); }
.resumo .resumo-detalhe { font-size: var(--texto-xs); color: var(--cor-texto-suave); }
/* Integracoes: requisitos */
.integracao-req { margin-top: 12px; border-top: 1px solid var(--cor-borda); padding-top: 10px; }
.integracao-req summary { cursor: pointer; font-weight: 700; font-size: var(--texto-sm); color: var(--cor-primaria); }
.integracao-req .integracao-sub { font-size: var(--texto-sm); margin: 12px 0 4px; }
.integracao-req ul { margin: 0; padding-left: 18px; font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.integracao-req li { margin-bottom: 3px; }
.integracao-req code { font-size: 12px; }
.integracoes-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

/* ===== 3.7.0: Painel do Gestor (modelo), previas e faixa DEMO ===== */
.demo-faixa { position: sticky; top: 64px; z-index: 5; margin: -8px 0 16px; padding: 8px 14px; border-radius: var(--raio-md); background: #fff1d6; border: 1px solid #e7c98f; color: #6b4300; font-size: var(--texto-sm); text-align: center; }
.gestor-tela { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); padding: 18px; }
.gestor-tela:fullscreen { overflow: auto; padding: 28px; border-radius: 0; }
.gestor-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.gestor-marca { display: flex; align-items: center; gap: 10px; }
.gestor-marca strong { display: block; font-size: 18px; color: var(--cor-titulo); }
.gestor-marca small { display: block; color: var(--cor-texto-suave); font-size: var(--texto-xs); }
.gestor-hora { font-size: var(--texto-sm); color: var(--cor-texto-suave); display: inline-flex; gap: 8px; align-items: center; }
.gestor-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gestor-kpis .metrica { min-height: 130px; }
.gestor-kpis.kpis-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gestor-kpis.kpis-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gestor-graficos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.gestor-graficos .card { padding: 18px; }
.gestor-graficos h2 { font-size: 16px; }
.barra-h { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 34px; gap: 8px; align-items: center; font-size: var(--texto-sm); margin-bottom: 6px; }
.barra-h progress { width: 100%; height: 12px; accent-color: var(--cor-primaria); }
.barra-h strong { text-align: right; }
.gestor-acoes details { margin-bottom: 4px; }
.gestor-acoes summary { cursor: pointer; color: var(--cor-primaria); font-weight: 700; font-size: var(--texto-sm); white-space: nowrap; }
.gestor-avisos { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 14px; padding: 12px 16px; border-radius: var(--raio-md); background: var(--cor-primaria-escura); color: #fff; font-size: var(--texto-sm); }
.gestor-avisos span::before { content: "• "; opacity: .7; }
.gestor-tela:not(.modo-tv) .gestor-avisos { display: none; }
.modo-tv .metrica-valor { font-size: 40px; }
.modo-tv .metrica-rotulo { font-size: 16px; }
@media (max-width: 1100px) { .gestor-kpis, .gestor-kpis.kpis-cols-3, .gestor-kpis.kpis-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gestor-graficos { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .demo-faixa { top: 110px; } }
.previa-desabilitada fieldset[disabled] { opacity: .7; }
.previa-desabilitada fieldset[disabled] h2 { font-size: 18px; }
/* Integracoes: observacao do card */
.integracao-nota { margin: 8px 0 10px; padding: 8px 12px; border-left: 4px solid var(--cor-primaria); background: var(--cor-primaria-clara); border-radius: 6px; font-size: var(--texto-sm); }
.tag.master { background: #ffe9a8; color: #5c3f00; }

/* 3.7.2: bloco do acervo em destaque (aparece so com a origem «Acervo») */
fieldset.bloco-acervo { border: 2px solid #b7791f; border-left-width: 6px; background: #fff7e6; border-radius: var(--raio-md); padding: 14px 18px 8px; }
fieldset.bloco-acervo legend { color: #7a4b00; font-weight: 800; background: #fff7e6; padding: 0 8px; }
fieldset.bloco-acervo .tiny.muted { color: #6b4a14; }

/* 4.0: formularios compactos dentro da tabela de dispositivos */
.acao-detalhe label { display: flex; flex-direction: column; gap: 2px; }
.acao-detalhe input, .acao-detalhe select { padding: 7px 9px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); background: #fff; min-width: 0; }
.acao-detalhe .campo-senha input { padding-right: 52px; }

/* 4.1 - Dispositivos do Painel do Gestor: pedido pendente em destaque e botao grande */
.card-aprovar { border: 2px solid #e0b100; background: #fffaf0; margin-bottom: var(--esp-4, 1rem); }
.card-aprovar h2 { color: #6b4e00; }
.card-aprovar .campo-codigo { font-size: 1.4rem; letter-spacing: .25em; font-weight: 700; max-width: 12rem; }
.btn.btn-grande { font-size: 1.1rem; padding: .85rem 1.6rem; min-height: 52px; display: inline-flex; align-items: center; gap: .5rem; }
.btn-aprovar { background: #b07800; border-color: #b07800; }
.acao-detalhe summary.btn { list-style: none; display: inline-block; color: var(--cor-primaria); }
.acao-detalhe summary.btn::-webkit-details-marker { display: none; }
.acao-detalhe[open] summary.btn { background: var(--cor-primaria); color: #fff; }
.card-aprovar .form-recusar { display: inline-block; margin-top: .75rem; }
.barra-h.barra-pct { grid-template-columns: minmax(110px, 1fr) 2fr 70px; }

/* 4.2 - Administrador Master e problemas */
.master-bloco h2 .tag { font-size: .75rem; vertical-align: middle; margin-left: .4rem; }
.master-alerta { border: 2px solid #b42318; background: #fff5f4; }
.btn.btn-perigo { background: #b42318; border-color: #b42318; color: #fff; }
.campo-largo { grid-column: 1 / -1; }
.pre-linha { white-space: pre-line; }
.filtros-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.filtros-linha label { display: flex; flex-direction: column; gap: 2px; }
.lista-simples { padding-left: 1rem; }
.lista-simples li { margin-bottom: 6px; }
.cadastro-problema summary { cursor: pointer; }
.campo-curto { max-width: 5.5rem; }

/* 4.4 - Visao geral: indicadores adicionais (ate 8 por linha) e graficos (ate 4 por linha) */
.visao-secao { font-size: .95rem; margin: 28px 0 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); }
.visao-cards-8 { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .visao-cards-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .visao-cards-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.metrica.mini { padding: 12px; min-height: 0; }
.metrica.mini .metrica-valor { font-size: 1.5rem; }
.visao-graficos-4 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .visao-graficos-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .visao-graficos-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.visao-graficos-4 .grafico-card { margin: 0; background: #fff; border: 1px solid var(--cor-borda); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.visao-graficos-4 .grafico-card h3 { font-size: .9rem; margin: 0; }
.grafico-svg { width: 100%; height: auto; display: block; }
.grafico-svg a .barra-link:hover rect:first-of-type, .grafico-svg a:focus .barra-link rect:first-of-type { opacity: .8; }
.grafico-svg a { cursor: pointer; }
.personalizar-visao summary { cursor: pointer; }
/* 4.4 - botao Voltar fixo (demonstracao do Painel do Gestor) */
.btn-voltar-fixo { position: fixed; left: 14px; top: 50%; z-index: 950; background: #b07800; color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.3); text-decoration: none; }
.btn-voltar-fixo:hover, .btn-voltar-fixo:focus { background: #8a5d00; color: #fff; text-decoration: none; }
:fullscreen .btn-voltar-fixo { display: none; }

/* 4.5 Base da Cidade / Cadastro Digital: formulario gerado pela definicao */
.form-grid .field-largo { grid-column: 1 / -1; }
.checks-linha { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.checks-linha .checkrow { margin: 0 0 6px; }
fieldset.dias-semana { grid-column: 1 / -1; }
.obrig { color: var(--cor-perigo, #b42318); }
.form-grid .campo-bool { align-self: center; padding: 8px 0; }
.form-grid .campo-bool .checkrow { margin: 0; color: var(--cor-texto); font-weight: 600; }

/* 4.9: item de menu solto (sem submenu) - mesma altura e peso de um grupo */
.painel-nav a.menu-solto { margin: 6px 0; padding: 10px 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-suave); border-bottom: 1px solid var(--cor-borda); border-radius: 0; }
.painel-nav a.menu-solto[aria-current="page"] { color: var(--cor-primaria-escura); border-radius: var(--raio-sm); }
/* 4.9 Base da Cidade: rodape «Como funciona» (letra cinza visivel) */
.cidade-como { border-top: 1px solid var(--cor-borda); padding-top: 16px; color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.cidade-como h2 { font-size: 15px; color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.cidade-como dl { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 6px 16px; margin: 0 0 12px; }
.cidade-como dt { font-weight: 700; }
.cidade-como dd { margin: 0; }
.cidade-responsabilidade { background: var(--cor-superficie-2, #f3f6f4); border-left: 4px solid var(--cor-borda-forte); padding: 10px 14px; border-radius: 6px; margin: 0; }
@media (max-width: 640px) { .cidade-como dl { grid-template-columns: 1fr; } }
.form-grid .tiny.muted, .form-grid .campo-bool .tiny.muted { display: block; margin-top: 4px; }

/* 4.9.1 Campo de lista no estilo GLPI: [select] |i| |+| */
.campo-ref { display: flex; align-items: stretch; gap: 0; }
.campo-ref select { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-ref { flex: 0 0 auto; width: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cor-borda-forte); border-left: 0;
  background: var(--cor-superficie-2); color: var(--cor-texto); font-weight: 700; font-size: 16px; cursor: pointer; padding: 0; }
.btn-ref:last-child { border-top-right-radius: var(--raio-sm); border-bottom-right-radius: var(--raio-sm); }
.btn-ref:hover, .btn-ref:focus-visible { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); }
.btn-ref.falso { display: inline-flex; width: 22px; height: 22px; border: 1px solid var(--cor-borda-forte); border-radius: 4px; font-size: 12px; vertical-align: middle; cursor: default; }
.aviso-ref { margin: 4px 0 0; font-size: var(--texto-xs); color: var(--cor-sucesso); font-weight: 700; }
.janela-ref { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 0; border-radius: var(--raio-lg); padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.janela-ref::backdrop { background: rgba(0,0,0,.45); }
.janela-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--cor-borda); position: sticky; top: 0; background: var(--cor-superficie); z-index: 1; }
.janela-topo h2 { margin: 0; font-size: var(--texto-lg); }
.janela-corpo { padding: 16px 20px 20px; }
.form-janela .form-grid { grid-template-columns: 1fr 1fr; }
.erro-janela { color: var(--cor-erro); background: var(--cor-erro-fundo); padding: 8px 12px; border-radius: var(--raio-sm); font-weight: 600; }
.label-fixo { display: block; font-weight: 700; font-size: var(--texto-sm); margin-bottom: 6px; }
.valor-fixo { margin: 0; padding: 10px 12px; background: var(--cor-superficie-2); border-radius: var(--raio-sm); }
.resumo-item { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.resumo-item dt { font-weight: 700; color: var(--cor-texto-suave); }
.resumo-item dd { margin: 0; }

/* 4.9.1 Quadro de horario */
.quadro-horario { border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: 12px 16px; margin: 4px 0 16px; }
.quadro-horario legend { font-weight: 700; font-size: var(--texto-sm); padding: 0 6px; }
.horario-prontos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.horario-modo { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 8px; }
.horario-modo .checkrow, .horario-dias .checkrow { margin: 0; color: var(--cor-texto); }
.horario-dias { border-collapse: collapse; width: auto; }
.horario-dias th, .horario-dias td { padding: 4px 12px 4px 0; text-align: left; font-size: var(--texto-sm); }
.horario-dias thead th { color: var(--cor-texto-suave); font-weight: 600; }
.horario-dias input[type=checkbox], .horario-modo input[type=radio] { width: 18px; height: 18px; margin-top: 2px; }
.horario-dias input[type=time] { width: 120px; padding: 6px 8px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); font: inherit; }
.horario-dias tr.fechado td { opacity: .45; }
.quadro-horario.modo-24h .horario-dias, .quadro-horario.modo-vazio .horario-dias { display: none; }
.horario-obs { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: var(--texto-sm); font-weight: 600; }
.horario-obs input { flex: 1 1 auto; max-width: 420px; padding: 8px 10px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); font: inherit; font-weight: 400; }
.checks-linha input[type=checkbox] { width: 18px; height: 18px; }
@media (max-width: 640px) { .form-janela .form-grid { grid-template-columns: 1fr; } }

/* 4.9.1 Perfis e permissoes (grade estilo GLPI) */
.abas-perfil { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--cor-borda); }
.abas-perfil a { padding: 8px 14px; border-radius: var(--raio-sm) var(--raio-sm) 0 0; text-decoration: none; color: var(--cor-texto-suave); font-weight: 600; font-size: var(--texto-sm); }
.abas-perfil a.ativa { background: var(--cor-primaria); color: #fff; }
.grade-perm td.centro, .grade-perm th.centro { text-align: center; }
.grade-perm tr.grupo th { background: var(--cor-superficie-2); text-transform: uppercase; font-size: var(--texto-xs); letter-spacing: .04em; color: var(--cor-texto-suave); }
.perm { display: inline-flex; width: 20px; height: 20px; border-radius: 4px; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.perm.sim { background: #6cb33f; color: #fff; }
.perm.nao { border: 1.5px solid var(--cor-borda-forte); background: var(--cor-superficie); }
.perm.na { color: var(--cor-texto-suave); width: auto; }
.perm-letras { display: inline-block; min-width: 28px; padding: 2px 6px; border-radius: 4px; background: #e6f4dc; color: #2f6a12; font-weight: 800; font-size: var(--texto-xs); letter-spacing: .08em; }
.perm-letras.master { background: #fff3cd; color: #7a4b00; }

/* 4.9.1 Comunicacao institucional na TV: uma linha (1/3 da altura anterior) */
.tv-avisos-compacto { padding-top: 14px; padding-bottom: 12px; }
.tv-avisos-linha { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) auto; gap: 12px; align-items: end; }
.tv-avisos-linha .field { margin-bottom: 0; }
.tv-avisos-compacto p.tiny { margin-top: 6px; }
@media (max-width: 900px) { .tv-avisos-linha { grid-template-columns: 1fr; } }

/* 4.9.1 Configuracoes: justificativa + documento de autorizacao lado a lado; ato de designacao recolhivel */
.justificativa-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.ato-designacao { grid-column: 1 / -1; border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: 10px 14px; margin: 4px 0 14px; }
.ato-designacao summary { cursor: pointer; }
.ato-designacao[open] summary { margin-bottom: 10px; }
.ato-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
input[type=file] { font: inherit; font-size: var(--texto-sm); }
@media (max-width: 760px) { .justificativa-linha, .ato-campos { grid-template-columns: 1fr; } }
/* 4.9.2 grade marcavel */
.perm-marcar { display: inline-flex; cursor: pointer; }
.perm-marcar input { width: 20px; height: 20px; accent-color: #6cb33f; cursor: pointer; }
.perm-cadeado { display: inline-flex; color: var(--cor-texto-suave); vertical-align: middle; }
.celula-mudou { background: #fff3cd; }
.perm-letras.mudou { background: #fff3cd; color: #7a4b00; outline: 1px solid #e0b84c; }
.justificativa-linha .actions { align-self: end; padding-bottom: 12px; }

/* 4.9.4: botoes Pizza | Barras | Linha acima dos graficos da Visao geral */
.graficos-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 28px 0 10px; }
.graficos-cabeca .visao-secao { margin: 0; }
.tipo-grafico-botoes { display: inline-flex; border: 1px solid var(--cor-borda-forte); border-radius: 999px; overflow: hidden; }
.tipo-grafico-botoes button { border: 0; background: transparent; padding: 6px 14px; font: inherit; font-weight: 700; color: var(--cor-texto); cursor: pointer; min-height: 36px; }
.tipo-grafico-botoes button + button { border-left: 1px solid var(--cor-borda-forte); }
.tipo-grafico-botoes button[aria-pressed="true"] { background: var(--cor-primaria); color: #fff; }
.tipo-grafico-botoes button:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: -3px; }

/* 4.9.4: apoio a decisao em Perfis e permissoes */
.como-funciona summary { cursor: pointer; }
.passos-perfil { margin: 12px 0; padding-left: 22px; display: grid; gap: 8px; }
.legenda-risco { display: grid; gap: 6px; margin: 10px 0; font-size: var(--texto-sm, .9rem); }
.selo-risco { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--texto-xs, .75rem); font-weight: 800; white-space: nowrap; vertical-align: middle; }
.selo-seguro { background: #e6f4dc; color: #2f6a12; }
.selo-cuidado { background: #fff3cd; color: #7a4b00; }
.selo-travado { background: #eceff1; color: #4a5560; }
.resumo-perfil { border: 1px solid var(--cor-borda-forte); border-radius: 8px; padding: 10px 14px; margin: 10px 0 16px; background: var(--cor-superficie); }
.resumo-perfil ul { margin: 8px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.resumo-perfil li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--cor-borda-forte); font-size: var(--texto-sm, .9rem); }
.resumo-perfil li.risco-cuidado { border-color: #e0b84c; background: #fffaf0; }
.resumo-perfil li.risco-seguro { border-color: #9fd27f; background: #f6fbf2; }

/* 4.9.7 - ajuda cinza do processo: quem ve cada acao */
.ajuda-cinza { margin: 0 0 10px; padding: 8px 10px; background: #f1f3f2; border-left: 3px solid #9aa5a0; border-radius: 4px; color: #3d4743; font-size: var(--texto-sm, .9rem); line-height: 1.45; }
.ajuda-cinza .vis { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px; font-size: var(--texto-xs, .75rem); font-weight: 800; white-space: nowrap; }
.vis-cidadao { background: #e6f0fb; color: #1d4f8f; }
.vis-equipe { background: #e4e7e6; color: #3d4743; }
.vis-gestor { background: #fff3cd; color: #7a4b00; }
.metrica-dica { display: block; font-size: var(--texto-xs, .75rem); opacity: .85; margin-top: 2px; }
.aviso-conclusao { background: #eef4fc; border-left: 3px solid #2a78d6; padding: 8px 10px; border-radius: 4px; }
.linha-aviso td { background: #fffaf0; }
.campo-curto { max-width: 90px; }
.aviso-limite { display: block; margin-top: 4px; color: #7a4b00; font-weight: 600; }
/* 4.9.7 - Ajuda > Duvidas */
.faq-lista { display: grid; gap: 8px; }
.faq-item summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 32px; }
/* 4.9.9: botao preenchido dentro de <details> (ex.: «Cadastro válido») ficava verde sobre verde, sem texto visivel */
.acao-detalhe summary.btn:not(.outline) { color: #fff; }

/* 4.9.11: Gestor > Dispositivos — ações em uma linha, embaixo dos dados do aparelho */
.tabela tr.linha-dados > td:not([rowspan]) { border-bottom: 0; padding-bottom: 2px; }
.tabela tr.linha-acoes > td { padding-top: 4px; }
.tabela tr.linha-acoes .acoes-linha { align-items: flex-start; }
.tabela tr.linha-acoes .acao-detalhe { margin-top: 0; }
.tabela tbody tr.linha-dados:hover, .tabela tbody tr.linha-acoes:hover { background: transparent; } /* as 2 linhas são um aparelho só: sem realce pela metade */

/* ---------- 4.9.15 Menu reorganizado: grupos em sentence case, busca no menu, trilha ---------- */
.painel-nav.menu-novo .menu-grupo { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--cor-texto); cursor: pointer; }
.painel-nav.menu-novo .menu-secao { padding: 2px 0 4px; }
.painel-nav.menu-novo .menu-secao[open] > .menu-grupo { color: var(--cor-primaria-escura); }
.menu-busca { padding: 0 4px 10px; }
.menu-busca input { width: 100%; height: 36px; padding: 0 10px; font-size: 14px; border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); }
.painel-nav [data-menu-oculto] { display: none !important; }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--cor-texto-suave); margin-bottom: 10px; }
.trilha a { color: var(--cor-primaria); font-weight: 600; }
.trilha [aria-current="page"] { color: var(--cor-texto); font-weight: 600; }
.topo-portal { white-space: nowrap; }
.central-modulo { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.central-modulo:hover { border-color: var(--cor-primaria); }
.central-topo { display: flex; align-items: center; gap: 8px; }
/* 4.9.15: «Portal» no topo no computador; no celular o link fica no fim do menu (topo mais baixo) */
.painel-nav a.so-celular { display: none; }
@media (max-width: 960px) { .topo-portal { display: none; } .painel-nav a.so-celular { display: flex; } }

/* ---------- 4.9.16 Textos dos e-mails ---------- */
.textos-grade { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: start; }
.textos-lista ul { list-style: none; padding: 0; margin: 0 0 12px; }
.textos-lista li { padding: 4px 0; }
.textos-lista a[aria-current="page"] { font-weight: 700; color: var(--cor-primaria-escura); }
.textos-vars { columns: 2; padding-left: 16px; }
.textos-previa { background: var(--cor-superficie-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); padding: 12px; }
.textos-previa pre { white-space: pre-wrap; font-family: inherit; font-size: 14px; margin: 0; }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
@media (max-width: 960px) { .textos-grade { grid-template-columns: 1fr; } .textos-vars { columns: 1; } }
/* 4.9.16: pedido do aparelho (codigo visivel + quem pediu) */
.pedido-resumo { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 12px 14px; margin: 8px 0; background: var(--cor-superficie-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); }
.pedido-resumo > div { display: flex; flex-direction: column; gap: 2px; }
.pedido-codigo { font-size: 28px; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
.aviso-pedido { color: var(--cor-aviso, #8a5a00); }

/* ---------- 4.9.17 Conjuntos de cards proporcionais (pedido de 16/10) ----------
   1) Todos os cards de um mesmo conjunto com a MESMA altura, em todas as linhas (grid-auto-rows: 1fr);
   2) rótulo reserva 2 linhas (um rótulo curto não deixa o card mais baixo que o vizinho);
   3) os TOTAIS (outro assunto) ficam mais baixos, para destacar os indicadores de atendimento. */
.metricas, .visao-cards-8, .gestor-cards-8, .gestor-kpis, .grid-totais { grid-auto-rows: 1fr; }
.metricas .metrica { min-height: 0; height: 100%; }
.metricas .metrica-rotulo { min-height: 2.6em; line-height: 1.3; }
.metricas .metrica-dica { display: none; } /* a explicação continua ao passar o mouse (title) */
.grid-totais .card.resumo { padding: 12px 14px; gap: 2px; height: 100%; }
.grid-totais .card.resumo strong { font-size: 22px; }
.grid-totais .resumo-detalhe, .grid-totais .resumo-indices { font-size: 11.5px; line-height: 1.35; }
.gestor-cards-8 .metrica, .visao-cards-8 .metrica, .gestor-kpis .metrica { height: 100%; }

/* 4.9.17 — Ações em massa (Registros) e vínculo com busca (registro) */
.massa-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 12px; margin: 0 0 12px;
  border: 1px solid var(--borda, #d6dde6); border-left: 4px solid var(--primaria, #0b5ed7); border-radius: 8px; background: var(--fundo-suave, #f5f8fc); }
.massa-barra[hidden] { display: none; }
.massa-barra .field { margin: 0; min-width: 200px; }
.massa-barra .massa-conta { align-self: center; }
.tabela-massa .c-marca { width: 34px; text-align: center; }
.tabela-massa .c-marca input { width: 18px; height: 18px; }
.vinc-busca { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.vinc-busca .field { flex: 1 1 180px; margin: 0; }
.vinc-sugestoes { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.vinc-sugestoes li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
@media (max-width: 720px) {
  .tabela-cartoes.tabela-massa td.c-marca { position: absolute; top: 10px; right: 10px; width: auto; padding: 0; border: 0; }
  .tabela-cartoes.tabela-massa td.c-marca::before { display: none; }
  .tabela-cartoes.tabela-massa tr { position: relative; }
  .massa-barra .field { min-width: 100%; }
}

/* 4.9.18 — links do acesso da equipe visíveis */
.login-links { font-size: 14px; font-weight: 600; text-align: center; }
.login-links a { display: inline-block; padding: 6px 2px; }
/* 4.9.19 — tabela de cards do Gestor/TV */
.tabela-gestor-cards .c-modo { width: 90px; text-align: center; }
.tabela-gestor-cards .c-modo input { width: 20px; height: 20px; }
.tabela-gestor-cards .linha-grupo th { background: var(--fundo-suave, #f3f6f9); text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }

/* 4.9.20 — alerta do modo do aparelho (Gestor / TV): pedido de autorização, aprovação e tela do Gestor */
.aviso-modo { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0; padding: 12px 14px; border-radius: 10px; text-align: left;
  border: 1px solid #e0b252; border-left: 5px solid #c98a00; background: #fff8e6; color: #4a3500; }
.aviso-modo.aviso-tv { border-color: #9cb8d6; border-left-color: #2b5f93; background: #eef4fb; color: #16324f; }
.aviso-modo strong { display: block; font-size: 15px; letter-spacing: .01em; text-transform: uppercase; }
.aviso-modo ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; }
.aviso-modo-icone { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: currentColor; }
.aviso-modo-icone::after { content: "!"; color: #fff; font-weight: 800; font-size: 16px; line-height: 1; }
.aviso-modo-icone { font-size: 0; color: #c98a00; }
.aviso-modo.aviso-tv .aviso-modo-icone { color: #2b5f93; }
.aviso-modo.compacto { display: block; margin: 4px 0; padding: 6px 10px; font-size: 13px; border-left-width: 4px; }
.aviso-modo.compacto strong { display: inline; font-size: 13px; text-transform: none; }
.avisos-modo-par { flex: 1 1 100%; }
.tema-escuro .aviso-modo { background: #3a2c0a; color: #ffe2a3; border-color: #7a5a14; }
.tema-escuro .aviso-modo.aviso-tv { background: #102338; color: #cfe3fa; border-color: #2e5378; }
.btn.desativado { opacity: .55; cursor: not-allowed; pointer-events: none; } /* 4.9.20 prévia */
/* 4.9.20 — Dúvidas: aprovação com um clique */
.faq-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.faq-acoes form.inline { display: inline; }
.faq-aprovar { background: #157347; border-color: #157347; color: #fff; }
/* 4.9.20 — relatório de envios */
.envios-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; grid-auto-rows: 1fr; }
.envios-totais .card.resumo { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.envios-totais strong { font-size: 22px; }
/* 4.9.20 — Auditoria: painel de ocorrências */
.grid-ocorrencias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1100px) { .grid-ocorrencias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-ocorrencias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid-ocorrencias a.metrica { text-decoration: none; color: inherit; }
.grid-ocorrencias a.metrica.zerada { opacity: .6; }
.grid-ocorrencias a.metrica:hover { border-color: var(--cor-primaria); }
.sem-borda { border: 0; padding: 0; margin: 0; min-width: 0; } /* 4.9.21 */
/* 4.9.21 — Ajuda: manual por perfil e «O que eu posso fazer?» */
.manual-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.manual-abas a { padding: 6px 12px; border: 1px solid var(--cor-borda, #d6dde6); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; }
.manual-abas a[aria-current] { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.manual-secoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.manual-passos { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.acessos-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.acessos-lista { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.acessos-grupo { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cor-texto-suave); margin-right: 4px; }
h2.acessos-ok { color: #157347; } h2.acessos-nao { color: #a3282a; }
/* 4.9.21 — Painel do Master (resumo) */
.master-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.master-itens { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.master-itens li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cor-borda, #e3e8ee); padding-bottom: 6px; }
.master-itens li:last-child { border-bottom: 0; }
/* 4.9.22 — validação do responsável pelo aparelho: amarelo aguardando, vermelho vencido, verde validado */
.acao-detalhe summary.btn.btn-validar-pendente { background: #f2c14e; border-color: #d9a520; color: #3d2a00; }
.acao-detalhe summary.btn.btn-validar-vencido { background: #b42318; border-color: #b42318; color: #fff; }
.btn.btn-validado { background: #157347; border-color: #157347; color: #fff; cursor: default; }
.form-tv { display: grid; gap: 8px; max-width: 420px; } /* 4.9.22 */
/* 4.9.22 — alerta do modo em uma linha, com «Ocultar» */
.aviso-modo.linha { align-items: center; padding: 8px 12px; gap: 10px; }
.aviso-modo.linha .aviso-modo-texto { flex: 1; min-width: 0; font-size: 14px; }
.aviso-modo.linha .aviso-modo-texto strong { display: inline; font-size: 14px; text-transform: none; }
.aviso-modo.linha .aviso-modo-icone { width: 22px; height: 22px; }
.aviso-fechar { flex: none; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 13px; cursor: pointer; }
.aviso-modo[hidden] { display: none !important; }

/* 4.10.0 (47A): campo com o link de ativação do gestor (somente leitura) */
.campo-link { width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px; }

/* 4.11.0 (48C) — campos travados da aprovação (vêm do Cadastro de gestores) */
.campo-travado { background: var(--cor-superficie-2); color: var(--cor-texto); cursor: not-allowed; border-style: dashed; }
[data-resp-travado].conferido .campo-travado { border-style: solid; border-color: var(--cor-sucesso); }
.resp-conferencia { margin: .25rem 0 .5rem; color: var(--cor-texto-suave); }

/* 4.11.0 (48D) — prévia do brasão em Configurações › Topo e rodapé */
.brasao-config { display: flex; gap: var(--esp-4); align-items: flex-start; flex-wrap: wrap; }
.brasao-previa { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: var(--esp-3); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio-md); background: var(--cor-superficie-2); }
.brasao-config > div:last-child { flex: 1; min-width: 240px; }

/* ===== 5.0.4 (lote 55): Selos e certificações ===== */
.selo-previa { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.selo-previa img { height: 120px; width: auto; background: #fff; border-radius: 8px; }
.form-inline-justificativa { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.form-inline-justificativa input { min-width: 160px; flex: 1 1 160px; }
textarea.campo-link { width: 100%; font-family: var(--fonte-mono, monospace); font-size: var(--texto-xs); }
.selo-opcoes { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.selo-opcoes .checkrow { display: flex; align-items: center; gap: 8px; }
.selo-opcoes .checkrow input { width: 20px; height: 20px; flex: 0 0 auto; }