/* Página de uma norma: abas, barra lateral de exibição e o documento. */

.norma .cmp-norma__tablist::-webkit-scrollbar {
  display: none;
}

.norma .cmp-norma__tablist {
  /* Figma V4 (4475:130041): a barra de abas nao tem linha de baixo; so a aba
     ativa leva o traco azul */
  display: flex;
  gap: 0;
  margin-block: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}

/* as abas do Figma V4 (quadro 4475:130041): Open Sans 600 14/21, na cor do
   texto nas quatro, 56 de altura, recheio 0/32, e so a ativa sublinhada */
.norma .cmp-norma__tab {
  background: none;
  block-size: 56px;
  border: 0;

  /* Figma V4 (4.4): o filete da aba ativa tem 5 */
  border-bottom: 5px solid transparent;
  color: var(--color-text-title);
  cursor: pointer;
  font-family: var(--font-family-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  padding: 0 var(--space-8);
  white-space: nowrap;
}

.norma .cmp-norma__tab[aria-selected="true"] {
  border-bottom-color: var(--color-brand-action);
}

/* no prototipo o hover so pinta o texto de azul, na ativa tambem */
.norma .cmp-norma__tab:hover {
  color: var(--color-brand-action);
}

@media screen and (width < 768px) {
  .norma .cmp-norma__tab {
    padding: 0 var(--space-4);
  }
}

/*
 * minmax(0, 1fr) e nao 1fr: o minimo automatico de uma coluna de grade e o
 * conteudo, e basta uma regua larga dentro para a pagina inteira rolar de lado.
 */
.norma .cmp-norma__body {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
}

.norma .cmp-norma__panels {
  min-inline-size: 0;
}

@media screen and (width >= 900px) {
  .norma .cmp-norma__body {
    align-items: start;
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .norma .cmp-norma__body--inteiro {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- barra lateral ---- */

.norma .cmp-norma__sidebar[hidden] {
  display: none;
}

.norma .cmp-norma__sidebar {
  display: grid;
  gap: var(--space-8);
}

/* titulo de grupo da lateral no Figma V4: Open Sans 600 14/21, +5% de
   espacejamento, caixa alta, na cor do texto, 12 acima do conteudo */
.norma .cmp-norma__panel-title {
  color: var(--color-exibicao-titulo);
  font-family: var(--font-family-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}

/* a linha do Figma: icone, rotulo e o interruptor na ponta, 24 de altura e 12
   entre uma linha e outra */
.norma .cmp-norma__switch {
  align-items: center;
  cursor: pointer;
  display: flex;

  /* nao pode ser literal: no tema escuro de quem le, #262828 fica ilegivel */
  color: var(--color-exibicao-label);
  font-size: 14px;
  gap: var(--space-2);
  justify-content: space-between;
  line-height: 1.5;
  min-block-size: 24px;
  padding-block: 0;
}

/* 16 entre as linhas da Exibicao (Figma V4) */
.norma .cmp-norma__switch + .cmp-norma__switch {
  margin-block-start: var(--space-4);
}

.norma .cmp-norma__switch .cmp-icon {
  block-size: 24px;
  color: var(--color-exibicao-icone);
  flex: 0 0 auto;
  inline-size: 24px;
}

.norma .cmp-norma__switch-label {
  flex: 1 1 auto;
}

/* o interruptor do Figma: trilho com bolinha, e não a caixa do navegador */
.norma .cmp-norma__switch-input {
  appearance: none;
  background: var(--color-icon-medium);
  block-size: 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex: 0 0 auto;
  inline-size: 39px;
  margin: 0;
  position: relative;
  transition: background var(--motion-fast);
}

.norma .cmp-norma__switch-input::after {
  background: #fff;
  block-size: 16px;
  border-radius: var(--radius-pill);
  content: "";
  inline-size: 16px;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  position: absolute;
  transition: transform var(--motion-fast);
}

.norma .cmp-norma__switch-input:checked {
  background: var(--color-brand-action);
}

.norma .cmp-norma__switch-input:checked::after {
  transform: translateX(19px);
}

@media (prefers-reduced-motion: reduce) {
  .norma .cmp-norma__switch-input,
  .norma .cmp-norma__switch-input::after {
    transition: none;
  }
}

/* a lista de alteracoes do Figma nao tem marcadores: sao so os links azuis */
.norma .cmp-norma__changes ul,
.norma .cmp-norma__changes ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.norma .cmp-norma__panel-title--recolhe {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  padding: 0;
}

.norma .cmp-norma__panel-title--recolhe .cmp-icon {
  /* a seta do Alteracoes e azul no Figma V4 */
  color: var(--color-brand-action);
}

.norma .cmp-norma__panel-title--recolhe[aria-expanded="true"] .cmp-icon {
  transform: rotate(180deg);
}

.norma .cmp-norma__changes a {
  color: var(--color-text-link);
  display: block;
  font-size: 14px;
  line-height: 1.5;
  padding-block: var(--space-1);
}

/* o que a norma fez ("Revoga"), vindo da API, em cima do link; fora do Figma,
   que so desenha os links */
.norma .cmp-norma__changes-tipo {
  color: var(--color-text-caption);
  display: block;
  font-size: 12px;
  line-height: 1.4;
  padding-block-start: var(--space-1);
}

.norma .cmp-norma__changes-tipo + a {
  padding-block-start: 0;
}

.norma .cmp-norma__auth {
  display: grid;
  gap: var(--space-3);
}

/* só vira duas colunas quando há QR code */
.norma .cmp-norma__auth:has(.cmp-norma__qr) {
  align-items: center;
  gap: var(--space-2);
  grid-template-columns: 102px 1fr;
}

.norma .cmp-norma__qr {
  block-size: 102px;
  inline-size: 102px;
}

.norma .cmp-norma__auth-text {
  color: var(--color-text-title);
  font-size: 12px;
  line-height: 16px;
  margin: 0;
}

.norma .cmp-norma__auth-cta {
  align-items: center;
  background: var(--color-brand-action);
  border-radius: var(--radius-pill);
  color: var(--color-text-on-brand);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: var(--space-3);
  inline-size: 100%;
  justify-content: center;
  line-height: 24px;
  margin-block-start: var(--space-3);
  padding: var(--space-3) 0;
  text-decoration: none;
}

.norma .cmp-norma__auth-cta:hover {
  background: var(--color-brand-base);
}

/* ---- barra do documento ---- */

.norma .cmp-norma__toolbar {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  margin-block-end: 0;
  min-block-size: 24px;
}

/* o chip de situacao no Figma V4: 24 de altura, borda #D3D8DB, raio 8, Open
   Sans 600 10/18 em caixa alta com +4%, icone de 14 */
.norma .cmp-norma__status {
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-stroke-divider);
  border-radius: var(--radius-md);
  color: var(--color-icon-darker);
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  gap: var(--space-1);
  letter-spacing: 0.04em;
  line-height: 18px;
  padding: 2px var(--space-3);
  text-transform: uppercase;
}

.norma .cmp-norma__status-icon {
  block-size: 14px;
  inline-size: 14px;
}

.norma .cmp-norma__status[data-situacao="em vigor"] .cmp-norma__status-icon {
  color: var(--color-selo-vigente);
}

.norma .cmp-norma__status[data-situacao="revogada"] .cmp-norma__status-icon {
  color: var(--color-text-caption);
}

/* "Neutro" no campo do bloco devolve o glifo a cor do texto, como o Figma V4 */
.norma[data-selo="neutro"] .cmp-norma__status[data-situacao="em vigor"] .cmp-norma__status-icon {
  color: var(--color-icon-darker);
}

.norma .cmp-norma__tools {
  display: flex;
  gap: var(--space-4);
  position: relative;
}

.norma .cmp-norma__tool {
  align-items: center;
  background: none;
  block-size: 24px;
  border: 0;
  border-radius: var(--radius-sm);

  /* Figma V4: os tres glifos da barra sao #262828 */
  color: var(--color-icon-darker);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-family-ui);
  font-size: 16px;
  inline-size: 24px;
  justify-content: center;
}

.norma .cmp-norma__tool:hover {
  background: var(--color-bg-highlight);
  color: var(--color-text-title);
}

.norma .cmp-norma__appearance {
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  position: absolute;
  z-index: 45;
}

/* ---- o documento ---- */

/* medidas do Figma V4 (ver o bloco no fim do arquivo): 16/140%, sem centralizar.
   Letra e cor do hml; --norma-escala e o tamanho escolhido na janela Aparencia */
.norma .cmp-norma__document {
  --norma-escala: 1;

  background: var(--color-bg-elevated);
  color: var(--color-text-title);
  font-family: var(--font-family-ui);
  font-size: calc(16px * var(--norma-escala));
  line-height: 1.4;
  margin-inline: 0;
  max-inline-size: none;
  min-width: 0;
  padding: 0 0 var(--space-8);
}

.norma .cmp-norma__document p {
  line-height: 1.8;
  margin-block: 0 var(--space-4);
  text-align: justify;
}

.norma .cmp-norma__document h1,
.norma .cmp-norma__document h2 {
  font-size: 18px;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

/* as citacoes no corpo saem em #004BAF no Figma V4 */

/* Figma V4: o realce dentro do documento e 600, o padrao do navegador e 700 */
.norma .cmp-norma__document strong,
.norma .cmp-norma__document b {
  font-weight: 600;
}

.norma .cmp-norma__document a {
  color: #004baf;
}

/* as marcações só aparecem quando o interruptor está ligado */
.norma .cmp-norma__document mark {
  background: none;
  color: inherit;
}

.norma .cmp-norma__document[data-marcacoes] mark {
  background: none;
  padding-inline: 0;
}

.norma .cmp-norma__empty {
  color: var(--color-text-muted);
  padding-block: var(--space-16);
  text-align: center;
}

/* ---- aba Informações ---- */

/* a tabela de Atributos do Figma V4 (quadro 4475:130048): linhas de 40, o
   rotulo Open Sans 600 16/19,2 a direita numa coluna de 190, o valor 16/24 com
   24 de recheio, e so as linhas impares com fundo #FAFAFA */
.norma .cmp-norma__attributes {
  color: #212529;
  display: grid;
  gap: 0;
  margin: 0;
}

@media screen and (width >= 600px) {
  .norma .cmp-norma__attributes {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

/* V4 (4.4): coluna de 190, rotulo encostado 8 antes da faixa e no alto da
   linha, mesmo quando o valor quebra em duas */
.norma .cmp-norma__attr-label {
  align-self: start;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
}

@media screen and (width >= 600px) {
  .norma .cmp-norma__attr-label {
    text-align: end;
  }
}

.norma .cmp-norma__attr-value {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  min-block-size: 40px;
  overflow-wrap: anywhere;
  padding: var(--space-2) var(--space-6);
}

.norma .cmp-norma__attr-value p,
.norma .cmp-norma__attr-value ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.norma .cmp-norma__attr-value--mono {
  font-family: var(--font-family-mono);
}

.norma .cmp-norma__attr-value a:not(.cmp-norma__attr-link) {
  /* #007bff no Figma (4,0:1); o tom AA aceito pela Prodesp em 29/09 */
  color: var(--color-text-info-link-aa);
}

.norma .cmp-norma__attr-link {
  align-items: center;
  color: var(--color-text-link);
  display: inline-flex;
  font-family: var(--font-family-ui);
  font-size: 14px;
  font-weight: 600;
  gap: var(--space-2);
  line-height: 1.5;
  margin-block-start: var(--space-1);
  text-decoration: none;
}

.norma .cmp-norma__attr-link-icon {
  block-size: 24px;
  inline-size: 24px;
}

/* faixas alternadas, como no Figma: a primeira, a terceira... */
.norma .cmp-norma__attr-value:nth-of-type(odd) {
  background: #fafafa;
}

/* tema escuro: o 4.4 só existe claro; seguem as cores do escuro do arquivo
   (4.8): rótulo #E6E8EC, valor #FFFFFF e a faixa numa superfície escura */
:root[data-theme="dark"] .norma .cmp-norma__attributes {
  color: #fff;
}

:root[data-theme="dark"] .norma .cmp-norma__attr-label {
  color: #e6e8ec;
}

:root[data-theme="dark"] .norma .cmp-norma__attr-value:nth-of-type(odd) {
  background: var(--color-bg-info-banded);
}

:root[data-theme="dark"] .norma .cmp-norma__attr-value a:not(.cmp-norma__attr-link) {
  color: var(--color-text-link);
}

/* ---- brasão, ementa e pé do documento (seção 4 do Figma) ---- */

.norma .cmp-norma__brasao {
  block-size: auto;
  display: block;
  inline-size: 58px;
  margin: 0 auto var(--space-4);
}

/* especificidade a mais: a regra do parágrafo do documento vem antes e justifica */
.norma .cmp-norma__document .cmp-norma__ementa {
  font-style: italic;
  text-align: right;
}

/* a coluna estreita da ementa só faz sentido com largura de sobra: no celular
   ela virava uma tira de meia dúzia de palavras por linha */
@media (width >= 768px) {
  .norma .cmp-norma__document .cmp-norma__ementa {
    margin-inline-start: auto;
    max-inline-size: 62%;
  }
}

/* o pe do documento no Figma V4: filete em cima, QR de 100, texto 12/16, hash
   em fonte monoespacada 12/26 e o link de conferencia com icone. O seletor mais
   longo vence a regra ".cmp-norma__document > div", que justifica e recua todo
   div filho direto do documento. */
.norma .cmp-norma__document > .cmp-norma__doc-foot {
  align-items: center;
  border-block-start: 1px solid var(--color-stroke-doc-foot);
  display: flex;
  gap: 9px;
  margin-block: var(--space-8) 0;
  padding-block: 18px;
  text-align: start;
  text-indent: 0;
}

.norma .cmp-norma__doc-foot-qr {
  block-size: 100px;
  flex: none;
  inline-size: 100px;
}

.norma .cmp-norma__doc-foot-body {
  display: grid;
  flex: 1 1 auto;
  gap: 11px;
  min-inline-size: 0;
}

.norma .cmp-norma__document .cmp-norma__doc-foot-text,
.norma .cmp-norma__document .cmp-norma__doc-foot-hash {
  color: var(--color-text-title);
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  text-align: start;
  text-indent: 0;
}

.norma .cmp-norma__document .cmp-norma__doc-foot-hash {
  font-family: var(--font-family-mono);
  line-height: 26px;
  overflow-wrap: anywhere;
}

.norma .cmp-norma__document .cmp-norma__doc-link {
  align-items: center;
  color: var(--color-brand-action);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: var(--space-1);
  line-height: 1.5;
  text-decoration: none;
}

.norma .cmp-norma__doc-link-icon {
  block-size: 24px;
  inline-size: 24px;
}

.norma .cmp-norma__signatures {
  margin-block-start: var(--space-6);
  text-align: center;
}

.norma .cmp-norma__signatures p {
  margin-block: var(--space-2);
}

/* ---- aba Cronologia ---- */

/* o painel vazio encolhia a ponto de a lateral encostar no rodapé */
.norma .cmp-norma__tabpanel {
  min-block-size: 420px;
}

/* a Cronologia no Figma V4 (quadro 4475:130114): o cabecalho (botoes de 153x48
   e o titulo Open Sans 600 20/28 em cinza) fica solto, e o trilho e uma caixa
   #F9F9F9 de raio 16 com 146 de altura, 12 abaixo */
.norma .cmp-norma__crono {
  display: grid;
  gap: var(--space-3);
}

.norma .cmp-norma__crono-head {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.norma .cmp-norma__crono-title {
  color: var(--color-text-caption);
  font-family: var(--font-family-ui);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

/* no celular o titulo nao divide a linha com os dois botoes: fica sozinho */
@media screen and (width < 768px) {
  .norma .cmp-norma__crono-head {
    flex-wrap: wrap;
  }

  .norma .cmp-norma__crono-title {
    flex: 1 0 100%;
    order: -1;
  }

  .norma .cmp-norma__crono-nav {
    flex: 1;
    justify-content: center;
  }
}

.norma .cmp-norma__crono-nav {
  align-items: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-stroke-divider);
  border-radius: var(--radius-pill);
  color: var(--color-text-title);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-family: var(--font-family-ui);
  font-size: 16px;
  font-weight: 600;
  gap: var(--space-2);
  line-height: 1.5;
  min-block-size: 48px;
  min-inline-size: 153px;
  justify-content: center;
  padding: var(--space-2) var(--space-6);
}

.norma .cmp-norma__crono-nav-icon {
  background-color: var(--color-icon-darker);
  block-size: 32px;
  inline-size: 32px;
}

.norma .cmp-norma__crono-nav[disabled] {
  cursor: not-allowed;
  opacity: 0.4;
}

.norma .cmp-norma__crono-rail {
  align-items: center;
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  display: flex;
  gap: var(--space-3);
  min-block-size: 146px;
  padding-inline: var(--space-3);
}

.norma .cmp-norma__crono-scroll {
  flex: 1;
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* as setas das pontas: cinzas, e apagadas quando não há para onde correr */
.norma .cmp-norma__crono-seta {
  align-items: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-stroke-divider);
  border-radius: var(--radius-pill);
  block-size: 36px;

  /* Figma V4: a seta do trilho e azul, nao cinza */
  color: var(--color-text-link);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  inline-size: 36px;
  justify-content: center;
  padding: 0;
}

.norma .cmp-norma__crono-seta:disabled {
  cursor: default;
  opacity: 0.4;
}

.norma .cmp-norma__crono-list {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  min-inline-size: 100%;
  padding: 0;
  padding-block-end: var(--space-6);
}

/* com poucas versões a régua se espalha; com muitas, ela rola */
.norma .cmp-norma__crono-item {
  align-items: center;
  display: flex;
  flex: 1 0 auto;
  min-inline-size: 104px;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-start: 38px;
  position: relative;
}

/* o fio que liga um nó ao seguinte */
.norma .cmp-norma__crono-item + .cmp-norma__crono-item::before {
  background: var(--color-stroke-divider);
  block-size: 1px;
  content: "";
  inset-block-start: 60px;
  inset-inline-end: 50%;
  inline-size: 100%;
  position: absolute;
}

.norma .cmp-norma__crono-node {
  align-items: center;
  background: var(--color-stroke-divider);
  block-size: 44px;
  border: 0;
  border-radius: var(--radius-md, 8px);
  color: var(--color-text-caption);
  cursor: pointer;
  display: inline-flex;
  inline-size: 44px;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Figma V4 (4.5, 4557:349594): o marco da versão atual é #014076 */
.norma .cmp-norma__crono-item--atual .cmp-norma__crono-node {
  background: #014076;
  color: #fff;
}

.norma .cmp-norma__crono-date {
  border-block-end: 1px solid var(--color-text-caption);
  color: var(--color-icon-darker);
  font-family: var(--font-family-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.norma .cmp-norma__crono-item--atual .cmp-norma__crono-date {
  border-block-end-color: transparent;

  /* #1a73e8 no Figma (4,3:1 sobre #f9f9f9); o tom AA aceito em 29/09 */
  color: var(--color-text-action-aa);
  font-weight: 600;
  position: relative;
}

.norma .cmp-norma__crono-tip {
  background: #262828;
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  inset-block-start: 0;
  line-height: 16px;
  min-inline-size: 120px;
  padding: 9px 10px;
  position: absolute;
  text-align: center;
  white-space: nowrap;
}

/* Figma V4 (4.5): a versao escolhida tem a seta azul embaixo da data; as
   outras datas levam o filete #57595A */
.norma .cmp-norma__crono-item--atual .cmp-norma__crono-date::after {
  border-block-start: 8px solid var(--color-brand-action);
  border-inline: 8px solid transparent;
  content: "";
  inset-block-start: calc(100% + 16px);
  inset-inline-start: calc(50% - 8px);
  position: absolute;
}

/* a ponta da etiqueta "Versao atual" (34 de altura, raio 8, #262828) */
.norma .cmp-norma__crono-tip::after {
  background: #262828;
  block-size: 10px;
  content: "";
  inline-size: 10px;
  inset-block-end: -4px;
  inset-inline-start: calc(50% - 5px);
  position: absolute;
  transform: rotate(45deg);
}

/* o texto da versao escolhida, na largura toda, 32 abaixo das novidades */
.norma .cmp-norma__crono-doc {
  margin-block-start: var(--space-8);
}

.norma .cmp-norma__crono-doc .cmp-norma__toolbar {
  margin-block-end: 0;
}

/* ---- painel de novidades ---- */

.norma .cmp-norma__news {
  border: 1px solid var(--color-stroke-divider);
  border-radius: var(--radius-lg);
  margin-block-start: var(--space-8);
  padding: var(--space-4) var(--space-6);
}

.norma .cmp-norma__news-head {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  gap: var(--space-4);
  inline-size: 100%;
  padding: 0;
  text-align: start;
}

/* o pictograma do Figma: quadrado de 40 em #F0F5FF com a lampada dentro */
.norma .cmp-norma__news-pict {
  align-items: center;
  background: #f0f5ff;
  block-size: 40px;
  border-radius: var(--radius-md, 8px);
  display: inline-flex;
  flex: none;
  inline-size: 40px;
  justify-content: center;
}

.norma .cmp-norma__news-icon {
  background: var(--color-brand-action);
  block-size: 24px;
  inline-size: 24px;
}

.norma .cmp-norma__news-title {
  color: var(--color-text-caption);
  flex: 1;
  font-family: var(--font-family-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.36;
}

.norma .cmp-norma__news-chevron {
  background-color: var(--color-icon-darker);
}

/* Figma V4 (4.5): aberto, a seta aponta para cima; fechado, para baixo */
.norma .cmp-norma__news-head[aria-expanded="true"] .cmp-norma__news-chevron {
  transform: rotate(180deg);
}

.norma .cmp-norma__news-text {
  color: var(--color-text-caption);
  font-size: 14px;
  line-height: 1.5;
  margin: var(--space-2) 0 0 56px;
}

/* ---- aba Relações ---- */

.norma .cmp-norma__relacoes {
  display: grid;
  gap: var(--space-6);
}

@media screen and (width >= 900px) {
  /* grafo e lateral terminam na mesma linha: a coluna mais baixa estica, o
     grafo fica centrado na caixa e a lista de relacoes ocupa a sobra */
  .norma .cmp-norma__relacoes {
    align-items: stretch;
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr) 369px;
  }

  .norma .cmp-norma__grafo-caixa {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .norma .cmp-norma__relacoes-painel {
    grid-template-rows: auto auto 1fr;
  }
}

.norma .cmp-norma__grafo-caixa {
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  padding: var(--space-5);
}

/* o grafo e desenhado no tamanho da caixa (norma.js): nada de esticar */
.norma .cmp-norma__grafo {
  display: block;
  margin-inline: auto;
  max-inline-size: none;
}

/* contorno na cor do fundo: aresta que passa atras do rotulo nao corta a letra */
.norma .cmp-norma__no-verbo,
.norma .cmp-norma__no-rotulo {
  paint-order: stroke;
  stroke: var(--color-bg-surface);
  stroke-linejoin: round;
  stroke-width: 5px;
}

/*
 * No celular o desenho encolhido deixa o rotulo com 4px, ilegivel. Em vez de
 * espremer, a caixa passa a rolar e o grafo mantem um tamanho que se le.
 */
@media screen and (width < 768px) {
  .norma .cmp-norma__grafo-caixa {
    padding: var(--space-4);
  }
}

.norma .cmp-norma__grafo-nota {
  color: var(--color-text-caption);
  font-size: 13px;
  margin: var(--space-3) 0 0;
  text-align: center;
}

/* cada família de relação (o edgeType da API, em minúsculas) tem cor e traço
   próprios, os da "Taxinomia de relações" do Figma V4 (4.6): Modificações
   #E30613 contínuo, Hierarquia #202B3D contínuo, Regulamentação #3D83F6
   tracejado 4/4, Revogação Parcial #F59F0D tracejado 4/4; a citação do grafo
   é #3D83F6 pontilhado 2/4. A revogação total o Figma não desenha: usa o laranja
   da revogação parcial, contínuo. A mesma cor vale para a linha, a bolinha e o
   traço da legenda (decisão de 27/09 para a bolinha: no Figma só há o exemplo
   da citação). Família sem regra aqui sai na cor da citação. */
.norma :where(.cmp-norma__aresta, .cmp-norma__no, .cmp-norma__no-anel, .cmp-norma__traco) {
  --familia-cor: #3d83f6;
  --familia-traco: 2 4;
  --familia-borda: dotted;
}

.norma [class*="--novaredacao"] {
  --familia-cor: #e30613;
  --familia-traco: none;
  --familia-borda: solid;
}

.norma [class*="--revoga"] {
  --familia-cor: #f59f0d;
  --familia-traco: none;
  --familia-borda: solid;
}

.norma [class*="--revogaparcial"] {
  --familia-cor: #f59f0d;
  --familia-traco: 4 4;
  --familia-borda: dashed;
}

.norma [class*="--fundamenta"] {
  --familia-cor: #202b3d;
  --familia-traco: none;
  --familia-borda: solid;
}

.norma [class*="--regulamenta"] {
  --familia-cor: #3d83f6;
  --familia-traco: 4 4;
  --familia-borda: dashed;
}

.norma .cmp-norma__aresta {
  stroke: var(--familia-cor);
  stroke-dasharray: var(--familia-traco);
  stroke-width: 1.5;
}

.norma .cmp-norma__no {
  fill: var(--familia-cor);
}

.norma .cmp-norma__no-anel {
  fill: none;
  stroke: var(--familia-cor);
  stroke-opacity: 0.6;
  stroke-width: 2;
}

.norma .cmp-norma__grafo .cmp-norma__no--atual {
  fill: #e30613;
}

.norma .cmp-norma__no-verbo {
  fill: var(--color-text-caption);
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 700;
}

/* o Figma desenha 14 com tres nos; com oito, 12 e o que ainda se le sem
   um rotulo entrar no outro */
.norma .cmp-norma__no-rotulo {
  fill: #3d83f6;
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 700;
}

.norma .cmp-norma__no-rotulo--atual {
  fill: var(--color-text-title);
  font-size: 12px;
  font-weight: 700;
}

/* os tres cartoes da lateral no Figma V4 (quadro 4475:133518): raio 12, borda
   #D3D8DB, recheio 16, vao 12 entre eles */
.norma .cmp-norma__relacoes-painel {
  display: grid;
  gap: var(--space-3);
}

.norma .cmp-norma__cartao {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-stroke-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.norma .cmp-norma__cartao--atual {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}


.norma .cmp-norma__cartao[hidden] {
  display: none;
}

.norma .cmp-norma__relacoes-recolher {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-icon-darker);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

.norma .cmp-norma__relacoes-recolher:hover {
  background: var(--color-bg-highlight);
}

.norma .cmp-norma__relacoes-atual {
  align-items: center;
  color: var(--color-text-title);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: var(--space-3);
  line-height: 1.5;
  margin: 0;
}

.norma .cmp-norma__relacoes-ponto {
  background: #e30613;
  block-size: 8px;
  border-radius: var(--radius-pill);
  inline-size: 8px;
}

.norma .cmp-norma__relacoes-titulo {
  border-block-end: 1px solid var(--color-stroke-divider);

  /* Figma V4 (4.6): Open Sans 600 12/16, espacejamento 0,7, #111414 */
  color: var(--color-text-title);
  font-family: var(--font-family-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.7px;
  line-height: 16px;
  margin: 0 0 var(--space-3);
  padding-block-end: var(--space-3);
  text-transform: uppercase;
}

.norma .cmp-norma__taxonomia {
  align-items: center;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
}

.norma .cmp-norma__taxonomia-tipo {
  align-items: center;
  color: var(--color-text-title);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: var(--space-3);
  line-height: 1.5;
}

.norma .cmp-norma__taxonomia-conta {
  color: var(--color-text-caption);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  text-align: end;
}

/* a amostra do traço: a mesma cor e o mesmo tracejado da aresta */
.norma .cmp-norma__traco {
  border-block-start: 2px var(--familia-borda) var(--familia-cor);
  display: inline-block;
  flex: none;
  inline-size: 20px;
}

.norma .cmp-norma__vinculos {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  max-block-size: 420px;
  overflow-y: auto;
  padding: 0;
}

.norma .cmp-norma__vinculo {
  color: #1457c2;
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.norma .cmp-norma__vinculo-tipo {
  color: var(--color-text-caption);
  display: block;
  font-size: 12px;
  line-height: 18px;
}

/* ---- Sumário e Modo Foco (aba Texto) ---- */

.norma .cmp-norma__stage {
  display: grid;
  gap: var(--space-6);
}

/* o sumário só ocupa coluna quando está ligado e há espaço para ele */
.norma .cmp-norma__toc {
  display: none;
}

.norma .cmp-norma__document[data-sumario] ~ .cmp-norma__toc {
  display: block;
}

@media screen and (width >= 1100px) {
  .norma .cmp-norma__stage:has(.cmp-norma__document[data-sumario]) {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

/* o titulo do Sumario e o mesmo dos grupos da lateral (pedido do Detran nos
   Ajustes e quadro 4475:133579): 600 14/21 caixa alta, 16 acima da lista */
.norma .cmp-norma__toc-title {
  color: var(--color-text-title);
  font-family: var(--font-family-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 21px;
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
}

/* Figma V4: itens de 21 com 8 de vao (passo de 29) e recuo por nivel */
.norma .cmp-norma__toc-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.norma .cmp-norma__toc-item {
  line-height: 21px;
  padding-inline-start: var(--recuo, 0);
}

/* no Figma V4 as entradas do sumario sao links Open Sans 400 14/21 em #0058AF,
   sem filete e sem negrito, com 12 entre elas */
.norma .cmp-norma__toc-link {
  color: var(--color-text-link);
  font-size: 14px;
  line-height: 21px;
  text-decoration: none;
}

.norma .cmp-norma__toc-link:hover {
  text-decoration: underline;
}

/* a entrada do trecho que está sendo lido (o Sumário acompanha a rolagem) */
.norma .cmp-norma__toc-link[aria-current="location"] {
  font-weight: 600;
}

.norma .cmp-norma__toc-empty {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0;
}

/* a pílula do Modo Foco, que só aparece com Marcações ligado. Figma V4
   (4475:133586): botao branco de 48 com borda #D3D8DB, Open Sans 600 16/24 e o
   x de 32, encostado a direita na linha das abas */
.norma .cmp-norma__foco {
  align-items: center;
  align-self: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-stroke-divider);
  border-radius: var(--radius-pill);
  color: var(--color-text-title);
  cursor: pointer;
  display: none;
  font-family: var(--font-family-ui);
  font-size: 16px;
  font-weight: 600;
  gap: var(--space-2);
  line-height: 1.5;
  margin-inline-start: auto;
  min-block-size: 48px;
  padding: 0 var(--space-6);
}

.norma .cmp-norma__foco-icon {
  block-size: 32px;
  inline-size: 32px;
}

.norma .cmp-norma__foco--visivel {
  display: inline-flex;
}

.norma .cmp-norma__marca {
  background: none;
  color: inherit;
}

/*
 * Marcacoes, na convencao do Figma: nada de realce colorido nem de apagar o
 * texto em volta. O que aparece e a nota de publicacao ao lado do dispositivo
 * alterado, dizendo qual norma mexeu nele, junto do riscado que a propria API
 * ja traz no texto.
 */
.norma .cmp-norma__nota {
  display: none;
}

/* inline-block e de proposito: o riscado do dispositivo revogado nao atravessa
   a caixa, e a nota fica legivel como no Figma */
.norma .cmp-norma__document[data-marcacoes] .cmp-norma__nota {
  color: var(--color-text-citation);
  display: inline;
  font-size: inherit;
  font-style: italic;
  line-height: inherit;
  text-decoration: none;
  vertical-align: baseline;
}

/* recado quando a norma pedida nao existe neste acervo, e a citacao que aponta
   para fora dele — destacada, mas sem virar link que nao leva a lugar nenhum */
.norma .cmp-norma__estado {
  color: var(--color-text-caption);
  font-size: 16px;
  margin: var(--space-10) auto;
  max-inline-size: 60ch;
  text-align: center;
}

.norma .cmp-norma__estado-link {
  color: var(--color-brand-action);
}

.norma .cmp-norma__citacao {
  color: var(--color-text-caption);
  font-style: normal;
}

/* citacao a norma federal: link para o normas.leg.br, em outra aba */
.norma .cmp-norma__document a.cmp-norma__citacao-federal {
  color: var(--color-text-citation);
  text-decoration: none;
}

.norma .cmp-norma__document a.cmp-norma__citacao-federal:hover,
.norma .cmp-norma__document a.cmp-norma__citacao-federal[aria-expanded="true"] {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Dispositivo revogado: a API diz quais sao. Aparece riscado; com "Texto
   compilado" ligado some da tela, sobrando o que esta em vigor hoje. Marcações
   nao mexe nele: so mostra ou esconde as notas "[Redação dada pelo...]".
   Os dois interruptores sao independentes, como na pagina da norma do Detran
   (conferido no Decreto 68.742 em 28/09). */
.norma .cmp-norma__revogado {
  color: inherit;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.norma .cmp-norma__document[data-compilado] .cmp-norma__revogado {
  display: none;
}

/* ==== Pagina da norma conforme o Figma Prototype (V4) — lido em 20/09 ====
 *
 * Lido no painel de propriedades do quadro "4. Detalhes da norma" (node 4475-136967):
 *   documento      870 em 1280, ao lado da lateral; cresce com a janela ate a margem de 55
 *   conteiner      1280 = 55 + 270 (lateral) + 30 + 870 (documento) + 55
 *   orgao          Open Sans 600, 16/140%, centralizado
 *   epigrafe       Open Sans 700, 16/140%, centralizada
 *   ementa         435 de largura (metade de 870), 400 SEM italico, justificada
 *   corpo          Open Sans 400, 16/140%, recuo de paragrafo 90, espacejamento 0,8%,
 *                  justificado; rotulo do artigo em 600
 *   capitulo       600, 16/140%, centralizado
 *   vaos           4 entre linhas do mesmo grupo, 24 entre grupos, 32 antes do pe
 *   revogado       riscado, seguido da nota "[Revogado pelo ...]"
 * Onde o Figma nao desenha (celular, hifenizacao, fecho com cargo) vale o hml.
 */

/* a secao tem 40px proprios alem dos do involucro */
main .section.interna:has(.norma) {
  padding-block-start: var(--space-6);
  padding-inline: 0;
}

/* largura total: a lateral fica encostada a esquerda tambem em monitor largo */
main .section.interna:has(.norma) > div {
  max-inline-size: none;
  padding-inline: var(--space-4);
}

@media screen and (width >= 900px) {
  main .section.interna:has(.norma) > div {
    padding-inline: 55px;
  }

  .norma .cmp-norma__body {
    column-gap: 30px;
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .norma .cmp-norma__body--inteiro {
    grid-template-columns: minmax(0, 1fr);
  }

  .norma .cmp-norma__sidebar {
    grid-column: 1;
    inline-size: 270px;
  }

  /* barra do documento, pilula de foco e o proprio documento na mesma regua: em 1280
     da os 870 do quadro; em janela maior o documento cresce ate os 55 da direita,
     a mesma margem da esquerda (decisao de 23/09) */
  .norma #norma-painel-texto > * {
    max-inline-size: none;
  }

  .norma #norma-painel-texto > .cmp-norma__stage {
    display: grid;
    gap: 0 var(--space-12);
    grid-template-columns: minmax(0, 1fr);
  }

  /* no Modo Foco (quadro 4475:133586) a lateral sai e o documento vai a 1170 */
  .norma .cmp-norma__body--inteiro #norma-painel-texto > * {
    max-inline-size: none;
  }

  .norma .cmp-norma__body--inteiro #norma-painel-texto > .cmp-norma__stage {
    grid-template-columns: minmax(0, 1fr);
  }

  /* com o Sumario ligado (quadro 4475:133579) a coluna de 270 entra a direita,
     encostada nos 55 da margem, e o documento fica com o que sobra */
  .norma #norma-painel-texto > .cmp-norma__stage:has(.cmp-norma__document[data-sumario]) {
    column-gap: 30px;
    grid-template-columns: minmax(0, 1fr) 270px;
    max-inline-size: none;
  }
}

/* stylelint-disable no-descending-specificity -- o "> div" do involucro acima e outro elemento */
.norma .cmp-norma__document p,
.norma .cmp-norma__document > div {
  font-size: calc(16px * var(--norma-escala));
  hyphens: auto;
  letter-spacing: 0.008em;
  line-height: 1.4;
  margin-block: 0 var(--space-1);
  text-align: justify;
  text-indent: 2rem;
}
/* stylelint-enable no-descending-specificity */

@media screen and (width >= 768px) {
  .norma .cmp-norma__document p,
  .norma .cmp-norma__document > div {
    text-indent: 96px;
  }
}

/* ---- cabecalho: brasao, orgao, epigrafe, ementa ---- */

.norma .cmp-norma__document > .cmp-norma__doc-head {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--space-6);
  text-align: center;
  text-indent: 0;
}

.norma .cmp-norma__doc-head .cmp-norma__brasao {
  block-size: 72px;
  inline-size: auto;
  margin: 0;
}

.norma .cmp-norma__document .cmp-norma__orgao,
.norma .cmp-norma__document .cmp-norma__epigrafe {
  color: var(--color-text-title);
  font-family: var(--font-family-ui);
  font-size: 16px;
  font-weight: 600;
  hyphens: manual;
  letter-spacing: 0;
  line-height: 1.4;
  margin: var(--space-1) 0 0;
  text-align: center;
  text-indent: 0;
  text-transform: uppercase;
}

/* 40 entre orgao e epigrafe vem do hml; no Figma o vao desse grupo nao foi lido */
.norma .cmp-norma__document .cmp-norma__epigrafe {
  font-weight: 700;
  margin-block-start: var(--space-10);
}

.norma .cmp-norma__document .cmp-norma__doc-head .cmp-norma__ementa {
  align-self: stretch;
  font-style: normal;
  letter-spacing: 0;
  margin: var(--space-6) 0 0;
  max-inline-size: none;
  text-align: justify;
  text-indent: 0;
}

/* a ementa fica na metade direita (435 de 870 no quadro), mas nunca mais estreita
   que 435: em coluna menor ela avanca para a esquerda, ate ocupar a linha toda */
@media screen and (width >= 768px) {
  .norma .cmp-norma__document .cmp-norma__doc-head .cmp-norma__ementa {
    margin-inline-start: max(0px, min(50%, 100% - 435px));
  }
}

/* de 1280 para cima e como o Figma desenha: sempre a metade direita da coluna
   (435 de 870 no 4.1, 285 de 570 com o Sumario no 4.2, 585 de 1170 no Modo Foco
   e na Cronologia) */
@media screen and (width >= 1280px) {
  .norma .cmp-norma__document .cmp-norma__doc-head .cmp-norma__ementa {
    margin-inline-start: 50%;
  }
}

.norma .cmp-norma__document .cmp-norma__d--preambulo {
  margin-block-end: var(--space-6);
}

/* ---- divisoes: nome e titulo centralizados, 24 acima e abaixo, colados ---- */

.norma .cmp-norma__document .cmp-norma__d-nome,
.norma .cmp-norma__document .cmp-norma__d-titulo {
  color: var(--color-text-title);
  font-weight: 600;
  hyphens: manual;
  letter-spacing: 0;
  margin-block: 0;
  text-align: center;
  text-indent: 0;
}

.norma .cmp-norma__document .cmp-norma__d-nome {
  margin-block-start: var(--space-6);
}

/* o titulo da divisao vem em <strong> da API; 600, como o nome */
.norma .cmp-norma__document .cmp-norma__d-titulo strong {
  font-weight: 600;
}

.norma .cmp-norma__document .cmp-norma__d-titulo {
  margin-block-end: var(--space-6);
}

/* capitulo, titulo, livro e parte vao em caixa alta; secao e subsecao, nao (hml) */
.norma .cmp-norma__document :is(.cmp-norma__d--parte, .cmp-norma__d--livro, .cmp-norma__d--titulo, .cmp-norma__d--capitulo):is(.cmp-norma__d-nome, .cmp-norma__d-titulo) {
  text-transform: uppercase;
}

/* anexo: abre com mais folga que a divisao, para nao ler como parte do fecho;
   o titulo tambem ganha os 24 de baixo antes do primeiro dispositivo */
.norma .cmp-norma__document .cmp-norma__d--anexo.cmp-norma__d-nome {
  margin-block-start: calc(var(--space-6) * 2);
  text-transform: uppercase;
}

.norma .cmp-norma__document .cmp-norma__d--anexo.cmp-norma__d-nome:not(:has(+ .cmp-norma__d-titulo)) {
  margin-block-end: var(--space-6);
}

/* ---- fecho: nome em negrito, cargo embaixo, a esquerda (hml) ---- */

.norma .cmp-norma__fecho {
  margin-block-start: var(--space-6);
  text-align: center;
}

.norma .cmp-norma__signatario {
  display: grid;
  gap: var(--space-1);
  margin-block-start: var(--space-6);
}

.norma .cmp-norma__signatario[data-destaque] .cmp-norma__signatario-nome {
  text-transform: uppercase;
}

.norma .cmp-norma__document .cmp-norma__signatario p,
.norma .cmp-norma__document .cmp-norma__fecho > p {
  margin-block: 0;
  text-align: start;
  text-indent: 0;
}


.norma .cmp-norma__changes li[hidden] {
  display: none;
}

.norma .cmp-norma__changes-more {
  background: none;
  border: 0;
  color: var(--color-brand-action);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  margin-block-start: var(--space-2);
  padding: 0;
}

/* ==== Comportamentos da pagina da norma — hml e Detran, lidos em 22/09 ====
 *
 * Fonte das medidas:
 *   hml   hml.normas.sp.gov.br/content/detran/home/norma.html (cmp-norma-viewer):
 *         familia, corpo, pesos e caixa das letras do documento, janela Aparencia,
 *         leitor da norma citada, estilo das marcacoes, Modo Foco
 *   Detran detran.sp.gov.br/detransp/pb/regulacao/normas (pagina da norma):
 *         margens do texto, que o Figma nao desenha — recuo de 2,5 cm na
 *         primeira linha, 10 entre paragrafos, ementa a partir da metade
 */

:root {
  --color-text-citation: #0058af;
}

:root[data-theme="dark"] {
  --color-text-citation: #6ea8e8;
}

/* ---- o documento: letra do hml, margens do Detran ---- */

.norma .cmp-norma__document[data-norma-font="serif"] {
  --font-family-ui: var(--font-family-serif);
}

.norma .cmp-norma__document[data-norma-font="hyperlegible"] {
  --font-family-ui: var(--font-family-hyperlegible);
}

/* stylelint-disable no-descending-specificity -- mesma cascata do bloco "Figma V4" acima */
.norma .cmp-norma__document[data-norma-spacing="compact"] p {
  line-height: 1.25;
}

.norma .cmp-norma__document[data-norma-spacing="comfortable"] p {
  line-height: 2;
}

/* cabecalho e divisoes acompanham o tamanho escolhido */
.norma .cmp-norma__document .cmp-norma__orgao,
.norma .cmp-norma__document .cmp-norma__epigrafe,
.norma .cmp-norma__document .cmp-norma__d-nome,
.norma .cmp-norma__document .cmp-norma__d-titulo {
  font-size: calc(16px * var(--norma-escala));
  line-height: 1.4;
}

/* a norma citada: so a cor, sem sublinhado (Figma V4, 4.1); sublinha no
   foco do mouse e enquanto a caixa dela estiver aberta */
.norma .cmp-norma__document a[href]:not(.cmp-norma__doc-link) {
  color: var(--color-text-citation);
  text-decoration: none;
}

.norma .cmp-norma__document a[href]:not(.cmp-norma__doc-link):hover,
.norma .cmp-norma__document a[aria-expanded="true"] {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---- signatarios: nome e cargo centralizados, sempre no fim ---- */

.norma .cmp-norma__document .cmp-norma__signatario p,
.norma .cmp-norma__document .cmp-norma__signatures p {
  text-align: center;
  text-indent: 0;
}

/* V4: local e data alinhados a direita; a nota de publicacao segue o texto */
.norma .cmp-norma__document .cmp-norma__fecho > p {
  text-align: justify;
}

.norma .cmp-norma__document .cmp-norma__fecho > .cmp-norma__fecho-local {
  text-align: end;
  text-indent: 0;
}
/* stylelint-enable no-descending-specificity */

/* ---- Sumario preso a direita enquanto o texto rola (Detran e hml) ---- */

@media screen and (width >= 900px) {
  .norma .cmp-norma__document[data-sumario] ~ .cmp-norma__toc {
    align-self: start;
    inset-block-start: var(--norma-topo);
    max-block-size: calc(100vh - var(--norma-topo) - 16px);
    overflow-y: auto;
    padding: 0;
    position: sticky;
  }
}

/* Abaixo de 1280 nao ha largura para as tres colunas: o quadro 4.2 so existe em
   1280, onde o texto fica com 570. Em janela menor a coluna do texto nao encolhe;
   o Sumario abre por cima, preso a direita, e fecha pela chave da lateral */
@media screen and (width >= 900px) and (width < 1280px) {
  .norma #norma-painel-texto > .cmp-norma__stage:has(.cmp-norma__document[data-sumario]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .norma .cmp-norma__document[data-sumario] ~ .cmp-norma__toc {
    background-color: var(--color-bg-elevated);
    box-shadow: var(--shadow-elevation-3);
    box-sizing: border-box;
    inline-size: 320px;
    inset-block: var(--norma-topo) 0;
    inset-inline-end: 0;
    max-block-size: none;
    padding: var(--space-4) var(--space-6);
    position: fixed;
    z-index: 40;
  }
}

/* Figma V4 (4.2): com o Sumario aberto a barra (selo e os tres icones) fica so
   sobre a coluna do texto, e o titulo SUMARIO sobe para a mesma linha dela */
@media screen and (width >= 1280px) {
  .norma #norma-painel-texto:has(.cmp-norma__document[data-sumario]) > .cmp-norma__toolbar {
    margin-inline-end: 300px;
  }

  .norma .cmp-norma__document[data-sumario] ~ .cmp-norma__toc {
    margin-block-start: -24px;
  }
}

/* entre 900 e 1279 o Sumario abre por cima, preso a direita: os icones da barra
   recuam para fora dele, senao ficam cobertos e nao recebem o clique */
@media screen and (width >= 900px) and (width < 1280px) {
  .norma #norma-painel-texto:has(.cmp-norma__document[data-sumario]) > .cmp-norma__toolbar {
    margin-inline-end: calc(320px - 55px);
    padding-inline-end: var(--space-4);
  }
}

/* ---- Modo Foco: o icone de expandir da barra (hml) ---- */

.norma[data-foco] .cmp-norma__document ~ .cmp-norma__toc {
  display: none;
}

@media screen and (width >= 900px) {
  .norma[data-foco] #norma-painel-texto > .cmp-norma__stage,
  .norma[data-foco] #norma-painel-texto > .cmp-norma__stage:has(.cmp-norma__document[data-sumario]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.norma .cmp-norma__tool[aria-pressed="true"] {
  color: var(--color-brand-base);
}

/* no Modo Foco o botao so troca o icone (minimizar), sem ficar azul */
.norma .cmp-norma__tool--cheia[aria-pressed="true"] {
  color: inherit;
}

/* ---- janela Aparencia (cmp-norma-viewer__themes-menu do hml) ---- */

.norma .cmp-norma-viewer__themes-menu {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevation-3);
  color: var(--color-text-title);
  inline-size: 338px;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  max-inline-size: calc(100vw - 2rem);
  overflow: hidden;
  position: absolute;
  z-index: var(--z-overlay);
}

.norma .cmp-norma-viewer__themes-menu[hidden] {
  display: none;
}

.norma .cmp-norma-viewer__themes-menu-header {
  align-items: center;
  block-size: 56px;
  border-block-end: 1px solid var(--color-stroke-divider);
  display: flex;
  justify-content: space-between;
  padding-inline: var(--space-4);
}

.norma .cmp-norma-viewer__themes-menu-title {
  color: var(--color-text-title);
  font-family: var(--font-family-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
  text-transform: none;
}

.norma .cmp-norma-viewer__themes-menu-close {
  align-items: center;
  background: none;
  block-size: 20px;
  border: 0;
  color: var(--color-text-title);
  cursor: pointer;
  display: inline-flex;
  inline-size: 20px;
  justify-content: center;
  padding: 0;
  transition: color var(--motion-fast) var(--ease-standard);
}

.norma .cmp-norma-viewer__themes-menu-close:hover {
  color: var(--color-text-caption);
}

.norma .cmp-norma-viewer__themes-menu-close-glyph::before {
  content: "\2715";
  font-size: 16px;
  line-height: 1;
}

.norma .cmp-norma-viewer__themes-menu-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.norma .cmp-norma-viewer__themes-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.norma .cmp-norma-viewer__themes-group-label {
  color: #57595a;
  font-family: var(--font-family-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}

.norma .cmp-norma-viewer__themes-size {
  border-radius: var(--radius-pill);
  display: flex;
  overflow: hidden;
}

.norma .cmp-norma-viewer__themes-size-btn {
  align-items: center;

  /* o mesmo cinza do controle da Acessibilidade, igual em todos os temas */
  background: var(--color-bg-size-control);
  block-size: 40px;
  border: 0;
  color: var(--color-text-size-control);
  cursor: pointer;
  display: flex;
  flex: 1;
  font-family: var(--font-family-ui);
  font-weight: 600;
  justify-content: center;
  transition: background-color var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
}

.norma .cmp-norma-viewer__themes-size-btn--decrease {
  font-size: 14px;
  line-height: 23px;
}

.norma .cmp-norma-viewer__themes-size-btn--increase {
  border-inline-start: 1px solid var(--color-bg-elevated);
  font-size: 20px;
  line-height: 28px;
}

.norma .cmp-norma-viewer__themes-size-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.norma .cmp-norma-viewer__themes-size-btn:hover:not(:disabled) {
  background: var(--color-bg-size-control-hover);
}

.norma .cmp-norma-viewer__themes-size-dots {
  /* Figma 4.9: os nove pontos se espalham entre 55 de cada lado */
  display: flex;
  gap: var(--space-1);
  justify-content: space-between;
  padding-inline: 55px;
}

.norma .cmp-norma-viewer__themes-size-dot {
  background: var(--color-stroke-divider);
  block-size: 6px;
  border-radius: var(--radius-pill);
  inline-size: 6px;
}

.norma .cmp-norma-viewer__themes-size-dot--on {
  background: var(--color-brand-base);
}

.norma .cmp-norma-viewer__themes-size-value {
  block-size: 1px;
  border: 0;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.norma .cmp-norma-viewer__themes-cards {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, 1fr);
}

.norma .cmp-norma-viewer__themes-card {
  align-items: center;
  background: var(--color-bg-elevated);
  block-size: 64px;
  border: 1px solid var(--color-stroke-divider);
  border-radius: var(--radius-lg);
  color: var(--color-text-paragraph);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 6px;
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.norma .cmp-norma-viewer__themes-card[aria-pressed="true"] {
  /* Figma 4.9: 1,5 por dentro */
  border-color: var(--color-brand-base);
  box-shadow: inset 0 0 0 0.5px var(--color-brand-base);
}

.norma .cmp-norma-viewer__themes-card-swatch {
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 24px;
}

.norma .cmp-norma-viewer__themes-card-swatch--sans {
  font-family: var(--font-family-ui);
}

.norma .cmp-norma-viewer__themes-card-swatch--serif {
  font-family: var(--font-family-serif);
  font-weight: 700;
}

.norma .cmp-norma-viewer__themes-card-swatch--hyperlegible {
  font-family: var(--font-family-hyperlegible);
  font-weight: 700;
}

/* stylelint-disable-next-line no-descending-specificity -- outro elemento */
.norma .cmp-norma-viewer__themes-card-swatch--icon .cmp-icon {
  block-size: var(--icon-size-md);
  inline-size: var(--icon-size-md);
}

.norma .cmp-norma-viewer__themes-card-label {
  font-family: var(--font-family-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
}

.norma .cmp-norma-viewer__themes-card[data-theme="original"] {
  background: #fff;
  color: #141414;
}

.norma .cmp-norma-viewer__themes-card[data-theme="paper"] {
  background: #fdfbf4;
  color: #262828;
}

.norma .cmp-norma-viewer__themes-card[data-theme="dark"] {
  background: #262828;
  border-color: #262828;
  color: #c8c8c8;
}

.norma .cmp-norma-viewer__themes-card[data-theme="dark"][aria-pressed="true"] {
  border-color: var(--color-brand-base);
}

.norma .cmp-norma-viewer__themes-card[data-font="serif"] .cmp-norma-viewer__themes-card-label {
  font-family: var(--font-family-serif);
}

.norma .cmp-norma-viewer__themes-card[data-font="hyperlegible"] .cmp-norma-viewer__themes-card-label {
  font-family: var(--font-family-hyperlegible);
}

.norma .cmp-norma-viewer__themes-menu-footer {
  align-items: center;
  block-size: 48px;
  border-block-start: 1px solid var(--color-stroke-divider);
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
}

.norma .cmp-norma-viewer__themes-reset-all {
  background: none;
  border: 0;
  color: var(--color-brand-base);
  cursor: pointer;
  font-family: var(--font-family-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  padding: 0;
}

.norma :is(.cmp-norma-viewer__themes-menu-close, .cmp-norma-viewer__themes-size-btn, .cmp-norma-viewer__themes-card, .cmp-norma-viewer__themes-reset-all):focus-visible {
  box-shadow: var(--shadow-focus-ring);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- leitor da norma citada (cmp-norma-viewer__chain-reader do hml) ---- */

@keyframes cmp-norma-viewer-chain-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.norma .cmp-norma-viewer__chain-reader {
  animation: cmp-norma-viewer-chain-fade var(--motion-base) var(--ease-standard);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-stroke-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-light);
  display: flex;
  flex-direction: column;
  margin-block: var(--space-2);

  /* como no Detran: uma janela de altura fixa no meio do texto, que rola por dentro */
  block-size: min(460px, 70vh);
  overflow: hidden;
  text-indent: 0;
}

.norma .cmp-norma-viewer__chain-reader-header {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
}

.norma .cmp-norma-viewer__chain-reader-trail {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-inline-size: 0;
}

.norma .cmp-norma-viewer__chain-reader-trail-list {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.norma .cmp-norma-viewer__chain-reader-trail-list li {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
}

.norma .cmp-norma-viewer__chain-reader-trail-list li + li::before {
  background-color: var(--color-icon-darker);
  block-size: 12px;
  content: "";
  flex-shrink: 0;
  inline-size: 12px;
  mask: url("../../icons/chevron-right.svg") center / contain no-repeat;
}

.norma .cmp-norma-viewer__chain-reader-trail-item {
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--color-text-title);
  cursor: pointer;
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
  padding: 0;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
  white-space: nowrap;
}

.norma .cmp-norma-viewer__chain-reader-trail-item:hover {
  color: var(--color-brand-action);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.norma .cmp-norma-viewer__chain-reader-trail-item[aria-current="true"] {
  color: var(--color-text-caption-disabled);
  cursor: default;
  text-decoration: none;
}

.norma .cmp-norma-viewer__chain-reader-trail-ellipsis {
  color: var(--color-icon-darker);
}

.norma .cmp-norma-viewer__chain-reader-close {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  padding: var(--space-1);
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.norma .cmp-norma-viewer__chain-reader-close:hover {
  background: var(--color-bg-highlight);
}

.norma .cmp-norma-viewer__chain-reader-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

/* "Abrir norma": link de texto azul com o ícone de abrir, ao lado do X */
.norma .cmp-norma-viewer__chain-reader-open {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-brand-action);
  display: inline-flex;
  font-family: var(--font-family-ui);
  font-size: 14px;
  font-weight: 600;
  gap: var(--space-1);
  line-height: 1.5;
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  white-space: nowrap;
}

.norma .cmp-norma-viewer__chain-reader-open:hover {
  background: var(--color-bg-highlight);
  text-decoration: underline;
}

.norma .cmp-norma-viewer__chain-reader-open-icon {
  block-size: 18px;
  inline-size: 18px;
}

.norma :is(.cmp-norma-viewer__chain-reader-close, .cmp-norma-viewer__chain-reader-open, .cmp-norma-viewer__chain-reader-trail-item, .cmp-norma-viewer__chain-reader-retry):focus-visible {
  box-shadow: var(--shadow-focus-ring);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* o que vem depois da citacao, abaixo da caixa: continua a frase, sem recuo */
.norma .cmp-norma__document .cmp-norma-viewer__continua {
  margin-block-start: 0;
  text-indent: 0;
}

/* o artigo citado, onde a caixa abre: um realce que some */
@keyframes cmp-norma-viewer-alvo {
  from { background-color: var(--color-bg-highlight-blue); }
  to { background-color: transparent; }
}

.norma .cmp-norma-viewer__alvo {
  animation: cmp-norma-viewer-alvo 2.4s ease-out;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .norma .cmp-norma-viewer__alvo {
    animation: none;
    background-color: var(--color-bg-highlight-blue);
  }
}

.norma .cmp-norma-viewer__chain-reader-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4);
  position: relative;
}

.norma .cmp-norma-viewer__chain-reader-content > .cmp-norma__document {
  padding-block-end: 0;
}

.norma .cmp-norma-viewer__chain-reader-notice {
  margin: 0;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.norma .cmp-norma-viewer__chain-reader-notice-text {
  margin: 0 0 var(--space-4);
  text-align: center;
  text-indent: 0;
}

.norma .cmp-norma-viewer__chain-reader-retry {
  background: none;
  border: 1px solid var(--color-text-link);
  border-radius: var(--radius-sm);
  color: var(--color-text-link);
  cursor: pointer;
  font: inherit;
  padding: var(--space-2) var(--space-4);
}

.norma .cmp-norma-viewer__chain-reader-retry:hover {
  background: var(--color-text-link);
  color: var(--color-bg-elevated);
}

.norma .cmp-norma-viewer__chain-reader-announce {
  block-size: 1px;
  border: 0;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .norma .cmp-norma-viewer__chain-reader {
    animation: none;
  }

  .norma :is(.cmp-norma-viewer__themes-menu-close, .cmp-norma-viewer__themes-size-btn, .cmp-norma-viewer__themes-card, .cmp-norma-viewer__chain-reader-close, .cmp-norma-viewer__chain-reader-trail-item) {
    transition: none;
  }
}

/* as cores fixas da janela (V4, tema claro) cedem aos tokens nos temas Papel e Escuro */
:root:is([data-theme="paper"], [data-theme="dark"]) .norma .cmp-norma-viewer__themes-group-label {
  color: var(--color-text-caption);
}

/* a ordem de execucao do preambulo ("DECRETA:") em 600 e caixa alta (V4, 4.1) */
.norma .cmp-norma__ordem {
  font-weight: 600;
  text-transform: uppercase;
}

/* amostras de fonte da Aparencia em preto no tema claro (V4, 4.9) */
:root:not([data-theme="paper"], [data-theme="dark"]) .norma :is(.cmp-norma-viewer__themes-card-swatch--sans, .cmp-norma-viewer__themes-card-swatch--serif, .cmp-norma-viewer__themes-card-swatch--hyperlegible) {
  color: #000;
}

/* Tabela de anexo: vem da API a parte do texto (campo "tabela"). Larga demais
   para a coluna, rola dentro da propria caixa; o documento e item de grade e,
   sem min-width 0 (na regra do documento, no alto do arquivo), esticaria ate
   a largura da tabela. */
.norma .cmp-norma__tabela {
  margin-block: var(--space-4);
  max-width: 100%;
  overflow-x: auto;
}

.norma .cmp-norma__tabela table {
  border-collapse: collapse;
  font-size: 0.875em;
  width: 100%;
}

.norma .cmp-norma__tabela caption {
  caption-side: top;
  color: var(--color-text-title);
  font-weight: 600;
  padding-block-end: var(--space-2);
  text-align: start;
}

.norma .cmp-norma__tabela th,
.norma .cmp-norma__tabela td {
  border: 1px solid var(--color-stroke-divider);
  padding: var(--space-2) var(--space-3);
  text-align: start;
  vertical-align: top;
}

.norma .cmp-norma__tabela th {
  background: var(--color-bg-elevated);
  color: var(--color-text-title);
  font-weight: 600;
}

.norma .cmp-norma__tabela-legenda {
  color: var(--color-text-caption);
  font-size: 0.875em;
  margin-block-start: var(--space-2);
}

.norma .cmp-norma__document[data-compilado] .cmp-norma__tabela.cmp-norma__revogado {
  display: none;
}

/* ---- norma longa: os controles ficam à mão enquanto o texto rola ----
 *
 * Pedido do Matheus (29/09): numa norma grande a lateral (Exibição, Alterações,
 * Autenticidade) e os ícones da barra do documento (tamanho do texto, baixar,
 * foco) sumiam para cima. No computador os três ficam presos enquanto só o
 * texto rola: a lateral à esquerda (com rolagem própria se passar da altura da
 * janela), a barra no topo da coluna do texto e o Sumário à direita, que segue
 * marcando a seção em leitura. O topo acompanha o cabeçalho: quando ele some ao
 * descer, tudo sobe junto, sem deixar faixa vazia.
 */
.norma {
  --norma-topo: var(--header-height, 80px);
}

body:has(.cmp-header[data-scroll-hidden]) .norma {
  --norma-topo: 0px;
}

@media screen and (width >= 900px) {
  .norma .cmp-norma__sidebar {
    align-self: start;
    inset-block-start: calc(var(--norma-topo) + var(--space-6));
    max-block-size: calc(100vh - var(--norma-topo) - var(--space-12));
    overflow-y: auto;
    overscroll-behavior: contain;
    position: sticky;
    scrollbar-width: thin;
  }

  .norma #norma-painel-texto > .cmp-norma__toolbar {
    background: var(--color-bg-base);
    inset-block-start: var(--norma-topo);

    /* o respiro do fundo entra sem mover a barra nem o documento */
    margin-block: calc(var(--space-3) * -1);
    padding-block: var(--space-3);
    position: sticky;
    z-index: var(--z-raised);
  }

  .norma .cmp-norma__sidebar,
  .norma #norma-painel-texto > .cmp-norma__toolbar,
  .norma .cmp-norma__document[data-sumario] ~ .cmp-norma__toc {
    transition: inset-block-start var(--motion-fast) var(--ease-standard);
  }
}

@media screen and (width >= 900px) and (prefers-reduced-motion: reduce) {
  .norma .cmp-norma__sidebar,
  .norma #norma-painel-texto > .cmp-norma__toolbar,
  .norma .cmp-norma__document[data-sumario] ~ .cmp-norma__toc {
    transition: none;
  }
}