/* ============================================================
   LOGIN.CSS — telas públicas de acesso
   Carregado DEPOIS do style.css, então reaproveita os tokens de cor,
   os botões e os campos de formulário do sistema.
   ============================================================ */

.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* fundo de papel milimetrado: a mesma identidade de "desenho técnico"
     do resto do sistema, sem precisar de imagem externa */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(31, 90, 94, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 90, 94, .055) 1px, transparent 1px),
    linear-gradient(rgba(31, 90, 94, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 90, 94, .03) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

.login-palco {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.login-cartao {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 34px 32px 28px;
  position: relative;
  overflow: hidden;
}

.login-cartao-largo { max-width: 560px; }
.login-palco:has(.login-cartao-largo) { max-width: 560px; }

/* marca de medição no topo, igual ao .measure-card do sistema */
.login-cartao::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0px, var(--accent) 14px,
    var(--wood) 14px, var(--wood) 22px
  );
}

.login-marca {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.login-marca-nome {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .2px;
  line-height: 1.2;
  /* nome longo de marcenaria não pode estourar o cartão */
  overflow-wrap: anywhere;
}


.login-titulo {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 0 0 4px;
}

.login-subtitulo {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.login-divisor {
  border: none;
  border-top: 1px dashed var(--line);
  margin: 22px 0;
}

/* campo de senha com o botão do olho encaixado dentro */
.campo-senha { position: relative; }
.campo-senha .form-control { padding-right: 44px; }

.btn-olho {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.btn-olho svg { width: 17px; height: 17px; }
.btn-olho:hover { color: var(--ink); background: var(--bg); }
.btn-olho.ativo { color: var(--accent); }

.btn-olho:focus-visible {
  outline: none;
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* medidor de força */
.forca-senha {
  height: 4px;
  margin-top: 8px;
  border-radius: 100px;
  background: var(--line);
  overflow: hidden;
}

.forca-senha span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  transition: width .25s ease, background .25s ease;
}

.forca-senha.nivel-1 span { width: 25%;  background: var(--status-declined); }
.forca-senha.nivel-2 span { width: 55%;  background: var(--status-pending); }
.forca-senha.nivel-3 span { width: 80%;  background: var(--accent); }
.forca-senha.nivel-4 span { width: 100%; background: var(--status-approved); }

/* mensagem de erro do formulário */
.login-erro {
  display: none;
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--status-declined);
  background: var(--status-declined-soft);
  color: var(--status-declined);
  font-size: 13.5px;
  line-height: 1.45;
}

.login-erro.visivel { display: block; }

/* aviso neutro (sessão expirada, senha definida pelo admin) */
.login-aviso {
  margin-bottom: 20px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--status-pending);
  background: var(--status-pending-soft);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
}

.login-botao {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: 15px;
  margin-top: 4px;
}

.login-rodape {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.login-rodape .hint { margin: 0; line-height: 1.5; }

.login-assinatura {
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

@media (max-width: 480px) {
  .login-cartao { padding: 26px 20px 22px; }
  .login-titulo { font-size: 22px; }
}