/* ==========================================================================
   Legislação — /legislacoes
   --------------------------------------------------------------------------
   Sem PDF de referência (o Jonh pediu para seguir o mesmo processo de
   construção de /eventos, /cursos e /abmes-pesquisas: sem layout novo,
   reaproveitando o que já está aprovado). Prefixo próprio (`leg-`) para não
   confundir, na leitura do código, conteúdo de Legislação com o de
   Editora/Pesquisas.

   HERO no padrão de 02/09/2026 (`.ec-hero`, eventos.css): mesma fonte,
   tamanho, espaçamento e `padding-block: 44px 36px` de toda "row de título"
   do portal -- nasceu já no padrão, sem precisar de correção depois.

   Reaproveita `.botao`, `.carregar*`, `.trilha*`, `.recentes*`,
   `.pub-filtro`, `.filtro-periodo*` de site.css/internas.css/publicacoes.css
   -- esta folha só tem o que é exclusivo de Legislação. A seção "Legislação"
   usa `.recentes`/`.recentes__cabeca` de internas.css ponta a ponta, no MESMO
   molde de "Eventos realizados"/"Cursos realizados"/"Todas as pesquisas" --
   só a grade de cartões (`.leg-grade`/`.leg-cartao`) e o painel de detalhe
   (`.leg-detalhe*`) são exclusivos daqui.
   ========================================================================== */

:root {
    --leg-arte-hero: #ECECEE;   /* a arte do hero -- mesma cor de --ec-arte-vazia/--pub-arte-hero */
}

/* ------------------------------------------------------------------ HERO -- */

.leg-hero {
    background: var(--branco);
    padding-block: 44px 36px;
}

/**
 * 🔴 GANHOU A COLUNA DO ÍCONE EM 02/09/2026 -- pedido do Jonh: "achar um
 * ícone de legislação... e colocar no lado direito da mesma forma que tem em
 * Eventos e Cursos e em Publicações". Mesma grade de `.ec-hero__interno`.
 */
.leg-hero__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: center;
    gap: 40px;
}

/**
 * A balança da justiça -- MESMO desenho de `icone-servicos.phtml` (chave
 * "juridica", extraído do LandingPage-Servicos.pdf), reaproveitado aqui em
 * tamanho de hero. Não é um ícone novo desenhado a olho: já existia no
 * projeto, com a curva certa, e faz tanto sentido para Legislação quanto
 * para Serviços.
 */
.leg-hero__arte {
    width: 200px;
    height: 198.57px;
    color: var(--leg-arte-hero);
    justify-self: end;
}

/**
 * O hero de Comenda reaproveita esta MESMA classe, mas com um ícone de fonte
 * (`bi bi-award-fill`) em vez de um SVG próprio -- Comenda não tem PDF de
 * origem para extrair um vetor (mesmo problema que Legislação já teve, ver o
 * cabeçalho de icone-hero-legislacoes.phtml), e a fonte de ícones já
 * carregada no layout evita desenhar um traço novo à mão.
 */
i.leg-hero__arte {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 168px;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .leg-hero__interno { grid-template-columns: minmax(0, 1fr); }
    .leg-hero__arte { display: none; }
}

.leg-hero__titulo {
    margin: 0;
    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    color: var(--verde-escuro);
    letter-spacing: -.01em;
}

.leg-hero__apoio {
    margin: 14px 0 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--lima-escuro);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.leg-hero__chamada {
    margin: 30px 0 0;
    max-width: 60ch;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
    text-wrap: pretty;
}

/* ================================================================ GRADE == */
/* .recentes/.recentes__interno/.recentes__cabeca/.recentes__contagem/
   .recentes__vazio (internas.css) dao a secao, o titulo, o filtro e a
   contagem -- mesmo molde de "Eventos realizados"/"Cursos realizados"/"Todas
   as pesquisas". Aqui so a grade de cartoes, exclusiva de Legislacao. */

