/* Fontes */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fontes/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fontes/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fontes/open-sans-math.woff2") format("woff2");
  unicode-range: U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+2190, U+2192, U+2194-21AE;
}

/* Variáveis */

:root {
  --azul: #112F83;
  --azul-escuro: #0C2466;
  --azul-suave: #E7EBF5;
  --laranja: #DB860E;
  --laranja-titulo: #C47500;
  --laranja-texto: #A35F00;
  --laranja-escuro: #8A5300;
  --laranja-suave: #FBF0E0;
  --tinta: #1F1F1F;
  --cinza: #5A5A5A;
  --linha: #D9D9D9;
  --nevoa: #EEF0F5;
  --rosa: #E6397F;
  --rosa-escuro: #A3154F;
  --rosa-suave: #FCE6EF;
  --amarelo: #F5B800;
  --verde: #2E7D32;
  --verde-suave: #E8F5E9;
  --vermelho: #B3261E;
  --vermelho-suave: #FBEDEC;
  --instrumento: #0B1433;
  --fonte: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --mono: 'Courier New', Courier, monospace;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --sombra-folha: 0 10px 40px rgba(17, 47, 131, .10), 0 1px 0 rgba(17, 47, 131, .04);
  --fip-claro: #F28CB3;
  --bip-claro: #E9A94D;
  --fundo-linha: #F7F8FC;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .35s;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nevoa);
  color: var(--tinta);
  font: 400 16px/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: var(--azul);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--azul-escuro);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(219, 134, 14, .35);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

code.mono,
.mono {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .02em;
}

::selection {
  background: var(--laranja-suave);
  color: var(--tinta);
}

.pular {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--azul);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 4px;
  z-index: 200;
  text-decoration: none;
}

.pular:focus {
  top: 12px;
}

.nc,
.nc * {
  text-transform: none;
  letter-spacing: normal;
}

:is(thead th, .ranking-cabecalho > span, .rotulo-pequeno, .pilula, .botao, .abertura-chamada, .titulo-pagina) :is(i, sub, sup) {
  text-transform: none;
}

[hidden] {
  display: none !important;
}

/* Barra superior */

.barra-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linha);
}

.barra-topo-interna {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--azul);
}

.marca-icone {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.marca-texto {
  display: flex;
  flex-direction: column;
}

.marca-nome {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.marca-projeto {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--cinza);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trilho {
  justify-self: center;
}

.trilho-lista {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trilho-etapa {
  display: flex;
  align-items: center;
}

.trilho-etapa + .trilho-etapa::before {
  content: "";
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--linha);
  margin: 0 12px;
}

.trilho-feita + .trilho-feita::before,
.trilho-feita + .trilho-atual::before,
.trilho-atual + .trilho-feita::before {
  background: var(--laranja);
}

.trilho-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cinza);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 4px;
  border-radius: 6px;
}

.trilho-link:hover {
  color: var(--azul);
}

.trilho-ponto {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--mono);
  background: #FFFFFF;
  border: 2px solid #B9C0D4;
  color: var(--cinza);
  transition: background-color .4s, border-color .4s, color .4s, box-shadow .4s;
}

.trilho-nome {
  white-space: nowrap;
}

.trilho-feita .trilho-ponto {
  background: var(--laranja);
  border-color: var(--laranja);
  color: var(--tinta);
}

.trilho-feita .trilho-link {
  color: var(--tinta);
}

.trilho-atual .trilho-ponto {
  background: var(--azul);
  border-color: var(--azul);
  color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(17, 47, 131, .16);
}

.trilho-atual .trilho-link {
  color: var(--azul);
  font-weight: 800;
}

.barra-topo-direita {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.link-topo {
  font-weight: 600;
  font-size: 14px;
  color: var(--cinza);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 6px;
}

.link-topo:hover,
.link-topo[aria-current="page"] {
  color: var(--azul);
  background: var(--azul-suave);
}

.link-topo[aria-current="page"] {
  font-weight: 700;
}

.alternar-movimento {
  display: none;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font: 600 13px/1 var(--fonte);
  color: var(--cinza);
  transition: color .2s, background-color .2s;
}

.js .alternar-movimento {
  display: inline-flex;
}

.alternar-movimento:hover {
  color: var(--azul);
  background: var(--azul-suave);
}

.alternar-movimento-trilho {
  position: relative;
  display: block;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: #C9CFDD;
  transition: background-color .25s;
  flex-shrink: 0;
}

.alternar-movimento-botao {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .25s var(--curva);
  display: block;
}

.alternar-movimento[aria-pressed="true"] .alternar-movimento-trilho {
  background: var(--azul);
}

.alternar-movimento[aria-pressed="true"] .alternar-movimento-botao {
  transform: translateX(14px);
}

.dica-movimento {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  background: #FFFFFF;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--azul);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(17, 47, 131, .16);
  padding: 14px 16px;
  white-space: normal;
  z-index: 30;
  animation: aviso-entra .4s var(--curva) both;
}

.dica-movimento-texto {
  margin: 0;
  font: 400 13.5px/1.45 var(--fonte);
  color: var(--tinta);
}

.dica-movimento-acoes {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.selo-local {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--verde);
  background: var(--verde-suave);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
}

.selo-local svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Página e folha */

.pagina {
  padding: 28px 32px 64px;
}

.pagina:focus {
  outline: none;
  box-shadow: none;
}

.folha {
  max-width: 1216px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 6px;
  box-shadow: var(--sombra-folha);
  padding: 48px 56px 40px;
}

.folha > * + * {
  margin-top: 40px;
}

.folha > .secao + .secao,
.folha > .colunas-2 + .secao,
.folha > .secao + .colunas-2 {
  margin-top: 56px;
}

/* Cabeçalho de página */

.cabecalho-pagina {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 32px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--linha);
}

.cabecalho-pagina-texto {
  min-width: 0;
}

.titulo-pagina {
  font: 700 30px/1.12 var(--fonte);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--azul);
  overflow-wrap: anywhere;
}

.titulo-tag {
  color: var(--laranja-titulo);
  text-transform: none;
}

.subtitulo-pagina {
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cinza);
  max-width: 76ch;
}

.cabecalho-pagina-acoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.form-inline {
  display: inline-flex;
  margin: 0;
}

/* Seções e colunas */

.secao-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.secao-titulo {
  font: 700 21px/1.25 var(--fonte);
  color: var(--azul);
  position: relative;
  padding-top: 16px;
}

.secao-titulo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 4px;
  background: var(--azul);
  border-radius: 2px;
}

.secao-legenda {
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--cinza);
  max-width: 70ch;
}

.secao-contagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--azul-suave);
  color: var(--azul);
  font: 700 14px var(--mono);
  margin-left: 6px;
  vertical-align: 2px;
}

.colunas-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: 56px;
}

.colunas-2 > * {
  min-width: 0;
}

.colunas-2 > :nth-child(odd) {
  padding-right: 40px;
}

.colunas-2 > :nth-child(even) {
  padding-left: 40px;
  border-left: 1px solid var(--linha);
}

