/* ========================================
   LIA — AUTENTICAÇÃO
======================================== */

.auth-page {
  min-height: 100vh;

  background:
    linear-gradient(
      135deg,
      var(--lia-lilas-claro),
      var(--lia-rosa-claro)
    );

  padding: 40px 20px;
}


.auth-wrapper {
  min-height: calc(100vh - 80px);

  display: flex;

  align-items: center;

  justify-content: center;
}


.auth-card {
  width: 100%;

  max-width: 620px;

  padding: 42px;

  border-radius: 30px;

  background-color: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(89, 16, 107, 0.08);

  box-shadow:
    0 30px 70px rgba(89, 16, 107, 0.10);
}


/* ---------- MARCA ---------- */

.auth-brand {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 32px;
}


.auth-logo {
  color: var(--lia-roxo-escuro);

  font-size: 2rem;

  font-weight: 700;

  font-style: italic;

  text-decoration: none;
}


.auth-brand span {
  padding-left: 12px;

  border-left: 1px solid var(--internal-border);

  color: var(--lia-cinza);

  font-size: 0.78rem;
}


/* ---------- PROGRESSO ---------- */

.auth-progress {
  display: flex;

  align-items: flex-start;

  margin-bottom: 38px;
}


.progress-step {
  display: flex;

  flex-direction: column;

  align-items: center;

  min-width: 58px;

  color: var(--lia-cinza);
}


.progress-step span {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 6px;

  border-radius: 50%;

  background-color: var(--internal-border);

  color: var(--lia-cinza);

  font-size: 0.8rem;

  font-weight: 700;
}


.progress-step small {
  font-size: 0.72rem;

  font-weight: 600;
}


.progress-step.active {
  color: var(--lia-roxo);
}


.progress-step.active span {
  background-color: var(--lia-roxo);

  color: white;
}


.progress-line {
  flex: 1;

  height: 2px;

  margin-top: 16px;

  background-color: var(--internal-border);
}


/* ---------- CABEÇALHO ---------- */

.auth-header {
  margin-bottom: 28px;
}


.auth-kicker {
  margin-bottom: 8px;

  color: var(--lia-roxo);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.12em;
}


.auth-header h1 {
  margin-bottom: 12px;

  color: var(--lia-roxo-escuro);

  font-size: 2rem;

  font-weight: 700;
}


.auth-header > p:not(.auth-kicker) {
  margin: 0;

  color: var(--lia-cinza);

  line-height: 1.7;
}


/* ---------- FORMULÁRIO ---------- */

.auth-card .form-label {
  color: var(--lia-texto);

  font-size: 0.9rem;

  font-weight: 600;
}


.auth-card .form-control {
  min-height: 48px;

  border-radius: 12px;

  border: 1px solid var(--internal-border);

  padding: 11px 14px;
}


.auth-card .form-control:focus {
  border-color: var(--lia-roxo);

  box-shadow:
    0 0 0 3px rgba(89, 16, 107, 0.1);
}


.auth-card .form-check-input:checked {
  background-color: var(--lia-roxo);

  border-color: var(--lia-roxo);
}


.auth-button {
  width: 100%;

  margin-top: 28px;

  padding: 13px;

  border-radius: 30px;
}


/* ---------- RODAPÉ ---------- */

.auth-footer {
  margin-top: 25px;

  text-align: center;
}


.auth-footer p {
  margin: 0;

  color: var(--lia-cinza);

  font-size: 0.9rem;
}


.auth-footer a {
  color: var(--lia-roxo);

  font-weight: 700;

  text-decoration: none;
}


.auth-footer a:hover {
  text-decoration: underline;
}


/* ---------- RESPONSIVIDADE ---------- */

@media (max-width: 576px) {

  .auth-page {
    padding: 20px 12px;
  }


  .auth-card {
    padding: 28px 20px;
  }


  .auth-brand span {
    display: none;
  }


  .auth-header h1 {
    font-size: 1.65rem;
  }


  .progress-step {
    min-width: 44px;
  }


  .progress-step small {
    font-size: 0.62rem;
  }

}

/* ========================================
   CONTROLE DAS ETAPAS DO CADASTRO
======================================== */