/**
 * 🔴 CARTÃO VERDE -- pedido do Jonh em 02/09/2026, corrigido na volta: a cor
 * #E1E9D4 (a MESMA de `--faixa-clara`) não é da FAIXA inteira (`.recentes`),
 * e sim de dentro dela (`.recentes__interno`) -- por isso o fundo forma um
 * cartão com respiro branco ao redor, e não uma faixa de ponta a ponta.
 * `padding: 30px` é o respiro dentro do cartão, entre a borda verde e o
 * título/filtro/grade/botão que moram dentro de `.recentes__interno`.
 *
 * `.recentes`/`.recentes__interno` são classes COMPARTILHADAS (Notícias,
 * Eventos, Cursos, Pesquisas, Busca) e não têm fundo próprio -- de
 * propósito, cada página decide. Aqui dá para sobrescrever direto, sem
 * precisar de um seletor mais específico: `legislacoes.css` só é CARREGADA
 * nas páginas de Legislação (ver `cssPagina` no controller), então a regra
 * abaixo nunca alcança `.recentes__interno` de nenhuma outra seção do portal,
 * mesmo sem prefixo `leg-`.
 */
.recentes__interno {
    background: var(--faixa-clara);
    padding: 30px;
    border-radius: 12px;
}

/**
 * 3 colunas -- mesma densidade do Arquivo de Notícias (`.cartoes--densa`):
 * um acervo de 5.440 normas pede "percorrer", não "apreciar" (ver o
 * comentário em NoticiasController sobre as duas densidades).
 */
.leg-grade {
    list-style: none;
    margin: 0 0 48px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.leg-cartao {
    display: flex;
    background: var(--branco);
    border: 1px solid rgba(33, 65, 56, .18);
    border-radius: 8px;
    padding: 24px;
}

.leg-cartao__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.leg-cartao__categoria {
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 5px 10px;
    background: var(--faixa-clara);
    color: var(--verde-escuro);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 4px;
}

.leg-cartao__titulo {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--verde-escuro);
    overflow-wrap: anywhere;
}
.leg-cartao__titulo a { color: inherit; text-decoration: none; }
.leg-cartao__titulo a:hover { text-decoration: underline; }

.leg-cartao__data {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    color: var(--cinza-azulado);
    font-size: 14px;
    font-weight: 600;
}

.leg-cartao__ementa {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    color: #3B4A45;
    overflow-wrap: anywhere;
}

/* mesmo tratamento do selo "Restrito a associadas" de Editora/Pesquisas */
.leg-cartao__restrita {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 14px 0 0;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--verde-escuro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}
.leg-cartao__restrita .bi-lock-fill { font-size: 11px; }

/**
 * Cartão COM capa -- reaproveitado por Colunas (site_coluna.no_imagem).
 * Legislação não tem imagem, então esta variante nasceu em 04/09/2026 junto
 * com /colunas, mas fica aqui para não duplicar `.leg-cartao` inteiro.
 */