.grupo-violacao-titulo {
  font: 800 13px/1.35 var(--fonte);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.grupo-viol {
  color: var(--vermelho);
}

.grupo-calibrar {
  color: var(--laranja-texto);
}

.rotulo-pequeno {
  display: block;
  font: 700 11.5px/1.3 var(--fonte);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cinza);
  margin-bottom: 8px;
}

.nota {
  margin-top: 14px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cinza);
  max-width: 90ch;
}

.texto-vazio {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cinza);
  padding: 18px 0;
  border-top: 1px dashed var(--linha);
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 13px/1 var(--fonte);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 18px;
  border-radius: 4px;
  border: 2px solid var(--azul);
  background: #FFFFFF;
  color: var(--azul);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  font-family: inherit;
}

.botao svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.botao:hover {
  background: var(--azul-suave);
}

.botao:active {
  transform: translateY(1px);
}

.botao-primario {
  background: var(--azul);
  color: #FFFFFF;
}

.botao-primario:hover {
  background: var(--azul-escuro);
  border-color: var(--azul-escuro);
  color: #FFFFFF;
}

.botao-secundario {
  background: #FFFFFF;
  color: var(--azul);
  border-color: var(--azul);
}

.botao-secundario:hover {
  background: var(--azul-suave);
}

.botao-grande {
  padding: 16px 26px;
  font-size: 14px;
}

.botao-pequeno {
  padding: 7px 12px;
  font-size: 11.5px;
  border-width: 1.5px;
}

.botao:disabled,
.botao[aria-disabled="true"],
button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.botao:disabled:hover,
.botao[aria-disabled="true"]:hover,
button:disabled:hover {
  background: #FFFFFF;
  color: var(--azul);
  border-color: var(--azul);
}

.botao-primario:disabled:hover,
.botao-primario[aria-disabled="true"]:hover {
  background: var(--azul);
  color: #FFFFFF;
  border-color: var(--azul);
}

.botao:disabled:active,
.botao[aria-disabled="true"]:active,
button:disabled:active {
  transform: none;
}

.botao-arquivo {
  position: relative;
}

.botao-arquivo:focus-within {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(219, 134, 14, .35);
}

.input-arquivo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pílulas e etiquetas */

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 800 10.5px/1 var(--fonte);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: #FFFFFF;
  white-space: nowrap;
}

:is(.tabela, .ranking, .lista-violacoes) .pilula {
  font: 700 12px/1 var(--fonte);
  letter-spacing: .01em;
  text-transform: none;
}

.pilula::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pilula-ok {
  color: var(--verde);
}

.pilula-viol {
  color: var(--vermelho);
}

.pilula-calibrar {
  color: var(--laranja-texto);
}

.pilula-info {
  color: var(--azul);
}

.pilula-neutro {
  color: var(--cinza);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 3px 8px;
  border-radius: 4px;
  font: 700 12.5px/1.25 var(--fonte);
  white-space: nowrap;
}

.etiqueta-externo {
  background: var(--azul-suave);
  color: var(--azul);
}

.etiqueta-fip {
  background: var(--rosa-suave);
  color: var(--rosa-escuro);
}

.etiqueta-bip {
  background: var(--laranja-suave);
  color: var(--laranja-escuro);
}

.etiqueta-loop {
  background: var(--verde-suave);
  color: var(--verde);
}

.etiqueta-outro {
  background: var(--nevoa);
  color: var(--tinta);
}

.chip-marca {
  display: inline-block;
  font: 700 10.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--laranja-escuro);
  background: var(--laranja-suave);
  padding: 3px 7px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* Avisos */

.aviso {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  border-radius: 4px;
  border-left: 6px solid transparent;
  font: 400 15px/1.5 var(--fonte);
}

.aviso-icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.aviso-texto {
  min-width: 0;
}

.aviso-texto p + p,
.aviso-texto p + ul,
.aviso-texto ul + p {
  margin-top: 6px;
}

.aviso a {
  font-weight: 600;
}

.lista-avisos {
  padding-left: 18px;
  margin: 0;
}

.aviso-alerta {
  background: var(--laranja-suave);
  border-left-color: var(--laranja);
}

.aviso-alerta .aviso-icone {
  color: var(--laranja-escuro);
  stroke: var(--laranja-escuro);
}

.aviso-info {
  background: var(--azul-suave);
  border-left-color: var(--azul);
}

.aviso-info .aviso-icone {
  color: var(--azul);
  stroke: var(--azul);
}

.aviso-erro {
  background: var(--vermelho-suave);
  border-left-color: var(--vermelho);
}

.aviso-erro .aviso-icone {
  color: var(--vermelho);
  stroke: var(--vermelho);
}

.aviso-seguranca {
  background: #FFFFFF;
  border: 1px solid var(--linha);
  border-left: 6px solid var(--azul);
}

.aviso-seguranca .aviso-icone {
  color: var(--azul);
  stroke: var(--azul);
}

.aviso-links {
  display: flex;
  gap: 6px 20px;
  flex-wrap: wrap;
}

.aviso-mensagem {
  animation: aviso-entra .5s var(--curva) both;
}

