/* O cadastro em 3 passos: os passos 2 e 3 no mesmo lugar dos formulários de entrar e criar conta, com a mesma troca por opacidade */
  html[data-modo='criar']:not([data-passo='1']) #form-criar,
  html:not([data-modo='criar']) #form-carteira, html:not([data-passo='2']) #form-carteira,
  html:not([data-modo='criar']) #form-codigo, html:not([data-passo='3']) #form-codigo {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 140ms var(--ds-curva), visibility 0s linear 140ms;
  }
  /* movimento reduzido: troca seca, como entre entrar e criar conta (o que sai não fica por cima do que entra) */
  @media (prefers-reduced-motion: reduce) {
    html[data-modo='criar']:not([data-passo='1']) #form-criar, html:not([data-passo='2']) #form-carteira, html:not([data-passo='3']) #form-codigo { transition: none; }
  }
  /* janela baixa no computador (acima de 820 px o crédito fica à direita da coluna): o bloco começa a 80 px (19 px abaixo da marca) e para
     a 16 px da borda; a 720 px de altura a página não rola (com o cabeçalho do passo ela rolava 28 px) */
  @media (min-width: 821px) and (max-height: 760px) {
    .palco { --reserva: calc(var(--bloco) + 16px); min-height: calc(var(--bloco) + 96px); }
    .form { top: max(80px, min(calc(50% - 186px), calc(100% - var(--reserva)))); }
  }
  /* o cabeçalho do passo: uma linha só, com a mesma altura nos três passos ("Voltar" à esquerda, o indicador à direita) */
  .passo-cab { display: flex; align-items: center; justify-content: flex-end; min-height: 32px; margin: 0 0 8px; }
  .passo-ind { margin: 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
  /* o Voltar do Observatório (observatorio.css, .obs-voltar): a seta, 32 px; 44 px no toque */
  .passo-voltar { display: inline-flex; align-items: center; gap: 4px; height: 32px; margin: 0 auto 0 -8px; padding: 0 10px 0 6px; border: 0; border-radius: var(--ds-raio-medio);
    background: transparent; color: var(--ds-cor-texto-2); font: 500 13px/18px var(--lp-fonte-texto); cursor: pointer;
    transition: background-color var(--ds-dur-rapida) var(--ds-curva), color var(--ds-dur-rapida) var(--ds-curva); }
  .passo-voltar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  @media (hover: hover) { .passo-voltar:hover { background: var(--ds-cor-realce); color: var(--ds-cor-texto); } }
  .passo-voltar:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  .passo-voltar:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  @media (pointer: coarse), (max-width: 760px) { .passo-cab { min-height: 44px; } .passo-voltar { height: 44px; } }
  /* o passo 2: a busca, o aviso, a lista da carteira e o botão */
  .cart-busca { position: relative; margin: 0; }
  /* as sugestões cabem na janela (e no palco, que corta o que passa dele): a altura que sobra abaixo do campo */
  #cart-busca .busca-sug { max-height: var(--cart-sug-max, 360px); overflow-y: auto; overscroll-behavior: contain; }
  /* o aviso tem duas linhas reservadas: um aviso longo não empurra a lista nem o botão */
  /* o aviso diz o nome do que entrou ou saiu, em duas linhas no máximo (o nome inteiro está na lista) */
  .cart-aviso { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 36px; max-height: 36px; margin: 8px 0 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; text-wrap: pretty; }
  .pa-so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .cart-lista { text-align: left; list-style: none; margin: 4px -6px 0; padding: 0 6px; max-height: min(188px, 30vh); overflow-y: auto; overscroll-behavior: contain; }
  /* a folga de 6 px dos lados: a lista rola, e o anel de foco do Remover (2 + 2 px) não pode ser cortado */
  .cart-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
  .cart-lista li + li { box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
  .cart-item { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  /* o nome inteiro, em quantas linhas precisar: é o único lugar da tela com ele (o aviso corta em duas linhas) */
  .cart-nome { color: var(--ds-cor-texto); font-size: 15px; line-height: 20px; font-weight: 500; overflow-wrap: anywhere; }
  .cart-info { color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
  /* o título do passo 2 recebe o foco na troca (o leitor de tela anuncia o passo; a lista de exemplos não abre sozinha) */
  .titulo[tabindex="-1"]:focus { outline: none; }
  .cart-vazia { color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
  @media (max-width: 760px) { .cart-lista li.cart-vazia { justify-content: center; text-align: center; } } /* o bloco é centrado no celular */
  /* os botões de texto da peça (Remover, Reenviar): 13 px, o mesmo recuo, e o alvo de toque de 44 px numa faixa transparente */
  .botao-texto { position: relative; flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 0; border-radius: var(--ds-raio-medio); background: transparent;
    color: var(--ds-cor-texto-2); font: 500 13px/18px var(--lp-fonte-texto); cursor: pointer; transition: background-color var(--ds-dur-rapida) var(--ds-curva), color var(--ds-dur-rapida) var(--ds-curva); }
  .botao-texto::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  @media (hover: hover) { .botao-texto:hover { background: var(--ds-cor-realce); color: var(--ds-cor-texto); } }
  .botao-texto:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  .botao-texto:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .botao-texto:disabled { cursor: default; background: transparent; color: var(--ds-cor-texto-2); }
  /* o limite do Gratuito: a frase fica sempre no layout (a altura já reservada, nada se move) e aparece só por opacidade
     quando a carteira passa de 3 processos; texto 2, sem cor e sem janela por cima; sai pelo mesmo caminho */
  .cart-limite { margin: 8px 0 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; text-wrap: pretty;
    opacity: 0; visibility: hidden; transition: opacity var(--ds-dur-media) var(--ds-curva), visibility 0s linear var(--ds-dur-media); }
  .cart-limite[data-visivel] { opacity: 1; visibility: visible; transition-delay: 0s; }
  @media (prefers-reduced-motion: reduce) { .cart-limite { transition: opacity 180ms linear, visibility 0s linear 180ms; } }
  .passo-acoes { margin-top: 20px; }
  /* o passo 3: seis campos de um dígito, no vidro dos campos da entrada */
  .digitos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
  .digito { width: 100%; height: 54px; padding: 0; border: 0; outline: 0; border-radius: var(--ds-raio-grande); text-align: center; color: var(--ds-cor-texto);
    font: 500 22px/26px var(--lp-fonte-texto); font-variant-numeric: tabular-nums; caret-color: var(--ds-cor-texto);
    background: color-mix(in srgb, var(--ds-cor-superficie) 74%, transparent); -webkit-backdrop-filter: var(--ds-material-desfoque); backdrop-filter: var(--ds-material-desfoque);
    box-shadow: inset 0 0 0 1px var(--ds-cor-borda), inset 0 1px 0 color-mix(in srgb, var(--ds-cor-texto) 16%, transparent); transition: background-color var(--ds-dur-rapida) var(--ds-curva); }
  .digito:hover { background: color-mix(in srgb, var(--ds-cor-superficie) 82%, transparent); }
  .digito:focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ds-cor-texto) 52%, transparent), 0 0 0 4px color-mix(in srgb, var(--ds-cor-texto) 10%, transparent); }
  @media (prefers-reduced-transparency: reduce) { .digito { background: var(--ds-cor-superficie); -webkit-backdrop-filter: none; backdrop-filter: none; } }
  .digito::selection { background: color-mix(in srgb, var(--ds-cor-texto) 28%, transparent); color: var(--ds-cor-texto); }
  .cod-reenviar { margin: 12px 0 0 -10px; font-variant-numeric: tabular-nums; }
  /* a 340 px ou menos, os seis campos usam a margem do bloco até a da página (16 px) e 4 px entre eles: 44 px ou mais cada */
  @media (max-width: 340px) { .digitos { gap: 4px; margin-right: -8px; margin-left: -8px; } }