/* ARLTech · split-screen na tela de login do Chatwoot */
:root.arltech-login-on { --al-cyan:#29ABE2; --al-cyan-600:#1E8FC0; --al-navy:#0A2540; --al-navy-deep:#06192B; --al-ink:#0F2A3F; --al-muted:#5B7183; --al-line:#DCE6EF; }

:root.arltech-login-on body { background:#F6F9FC !important; }

/* ---------- painel de marca (esquerda) ---------- */
:root.arltech-login-on #arltech-brand{
  position:fixed; inset:0 auto 0 0; width:52vw; height:100vh; z-index:40;
  display:flex; align-items:center; padding:0 6vw; color:#fff; overflow:hidden;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(41,171,226,.28), transparent 55%),
    linear-gradient(150deg,var(--al-navy) 0%, var(--al-navy-deep) 100%);
}
:root.arltech-login-on #arltech-brand::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 80% at 70% 30%,#000,transparent 75%);
  mask-image:radial-gradient(120% 80% at 70% 30%,#000,transparent 75%);
}
:root.arltech-login-on #arltech-brand .al-inner{position:relative;z-index:1;max-width:460px;display:flex;flex-direction:column;gap:22px}
:root.arltech-login-on #arltech-brand .al-logo{width:320px;max-width:80%;height:auto}
:root.arltech-login-on #arltech-brand .al-title{font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.01em;margin:0}
:root.arltech-login-on #arltech-brand .al-title b{color:var(--al-cyan);font-weight:700}
:root.arltech-login-on #arltech-brand .al-sub{font-size:16px;line-height:1.6;color:rgba(255,255,255,.74);margin:0}

/* ---------- coluna do formulário (direita) ---------- */
:root.arltech-login-on .arltech-formcol{
  margin-left:52vw !important; width:48vw !important; min-height:100vh;
  display:flex; align-items:center; justify-content:center; background:#F6F9FC !important;
}
/* esconde o header nativo do Chatwoot (logo + "Entrar no ARLTech") */
:root.arltech-login-on .arltech-formcol > :not(section){ display:none !important; }

/* ---------- card ---------- */
:root.arltech-login-on .arltech-formcol section{
  background:#FFFFFF !important; border-radius:14px !important;
  box-shadow:0 18px 50px -22px rgba(10,37,64,.28) !important;
  width:100% !important; max-width:400px !important; margin:0 !important;
  padding:38px 38px 30px !important;
}

/* header injetado (logo + Entrar + subtítulo) */
:root.arltech-login-on .al-card-head{display:flex;flex-direction:column;gap:6px;margin-bottom:26px}
:root.arltech-login-on .al-card-logo{height:30px;width:auto;align-self:flex-start;margin-bottom:16px}
:root.arltech-login-on .al-card-title{font-size:24px;font-weight:700;color:var(--al-ink) !important;margin:0;line-height:1.2}
:root.arltech-login-on .al-card-sub{font-size:15px;color:var(--al-muted) !important;margin:0}

/* labels em caixa-alta (menos o link "esqueceu a senha") */
:root.arltech-login-on .arltech-formcol form label{
  text-transform:uppercase; letter-spacing:.05em; font-size:12px !important; font-weight:600; color:var(--al-muted) !important;
}
:root.arltech-login-on .arltech-formcol form label a{ text-transform:none; letter-spacing:normal; font-weight:500; color:var(--al-cyan-600) !important; }

/* inputs claros */
:root.arltech-login-on .arltech-formcol input{
  background:#FFFFFF !important; color:var(--al-ink) !important; border:1px solid var(--al-line) !important;
}
:root.arltech-login-on .arltech-formcol input::placeholder{ color:#9DB0BF !important; }
:root.arltech-login-on .arltech-formcol input:focus{ border-color:var(--al-cyan) !important; box-shadow:0 0 0 3px rgba(41,171,226,.18) !important; }

/* botão primário ciano */
:root.arltech-login-on .arltech-formcol button[type="submit"],
:root.arltech-login-on .arltech-formcol button.button:not(.link){
  background-color:var(--al-cyan) !important; border-color:var(--al-cyan) !important; color:#fff !important;
}

/* rodapé injetado */
:root.arltech-login-on .al-card-foot{margin:22px 0 0;text-align:center;font-size:13px;color:var(--al-muted) !important}
:root.arltech-login-on .al-card-foot a{color:var(--al-cyan-600) !important;text-decoration:none;font-weight:500}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  :root.arltech-login-on #arltech-brand{position:relative;width:100vw;height:auto;min-height:34vh;padding:36px 28px}
  :root.arltech-login-on #arltech-brand .al-logo{width:200px}
  :root.arltech-login-on #arltech-brand .al-title{font-size:24px}
  :root.arltech-login-on .arltech-formcol{margin-left:0 !important;width:100vw !important;min-height:auto}
}