/* ============================================================
   Lead B2B, tela de login nova (fase 5 do redesign)
   Depende dos tokens do dist/css/theme.css, carregado antes.
   Fonte da verdade visual: mockups/login.html
   ============================================================ */

/* Casca da página: painel de marca à esquerda + formulário à direita */
.login-page{margin:0;font-size:.9rem}
.login-shell{
  min-height:100vh;
  display:flex;
  background:var(--bg);
}

/* ================= Painel de marca (esquerda) ================= */
/* O gradiente deriva dos tokens de marca do tenant e substitui os
   PNGs de fundo gigantes do template antigo. */
.brand-panel{
  flex:1.1;position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;gap:24px;padding:48px 56px;color:#fff;
  background:
    radial-gradient(1000px 600px at 85% -10%, color-mix(in srgb, var(--brand-login) 55%, rgba(255,255,255,.35)), transparent 60%),
    radial-gradient(800px 700px at -10% 110%, color-mix(in srgb, var(--brand-login-hover) 55%, rgba(0,0,0,.9)), transparent 55%),
    linear-gradient(150deg, color-mix(in srgb, var(--brand-login-hover) 45%, #04102e) 0%, var(--brand-login-hover) 55%, var(--brand-login) 100%);
}
/* Grade técnica sutil no fundo, remete a catálogo de peças */
.brand-panel::before{
  content:"";position:absolute;inset:0;opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(closest-side at 60% 40%, #000, transparent 130%);
}
/* Fundo personalizado do tenant (wallpaper_login ou banner de login).
   O say_script_loader só aplica a imagem quando há config própria. */
.bp-wallpaper{position:absolute;inset:0;background-size:cover;background-position:center}
/* Com arte própria do tenant nada é sobreposto a ela (o logo fica sobre o
   formulário), então o texto institucional genérico sai de cena para não
   brigar com a mensagem da própria imagem */
.bp-wallpaper.has-image~.bp-mid{display:none}

.bp-mid{position:relative;max-width:460px}
.bp-mid h1{
  font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.18;
  margin:0 0 14px;color:#fff;
}
.bp-mid p{color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.6;margin:0}
.bp-points{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.bp-point{display:flex;align-items:center;gap:12px;font-size:.85rem;color:rgba(255,255,255,.9)}
.bp-point .pt-ico{
  width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;flex:none;
  font-size:.8rem;
}
.bp-foot{position:relative;font-size:.75rem;color:rgba(255,255,255,.55)}

/* ================= Formulário (direita) ================= */
.form-panel{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px 64px;position:relative;
}
.theme-toggle{
  position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;transition:all .15s;
}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}

.login-card{width:100%;max-width:400px;margin:0}

/* Logo do tenant acima do formulário, como na tela de login antiga */
.lc-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:44px;
}
/* Sem cap de altura, fiel à tela antiga: o logo aparece no tamanho
   natural do arquivo do tenant, limitado só pela largura do card
   (na antiga era a .img-responsiva, tamanhos entre ~100 e ~140px) */
.lc-brand img{max-width:100%;height:auto}
/* Logos de tenant são feitos para fundo claro: no dark ganham a mesma
   pílula branca usada no logo do rodapé */
html[data-theme="dark"] .lc-brand img{
  background:#fff;border-radius:10px;padding:6px 12px;
}
.lc-mark{
  width:42px;height:42px;border-radius:11px;background:var(--brand);
  color:var(--on-brand);display:grid;place-items:center;
  font-weight:800;font-size:.95rem;letter-spacing:-.5px;
}
.lc-name{font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--text)}

.login-card .lc-head{margin-bottom:28px}
.login-card .lc-head h2{
  font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--text);
}
.login-card .lc-head p{color:var(--text-2);margin:6px 0 0}

/* Mensagens de erro do login (usuário/senha, captcha etc.) */
.login-error{
  display:flex;align-items:flex-start;gap:9px;margin-bottom:18px;padding:11px 13px;
  border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius:var(--radius-sm);background:var(--danger-soft);
  color:var(--danger);font-size:.8rem;font-weight:600;line-height:1.45;
}
.login-error i{margin-top:2px}
.login-error a{font-weight:700;text-decoration:underline}
.login-ok{
  display:flex;align-items:flex-start;gap:9px;margin-bottom:18px;padding:11px 13px;
  border:1px solid color-mix(in srgb, var(--success) 30%, transparent);
  border-radius:var(--radius-sm);background:var(--success-soft);
  color:var(--success);font-size:.8rem;font-weight:600;line-height:1.45;
}
.login-ok i{margin-top:2px}