.d-none {
  display: none !important;
}

/* ========================================
   PASSO 2 — ÁREA PROFISSIONAL
======================================== */

.area-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}

.area-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 18px 20px;

  border: 2px solid var(--internal-border);
  border-radius: 18px;

  background: #ffffff;

  text-align: left;
  cursor: pointer;

  transition: all 0.25s ease;
}

.area-card:hover {
  border-color: var(--lia-lilas);
  background: var(--lia-lilas-claro);
  transform: translateY(-2px);
}

.area-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 14px;

  background: var(--lia-lilas-claro);

  font-size: 23px;
}

.area-content {
  display: flex;
  flex-direction: column;
  gap: 4px;

  flex: 1;
}

.area-content strong {
  color: var(--lia-texto);
  font-size: 17px;
  font-weight: 700;
}

.area-content small {
  color: var(--lia-cinza);
  font-size: 13px;
  line-height: 1.5;
}

.area-check {
  width: 27px;
  height: 27px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border: 2px solid var(--internal-border);
  border-radius: 50%;

  color: transparent;

  font-weight: 700;

  transition: all 0.2s ease;
}


/* ÁREA SELECIONADA */

.area-card.selected {
  border-color: var(--lia-roxo);
  background: var(--lia-lilas-claro);

  box-shadow: 0 8px 22px rgba(89, 16, 107, 0.12);
}

.area-card.selected .area-check {
  background: var(--lia-roxo);
  border-color: var(--lia-roxo);
  color: #ffffff;
}


/* BOTÕES INFERIORES */

.area-actions {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-top: 28px;
}

.area-actions .auth-button {
  flex: 1;
  margin-top: 0;
}

.btn-voltar {
  padding: 14px 20px;

  border: 1px solid var(--internal-border);
  border-radius: 14px;

  background: #ffffff;
  color: var(--lia-cinza);

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;
}

.btn-voltar:hover {
  background: var(--lia-lilas-claro);
}

.area-actions .auth-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ========================================
   PASSO 3 — ROTINA
======================================== */

.rotina-bloco {
  margin-bottom: 26px;
}

.rotina-label {
  display: block;
  margin-bottom: 12px;

  color: var(--lia-texto);
  font-size: 0.9rem;
  font-weight: 700;
}

.rotina-opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.rotina-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 20px;

  border: 2px solid var(--internal-border);
  border-radius: 18px;

  background-color: #ffffff;

  text-align: left;
  cursor: pointer;

  transition: all 0.25s ease;
}

.rotina-option:hover {
  border-color: var(--lia-lilas);
  background-color: var(--lia-lilas-claro);
  transform: translateY(-2px);
}

.rotina-option.selected {
  border-color: var(--lia-roxo);
  background-color: var(--lia-lilas-claro);

  box-shadow:
    0 8px 22px rgba(89, 16, 107, 0.12);
}

.rotina-option > span {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.rotina-option strong {
  color: var(--lia-roxo-escuro);
  font-size: 1rem;
  margin-bottom: 5px;
}

.rotina-option small {
  color: var(--lia-cinza);
  line-height: 1.5;
}

.atendimento-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.check-card {
  cursor: pointer;
}

.check-card input {
  display: none;
}

.check-card span {
  display: block;

  padding: 12px 16px;

  border: 2px solid var(--internal-border);
  border-radius: 30px;

  background-color: #ffffff;

  color: var(--lia-texto);
  font-size: 0.88rem;
  font-weight: 600;

  transition: all 0.2s ease;
}

.check-card input:checked + span {
  border-color: var(--lia-roxo);
  background-color: var(--lia-lilas-claro);
  color: var(--lia-roxo-escuro);
}

.rotina-destaque {
  padding: 22px;

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      var(--lia-lilas-claro),
      var(--lia-rosa-claro)
    );

  border: 1px solid rgba(89, 16, 107, 0.08);
}

