/* ============================================================
   MOC ON-LINE - Folha de estilo
   Padrão visual alinhado ao XSLT da Consulta NF-e ABI
   Cores institucionais brasileiras em tons suaves
   ------------------------------------------------------------
   IMPORTANTE: todas as classes originais do MOC foram mantidas.
   Nenhuma alteração de conteúdo foi necessária.
   ============================================================ */

:root {
  --azul: #17497e;
  --azul-medio: #2f6fae;
  --azul-claro: #eaf2fa;
  --verde: #1c7c4a;
  --verde-medio: #3fa86b;
  --verde-claro: #eaf6ef;
  --amarelo: #f0c14b;
  --amarelo-claro: #fdf7e4;

  --fundo: #f5f9f7;
  --card: #ffffff;
  --texto: #22303c;
  --texto-suave: #64768a;
  --linha: #dde8e2;
  --linha-forte: #c6d8ce;

  --sombra: 0 14px 32px rgba(23, 73, 126, .10);
  --sombra-sm: 0 6px 16px rgba(23, 73, 126, .07);
  --sombra-nav: 0 4px 16px rgba(23, 73, 126, .18);

  --raio: 18px;
  --raio-sm: 12px;

  --fonte: "Inter", "Segoe UI", Roboto, Calibri, Arial, Helvetica, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, Monaco, monospace;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--texto);
  background:
    radial-gradient(circle at 92% 4%, rgba(240, 193, 75, .16), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, var(--fundo) 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   1. CABECALHO
   ============================================================ */

.cabecalho {
  padding: 0;
}

.topo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: auto;
  min-height: 96px;
  padding: 16px 26px;
  line-height: normal;
  overflow: hidden;
  z-index: 1;
  background: linear-gradient(120deg, #ffffff 0%, var(--azul-claro) 58%, var(--verde-claro) 100%);
  border-bottom: 1px solid var(--linha);
}

.topo:after {
  content: "";
  position: absolute;
  right: -140px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 193, 75, .34) 0%, rgba(63, 168, 107, .16) 46%, transparent 70%);
  pointer-events: none;
}

.titulo {
  position: static;
  float: none;
  width: auto;
  height: auto;
  z-index: 1;
  line-height: 1.35;
  font-family: var(--fonte);
  font-weight: 700;
  color: var(--azul);
}

.titulo p {
  margin: 0 0 2px 0;
  line-height: 1.35;
}

.titulo p:first-child span span {
  font-size: 21px !important;
  letter-spacing: -.01em;
  color: var(--azul);
}

.titulo p:nth-child(2) {
  font-size: 15px;
  font-weight: 600;
  color: var(--verde);
}

.titulo p:nth-child(3) {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  margin-top: 6px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--linha);
}

.imagens_cabecalho {
  position: static;
  width: auto;
  height: 56px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  z-index: 1;
}

.imagens_cabecalho img {
  height: 100% !important;
  width: auto !important;
  float: none !important;
  display: block;
}

/* ============================================================
   2. BARRA DE NAVEGACAO
   ============================================================ */

.linha_superior {
  padding: 0;
  border-bottom: 0;
  font-family: var(--fonte);
  letter-spacing: normal;
}

.linha_superior a {
  text-decoration: none !important;
  border-bottom: none;
  transition: all .18s ease;
}

.linha_superior a:hover {
  border-bottom: none;
}

.sombra {
  box-shadow: var(--sombra-nav) !important;
}

.barra_nav {
  position: relative;
  z-index: 20;
  width: 100%;
  padding: 0;
  font-size: 14px;
  letter-spacing: .01em;
  background: linear-gradient(120deg, var(--azul) 0%, #1c5f95 52%, var(--verde) 100%);
  border-bottom: 3px solid var(--amarelo);
}

.barra_nav > div {
  overflow: visible !important;
}

.barra_nav a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  padding: 15px 14px 14px 14px !important;
  border-bottom: none;
  display: inline-block;
  white-space: nowrap;
}

