/* ============================================================
   Tela de login do Escritório Virtual — tarefa 11047
   Valores extraídos do layout Figma (login_figma.css):
     header  #3B190A   verde escuro #123523 / #123324
     lima    #BAB641 / #BAB540        borda input #AFAFBB
     placeholder #828282             card rgba(255,255,255,0.9)
   Fontes de marca (Sagona/Lato) usadas como equivalentes de
   AppetitePro/Aptos do mock (sem os arquivos dessas fontes).
   ============================================================ */

.login-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Lato', Arial, sans-serif;
  color: #2A2A2B;
  /* !important vence o cs-base.css "body { background: creme !important }" (faixa branca no overscroll) */
  background-color: #3B190A !important;
}

.login-page * { box-sizing: border-box; }

/* rodapé back-to-top herdado do template não existe no Figma e gera altura/faixa clara extra */
.login-page footer { display: none !important; }

/* ---------- cabeçalho ---------- */

.login-page .login-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  padding: 6px 56px;
  background-color: #3B190A;
}

.login-page .login-header-logo img {
  height: 45px;
  display: block;
}

.login-page .login-header-btn {
  min-width: 187px;
  height: 32px;
  font-weight: 900;
}

/* ---------- fundo ---------- */

.login-page .login-bg {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 16px 48px;
  background: url("../../images/cacau-show/login-background.png") center center / cover no-repeat;
  background-attachment: fixed;
}

/* ---------- card central ---------- */

.login-page .login-card-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.login-page .login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 519px;
  max-width: 100%;
  padding: 32px 80px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.login-page .login-card-logo {
  width: 168px;
  max-width: 70%;
  height: auto;
  margin-bottom: 4px;
}

/* título "Bem vindo!" como SVG (exportado do Figma, verde #123523) */
.login-page .login-card-titulo {
  display: block;
  width: 185px;
  max-width: 70%;
  height: auto;
  margin: 0 0 4px;
}

/* ---------- campos ---------- */

.login-page .login-input {
  display: block;
  width: 359px;
  max-width: 100%;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #2A2A2B;
  background-color: #FFFFFF;
  border: 1.5px solid #AFAFBB;
  border-radius: 10px;
  box-shadow: none;
}