@keyframes aviso-entra {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.linha-alternar {
  font-weight: 400;
  font-size: 14px;
  margin-top: 16px;
}

/* Tabelas */

.tabela-rolagem {
  position: relative;
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
  /* sombra suave na borda que ainda tem conteúdo para rolar */
  background:
    linear-gradient(to right, #FFFFFF 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, #FFFFFF 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(17, 47, 131, .16), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(17, 47, 131, .16), transparent) right center / 14px 100% no-repeat scroll;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font: 400 14.5px/1.4 var(--fonte);
  min-width: 640px;
}

.tabela-estreita {
  min-width: 380px;
}

.tabela thead th,
thead th {
  text-align: left;
  font: 700 11.5px/1.2 var(--fonte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cinza);
  padding: 10px 12px;
  border-bottom: 2px solid var(--azul);
  white-space: nowrap;
  vertical-align: bottom;
}

.tabela tbody td,
.tabela tbody th,
tbody td,
tbody th {
  padding: 12px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}

.tabela tbody tr:hover td,
.tabela tbody tr:hover th,
tbody tr:hover td,
tbody tr:hover th {
  background: var(--fundo-linha);
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.seq {
  font: 700 13.5px/1.4 var(--mono);
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}

.seq-juncao {
  color: var(--laranja);
  font-weight: 800;
  margin: 0 4px;
}

.viol {
  color: var(--vermelho);
  font-weight: 700;
}

.calibrar {
  color: var(--laranja-texto);
  font-weight: 700;
}

.ok {
  color: var(--verde);
  font-weight: 700;
}

.secundario {
  color: var(--cinza);
}

.dg-ponta {
  font-weight: 600;
  font-size: 11px;
  color: var(--cinza);
  margin-left: 2px;
}

td.data {
  white-space: nowrap;
  color: var(--cinza);
  font-size: 13.5px;
}

.link-acao {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}

.link-acao:hover {
  text-decoration: underline;
}

.celula-regua {
  width: 160px;
}

.regua-mini {
  position: relative;
  display: block;
  width: 140px;
  height: 14px;
  background: linear-gradient(var(--linha), var(--linha)) center / 100% 1px no-repeat;
}

.regua-mini-banda {
  position: absolute;
  top: 2px;
  height: 10px;
  background: var(--azul-suave);
  border: 1px solid #C9D2EA;
  border-radius: 2px;
}

.regua-mini-marca {
  position: absolute;
  top: -1px;
  width: 3px;
  height: 16px;
  margin-left: -1.5px;
  border-radius: 2px;
}

.regua-mini-ok {
  background: var(--verde);
}

.regua-mini-viol {
  background: var(--vermelho);
}

/* Abertura e hélice */

.abertura {
  position: relative;
}

.abertura-chamada {
  font: 800 13.5px/1.2 var(--fonte);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laranja-texto);
  margin-bottom: 18px;
}

.abertura-titulo {
  font: 800 clamp(40px, 5.4vw, 72px)/0.98 var(--fonte);
  letter-spacing: -.03em;
  color: var(--azul);
}

.ponto-laranja {
  color: var(--laranja);
}

.abertura-texto {
  margin-top: 18px;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--cinza);
  max-width: 54ch;
}

.abertura-helice {
  display: none;
  margin: 28px -56px 0;
  height: 260px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 50%, #FFFFFF 100%);
  border-top: 1px solid var(--fundo-linha);
  border-bottom: 1px solid var(--fundo-linha);
}

.js .abertura-helice {
  display: block;
}

/* legenda do esquema da hélice; só existe junto com a hélice (com JavaScript) */
.abertura-legenda {
  display: none;
  margin: 10px 0 0;
  font: 600 12.5px/1.4 var(--fonte);
  color: var(--cinza);
}

.js .abertura-legenda {
  display: block;
}

canvas.helice {
  display: block;
  width: 100%;
  height: 100%;
}

.abertura-exemplos {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.abertura-exemplos-rotulo {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--cinza);
}

.abertura-exemplos .botao {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 13px;
}

/* hélice com os dados da análise: só existe com JavaScript */
.analise-helice {
  display: none;
  height: 210px;
  margin: 0 -56px 4px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 50%, #FFFFFF 100%);
  border-top: 1px solid var(--fundo-linha);
  border-bottom: 1px solid var(--fundo-linha);
}

.js .analise-helice {
  display: block;
}

.analise-helice-legenda {
  display: none;
  margin: 8px 0 22px;
  font: 600 12.5px/1.4 var(--fonte);
  color: var(--cinza);
}

.js .analise-helice-legenda {
  display: block;
}

/* Cargas de arquivo */

.carga-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}

.carga-desc {
  margin-bottom: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cinza);
}

.arquivo-carregado {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--fundo-linha);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--azul);
  border-radius: 4px;
}

.arquivo-icone {
  width: 22px;
  height: 22px;
  color: var(--azul);
  stroke: var(--azul);
  flex-shrink: 0;
}

.arquivo-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.arquivo-nome {
  font: 700 14px/1.35 var(--mono);
  overflow-wrap: anywhere;
}

.arquivo-resumo {
  font-size: 13px;
  color: var(--cinza);
}

.reconhecidos {
  margin-top: 16px;
}

.carga .lista-def {
  margin-top: 14px;
}

.form-arquivo {
  margin-top: 22px;
}

.form-arquivo-rotulo {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}

.form-arquivo-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.arquivo-escolhido {
  font-size: 13px;
  color: var(--cinza);
  overflow-wrap: anywhere;
}

.carga-nota {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cinza);
}

.area-desativada {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1.5px dashed var(--linha);
  border-radius: 4px;
  color: #8A8F99;
  font-size: 13.5px;
  background: repeating-linear-gradient(135deg, #FAFBFD 0 8px, #F4F5F9 8px 16px);
}

.area-desativada svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.acoes-principais {
  display: flex;
  align-items: center;
  gap: 14px 16px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--linha);
}

.acoes-motivo {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--laranja-texto);
}

/* Medidas */

.medidas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.medida {
  position: relative;
  padding: 26px 24px 22px 0;
}

.medida + .medida {
  padding-left: 24px;
  border-left: 1px solid var(--linha);
}

.medida::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 36px;
  height: 4px;
  background: var(--azul);
}

.medida + .medida::before {
  left: 24px;
}

.medida-tem-viol::before {
  background: var(--vermelho);
}

/* número grande e o complemento ("de 7") menor, na mesma linha de base */
.medida-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.medida-resto {
  font: 700 22px/1 var(--fonte);
  color: var(--cinza);
}

.medida-valor {
  display: inline-block;
  font: 700 46px/1 var(--mono);
  letter-spacing: -.02em;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.medida-viol {
  color: var(--vermelho);
}

.medida-rotulo {
  display: block;
  margin-top: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}

.medida-detalhe {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cinza);
}

/* Mapa */

.mapa {
  position: relative;
  height: 140px;
  margin-bottom: 18px;
}

.mapa-com-fora {
  height: 172px;
}

.mapa-compacto {
  height: 140px;
}

.mapa-trilho {
  position: absolute;
  left: 0;
  right: 0;
  top: 49px;
  height: 6px;
  border-radius: 3px;
  background: var(--nevoa);
  transform-origin: left center;
}

.mapa-regiao {
  position: absolute;
  top: 40px;
  height: 24px;
  border-radius: 3px;
  transform-origin: center;
  background: var(--cor);
}

.mapa-familia-externo {
  --cor: var(--azul);
}

.mapa-familia-fip {
  --cor: var(--rosa);
}

.mapa-familia-bip {
  --cor: var(--laranja);
}

.mapa-familia-loop {
  --cor: var(--verde);
}

.mapa-familia-outro {
  --cor: var(--cinza);
}

.mapa-regiao.mapa-regiao-F1 {
  --cor: var(--fip-claro);
}

.mapa-regiao.mapa-regiao-B1c {
  --cor: var(--bip-claro);
}

.mapa .mapa-fantasma {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cor) 24%, transparent) 0 3px, transparent 3px 7px);
  border: 1.5px dashed var(--cor);
}

.mapa-rotulo {
  position: absolute;
  transform: translateX(-50%);
  font: 700 12.5px/1 var(--fonte);
  white-space: nowrap;
}

.mapa-rotulo.mapa-familia-externo {
  color: var(--azul);
}

.mapa-rotulo.mapa-familia-fip {
  color: var(--rosa-escuro);
}

.mapa-rotulo.mapa-familia-bip {
  color: var(--laranja-escuro);
}

.mapa-rotulo.mapa-familia-loop {
  color: var(--verde);
}

.mapa-rotulo.mapa-familia-outro {
  color: var(--cinza);
}

.mapa-rotulo-cima {
  top: 10px;
}

.mapa-rotulo-cima::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: .45;
  margin-top: 4px;
}

.mapa-rotulo-baixo {
  top: 78px;
}

.mapa-rotulo-baixo::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: .45;
  margin-bottom: 4px;
}

.mapa-rotulo-fantasma {
  font-style: italic;
}

.mapa-marca {
  position: absolute;
  top: 104px;
  width: 1px;
  height: 6px;
  background: #AEB5C7;
}

.mapa-numero {
  position: absolute;
  top: 112px;
  font: 700 11.5px/1 var(--mono);
  color: var(--cinza);
  white-space: nowrap;
}