.rotina-mini-label {
  display: block;
  margin-bottom: 6px;

  color: var(--lia-roxo);

  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.rotina-destaque h3 {
  color: var(--lia-roxo-escuro);
  font-size: 1.25rem;
  font-weight: 700;
}

.rotina-destaque p {
  color: var(--lia-cinza);
  line-height: 1.6;
}

.rotina-destaque .form-select {
  min-height: 46px;
  border-radius: 12px;
  border-color: var(--internal-border);
}

@media (max-width: 576px) {

  .rotina-opcoes {
    grid-template-columns: 1fr;
  }

}

/* ========================================
   PASSO 4 — PERSONALIDADE DA LIA
======================================== */

.tom-options {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 14px;
}


.tom-card {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 18px;

  border: 2px solid var(--internal-border);

  border-radius: 18px;

  background-color: #ffffff;

  text-align: left;

  cursor: pointer;

  transition: all 0.25s ease;
}


.tom-card:hover {
  border-color: var(--lia-lilas);

  background-color: var(--lia-lilas-claro);

  transform: translateY(-2px);
}


.tom-card.selected {
  border-color: var(--lia-roxo);

  background-color: var(--lia-lilas-claro);

  box-shadow:
    0 8px 22px rgba(89, 16, 107, 0.12);
}


.tom-card > span {
  margin-bottom: 8px;

  font-size: 1.5rem;
}


.tom-card strong {
  margin-bottom: 4px;

  color: var(--lia-roxo-escuro);
}


.tom-card small {
  color: var(--lia-cinza);

  line-height: 1.5;
}


.form-help {
  display: block;

  margin-top: 7px;

  color: var(--lia-cinza);

  font-size: 0.78rem;
}


.personalidade-preview {
  margin-top: 25px;

  padding: 22px;

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      var(--lia-lilas-claro),
      var(--lia-rosa-claro)
    );
}


.personalidade-preview p {
  margin: 8px 0 0;

  color: var(--lia-roxo-escuro);

  font-weight: 600;

  line-height: 1.6;
}


@media (max-width: 576px) {

  .tom-options {
    grid-template-columns: 1fr;
  }

}

/* ========================================
   LOGIN
======================================== */

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;

  margin-top: 8px;
  margin-bottom: 22px;
}


.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--lia-cinza);
  font-size: 0.84rem;

  cursor: pointer;
}


.login-remember .form-check-input {
  margin: 0;

  cursor: pointer;
}


.login-forgot {
  color: var(--lia-roxo);
  font-size: 0.84rem;
  font-weight: 700;

  text-decoration: none;
}


.login-forgot:hover {
  color: var(--lia-roxo-escuro);

  text-decoration: underline;
}


@media (max-width: 480px) {

  .login-options {
    align-items: flex-start;
    flex-direction: column;

    gap: 10px;
  }

}

/* ========================================
   MENSAGENS DA LIA
======================================== */

.lia-message {
  display: none;

  align-items: flex-start;
  gap: 12px;

  margin-bottom: 22px;
  padding: 16px 18px;

  border-radius: 16px;

  font-size: 0.88rem;
  line-height: 1.5;

  animation: liaMessageIn 0.3s ease;
}


.lia-message.show {
  display: flex;
}


.lia-message-icon {
  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  font-size: 0.85rem;
  font-weight: 700;
}


.lia-message-content {
  flex: 1;
}


.lia-message-content strong {
  display: block;

  margin-bottom: 2px;

  color: var(--lia-roxo-escuro);
  font-size: 0.9rem;
}


.lia-message-content p {
  margin: 0;

  color: var(--lia-cinza);
}


/* SUCESSO */

.lia-message.success {
  background-color: #f1fbf6;
  border: 1px solid #ccebd9;
}

.lia-message.success .lia-message-icon {
  background-color: #d8f3e3;
  color: #278554;
}


/* ERRO */

.lia-message.error {
  background-color: #fff3f5;
  border: 1px solid #f2d1d8;
}

.lia-message.error .lia-message-icon {
  background-color: #f8dce2;
  color: #b84d63;
}


/* INFORMAÇÃO */

.lia-message.info {
  background-color: var(--lia-lilas-claro);
  border: 1px solid var(--internal-border);
}

.lia-message.info .lia-message-icon {
  background-color: var(--lia-lilas);
  color: var(--lia-roxo);
}


@keyframes liaMessageIn {

  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}