.barra_nav a:hover {
  height: inherit;
  background-color: rgba(255, 255, 255, .16);
  color: #ffffff;
}

.barra_nav a.active {
  height: inherit;
  background-color: rgba(255, 255, 255, .95);
  color: var(--azul);
}

.barra_nav a:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: -3px;
}

.barra_nav a.nav_portal {
  color: var(--azul);
  background: linear-gradient(135deg, #ffffff, #f2f8f5);
  font-weight: 800;
  margin: 7px 10px 7px 6px;
  padding: 7px 16px !important;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

.barra_nav a.nav_portal:hover {
  background: #ffffff;
  color: var(--verde);
  transform: translateY(-1px);
}

#botao_menu {
  font-size: 17px;
}

/* --- Menus suspensos ---
   O <div> interno da barra tem overflow-x:auto (estilo inline do HTML
   original). Por isso o .dropdown NÃO pode ser posicionado: o menu
   precisa se ancorar na .barra_nav (position:relative) para escapar
   do recorte desse contêiner de rolagem. */

.dropdown {
  height: inherit;
  display: inline-block;
  position: static;
}

.dropdown-content {
  top: 100%;
  display: none;
  position: absolute;
  min-width: 330px;
  max-width: min(420px, 96vw);
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid var(--linha);
  border-radius: 0 0 var(--raio-sm) var(--raio-sm);
  box-shadow: var(--sombra);
  z-index: 30;
}

.dropdown-content a {
  float: none;
  color: var(--texto) !important;
  padding: 9px 12px !important;
  margin: 1px 0;
  border-radius: 9px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  white-space: normal;
}

.dropdown-content a:hover {
  background-color: var(--verde-claro);
  color: var(--verde) !important;
}

.dropdown-content a:focus-visible {
  outline: 2px solid var(--verde-medio);
  outline-offset: -2px;
}

/* Itens de segundo nível (Recepção de Eventos) */
.dropdown-content a.subitem {
  margin-left: 14px;
  padding-left: 14px !important;
  border-left: 2px solid var(--linha);
  font-size: 13px;
  color: var(--texto-suave) !important;
}

.dropdown-content a.subitem:hover {
  border-left-color: var(--verde-medio);
  color: var(--verde) !important;
}

/* Rótulo de grupo, sem destino próprio */
.dropdown-content a.grupo {
  font-weight: 700;
  color: var(--azul) !important;
  cursor: default;
  margin-top: 6px;
}

.dropdown-content a.grupo:hover {
  background-color: transparent;
  color: var(--azul) !important;
}

/* Abre por mouse, por teclado e por clique/toque */
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content,
.dropdown.aberto .dropdown-content {
  display: block;
}

.dropdown.aberto > a {
  background-color: rgba(255, 255, 255, .16);
}

/* Seta indicando que o item abre um submenu */
.dropdown.tem_submenu > a:after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* --- Colapso responsivo do menu (comportamento original) --- */

.show_leiaute,
.show_regras_validacao,
.show_contingencia,
.show_danfe,
.show_anexo {
  display: none;
}

.hide_leiaute,
.hide_danfe,
.hide_regras_validacao,
.hide_contingencia {
  display: block;
}

@media (max-width:610px) {
  .imagens_cabecalho {
    display: none;
  }

  .titulo {
    width: 100%;
    text-align: center;
  }
}

@media (max-width:626px) {
  .show_leiaute {
    display: block;
  }

  .hide_leiaute {
    display: none !important;
  }
}

@media (max-width:840px) {
  .show_regras_validacao {
    display: block;
  }

  .hide_regras_validacao {
    display: none !important;
  }
}

@media (max-width:941px) {
  .show_danfe {
    display: block;
  }

  .hide_danfe {
    display: none !important;
  }
}

@media (max-width:987px) {
  .show_contingencia {
    display: block;
  }

  .hide_contingencia {
    display: none !important;
  }

  .show_anexo {
    display: block !important;
  }
}

/* ============================================================
   3. MENU LATERAL (INDICE)
   ============================================================ */

#menu_esq {
  width: 320px;
  z-index: 9;
}