.mapa-numero-meio {
  transform: translateX(-50%);
}

.mapa-numero-fim {
  transform: translateX(-100%);
}

.mapa-numero-inicio {
  transform: none;
}

.mapa-fora {
  position: absolute;
  top: 134px;
  height: 9px;
  border: 1.5px solid var(--vermelho);
  border-top: none;
  border-radius: 0 0 3px 3px;
}

.mapa-fora-texto {
  position: absolute;
  top: 148px;
  font-weight: 700;
  font-size: 12px;
  color: var(--vermelho);
  white-space: nowrap;
}

/* Matriz */

.matriz {
  border-collapse: separate;
  border-spacing: 5px;
  margin: -5px;
}

.matriz th,
.matriz td {
  border: none;
}

.matriz-topo,
.matriz-lado {
  font: 700 12px/1.2 var(--fonte);
  color: var(--cinza);
  padding: 4px 6px;
}

.matriz-topo {
  text-align: center;
}

.matriz-lado {
  text-align: right;
  white-space: nowrap;
}

.matriz td {
  padding: 0;
}

.matriz-celula {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 40px;
  border-radius: 4px;
  font: 700 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.matriz-faixa-0 {
  background: #112F83;
  color: #FFFFFF;
}

.matriz-faixa-1 {
  background: #4A64A8;
  color: #FFFFFF;
}

.matriz-faixa-2 {
  background: #A7B4D8;
  color: var(--tinta);
}

.matriz-faixa-3 {
  background: #D3DAEC;
  color: var(--tinta);
}

.matriz-faixa-4 {
  background: #F1F3F9;
  color: var(--tinta);
}

.matriz-diagonal {
  box-shadow: inset 0 0 0 2px var(--tinta);
}

.matriz-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--cinza);
}

.matriz-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.matriz-amostra {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

.matriz-resumo {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
}

/* Violações */

.grupo-violacao + .grupo-violacao {
  margin-top: 26px;
}

.lista-violacoes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.violacao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14px;
  line-height: 1.4;
}

.violacao-texto {
  min-width: 0;
}

.violacao-faixa {
  font: 700 12px var(--mono);
  color: var(--cinza);
  white-space: nowrap;
}

/* Desenho */

.busca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 40px;
  align-items: center;
  padding: 22px 24px;
  background: var(--fundo-linha);
  border: 1px solid var(--linha);
  border-radius: 4px;
}

.busca-candidatos {
  min-width: 0;
}

.busca-resumo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.busca-examinados {
  font-size: 14px;
  color: var(--cinza);
}

.busca-examinados strong {
  font: 700 34px/1 var(--mono);
  color: var(--azul);
  margin-right: 8px;
  vertical-align: -4px;
}

.filtro-agrupar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.filtro-agrupar input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--azul);
}

.ranking {
  min-width: 900px;
}

.ranking-cabecalho,
.ranking-linha {
  display: grid;
  grid-template-columns: 72px 110px 110px 110px minmax(90px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(150px, 1.4fr);
}

.ranking-cabecalho {
  align-items: end;
}

.ranking-cabecalho > span {
  text-align: left;
  font: 700 11.5px/1.2 var(--fonte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cinza);
  padding: 10px 12px;
  border-bottom: 2px solid var(--azul);
  white-space: nowrap;
  vertical-align: bottom;
}

.ranking-linha {
  align-items: center;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linha);
  transition: background-color .2s;
}

.ranking-linha > span {
  padding: 13px 12px;
}

.ranking-linha:hover {
  background: var(--fundo-linha);
}

.ranking-selecionada {
  background: var(--laranja-suave);
  box-shadow: inset 5px 0 0 var(--laranja);
}

.ranking-num strong {
  font: 700 15px var(--mono);
}

.ranking-extra {
  display: block;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--cinza);
}

.ranking-dado {
  font: 700 14px var(--mono);
  text-align: right;
}

.ranking-coord {
  font: 700 13px var(--mono);
  color: var(--cinza);
}

.coord-dif {
  color: var(--azul);
  font-weight: 800;
  background: none;
  padding: 0;
  text-decoration: underline 2px var(--laranja);
  text-underline-offset: 5px;
}

.ranking-avisos {
  font-size: 13px;
  line-height: 1.4;
  color: var(--cinza);
}

/* Parâmetros */

.cal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13px;
  color: var(--cinza);
  margin-bottom: 6px;
}

.cal-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.amostra-banda {
  width: 22px;
  height: 10px;
  border-radius: 2px;
  background: var(--azul-suave);
  border: 1px solid #C9D2EA;
}

.ponto-amostra {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.ponto-atual {
  background: var(--azul);
}

.ponto-total {
  background: #FFFFFF;
  border: 2px solid var(--azul);
}

.ponto-lado-b {
  background: var(--laranja);
}

.cal-grafico {
  margin-top: 20px;
  display: grid;
  gap: 16px;
}

.cal-linha {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.cal-linha-info {
  display: flex;
  flex-direction: column;
}

.cal-linha-nome {
  font-weight: 700;
  font-size: 14px;
}

.cal-linha-sub {
  font: 700 12px var(--mono);
  color: var(--cinza);
}

.cal-trilho {
  position: relative;
  height: 36px;
  background: linear-gradient(var(--linha), var(--linha)) center / 100% 1px no-repeat;
}

.cal-banda {
  position: absolute;
  top: 8px;
  height: 20px;
  background: var(--azul-suave);
  border: 1px solid #C9D2EA;
  border-radius: 3px;
  transform-origin: left center;
}

.cal-ponto {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
}

.cal-ponto-cheio {
  background: var(--azul);
}

.cal-ponto-cheio.cal-ponto-F,
.cal-ponto-cheio.cal-ponto-L {
  background: var(--azul);
}

.cal-ponto-cheio.cal-ponto-B {
  background: var(--laranja);
}

.cal-ponto-vazio {
  background: #FFFFFF;
  border: 2.5px solid var(--azul);
}

.cal-ponto-vazio.cal-ponto-B {
  border-color: var(--laranja);
}

.cal-ponto-rotulo {
  position: absolute;
  top: -12px;
  transform: translateX(-50%);
  font: 700 11px var(--mono);
  color: var(--azul);
  white-space: nowrap;
}

.cal-ponto-rotulo-B {
  color: var(--laranja-escuro);
}

.cal-linha-ticks {
  margin-top: -4px;
}

.cal-trilho-ticks {
  position: relative;
  height: 18px;
}

.cal-tick {
  position: absolute;
  font: 700 11.5px var(--mono);
  color: var(--cinza);
  white-space: nowrap;
}

.cal-tick-meio {
  transform: translateX(-50%);
}

.cal-tick-fim {
  transform: translateX(-100%);
}

.cal-tick-inicio {
  transform: none;
}

.cal-texto {
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.55;
  max-width: 82ch;
}

.opcoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.opcao {
  border: 1px solid var(--linha);
  border-top: 4px solid var(--azul);
  border-radius: 0 0 4px 4px;
  padding: 18px 20px;
}

.opcao-tag {
  font: 700 11.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--laranja-texto);
}

.opcao-titulo {
  display: block;
  margin: 6px 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--azul);
}

