:root {
  --fundo: #f5f6f8;
  --superficie: #ffffff;
  --borda: #dfe3ea;
  --texto: #1b2230;
  --texto-suave: #5b6578;
  --marca: #1f4e8c;
  --marca-contraste: #ffffff;
  --urgente: #b42318;
  --urgente-fundo: #fdecea;
  --alta: #b54708;
  --alta-fundo: #fef3e2;
  --media: #1f4e8c;
  --media-fundo: #e8eff9;
  --baixa: #5b6578;
  --baixa-fundo: #eef0f3;
  --novo: #067647;
  --novo-fundo: #e6f6ee;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #10141b;
    --superficie: #181e27;
    --borda: #2a3240;
    --texto: #e6e9ef;
    --texto-suave: #9aa4b5;
    --marca: #7fa8e6;
    --marca-contraste: #0d1420;
    --urgente: #ff8a7a;
    --urgente-fundo: #3a1714;
    --alta: #f6b86b;
    --alta-fundo: #36230d;
    --media: #8fb3ec;
    --media-fundo: #1a2a44;
    --baixa: #9aa4b5;
    --baixa-fundo: #232a35;
    --novo: #6fd3a2;
    --novo-fundo: #12301f;
    --sombra: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fundo: #10141b; --superficie: #181e27; --borda: #2a3240; --texto: #e6e9ef;
  --texto-suave: #9aa4b5; --marca: #7fa8e6; --marca-contraste: #0d1420;
  --urgente: #ff8a7a; --urgente-fundo: #3a1714; --alta: #f6b86b; --alta-fundo: #36230d;
  --media: #8fb3ec; --media-fundo: #1a2a44; --baixa: #9aa4b5; --baixa-fundo: #232a35;
  --novo: #6fd3a2; --novo-fundo: #12301f; --sombra: none; color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--marca); }
button { font: inherit; color: inherit; }

.topo { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.topo-inner, .conteudo, .rodape { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
/* Topo em duas linhas: título | conta; depois a situação da coleta à esquerda e "Coletar agora" no canto direito */
.topo-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 10px;
  align-items: start; padding-top: 18px; padding-bottom: 10px;
}
.titulo-bloco { min-width: 0; }
/* A linha "Notícias atualizadas em…" fica embaixo, perto do menu */
.topo-acoes { grid-column: 1; grid-row: 2; justify-content: space-between; align-items: flex-end; align-self: end; margin-top: 6px; }
h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.sub { margin: 2px 0 0; color: var(--texto-suave); font-size: .9rem; }
.topo-acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.atualizado { color: var(--texto-suave); font-size: .85rem; }
.btn {
  background: var(--marca); color: var(--marca-contraste); text-decoration: none;
  padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }

.conteudo { padding-top: 20px; padding-bottom: 32px; }

.resumo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 14px; text-align: left; cursor: pointer; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 2px;
}
.cartao:hover { border-color: var(--marca); }
.cartao .tit {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto);
  padding-right: 22px; /* espaço do (i) */
}
.cartao .num { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.cartao .rot { color: var(--texto-suave); font-size: .8rem; line-height: 1.35; }
.cartao .det { color: var(--texto-suave); font-size: .74rem; opacity: .85; }
.cartao .det:empty { display: none; }
.cartao-urgente .num { color: var(--urgente); }
.cartao-alta .num { color: var(--alta); }
.cartao-novo .num { color: var(--novo); }

.filtros {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sombra);
}
#f-busca {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo); color: var(--texto); font: inherit;
}
.linha-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.linha-filtros label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--texto-suave); }
.linha-filtros select {
  padding: 6px 8px; border: 1px solid var(--borda); border-radius: 7px;
  background: var(--fundo); color: var(--texto); font: inherit; font-size: .9rem; min-width: 150px;
}
.linha-filtros label.check { flex-direction: row; align-items: center; gap: 6px; font-size: .88rem; color: var(--texto); }
/* Os cinco campos em colunas iguais, sem sobra à direita */
.grade-filtros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; }
.grade-filtros select { min-width: 0; width: 100%; }
/* Fontes: rótulo à esquerda, botões ao lado */
.linha-fontes { display: flex; align-items: baseline; gap: 10px; }
.rotulo-fontes { font-size: .78rem; color: var(--texto-suave); flex: none; }
/* Pé do quadro: rotina à esquerda, ações à direita */
.linha-filtros.opcoes { border-top: 1px solid var(--borda); padding-top: 10px; gap: 8px 18px; }
.espaco { flex: 1; }
.link { background: none; border: 0; color: var(--marca); cursor: pointer; padding: 0; font-size: .88rem; }
.link:hover { text-decoration: underline; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--borda); background: var(--fundo); border-radius: 999px;
  padding: 3px 11px; font-size: .84rem; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: var(--marca-contraste); }
