/* =============================================================================
   PORTAL DE LEGISLACAO - PARTES COMUNS
   -----------------------------------------------------------------------------
   Carregado pela pagina inicial (/legislacao/) e pelas paginas de orgao
   (/legislacao/filtro/<orgao>), sempre DEPOIS de css/header.css e
   css/solis2-base.css, de onde vem as cores (--marca, --marca-esc, --fundo,
   --borda...), as fontes (Inter para o texto, Outfit para os titulos), o
   container .area e o "olho" (.olho).

   Aqui ficam: o topo escuro com a busca, o controle "Mais populares | Mais
   recentes", o cartao de norma (usado nas listas e no resultado da pesquisa),
   as etiquetas (data, orgao, REVOGADA) e o aviso de lista vazia.
   O que e so de uma pagina fica em inicio.css e filtro.css.

   Regra da casa: nada se DESLOCA quando o mouse passa por cima - o retorno
   visual e feito so com cor, borda e sombra.
   ============================================================================= */

body.legis-pagina { background: var(--fundo); }

/* Texto que so o leitor de tela "ve" (rotulos dos campos de busca). */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* =============================================================================
   1. TOPO ESCURO
   ============================================================================= */
.legis-topo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(155deg, var(--marca-noite) 0%, var(--marca-esc) 55%, #35548f 100%);
    color: #fff;
    padding: 40px 0 104px;
}

.legis-topo .fundo-topo { opacity: .28; }

.legis-topo-conteudo { position: relative; }

/* Trilha "Início / Legislação / SEMAD" */
.legis-trilha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .84rem;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 28px;
}
.legis-trilha a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, .92);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding-bottom: 1px;
    transition: border-color .16s ease, color .16s ease;
}
.legis-trilha a:hover { color: #fff; border-bottom-color: #fff; }
.legis-trilha .sep   { opacity: .5; }
.legis-trilha .atual { color: #fff; font-weight: 600; }

.legis-topo .olho { color: #a9bce6; margin-bottom: 8px; }

body.solis2 .legis-topo h1 {
    color: #fff;
    font-size: clamp(1.75rem, 3.8vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    max-width: 22ch;
}

.legis-topo-sub {
    max-width: 62ch;
    margin-top: 10px;
    font-size: 1.02rem;
    color: #c7d4ec;
}

/* Os numeros: "1.253 normas · 11 órgãos · 321 revogadas" */
.legis-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.legis-numeros li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: .86rem;
    color: #dbe6ff;
}
.legis-numeros strong {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.02rem;
    color: #fff;
}

/* Busca em todo o portal */
.legis-busca {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 640px;
    margin-top: 26px;
    padding: 5px 5px 5px 18px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .65);
    transition: box-shadow .16s ease;
}
.legis-busca:focus-within {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .28), 0 18px 34px -20px rgba(0, 0, 0, .65);
}
.legis-busca svg { color: var(--texto-sec); flex: 0 0 auto; }
.legis-busca input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: .98rem;
    color: var(--texto);
}
.legis-busca input::placeholder { color: #94a3b8; }
.legis-busca button {
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--marca);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease;
}
.legis-busca button:hover { background: var(--marca-esc); }

/* =============================================================================
   2. CORPO (fundo claro abaixo do topo)
   ============================================================================= */
.legis-corpo { padding: 0 0 80px; }

/* Botoes "Mais populares | Mais recentes" (controle segmentado) */
.legis-segmentado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: #f1f5f9;
}
.legis-segmentado a {
    padding: 8px 4px;
    border-radius: 9px;
    text-align: center;
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--texto-sec);
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.legis-segmentado a:hover { color: var(--marca-esc); }
.legis-segmentado a.ativo {
    background: #fff;
    color: var(--marca-esc);
    box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .3);
}

/* =============================================================================
   3. CARTAO DE NORMA
   ============================================================================= */
.legis-normas { display: grid; gap: 10px; }

.norma {
    position: relative;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 16px 18px 12px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.norma:hover,
.norma:focus-within {
    border-color: var(--marca);
    box-shadow: var(--sombra);
}

.norma-cabeca {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

body.solis2 .norma-titulo {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}
.norma-titulo a { color: var(--marca-esc); transition: color .16s ease; }
.norma:hover .norma-titulo a { color: var(--marca); }

/* O cartao inteiro e clicavel: o link do titulo se estica por cima da caixa.
   Os outros links do cartao (orgao, artigos) ficam por cima desse "tapete". */
.norma-titulo a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
}
.norma .etiqueta-orgao,
.norma .ocorrencias a,
.norma .mais-ocorrencias > summary { position: relative; z-index: 2; }

.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.etiqueta-data {
    background: #f1f5f9;
    color: var(--texto-sec);
    font-variant-numeric: tabular-nums;
}
.etiqueta-orgao {
    background: var(--f-claro);
    color: var(--marca);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .16s ease, color .16s ease;
}
.etiqueta-orgao:hover { background: var(--marca); color: #fff; }
.etiqueta-ambito {
    background: #f1f5f9;
    color: var(--texto-sec);
}
.etiqueta-revogada {
    background: #fee2e2;
    color: #b91c1c;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.norma-ementa {
    margin: 8px 0 0;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--texto-sec);
    /* Ementas muito longas ficam com 3 linhas; o texto inteiro esta na
       propria pagina da norma. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.norma-rodape {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--borda);
    font-size: .82rem;
    color: var(--texto-sec);
}
.norma-vistas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}
.norma-ler {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-weight: 600;
    color: var(--marca);
}

/* Norma revogada: mais apagada, com o selo vermelho */
.norma.revogada { background: #fbfcfe; }
.norma.revogada .norma-titulo a { color: var(--texto-sec); }
.norma.revogada .norma-ementa  { color: #8593a6; }

/* Aviso de lista vazia (orgao sem normas, filtro ou pesquisa sem resultado) */
.legis-vazio {
    padding: 30px 24px;
    background: #fff;
    border: 1px dashed #cdd8e8;
    border-radius: 14px;
    text-align: center;
    color: var(--texto-sec);
}
.legis-vazio p + p { margin-top: 6px; }
.legis-vazio a { color: var(--marca); font-weight: 600; }

/* O JavaScript esconde cartoes e grupos com o atributo "hidden". */
.legis-corpo [hidden] { display: none !important; }

/* =============================================================================
   4. TELAS MENORES
   ============================================================================= */
@media (max-width: 640px) {
    .legis-topo { padding: 28px 0 84px; }
    .legis-trilha { margin-bottom: 20px; }

    .legis-busca {
        flex-wrap: wrap;
        padding: 8px;
        border-radius: 20px;
    }
    .legis-busca input { padding: 8px 4px; }
    .legis-busca button { width: 100%; }

    .norma { padding: 14px 14px 10px; }
    .norma-rodape { flex-wrap: wrap; }
}

/* =============================================================================
   IMPRESSAO: sem fundo escuro, so o conteudo
   ============================================================================= */
@media print {
    .legis-topo { background: #fff !important; color: #000 !important; padding: 0 0 20px; }
    .legis-topo .fundo-topo, .legis-busca, .norma-ler, #whatsapp { display: none !important; }
    body.solis2 .legis-topo h1, .legis-topo-sub, .legis-numeros li, .legis-trilha, .legis-trilha a { color: #000 !important; }
    .norma { box-shadow: none; break-inside: avoid; }
}