.opcao-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cinza);
}

.lista-def {
  margin: 0;
}

.lista-def-item {
  display: grid;
  grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
  gap: 2px 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}

.lista-def dt {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}

.lista-def-valor {
  margin: 0;
  font: 600 14px/1.45 var(--fonte);
  font-variant-numeric: tabular-nums;
}

.lista-def-nota {
  grid-column: 2;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cinza);
}

.lista-def-destaque {
  color: var(--laranja-texto);
}

/* Rodapé */

.rodape-folha {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cinza);
}

.rodape-versao {
  font: 700 12px var(--mono);
  color: var(--tinta);
}

/* Tela de espera */

.espera {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 40px 32px;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity .35s;
  background:
    linear-gradient(rgba(124, 155, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(124, 155, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(1100px 620px at 50% 42%, #18296E 0%, var(--instrumento) 62%);
}

.espera.espera-ativa {
  opacity: 1;
}

body.esperando {
  overflow: hidden;
}

.espera-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
}

.espera-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 15px;
  color: #FFFFFF;
  white-space: nowrap;
}

.espera-marca svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.espera-local {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3DDC97;
  text-align: right;
}

.espera-local svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.espera-centro {
  align-self: center;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.espera-titulo {
  font: 700 28px/1.15 var(--fonte);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #FFFFFF;
}

.espera-titulo:focus {
  outline: none;
  box-shadow: none;
}

.espera-titulo .titulo-tag {
  color: #FFB347;
}

canvas.helice-espera {
  width: 100%;
  height: clamp(200px, 34vh, 330px);
}

.espera-etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.espera-etapa {
  position: relative;
  padding: 26px 12px 0 0;
  font: 600 12.5px/1.3 var(--fonte);
  color: rgba(255, 255, 255, .5);
  transition: color .2s;
}

.espera-etapa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  background: var(--instrumento);
  z-index: 1;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.espera-etapa::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 14px;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, .15);
  transition: background-color .2s;
}

.espera-etapa:last-child::after {
  display: none;
}

.espera-etapa.feita {
  color: rgba(255, 255, 255, .82);
}

.espera-etapa.feita::before {
  background: var(--laranja);
  border-color: var(--laranja);
}

.espera-etapa.feita::after {
  background: var(--laranja);
}

.espera-etapa.atual {
  color: #FFFFFF;
}

.espera-etapa.atual::before {
  background: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .14);
}

.espera-progresso {
  display: flex;
  align-items: center;
  gap: 16px;
}

.espera-progresso-barra {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.espera-progresso-preenchido {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--cor-progresso, var(--rosa));
  box-shadow: 0 0 18px var(--cor-progresso, var(--rosa));
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.espera-progresso-preenchido::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-100%);
  animation: espera-brilho 1.6s linear infinite;
}

@keyframes espera-brilho {
  to {
    transform: translateX(100%);
  }
}

.espera-progresso-valor {
  font: 700 18px var(--mono);
  color: #FFFFFF;
  min-width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.espera-etapa-atual {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: #FFFFFF;
  min-height: 1.4em;
}

.espera-dica {
  justify-self: center;
  width: 100%;
  max-width: 780px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
}

.espera-dica-rotulo {
  flex-shrink: 0;
  font: 700 11.5px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFB347;
}

.espera-dica-texto {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
  transition: opacity .35s, transform .35s;
}

.espera-dica-texto.trocando {
  opacity: 0;
  transform: translateY(6px);
}

/* Animações */

.js [data-revelar] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .8s var(--curva);
}

.js [data-revelar].visivel > * {
  opacity: 1;
  transform: none;
  transition-delay: var(--d, 0s);
}

.js .mapa[data-encaixe] .mapa-trilho {
  transform: scaleX(0);
  transition: transform .9s var(--curva);
}

.js .mapa[data-encaixe].visivel .mapa-trilho {
  transform: scaleX(1);
}

.js .mapa[data-encaixe] .mapa-regiao {
  opacity: 0;
  transform: translateY(-18px) scaleX(.6);
  transition: opacity .8s ease, transform .8s var(--curva);
}

.js .mapa[data-encaixe].visivel .mapa-regiao {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--d, 0s) + .2s);
}

.js .mapa[data-encaixe] .mapa-rotulo {
  opacity: 0;
  transition: opacity .4s ease;
}

.js .mapa[data-encaixe].visivel .mapa-rotulo {
  opacity: 1;
  transition-delay: calc(var(--d, 0s) + .45s);
}

.js .mapa[data-encaixe] .mapa-marca,
.js .mapa[data-encaixe] .mapa-numero {
  opacity: 0;
  transition: opacity .5s ease;
}

.js .mapa[data-encaixe].visivel .mapa-marca,
.js .mapa[data-encaixe].visivel .mapa-numero {
  opacity: 1;
  transition-delay: .3s;
}

.js .mapa[data-encaixe] .mapa-fora,
.js .mapa[data-encaixe] .mapa-fora-texto {
  opacity: 0;
  transition: opacity .5s ease;
}

.js .mapa[data-encaixe].visivel .mapa-fora,
.js .mapa[data-encaixe].visivel .mapa-fora-texto {
  opacity: 1;
  transition-delay: 1.1s;
}

.js .mapa[data-encaixe].visivel .mapa-fora {
  animation: fora-pisca 1.2s ease 1.1s 1;
}

@keyframes fora-pisca {
  0%, 100% {
    background: transparent;
  }
  40% {
    background: rgba(179, 38, 30, .18);
  }
}

.js .matriz[data-onda] .matriz-celula {
  opacity: 0;
  transform: perspective(500px) rotateX(-90deg);
  transform-origin: 50% 0;
  transition: transform .6s var(--curva), opacity .3s ease;
}

.js .matriz[data-onda].visivel .matriz-celula {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--onda, 0) * 50ms);
}

.js .cal-grafico[data-encaixe] .cal-banda {
  transform: scaleX(0);
  transition: transform .9s var(--curva);
}

.js .cal-grafico[data-encaixe].visivel .cal-banda {
  transform: scaleX(1);
  transition-delay: var(--d, 0s);
}

.js .cal-grafico[data-encaixe] .cal-ponto {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .7s ease, transform .7s var(--curva);
}

.js .cal-grafico[data-encaixe].visivel .cal-ponto {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--d, 0s) + .35s);
}

.js .cal-grafico[data-encaixe] .cal-ponto-rotulo {
  opacity: 0;
  transform: translateX(calc(-50% - 24px));
  transition: opacity .7s ease, transform .7s var(--curva);
}

.js .cal-grafico[data-encaixe].visivel .cal-ponto-rotulo {
  opacity: 1;
  transform: translateX(-50%);
  transition-delay: calc(var(--d, 0s) + .35s);
}

.js tbody[data-revelar] .regua-mini-marca {
  opacity: 0;
  transform: translateX(-36px);
  transition: transform .9s var(--curva), opacity .4s ease;
}

.js tbody[data-revelar].visivel .regua-mini-marca {
  opacity: 1;
  transform: none;
  transition: transform .9s var(--curva), opacity .4s ease;
  transition-delay: calc(var(--d, 0s) + .25s);
}

