/* "Quem está usando?" (02/11/2026, B1): a janela da primeira entrada. Vale nos dois visuais; cores da família pelas
   variáveis do visual novo, com a mesma cor de reserva escrita uma vez aqui. */
.quem-fundo {
  --qm-verde: var(--verde, #008D45); --qm-verde-mata: var(--verde-mata, #006B33); --qm-tinta: var(--tinta, #15241C);
  --qm-grafite: var(--grafite, #728579); --qm-fio: var(--fio, #E4ECE7); --qm-suave: var(--suave, #E9F6EF);
  --qm-superficie: var(--superficie, #FFFFFF); --qm-vermelho: var(--vermelho, #C8372D); --qm-veu: rgba(10, 30, 18, .55); --qm-branco: #FFFFFF;
  position: fixed; inset: 0; z-index: 9000; background: var(--qm-veu); display: grid; place-items: center; padding: 16px;
}
/* no celular (página mais larga que a tela) o cartão vai para a área visível: quem.js mede e põe a posição (B1b) */
.quem-fundo.quem-solto { display: block; }
.quem-fundo.quem-solto .quem-cartao { position: absolute; box-sizing: border-box; overflow-y: auto; }
.quem-cartao { width: min(460px, 100%); background: var(--qm-superficie); color: var(--qm-tinta); border-radius: 16px; padding: 22px 22px 16px;
  box-shadow: 0 10px 30px rgba(0, 79, 37, .25); font-family: inherit; }
.quem-cartao h2 { font-size: 18px; font-weight: 800; margin: 0 0 6px; line-height: 1.25; }
.quem-cartao p { font-size: 13px; color: var(--qm-grafite); margin: 0 0 14px; line-height: 1.45; }
.quem-nomes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.quem-nome { min-height: 44px; border: 1px solid var(--qm-fio); background: var(--qm-suave); color: var(--qm-verde-mata); border-radius: 10px;
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.quem-nome:hover, .quem-nome:focus-visible { border-color: var(--qm-verde); outline: none; }
.quem-outra label { display: block; font-size: 12px; font-weight: 700; color: var(--qm-grafite); margin-bottom: 4px; }
.quem-outra div { display: flex; gap: 8px; }
.quem-outra input { flex: 1; min-height: 40px; border: 1px solid var(--qm-fio); border-radius: 10px; padding: 0 10px; font: inherit; color: var(--qm-tinta); background: var(--qm-superficie); }
.quem-usar { min-height: 40px; border: 0; border-radius: 10px; padding: 0 14px; background: var(--qm-verde); color: var(--qm-branco); font: inherit; font-weight: 700; cursor: pointer; }
.quem-erro { color: var(--qm-vermelho) !important; font-weight: 600; margin: 10px 0 0 !important; }
.quem-agora-nao { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--qm-grafite); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 32px; }