.czr-escala {
    text-align: center;
    opacity: .75;
    margin: 0 0 18px;
    letter-spacing: .04em;
}

.czr-faixa {
    text-align: center;
    margin: 0 0 26px;
}

.czr-chip {
    display: inline-block;
    margin: 0 6px 8px 0;
    padding: 6px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .9em;
    text-decoration: none;
}

/* .terco e o posicionamento em mosaico sao do plugin mansory: nao redefinir aqui. */
.czr-card {
    background: #FFF;
    color: #111;
    padding: 20px;
    box-sizing: border-box;
}

.czr-card .czr-texto {
    margin: 0 0 14px;
    border: 0;
    padding: 0;
    font-style: italic;
    line-height: 1.55;
}

.czr-card .czr-trecho {
    margin: -8px 0 12px;
    font-size: .78em;
    opacity: .55;
}

.czr-card .czr-assinatura {
    margin: 0;
    font-size: .9em;
}

/* O tipo da entidade vem antes do nome e em tom menor: e contexto, nao
   identidade. Sem isso a assinatura vira tres nomes de mesmo peso. */
.czr-card .czr-tipo {
    opacity: .7;
}

.czr-card .czr-verificar {
    margin: 8px 0 0;
    font-size: .8em;
    opacity: .7;
}

/* Paginação: fica fora da .conteudo, porque o mansory fixa a altura do
   container e tira os cards do fluxo. Flex em vez de text-align para centrar
   de verdade também quando o número de páginas passa de uma linha. */
.czr-paginacao {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px auto 16px;
    padding: 0 12px;
    clear: both;
}

.czr-pag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    color: inherit;
    font-size: .95em;
    line-height: 1;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.czr-pag:hover,
.czr-pag:focus-visible {
    border-color: currentColor;
    background: rgba(255, 255, 255, .07);
    text-decoration: none;
}

.czr-pag-atual {
    border-color: transparent;
    background: #FFF;
    color: #111;
    font-weight: 700;
    cursor: default;
}

.czr-pag-nav {
    font-size: 1.15em;
}

.czr-pag-gap {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 2px;
    opacity: .45;
    user-select: none;
}

@media (max-width: 480px) {
    .czr-paginacao { gap: 6px; }
    .czr-pag { min-width: 36px; height: 36px; padding: 0 9px; font-size: .88em; }
    .czr-pag-gap { height: 36px; }
}

/* =============================================================================
   Barra de filtro e busca
   Os chips reaproveitam `.filtro` do style.css do tema (mesmo desenho das
   listagens de entidade). Aqui só entra o que muda por serem links e não divs.
   ============================================================================= */

.czr-filtros {
    margin-bottom: 24px;
}

.czr-chips .filtro,
.czr-busca .filtro {
    text-decoration: none;
}

.czr-busca {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

/* O campo herda `.filtro`, que vem com fundo preto e texto branco. Invertemos:
   caixa de texto precisa parecer editável, não um botão. */
.czr-busca-campo {
    min-width: 280px;
    max-width: 100%;
    padding: 6px 12px;
    background: #FFF;
    color: #111;
    font-weight: 400;
    text-align: left;
    cursor: text;
}

.czr-busca-campo::placeholder {
    color: #777;
    font-weight: 400;
}

/* `.filtro:hover` do tema força fundo branco com !important — o que apagaria o
   botão contra o campo. Reafirmamos o contorno para ele continuar legível. */
.czr-busca-botao {
    font-family: inherit;
    cursor: pointer;
}

.czr-busca-limpar {
    opacity: .75;
}

.czr-resumo {
    margin: 14px 0 0;
    text-align: center;
    font-size: .9em;
    color: #BBB;
}

.czr-vazio {
    font-size: 1em;
    color: #EEE;
}

/* O tema declara `a { color: #000 }` para o site inteiro. Aqui o fundo e preto,
   entao o link saia preto no preto — invisivel. Precisa de cor propria, e o
   seletor com a classe do pai vence a especificidade do `a` sozinho. */
.czr-vazio a,
.czr-vazio a:visited {
    color: #FFF;
    text-decoration: underline;
}

.czr-vazio a:hover {
    opacity: .75;
}

@media (max-width: 480px) {
    .czr-busca-campo { min-width: 0; width: 100%; }
}