.chip .qtd { opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }

.contagem { color: var(--texto-suave); font-size: .88rem; margin: 16px 2px 8px; }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.item {
  background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--baixa);
  border-radius: 10px; padding: 12px 14px; box-shadow: var(--sombra);
}
.item.p-urgente { border-left-color: var(--urgente); }
.item.p-alta { border-left-color: var(--alta); }
.item.p-media { border-left-color: var(--media); }
/* Lida: tudo esmaecido, menos o selo "Lida", que precisa ser visto */
.item.lido > :not(.item-cab), .item.lido .item-cab > :not(.selo-lida) { opacity: .6; }
.item-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .8rem; color: var(--texto-suave); }
.badge-prio, .badge-inst, .novo {
  border-radius: 5px; padding: 1px 7px; font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
}
.badge-prio { background: var(--baixa-fundo); color: var(--baixa); }
.p-urgente .badge-prio { background: var(--urgente-fundo); color: var(--urgente); }
.p-alta .badge-prio { background: var(--alta-fundo); color: var(--alta); }
.p-media .badge-prio { background: var(--media-fundo); color: var(--media); }
.badge-inst { background: var(--fundo); color: var(--texto); border: 1px solid var(--borda); }
.novo { background: var(--novo-fundo); color: var(--novo); display: none; }
.item.e-novo .novo { display: inline; }
/* Notícia já aberta: além do cinza, um selo "Lida" no canto do cabeçalho. */
.selo-lida {
  display: none; margin-left: auto; border-radius: 5px; padding: 1px 7px; font-weight: 600; font-size: .74rem;
  color: var(--marca); background: var(--superficie); border: 1px solid var(--marca);
}
.item.lido .selo-lida { display: inline; }
.item-titulo { font-size: 1rem; margin: 6px 0 2px; line-height: 1.35; overflow-wrap: anywhere; }
.item-titulo a { color: var(--texto); text-decoration: none; }
.item-titulo a:hover { color: var(--marca); text-decoration: underline; }
.motivo { margin: 2px 0; color: var(--urgente); font-size: .86rem; font-weight: 600; }
.motivo:empty { display: none; }
.item-resumo { margin: 4px 0; color: var(--texto-suave); font-size: .88rem; overflow-wrap: anywhere; }
.item-resumo:empty { display: none; }
.item-rodape { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; font-size: .8rem; color: var(--texto-suave); }
.temas, .setores { display: flex; flex-wrap: wrap; gap: 4px; }
.setores:empty { display: none; }
.tag-setor { background: var(--media-fundo); color: var(--media); border-radius: 4px; padding: 0 6px; font-weight: 600; }
.tag { background: var(--fundo); border: 1px solid var(--borda); border-radius: 4px; padding: 0 6px; }
.orgao { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vazio { text-align: center; color: var(--texto-suave); padding: 40px 16px; background: var(--superficie); border: 1px dashed var(--borda); border-radius: 10px; }

.status-fontes { margin-top: 24px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; }
.status-fontes summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
#status-resumo { font-weight: 400; color: var(--texto-suave); }
.status-fontes table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .86rem; }
.status-fontes th, .status-fontes td { text-align: left; padding: 5px 6px; border-top: 1px solid var(--borda); vertical-align: top; }
.status-fontes td:last-child, .status-fontes th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.erro { color: var(--urgente); overflow-wrap: anywhere; }
.ok { color: var(--novo); }

.rodape { color: var(--texto-suave); font-size: .8rem; padding-bottom: 28px; }
.rodape p { margin: 0 0 4px; }
.rodape .credito { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borda); }

