/* PILOTO — index.css (tela de login/entrada; na raiz).
   Migrado para o design system compartilhado (/shared/design.css): os tokens
   de cor/espaço/raio/sombra vêm de lá (--c-*, --esp-*, --raio-*, --sombra-*).
   Aqui fica APENAS o layout específico da tela de login. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* V155: raiz em 16px (as medidas em rem do DS valem o que dizem); texto corrido 15px. */
html,body{height:100%;}
body{font-family:var(--fam-sans);background:var(--c-bg);color:var(--c-texto);font-size:15px;-webkit-font-smoothing:antialiased;}
:focus-visible{outline:var(--foco-largura) solid var(--foco-cor);outline-offset:var(--foco-folga);}

/* Default = sizing compacto (desktop / tablet) */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.login-wrap::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-acento) 12%,transparent) 0%,transparent 70%);top:-200px;right:-150px;pointer-events:none;}
.login-wrap::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-acento) 6%,transparent) 0%,transparent 70%);bottom:-100px;left:-100px;pointer-events:none;}

.login-card{background:var(--c-bg-elev);border-radius:var(--raio-xl);padding:var(--esp-12) 44px;width:100%;max-width:420px;box-shadow:var(--sombra-lg);border:1px solid var(--c-borda);position:relative;z-index:1;animation:fadeUp .5s cubic-bezier(0.4,0,0.2,1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.login-logo{display:flex;align-items:center;gap:var(--esp-3);margin-bottom:var(--esp-8);}
.login-logo-icon{width:44px;height:44px;background:var(--btn-primario-fundo);color:var(--c-acento-texto);border-radius:var(--raio-lg);display:flex;align-items:center;justify-content:center;}
.login-logo-icon svg{width:24px;height:24px;}
.login-logo h1{font-size:var(--fs-md);font-weight:600;line-height:1.2;}

.login-title{font-size:var(--fs-2xl);font-weight:600;letter-spacing:var(--ls-tight);margin-bottom:var(--esp-1);}
.login-sub{color:var(--c-texto-2);font-size:var(--fs-sm);margin-bottom:var(--esp-8);}

.login-err{display:none;align-items:center;gap:var(--esp-2);background:var(--c-erro-bg);border:1px solid color-mix(in srgb,var(--c-erro) 25%,transparent);color:var(--c-erro);border-radius:var(--raio-md);padding:var(--esp-3) var(--esp-3);font-size:var(--fs-sm);margin-bottom:var(--esp-4);}
.login-err.show{display:flex;}

/* Campos e botão vêm do design system: .campo/.label/.input e
   .btn.btn-primario.btn-grande.btn-bloco. Aqui só o respiro acima do botão. */
.login-card .btn{margin-top:var(--esp-2);}

/* V148: troca de senha obrigatória no celular. */
.troca-dica{font-size:var(--fs-xs);color:var(--c-texto-2);margin-top:var(--esp-1);}


/* Botão de tema: .btn.btn-discreto do DS no canto (16px da borda). */
.theme-toggle{position:fixed;top:var(--esp-4);right:var(--esp-4);z-index:10;font-size:var(--fs-sm);}

.loading-overlay{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--c-bg) 55%,transparent);backdrop-filter:blur(4px);z-index:300;align-items:center;justify-content:center;}
.loading-overlay.show{display:flex;}
.spinner{width:36px;height:36px;border:3px solid var(--c-borda);border-top-color:var(--c-acento-ativo);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Phone (lado curto < 600px). Sizing maior para área de toque + font 16px
   nos inputs (o design system já usa --fs-base=1rem, que aqui vira 16px). */
@media (max-width: 600px) {
  .login-wrap{padding:24px 20px;}
  .login-wrap::before{width:400px;height:400px;top:-120px;right:-100px;}
  .login-wrap::after{display:none;}
  .login-card{padding:36px 28px;max-width:400px;}
  .login-logo{margin-bottom:28px;}
  .login-title{font-size:var(--fs-xl);}
  .login-sub{margin-bottom:28px;}
  .campo{margin-bottom:18px;}
  .campo .label{font-size:var(--fs-base);margin-bottom:var(--esp-2);}
  .login-card .btn{height:3rem;font-weight:600;margin-top:var(--esp-3);}
}