.f-group{margin-bottom:16px}
.f-group label{
  display:block;font-size:.76rem;font-weight:600;color:var(--text-2);margin-bottom:6px;
}
.f-control{position:relative;display:flex;align-items:center}
.f-control .f-ico{
  position:absolute;left:14px;color:var(--text-3);font-size:.85rem;pointer-events:none;
}
.f-control input{
  width:100%;height:46px;border:1px solid var(--border);border-radius:11px;
  padding:0 44px 0 40px;background:var(--surface);color:var(--text);font-size:.9rem;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.f-control input::placeholder{color:var(--text-3)}
.f-control input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.eye-btn{
  position:absolute;right:8px;width:32px;height:32px;border:none;background:none;
  color:var(--text-3);border-radius:8px;display:grid;place-items:center;cursor:pointer;
}
.eye-btn:hover{color:var(--text-2);background:var(--surface-2)}

/* Validação client-side: a mensagem vem do atributo data-validate */
.f-group.is-invalid .f-control input{border-color:var(--danger)}
.f-group.is-invalid::after{
  content:attr(data-validate);display:block;margin-top:5px;
  color:var(--danger);font-size:.72rem;font-weight:600;
}

.f-row{
  display:flex;align-items:center;justify-content:flex-end;
  margin:6px 0 22px;font-size:.8rem;
}

.captcha-box{display:flex;justify-content:center;margin-bottom:18px}

.btn-enter{
  width:100%;height:48px;border:none;border-radius:12px;
  background:var(--brand-login);color:var(--on-brand-login);
  font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;
  gap:9px;cursor:pointer;transition:all .15s;
  box-shadow:0 4px 14px -2px color-mix(in srgb, var(--brand-login) 45%, transparent);
}
.btn-enter:hover{
  background:var(--brand-login-hover);transform:translateY(-1px);
  box-shadow:0 8px 20px -2px color-mix(in srgb, var(--brand-login) 50%, transparent);
}

.signup{
  margin-top:22px;text-align:center;font-size:.83rem;color:var(--text-2);
  padding-top:22px;border-top:1px solid var(--border);
}
.signup a{font-weight:700}

/* Seletor de idioma (mesma escolha do mockup: globo + select nativo) */
.lang-row{margin-top:26px;display:flex;justify-content:center}
.lang-select{
  display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:9px;
  padding:7px 12px;color:var(--text-2);font-size:.78rem;background:var(--surface);
  font-weight:400;margin:0;cursor:pointer;
}
.lang-select i{font-size:.8rem;color:var(--text-3)}
.lang-select select{
  border:none;background:none;color:var(--text-2);font-size:.78rem;outline:none;
  font-weight:600;cursor:pointer;
}
.lang-select select option{background:var(--surface);color:var(--text)}

.form-foot{
  position:absolute;bottom:18px;left:0;right:0;display:flex;align-items:center;
  justify-content:center;gap:12px;font-size:.72rem;color:var(--text-3);
}
.form-foot img{max-height:24px;max-width:130px;object-fit:contain}
html[data-theme="dark"] .form-foot img{
  background:#fff;border-radius:6px;padding:2px 6px;
}

@keyframes loginFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.reveal{animation:loginFadeUp .55s ease backwards}

/* ================= Modal (esqueci minha senha) ================= */
/* Centralização vertical do modal do Bootstrap 3, movida do antigo
   bloco inline do index2.php */
.login-page .modal{text-align:center;padding:0!important}
.login-page .modal:before{
  content:'';display:inline-block;height:25%;vertical-align:middle;margin-right:-4px;
}
.login-page .modal-dialog{display:inline-block;text-align:left;vertical-align:middle}

/* ================= Banner do app (mobile) ================= */
/* Portado do login/css/main.css antigo, agora com tokens */
.app-banner{
  position:fixed;bottom:0;left:0;width:100%;background:var(--surface);
  box-shadow:0 -2px 10px rgba(16,24,40,.15);z-index:9999;padding:8px 12px;
  display:flex;justify-content:center;align-items:center;
  animation:loginFadeUp .3s ease;
}
.app-banner-content{
  display:flex;align-items:center;justify-content:space-between;
  max-width:800px;width:100%;position:relative;
}
.app-banner-img img{
  border-radius:20%;height:60px;max-width:70px;box-shadow:var(--shadow-1);
}
.app-banner-text{flex:1;text-align:left;padding:0 12px;color:var(--text-2)}
.app-banner-btn button{
  border-radius:10px;background:var(--brand);padding:6px 12px;font-weight:700;
  font-size:12px;color:var(--on-brand);border:none;cursor:pointer;transition:background .2s;
}
.app-banner-btn button:hover{background:var(--brand-strong)}
.app-banner-close{
  position:absolute;top:-5px;right:-5px;background:transparent;border:none;
  color:var(--text-3);font-size:20px;cursor:pointer;
}
.app-banner-close:hover{color:var(--text)}

/* ================= Responsivo ================= */
@media (max-width:900px){
  .login-shell{flex-direction:column}
  /* No mobile o painel de marca some por completo: a arte do tenant
     sairia cortada e o logo já está acima do formulário */
  .brand-panel{display:none}
  .form-panel{padding:36px 20px 90px}
  .app-banner-content{flex-direction:column;text-align:center}
  .app-banner-text{padding:8px 0}
  .app-banner-btn{margin-top:6px}
  .app-banner-close{top:4px;right:10px}
}