/* Conta do Conexão (I-015): o modal de cadastro e de "já tenho conta", usado na página ao vivo e nas matérias.
   Separado do chat.css em 22/10/2026 para carregar também nas matérias. */
.av-modal { --av-royal: #0d1d96; --av-navy: #07194f; --av-cinza: #5b6170; }
.av-cadastro .av-botao { width: 100%; background: var(--av-royal); color: #fff; border: 0; cursor: pointer; }
/* cadastro */
.av-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(7, 25, 79, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.av-modal[hidden] { display: none; }
/* display: flex do .av-cadastro vence o hidden do navegador: sem isto, cadastro e "entrar" apareciam juntos (Davy, 22/10) */
.av-cadastro[hidden] { display: none !important; }
/* Cadastro (Davy, 20/10: "visual mais bonito"; sem a palavra "membro", que ele vetou). */
.av-cadastro { position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 460px; max-height: 94vh; overflow-y: auto; padding: 0; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(7, 25, 79, .35); scrollbar-width: none; }
.av-cadastro::-webkit-scrollbar { display: none; }
.av-cadastro__campos { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.av-cadastro label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #3a4052; }
.av-cadastro input, .av-cadastro select { font: inherit; font-size: 15px; font-weight: 400; border: 1px solid #cfd4dd; border-radius: 10px; padding: 12px 14px; background: #fbfcfe; }
.av-cadastro input:focus, .av-cadastro select:focus { outline: none; border-color: var(--av-royal); box-shadow: 0 0 0 3px rgba(13, 29, 150, .15); background: #fff; }
.av-cadastro .av-invalido { border-color: #b3261e; }
.av-duas { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.av-caixa { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-weight: 400 !important; font-size: 12px !important; line-height: 1.45; }
.av-caixa input { margin-top: 2px; flex: none; width: 18px; height: 18px; }
.av-caixa--destaque { background: #eef2ff; border: 1px solid #c9d3ff; border-radius: 8px; padding: 10px; }
.av-erro { color: #b3261e; font-size: 13px; margin: 0; min-height: 0; }
.av-fechar { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; }
.av-fechar svg { width: 20px; fill: #5b6170; }
.av-regras { font-size: 12px; color: var(--av-cinza); }
.av-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1d2230; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 100001; }

/* Cadastro em duas etapas (Davy, 20/10) */
.av-etapa { display: flex; flex-direction: column; gap: 12px; }
.av-etapa[hidden] { display: none; }
.av-etapas { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; color: #5b6170; }
.av-etapas b { font-weight: 600; white-space: nowrap; }
.av-aviso-dados { margin: -2px 0 0; font-size: 12px; color: #6e727a; text-align: center; }
.av-aviso-dados a { color: inherit; text-decoration: underline; }
.av-voltar-etapa { background: none; border: 0; color: #5b6170; font: inherit; font-size: 14px; padding: 6px; cursor: pointer; align-self: center; }
.av-cidade { position: relative; display: flex; flex-direction: column; gap: 4px; }
.av-cidade > label { font-size: 13px; font-weight: 600; color: #3a4052; }
.av-cidade__lista { position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #cfd4dd; border-radius: 10px; box-shadow: 0 10px 24px rgba(7, 25, 79, .16); z-index: 5; max-height: 264px; overflow-y: auto; scrollbar-width: none; }
.av-cidade__lista::-webkit-scrollbar { display: none; }
.av-cidade__lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.av-cidade__lista li small { font-size: 12px; font-weight: 700; color: #5b6170; background: #eef1f6; border-radius: 4px; padding: 2px 6px; }
.av-cidade__lista li.av-marcada, .av-cidade__lista li:hover { background: #eef2ff; }

/* ------------------------------------------------------------------ cadastro branco limpo (Davy, 22/10/2026)
   Pela pesquisa de referências (Conta Globo, Discord, Medium, Kick, Twitch, Substack, Washington Post): fundo branco,
   título curto com o "grátis" dentro, campo e botão com 48 px e raio de 10 px, opt-in escrito "(Opcional)" e
   progresso só num traço fino. No celular, folha que sobe de baixo, com o botão acima do teclado. */
.av-cadastro { max-width: 440px; padding: 12px 32px 28px; border-radius: 16px; box-shadow: 0 24px 64px rgba(7, 25, 79, .22); color: #1b2440; }
.av-cadastro__barra { display: flex; justify-content: space-between; align-items: center; min-height: 40px; margin: 0 -12px 4px -12px; }
.av-cadastro .av-fechar { position: static; width: 40px; height: 40px; margin-left: auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.av-cadastro .av-fechar:hover { background: #f1f3f8; }
.av-cadastro .av-fechar svg { width: 20px; fill: #6b7390; }
.av-cadastro .av-voltar-etapa { display: inline-flex; align-items: center; gap: 2px; align-self: center; padding: 8px 10px 8px 4px; color: #0d1d96; font-size: 14px; font-weight: 600; }
.av-cadastro .av-voltar-etapa[hidden] { display: none; }
.av-cadastro .av-voltar-etapa svg { width: 20px; height: 20px; fill: currentColor; }
.av-cadastro .av-etapas { display: flex; gap: 6px; margin: 0 0 18px; }
.av-cadastro .av-etapas i { flex: 1; height: 3px; border-radius: 2px; background: #e3e7f2; }
.av-cadastro .av-etapas i:first-child, .av-cadastro.av-na-etapa-2 .av-etapas i { background: #0d1d96; }
.av-cadastro h2 { margin: 0; color: #07194f; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.av-cadastro__sub { margin: 6px 0 0; color: #4a5578; font-size: 15px; line-height: 1.45; }
.av-cadastro__campos { padding: 24px 0 0; gap: 0; }
.av-cadastro .av-etapa { gap: 16px; }
.av-cadastro label { gap: 6px; font-size: 14px; font-weight: 600; color: #1b2440; }
.av-cadastro .av-cidade > label { font-size: 14px; color: #1b2440; }
.av-cadastro input:not([type=checkbox]) { height: 48px; box-sizing: border-box; padding: 0 14px; font-size: 16px; border: 1px solid #c9cfdf; border-radius: 10px; background: #fff; color: #1b2440; }
.av-cadastro input::placeholder { color: #8a92ad; }
.av-cadastro .av-invalido { border-color: #c62828 !important; }
.av-cadastro .av-erro { font-size: 13px; color: #c62828; }
.av-cadastro .av-erro:empty { display: none; }
.av-cadastro .av-botao { height: 48px; border-radius: 10px; font-size: 16px; font-weight: 600; padding: 0 16px; margin-top: 4px; }
.av-cadastro .av-botao:hover { background: #07194f; }
.av-cadastro .av-botao:disabled { background: #e3e7f2; color: #8a92ad; cursor: default; }
.av-cadastro .av-aviso-dados { margin: -4px 0 0; font-size: 12px; line-height: 1.4; color: #6b7390; }
.av-cadastro .av-caixa { gap: 10px !important; font-size: 14px !important; line-height: 1.4; color: #1b2440; font-weight: 400 !important; cursor: pointer; }
.av-cadastro .av-caixa + .av-caixa { margin-top: -4px; }
.av-cadastro .av-caixa input { width: 20px; height: 20px; margin: 0; accent-color: #0d1d96; }
.av-cadastro .av-caixa a { color: #0d1d96; text-decoration: underline; }
.av-cadastro .av-caixa--opcional { color: #4a5578; background: none; border: 0; padding: 0; }
.av-cadastro .av-regras { font-size: 13px; color: #4a5578; }
.av-cadastro .av-regras summary { cursor: pointer; color: #6b7390; }
.av-cadastro .av-regras ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; }
@media (max-width: 767px) {
  .av-modal { align-items: flex-end; padding: 0; }
  .av-cadastro { max-width: none; border-radius: 20px 20px 0 0; max-height: 92dvh; padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); animation: av-sobe .24s ease-out; }
  .av-cadastro::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: #d5d9e6; margin: 0 auto 4px; }
  .av-cadastro h2 { font-size: 20px; }
  .av-cadastro__barra { margin: 0 -8px 2px -8px; }
}
@keyframes av-sobe { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .av-cadastro { animation: none; } }

/* "Já tem conta? Entrar" e o código do "já tenho conta" (I-015) */
.av-trocar { margin: 0; text-align: center; font-size: 14px; color: #4a5578; }
.av-trocar a { color: #0d1d96; font-weight: 600; text-decoration: none; }
.av-trocar a:hover { text-decoration: underline; }
.av-entrar .av-trocar { margin-top: 8px; font-size: 13px; }
.av-cadastro .av-codigo { letter-spacing: .4em; font-size: 22px !important; text-align: center; font-variant-numeric: tabular-nums; }
.av-acesso h2 { margin-top: 4px; }

/* Nome de usuário (@), I-016 */
.av-usuario { display: flex; flex-direction: column; gap: 6px; }
.av-usuario > label { font-size: 14px; font-weight: 600; color: #1b2440; }
.av-usuario__campo { position: relative; }
.av-usuario__campo span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #6b7390; font-size: 16px; pointer-events: none; }
.av-cadastro .av-usuario__campo input { width: 100%; padding-left: 32px; }
.av-usuario__estado { margin: 0; font-size: 13px; min-height: 18px; color: #6b7390; }
.av-usuario__estado:empty { display: none; }
.av-usuario__estado--ok { color: #1a7f45; }
.av-usuario__estado--erro { color: #c62828; }

/* WhatsApp com bandeira e DDI (intl-tel-input), no mesmo desenho dos outros campos */
.av-cadastro .iti { width: 100%; display: block; }
.av-cadastro .iti__tel-input { width: 100%; }
.av-cadastro .iti__country-container { padding: 1px; }
.av-cadastro .iti__selected-country { border-radius: 10px 0 0 10px; }
.av-cadastro .iti__selected-country-primary { padding: 0 6px 0 12px; }
.av-cadastro .iti__selected-dial-code { color: #1b2440; font-size: 16px; }
/* a lista de países sai num bloco solto no body (camada 1060 da biblioteca), que ficava atrás do modal (100000) */
.iti.iti--detached-country-selector, .iti.iti--fullscreen-popup { z-index: 100003 !important; }
.iti__dropdown-content { z-index: 100002; border-radius: 10px; }
.iti__search-input { font-size: 16px; }