@charset "UTF-8";
/* ============================================================================
   Card de acesso (login, integrador, recuperação e mudança de senha)
   Camada de TEMA das telas de segurança, alinhada ao identidade-ceara.css:
   fundo com o verde suave da marca, faixa do grafismo no topo, títulos em
   Kanit e superfícies neutras. Sem cores de marca hardcoded: tudo vem dos
   tokens ce-*. Carregada apenas nessas telas para o fundo não vazar para o
   resto da aplicação.
   ========================================================================== */

/* Fundo da moldura: verde suave da marca (claro) / neutro escuro (dark) */
body, .app-wrapper {
  background: var(--ce-suave) !important;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .app-wrapper {
  background: #0e1418 !important;
}
.sidebar-overlay { display: none; }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  overflow: hidden;
}
[data-bs-theme="dark"] .login-card {
  background: #1b2228;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}

/* Faixa do grafismo do Ceará como assinatura cromática no topo do card */
.login-card__accent {
  height: 6px;
  background: var(--ce-grafismo);
}

.login-card__body {
  padding: 2rem 1.75rem 1.5rem;
}

/* Marca -------------------------------------------------------------------- */
.login-brand {
  text-align: center;
  margin-bottom: 1.25rem;
}
.login-brand img {
  max-width: 230px;
  width: 100%;
  height: auto;
}

.login-title {
  font-family: var(--ce-fonte-titulo);
  font-weight: 600;
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: .25rem;
  color: var(--ce-texto);
}
.login-subtitle {
  text-align: center;
  color: var(--ce-texto-suave);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

/* Campos ------------------------------------------------------------------- */
.login-field {
  margin-bottom: 1rem;
}
.login-field__label {
  display: block;
  font-weight: 600;
  font-size: .875rem;
  margin-bottom: .35rem;
  color: var(--ce-texto-suave);
}
/* Campos ocupam a largura toda do card (inclui o wrapper do p:password) */
.login-card .ui-inputfield,
.login-card .ui-password,
.login-card .ui-password input {
  width: 100%;
}

/* Pergunta secreta (recuperação) */
.login-question {
  background: var(--ce-suave);
  border: 1px solid var(--ce-suave-borda);
  border-radius: 8px;
  padding: .6rem .75rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  color: var(--ce-texto);
}
.login-question strong {
  display: block;
  margin-top: .15rem;
}

/* Texto de ajuda (regras de senha etc.) */
.login-help {
  font-size: .8rem;
  color: var(--ce-texto-suave);
  margin: .25rem 0 0;
}

/* Botões de ação em largura total, empilhados */
.login-actions {
  margin-top: 1.25rem;
  display: grid;
  gap: .5rem;
}
.login-actions .ui-button,
.login-actions .btn {
  width: 100%;
  justify-content: center;
}

/* Separador "ou" com filete */
.login-sep {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--ce-texto-suave);
  font-size: .8rem;
  margin: 1.25rem 0;
}
.login-sep::before,
.login-sep::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--ce-suave-borda);
}
.login-sep:not(:empty)::before { margin-right: .75rem; }
.login-sep:not(:empty)::after { margin-left: .75rem; }

/* Links -------------------------------------------------------------------- */
.login-forgot {
  text-align: right;
  margin-top: .5rem;
}
.login-forgot a,
.login-links a {
  color: var(--ce-primary);
}
.login-links {
  text-align: center;
  font-size: .875rem;
  margin-top: 1rem;
}