/*
  RMC · Renovação de Certificado Dinâmico Itaú

  Identidade da RMC Brothers (rmcbrothers.com.br), aplicada a uma ferramenta
  operacional: fundo claro, teal da marca nos controles, e o laranja do logo
  como acento. Tipografia é do sistema — decisão do dono do projeto, as fontes
  do site (Rubik/Poppins) não foram empacotadas.

  O que NÃO virou marketing: os três acentos de estado continuam semânticos.
  Cada um codifica uma situação da janela de renovação, que é a informação que
  decide tudo nesta tela, e por isso nenhum deles é escolhido por gosto.
*/

:root {
  /* ---- marca RMC ---------------------------------------------------------- */
  --rmc-teal:        #095A69;  /* cor dominante do site: botões, ênfase */
  --rmc-teal-escuro: #002A2E;  /* o "RMC" do logo */
  --rmc-teal-claro:  #2D6876;  /* hover */
  --rmc-laranja:     #E0732C;  /* o "brothers" do logo — acento, nunca texto */

  /* ---- superfícies -------------------------------------------------------- */
  --fundo:      #F5F6F7;
  --cartao:     #FFFFFF;
  --recuado:    #FAFBFB;  /* campos, trilhos: um degrau abaixo do cartão */
  --linha:      #E4E7E9;
  --linha-viva: #CBD1D4;

  /* ---- texto -------------------------------------------------------------- */
  --texto:   #494949;  /* corpo, igual ao site */
  --titulo:  #2B3A3D;
  --suave:   #6B7276;  /* 4.9:1 no cartão — legível, não decorativo */
  --apagado: #8A9195;  /* só rótulos curtos e metadados */

  /*
    ---- estados da janela — semânticos, não ornamentais ---------------------
    Escurecidos em relação ao preenchimento porque texto colorido sobre branco
    precisa de 4.5:1. Por isso cada estado tem duas cores: uma que se lê e uma
    que se pinta.
  */
  --dentro:        #0F7A4F;  --dentro-fundo:  #2E9E72;
  --cedo:          #A85212;  --cedo-fundo:    var(--rmc-laranja);
  --perigo:        #BE3B2C;  --perigo-fundo:  #D25F52;

  --foco: var(--rmc-teal);

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Roboto Mono", Consolas, monospace;
  --sans: ui-sans-serif, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;

  --raio: 10px;
  --raio-campo: 8px;
  --pilula: 999px;  /* os botões do site são pílula — é o traço de forma da marca */

  --sombra: 0 1px 2px rgba(0, 42, 46, 0.04), 0 4px 16px rgba(0, 42, 46, 0.05);

  /* ---- escala de espaçamento ---------------------------------------------- */
  --e1: 8px;
  --e2: 12px;
  --e3: 16px;
  --e4: 24px;
  --e5: 32px;
  --e6: 48px;

  --transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- estrutura */

/* Filete da marca: teal com a emenda laranja do logo. */
.filete {
  height: 3px;
  background: linear-gradient(to right, var(--rmc-teal) 0 62%, var(--rmc-laranja) 62% 100%);
}

.barra {
  background: var(--cartao);
  border-bottom: 1px solid var(--linha);
  padding: var(--e3) var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}

.barra .logo {
  height: 34px;
  width: auto;
  display: block;
  flex: none;
}

/* Divisória fina entre o logo e o nome da ferramenta. */
.barra .risco {
  width: 1px;
  align-self: stretch;
  background: var(--linha);
  flex: none;
}

.barra .titulo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.barra .titulo strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--titulo);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.barra .titulo span {
  font-size: 12px;
  color: var(--apagado);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/*
  Link para a referência da API. Empurrado para a direita, discreto: é atalho para quem
  integra, não parte do fluxo de quem veio renovar um certificado.
*/
.barra .link-docs {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--linha-viva);
  border-radius: var(--pilula);
  color: var(--rmc-teal);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}

.barra .link-docs:hover {
  border-color: var(--rmc-teal);
  background: color-mix(in srgb, var(--rmc-teal) 6%, transparent);
}

.barra .link-docs svg { width: 16px; height: 16px; flex: none; }

main {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--e6) var(--e4) 96px;
}

