/* ============================================================
   LOGIN MESTRE — finanzeia.com.br

   A porta de entrada da plataforma, e a ÚNICA página do sistema
   inteiro que pede senha.

   Este arquivo não é um visual novo: é a tela de login que os
   clientes já conheciam, recortada de roupas/styles/main.css. A
   virada para o login centralizado muda o endereço, não a tela —
   quem já usava o Finanze não deve sentir que mudou de sistema.

   O recorte foi feito à mão e é intencionalmente mínimo: só as
   variáveis, o reset, o overlay de login e o seletor de loja do
   owner. Nada de painel, nada de tabela, nada de gráfico. Uma
   página que só faz login não tem por que baixar 12 mil linhas
   de CSS de um sistema que ela nunca vai mostrar.

   MEXEU NO LOGIN DO PAINEL? Não precisa mexer aqui — o painel
   não tem mais login. O caminho contrário é que vale: mudou a
   identidade visual do Finanze, esta tela precisa acompanhar,
   senão o cliente atravessa dois desenhos diferentes em dois
   segundos.
   ============================================================ */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap');

/* ============================================
   VARIÁVEIS
   ============================================ */
:root {
  /* Fundos — preto absoluto luxury */
  --bg-deep:      #0A0A0A;
  --bg-base:      #121212;
  --surface-1:    #1A1A1A;
  --surface-2:    #1E1E1E80;
  --surface-2s:   #1E1E1E;
  --surface-3:    #242424;
  --border:       #2A2A2A;
  --border-hover: #3A3A3A;

  /* Textos */
  --text-primary:   #FFFFFF;
  --text-secondary: #B3B3B3;
  --text-muted:     #6B6B6B;

  /* Dourado — identidade premium */
  --purple:        #D4AF37;   /* alias mantido para compatibilidade de classes */
  --purple-dark:   #B8860B;
  --purple-light:  #FFD700;
  --purple-glow:   rgba(212, 175, 55, 0.20);
  --purple-subtle: rgba(212, 175, 55, 0.08);

  /* Dourado explícito */
  --gold:          #D4AF37;
  --gold-bright:   #FFD700;
  --gold-dark:     #B8860B;
  --gold-glow:     rgba(212, 175, 55, 0.20);
  --gold-subtle:   rgba(212, 175, 55, 0.08);

  /* Status */
  --green:         #22C55E;
  --green-subtle:  rgba(34, 197, 94, 0.10);
  --red:           #EF4444;
  --red-subtle:    rgba(239, 68, 68, 0.10);
  --info:          #3B82F6;
  --warning:       #F59E0B;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.6);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.7);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.8);
  --shadow-purple: 0 0 32px rgba(212, 175, 55, 0.22);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.2s var(--ease);
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(212, 175, 55, 0.06), transparent),
    radial-gradient(ellipse 50% 30% at 90% 110%, rgba(184, 134, 11, 0.04), transparent);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  padding: 0 0 60px;
}



/* ═══════════════════════════════════════════════════════════
   AUTENTICAÇÃO — Tela de Login
   ═══════════════════════════════════════════════════════════ */
@keyframes authOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes authShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes authOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.04); }
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 60% 40%, #1a1400 0%, #0a0a0a 70%);
  animation: authOverlayIn 0.35s ease;
}

.auth-overlay.auth-saindo {
  animation: authOut 0.45s ease forwards;
  pointer-events: none;
}

/* Enquanto verifica sessão: esconde o formulário, mostra spinner */
.auth-overlay.auth-verificando .auth-shimmer-line,
.auth-overlay.auth-verificando .auth-field-group,
.auth-overlay.auth-verificando .auth-erro,
.auth-overlay.auth-verificando .auth-btn-entrar,
.auth-overlay.auth-verificando .auth-hint {
  display: none !important;
}

.auth-loading-state {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 0 8px;
}

.auth-overlay.auth-verificando .auth-loading-state {
  display: flex;
}

.auth-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: var(--purple, #a78bfa);
  border-radius: 50%;
  animation: authSpinnerGiro 0.7s linear infinite;
}

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

.auth-loading-txt {
  font-size: 0.8rem;
  color: var(--text-muted, #666);
  letter-spacing: 0.03em;
}

.auth-card {
  background: #111;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 18px;
  padding: 44px 40px 36px;
  width: 380px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: authCardIn 0.45s cubic-bezier(.34,1.3,.64,1) 0.1s both;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.08);
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.auth-logo-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(1.05);
}

.auth-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, #B8860B 0%, #FFD700 45%, #D4AF37 60%, #B8860B 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: authShimmer 3s linear infinite;
}