.revelar-tudo [data-revelar] > *,
.revelar-tudo .mapa-trilho,
.revelar-tudo .mapa-regiao,
.revelar-tudo .mapa-rotulo,
.revelar-tudo .mapa-marca,
.revelar-tudo .mapa-numero,
.revelar-tudo .mapa-fora,
.revelar-tudo .mapa-fora-texto,
.revelar-tudo .matriz-celula,
.revelar-tudo .cal-banda,
.revelar-tudo .cal-ponto,
.revelar-tudo .cal-ponto-rotulo,
.revelar-tudo .regua-mini-marca {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.revelar-tudo .mapa-rotulo,
.revelar-tudo .mapa-numero-meio,
.revelar-tudo .cal-ponto-rotulo,
.revelar-tudo .cal-tick-meio {
  transform: translateX(-50%) !important;
}

.revelar-tudo .mapa-numero-fim,
.revelar-tudo .cal-tick-fim {
  transform: translateX(-100%) !important;
}

/* Movimento reduzido */

.movimento-reduzido *,
.movimento-reduzido *::before,
.movimento-reduzido *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
}

.movimento-reduzido [data-revelar] > *,
.movimento-reduzido .mapa-trilho,
.movimento-reduzido .mapa-regiao,
.movimento-reduzido .mapa-rotulo,
.movimento-reduzido .mapa-marca,
.movimento-reduzido .mapa-numero,
.movimento-reduzido .mapa-fora,
.movimento-reduzido .mapa-fora-texto,
.movimento-reduzido .matriz-celula,
.movimento-reduzido .cal-banda,
.movimento-reduzido .cal-ponto,
.movimento-reduzido .cal-ponto-rotulo,
.movimento-reduzido .regua-mini-marca {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.movimento-reduzido .mapa-rotulo,
.movimento-reduzido .mapa-numero-meio,
.movimento-reduzido .cal-ponto-rotulo,
.movimento-reduzido .cal-tick-meio {
  transform: translateX(-50%) !important;
}

.movimento-reduzido .mapa-numero-fim,
.movimento-reduzido .cal-tick-fim {
  transform: translateX(-100%) !important;
}

.movimento-reduzido .espera-progresso-preenchido::after {
  display: none !important;
}

/* Impressão */

@media print {
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #FFFFFF !important;
    color: #000000;
  }

  .barra-topo,
  .espera,
  .abertura-helice,
  .abertura-legenda,
  .analise-helice,
  .analise-helice-legenda,
  .cabecalho-pagina-acoes,
  .pular,
  .abertura-exemplos,
  .form-arquivo {
    display: none !important;
  }

  .pagina {
    padding: 0 !important;
  }

  .folha {
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  [data-revelar] > *,
  .mapa-trilho,
  .mapa-regiao,
  .mapa-rotulo,
  .mapa-marca,
  .mapa-numero,
  .mapa-fora,
  .mapa-fora-texto,
  .matriz-celula,
  .cal-banda,
  .cal-ponto,
  .cal-ponto-rotulo,
  .regua-mini-marca {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .mapa-rotulo,
  .mapa-numero-meio,
  .cal-ponto-rotulo,
  .cal-tick-meio {
    transform: translateX(-50%) !important;
  }

  .mapa-numero-fim,
  .cal-tick-fim {
    transform: translateX(-100%) !important;
  }

  a {
    text-decoration: none !important;
  }

  .tabela-rolagem {
    background: none;
  }

  tr,
  .ranking-linha,
  .medida {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Telas menores */

@media (max-width: 1200px) {
  /* Barra superior compacta e sem transbordo */
  .barra-topo-interna {
    gap: 20px;
  }

  .marca,
  .trilho,
  .barra-topo-direita {
    min-width: 0;
  }

  .barra-topo-direita {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .trilho-etapa + .trilho-etapa::before {
    width: 40px;
    margin: 0 10px;
  }

  .selo-local {
    padding: 5px 7px;
  }

  .selo-local-texto {
    display: none;
  }
}

@media (max-width: 1100px) {
  /* Barra superior mais enxuta */
  .marca-projeto {
    max-width: 180px;
  }

  .alternar-movimento-texto {
    display: none;
  }

  .folha {
    padding: 40px 40px 32px;
  }

  .abertura-helice {
    margin: 28px -40px 0;
  }

  .analise-helice {
    margin: 0 -40px 4px;
  }
}

@media (max-width: 900px) {
  .barra-topo-interna {
    grid-template-columns: 1fr auto;
    height: auto;
    padding: 10px 20px;
    gap: 8px 16px;
  }

  .barra-topo-direita {
    grid-row: 1;
    grid-column: 2;
  }

  .trilho {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .trilho-lista {
    justify-content: space-between;
  }

  .trilho-etapa + .trilho-etapa::before {
    width: 28px;
    margin: 0 8px;
  }

  .colunas-2 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .colunas-2 > :nth-child(odd) {
    padding-right: 0;
  }

  .colunas-2 > :nth-child(even) {
    padding-left: 0;
    border-left: none;
  }

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

  .medida:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }

  .medida:nth-child(3)::before {
    left: 0;
  }

  .medida:nth-child(n+3) {
    border-top: 1px solid var(--linha);
  }

  .opcoes {
    grid-template-columns: 1fr;
  }

  .cal-linha {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .pagina {
    padding: 0 0 32px;
  }

  .folha {
    border-radius: 0;
    box-shadow: none;
    padding: 24px 16px;
  }

  .marca-projeto,
  .selo-local-texto,
  .alternar-movimento-texto {
    display: none;
  }

  .dica-movimento {
    width: min(320px, calc(100vw - 32px));
  }

  .trilho-nome {
    font-size: 13px;
  }

  .titulo-pagina {
    font-size: 24px;
  }

  .abertura-helice {
    margin: 22px -16px 0;
    height: 190px;
  }

  .analise-helice {
    margin: 0 -16px 4px;
  }

  .abertura-texto {
    font-size: 17px;
  }

  .medida-valor {
    font-size: 36px;
  }

  .medida-resto {
    font-size: 18px;
  }

  .busca {
    grid-template-columns: 1fr;
  }

  .busca-resumo {
    align-items: flex-start;
  }

  .cabecalho-pagina-acoes {
    width: 100%;
  }

  .espera {
    padding: 18px 16px 20px;
  }

  .espera-local {
    font-size: 11.5px;
    max-width: 58%;
  }

  .espera-titulo {
    font-size: 21px;
  }

  .espera-etapa {
    font-size: 0;
  }

  .cal-ponto-rotulo {
    display: none;
  }

  .cal-tick {
    font-size: 10.5px;
  }
}

@media (max-width: 340px) {
  .medidas {
    grid-template-columns: 1fr;
  }

  .medida + .medida {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--linha);
  }

  .medida + .medida::before {
    left: 0;
  }
}

@media (max-width: 420px) {
  .barra-topo-interna {
    padding: 10px 12px;
    gap: 8px 10px;
  }

  .marca {
    gap: 8px;
  }

  .marca-icone {
    width: 28px;
    height: 28px;
  }

  .marca-nome {
    font-size: 15px;
  }

  .link-topo {
    padding: 6px 8px;
    font-size: 13px;
  }

  .alternar-movimento {
    padding: 4px;
  }

  .barra-topo-direita {
    gap: 8px;
  }
}

/* Página Tubos */

.tubos-palco {
  position: relative;
  background:
    linear-gradient(rgba(124, 155, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(124, 155, 255, .07) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(1100px 620px at 50% 42%, #18296E 0%, var(--instrumento) 62%);
  background-color: var(--instrumento);
  border-radius: 14px;
  padding: 36px 32px 28px;
  color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(11, 20, 51, .25);
  margin-bottom: 40px;
}

.tubos-bandeja {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
  padding: 12px 4px 20px;
}

.tubo {
  background: none;
  border: none;
  padding: 8px 4px 6px;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  color: inherit;
  font-family: inherit;
  transition: transform .2s var(--curva);
  user-select: none;
  -webkit-user-select: none;
}

.tubo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .15) 0%, transparent 70%);
  opacity: var(--progresso, 0);
  pointer-events: none;
  transition: opacity .12s;
}

.tubo:hover:not([aria-pressed="true"]) {
  transform: translateY(-3px);
}

.tubo:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 4px;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(219, 134, 14, .4);
}

.tubo[aria-pressed="true"] {
  transform: translateY(-6px);
}

.tubo[aria-pressed="true"] .tubo-corpo {
  box-shadow: 0 0 0 3px var(--laranja), 0 4px 16px rgba(219, 134, 14, .4);
  border-color: rgba(255, 255, 255, .6);
}

.tubo[aria-pressed="true"] .tubo-tampa {
  border-color: var(--laranja);
}

.tubo[aria-pressed="true"] .tubo-nome {
  color: #F5B86A;
  font-weight: 700;
}

.tubo-tampa {
  width: 36px;
  height: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .2) 100%);
  border: 1px solid rgba(255, 255, 255, .4);
  border-bottom: none;
  border-radius: 4px 4px 1px 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  position: relative;
  z-index: 2;
}

.tubo-corpo {
  position: relative;
  width: 32px;
  height: 110px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 2px 2px 16px 16px / 2px 2px 36px 36px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, .18) 100%);
  transition: box-shadow .2s, border-color .2s;
  z-index: 1;
}

