/* ═══════════════════════════════════════════════════════════════════════════
   mude. — tela de login no desenho do mude. aprova · 30/09/2026
   ---------------------------------------------------------------------------
   Fundo preto (superfície de marca), faixa rosa/amarelo no topo, cartão branco
   de 400px com rótulo do sistema, ícone m., "mude." com ponto amarelo e botão
   amarelo. Mesmo arquivo em propostas, ad e calendário; cada tela mantém a
   própria lógica (senha, código no WhatsApp, esqueci a senha).
   Prefixo ml- para não brigar com o CSS de cada sistema.
   ═══════════════════════════════════════════════════════════════════════════ */


html,body{margin:0;padding:0;background:#0D0D0C}
.ml-page,.ml-page *{box-sizing:border-box}
.ml-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;
  background:#0D0D0C;font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;color:#0D0D0C;-webkit-font-smoothing:antialiased}
.ml-brandbar{position:fixed;top:0;left:0;right:0;height:5px;z-index:10;pointer-events:none;
  background:linear-gradient(90deg,#ED5AB4 0%,#ED5AB4 55%,#FED600 55%,#FED600 100%)}
.ml-box{width:100%;max-width:400px;background:#fff;border:1px solid #E4E4E7;border-radius:18px;padding:40px 36px;
  box-shadow:0 1px 2px rgba(13,13,12,.05),0 18px 44px -10px rgba(13,13,12,.22)}
.ml-box [hidden]{display:none!important}
.ml-eyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#71717A;margin-bottom:14px}
.ml-icon{width:56px;height:56px;border-radius:12px;display:block;margin:0 auto 12px;background:#fff;border:1px solid #E4E4E7}
.ml-logo{font-size:42px;font-weight:800;color:#0D0D0C;letter-spacing:-.04em;line-height:1}
.ml-logo .dot{color:#FED600}
.ml-sub{font-size:13px;font-weight:500;color:#71717A;margin-top:5px;margin-bottom:28px;line-height:1.5}
.ml-etapa{font-size:20px;font-weight:800;color:#0D0D0C;letter-spacing:-.02em;margin:-10px 0 6px}
.ml-texto{font-size:13px;color:#71717A;line-height:1.55;margin-bottom:18px}
.ml-texto b{color:#0D0D0C}

.ml-fg{margin-bottom:16px}
.ml-fl{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:600;color:#3A3A38;margin-bottom:6px}
.ml-fi{width:100%;padding:11px 13px;background:#fff;border:1px solid #E4E4E7;border-radius:12px;color:#0D0D0C;
  font:500 14px 'Poppins',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
.ml-fi:hover{border-color:#D1D1D6}
.ml-fi:focus{border-color:#0D0D0C;box-shadow:0 0 0 3px rgba(254,214,0,.28)}
.ml-fi::placeholder{color:#A1A1AA}
.ml-codigo{font-family:'JetBrains Mono',monospace;font-size:22px;letter-spacing:8px;text-align:center}
.ml-senha{position:relative}
.ml-senha .ml-fi{padding-right:46px}
.ml-olho{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:15px;
  color:#A1A1AA;padding:6px;border-radius:8px}
.ml-olho:hover{background:rgba(13,13,12,.045)}

.ml-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;margin-top:4px;
  background:#FED600;color:#0D0D0C;border:none;border-radius:12px;font:700 14px 'Poppins',sans-serif;cursor:pointer;transition:background .12s}
.ml-btn:hover{background:#E8C300}
.ml-btn:disabled{opacity:.55;cursor:not-allowed}
.ml-link{background:none;border:0;padding:0;cursor:pointer;font:600 12px 'Poppins',sans-serif;color:#0D0D0C;
  text-decoration:underline;text-underline-offset:3px}
.ml-link:disabled{opacity:.45;cursor:default}
.ml-voltar{display:block;margin:14px auto 0}
.ml-confiar{display:flex;align-items:center;gap:8px;font-size:13px;color:#71717A;margin:-4px 0 16px;cursor:pointer}
.ml-confiar input{width:16px;height:16px;accent-color:#0D0D0C}
.ml-err{font-size:13px;font-weight:600;color:#DC2626;margin-top:12px;min-height:0}
.ml-err:empty{display:none}
.ml-err-box{display:flex;align-items:center;gap:8px;background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.2);border-radius:12px;
  padding:10px 13px;color:#DC2626;font-size:13px;font-weight:600;margin-bottom:16px}
.ml-aviso{font-size:12.5px;color:#71717A;text-align:center;margin-top:10px}
.ml-aviso:empty{display:none}

/* Rodapé legal dentro do cartão: exigência de auditoria de app (ver aprova). */
.ml-legal{margin-top:22px;padding-top:16px;border-top:1px solid #E4E4E7;display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;align-items:center;font-size:11.5px;color:#A1A1AA}
.ml-legal a{color:#71717A;text-decoration:underline;text-underline-offset:3px}
.ml-legal a:hover{color:#0D0D0C}

@media(max-width:480px){.ml-box{padding:32px 24px}.ml-logo{font-size:36px}}