/* =============================================================================
   login.css | Tela de login do MVP Gestão Financeira
   Usa os design tokens de global.css. Sem dependências novas.
   ============================================================================= */

   .login-body { min-height: 100vh; background: var(--color-bg); }

   .login-layout {
     min-height: 100vh;
     display: grid;
     grid-template-columns: 1.05fr 1fr;
   }
   
   /* --------------------------------- ESQUERDA -------------------------------- */
   .login-illustration {
     position: relative;
     overflow: hidden;
     background:
       radial-gradient(circle at 22% 18%, var(--color-brand-soft) 0%, transparent 55%),
       linear-gradient(160deg, #ffffff 0%, #ffffff 60%);
   }
   .login-illustration__media {
     position: absolute; inset: 0;
     /* Adicione a ilustração da referência em: frontend/img/login-illustration.png */
     background: url('../img/login-illustration.png') center/cover no-repeat;
   }
   
   /* Card "Bem-vindo à nova versão" — só no 1º acesso (toggle via JS/localStorage) */
   .welcome-card {
     position: absolute;
     left: var(--space-8);
     bottom: var(--space-8);
     max-width: 320px;
     display: flex;
     gap: var(--space-3);
     padding: var(--space-4) var(--space-5);
     background: rgba(16, 36, 28, 0.92);
     color: #fff;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     backdrop-filter: blur(6px);
     animation: welcome-in var(--duration-base) var(--ease-standard) both;
   }
   .welcome-card[hidden] { display: none; }
   .welcome-card__icon {
     flex: none; width: 40px; height: 40px;
     display: grid; place-items: center;
     background: var(--color-brand); border-radius: var(--radius-sm);
   }
   .welcome-card__icon i { width: 20px; height: 20px; color: #fff; }
   .welcome-card__text { display: flex; flex-direction: column; gap: 2px; }
   .welcome-card__text strong { font-size: 14px; }
   .welcome-card__text span { font-size: 12.5px; color: rgba(255,255,255,0.82); }
   .welcome-card__close {
     position: absolute; top: 8px; right: 8px;
     width: 24px; height: 24px; display: grid; place-items: center;
     background: transparent; border: 0; color: rgba(255,255,255,0.7);
     border-radius: 6px; transition: color var(--duration-fast) var(--ease-standard);
   }
   .welcome-card__close:hover { color: #fff; }
   .welcome-card__close i { width: 15px; height: 15px; }
   
   @keyframes welcome-in {
     from { opacity: 0; transform: translateY(12px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* --------------------------------- DIREITA -------------------------------- */
   .login-panel {
     display: flex; align-items: center; justify-content: center;
     padding: var(--space-8);
     background: var(--color-surface);
   }
   .login-box { width: min(400px, 100%); }
   
   .login-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
   .login-brand__text { display: flex; flex-direction: column; }
   .login-brand__name { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
   .login-brand__tag  { font-size: 12.5px; color: var(--color-text-secondary); }
   
   .login-greeting { margin-bottom: var(--space-6); }
   .login-title { font-size: 24px; margin-bottom: var(--space-2); }
   .login-subtitle { color: var(--color-text-secondary); font-size: 13.5px; max-width: 34ch; }
   
   .login-error {
     min-height: 18px; margin-bottom: var(--space-2);
     color: var(--color-negative); font-size: 12.5px; font-weight: 500;
   }
   
   /* ------------------------------- ESTADOS ---------------------------------- */
   .login-stage { position: relative; }
   .state {
     transition: opacity var(--duration-base) var(--ease-standard),
                 transform var(--duration-base) var(--ease-standard);
   }
   .state[hidden] { display: none; }
   .state.is-leaving { opacity: 0; transform: translateY(6px); pointer-events: none; }
   .state.is-entering { opacity: 0; transform: translateY(-6px); }
   
   .state__label { font-size: 12.5px; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
   
   /* Card do usuário recente */
   .recent-card {
     width: 100%; display: flex; align-items: center; gap: var(--space-3);
     padding: var(--space-4);
     background: var(--color-surface); border: 1px solid var(--color-border);
     border-radius: var(--radius-md); text-align: left;
     transition: border-color var(--duration-fast) var(--ease-standard),
                 box-shadow var(--duration-fast) var(--ease-standard),
                 transform var(--duration-fast) var(--ease-standard);
   }
   .recent-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-md); transform: translateY(-1px); }
   .recent-card__avatar {
     flex: none; width: 44px; height: 44px; display: grid; place-items: center;
     background: var(--color-brand-soft); color: var(--color-brand-dark); border-radius: var(--radius-pill);
   }
   .recent-card__avatar i { width: 22px; height: 22px; }
   .recent-card__info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
   .recent-card__name { font-weight: 700; font-size: 15px; }
   .recent-card__email { font-size: 12.5px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .recent-card__chevron { color: var(--color-text-muted); display: grid; place-items: center; }
   .recent-card__chevron i { width: 20px; height: 20px; }
   
   /* Divider "ou" */
   .divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--color-text-muted); font-size: 12px; }
   .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
   
   /* Usuário selecionado (estado senha) */
   .selected-user { margin-bottom: var(--space-5); }
   .selected-user__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
   .selected-user__email { display: block; font-size: 13px; color: var(--color-text-secondary); }
   
   /* ------------------------------- CAMPOS ----------------------------------- */
   .field { margin-bottom: var(--space-4); }
   .field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: var(--space-2); color: var(--color-text); }
   
   .input-wrap { position: relative; display: flex; align-items: center; }
   .input-wrap__icon { position: absolute; left: 12px; display: grid; place-items: center; color: var(--color-text-muted); pointer-events: none; }
   .input-wrap__icon i { width: 18px; height: 18px; }
   .input-wrap input {
     width: 100%; padding: 12px 42px 12px 40px;
     font-size: 14px; color: var(--color-text);
     background: var(--color-surface-muted);
     border: 1px solid var(--color-border); border-radius: var(--radius-sm);
     transition: border-color var(--duration-fast) var(--ease-standard),
                 box-shadow var(--duration-fast) var(--ease-standard),
                 background var(--duration-fast) var(--ease-standard);
   }
   .input-wrap input::placeholder { color: var(--color-text-muted); }
   .input-wrap input:focus {
     outline: none; background: var(--color-surface);
     border-color: var(--color-brand);
     box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.15);
   }
   .input-wrap__toggle {
     position: absolute; right: 8px; width: 30px; height: 30px;
     display: grid; place-items: center;
     background: transparent; border: 0; color: var(--color-text-muted);
     border-radius: 6px; transition: color var(--duration-fast) var(--ease-standard);
   }
   .input-wrap__toggle:hover { color: var(--color-text); }
   .input-wrap__toggle i { width: 18px; height: 18px; }
   
   /* ------------------------------- BOTÕES ----------------------------------- */
   .btn {
     display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
     font-size: 14px; font-weight: 600; border: 1px solid transparent;
     border-radius: var(--radius-sm); padding: 12px 16px;
     transition: background var(--duration-fast) var(--ease-standard),
                 border-color var(--duration-fast) var(--ease-standard),
                 transform var(--duration-fast) var(--ease-standard),
                 opacity var(--duration-fast) var(--ease-standard);
   }
   .btn i { width: 18px; height: 18px; }
   .btn-block { width: 100%; }
   
   .btn-primary { background: var(--color-brand); color: #fff; margin-top: var(--space-2); }
   .btn-primary:hover:not(:disabled) { background: var(--color-brand-dark); transform: translateY(-1px); }
   .btn-primary:active:not(:disabled) { transform: translateY(0); }
   .btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }
   
   .btn-ghost { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
   .btn-ghost:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
   
   .btn-link {
     background: transparent; color: var(--color-text-secondary);
     padding: var(--space-3) 0 0; margin: var(--space-2) auto 0; font-weight: 600;
   }
   .btn-link:hover { color: var(--color-brand-dark); }
   
   /* Spinner de loading */
   .btn__spinner {
     width: 16px; height: 16px; display: none; flex: none;
     border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%;
     animation: spin 0.7s linear infinite;
   }
   .btn.is-loading .btn__spinner { display: inline-block; }
   .btn.is-loading .btn__label { opacity: 0.85; }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   .login-help { margin-top: var(--space-5); text-align: center; font-size: 13px; color: var(--color-text-secondary); }
   .login-help a { color: var(--color-brand-dark); font-weight: 600; }
   .login-help a:hover { text-decoration: underline; }
   
   /* --------------------- ANIMAÇÃO DE ENTRADA (staggered) -------------------- */
   .reveal { opacity: 0; transform: translateY(10px); animation: reveal-in var(--duration-base) var(--ease-standard) forwards; }
   .login-illustration.reveal { transform: translateX(-12px); animation-name: reveal-in-x; }
   .login-brand.reveal    { animation-delay: 80ms; }
   .login-greeting.reveal { animation-delay: 160ms; }
   .login-stage.reveal    { animation-delay: 240ms; }
   
   @keyframes reveal-in   { to { opacity: 1; transform: translateY(0); } }
   @keyframes reveal-in-x { to { opacity: 1; transform: translateX(0); } }
   
   /* ------------------------------ RESPONSIVO -------------------------------- */
   @media (max-width: 860px) {
     .login-layout { grid-template-columns: 1fr; }
     /* Mobile: ilustração ocultada por completo — prioridade no login enxuto */
     .login-illustration { display: none; }
     .login-panel { padding: var(--space-6); align-items: flex-start; }
     .login-box { padding-top: var(--space-6); }
   }
   
   /* --------------------------- REDUCED MOTION ------------------------------- */
   @media (prefers-reduced-motion: reduce) {
     .reveal, .login-illustration.reveal, .welcome-card { animation: none; opacity: 1; transform: none; }
     .state, .state.is-leaving, .state.is-entering { transition: none; transform: none; }
   }