/* ═══════════════════════════════════════════════════════════════════
   MILATEC AUTH SYSTEM v4.0 — Split Panel Design
   Referências: Linear, Stripe, HubSpot, Notion
   Tema: Claro (fundo branco) · Azul como destaque, não como fundo
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Base */
.auth-screen {
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:stretch;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#F6F7F8;
}

/* ── Painel esquerdo: branding ─────────────────────────────────── */
.auth-left {
  width:44%;flex-shrink:0;
  background:#050866;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:48px 44px;
  position:relative;overflow:hidden;
}
/* Padrão estrutural SVG no fundo */
.auth-left::before {
  content:'';
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230183FF' fill-opacity='0.10'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.auth-left::after {
  content:'';
  position:absolute;
  bottom:-80px;right:-80px;
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(1,131,255,.28) 0%,transparent 70%);
  pointer-events:none;
}
/* Hairline de prata no topo do painel escuro — mesmo padrão do brand-hero */
.auth-left{position:relative}
.auth-left>.auth-silver-hairline{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#C9CDD8,#F5F6F8,#C9CDD8,transparent);pointer-events:none}

/* Logo no painel esquerdo */
.auth-brand-logo {
  position:relative;z-index:1;
  display:flex;align-items:center;gap:12px;
}
.auth-brand-logo svg { width:160px; }

/* Conteúdo central do painel esquerdo */
.auth-brand-content {
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:40px 0;
}
.auth-brand-title {
  font-family:'Inter',sans-serif;
  font-size:30px;font-weight:700;
  color:#F6F7F8;line-height:1.25;letter-spacing:-.5px;
  margin-bottom:16px;
}
.auth-brand-title span { color:#3FBFB4; }
.auth-brand-desc {
  font-size:15px;color:rgba(246,247,248,.55);
  line-height:1.65;max-width:300px;
}

/* Pills de módulos */
.auth-modules {
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:8px;margin-top:32px;
}
.auth-module-pill {
  font-size:11px;font-weight:600;letter-spacing:.3px;
  padding:5px 12px;border-radius:100px;
  border:1px solid rgba(255,255,255,.15);
  color:rgba(246,247,248,.7);
}

/* Rodapé do painel esquerdo */
.auth-brand-footer {
  position:relative;z-index:1;
  font-size:11px;color:rgba(246,247,248,.3);
}

/* ── Painel direito: formulário ────────────────────────────────── */
.auth-right {
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:40px 48px;
  background:#fff;
  overflow-y:auto;
}
.auth-form-wrap {
  width:100%;max-width:360px;
}

/* Cabeçalho do formulário */
.auth-form-header { margin-bottom:32px; }
.auth-form-eyebrow {
  font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
  color:#004AE8;margin-bottom:8px;
}
.auth-form-title {
  font-family:'Inter',sans-serif;
  font-size:24px;font-weight:700;color:#15161F;
  letter-spacing:-.4px;margin-bottom:6px;
}
.auth-form-subtitle { font-size:14px;color:#6b7280;line-height:1.5; }

/* Inputs */
.auth-field { margin-bottom:18px; }
.auth-field-label {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:7px;
}
.auth-field-label span {
  font-size:13px;font-weight:500;color:#374151;
}
.auth-field-link {
  font-size:12px;color:#004AE8;background:none;border:none;
  cursor:pointer;font-family:inherit;padding:0;
  text-decoration:underline;text-underline-offset:2px;
}
.auth-field-link:hover { color:#050866; }
.auth-input-wrap { position:relative; }
.auth-inp {
  width:100%;box-sizing:border-box;
  padding:11px 14px;
  border:1.5px solid #CBCEDB;
  border-radius:var(--r-lg);
  font-size:14px;font-family:inherit;color:#15161F;
  background:#fff;outline:none;
  transition:border-color .18s,box-shadow .18s;
}
.auth-inp:focus {
  border-color:#004AE8;
  box-shadow:0 0 0 3px #E3EBFF;
}
.auth-inp.error { border-color:#D6433C;box-shadow:0 0 0 3px #FCEAE8; }
.auth-inp.success { border-color:#1F8A4C;box-shadow:0 0 0 3px #E6F5EB; }
.auth-inp::placeholder { color:#9ca3af; }
/* Toggle mostrar senha */
.auth-pwd-toggle {
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:#9ca3af;
  padding:4px;display:flex;align-items:center;transition:color .15s;
}
.auth-pwd-toggle:hover { color:#6b7280; }
.auth-inp-pwd { padding-right:40px; }

/* Botão primário */
.auth-btn {
  width:100%;padding:13px 20px;
  background:#050866;color:#fff;
  border:none;border-radius:var(--r-lg);
  font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:all .18s;
  box-shadow:0 2px 8px rgba(5,8,102,.25);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.auth-btn:hover { background:#004AE8;box-shadow:0 4px 16px rgba(0,74,232,.35);transform:translateY(-1px); }
.auth-btn:active { transform:translateY(0); }
.auth-btn:disabled { opacity:.6;cursor:not-allowed;transform:none; }

/* Botão Google (login com conta corporativa via OAuth) */
.auth-btn-google {
  width:100%;padding:12px 20px;
  background:#fff;color:#3c4043;
  border:1px solid #dadce0;border-radius:var(--r-lg);
  font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:all .18s;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.auth-btn-google:hover { background:#f8f9fa;box-shadow:0 2px 6px rgba(60,64,67,.15); }
.auth-btn-google:active { background:#f1f3f4; }
.auth-btn-google:disabled { opacity:.6;cursor:not-allowed; }

/* Alert */
.auth-alert {
  display:none;padding:11px 14px;border-radius:var(--r-md);
  font-size:13px;margin-bottom:16px;
}
.auth-alert.err { background:#FCEAE8;border:1px solid #F4C7C3;color:#8F2822; }
.auth-alert.ok  { background:#E6F5EB;border:1px solid #C5E8D1;color:#175E36; }
.auth-alert.info{ background:#E9EEFC;border:1px solid #CBD8F7;color:#1E3E8F; }

/* Divisor */
.auth-sep {
  display:flex;align-items:center;gap:12px;
  margin:22px 0;color:#d1d5db;font-size:12px;
}
.auth-sep::before,.auth-sep::after {
  content:'';flex:1;height:1px;background:#e5e7eb;
}

/* Links secundários */
.auth-links {
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:20px;
}
.auth-sec-link {
  font-size:13px;color:#6b7280;background:none;border:none;
  cursor:pointer;font-family:inherit;padding:4px 6px;
  text-decoration:none;transition:color .15s;border-radius:var(--r-sm);
}
.auth-sec-link:hover { color:#004AE8;background:#E3EBFF; }

/* Força da senha */
.pwd-strength-bars { display:flex;gap:3px;margin-top:8px; }
.pwd-strength-bar {
  flex:1;height:3px;border-radius:2px;
  background:#e5e7eb;transition:background .2s;
}
.pwd-reqs { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px; }
.pwd-req-item {
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:#9ca3af;transition:color .2s;
}
.pwd-req-item svg { flex-shrink:0;transition:all .2s; }
.pwd-req-item.met { color:#1F8A4C; }

/* ── Spinner ──────────────────────────────────────────────────── */
@keyframes spin { to { transform:rotate(360deg); } }
.spinner {
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:white;
  animation:spin .7s linear infinite;
  display:none;
}

/* ── Responsivo ───────────────────────────────────────────────── */
@media(max-width:800px){
  .auth-left { display:none; }
  .auth-right { padding:32px 24px; }
}
@media(max-width:480px){
  .auth-right { padding:24px 20px;align-items:flex-start;padding-top:40px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN v2 — fundo com foto real da fábrica + cartão de vidro fosco
   (glassmorphism). Pedido explícito: a tela de login (só ela — as de
   troca/recuperação de senha, #change-pwd-screen/#forgot-pwd-screen,
   continuam no layout dividido .auth-left/.auth-right acima) deixar de
   ser o formulário genérico e ganhar identidade forte da empresa.
   Tudo aqui embaixo é escopado em .authv2-*, nomes próprios (não reusa
   .auth-field/.auth-inp/.auth-btn) de propósito — o cartão de vidro
   fica sobre uma foto escura, precisa de paleta clara-sobre-escuro
   diferente do resto do sistema de auth (claro-sobre-branco); reusar as
   classes antigas exigiria sobrescrever tudo de novo aqui e arriscava
   vazar estilo pras outras 2 telas que ainda usam o design antigo.
   Único elemento que a tela nova REAPROVEITA de propósito: #login-err
   continua com a classe .auth-alert (JS de auth.service.js escreve esse
   nome de classe direto via el.className, não dava pra trocar sem
   também mexer no JS) — o alerta rosa/claro ainda fica legível sobre o
   vidro escuro, só não segue a paleta nova à risca. ═══════════════════════════════════════════════════════════════════ */
.authv2-screen {
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:flex-end;
  padding:48px 64px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background-image:url('../assets/img/login-bg.jpg?v=mldsv359');
  background-size:cover;background-position:center;
  animation:authv2fadein .4s ease;
}
@keyframes authv2fadein { from{opacity:0} to{opacity:1} }
.authv2-overlay {
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,8,40,.68),rgba(5,8,40,.90));
  pointer-events:none;
}

/* Marca no canto superior esquerdo, direto sobre a foto */
.authv2-topbrand { position:absolute;top:40px;left:56px;display:flex;align-items:center;gap:10px;z-index:2 }
.authv2-topbrand span { font-weight:800;font-size:19px;color:#F6F7F8;letter-spacing:-.3px }
/* Logo padrão (a mesma do menu lateral pós-login) — já é pensada pra
   fundo escuro (o menu lateral é dark navy), então vai direto sobre a
   foto, sem chip nenhum atrás (pedido explícito: nada de fundo branco). */
.authv2-logo-chip { display:inline-flex;align-items:center }
.authv2-logo-chip img { display:block }

/* Texto de marca + os "pontos de atenção" (pills de módulo), canto
   inferior esquerdo — mesmo conteúdo que já existia no painel azul
   antigo, só reposicionado direto sobre a foto (layout novo não tem
   mais painel lateral fixo). */
.authv2-bottombrand { position:absolute;left:56px;bottom:44px;right:56px;max-width:460px;z-index:2 }
.authv2-bottombrand h2 { font-size:26px;font-weight:800;color:#fff;line-height:1.28;letter-spacing:-.3px;margin-bottom:10px }
.authv2-bottombrand h2 span { color:#5EEAD4 }
.authv2-bottombrand p { font-size:13px;color:rgba(246,247,248,.72);line-height:1.6;margin-bottom:18px;max-width:400px }
.authv2-pills { display:flex;flex-wrap:wrap;gap:8px }

/* Cartão de vidro */
.authv2-card {
  position:relative;z-index:3;
  width:100%;max-width:392px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:34px 30px;
  animation:authv2cardin .5s cubic-bezier(.16,1,.3,1) .08s both;
}
@keyframes authv2cardin { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.authv2-card-logo { display:flex;align-items:center;gap:9px;margin-bottom:22px }
.authv2-card-logo span { font-weight:800;font-size:16px;color:#fff;letter-spacing:-.2px }
.authv2-eyebrow { font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#7FD4FF;margin-bottom:8px }
.authv2-title { font-size:22px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:6px }
.authv2-subtitle { font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:24px }

.authv2-field { margin-bottom:15px }
.authv2-field-label { display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:7px }
.authv2-field-link { font-size:11px;font-weight:600;color:#7FD4FF;background:none;border:none;cursor:pointer;font-family:inherit;padding:0 }
.authv2-field-link:hover { text-decoration:underline }
.authv2-input-wrap { position:relative }
.authv2-inp {
  width:100%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:11px 13px;font-size:13.5px;color:#fff;font-family:inherit;
  outline:none;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
  box-sizing:border-box;
}
.authv2-inp::placeholder { color:rgba(255,255,255,.4) }
.authv2-inp:hover { background:rgba(255,255,255,.13) }
/* Autofill do navegador (Chrome/Edge) força um fundo claro sólido no
   campo, ignorando o glass escuro — some com o contraste do texto E do
   olho de mostrar/ocultar senha (branco sobre esse fundo claro vira
   invisível). box-shadow inset simula nosso próprio fundo por cima do
   que o navegador pintaria; o delay gigante na transition é o truque
   padrão pra atrasar o navegador reafirmar a cor dele. */
.authv2-inp:-webkit-autofill,
.authv2-inp:-webkit-autofill:hover,
.authv2-inp:-webkit-autofill:focus {
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.10) inset;
  box-shadow:0 0 0 1000px rgba(255,255,255,.10) inset;
  caret-color:#fff;
  transition:background-color 5000s ease-in-out 0s;
}
.authv2-inp:focus { border-color:#7FD4FF;background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(127,212,255,.18) }
.authv2-inp.error { border-color:#ff8a8a }
.authv2-inp.success { border-color:#5EEAD4 }
.authv2-inp-pwd { padding-right:40px }
.authv2-pwd-toggle { position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:rgba(255,255,255,.55);padding:4px;display:flex;transition:color .15s }
.authv2-pwd-toggle:hover { color:#fff }

.authv2-btn {
  width:100%;padding:12px 20px;margin-top:2px;
  background:#0183FF;color:#fff;border:none;border-radius:10px;
  font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 16px rgba(1,131,255,.35);
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.authv2-btn:hover { background:#3399FF;box-shadow:0 6px 22px rgba(1,131,255,.5);transform:translateY(-1px) }
.authv2-btn:active { transform:translateY(0) }
.authv2-btn:disabled { opacity:.6;cursor:not-allowed;transform:none }

.authv2-sep { display:flex;align-items:center;gap:12px;margin:20px 0;color:rgba(255,255,255,.35);font-size:11.5px }
.authv2-sep::before,.authv2-sep::after { content:'';flex:1;height:1px;background:rgba(255,255,255,.14) }

.authv2-btn-google {
  width:100%;padding:11px 20px;background:rgba(255,255,255,.95);color:#3c4043;
  border:1px solid rgba(255,255,255,.2);border-radius:10px;font-size:13.5px;font-weight:600;
  font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .18s ease,box-shadow .18s ease;
}
.authv2-btn-google:hover { background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2) }
.authv2-btn-google:disabled { opacity:.6;cursor:not-allowed }

.authv2-links { text-align:center;margin-top:18px;font-size:11px;color:rgba(255,255,255,.45) }

.authv2-sec-link { font-size:12.5px;color:rgba(255,255,255,.55);background:none;border:none;cursor:pointer;font-family:inherit;padding:4px 6px;transition:color .15s }
.authv2-sec-link:hover { color:#fff }

/* Telas de troca/recuperação de senha (#change-pwd-screen/#forgot-pwd-screen)
   reaproveitam .authv2-* — pedido explícito: "a página de redefinição de
   senha deve dialogar com a página de login". A cor "vazia" da barra de
   força (_cpwdStrength, auth.service.js) já foi ajustada lá pra um cinza
   semitransparente que funciona nos dois fundos (claro no perfil dentro
   do app, escuro aqui) — nada pra sobrescrever via CSS aqui (um
   !important pegaria TODAS as cores da barra, não só o estado vazio, e
   quebraria a indicação de força fraca/forte). Só o texto dos requisitos
   (.pwd-req-item) mesmo, que não é setado via JS. */
.authv2-card .pwd-req-item { color:rgba(255,255,255,.5) }
.authv2-card .pwd-req-item.met { color:#5EEAD4 }

@media(max-width:860px){
  .authv2-screen { justify-content:center;padding:24px }
  .authv2-bottombrand { display:none }
  .authv2-topbrand { top:22px;left:22px }
  .authv2-card { max-width:100%;padding:28px 22px }
}