.leg-cartao--com-capa { flex-direction: column; padding: 0; overflow: hidden; }
.leg-cartao--com-capa .leg-cartao__texto { padding: 20px 24px 24px; }
.leg-cartao__capa {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.leg-cartao__baixar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 14px;
    color: var(--verde-escuro);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.leg-cartao__baixar:hover { text-decoration: underline; }

/* =========================================================== FILTRO === */
/**
 * 🔴 PALETA PRÓPRIA -- pedido do Jonh em 02/09/2026: borda, nome e seta do
 * filtro "Categorias" na cor institucional (#214138 = --verde-escuro), com o
 * hover seguindo a MESMA família de cor -- não o lima que `.pub-filtro` usa
 * no resto do site. `#163029` é o mesmo verde mais escuro que `.selo:hover`
 * já usa em internas.css -- reaproveitado aqui em vez de inventar um tom novo.
 *
 * Mesmo raciocínio do fundo de `.recentes` acima: `.pub-filtro`/
 * `.pub-combo__botao` são classes compartilhadas, mas `legislacoes.css` só
 * carrega nas páginas que pedem essa paleta de propósito -- a regra não vaza
 * para as pastilhas de Notícias, Eventos, Cursos, Pesquisas ou Busca, que
 * usam o lima padrão (`.filtro-institucional`, a variante #214138 delas, é
 * outra classe, em `publicacoes.css`).
 *
 * 🔴 08-09/09/2026 -- Comenda ABMES e depois Documentos ABMES passaram a
 * carregar esta folha de propósito também (pelas classes `.leg-*` de
 * grade/cartão/detalhe) -- o combo delas herda esta MESMA cor institucional,
 * e é o efeito desejado, não um vazamento (ao contrário do que aconteceu em
 * 07/09 quando o Institucional carregava esta folha por engano, sem usar nada
 * dela).
 */
:root {
    --leg-chevron-verde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23214138' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --leg-chevron-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23163029' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pub-filtro,
.pub-combo__botao {
    border-color: var(--verde-escuro);
    color: var(--verde-escuro);
    background-image: var(--leg-chevron-verde);
}

.pub-filtro:hover,
.pub-combo__botao:hover,
.pub-combo--ativo .pub-combo__botao,
.pub-combo--aberto .pub-combo__botao {
    border-color: #163029;
    color: #163029;
    background-image: var(--leg-chevron-escuro);
}

.pub-filtro--ativo {
    border-color: var(--verde-escuro);
    color: var(--verde-escuro);
    background-image: var(--leg-chevron-verde);
}

.pub-filtro:focus-visible,
.pub-combo__botao:focus-visible { outline-color: #163029; }

/* ====================================================== SELOS DE CATEGORIA */
/**
 * 🔴 PEDIDO DO JONH em 02/09/2026: "Portaria do MEC" em #ebeda0 e "Despacho"
 * em #cadffb. As outras 17 categorias em uso (conferidas contra
 * `LegislacaoTable::categorias()`) ganharam cada uma o seu próprio tom
 * pastel aqui, para o filtro por tipo de ato ficar visualmente reconhecível
 * cartão a cartão -- mesmo espírito de `.selo--internacional`/`.selo--
 * regional` em internas.css. "Edital" ganhou o próprio verde pastel depois
 * (pedido do Jonh: "seguindo os tons dos outros selos" -- o `--faixa-clara`
 * padrão, sem modificador, ficava destoante ao lado dos demais).
 *
 * Chave = id_tipo_generica (sistema_generica), a mesma classe serve o cartão
 * da grade (`.leg-cartao__categoria`) e o selo do detalhe
 * (`.leg-detalhe__categoria`) -- ver `cartoes-legislacao.phtml`/`detalhe.phtml`.
 */
.leg-selo--45  { background: #CFE8C7; }  /* Edital -- pedido do Jonh em 02/09/2026: verde pastel, no mesmo tom das outras, em vez do --faixa-clara padrão */
.leg-selo--27  { background: #EBEDA0; }  /* Portaria do MEC */
.leg-selo--26  { background: #CADFFB; }  /* Despacho */
.leg-selo--18  { background: #E3D9F7; }  /* Lei */
.leg-selo--20  { background: #E0D7F2; }  /* Decreto */
.leg-selo--21  { background: #FBE0C2; }  /* Resolução */
.leg-selo--19  { background: #F9D0D0; }  /* Medida Provisória */
.leg-selo--22  { background: #C9ECDF; }  /* Portaria Interministerial */
.leg-selo--23  { background: #D0E6F7; }  /* Portaria */
.leg-selo--24  { background: #F0D9EC; }  /* Instrução Normativa */
.leg-selo--25  { background: #E6DCC4; }  /* Parecer do CNE */
.leg-selo--48  { background: #FFF0B3; }  /* Aviso */
.leg-selo--49  { background: #D9F2E3; }  /* Nota de Esclarecimento */
.leg-selo--46  { background: #F5E6FF; }  /* Nota Técnica */
.leg-selo--47  { background: #E2E2E2; }  /* Outras normas */
.leg-selo--419 { background: #FFD6D6; }  /* Especial Coronavírus */
.leg-selo--334 { background: #D6E4FF; }  /* Atos */
.leg-selo--357 { background: #FFE0EB; }  /* Súmula de Parecer */
.leg-selo--427 { background: #F2E8D5; }  /* Portarias ABMES */

/**
 * Selos de DOCUMENTOS (/publicacoes/documentos, nasceu em 09/09/2026) -- as
 * outras 19 categorias reais em uso lá (conferidas contra
 * `DocumentoTable::categorias()`), que Legislação ainda não tinha colorido
 * porque não usa. MESMA árvore `sistema_generica` (id_parente=17, ver o
 * cabeçalho de DocumentoTable) -- por isso a chave é numérica igual às de
 * cima, e não colide com elas (nenhum id se repete entre as duas listas).
 */
.leg-selo--32  { background: #C4D2C4; }  /* Documentos -- categoria "guarda-chuva", a maior (462); tom mais forte de proposito -- o pastel claro inicial (#DCE3DC) ficava quase invisivel no cartao branco */
.leg-selo--28  { background: #F6D9A6; }  /* Seminários ABMES */
.leg-selo--362 { background: #C6E6F0; }  /* ABMES Regional */
.leg-selo--348 { background: #C8E6C9; }  /* ABMES Internacional */
.leg-selo--29  { background: #E9E2D3; }  /* Institucional -- mesmo balde genérico do Regulamento da Comenda, ver ComendaTable */
.leg-selo--38  { background: #F3D6AE; }  /* Fórum do Ensino Superior */
.leg-selo--392 { background: #CFE8DE; }  /* Termos de cooperação internacional */
.leg-selo--342 { background: #E6D6F0; }  /* Ofício Circular */
.leg-selo--44  { background: #F6CFCF; }  /* Congresso Brasileiro da Educação Superior Particular - CBESP */
.leg-selo--371 { background: #FCE3CC; }  /* ABMES Experience */
.leg-selo--35  { background: #D9E9F7; }  /* Artigos */
.leg-selo--43  { background: #E9D7F7; }  /* Publicações Especiais */
.leg-selo--36  { background: #F8E3B8; }  /* Coluna */
.leg-selo--422 { background: #D3E8F9; }  /* Microsoft */
.leg-selo--386 { background: #D6F0DB; }  /* Webinar */
.leg-selo--463 { background: #E3D7BE; }  /* Comenda -- categoria REAL (numérica); NÃO confundir com .leg-selo--com-resolucao/--com-regulamento (chave textual, só na página dedicada da Comenda) */
.leg-selo--344 { background: #EEE3CC; }  /* ABMES Pesquisas */
.leg-selo--443 { background: #F9DEDE; }  /* #EuSouOFuturo */
.leg-selo--31  { background: #DDEAF5; }  /* Matérias */

/**
 * Selos de Comenda ABMES -- chave TEXTUAL (`--com-regulamento`/`--com-resolucao`),
 * não numérica: a categoria daqui é uma classificação NOSSA (Regulamento ×
 * Resolução administrativa), não um id de `sistema_generica` -- usar um id
 * numérico arriscaria colidir com uma categoria REAL de Legislação no dia em
 * que ela ganhar um id 1 ou 2. Ver o cabeçalho de ComendaTable.
 */
.leg-selo--com-regulamento { background: #DCEAE4; }  /* tom institucional, documento fundador */
.leg-selo--com-resolucao   { background: #FBE0C2; }  /* mesmo tom de .leg-selo--21 (Resolução, em Legislação) -- mesmo tipo de documento */

/* ========================================================== RESPONSIVO === */
/* Mesma escala de .ec-hero (eventos.css), nos MESMOS pontos de quebra --
   ver o comentario no topo do arquivo sobre a padronizacao de 02/09/2026. */

@media (max-width: 1319.98px) {
    .leg-hero__titulo  { font-size: 60px; }
    .leg-hero__chamada { font-size: 25px; }
}

@media (max-width: 1199.98px) {
    .leg-hero__titulo  { font-size: 52px; }
    .leg-hero__apoio   { font-size: 19px; }
    .leg-hero__chamada { font-size: 22px; }

    .leg-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .leg-hero { padding-block: 32px 28px; }
    .leg-hero__titulo   { font-size: 44px; }
    .leg-hero__chamada  { font-size: 20px; max-width: none; }
}

@media (max-width: 767.98px) {
    .leg-hero__titulo  { font-size: 36px; }
    .leg-hero__apoio   { font-size: 17px; }
    .leg-hero__chamada { font-size: 18px; }

    .leg-grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 479.98px) {
    .leg-hero__titulo  { font-size: 30px; }
    .leg-hero__chamada { font-size: 17px; }
}

/* ============================================================== DETALHE == */
/* Mesma geometria de pesquisas.css: coluna propria de 930px, faixa escura de
   largura total por baixo do painel de acao. Sem capa -- ver cabecalho. */

.leg-detalhe {
    background: var(--branco);
    padding-block: 56px 60px;
}

.leg-detalhe__coluna {
    width: min(100% - 48px, 930px);
    margin-inline: auto;
}

.leg-detalhe__categoria {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 12px;
    background: var(--faixa-clara);
    color: var(--verde-escuro);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 4px;
}

.leg-detalhe__titulo {
    margin: 0 0 16px;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--verde-escuro);
}

.leg-detalhe__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cinza-azulado);
}
.leg-detalhe__meta span { display: inline-flex; align-items: center; gap: 8px; }

.leg-detalhe__painel-secao {
    background: #1D2E29;
    padding-block: 26px 28px;
    margin-bottom: 36px;
}

.leg-detalhe__painel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 15px 32px;
    background: var(--verde-escuro);
    border-radius: 4px;
}

.leg-detalhe__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.leg-detalhe__bloqueado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.leg-detalhe__bloqueado-texto {
    margin: 0;
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: #fff;
}
.leg-detalhe__bloqueado-texto .bi { color: var(--lima); margin-right: 4px; }

.leg-detalhe__ementa {
    margin: 0 0 32px;
    max-width: 74ch;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--verde-escuro);
}

/**
 * "Altera"/"Revoga" -- fechado para associado, SEMPRE (não depende de
 * `bo_restrito`). Mesma linguagem visual de `.leg-detalhe__bloqueado`
 * (cadeado + texto + botão), só que mais discreta -- não é a ação principal
 * da tela, é um complemento -- por isso mora fora da faixa escura, com fundo
 * claro e borda, dentro da própria coluna de texto.
 */
.leg-detalhe__relacionadas-bloqueadas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin: 0 0 24px;
    padding: 20px 24px;
    background: var(--faixa-clara);
    border-radius: 8px;
}

.leg-detalhe__relacionadas-texto {
    margin: 0;
    flex: 1 1 360px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--verde-escuro);
}
.leg-detalhe__relacionadas-texto .bi { color: var(--verde-escuro); margin-right: 4px; }

.leg-detalhe__contato {
    margin: 0;
    max-width: 74ch;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--verde-escuro);
}
.leg-detalhe__contato a { color: var(--verde-escuro); font-weight: 700; }

@media (max-width: 767.98px) {
    .leg-detalhe__titulo    { font-size: 30px; }
    .leg-detalhe__painel    { flex-direction: column; align-items: flex-start; padding: 24px; }
    .leg-detalhe__acoes,
    .leg-detalhe__bloqueado { width: 100%; flex-direction: column; align-items: stretch; }
    .leg-detalhe__acoes .botao,
    .leg-detalhe__bloqueado .botao { width: 100%; justify-content: center; }
    .leg-detalhe__ementa    { font-size: 17px; }
    .leg-detalhe__relacionadas-bloqueadas { flex-direction: column; align-items: stretch; }
    .leg-detalhe__relacionadas-bloqueadas .botao { width: 100%; justify-content: center; }
}

/* ========================================================== NAO ENCONTRADA */

.leg-vazio {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    padding-block: 80px 90px;
    max-width: 640px;
}

.leg-vazio__titulo {
    margin: 0 0 18px;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
}

.leg-vazio__texto {
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.4;
    color: #3B4A45;
}

.leg-vazio__diagnostico {
    margin-top: 24px;
    font-size: 13px;
    color: var(--cinza-azulado);
}

@media (max-width: 767.98px) {
    .leg-vazio__titulo { font-size: 26px; }
}