/* Telas de acesso (login, convite, primeiro acesso) — AF Nexus Gestão */
/* O "&" da fonte Archivo é estilizado e parece outro símbolo: usa o "&" de uma fonte comum */
@font-face { font-family: "E comercial"; src: local("Segoe UI"), local("SegoeUI"), local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("Roboto"); unicode-range: U+0026; }

:root {
  --marinho: #0E1E3B;
  --fundo: #0E1E3B;
  --cartao: #FFFFFF;
  --texto: #1B2333;
  --suave: #5C6577;
  --linha: #D5DAE3;
  --acao: #2F5DB3;
  --acao-hover: #244B95;
  --acao-texto: #FFFFFF;
  --erro: #B42318;
  --erro-fundo: #FDECEA;
  --ok: #12805C;
  --campo: #FFFFFF;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  /* o cartão de acesso continua claro (o logo é azul-marinho); só o fundo escurece */
  --fundo: #070D1A;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; font-family: "E comercial", "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.45; color: var(--texto);
  background-color: var(--fundo);
  /* octógonos do emblema, discretos, ao fundo */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='29.3,2 70.7,2 98,29.3 98,70.7 70.7,98 29.3,98 2,70.7 2,29.3' fill='none' stroke='%23C9CFD8' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='29.3,2 70.7,2 98,29.3 98,70.7 70.7,98 29.3,98 2,70.7 2,29.3' fill='%23C9CFD8' fill-opacity='.035'/%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 50% -10%, rgba(111, 155, 234, .18), transparent 60%);
  background-repeat: no-repeat;
  background-size: 760px 760px, 520px 520px, auto;
  background-position: right -260px bottom -240px, left -220px top -200px, center;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; }

.tela { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 0; }
.marca-topo-acesso { display: none; }
.lado-form { width: 100%; max-width: 440px; }
.cartao {
  background: var(--cartao); border-radius: 16px; padding: 36px 36px 30px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35); position: relative;
}
.marca-plataforma { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -4px 0 24px; }
.marca-plataforma img { width: 50px; height: 52px; }
.marca-plataforma span { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #14264B; line-height: 1; display: flex; flex-direction: column; }
.marca-plataforma small { font-size: 12.5px; font-weight: 600; color: #5B6B8A; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.cartao h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-align: center; }
.cartao .lead { margin: 0 0 24px; color: var(--suave); text-align: center; font-size: 14.5px; }

.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 13.5px; font-weight: 600; }
.campo input {
  width: 100%; height: 46px; padding: 0 14px; font-size: 15.5px; border: 1px solid var(--linha); border-radius: 10px; background: var(--campo);
}
.campo input:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acao) 22%, transparent); }
.campo input[readonly] { opacity: .75; }
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 84px; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--suave); }
.ver-senha:hover { color: var(--texto); }
.btn-principal {
  width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--acao); color: var(--acao-texto); font-size: 15.5px; font-weight: 700;
}
.btn-principal:hover { background: var(--acao-hover); }
.btn-principal:disabled { opacity: .65; cursor: progress; }
.alerta { padding: 11px 13px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; background: var(--erro-fundo); color: var(--erro); }
.ajuda { margin: 22px 0 0; font-size: 13.5px; color: var(--suave); text-align: center; }
.ajuda a { color: var(--acao); }
.regras { list-style: none; padding: 0; margin: -6px 0 16px; font-size: 13px; color: var(--suave); display: grid; gap: 2px; }
.regras li::before { content: "○ "; }
.regras li.ok { color: var(--ok); }
.regras li.ok::before { content: "● "; }
.rodape-acesso { color: rgba(201, 207, 216, .65); font-size: 12.5px; margin: 22px 0 0; text-align: center; }
@media (max-width: 480px) {
  .cartao { padding: 28px 22px 24px; border-radius: 14px; }
  .cartao::before { height: 52px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cartao { animation: entra .35s ease-out both; }
  @keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* confirmação de senha */
.confere { font-size: 12.5px; min-height: 0; }
.confere:empty { display: none; }
.campo.erro input { border-color: var(--erro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--erro) 18%, transparent); }
.campo.erro .confere { color: var(--erro); font-weight: 600; }
.campo.ok input { border-color: var(--ok); }
.campo.ok .confere { color: var(--ok); }

/* formulários de cadastro mais compactos */
.cartao.compacto { padding: 28px 32px 24px; }
.cartao.compacto .marca-plataforma { margin: -4px 0 14px; }
.cartao.compacto .marca-plataforma img { width: 40px; height: 42px; }
.cartao.compacto .marca-plataforma span { font-size: 20px; }
.cartao.compacto h2 { font-size: 20px; }
.cartao.compacto .lead { margin-bottom: 16px; font-size: 14px; }
.cartao.compacto .campo { margin-bottom: 11px; gap: 4px; }
.cartao.compacto .campo input { height: 42px; font-size: 15px; }
.cartao.compacto .regras { display: flex; gap: 14px; flex-wrap: wrap; margin: -4px 0 11px; }
.cartao.compacto .btn-principal { height: 46px; margin-top: 4px; }
@media (max-width: 480px) { .cartao.compacto { padding: 24px 20px 20px; } }