#menu_esq ul {
  padding-left: 10px;
}

#menu_esq h2 {
  font-size: 19px;
  padding-left: 16px;
  margin: -4px 0 4px 0;
}

#indice {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 112px;
  padding-bottom: 0;
  height: 100%;
  width: 320px;
  background-color: transparent;
}

#indice_texto {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding: 18px 12px 90px 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--verde-claro) 100%);
  border-right: 1px solid var(--linha);
  font-family: var(--fonte);
  scrollbar-width: thin;
  scrollbar-color: var(--linha-forte) transparent;
}

#indice_texto::-webkit-scrollbar {
  width: 8px;
}

#indice_texto::-webkit-scrollbar-thumb {
  background: var(--linha-forte);
  border-radius: 8px;
}

/* O índice original usa <br> entre os itens; a lista agora usa espaçamento próprio */
#indice_texto > br,
#indice_texto a br {
  display: none;
}

#indice_texto h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--azul);
  margin: 0 0 4px 0;
  padding: 12px 10px;
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--linha);
  line-height: 1.3;
}

#menu_esq a {
  display: block;
  text-decoration: none;
  color: var(--texto);
  padding: 8px 12px;
  margin: 2px 0;
  border-radius: 10px;
  border-left: 3px solid transparent;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 500;
  transition: all .15s ease;
}

#menu_esq a:hover {
  background-color: #ffffff;
  border-left-color: var(--verde-medio);
  color: var(--verde);
}

#menu_esq a.active {
  background-color: var(--verde);
  border-left-color: var(--amarelo);
  color: #ffffff;
}

#myInput {
  width: 100%;
  font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  margin-bottom: 12px;
  background: #ffffff;
  color: var(--texto);
  font-family: var(--fonte);
}

#myInput:focus {
  outline: none;
  border-color: var(--verde-medio);
  box-shadow: 0 0 0 3px rgba(63, 168, 107, .18);
}

.sticky_leftmenu {
  padding-top: 44px;
}

/* Desloca o conteudo quando o indice lateral esta aberto */
body.menu_aberto .corpo {
  margin-left: 320px;
}

@media (max-width:900px) {
  body.menu_aberto .corpo {
    margin-left: 0;
  }

  #indice_texto {
    box-shadow: var(--sombra);
  }
}

/* ============================================================
   4. AREA DE CONTEUDO
   ============================================================ */

.corpo {
  overflow-x: auto;
  padding: 22px 22px 60px 22px;
  transition: margin-left .2s ease;
}

#principal {
  max-width: 1560px;
  margin: 0 auto;
  padding: 30px 34px 40px 34px;
  background-color: var(--card);
  border: 1px solid var(--linha);
  border-radius: 24px;
  box-shadow: var(--sombra);
}

#principal h1 {
  text-align: center;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.2;
  color: var(--azul);
  margin: 4px 0 26px 0;
  padding-bottom: 18px;
  position: relative;
  letter-spacing: -.015em;
}

#principal h1:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 180px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--amarelo) 50%, var(--azul) 100%);
}

#principal h2 {
  font-size: 23px;
  font-weight: 800;
  color: var(--azul);
  margin: 34px 0 12px 0;
  padding: 10px 0 10px 16px;
  border-left: 5px solid var(--verde-medio);
  background: linear-gradient(90deg, var(--verde-claro), rgba(255, 255, 255, 0) 70%);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  scroll-margin-top: 110px;
}

#principal h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--verde);
  margin: 26px 0 10px 0;
  scroll-margin-top: 110px;
}

#principal h4 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--azul-medio);
  margin: 20px 0 8px 0;
  scroll-margin-top: 110px;
}

#principal p {
  font-size: 15px;
  line-height: 1.62;
  margin: 0 0 12px 0;
}

#principal a {
  color: var(--azul-medio);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 111, 174, .35);
  transition: all .15s ease;
}

#principal a:hover {
  color: var(--verde);
  border-bottom-color: var(--verde);
}