.passo { margin-bottom: var(--e6); }
.passo[hidden] { display: none; }

/*
  Título da etapa. O NÚMERO não aparece aqui: ele vive na trilha do wizard, e
  repeti-lo a 40px de distância seria a mesma informação duas vezes.
  O `data-n` continua no HTML porque é ele que amarra a seção à trilha.
*/
.passo > h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--suave);
  margin: 0 0 var(--e2);
}

.passo > h2:focus { outline: none; }
.passo > h2:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; }

/* ------------------------------------------------------- trilha do wizard */

/*
  Indicador de progresso, NÃO navegação. Não é clicável de propósito: pular para
  uma etapa cujo pré-requisito não foi cumprido é como se chega a um POST com
  dados pela metade. Voltar acontece por botão explícito, e só onde é seguro.
*/
.trilha { margin: 0 0 var(--e5); }

.trilha ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.trilha li {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--apagado);
  text-align: center;
}

/* Conector: sai da bolha anterior e chega nesta. */
.trilha li::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--linha);
}

.trilha li:first-child::before { display: none; }

.trilha .bolha {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cartao);
  border: 2px solid var(--linha);
  color: var(--apagado);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}

.trilha li.atual { color: var(--rmc-teal); font-weight: 600; }

.trilha li.atual .bolha {
  background: var(--rmc-teal);
  border-color: var(--rmc-teal);
  color: #FFFFFF;
}

.trilha li.feito { color: var(--dentro); }

.trilha li.feito::before { background: var(--dentro); }

.trilha li.feito .bolha {
  background: var(--dentro);
  border-color: var(--dentro);
  color: transparent;   /* o número dá lugar ao check */
}

.trilha li.feito .bolha::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
}

.painel {
  background: var(--cartao);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e5) var(--e5) calc(var(--e5) - 4px);
  box-shadow: var(--sombra);
}

/* -------------------------------------------------------------- formulários */

.campo { margin-bottom: var(--e4); }
.campo:last-child { margin-bottom: 0; }

/* Dois campos de arquivo em sequência precisam respirar mais que dois inputs. */
#entrada-pem .campo + .campo,
#entrada-pfx .campo + .campo { margin-top: var(--e4); }

label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--titulo);
  margin-bottom: var(--e1);
}

.dica {
  font-size: 12.5px;
  color: var(--suave);
  margin: var(--e1) 0 0;
  line-height: 1.6;
}

.dica a { color: var(--rmc-teal); text-underline-offset: 2px; }
.dica a:hover { color: var(--rmc-teal-claro); }

.dica code, .aviso code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  color: var(--titulo);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
  word-break: break-all;
}

input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  background: var(--recuado);
  border: 1px solid var(--linha-viva);
  border-radius: var(--raio-campo);
  color: var(--titulo);
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 13px;
  transition: border-color var(--transicao), background var(--transicao), box-shadow var(--transicao);
}

input[type="text"]:hover,
input[type="password"]:hover,
textarea:hover { border-color: var(--suave); }

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  background: var(--cartao);
  border-color: var(--rmc-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rmc-teal) 12%, transparent);
  outline: none;
}

input:focus-visible, textarea:focus-visible, button:focus-visible, .arquivo:focus-within {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* O anel de foco do input já é o box-shadow; evita anel duplo. */
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
textarea:focus-visible { outline: none; }

input:disabled, textarea:disabled {
  color: var(--apagado);
  background: var(--fundo);
}

textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

/*
  Caixa de opção. Fica sempre visível, nunca atrás de um "avançado": ela existe porque o
  sintoma que a motiva é enganoso — o sistema de destino diz que a senha está incorreta
  estando certa — e quem cai nele precisa achar a opção sem saber o nome do problema.

  Quando marcada, muda para âmbar: a escolha reduz a proteção do arquivo e não deve passar
  despercebida na revisão antes de segurar o botão.
*/
.caixa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--e3);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  background: var(--recuado);
  cursor: pointer;
  font-weight: 400;
  transition: border-color var(--transicao), background var(--transicao);
}

.caixa:hover { border-color: var(--linha-viva); }

.caixa input[type="checkbox"] {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--rmc-teal);
  flex: none;
  cursor: pointer;
}

