/* =============================================================
   IORD — Tela de Login
   login.css
   -------------------------------------------------------------
   Depende de: styles.css (design tokens, reset, utilitários)
   Sumário:
     1. Body / Shell
     2. Painel de Branding (aside esquerdo)
     3. Orbs decorativos & Grid de fundo
     4. Stats rápidas
     5. Painel de Formulário (main direito)
     6. Cabeçalho do formulário
     7. Botão Google
     8. Divisor OU
     9. Campos (email, senha, toggle de senha)
    10. Lembrar-me
    11. Alerta de erro
    12. Botão Entrar (com spinner)
    13. Rodapé / Copyright
    14. Modal — Esqueci minha senha
    15. Estado de sucesso do modal
    16. Toast de feedback
    17. Responsivo
============================================================= */

/* =============================================================
   1. BODY / SHELL
============================================================= */
.login-body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-surface-muted);
  display: flex;
  align-items: stretch;
  font-family: var(--font-base);
  -webkit-font-smoothing: antialiased;
}

.login-shell {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* =============================================================
   2. PAINEL DE BRANDING (aside esquerdo)
============================================================= */
.login-brand {
  position: relative;
  width: 460px;
  flex-shrink: 0;
  background: var(--gradient-brand);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Camada extra de profundidade sobre o gradiente */
.login-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 90%, rgba(4,40,48,0.25) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.login-brand__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 48px;
  width: 100%;
}

/* --- Logo + wordmark --- */
.login-brand__logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-brand__img {
    width: auto;
    height: 98px;
    margin-top: 3px;
}

.login-brand__mark {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

.login-brand__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.login-brand__name {
  font-size: 1.35rem;
  font-weight: var(--fw-bold);
  color: #fff;
  letter-spacing: -0.02em;
}

.login-brand__tagline {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.65);
  font-weight: var(--fw-regular);
  letter-spacing: 0.01em;
}

/* --- Headline --- */
.login-brand__headline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-brand__title {
  font-size: 2.4rem;
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.login-brand__desc {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  font-weight: var(--fw-regular);
}

/* =============================================================
   4. STATS RÁPIDAS
============================================================= */
.login-brand__stats {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: 20px 28px;
  backdrop-filter: blur(8px);
}

.login-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.login-stat__value {
  font-size: 1.55rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}

.login-stat__label {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-stat-divider {
  width: 1px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* --- Footer do branding --- */
.login-brand__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-brand__quote {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.68);
  font-style: italic;
  line-height: 1.6;
  padding-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.30);
}

.login-brand__version {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.38);
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
}

/* =============================================================
   3. ORBS DECORATIVOS & GRID DE FUNDO
============================================================= */
.login-brand__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.login-brand__orb--1 {
  width: 380px;
  height: 380px;
  top: -100px;
  right: -120px;
  background: radial-gradient(circle, rgba(1, 198, 191, 0.28) 0%, transparent 65%);
}

.login-brand__orb--2 {
  width: 300px;
  height: 300px;
  bottom: -80px;
  left: -80px;
  background: radial-gradient(circle, rgba(4, 40, 48, 0.35) 0%, transparent 65%);
}

.login-brand__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* =============================================================
   5. PAINEL DE FORMULÁRIO (main direito)
============================================================= */
.login-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-surface);
  padding: 48px 40px 32px;
  overflow-y: auto;
  min-height: 100vh;
}

.login-form-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: auto 0;
  /* suave entrada */
  animation: fadeSlideIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =============================================================
   6. CABEÇALHO DO FORMULÁRIO
============================================================= */
.login-form-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Logo mobile (visível apenas em telas pequenas) */
.login-form-header__mobile-logo {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark);
  margin-bottom: 4px;
}

.login-form-header__title {
  font-size: 1.65rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.login-form-header__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  line-height: 1.5;
}

.pw-icon.is-hidden {
    display: none !important;
}