.tubo-corpo::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 3px;
  bottom: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .15) 80%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}

.tubo-liquido {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background-color: var(--cor, #E6397F);
  border-radius: 0 0 15px 15px / 0 0 35px 35px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .25), inset 0 -4px 8px rgba(0, 0, 0, .25);
  filter: drop-shadow(0 6px 10px var(--cor, #E6397F));
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--cor, #E6397F) 70%, transparent));
  transition: background-color 120ms ease;
}

.tubo-liquido::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .1) 60%, transparent 100%);
  pointer-events: none;
}

.tubo-nome {
  display: block;
  margin-top: 12px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: #FFFFFF;
  white-space: nowrap;
  transition: color .2s;
}

.tubo-pct {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  color: #A9B2C8;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tubo-referencia {
  position: relative;
}

.tubo-referencia::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 24px;
  width: 1px;
  border-left: 1px dashed rgba(255, 255, 255, .35);
  pointer-events: none;
}

.tubos-tempo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #FFFFFF;
}

.tubos-tocar,
.botao-principal {
  background: #183C9E;
  border-color: #3B66D6;
  color: #FFFFFF;
}

.tubos-tocar:hover,
.botao-principal:hover {
  background: #123083;
  border-color: #5B84EC;
  color: #FFFFFF;
}

.tubos-tocar[aria-pressed="true"] {
  background: var(--laranja);
  border-color: var(--laranja);
  color: #0B1433;
  font-weight: 800;
}

.tubos-tocar[aria-pressed="true"]:hover {
  background: var(--laranja-titulo);
  border-color: var(--laranja-titulo);
  color: #0B1433;
}

.tubos-cursor-rotulo {
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
}

.tubos-cursor {
  flex: 1;
  min-width: 140px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
  accent-color: var(--laranja);
  cursor: pointer;
  outline: none;
}

.tubos-cursor:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.tubos-cursor::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--laranja);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform .15s ease;
}

.tubos-cursor::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.tubos-cursor::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--laranja);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform .15s ease;
}

.tubos-cursor::-moz-range-thumb:hover {
  transform: scale(1.15);
}

.tubos-relogio {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  min-width: 7ch;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.tubos-duracao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
}

.tubos-duracao .campo-numero,
.tubos-duracao input[type="number"] {
  width: 5.5em;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 4px;
  color: #FFFFFF;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 8px;
  text-align: right;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s;
}

.tubos-duracao .campo-numero:focus-visible,
.tubos-duracao input[type="number"]:focus-visible {
  border-color: var(--laranja);
  outline: 2px solid var(--laranja);
  outline-offset: 1px;
}

.tubos-faixas {
  --faixa-nome: 9rem;
  --faixa-gap: 12px;
  --faixa-inicio: calc(var(--faixa-nome) + var(--faixa-gap));
  --faixa-largura: calc(100% - var(--faixa-inicio));
  position: relative;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tubos-faixa-linha {
  width: 100%;
  background: none;
  border: none;
  padding: 4px 6px;
  margin: 0;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--faixa-nome) minmax(0, 1fr);
  align-items: center;
  gap: var(--faixa-gap);
  border-radius: 4px;
  position: relative;
  transition: background-color .15s ease;
  font-family: inherit;
}

.tubos-faixa-linha:hover {
  background: rgba(231, 235, 245, .45);
}

.tubos-faixa-linha.selecionada {
  box-shadow: inset 3px 0 0 var(--laranja);
  background: rgba(231, 235, 245, .6);
}

.tubos-faixa-linha.selecionada .tubos-faixa-nome {
  color: var(--azul);
  font-weight: 700;
}

.tubos-faixa-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}

.tubos-faixa {
  width: 100%;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--linha);
  display: block;
  touch-action: none;
  cursor: ew-resize;
}

.tubos-faixas-marcador {
  position: absolute;
  top: 0;
  bottom: 24px;
  width: 2px;
  background: var(--laranja);
  left: calc(var(--faixa-inicio) + var(--faixa-largura) * var(--x, 0));
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}

.tubos-faixas-marcador::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--laranja);
}

.tubos-faixas-eixo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cinza);
  pointer-events: none;
}

.tubos-faixas-eixo span {
  position: absolute;
  left: calc(var(--faixa-inicio) + var(--faixa-largura) * var(--x, 0));
  transform: translateX(-50%);
  white-space: nowrap;
  top: 4px;
  font-variant-numeric: tabular-nums;
}

.tubos-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 32px;
  align-items: start;
}

.tubos-editor-campos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tubos-editor .campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--tinta);
}

.tubos-editor .campo-texto {
  font: 400 15px/1.4 var(--fonte);
  color: var(--tinta);
  padding: 8px 12px;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: #FFFFFF;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.tubos-editor .campo-texto:focus-visible {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(17, 47, 131, .15);
}

.tubos-editor .campo-numero {
  font: 700 14px/1.4 var(--mono);
  color: var(--tinta);
  padding: 7px 10px;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: #FFFFFF;
  outline: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s, box-shadow .2s;
}