.caixa strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--titulo);
}

.caixa .dica { margin-top: 4px; }

.caixa:has(input:checked) {
  border-color: color-mix(in srgb, var(--cedo) 45%, transparent);
  background: color-mix(in srgb, var(--cedo) 6%, var(--cartao));
}

.caixa:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Origem do dado no rótulo: separa o que vem do Itaú do que vem da RMC. */
.origem {
  font-weight: 400;
  color: var(--apagado);
  font-size: 12px;
}

/*
  Campo de segredo com botão de revelar. Confirmar o que foi digitado importa
  quando um caractere errado vira um 401 sem causa aparente — o usuário não
  consegue distinguir "digitei errado" de "a credencial está errada".
*/
.campo-com-olho { position: relative; display: flex; }

.campo-com-olho input { padding-right: 48px; }

.olho {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--suave);
  cursor: pointer;
  padding: 0;
  transition: color var(--transicao), background var(--transicao);
}

.olho svg { width: 18px; height: 18px; display: block; }

.olho:hover { color: var(--rmc-teal); background: var(--fundo); }
.olho[aria-pressed="true"] { color: var(--rmc-teal); }

/* Um ícone por estado; o aria-pressed que o app.js já mantém decide qual. */
.olho .icone-ocultar { display: none; }
.olho[aria-pressed="true"] .icone-ver { display: none; }
.olho[aria-pressed="true"] .icone-ocultar { display: block; }

/* Resumo de uma etapa já concluída, com o que foi informado e opção de alterar. */
.painel.resumo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  padding: var(--e3) var(--e4);
}

.resumo-rotulo { font-size: 12.5px; color: var(--apagado); }

.resumo-valor {
  font-family: var(--mono);
  font-size: 13px;
  flex: 1;
  min-width: 140px;
  word-break: break-all;
}

/* Alternador de formato de entrada (.pfx vs .crt+.key) */
.abas {
  display: flex;
  gap: 3px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--pilula);
  padding: 4px;
  margin-bottom: var(--e4);
}

.abas button {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--suave);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--pilula);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}

.abas button:hover:not([aria-selected="true"]) { color: var(--titulo); }

.abas button[aria-selected="true"] {
  background: var(--cartao);
  color: var(--rmc-teal);
  box-shadow: 0 1px 3px rgba(0, 42, 46, 0.10);
}

/* Área de arquivo */
.arquivo {
  display: block;
  border: 1.5px dashed var(--linha-viva);
  border-radius: var(--raio-campo);
  background: var(--recuado);
  padding: var(--e4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}

.arquivo:hover, .arquivo.sobre {
  border-color: var(--rmc-teal);
  background: color-mix(in srgb, var(--rmc-teal) 5%, var(--cartao));
}

.arquivo input { display: none; }

.arquivo .rotulo { font-size: 13px; color: var(--suave); }

.arquivo .escolhido {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--rmc-teal);
  font-weight: 600;
  word-break: break-all;
}

/* ------------------------------------------------------------------ botões */

/* Pílula: é a forma dos botões em rmcbrothers.com.br. */
button.acao {
  background: var(--rmc-teal);
  color: #FFFFFF;
  border: 1px solid var(--rmc-teal);
  border-radius: var(--pilula);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 26px;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}

button.acao:hover:not(:disabled) {
  background: var(--rmc-teal-claro);
  border-color: var(--rmc-teal-claro);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--rmc-teal) 28%, transparent);
}

button.acao:disabled { opacity: 0.4; cursor: not-allowed; }

button.discreto {
  background: transparent;
  color: var(--rmc-teal);
  border: 1px solid var(--linha-viva);
  border-radius: var(--pilula);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}

button.discreto:hover:not(:disabled) {
  border-color: var(--rmc-teal);
  background: color-mix(in srgb, var(--rmc-teal) 6%, transparent);
}

button.discreto:disabled { opacity: 0.45; cursor: not-allowed; }