.subtitulo {
  font-size: 12px;
  color: var(--texto-suave);
}

.texto_normal {
  font-size: 15px;
  font-family: var(--fonte);
  text-indent: 0;
  line-height: 1.62;
}

.negrito {
  font-weight: 700;
  display: inline;
  color: var(--azul);
}

.texto_negrito {
  font-weight: 700;
}

.recuo {
  margin-left: 20px;
  display: inline-block;
}

/* Elementos customizados do MOC */

titulo,
titulo_tabela,
comentario_titulo,
subtitulo_pagina,
comentario {
  display: block;
  font-family: var(--fonte);
}

titulo_tabela {
  text-align: left;
  padding: 10px 0 10px 16px;
  margin: 30px 0 6px 0;
  font-weight: 800;
  font-size: 19px;
  color: var(--azul);
  border-left: 5px solid var(--amarelo);
  background: linear-gradient(90deg, var(--amarelo-claro), rgba(255, 255, 255, 0) 70%);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  scroll-margin-top: 110px;
}

comentario_titulo,
subtitulo_pagina {
  text-align: left;
  padding-left: 4px;
  margin: 20px 0 6px 0;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--verde);
  scroll-margin-top: 110px;
}

comentario {
  text-align: left;
  font-weight: 700;
  padding-left: 4px;
  color: var(--texto-suave);
}

/* Listas */

ul.lista {
  list-style-type: circle;
  padding-left: 2.6em;
}

ul li,
ol li {
  text-indent: 0;
  font-size: 15px;
  font-family: var(--fonte);
  line-height: 1.6;
  margin-bottom: 4px;
}

ol.a {
  list-style-type: upper-roman;
  padding-left: 2.6em;
}

ol.b {
  list-style-type: lower-alpha;
  font-weight: 700;
}

ol.b li span {
  font-weight: 400;
}

ul.disco {
  list-style-type: disc;
}

ul.circulo {
  list-style-type: circle;
}

/* Imagens e figuras */

.imagem_central {
  display: block;
  margin: 18px auto;
  max-width: 100%;
  height: auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
}

#principal img {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 20px auto;
  text-align: center;
}

figcaption {
  font-size: 13px;
  color: var(--texto-suave);
  margin-top: 8px;
  font-weight: 600;
}

/* ============================================================
   5. TABELAS
   ============================================================ */

table {
  border-collapse: collapse;
  margin: 14px 0 22px 0;
  font-family: var(--fonte);
  background: #ffffff;
}

table td,
table th {
  border: 1px solid var(--linha);
  padding: 9px 11px;
  font-size: 13.5px;
  line-height: 1.5;
  vertical-align: top;
}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--azul) 0%, #1f6a9e 55%, var(--verde) 100%);
  border-color: rgba(255, 255, 255, .22);
}

table tr:first-child th:first-child {
  border-top-left-radius: var(--raio-sm);
}

table tr:first-child th:last-child {
  border-top-right-radius: var(--raio-sm);
}

table tr:nth-child(even) {
  background-color: #fafcfb;
}

table tr:hover td {
  background-color: rgba(63, 168, 107, .09);
}

.leiaute_nfe,
.leiaute_web_services,
.regras_validacao_nfe,
.regras_validacao_gerais {
  font-family: var(--fonte);
  border-collapse: collapse;
  width: 100%;
}

.leiaute_nfe td,
.leiaute_nfe th,
.leiaute_web_services td,
.leiaute_web_services th,
.regras_validacao_nfe td,
.regras_validacao_nfe th,
.regras_validacao_gerais td,
.regras_validacao_gerais th {
  border: 1px solid var(--linha);
  padding: 9px 11px;
}

.leiaute_nfe th,
.leiaute_web_services th,
.regras_validacao_nfe th,
.regras_validacao_gerais th,
.tabela_gtin th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--azul) 0%, #1f6a9e 55%, var(--verde) 100%);
  border-color: rgba(255, 255, 255, .22);
}

