/* ==========================================================================
   login.css — tela de entrada.
   Deliberadamente sem textos, logotipo ou rótulos: só o campo de senha.
   ========================================================================== */

body.login{
  display:flex; align-items:center; justify-content:center;
  min-height:100dvh; padding:24px;
  background:var(--deep1);
  background-image:
    radial-gradient(1100px 620px at 12% -10%, rgba(13,134,166,.42), transparent 60%),
    radial-gradient(900px 560px at 100% 105%, rgba(7,160,156,.30), transparent 62%);
}

.caixa-login{
  width:100%; max-width:340px;
  background:var(--panel);
  border-radius:14px;
  padding:30px 28px;
  box-shadow:0 22px 60px rgba(1,40,55,.45);
}

/* Logotipo — o único elemento além do campo. */
.marca{
  display:block; width:190px; max-width:70%;
  height:auto; margin:0 auto 28px;
}

/* No tema escuro o cartão fica escuro e o logotipo (teal escuro) sumiria. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marca{ filter:brightness(0) invert(1); }
}
:root[data-theme="dark"] .marca{ filter:brightness(0) invert(1); }

.linha-senha{ position:relative; }

.caixa-login input[type="password"]{
  font-size:1rem;
  letter-spacing:.14em;
  text-align:center;
  padding:13px 44px 13px 14px;
}

/* Botão de envio embutido no campo, sem rótulo textual. */
.btn-entrar{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:6px; cursor:pointer;
  background:var(--deep2); color:#fff;
}
.btn-entrar:hover{ background:var(--deep3); }
.btn-entrar svg{ width:16px; height:16px; }
.btn-entrar:disabled{ opacity:.55; cursor:progress; }

.caixa-login .alerta{ margin-top:14px; text-align:center; }