/* Relevância (Brasil + tema): usa os tokens de painel.css (claro e escuro). O nível nunca é só cor: tem ícone e texto. */
.selo.rel-alta { color: var(--ok); background: var(--ok-fundo); border-color: var(--inclusao-borda); }
.selo.rel-media { color: var(--alerta); background: var(--alerta-fundo); border-color: var(--duvida-borda); }
.selo.rel-baixa { color: var(--neutro); background: var(--neutro-fundo); border-color: var(--borda); }

/* "como a relevância é calculada": gaveta com ladrilho de ícone, igual ao acordeão metodológico dos cockpits */
details.regra-relevancia { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: var(--esp-4); }
details.regra-relevancia > summary { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: var(--esp-2) var(--esp-4); border-radius: var(--raio); cursor: pointer; list-style: none; font-weight: 600; }
details.regra-relevancia > summary::-webkit-details-marker { display: none; }
details.regra-relevancia > summary::before { content: "\25B8"; flex: none; width: 1.25em; text-align: center; color: var(--acento); }
details.regra-relevancia[open] > summary::before { content: "\25BE"; }
html.icones-ok details.regra-relevancia > summary::before, html.icones-ok details.regra-relevancia[open] > summary::before { content: "\e0c0"; content: "\e0c0" / ""; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: .6rem; font-family: var(--fonte-icones); font-size: 1.05rem; font-weight: 400; background: var(--tom-fundo); color: var(--tom-tx); box-shadow: inset 0 0 0 1px var(--tom-borda); }
details.regra-relevancia > summary::after { content: "Mostrar"; margin-left: auto; font-size: var(--fs-sm); font-weight: 500; color: var(--texto-suave); }
details.regra-relevancia[open] > summary::after { content: "Ocultar"; }
details.regra-relevancia > summary:hover { background: var(--superficie-subtil); }
details.regra-relevancia[open] > summary { border-bottom: 1px solid var(--borda); border-radius: var(--raio) var(--raio) 0 0; }
details.regra-relevancia > :not(summary) { margin-left: var(--esp-4); margin-right: var(--esp-4); }
details.regra-relevancia > :last-child { margin-bottom: var(--esp-4); }
details.regra-relevancia .subtitulo-marcadores { font-size: var(--fs-md); margin: .8rem var(--esp-4) .2rem; }
details.regra-relevancia p { max-width: 90ch; font-size: var(--fs-md); }
details.regra-relevancia .marcadores { color: var(--texto-suave); line-height: var(--lh-solto); overflow-wrap: anywhere; }

.explica-relevancia { color: var(--texto-suave); margin: var(--esp-1) 0 var(--esp-3); max-width: 80ch; }

/* contagem por nível: cada nível é uma pastilha-cartão que leva à lista filtrada */
.relevancia-contagem { list-style: none; padding: 0; margin: 0 0 var(--esp-4); display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.relevancia-contagem li { background: var(--superficie-subtil); border: 1px solid var(--borda); border-radius: var(--raio-md); }
.relevancia-contagem a { text-decoration: none; display: inline-flex; align-items: center; gap: var(--esp-2); padding: .5rem .9rem; border-radius: var(--raio-md); }
.relevancia-contagem a:hover { background: var(--superficie); box-shadow: var(--sombra); }
.relevancia-contagem strong { font-size: var(--fs-xl); color: var(--texto); letter-spacing: -.02em; }

/* em tabelas, painel.css deixa o selo quebrar linha; o nível de relevância cabe numa linha só */
td .selo.rel-alta, td .selo.rel-media, td .selo.rel-baixa { white-space: nowrap; }

.ajuda-filtro { grid-column: 1 / -1; max-width: 70ch; }
.ajuda-filtro summary { cursor: pointer; font-weight: 600; }