.login-page .login-input::placeholder { color: #828282; }

.login-page .login-input:focus {
  outline: none;
  border-color: #123324;
}

.login-page .login-erro {
  display: block;
  width: 359px;
  max-width: 100%;
  margin: -12px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #c0392b;
  text-align: left;
}

/* ---------- botões ---------- */

.login-page .btn-cs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 10px 16px;
  font-family: 'Aptos', 'Lato', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.login-page .btn-cs:hover,
.login-page .btn-cs:focus { filter: brightness(0.93); text-decoration: none; }

/* cores com !important e escopo .login-page para vencer o CSS de marca
   (cs-typography.css "a { color: ... !important }" e cs-base.css "body { color/background !important }") */
.login-page .btn-cs-verde  { background-color: #123324 !important; color: #FFFFFF !important; }
.login-page .btn-cs-verde:hover, .login-page .btn-cs-verde:focus { color: #FFFFFF !important; }

.login-page .btn-cs-lima   { background-color: #BAB540 !important; color: #FFFFFF !important; border-radius: 10px; }
.login-page .btn-cs-lima:hover, .login-page .btn-cs-lima:focus { color: #FFFFFF !important; }

.login-page .btn-cs-branco {
  background-color: #FFFFFF !important;
  border: 1px solid #123324;
  color: #123324 !important;
}
.login-page .btn-cs-branco:hover, .login-page .btn-cs-branco:focus { color: #123324 !important; }

/* vence o cs-overrides.css "#cmdLogin { color: ... !important }" (seletor de ID) — texto branco no Entrar */
.login-page #cmdLogin {
  color: #FFFFFF !important;
  background-color: #123324 !important;
}

/* Entrar é mais estreito que os inputs (Figma = 163px), centralizado pelo align-items do card */
.login-page .login-btn-entrar {
  width: 163px;
  max-width: 100%;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 36px;
  vertical-align: middle;
}

/* ---------- separador e links ---------- */

/* agrupa a barra verde + "esqueci minha senha" com gap pequeno (Figma) em vez do gap 24px do card */
.login-page .login-recuperar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.login-page .login-separador {
  width: 345px;
  max-width: 100%;
  height: 0;
  border-top: 1px solid #BAB641;
  margin: 0;
}

/* !important vence o cs-typography "a {...}" e o "a:hover { color: marrom-medio !important }" da marca */
.login-page .login-link-esqueci {
  font-family: 'Aptos', 'Lato', Arial, sans-serif;
  font-size: 14px;
  color: #123324 !important;
  text-decoration: underline;
}
.login-page .login-link-esqueci:hover,
.login-page .login-link-esqueci:focus { color: #123324 !important; }

/* ---------- linha de ações (ajuda + seja revendedor) ---------- */

.login-page .login-acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 359px;
  max-width: 100%;
}

/* dois botões: dividem a largura disponível igualmente.
   um só (quando "Preciso de ajuda" está oculto pelo parâmetro): mantém largura de botão (~177px),
   centralizado pelo justify-content do .login-acoes — em vez de esticar pra linha toda */
.login-page .login-acoes .btn-cs {
  flex: 1 1 0;
  border-radius: 8px;
}
.login-page .login-acoes .btn-cs:only-child {
  flex: 0 1 177px;
  max-width: 100%;
}

.login-page .login-icone-ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  background-color: #123324;
  border-radius: 50%;
}

.login-page .btn-cs-branco .login-icone-ajuda { background-color: #123324; }

.login-page .login-versao {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- modal primeiro acesso ---------- */

.login-modal-primeiro-acesso { border-radius: 16px; }
.login-modal-primeiro-acesso .modal-header { border-bottom: none; padding-bottom: 0; }
.login-modal-primeiro-acesso .modal-title { font-weight: 700; color: #2A2A2B; }
.login-modal-primeiro-acesso .modal-footer { border-top: none; }

.login-page .login-criterios-senha,
.login-modal-primeiro-acesso .login-criterios-senha {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
  font-size: 13px;
  color: #2A2A2B;
  text-align: left;
}
.login-criterios-senha li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 22px;
  color: #828282;
  transition: color 0.15s ease;
}
/* marcador: bolinha neutra por padrão, vira ✓ verde quando o critério é atingido */
.login-criterios-senha li::before {
  content: "•";
  position: absolute;
  left: 6px;
  color: #AFAFBB;
}
.login-criterios-senha li.ok { color: #3b7555; font-weight: 600; }
.login-criterios-senha li.ok::before { content: "✓"; color: #3b7555; }

/* ---------- página resetar senha (mesmo card do login) ---------- */

/* título textual (não há SVG "Resetar Senha"); !important vence o cs-typography h1 */
.login-page .login-card-titulo-texto {
  margin: 0;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  color: #123324 !important;
}

/* texto de instrução; !important vence o cs-typography p */
.login-page .login-card-intro {
  width: 359px;
  max-width: 100%;
  margin: -12px 0 0;
  font-size: 14px;
  text-align: center;
  color: #2A2A2B !important;
}

/* ---------- responsivo ---------- */

@media (max-width: 768px) {
  .login-page .login-card-intro { width: 100%; }

  .login-page .login-header {
    height: 56px;
    padding: 6px 16px;
  }
  .login-page .login-header-logo img { height: 34px; }
  .login-page .login-header-btn {
    min-width: 0;
    padding: 8px 12px;
    font-size: 13px;
  }

  .login-page .login-bg {
    padding: 80px 24px 40px;
    /* iOS Safari não suporta background-attachment: fixed */
    background-attachment: scroll;
  }

  .login-page .login-card {
    width: 100%;
    padding: 28px 20px 24px;
    gap: 18px;
  }

  .login-page .login-input,
  .login-page .login-btn-entrar,
  .login-page .login-erro,
  .login-page .login-separador,
  .login-page .login-acoes { width: 100%; }
}