.auth-logo-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.auth-shimmer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
  margin: -6px 0 2px;
}

.auth-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.auth-field-group { display: flex; flex-direction: column; }

.auth-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.auth-input:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}

.auth-senha-wrap {
  position: relative;
  /* flex em vez de block: como <input> é inline-block, o bloco criava
     uma linha com espaço de descendente embaixo, deixando o wrapper
     alguns px mais alto que o campo. O top:50% do botão media essa
     altura maior e caía abaixo do centro real do input. */
  display: flex;
  align-items: center;
}

/* vale para os dois campos: .auth-input no login, .cfg-input nas
   configurações — sem isso o texto passava por baixo do olho */
.auth-senha-wrap .auth-input,
.auth-senha-wrap .cfg-input {
  flex: 1;
  min-width: 0;
  padding-right: 42px;
  /* o flex conta a margin box: um margin-bottom de 16px no campo
     esticava o wrapper para 60px contra 44px do input, e o top:50%
     do botão media essa altura maior — era a queda de 8px */
  margin-bottom: 0;
}

.auth-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* zera a altura de linha herdada, que empurrava o SVG para baixo
     dentro da caixa do botão */
  line-height: 0;
  transition: color 0.2s, background 0.15s;
}

.auth-eye-btn svg { display: block; }
.auth-eye-btn:hover { color: var(--gold); }

.auth-erro {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(220,50,50,0.1);
  border: 1px solid rgba(220,50,50,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  color: #ff6b6b;
  margin: -4px 0;
}

.auth-erro::before { content: '⚠'; font-size: 0.9rem; flex-shrink: 0; }

.auth-btn-entrar {
  width: 100%;
  padding: 14px;
  background: var(--gold);
  color: #111;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(212,175,55,0.25);
  margin-top: 4px;
}

.auth-btn-entrar:hover:not(:disabled) {
  background: var(--gold-bright);
  box-shadow: 0 6px 28px rgba(212,175,55,0.4);
}

.auth-btn-entrar:active:not(:disabled) { transform: scale(0.98); }

.auth-btn-entrar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-hint {
  text-align: center;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.2);
  margin: -6px 0 0;
  letter-spacing: 0.04em;
}



/* ═══════════════════════════════════════════════════════════
   SELETOR DE LOJA — só para o owner

   Quem administra mais de uma loja escolhe qual vai abrir. Essa
   escolha acontece AQUI, no mestre, e não lá dentro: é ela que
   define para qual subdomínio a pessoa vai, e é por isso que os
   painéis puderam perder a tela de seleção junto com a de login.
   ═══════════════════════════════════════════════════════════ */

.loja-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 60% 40%, #1a1400 0%, #0a0a0a 70%);
  animation: authOverlayIn 0.35s ease;
}

.loja-overlay.loja-saindo {
  animation: authOut 0.4s ease forwards;
  pointer-events: none;
}

.loja-card {
  background: #111;
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 18px;
  padding: 44px 40px 36px;
  width: 420px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: authCardIn 0.45s cubic-bezier(.34,1.3,.64,1) 0.05s both;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.08);
  position: relative;
  overflow: hidden;
}

.loja-card::before {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.loja-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.loja-logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  background: linear-gradient(135deg, #D4AF37 0%, #f5d878 50%, #b8962e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loja-logo-sub {
  font-size: 0.72rem;
  color: rgba(212,175,55,0.6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loja-saudacao {
  font-size: 0.95rem;
  color: #e0e0e0;
  margin: 0;
  font-weight: 600;
}

.loja-instrucao {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.loja-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}

.loja-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  color: inherit;
}

.loja-item:hover {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.4);
}

.loja-item:active {
  transform: scale(0.98);
}

.loja-item-icone {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.loja-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.loja-item-nome {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f0f0f0;
}

.loja-item-id {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  font-family: monospace;
  letter-spacing: 0.04em;
}

.loja-item-arrow {
  color: rgba(212,175,55,0.5);
  flex-shrink: 0;
}

.loja-vazia {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  padding: 20px 0;
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   TELAS PEQUENAS

   Recortado das media queries de main.css. O font-size de 16px
   não é estética: abaixo disso o Safari do iPhone dá zoom
   sozinho ao focar o campo, e a pessoa começa o login com a
   tela torta.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .auth-input {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: 32px 24px 28px;
  }

  .auth-logo-text {
    font-size: 1.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   ACESSIBILIDADE — quem pediu menos movimento
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
  }

  .auth-logo-text {
    animation: none !important;
    background-position: 0 center !important;
  }
}