/* =====================================================================
   6-login.css  |  JANELA DE LOGIN, TERMOS E AVISOS
   ===================================================================== */

/* ---------- JANELAS (dialog) ---------- */

/* a janela em si: centralizada, cantos redondos, mesmo estilo do site */
dialog{margin:auto;border:1px solid var(--linha-forte);border-radius:24px;background:var(--card);color:var(--ink);padding:0;width:calc(100% - 32px);max-width:440px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}

/* a janela de termos é mais larga */
dialog.larga{max-width:640px}

/* fundo escurecido atrás da janela */
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}

/* conteúdo de dentro (o formulário ou o texto dos termos) */
.conteudo{position:relative;padding:30px 28px 28px}

/* botão ✕ no canto da janela */
.fechar{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--linha);background:transparent;color:var(--ink);cursor:pointer;font-size:15px}
.fechar:hover{border-color:var(--accent)}

.conteudo h2{font-size:26px;padding-right:36px}
.conteudo .sub{margin-bottom:8px;font-size:15px}


/* ---------- CAMPOS DO FORMULÁRIO ---------- */

/* nome do campo (E-mail ou telefone, Senha) */
.conteudo label{display:block;font-weight:600;font-size:14px;margin:16px 0 6px}

/* campos de digitar (16px evita o zoom automático no iPhone) */
.conteudo input[type="text"],.conteudo input[type="password"]{width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid var(--linha-forte);background:var(--campo);color:var(--ink);font-size:16px;font-family:inherit;outline:none;transition:border-color .2s}
.conteudo input:focus{border-color:var(--accent)}

/* campo com erro fica vermelho */
.conteudo input.invalido{border-color:var(--erro)}

/* campo da senha com o botão 👁️ por cima, na direita */
.campo-senha{position:relative}
.campo-senha input{padding-right:48px !important}
.campo-senha button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;font-size:18px;cursor:pointer}

/* mensagem de erro embaixo do campo (reserva espaço pra tela não pular) */
.erro{display:block;min-height:18px;color:var(--erro);font-size:13px;margin-top:4px}

/* caixa "Li e aceito os termos" */
.conteudo label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;margin:14px 0 0}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex-shrink:0}
.check a{color:var(--accent);text-decoration:underline}

/* botão de enviar ocupa a largura toda */
form.conteudo .btn{width:100%;margin-top:14px}

/* aviso de que o login é só visual (apague a linha <p class="nota"> do HTML se quiser) */
.nota{margin-top:14px;font-size:12px;color:var(--muted);text-align:center}


/* ---------- TEXTO DOS TERMOS ---------- */

/* área de texto com rolagem */
.termos-corpo{max-height:55vh;overflow:auto;padding-right:8px;margin:12px 0 18px;font-size:14px;color:var(--muted)}
.termos-corpo h3{color:var(--ink);font-size:15px;margin:16px 0 4px}
.termos-corpo .aviso-termos{font-size:12px;border:1px dashed var(--linha-forte);border-radius:12px;padding:10px 12px}

/* botões de baixo (Fechar / Li e aceito) */
.termos-botoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}


/* ---------- AVISO FLUTUANTE (ex: "Login feito!") ---------- */

/* aparece no topo da tela e some sozinho */
.aviso{position:fixed;top:78px;left:50%;transform:translate(-50%,-20px);background:var(--card);color:var(--ink);border:1px solid var(--linha-forte);padding:12px 20px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:0 14px 40px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.3s;z-index:50;max-width:calc(100% - 32px);text-align:center}
.aviso.mostrar{opacity:1;transform:translate(-50%,0)}