/* Site publico. Paleta propria: o acervo de origem e de 2009 e a identidade
   visual dele e de terceiro. Serifa no texto legal, sem serifa na interface -
   ler artigo e leitura longa, navegar nao. */

:root {
  --tinta: #14181d;
  --tinta-fraca: #5b6672;
  --papel: #fbfaf7;
  --papel-2: #ffffff;
  --linha: #e2ddd4;
  --acento: #1f5c4c;
  --acento-fraco: #eaf2ef;
  --alerta: #8a4b12;
  --alerta-fundo: #fdf3e6;
  --largura: 62rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

main { max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* ---------------------------------------------------------- tira A-Z */

.tira {
  display: flex; flex-wrap: wrap; gap: .1rem;
  justify-content: center;
  background: var(--tinta); padding: .4rem .5rem;
}
.tira a, .tira span {
  color: #cfd6dd; font-size: .78rem; font-weight: 600;
  padding: .15rem .42rem; border-radius: 3px; letter-spacing: .04em;
}
.tira a:hover { background: #2a3037; color: #fff; text-decoration: none; }
.tira a.ativo { background: var(--acento); color: #fff; }
.tira span[aria-disabled] { color: #5a636c; }

/* -------------------------------------------------------- cabecalho */

.cabeca {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  max-width: var(--largura); margin: 0 auto; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--linha);
}
.marca strong { display: block; font-size: 1.3rem; letter-spacing: -.02em; }
.marca span { display: block; font-size: .72rem; color: var(--tinta-fraca); }
.marca:hover { text-decoration: none; }
.cabeca .busca { display: flex; flex: 1 1 18rem; }
.cabeca input[type=search] {
  flex: 1; padding: .5rem .7rem; font: inherit;
  border: 1px solid var(--linha); border-right: 0; border-radius: 4px 0 0 4px;
  background: var(--papel-2);
}
.cabeca button {
  padding: .5rem .9rem; font: inherit; cursor: pointer;
  border: 1px solid var(--acento); background: var(--acento); color: #fff;
  border-radius: 0 4px 4px 0;
}
.pilares { display: flex; gap: .9rem; font-size: .9rem; }

/* ------------------------------------------------------------ blocos */

.trilha { font-size: .82rem; color: var(--tinta-fraca); margin-bottom: 1rem; }
h1 { font-size: 1.55rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .82rem; margin: 0 0 .4rem; text-transform: uppercase;
     letter-spacing: .06em; color: var(--tinta-fraca); }
.linha-fina { color: var(--tinta-fraca); font-size: .9rem; margin: .2rem 0 0; }
.bloco { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); }
.conta {
  font-size: .72rem; font-weight: 600; color: var(--tinta-fraca);
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: 999px; padding: .05rem .45rem; margin-left: .35rem;
}
.vazio { color: var(--tinta-fraca); font-size: .92rem; }

/* ------------------------------------------- selo de procedencia */

.selo {
  font-size: .88rem; padding: .7rem .9rem; border-radius: 5px;
  margin: 0 0 1.25rem; border: 1px solid transparent;
}
.selo.alerta {
  background: var(--alerta-fundo); border-color: #e8cfa8; color: var(--alerta);
}
.selo.ok { background: var(--acento-fraco); border-color: #c9dfd7; color: var(--acento); }

.marca-sit {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .1rem .35rem; border-radius: 3px; vertical-align: middle;
  background: #f0ece4; color: var(--tinta-fraca); border: 1px solid var(--linha);
}
.marca-sit.revogado { background: #fbe9e9; color: #8a1c1c; border-color: #eccfcf; }
.marca-sit.anterior { background: #f3eee2; color: #6b5626; }
/* A copia concorrente: nao e superada nem vetada - e um par que o original
   nao desempatou. O ambar avisa sem classificar como historico. */
.marca-sit.ambiguo { background: #fdf1dc; color: #8a5a12; border-color: #ecd9b0; }

/* ------------------------------------------------------------- home */

.capa { padding: 1rem 0 .5rem; }
.pilares-grade {
  display: grid; gap: .75rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.pilar {
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: 6px; padding: .9rem; color: var(--tinta);
}
.pilar:hover { border-color: var(--acento); text-decoration: none; }
.pilar.inerte { opacity: .62; }
.pilar .n { display: block; font-size: 1.5rem; font-weight: 650;
            font-variant-numeric: tabular-nums; }
.pilar .sub { display: block; font-size: .76rem; color: var(--tinta-fraca); }
.aviso-escopo { font-size: .92rem; color: var(--tinta-fraca); }
.aviso-escopo strong { color: var(--tinta); }

.lista-diplomas { list-style: none; padding: 0; margin: 0; }
.lista-diplomas li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px solid var(--linha);
}

/* ------------------------------------------------------ dispositivo */

.dispositivo, .verbete {
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: 6px; padding: 1.4rem 1.5rem;
}
.nomen { font-weight: 600; margin: 0 0 .5rem; }
.ancestrais, .corpo-marca { font-size: .8rem; color: var(--tinta-fraca); margin: .2rem 0; }
.texto, .conceito, .ensaio {
  font-family: Georgia, "Iowan Old Style", serif; font-size: 1.06rem;
  line-height: 1.72; white-space: pre-wrap;
}
.notas { list-style: none; padding: 0; margin: 1rem 0 0;
         font-size: .82rem; color: var(--tinta-fraca); }
.notas li::before { content: "▸ "; }
.filhos { list-style: none; padding: 0; margin: 1.2rem 0 0;
          font-family: Georgia, serif; }
.filhos li { padding: .3rem 0; border-top: 1px dotted var(--linha); }
.filhos .rot { font-weight: 600; margin-right: .4rem; font-family: system-ui, sans-serif;
               font-size: .85rem; }
.filhos .n10 { padding-left: 1.2rem; }
.filhos .n11 { padding-left: 2.4rem; }
.filhos .n12 { padding-left: 3.6rem; }
.nao-vigente { opacity: .6; }
.versao { border-left: 3px solid var(--linha); padding-left: .9rem; margin: .9rem 0; }

.vizinhos { display: flex; justify-content: space-between; margin-top: 2rem; }
.vizinhos .dir { margin-left: auto; }

/* -------------------------------------------------------- remissoes */

.remissoes { display: grid; gap: 1.25rem;
             grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.remissoes ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.remissoes li { padding: .22rem 0; border-bottom: 1px solid var(--linha); }
.remissoes .onde { color: var(--tinta-fraca); font-size: .78rem; display: block; }
.remissoes .grau {
  font-size: .66rem; color: var(--tinta-fraca); border: 1px solid var(--linha);
  border-radius: 3px; padding: 0 .25rem; margin-left: .3rem;
}
.riscado { text-decoration: line-through; opacity: .55; }

/* ---------------------------------------------------------- indices */

.cabeca-diploma .numeros { display: flex; flex-wrap: wrap; gap: 1.4rem;
                           margin: .8rem 0 0; }
.numeros dt { font-size: .72rem; text-transform: uppercase;
              letter-spacing: .05em; color: var(--tinta-fraca); }
.numeros dd { margin: 0; font-size: 1.15rem; font-weight: 650;
              font-variant-numeric: tabular-nums; }
.indices { display: grid; gap: 1.5rem; margin-top: 2rem;
           grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.indice { background: var(--papel-2); border: 1px solid var(--linha);
          border-radius: 6px; padding: 1rem 1.1rem; }
.indice ul { list-style: none; padding: 0; margin: 0; font-size: .9rem;
             max-height: 34rem; overflow-y: auto; }
.indice li { padding: .22rem 0; border-bottom: 1px solid var(--linha); }
.arvore .rot { font-weight: 600; font-size: .8rem; }
.arvore em { color: var(--tinta-fraca); font-style: normal; }
.arvore .n2 { padding-left: 0; }
.arvore .n3 { padding-left: .8rem; }
.arvore .n4, .arvore .n5 { padding-left: 1.6rem; }
.arvore .n6, .arvore .n7 { padding-left: 2.4rem; }
.artigos .resumo, .lista-verbetes .resumo, .lista-achados .onde {
  display: block; color: var(--tinta-fraca); font-size: .78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ----------------------------------------------------------- listas */

.cabeca-lista { margin-bottom: 1.25rem; }
.filtro { display: flex; margin: .8rem 0 .2rem; max-width: 26rem; }
.filtro input { flex: 1; padding: .45rem .65rem; font: inherit;
                border: 1px solid var(--linha); border-radius: 4px 0 0 4px; }
.filtro button { padding: .45rem .8rem; font: inherit; cursor: pointer;
                 border: 1px solid var(--acento); background: var(--acento);
                 color: #fff; border-radius: 0 4px 4px 0; }
.lista-verbetes, .lista-achados { list-style: none; padding: 0; margin: 0; }
.lista-verbetes li, .lista-achados li {
  padding: .5rem 0; border-bottom: 1px solid var(--linha);
}
.tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--acento-fraco); color: var(--acento);
  border-radius: 3px; padding: .05rem .35rem; margin-left: .35rem;
}
.tag.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.etiquetas { margin: .3rem 0; }
.sinonimos, .topicos { font-size: .85rem; color: var(--tinta-fraca); }
.trecho { margin: .3rem 0 0; font-size: .9rem;
          font-family: Georgia, serif; color: #333a42; }
.trecho mark { background: #fdf0c4; }

.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { text-align: left; padding: .45rem .5rem;
                         border-bottom: 1px solid var(--linha); }
.tabela th { font-size: .72rem; text-transform: uppercase;
             letter-spacing: .05em; color: var(--tinta-fraca); }
.tabela .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- rodape */

.rodape {
  max-width: var(--largura); margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
  border-top: 1px solid var(--linha); font-size: .82rem;
  color: var(--tinta-fraca);
}

/* ------------------------------------------------- barra de áreas (tela.jpg) */

.com-barra { display: grid; gap: 2rem; grid-template-columns: 13rem 1fr; }
@media (max-width: 46rem) { .com-barra { grid-template-columns: 1fr; } }

.barra-areas h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); margin: .4rem 0 .5rem;
}
.barra-areas ul { list-style: none; padding: 0; margin: 0; font-size: .86rem; }
.barra-areas li { padding: .12rem 0; }
.barra-areas .ausente { color: #a8a29a; }
.barra-areas .rasa { color: #c3bdb2; }
.barra-areas .todas { font-size: .78rem; }

.grade-areas {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.grade-areas li {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .35rem 0; border-bottom: 1px solid var(--linha);
}
.grade-areas .ausente { color: #a8a29a; }
.conta.vazia { color: #a8a29a; background: transparent; border-style: dashed; }

/* ------------------------------------------------- /areas: ramos + sinonimos */

.ramos {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.ramo {
  padding: .8rem .9rem; border: 1px solid var(--linha);
  border-radius: 6px; background: var(--papel-2);
}
.ramo .rot { font-weight: 650; font-size: 1.02rem; }
.ramo .def { font-size: .84rem; color: var(--tinta-fraca); margin: .3rem 0 0; }
.ramo .sinonimos { font-size: .78rem; color: #a8a29a; margin: .45rem 0 0; }

/* ------------------------------------------------- os outros quatro pilares */

.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0 .2rem; }
.chips a {
  font-size: .78rem; padding: .12rem .5rem; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--papel-2);
  color: var(--tinta-fraca);
}
.chips a.ativo { background: var(--acento); border-color: var(--acento); color: #fff; }
.chips a:hover { text-decoration: none; border-color: var(--acento); }
.chips span { opacity: .65; }

.notas-citacao {
  font-size: .82rem; color: var(--tinta-fraca); margin-top: 1rem;
  padding-top: .6rem; border-top: 1px solid var(--linha);
}

.alternativas { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.alternativas li {
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
  padding: .5rem 0; border-top: 1px solid var(--linha);
  font-family: Georgia, serif;
}
.alternativas .letra {
  font-family: system-ui, sans-serif; font-weight: 650; font-size: .82rem;
  text-transform: uppercase; color: var(--tinta-fraca); min-width: 1.2rem;
}
.alternativas .certa { background: var(--acento-fraco); border-radius: 4px;
                       padding-left: .5rem; padding-right: .5rem; }
.alternativas .estudar { font-family: system-ui, sans-serif; font-size: .76rem;
                         color: var(--tinta-fraca); flex-basis: 100%; }
.pilares { flex-wrap: wrap; }

/* Blocos temáticos do verbete: "Constitucional — competência para legislar". */
.topicos { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--linha); }
.topicos dl { margin: 0; }
.topicos dl > div { padding: .4rem 0; border-bottom: 1px solid var(--linha); }
.topicos dt { font-size: .9rem; }
.topicos dd { margin: .15rem 0 0; font-size: .86rem; }
.topicos .sem-link { color: var(--tinta-fraca); }

/* Hub de área: a definição é do produto, e por isso vem em destaque. */
.cabeca-area { margin-bottom: 1.5rem; }
.definicao {
  font-family: Georgia, serif; font-size: 1.08rem; line-height: 1.7;
  max-width: 46rem; margin: .4rem 0 0;
}

/* Índice remissivo da área: os blocos temáticos do acervo reunidos por
   matéria. Duas colunas na leitura — de onde veio (verbete) e para onde leva
   (dispositivo) —, porque a linha sozinha ("adquirido; proteção") não tem
   sujeito. */
.indice-remissivo { margin: .75rem 0 0; }
.indice-remissivo > div { padding: .45rem 0; border-bottom: 1px solid var(--linha); }
.indice-remissivo dt { font-size: .9rem; }
.indice-remissivo dt .origem { font-weight: 600; }
.indice-remissivo dt .assunto { color: var(--tinta-fraca); }
.indice-remissivo dt .assunto::before { content: " — "; }
.indice-remissivo dd { margin: .15rem 0 0 1rem; font-size: .86rem; }
.indice-remissivo .sem-link { color: var(--tinta-fraca); }
.mais { margin-top: .9rem; font-size: .88rem; color: var(--tinta-fraca); }

/* Título de corpo normativo dentro do índice do diploma. O ADCT e os anexos
   têm numeração própria, e a lista precisa dizer onde um termina e o outro
   começa — senão a Constituição mostra dois "Art. 20" seguidos. */
.corpo-titulo { margin: 1.6rem 0 .2rem; padding-top: .8rem;
                border-top: 2px solid var(--linha); font-size: 1.05rem; }
.corpo-marca { margin: .2rem 0 .6rem; font-size: .85rem;
               color: var(--tinta-fraca); }

/* Remissões impressas sob o inciso a que se referem — a forma do acervo
   (`obs.dji.grau.N`). Compacta de propósito: o art. 5º da Constituição tem 97
   subunidades com remissão, e a forma completa empurraria o texto da lei para
   fora da tela. */
.remissoes-inline { margin: .3rem 0 .5rem; font-size: .82rem;
                    border-left: 2px solid var(--linha); padding-left: .6rem; }
.remissoes-inline p { margin: .15rem 0; }
.remissoes-inline .familia { display: inline-block; min-width: 6.5rem;
                             color: var(--tinta-fraca); font-variant: small-caps; }
.remissoes-inline a { color: inherit; }

/* ------------------------------------------------------------- conta */
/* SDD_INFRA Fase A: entrar, cadastro, /conta e a caixa de sessao do
   cabecalho. O botao Sair herdaria o botao verde da busca (.cabeca button). */

.sessao { display: flex; align-items: center; gap: .6rem; font-size: .9rem;
          margin-left: auto; }
.sessao form { margin: 0; }
.sessao button { padding: 0; border: 0; border-radius: 0; background: none;
                 color: var(--tinta-fraca); font: inherit; cursor: pointer; }
.sessao button:hover { color: var(--acento); text-decoration: underline; }

.formulario-conta { max-width: 26rem; }
.formulario-conta form { display: grid; gap: .9rem; margin-top: 1.1rem; }
.formulario-conta label { display: grid; gap: .3rem; font-size: .9rem; }
.formulario-conta label small { color: var(--tinta-fraca); font-weight: normal; }
.formulario-conta input { padding: .55rem .7rem; font: inherit;
                          border: 1px solid var(--linha); border-radius: 8px;
                          background: var(--papel-2); }
.formulario-conta button { justify-self: start; padding: .55rem 1.1rem; font: inherit;
                           cursor: pointer; border: 1px solid var(--acento);
                           background: var(--acento); color: #fff; border-radius: 4px; }
.formulario-conta .campo-senha { position: relative; }
.formulario-conta .campo-senha input { width: 100%; padding-right: 2.2rem; }
.formulario-conta .olho { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
                          display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
                          padding: 0; border: none; background: none; cursor: pointer;
                          color: var(--tinta-fraca); opacity: .75; }
.formulario-conta .olho:hover { color: var(--tinta); opacity: 1; }
/* O atributo hidden nao estiliza elemento SVG (regra do navegador vale so
   para HTML) e .hidden em SVG e expando, sem refletir no atributo: o estado
   do olho vive na classe .ativo do botao, aqui embaixo. */
.formulario-conta .olho .olho-fechado { display: none; }
.formulario-conta .olho.ativo .olho-aberto { display: none; }
.formulario-conta .olho.ativo .olho-fechado { display: block; }
.rodape-form { font-size: .9rem; color: var(--tinta-fraca); margin-top: 1.2rem; }
.erro-form { background: #fbe9e9; color: #8a1c1c; border: 1px solid #eccfcf;
             border-radius: 4px; padding: .55rem .75rem; font-size: .92rem; }
.ok-form { background: var(--acento-fraco); color: var(--acento);
           border: 1px solid #c9dfd7; border-radius: 4px; padding: .55rem .75rem;
           font-size: .92rem; }
.ficha-conta { display: grid; grid-template-columns: max-content 1fr;
               gap: .35rem 1.2rem; font-size: .95rem; }
.ficha-conta dt { color: var(--tinta-fraca); }
.ficha-conta dd { margin: 0; }
.formulario-conta { max-width: 36rem; }
.formulario-conta .ok-form p { margin: .2rem 0; }
.chave-nova { word-break: break-all; user-select: all; font-size: .85rem; }
.lista-chaves { list-style: none; padding: 0; margin: .8rem 0 0; font-size: .9rem; }
.lista-chaves li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
                   padding: .45rem 0; border-bottom: 1px solid var(--linha); }
.lista-chaves form { margin: 0 0 0 auto; display: block; }
.formulario-conta .botao-fraco { padding: .2rem .6rem; background: none;
                                 color: #8a1c1c; border-color: #eccfcf; font-size: .85rem; }