.leiaute_nfe tr:hover,
.regras_validacao_nfe tr:hover,
.leiaute_web_services tr:hover,
.regras_validacao_gerais tr:hover,
.tabela_gtin tr:hover {
  background-color: transparent;
}

/* Linhas especiais */

tr.linha_grupo,
.linha_grupo {
  background: linear-gradient(90deg, rgba(28, 124, 74, .14) 0%, rgba(240, 193, 75, .16) 100%);
  font-weight: 700;
  color: var(--azul);
}

tr.linha_grupo_revogada,
.linha_grupo_revogada {
  background: linear-gradient(90deg, rgba(28, 124, 74, .10) 0%, rgba(240, 193, 75, .10) 100%);
  font-weight: 700;
  text-decoration: line-through;
  color: var(--texto-suave);
}

tr.linha_revogada,
.linha_revogada {
  text-decoration: line-through;
  color: var(--texto-suave);
  background-color: #fbfbfb;
}

.linha_revogada div {
  display: inline-block;
  text-decoration: none;
}

/* Tabelas com cabecalho secundario (tom claro) */

.tabela_assinatura,
.tabela_assinatura th,
.tabela_assinatura td {
  border-collapse: collapse;
  border-style: hidden;
}

.tabela_assinatura th {
  background: var(--azul-claro);
  color: var(--azul);
}

.tabela_eventos {
  width: 50%;
  margin: 18px auto;
  border-collapse: collapse;
}

.tabela_eventos th,
.tabela_distribuicao_dfe th,
.tributacao_leiaute th,
.leiaute_qr_code th,
.tabela_cstat th {
  background: linear-gradient(135deg, var(--azul-claro), var(--verde-claro));
  color: var(--azul);
  border: 1px solid var(--linha);
  font-weight: 700;
}

.tabela_eventos td:nth-child(1) { width: 10%; }
.tabela_eventos td:nth-child(2) { width: 35%; }
.tabela_eventos td:nth-child(3) { width: 5%; }
.tabela_eventos td:nth-child(4) { width: 35%; }
.tabela_eventos td:nth-child(5) { width: 15%; }

.tabela_regras_genericas {
  font-family: var(--fonte);
  border-collapse: collapse;
  width: 600px;
  max-width: 100%;
}

.tabela_regras_genericas,
.tabela_distribuicao_dfe {
  margin-left: auto;
  margin-right: auto;
}

.tabela_distribuicao_dfe {
  font-family: var(--fonte);
  border-collapse: collapse;
}

.tabela_distribuicao_dfe td,
.tabela_distribuicao_dfe th,
.tabela_regras_genericas td,
.tabela_regras_genericas th,
.tabela_gtin td,
.tabela_gtin th {
  border: 1px solid var(--linha);
  padding: 9px 11px;
}

.tabela_NSU {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}

/* Larguras de coluna - preservadas do leiaute original */

.leiaute_nfe td:nth-child(1) { width: 5%; }
.leiaute_nfe td:nth-child(2) { width: 5%; }
.leiaute_nfe td:nth-child(3) { width: 10%; }
.leiaute_nfe td:nth-child(4) { width: 25%; }
.leiaute_nfe td:nth-child(5) { width: 5%; }
.leiaute_nfe td:nth-child(6) { width: 5%; }
.leiaute_nfe td:nth-child(7) { width: 5%; }
.leiaute_nfe td:nth-child(8) { width: 5%; }
.leiaute_nfe td:nth-child(9) { width: 5%; }
.leiaute_nfe td:nth-child(10) { width: 30%; }

.leiaute_web_services td:nth-child(1) { width: 5%; }
.leiaute_web_services td:nth-child(2) { width: 15%; }
.leiaute_web_services td:nth-child(3) { width: 5%; }
.leiaute_web_services td:nth-child(4) { width: 5%; }
.leiaute_web_services td:nth-child(5) { width: 5%; }
.leiaute_web_services td:nth-child(6) { width: 5%; }
.leiaute_web_services td:nth-child(7) { width: 5%; }
.leiaute_web_services td:nth-child(8) { width: 65%; }