@media (max-width: 720px) {
  .resumo { grid-template-columns: repeat(2, 1fr); }
  .linha-filtros label, .linha-filtros .campo-filtro { flex: 1 1 140px; }
  .linha-filtros select { min-width: 0; width: 100%; }
  .grade-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-filtros > :last-child { grid-column: 1 / -1; }  /* Período ocupa a linha toda */
  .linha-fontes { flex-direction: column; gap: 4px; }
  .opcoes .espaco { flex-basis: 100%; height: 0; }  /* rotina numa linha; Limpar e Exportar juntos embaixo */
  .orgao { flex-basis: 100%; white-space: normal; }
}

/* ------------------------------------------------------------ entrada --- */
body.bloqueado > header, body.bloqueado > main, body.bloqueado > footer { display: none; }
.portaria { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.portaria[hidden] { display: none; }
.portaria-cartao {
  width: 100%; max-width: 400px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; padding: 28px 24px; box-shadow: 0 8px 28px rgba(16, 24, 40, .08);
}
.portaria-marca { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.portaria-marca h1 { font-size: 1.2rem; }
.form-portaria { display: flex; flex-direction: column; gap: 12px; }
.form-portaria[hidden] { display: none; }
.form-portaria h2, .dialogo h2 { margin: 0; font-size: 1.1rem; }
.form-portaria label, .dialogo label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--texto-suave); }
.form-portaria input, .dialogo input:not([type=checkbox]) {
  padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo);
  color: var(--texto); font: inherit; font-size: .95rem;
}
.form-portaria input:focus, .dialogo input:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
.form-portaria input[readonly] { opacity: .75; }
#codigo-passo2 { display: flex; flex-direction: column; gap: 12px; }
#codigo-passo2[hidden] { display: none; }
.btn-largo { border: 0; cursor: pointer; padding: 10px 14px; font-size: .95rem; }
.btn { border: 0; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-sec {
  background: none; border: 1px solid var(--borda); border-radius: 8px; padding: 7px 14px;
  cursor: pointer; font-size: .9rem; color: var(--texto);
}
.btn-perigo { background: var(--urgente); color: #fff; }
.links-portaria { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.explica, .dica { margin: 0; color: var(--texto-suave); font-size: .86rem; }
.dica { font-size: .8rem; }
.msg { margin: 0; font-size: .88rem; min-height: 0; }
.msg:empty { display: none; }
.msg-erro { color: var(--urgente); }
.msg-ok { color: var(--novo); }
.msg-info { color: var(--media); }

/* ---------------------- topo: conta (mesmo molde do sistema de certificados) --- */
.conta { display: flex; align-items: center; gap: 10px; flex: none; }
/* A conta fica em cima, na linha do título "Boletim da Educação Superior" */
.topo-inner > .conta { grid-column: 2; grid-row: 1; align-self: start; }
body.visitante .topo-inner > .conta { grid-row: 1 / span 2; }  /* visitante: convite mais alto, sem botão de coleta */
/* Visitante: botões e tema na mesma linha, todos com 38px; o convite em texto fica embaixo */
body.visitante .conta { align-items: flex-start; }
.conta-texto > span { white-space: nowrap; }
.conta-texto { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: .78rem; color: var(--texto-suave); line-height: 1.45; }
.conta-texto small { font-size: .74rem; }
.conta-texto .link { font-size: .82rem; }
.link-perfil { color: var(--texto); font-weight: 600; }
.link-perfil:hover { color: var(--marca); }
.perfil-topo {
  display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 10px; font-size: .7rem; font-weight: 600;
  background: var(--baixa-fundo); color: var(--texto-suave);
}
.perfil-topo[data-perfil="admin"] { background: var(--marca); color: var(--marca-contraste); }
.sigla {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marca); color: var(--marca-contraste); font-weight: 700; font-size: .85rem; letter-spacing: .5px;
}
.sigla:hover { filter: brightness(1.08); }
.sigla-grande { width: 64px; height: 64px; font-size: 1.4rem; cursor: default; }
.botao-redondo {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--borda); background: var(--superficie);
  color: var(--texto-suave); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.botao-redondo svg { width: 19px; height: 19px; }
.botao-redondo:hover, .botao-redondo[aria-expanded="true"] { color: var(--marca); border-color: var(--marca); }
.link.perigo { color: var(--urgente); }

/* Menu suspenso da engrenagem */
.menu-lista {
  position: fixed; z-index: 50; min-width: 220px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px rgba(16, 24, 40, .18); display: flex; flex-direction: column;
}
.menu-lista .menu-cab { padding: 8px 10px 6px; display: flex; flex-direction: column; font-size: .86rem; }
.menu-lista .menu-cab span { color: var(--texto-suave); font-size: .78rem; overflow-wrap: anywhere; }
.menu-lista button {
  background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-size: .9rem; color: var(--texto);
}
.menu-lista button:hover, .menu-lista button:focus-visible { background: var(--fundo); color: var(--marca); outline: none; }
.menu-lista hr { border: 0; border-top: 1px solid var(--borda); margin: 4px 2px; width: auto; }

/* Meu perfil */
.perfil-cabeca { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.perfil-cabeca h2 { margin: 0; }
.perfil-cabeca .detalhe { color: var(--texto-suave); font-size: .85rem; overflow-wrap: anywhere; }
.perfil-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dialogo input[readonly] { opacity: .8; }
.dialogo-perfil { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }

/* Avisos por e-mail (Meu perfil): prioridades nas linhas, frequência nas colunas */
.avisos { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.avisos legend { font-weight: 600; font-size: .92rem; padding: 0 4px; }
.avisos-grade { border-collapse: collapse; width: 100%; font-size: .88rem; }
.avisos-grade th, .avisos-grade td { padding: 7px 6px; border-bottom: 1px solid var(--borda); text-align: center; }
.avisos-grade tbody tr:last-child th, .avisos-grade tbody tr:last-child td { border-bottom: 0; }
.avisos-grade thead th { font-weight: 600; vertical-align: bottom; }
.avisos-grade thead th span { display: block; font-weight: 400; font-size: .75rem; color: var(--texto-suave); }
.avisos-grade tbody th { text-align: left; font-weight: 500; }
.avisos-grade input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--marca); }
.avisos-cadastro { margin: 10px 0; background: var(--fundo); }
.avisos-cadastro .avisos-grade { max-width: 520px; }
.avisos-cadastro .meta { font-weight: 400; color: var(--texto-suave); font-size: .8rem; }
.avisos-acoes { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acao-esquerda { margin-right: auto; }

@media (max-width: 720px) {
  .conta-texto { display: none; }
  .perfil-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- diálogos --- */
.dialogo {
  border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); color: var(--texto);
  padding: 22px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 16px 48px rgba(16, 24, 40, .2);
}
.dialogo::backdrop { background: rgba(16, 20, 27, .45); }
.dialogo form { display: flex; flex-direction: column; gap: 12px; }
.dialogo-largo { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.dialogo-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
#dlg-confirmar p { margin: 0 0 14px; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; }
.aba {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer;
  color: var(--texto-suave); font-size: .9rem; margin-bottom: -1px;
}
.aba[aria-selected="true"] { color: var(--marca); border-bottom-color: var(--marca); font-weight: 600; }

.form-membro { background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.form-membro h3 { margin: 0 0 4px; font-size: .95rem; }
.linha-membro { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.linha-membro label:not(.check) { flex: 1 1 220px; }
.linha-membro .check, .dialogo .check { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: .88rem; color: var(--texto); }

.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tabela th { text-align: left; color: var(--texto-suave); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela .detalhe { color: var(--texto-suave); font-size: .8rem; overflow-wrap: break-word; }
#equipe-corpo td:first-child { min-width: 220px; }
.tabela .carregando { color: var(--texto-suave); text-align: center; padding: 18px; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; }
.nowrap { white-space: nowrap; }
.selo { background: var(--media-fundo); color: var(--media); border-radius: 4px; padding: 0 6px; font-size: .72rem; font-weight: 600; }
.selo-eu { background: var(--novo-fundo); color: var(--novo); }
.pendente { color: var(--alta); }

@media (max-width: 720px) {
  .acoes-linha { justify-content: flex-start; }
  .tabela thead { display: none; }
  .tabela tr { display: block; border-bottom: 1px solid var(--borda); padding: 6px 0; }
  .tabela td { display: block; border: 0; padding: 3px 4px; }
}

/* ----------------------------------------------------------- coleta e agenda --- */
.coleta-info { display: flex; align-items: center; gap: 2px; }

/* ------------------------------------------------- menu principal (abas) --- */
.menu-principal {
  max-width: 1040px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
}
/* "Verificar novas notícias": canto direito do topo, embaixo da conta, na altura da última linha da coleta */
.topo-inner > #btn-coletar { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; padding: 6px 14px; font-size: .85rem; }
@media (max-width: 720px) {
  .topo-inner > #btn-coletar { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
}
.menu-principal a {
  padding: 10px 14px 11px; font-size: .9rem; font-weight: 600; color: var(--texto-suave); text-decoration: none;
  border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: 6px;
}
.menu-principal a:hover { color: var(--texto); }
.menu-principal a.ativo { color: var(--marca); border-bottom-color: var(--marca); }
.menu-principal .cont {
  font-size: .72rem; font-weight: 700; background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.menu-principal .cont:empty { display: none; }
.menu-principal a.ativo .cont { background: var(--media-fundo); border-color: transparent; color: var(--marca); }

.visao-cab { margin-bottom: 14px; }
.visao-titulo { margin: 0; font-size: 1.25rem; }
#pagina-radar:not(.visao-inicio) .resumo { display: none; }

/* ------------------------------------------------- ações e marcações no item --- */
.item-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.acao {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 7px; padding: 4px 10px;
  font-size: .8rem; cursor: pointer; color: var(--texto);
}
.acao:hover { border-color: var(--marca); color: var(--marca); }
.item.sinalizada .btn-sinalizar { background: var(--alta-fundo); border-color: transparent; color: var(--alta); font-weight: 600; }
.item.sinalizada { box-shadow: inset 0 0 0 1px var(--alta-fundo), var(--sombra); }
.item.irrelevante { opacity: .7; }
.marca-info { margin: 6px 0 0; font-size: .82rem; font-weight: 600; }
.marca-info:empty { display: none; }
.marca-sinalizada { color: var(--alta); }
.marca-irrelevante { color: var(--texto-suave); }

/* Aviso flutuante (salvo / erro) */
.aviso {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); z-index: 60;
  background: var(--texto); color: var(--superficie); padding: 10px 16px; border-radius: 10px;
  font-size: .9rem; box-shadow: 0 8px 24px rgba(16, 24, 40, .25); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px);
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }
.aviso-erro { background: var(--urgente); color: #fff; }

/* -------------------------------------------------- página do Administrador --- */
.tag-so-admin {
  font-size: .7rem; font-weight: 700; color: var(--marca); background: var(--media-fundo);
  border-radius: 999px; padding: 2px 9px; vertical-align: 3px; margin-left: 6px;
}
.bloco { display: flex; flex-direction: column; gap: 10px; }
.cadastro-equipe { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.cadastro-equipe h3 { margin: 0; font-size: 1rem; }
.cadastro-equipe label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--texto-suave); }
.cadastro-equipe input:not([type=checkbox]) {
  padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); font: inherit;
}
.sanfona { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; margin-top: 12px; }
.sanfona > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px;
}
.sanfona > summary::-webkit-details-marker { display: none; }
.sanfona > summary::before { content: "▸"; color: var(--texto-suave); transition: transform .15s; }
.sanfona[open] > summary::before { transform: rotate(90deg); }
.sanfona > summary .meta { font-weight: 400; color: var(--texto-suave); font-size: .86rem; }
.sanfona > .tabela-rolagem { padding: 0 16px 14px; }

@media (max-width: 720px) {
  /* Celular: o menu fica numa linha só e rola para o lado (a aba aberta é trazida para a vista). */
  .menu-principal {
    position: relative; padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .menu-principal::-webkit-scrollbar { display: none; }
  /* Esmaece a borda do lado em que ainda há abas escondidas */
  .menu-principal.tem-mais { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .menu-principal.tem-antes { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
  .menu-principal.tem-mais.tem-antes { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
  .menu-principal a { padding: 8px 9px 9px; font-size: .84rem; white-space: nowrap; flex: none; }
  .menu-principal .botao-info-menu { flex: none; white-space: nowrap; }
}

/* ----------------------------------------------------------------- tema --- */
.alternar-tema svg { width: 18px; height: 18px; }
.tema-entrada { position: fixed; top: 16px; right: 16px; z-index: 5; }

/* ---------------------------------------------------------------- busca --- */
.busca { display: flex; gap: 8px; }
.busca #f-busca { flex: 1; min-width: 0; }
.btn-buscar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; }

/* ------------------------------------------------------------ paginação --- */
.paginacao { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 18px 0 4px; }
.paginacao[hidden] { display: none; }
.pag {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); cursor: pointer; font-size: .88rem; font-variant-numeric: tabular-nums;
}
.pag:hover:not(:disabled) { border-color: var(--marca); color: var(--marca); }
.pag[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: var(--marca-contraste); font-weight: 700; }
.pag:disabled { opacity: .4; cursor: default; }
.pag-reticencias { color: var(--texto-suave); padding: 0 2px; }
.paginacao { flex-wrap: nowrap; }
.pag-seta .pag-curto { display: none; }
@media (max-width: 720px) {
  /* Celular: setas sem texto e só as páginas vizinhas, para caber numa linha */
  .paginacao { gap: 4px; }
  .pag { min-width: 34px; padding: 0 8px; }
  .pag-seta .pag-longo { display: none; }
  .pag-seta .pag-curto { display: inline; }
}

@media (max-width: 720px) {
  .topo-acoes { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* ------------------------------------------------- painel aberto (visitante) --- */
#btn-entrar { padding: 8px 16px; }
.convite-topo { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
.convite-texto { font-size: .74rem; color: var(--texto-suave); text-align: right; line-height: 1.35; max-width: 270px; }
@media (max-width: 900px) { .convite-texto { display: none; } }
.convite-botoes { display: flex; gap: 8px; }
.convite-botoes .btn, .convite-botoes .btn-sec {
  height: 38px; padding: 0 16px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: .9rem; font-weight: 600;
}
body:not(.visitante) .convite-topo { display: none; }
@media (max-width: 720px) {
  .convite-texto { display: none; }
  /* Visitante no celular: título em cima, botões (Criar conta · Entrar · tema) numa linha só embaixo */
  body.visitante .topo-inner { grid-template-columns: minmax(0, 1fr); }
  /* Celular, quem entrou: conta no canto de cima; informações da coleta usam a largura toda */
  .topo-inner > .conta { grid-row: 1; align-self: start; }
  .topo-acoes { grid-column: 1 / -1; }
  body.visitante .topo-inner > .conta { grid-column: 1; grid-row: 2; width: 100%; align-self: start; }
  body.visitante .convite-topo { flex: 1; align-items: stretch; }
  body.visitante .convite-botoes .btn { flex: 1; padding: 0 10px; font-size: .86rem; }
  body.visitante .convite-botoes .btn-sec { padding: 0 12px; font-size: .86rem; }
  body.visitante .topo-acoes { grid-row: 3; }
}
.resumo-periodo { margin: 0 0 8px; font-size: .84rem; color: var(--texto-suave); }
.resumo-periodo b { color: var(--texto); font-weight: 600; }
#pagina-radar:not(.visao-inicio) .resumo-periodo { display: none; }

/* Filtro Prioridade com o (i) "O que é Urgente e Alta": mesmo visual dos outros filtros; balão ao clicar */
.campo-filtro { position: relative; display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--texto-suave); }
.rotulo-filtro { display: flex; align-items: center; gap: 2px; height: 1.5em; }
.botao-info {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: none; color: var(--texto-suave); cursor: pointer; opacity: .75;
}
.botao-info:hover, .botao-info[aria-expanded="true"], .botao-info:focus-visible { opacity: 1; color: var(--marca); background: var(--fundo); }
/* Balões dos (i): posição calculada junto do botão (fixa na tela; fecha ao rolar) */
.info-pop {
  position: fixed; z-index: 40; top: 0; left: 0; width: min(440px, calc(100vw - 32px));
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16); display: flex; flex-direction: column; gap: 8px;
}
.info-pop[hidden] { display: none; }
.info-pop p { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--texto-suave); }
.info-pop p b { color: var(--texto); font-weight: 600; }
.info-pop .info-pop-titulo { color: var(--texto); font-weight: 600; font-size: .86rem; }
.info-pop .info-pop-nota { font-size: .76rem; border-top: 1px solid var(--borda); padding-top: 6px; }
/* (i) nos cartões do Início e no fim do menu */
.cartao-caixa { position: relative; display: flex; }
.cartao-caixa > .cartao { flex: 1; }
.botao-info-cartao { position: absolute; top: 9px; right: 8px; }
.menu-principal .botao-info-menu { align-self: center; margin-left: 2px; }
.selo-legenda {
  display: inline-block; border-radius: 5px; padding: 0 7px; margin-right: 4px; font-weight: 600; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .03em; vertical-align: 1px;
}
.selo-urgente { background: var(--urgente-fundo); color: var(--urgente); }
.selo-alta { background: var(--alta-fundo); color: var(--alta); }
.selo-media { background: var(--media-fundo); color: var(--media); }

/* Só administradores (botão "Verificar novas notícias") */
body:not(.perfil-admin) .so-admin { display: none !important; }
.convite-conta { margin-top: 6px; padding: 12px; border-radius: 9px; background: var(--media-fundo); display: flex; flex-direction: column; gap: 8px; }
.convite-conta p { margin: 0; font-size: .85rem; }
.convite-conta .btn-sec { background: var(--superficie); font-weight: 600; color: var(--marca); border-color: var(--marca); }
.selo-usuario { background: var(--baixa-fundo); color: var(--texto-suave); }
.perfil-topo[data-perfil="usuario"] { background: var(--baixa-fundo); color: var(--texto-suave); }
i.seg-usuarios, .seg-usuarios { background: var(--barra-usuarios); }
/* #btn-entrar fica dentro de .convite-topo, que some para quem entrou */
body.visitante .conta-texto, body.visitante #sigla-topo, body.visitante #botao-engrenagem { display: none; }
body.visitante .so-equipe { display: none; }
body.perfil-usuario #btn-coletar { display: none; }  /* coletar é da equipe do CINEA */
/* Visitante vê as abas da equipe com cadeado: clicar leva à entrada (convite para ter conta) */
body.visitante .aba-equipe { color: var(--texto-suave); opacity: .8; }
body.visitante .aba-equipe::before { content: "🔒"; font-size: .8em; margin-right: 2px; }
body.visitante .aba-equipe .cont { display: none; }
.acao.bloqueada { color: var(--texto-suave); border-style: dashed; }
.acao.bloqueada:hover { color: var(--marca); border-color: var(--marca); }
.portaria-fechar { display: block; margin: -6px 0 14px; font-size: .88rem; }
.portaria-fechar[hidden] { display: none; }
body.visitante .cartao-novo .num { font-size: 1.3rem; }

/* ------------------------------------------------------- uso da plataforma --- */
:root {
  /* Escala sequencial de uma cor (azul da marca), do claro ao escuro: mapa de calor */
  --calor-0: #eef1f5; --calor-1: #d6e3f3; --calor-2: #a9c4e6; --calor-3: #6f9bd2; --calor-4: #3d6fb5; --calor-5: #1f4e8c;
  --barra-equipe: #1f4e8c; --barra-usuarios: #5585c4; --barra-publico: #b9cce8;
}
:root[data-theme="dark"] {
  --calor-0: #1f2632; --calor-1: #1f3352; --calor-2: #2a4c7c; --calor-3: #3d68a6; --calor-4: #6292d1; --calor-5: #a8c8f5;
  --barra-equipe: #a8c8f5; --barra-usuarios: #5f8fd0; --barra-publico: #2f4565;
}
.uso { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.uso-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.uso-cab h3 { margin: 0; font-size: 1.05rem; }
.uso-cab label { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--texto-suave); }
.uso-cab select { padding: 5px 8px; border: 1px solid var(--borda); border-radius: 7px; background: var(--fundo); color: var(--texto); font: inherit; }
.uso .explica { margin: 6px 0 12px; }
.uso .vazio { margin: 0; }
.uso-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.uso-cartao { border: 1px solid var(--borda); border-radius: 9px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; }
.uso-cartao .num { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.uso-cartao .rot { font-size: .84rem; font-weight: 600; }
.uso-cartao .det { font-size: .76rem; color: var(--texto-suave); }
.uso-pico { margin: 12px 0 0; font-size: .9rem; }
.uso-bloco { margin-top: 18px; }
.uso-bloco h4, .uso-tabela h4 { margin: 0 0 8px; font-size: .92rem; }
.uso-bloco h4 .meta { font-weight: 400; color: var(--texto-suave); font-size: .82rem; }

/* Mapa de calor: 7 linhas (dias) × 24 colunas (horas) */
.calor-rolagem { overflow-x: auto; }
.calor { display: grid; grid-template-columns: 34px repeat(24, minmax(16px, 1fr)); gap: 3px; min-width: 520px; align-items: center; }
.calor-hora { font-size: .68rem; color: var(--texto-suave); text-align: left; }
.calor-dia { font-size: .76rem; color: var(--texto-suave); }
.calor-cel { height: 20px; border-radius: 4px; background: var(--calor-0); }
.calor-cel.n1 { background: var(--calor-1); } .calor-cel.n2 { background: var(--calor-2); } .calor-cel.n3 { background: var(--calor-3); }
.calor-cel.n4 { background: var(--calor-4); } .calor-cel.n5 { background: var(--calor-5); }
.calor .calor-cel:hover { outline: 2px solid var(--texto); outline-offset: 1px; }
.calor-legenda { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: .74rem; color: var(--texto-suave); flex-wrap: wrap; }
.calor-legenda .calor-cel { width: 16px; height: 12px; }
.calor-legenda span:first-child { margin-right: 4px; } .calor-legenda span:last-child { margin-left: 4px; }

/* Barras por dia (equipe embaixo, visitantes em cima) */
.barras-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--texto-suave); margin-bottom: 8px; align-items: center; }
.barras-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.barras-legenda .meta { margin-left: auto; }
i.seg-equipe, .seg-equipe { background: var(--barra-equipe); }
i.seg-publico, .seg-publico { background: var(--barra-publico); }
.barras { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--borda); padding-bottom: 18px; position: relative; }
.barra { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; cursor: default; }
.barra-pilha { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.barra-pilha .seg { display: block; width: 100%; max-width: 22px; margin: 0 auto; border-radius: 4px 4px 0 0; }
.barra-pilha .seg-equipe { border-radius: 0; }
.barra-pilha .seg-equipe:first-child { border-radius: 4px 4px 0 0; }
.barra:hover .seg { filter: brightness(1.15); }
.barra-rot { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: .66rem; color: var(--texto-suave); white-space: nowrap; }

.uso-tabelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 22px; }
.uso-tabela .tabela td, .uso-tabela .tabela th { padding: 5px 6px; }
.num-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dica-flutuante {
  position: fixed; z-index: 70; pointer-events: none; background: var(--texto); color: var(--superficie);
  font-size: .8rem; padding: 5px 9px; border-radius: 6px; opacity: 0; transition: opacity .1s; max-width: 280px;
}
.dica-flutuante.visivel { opacity: 1; }

/* Assinatura do CINEA em duas linhas: menor no celular e na tela de entrada, para cada linha caber inteira */
.portaria-marca .sub { font-size: .8rem; }
.portaria-abrindo { margin: 18px 0 6px; color: var(--texto-suave); text-align: center; }
@media (max-width: 720px) { .topo .sub { font-size: .78rem; } }

/* Celular, quem entrou: título ao lado da conta; a assinatura do CINEA desce e usa a largura toda (não quebra em 4 linhas) */
@media (max-width: 720px) {
  body:not(.visitante) .titulo-bloco { display: contents; }
  body:not(.visitante) .titulo-bloco h1 { grid-column: 1; grid-row: 1; align-self: center; }
  body:not(.visitante) .titulo-bloco .sub { grid-column: 1 / -1; grid-row: 2; margin-top: -6px; }
  body:not(.visitante) .topo-acoes { grid-row: 3; }
}
/* O rótulo "Prioridade" dentro do campo não estica (no celular, os labels dos filtros ganham flex) */
.linha-filtros .rotulo-filtro label { flex: none; }