/* login.css — estilo das telas de acesso (login e troca de senha).
   Mesma identidade visual do painel: rosa/magenta #FF009E, azul
   institucional #244FAE, fundo claro. Sem amarelo, sem CDN, sem fonte
   externa (usa a fonte do proprio sistema). */

:root {
  --pink: #FF009E;
  --pink-soft: #FFE3F3;
  --blue: #244FAE;
  --blue-soft: #E7ECFA;
  --bg: #E8F8F9;
  --white: #FFFFFF;
  --text: #242424;
  --text-muted: #6b6b74;
  --border: #E1E7EE;
  --red: #DC2626;
  --red-soft: #FDEAEA;
  --green: #1E9E63;
  --green-soft: #E3F7EC;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(36, 36, 36, .04), 0 10px 30px rgba(36, 79, 174, .10);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body.tela-auth {
  margin: 0;
  font: 15px/1.55 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg) 0%, #F4FBFC 55%, var(--blue-soft) 100%);
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

button, input { font: inherit; color: inherit; }
h1, h2 { margin: 0; font-weight: 700; }
p { margin: 0; }

.cartao-auth {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  padding: 30px 28px 24px;
}

.cartao-auth__marca {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}

.cartao-auth__logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: var(--pink);
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartao-auth h1 { font-size: 1.12rem; color: var(--blue); line-height: 1.25; }
.cartao-auth__marca p { font-size: .85rem; color: var(--text-muted); }

.campo { margin-bottom: 15px; }

.campo label {
  display: block;
  font-size: .81rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

.campo input:focus-visible,
.btn-olho:focus-visible,
.btn-entrar:focus-visible,
.link-sair:focus-visible {
  outline: 3px solid rgba(36, 79, 174, .35);
  outline-offset: 1px;
}

.campo input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.campo input[aria-invalid="true"] { border-color: var(--red); }

.campo-senha { position: relative; display: flex; }
.campo-senha input { padding-right: 88px; }

.btn-olho {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 7px;
  cursor: pointer;
}
.btn-olho:hover { background: #dbe4f7; }

.btn-entrar {
  width: 100%;
  margin-top: 6px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
}
.btn-entrar:hover:not(:disabled) { filter: brightness(.94); }
.btn-entrar:disabled { opacity: .6; cursor: progress; }

.aviso-erro {
  background: var(--red-soft);
  color: var(--red);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .85rem;
  margin: 4px 0 12px;
}

.aviso-ok {
  background: var(--green-soft);
  color: var(--green);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .85rem;
  margin: 4px 0 12px;
}

.aviso-atencao {
  background: var(--pink-soft);
  color: #A1006A;
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  font-size: .86rem;
  margin-bottom: 20px;
}

.rodape-auth {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: .79rem;
  color: var(--text-muted);
  text-align: center;
}

.lista-requisitos {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: .82rem;
  color: var(--text-muted);
}
.lista-requisitos li { margin-bottom: 3px; }

.link-sair {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  font-size: .82rem;
  text-decoration: underline;
  cursor: pointer;
}
.link-sair:hover { color: var(--text); }

@media (max-width: 420px) {
  .cartao-auth { padding: 24px 18px 20px; }
}