.regras_validacao_nfe td:nth-child(1) { width: 10%; }
.regras_validacao_nfe td:nth-child(2) { width: 5%; }
.regras_validacao_nfe td:nth-child(3) { width: 35%; }
.regras_validacao_nfe td:nth-child(4) { width: 5%; }
.regras_validacao_nfe td:nth-child(5) { width: 5%; }
.regras_validacao_nfe td:nth-child(6) { width: 5%; }
.regras_validacao_nfe td:nth-child(7) { width: 35%; }

.regras_validacao_gerais td:nth-child(1) { width: 10%; }
.regras_validacao_gerais td:nth-child(2) { width: 30%; }
.regras_validacao_gerais td:nth-child(3) { width: 5%; }
.regras_validacao_gerais td:nth-child(4) { width: 5%; }
.regras_validacao_gerais td:nth-child(5) { width: 5%; }
.regras_validacao_gerais td:nth-child(6) { width: 40%; }


.tributacao_leiaute {
  font-family: var(--fonte);
  border-collapse: collapse;
  width: 80%;
  border: 1px solid var(--linha);
}

.tributacao_leiaute th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
}

.tributacao_leiaute td {
  text-align: center;
}

.tributacao_leiaute td:nth-child(1) { width: 5%; }
.tributacao_leiaute td:nth-child(2) { width: 10%; }
.tributacao_leiaute td:nth-child(3) { width: 30%; }
.tributacao_leiaute td:nth-child(4) { width: 5%; }
.tributacao_leiaute td:nth-child(5) { width: 5%; }
.tributacao_leiaute td:nth-child(6) { width: 5%; }

.leiaute_qr_code {
  font-family: var(--fonte);
  border-collapse: collapse;
  width: 80%;
  border: 1px solid var(--linha);
}

.leiaute_qr_code th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
}

.leiaute_qr_code td:nth-child(1) { width: 10%; }
.leiaute_qr_code td:nth-child(2) { width: 90%; }

.tabela_cstat {
  font-family: var(--fonte);
  border-collapse: collapse;
  width: 50%;
  border: 1px solid var(--linha);
}

.tabela_cstat th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
}

.tabela_cstat td:nth-child(1) { width: 7%; }
.tabela_cstat td:nth-child(2) { width: 93%; }

/* ============================================================
   6. BOTAO VOLTAR AO TOPO (criado por myscript.js)
   ============================================================ */

#voltar_topo {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: #ffffff;
  color: var(--azul);
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform .15s ease, background .15s ease;
}

#voltar_topo:hover {
  transform: translateY(-2px);
  background: var(--verde-claro);
  color: var(--verde);
}

#voltar_topo.visivel {
  display: flex;
}

/* ============================================================
   7. RESPONSIVO E IMPRESSAO
   ============================================================ */

@media (max-width:760px) {
  .corpo {
    padding: 12px 10px 50px 10px;
  }

  #principal {
    padding: 20px 16px 28px 16px;
    border-radius: var(--raio);
  }

  #principal h1 {
    font-size: 23px;
  }

  #principal h2 {
    font-size: 19px;
  }

  .topo {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
  }

  .dropdown-content {
    min-width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .barra_nav,
  #menu_esq,
  #voltar_topo {
    display: none !important;
  }

  .corpo {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  #principal {
    box-shadow: none;
    border: 0;
    max-width: 100%;
  }

  body {
    background: #ffffff;
  }
}

/* Tabelas excepcionalmente largas */
.tabela-rolavel {
  width: 100%;
  max-width: 100%;
  margin: 14px 0 22px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  -webkit-overflow-scrolling: touch;
}

.tabela-rolavel table {
  width: max-content;
  min-width: 100%;
  margin: 0;
}

.tabela-calculo-dv td {
  min-width: 30px;
  padding: 9px 7px;
  text-align: center;
  white-space: nowrap;
}

.tabela-calculo-dv td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 110px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
}

.tabela-final-processamento {
  margin: 14px auto 22px;
  }