/*
  SEGURAR PARA RENOVAR.
  A ação é irreversível e cabe uma vez por ano. Um clique acidental custa o
  certificado anual do cliente; dois segundos de intenção deliberada custam
  dois segundos.

  Fica fora da paleta da marca de propósito: é o único controle da tela que
  não deve parecer convidativo.
*/
.segurar {
  position: relative;
  width: 100%;
  margin-top: var(--e1);
  background: var(--cartao);
  border: 1.5px solid var(--perigo);
  border-radius: var(--pilula);
  color: var(--perigo);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  padding: 15px;
  cursor: pointer;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  transition: background var(--transicao);
}

.segurar:hover:not(:disabled) { background: color-mix(in srgb, var(--perigo) 5%, transparent); }

.segurar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--linha-viva);
  color: var(--apagado);
}

.segurar .preenche {
  position: absolute;
  inset: 0;
  background: var(--perigo);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  opacity: 0.18;
  pointer-events: none;
}

.segurar .texto { position: relative; }

/* ------------------------------------------------ A RÉGUA — o herói da tela */

.regua { margin: var(--e2) 0 var(--e5); }

.regua .trilho {
  position: relative;
  height: 10px;
  background: #E8EBEC;
  border-radius: var(--pilula);
}

/* O segmento em que a renovação é aceita. */
.regua .janela {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--dentro-fundo);
  border-radius: var(--pilula);
  left: var(--jan-ini, 80%);
  right: var(--jan-fim, 0%);
}

/*
  Os nomes de classe vêm de SituacaoDaJanela em minúsculas, como o app.js recebe do
  servidor: elegivel · aindacedo · janelaencerrada · vencido. NÃO abreviar para
  ".fora" ou ".encerrada" — foi o que existia antes e nenhum dos dois casava, então
  a régua ficava verde ("pode renovar") enquanto o número ao lado dizia o contrário.
*/
.regua.aindacedo .janela { background: var(--cedo-fundo); }
.regua.janelaencerrada .janela, .regua.vencido .janela { background: var(--perigo-fundo); }

/*
  Marcador de hoje.

  SEM transição no `left`, e isso NÃO é esquecimento. O valor vem de uma custom
  property (`--hoje`) sem @property; ao animar `left`, a substituição do var()
  não re-dispara a transição e o valor usado CONGELA no primeiro que foi aplicado.
  Medido: --hoje ia de 78,29% para 25% e o left computado continuava 521,4px
  indefinidamente. Só a primeira régua ficava certa — verificar um segundo
  certificado ("Usar outro certificado") deixava o marcador na posição do anterior.

  Marcador de data na posição errada é falso sinal no elemento em que a tela
  inteira se apoia. Mesmo critério que tirou o requestAnimationFrame do
  "segurar para renovar": entre animar e estar correto, estar correto.
*/
.regua .hoje {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  background: var(--rmc-teal-escuro);
  border-radius: 1px;
  left: var(--hoje, 50%);
}

.regua .hoje::after {
  content: "hoje";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--rmc-teal-escuro);
  letter-spacing: 0.04em;
}

.regua .marcas {
  display: flex;
  justify-content: space-between;
  gap: var(--e2);
  margin-top: var(--e2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--apagado);
}

/* ------------------------------------------------------------- diagnóstico */

.veredito {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.veredito .dias {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--titulo);
}

.veredito .rotulo { font-size: 13.5px; color: var(--suave); }

/* Mesmos tokens de SituacaoDaJanela usados na régua acima. Um espaço só entre o
   estado e `.dias`: o guarda CadaSituacaoDaJanelaTemCorPropriaNoCss casa literal. */
.elegivel .dias { color: var(--dentro); }
.aindacedo .dias { color: var(--cedo); }
.janelaencerrada .dias, .vencido .dias { color: var(--perigo); }

.explicacao {
  font-size: 13.5px;
  color: var(--suave);
  margin: var(--e2) 0 0;
  line-height: 1.6;
}

/* Dados do certificado, em mono — neste domínio os artefatos SÃO strings mono. */
.dados {
  margin: var(--e4) 0 0;
  border-top: 1px solid var(--linha);
  padding-top: var(--e4);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px var(--e4);
  font-size: 12.5px;
}

.dados dt { color: var(--apagado); }

.dados dd {
  margin: 0;
  font-family: var(--mono);
  color: var(--titulo);
  word-break: break-all;
}