/* =============================================================
   7. BOTÃO GOOGLE
============================================================= */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-strong);
  background-color: var(--color-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-base);
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  letter-spacing: -0.005em;
}

.btn-google:hover {
  border-color: var(--color-primary-light);
  background-color: var(--color-primary-50);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-google:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-google__icon {
  flex-shrink: 0;
}

/* =============================================================
   8. DIVISOR "OU"
============================================================= */
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.login-divider__line {
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.login-divider__text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

/* =============================================================
   9. CAMPOS (email, senha, toggle de senha)
============================================================= */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.login-field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-field__icon {
  position: absolute;
  left: 12px;
  color: var(--color-text-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color var(--transition-fast);
  z-index: 1;
}

.login-field__input {
  width: 100%;
  padding: 11px 40px 11px 40px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-family: var(--font-base);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
  outline: none;
}

.login-field__input::placeholder {
  color: var(--color-text-subtle);
  font-weight: var(--fw-regular);
}

.login-field__input:hover {
  border-color: var(--color-primary-light);
  background-color: var(--color-surface);
}

.login-field__input:focus {
  border-color: var(--color-primary);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-focus);
}

.login-field__input:focus + .login-field__icon,
.login-field__wrap:focus-within .login-field__icon {
  color: var(--color-primary);
}

/* Estado de erro no campo */
.login-field__input[aria-invalid="true"] {
  border-color: var(--color-negative);
  background-color: var(--color-negative-bg);
}

.login-field__input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(194, 59, 50, 0.14);
}

/* Mensagem de erro inline */
.login-field__error {
  font-size: var(--fs-xs);
  color: var(--color-negative);
  font-weight: var(--fw-medium);
  min-height: 16px;
  display: block;
  padding-left: 2px;
}

/* Botão de toggle da senha (olho) */
.login-field__toggle-pw {
  position: absolute;
  right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.login-field__toggle-pw:hover {
  color: var(--color-primary-dark);
  background-color: var(--color-primary-50);
}

/* Campo de senha: padding direito extra para o botão */
#loginPassword {
  padding-right: 44px;
}

/* Link "Esqueci minha senha" */
.login-forgot {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-dark);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-base);
  transition: color var(--transition-fast), text-decoration var(--transition-fast);
  white-space: nowrap;
}

.login-forgot:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================
   10. LEMBRAR-ME
============================================================= */
.login-remember {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  width: fit-content;
}

.login-remember__check {
  /* Oculta o checkbox nativo */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.login-remember__box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--color-border-strong);
  background-color: var(--color-surface-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
  position: relative;
}

/* checkmark via pseudo-element */
.login-remember__box::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.login-remember__check:checked ~ .login-remember__box {
  background: var(--gradient-brand);
  border-color: transparent;
  box-shadow: 0 2px 8px -2px rgba(1, 128, 147, 0.5);
}

.login-remember__check:checked ~ .login-remember__box::after {
  opacity: 1;
}

.login-remember:hover .login-remember__box {
  border-color: var(--color-primary-light);
}

.login-remember__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

/* =============================================================
   11. ALERTA DE ERRO GERAL
============================================================= */
.login-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-negative-bg);
  border: 1px solid rgba(194, 59, 50, 0.22);
  color: var(--color-negative);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  animation: fadeSlideIn 220ms ease both;
}

.login-alert[hidden] {
  display: none;
}

.login-alert svg {
  flex-shrink: 0;
  color: var(--color-negative);
}

/* =============================================================
   12. BOTÃO ENTRAR (com spinner)
============================================================= */
.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 13px var(--space-4);
  border-radius: var(--radius-md);
  background: var(--gradient-brand);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  font-family: var(--font-base);
  border: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 18px -4px rgba(1, 128, 147, 0.55);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
  position: relative;
  overflow: hidden;
}

/* Shimmer de brilho ao hover */
.btn-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}

.btn-login:hover::before {
  transform: translateX(100%);
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(1, 128, 147, 0.60);
}