.tubos-editor .campo-numero:focus-visible {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(17, 47, 131, .15);
}

.tubos-editor .tubos-par {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.tubos-editor .tubos-par input[type="range"] {
  flex: 1;
  min-width: 80px;
  accent-color: var(--azul);
  cursor: pointer;
}

.tubos-editor .tubos-par .campo-numero {
  width: 5.5em;
  flex-shrink: 0;
}

.tubos-editor .tubos-curva-opcoes {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tubos-editor .tubos-curva-opcoes legend {
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  color: var(--tinta);
  padding: 0;
  margin-bottom: 4px;
}

.tubos-editor .tubos-curva-opcoes label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--linha);
  background: #FFFFFF;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
  user-select: none;
}

.tubos-editor .tubos-curva-opcoes label:hover {
  background: var(--azul-suave);
  border-color: #B9C4E0;
}

.tubos-editor .tubos-curva-opcoes input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.tubos-editor .tubos-curva-opcoes label:has(input:checked) {
  background: var(--azul);
  border-color: var(--azul);
  color: #FFFFFF;
}

.tubos-editor .tubos-curva-opcoes label:has(input:focus-visible) {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(219, 134, 14, .35);
}

.tubos-editor .tubos-cores {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.tubos-editor .tubos-cores .campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.tubos-editor .tubos-cores input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border: 2px solid var(--linha);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: none;
  overflow: hidden;
  transition: transform .15s, border-color .15s;
}

.tubos-editor .tubos-cores input[type="color"]:hover {
  transform: scale(1.08);
  border-color: var(--azul);
}

.tubos-editor .tubos-cores input[type="color"]:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

.tubos-editor .tubos-cores input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.tubos-editor .tubos-cores input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.tubos-editor .tubos-cores input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.tubos-editor .tubos-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.tubos-grafico {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tubos-curva {
  width: 100%;
  height: 260px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: #FFFFFF;
  display: block;
}

.tubos-leitura {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  min-height: 3em;
}

/* Movimento reduzido */

.movimento-reduzido .tubo,
.movimento-reduzido .tubo-liquido,
.movimento-reduzido .tubos-cursor::-webkit-slider-thumb,
.movimento-reduzido .tubos-cursor::-moz-range-thumb {
  transition: none !important;
}

/* Responsivo */

@media (max-width: 900px) {
  .tubos-editor {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 760px) {
  .tubos-bandeja {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px 10px;
  }
}

@media (max-width: 600px) {
  .tubos-palco {
    padding: 24px 16px 20px;
  }

  .tubos-tempo {
    flex-wrap: wrap;
    gap: 12px 14px;
  }

  .tubos-tocar {
    order: 1;
  }

  .tubos-cursor-rotulo {
    order: 2;
  }

  .tubos-relogio {
    order: 3;
    min-width: 7ch;
    white-space: nowrap;
  }

  .tubos-duracao {
    order: 4;
    margin-left: auto;
  }

  .tubos-cursor {
    order: 5;
    width: 100%;
    flex-basis: 100%;
  }

  .tubos-faixas {
    --faixa-nome: 6rem;
  }
}

@media (max-width: 420px) {
  .tubos-bandeja {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .tubo-corpo {
    height: 85px;
    width: 28px;
    border-radius: 2px 2px 14px 14px / 2px 2px 28px 28px;
  }

  .tubo-tampa {
    width: 30px;
    height: 7px;
  }

  .tubo-liquido {
    border-radius: 0 0 13px 13px / 0 0 27px 27px;
  }

  .tubo-nome {
    font-size: 11.5px;
    margin-top: 8px;
  }

  .tubo-pct {
    font-size: 11px;
  }

  .link-topo {
    padding: 6px 6px;
    font-size: 12px;
  }

  .barra-topo-direita {
    gap: 4px;
  }

  .selo-local {
    display: none;
  }
}

/* Impressão */

@media print {
  .tubos-palco {
    background: #FFFFFF !important;
    border: 1px solid var(--linha) !important;
    color: var(--tinta) !important;
    box-shadow: none !important;
    padding: 20px 0 !important;
  }

  .tubos-tempo,
  .tubos-acoes {
    display: none !important;
  }

  .tubo-nome {
    color: var(--tinta) !important;
  }

  .tubo-pct {
    color: var(--cinza) !important;
  }

  .tubo-corpo {
    border-color: #999999 !important;
    background: #F7F8FC !important;
  }

  .tubo-tampa {
    background: #E0E0E0 !important;
    border-color: #999999 !important;
  }

  .tubo-referencia::before {
    border-left-color: #999999 !important;
  }

  .tubos-palco,
  .tubos-faixas,
  .tubos-editor-secao {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Página Tubos: simulação do conjunto analisado (fase 5) */

.tubos-aviso {
  margin-bottom: 24px;
}

.tubos-origem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--fundo-linha);
}

.tubos-origem-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0;
}

.tubos-origem-dados div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tubos-origem-dados dt {
  font-size: 13px;
  color: var(--cinza);
}

.tubos-origem-dados dd {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta);
}

.tubos-origem-nota {
  flex: 1 1 260px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cinza);
}

.tubos-bandeja .tubo-nome {
  white-space: normal;
  text-align: center;
  min-height: 2.5em;
}

.tubos-velocidade {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  font-size: 14px;
}

.tubos-velocidade select {
  min-width: 5.5em;
}

.tubos-faixas-leitura {
  position: absolute;
  top: 0;
  bottom: 24px;
  width: 0;
  border-left: 2px dashed var(--azul);
  left: calc(var(--faixa-inicio) + var(--faixa-largura) * var(--x, 0));
  pointer-events: none;
  z-index: 4;
}

.tubos-faixas-leitura[hidden] {
  display: none;
}

.tubos-tabela tbody tr {
  cursor: pointer;
}

.tubos-tabela tbody tr.selecionada {
  background: var(--azul-suave);
  box-shadow: inset 3px 0 0 var(--laranja);
}

.tubos-diag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.tubos-diag-positivo {
  background: #FFF4C2;
  color: #6B4E00;
}

.tubos-diag-negativo {
  background: var(--rosa-suave);
  color: var(--rosa-escuro);
}

.tubos-diag-controle_ok {
  background: var(--verde-suave);
  color: var(--verde);
}

.tubos-diag-invalido {
  background: var(--vermelho-suave);
  color: var(--vermelho);
}

.tubos-grafico-largo {
  margin-top: 24px;
}

.tubos-grafico-largo .tubos-curva {
  height: 300px;
}

@media (max-width: 600px) {
  .tubos-velocidade {
    order: 4;
  }

  .tubos-origem {
    padding: 14px 16px;
  }
}

@media print {
  .tubos-origem .botao {
    display: none !important;
  }
}

/* Fase 6: KPI "a calibrar" e o zero das réguas de distância */

.medida-tem-calibrar::before {
  background: var(--laranja);
}

.medida-calibrar {
  color: var(--laranja-texto);
}

.regua-mini-zero {
  position: absolute;
  top: 0;
  width: 1px;
  height: 14px;
  background: var(--cinza);
}