.dados dd.thumb { letter-spacing: 0.06em; }

/* ---------------------------------------------------------------- mensagens */

.aviso {
  border: 1px solid color-mix(in srgb, var(--cedo) 28%, transparent);
  border-left: 3px solid var(--cedo);
  background: color-mix(in srgb, var(--cedo) 6%, var(--cartao));
  color: var(--titulo);
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-campo);
  font-size: 13px;
  margin-bottom: var(--e2);
  line-height: 1.6;
}

.aviso:last-child { margin-bottom: 0; }

.aviso.grave {
  border-color: color-mix(in srgb, var(--perigo) 28%, transparent);
  border-left-color: var(--perigo);
  background: color-mix(in srgb, var(--perigo) 6%, var(--cartao));
}

.aviso.bom {
  border-color: color-mix(in srgb, var(--dentro) 28%, transparent);
  border-left-color: var(--dentro);
  background: color-mix(in srgb, var(--dentro) 6%, var(--cartao));
}

.aviso strong { color: var(--titulo); }

.aviso ul { margin: var(--e1) 0 0; padding-left: 18px; }

/* Aviso que separa blocos — o de irreversibilidade fica entre os campos e o
   botão que os consome, e precisa de folga dos dois lados. */
.aviso.destaque { margin: var(--e5) 0 var(--e3); }

/* ---------------------------------------------------------------- entregues */

.arquivos {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-campo);
  overflow: hidden;
}

.arquivos li {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--linha);
  background: var(--recuado);
}

.arquivos li:last-child { border-bottom: 0; }

.arquivos .nome {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--titulo);
  flex: 1;
  word-break: break-all;
}

.arquivos .tam { font-family: var(--mono); font-size: 11.5px; color: var(--apagado); }

.selo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--pilula);
  border: 1px solid color-mix(in srgb, var(--perigo) 40%, transparent);
  background: color-mix(in srgb, var(--perigo) 8%, var(--cartao));
  color: var(--perigo);
  white-space: nowrap;
}

#avisosRenovacao:not(:empty) { margin-bottom: var(--e4); }

/* --------------------------------------------------------------- utilidades */

.linha-botoes {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  margin-top: var(--e4);
}

.escondido { display: none !important; }

.girando {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: gira 700ms linear infinite;
  vertical-align: -1px;
  margin-right: 7px;
}

/* No botão discreto o spinner é sobre fundo claro. */
.discreto .girando {
  border-color: color-mix(in srgb, var(--rmc-teal) 25%, transparent);
  border-top-color: var(--rmc-teal);
}

@keyframes gira { to { transform: rotate(360deg); } }

.revela { animation: revela 400ms cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes revela {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ rodapé */

.rodape {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--e4) var(--e5);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--apagado);
  flex-wrap: wrap;
}

.rodape img { height: 18px; width: auto; opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 620px) {
  main { padding: var(--e5) var(--e3) 72px; }
  .trilha { margin-bottom: var(--e4); }
  .trilha li { font-size: 10.5px; }
  .trilha .bolha { width: 24px; height: 24px; font-size: 11px; }
  .trilha li::before { top: 11px; }
  .rodape { padding: 0 var(--e3) var(--e4); }
  .barra { padding: var(--e2) var(--e3); gap: var(--e2); }
  .barra .logo { height: 28px; }

  /* Em tela estreita o rótulo sai e sobra o ícone: o link vira alvo de toque, não texto
     competindo com o nome da ferramenta.

     E o título passa a encolher (`flex: 1`) em vez de empurrar o link para uma segunda
     linha — sem isso a barra ganhava 56px de altura só para acomodar um ícone de 34px. */
  .barra .link-docs { padding: 8px; }
  .barra .link-docs span { display: none; }
  .barra .titulo { flex: 1; }
  .painel { padding: var(--e4) var(--e3) calc(var(--e4) - 4px); }
  .passo { margin-bottom: var(--e5); }
  .dados { grid-template-columns: 1fr; gap: 2px 0; }
  .dados dt { margin-top: var(--e1); }
  .veredito .dias { font-size: 28px; }
  .abas { flex-direction: column; border-radius: var(--raio-campo); }
  .abas button { border-radius: var(--raio-campo); }
}