.btn-login:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px -2px rgba(1, 128, 147, 0.45);
}

.btn-login:disabled,
.btn-login.is-loading {
  opacity: 0.72;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-login__text {
  transition: opacity var(--transition-fast);
}

/* Spinner de carregamento */
.btn-login__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-login__spinner[hidden] {
  display: none;
}

.btn-login__spinner svg {
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =============================================================
   13. RODAPÉ / COPYRIGHT
============================================================= */
.login-form-footer {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  text-align: center;
  line-height: 1.6;
}

.login-form-footer__link {
  color: var(--color-primary-dark);
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
}

.login-form-footer__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-copyright {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  text-align: center;
  padding-top: var(--space-4);
  opacity: 0.7;
}

/* =============================================================
   14. MODAL — ESQUECI MINHA SENHA
============================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(19, 39, 43, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn 180ms ease both;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  background-color: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: fadeSlideIn 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.modal--sm {
  max-width: 460px;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-3);
}

.modal__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.modal__subtitle {
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  display: block;
  margin-top: 2px;
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal__close:hover {
  background-color: var(--color-negative-bg);
  color: var(--color-negative);
}

/* Avatar ícone no modal */
.login-modal-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gradient-brand-soft);
  border: 1px solid var(--color-primary-100);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal__body {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

/* =============================================================
   15. ESTADO DE SUCESSO DO MODAL
============================================================= */
.login-forgot-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  text-align: center;
  animation: fadeSlideIn 280ms ease both;
}

.login-forgot-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-brand-soft);
  border: 1px solid var(--color-primary-100);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-forgot-success__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.015em;
}

.login-forgot-success__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 300px;
}

/* =============================================================
   16. TOAST DE FEEDBACK
============================================================= */
.cfg-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-text);
  color: var(--color-bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  max-width: 380px;
  animation: toastIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cfg-toast[hidden] {
  display: none;
}

.cfg-toast--success { background-color: var(--color-positive); }
.cfg-toast--error   { background-color: var(--color-negative); }
.cfg-toast--warning { background-color: var(--color-warning);  }

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =============================================================
   17. RESPONSIVO
============================================================= */

/* ≤ 1100px: painel de branding um pouco mais estreito */
@media (max-width: 1100px) {
  .login-brand { width: 380px; }
  .login-brand__inner { padding: 40px 36px; }
  .login-brand__title { font-size: 2rem; }
}

/* ≤ 860px: painel de branding oculto, formulário centralizado */
@media (max-width: 860px) {
  .login-brand { display: none; }

  .login-form-panel {
    padding: 40px var(--space-6);
    background-image:
      radial-gradient(circle at 100% 0%, rgba(1, 198, 191, 0.07), transparent 45%),
      radial-gradient(circle at 0% 100%, rgba(1, 128, 147, 0.05), transparent 40%);
  }

  .login-form-wrap {
    max-width: 440px;
    width: 100%;
  }

  .login-form-header__mobile-logo { display: flex; }
}

/* ≤ 560px: padding reduzido, modal ocupa mais espaço */
@media (max-width: 560px) {
  .login-form-panel { padding: var(--space-5) var(--space-4); }

  .login-form-wrap { gap: var(--space-4); }

  .login-form-header__title { font-size: 1.4rem; }

  .modal--sm { border-radius: var(--radius-lg); }
  .modal__header { padding: var(--space-4) var(--space-5); }
  .modal__body { padding: var(--space-4) var(--space-5); }
  .modal__footer { padding: var(--space-3) var(--space-5); }

  .cfg-toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    max-width: unset;
  }
}

/* ≤ 400px: ajustes finais para smartphones compactos */
@media (max-width: 400px) {
  .login-form-panel { padding: var(--space-4) var(--space-3); }

  .login-brand__stats { padding: 16px 18px; }

  .login-remember__label { font-size: 11px; }

  .btn-login { padding: 12px; font-size: var(--fs-sm); }
}