/* ==========================================================================
   VIA3 · Identidade visual da tela de acesso do GLPI
   Escrito em cima da marcação REAL desta instalação (template já customizado):
     .container-tight[style="max-width:60rem"]  → vira o cartão
     img.celular (logo_azul.png)                → escondida, assinatura em texto
     h2.meu-texto                               → título
     .btn-laranja                               → botão de ação
   Nada aqui vaza para a interface interna: tudo está preso a .container-tight.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* -------------------------------------------------------------- tokens --- */
:root, body, .container-tight {
  --fundo:#0e1a24;
  --fundo-brilho:#16273a;
  --superficie:#1a2c3b;
  --campo:#101e29;
  --linha:rgba(255,255,255,.08);
  --linha-forte:#263d4f;
  --tinta:#e9eef2;
  --tinta-2:#a9b4bd;
  --tinta-fraca:#7c8c99;
  --acao:#e85a24;
  --acao-forte:#d24a18;
  --acao-suave:rgba(232,90,36,.14);
  --raio-sm:8px;
  --raio-lg:16px;
  --fonte:"Poppins","Century Gothic","Segoe UI Variable Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---------------------------------------------------------------- fundo -- */
html body.welcome-anonymous,
html body:has(.page-anonymous) {
  color-scheme: dark;
  font-family:var(--fonte);
  color:var(--tinta);
  background-color:var(--fundo) !important;
  background-image:
    radial-gradient(1200px 520px at 12% -8%,  var(--fundo-brilho) 0%, transparent 62%),
    radial-gradient(900px 420px at 92% -12%,  rgba(22,39,58,.7)   0%, transparent 60%),
    radial-gradient(700px 500px at 88% 108%,  rgba(232,90,36,.16) 0%, transparent 62%) !important;
  background-attachment:fixed;
  background-size:cover;
  -webkit-font-smoothing:antialiased;
}
html body .page-anonymous { background:transparent !important; }

/* =============================== O CARTÃO ================================= */
/* Este template não tem .card, então o próprio .container-tight vira o cartão.
   O max-width:60rem está inline no HTML — por isso o !important.             */
html body .container-tight {
  max-width:26rem !important;
  margin:0 auto !important;
  padding:30px 30px 26px !important;
  position:relative;
  background:var(--superficie) !important;
  border:1px solid var(--linha) !important;
  border-radius:var(--raio-lg) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.28) !important;
  color:var(--tinta);
  font-family:var(--fonte);
  overflow:hidden;
}
/* filete laranja de 3px no topo — a assinatura do padrão Via3 */
html body .container-tight::before {
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--acao) 0%,rgba(232,90,36,.4) 45%,transparent 100%);
}

/* ================================ MARCA =================================== */
/* logo_azul.png é azul-marinho e sumiria no fundo escuro: assinatura em texto */
html body .container-tight img.celular,
html body .container-tight img[src*="logo"] { display:none !important; }

html body .container-tight > .text-center:first-child { margin-bottom:22px; }

html body .container-tight > .text-center:first-child::before {
  content:"VIA3";
  display:inline-block;
  font-family:var(--fonte);
  font-size:44px;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
  background:linear-gradient(90deg,var(--tinta) 0 73%, var(--acao) 73% 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
html body .container-tight > .text-center:first-child::after {
  content:"Tecnologia";
  display:block;
  margin-top:6px;
  font-family:var(--fonte);
  font-size:10px;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--tinta-fraca);
}

/* --- LOGO PNG (alternativa, quando houver uma versão clara) --------------
html body .container-tight img.celular { display:inline-block !important; max-width:220px; }
html body .container-tight > .text-center:first-child::before,
html body .container-tight > .text-center:first-child::after { content:none; }
-------------------------------------------------------------------------- */

/* ================================ TÍTULO ================================== */
html body .container-tight h2,
html body .container-tight .meu-texto {
  font-family:var(--fonte) !important;
  font-size:19px !important;
  font-weight:700 !important;
  letter-spacing:-.015em;
  line-height:1.35;
  color:var(--tinta) !important;
  text-align:center;
  margin:0 0 22px !important;
}

/* ================================ CAMPOS ================================== */
html body .container-tight label,
html body .container-tight .form-label {
  display:block;
  font-family:var(--fonte);
  font-size:12.5px !important;
  font-weight:500;
  color:var(--tinta-2) !important;
  margin-bottom:6px;
}
html body .container-tight .form-control,
html body .container-tight input[type="text"],
html body .container-tight input[type="password"],
html body .container-tight select {
  background:var(--campo) !important;
  background-color:var(--campo) !important;
  border:1px solid var(--linha) !important;
  border-radius:var(--raio-sm) !important;
  color:var(--tinta) !important;
  font-family:var(--fonte);
  padding:10px 12px !important;
  box-shadow:none !important;
  width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
html body .container-tight .form-control::placeholder { color:var(--tinta-fraca); }
html body .container-tight .form-control:focus,
html body .container-tight input:focus {
  border-color:var(--acao) !important;
  box-shadow:0 0 0 3px var(--acao-suave) !important;
  outline:none !important;
}
html body .container-tight input:-webkit-autofill,
html body .container-tight input:-webkit-autofill:hover,
html body .container-tight input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--tinta);
  -webkit-box-shadow:0 0 0 1000px var(--campo) inset;
  caret-color:var(--tinta);
}

/* ------------------------------------------------------------- checkbox -- */
html body .container-tight .form-check-input,
html body .container-tight input[type="checkbox"] {
  background-color:var(--campo);
  border:1px solid var(--linha-forte);
  accent-color:var(--acao-forte);
}
html body .container-tight .form-check-input:checked {
  background-color:var(--acao-forte) !important;
  border-color:var(--acao-forte) !important;
}
html body .container-tight .form-check-label { color:var(--tinta-2) !important; font-size:13px; }

/* ================================= BOTÃO ================================== */
/* este template usa .btn-laranja, definido num <style> embutido na página */
html body .container-tight .btn-laranja,
html body .container-tight button[type="submit"],
html body .container-tight input[type="submit"],
html body .container-tight .btn-primary {
  display:block;
  width:100%;
  background:var(--acao-forte) !important;
  background-color:var(--acao-forte) !important;
  background-image:none !important;
  border:1px solid transparent !important;
  border-radius:var(--raio-sm) !important;
  color:#fff !important;
  font-family:var(--fonte);
  font-weight:700 !important;
  font-size:14px;
  padding:11px 18px !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:filter .18s ease;
}
html body .container-tight .btn-laranja:hover,
html body .container-tight button[type="submit"]:hover { filter:brightness(1.07); }
html body .container-tight .btn-laranja:focus-visible {
  box-shadow:0 0 0 3px var(--acao-suave) !important;
}

/* ================================= LINKS ================================== */
html body .container-tight a { color:var(--acao) !important; text-decoration:none; }
html body .container-tight a:hover { text-decoration:underline; }

/* ============================== AVISOS/ERROS ============================== */
html body .container-tight .alert-danger {
  background:rgba(226,87,76,.12) !important;
  border:1px solid rgba(226,87,76,.42) !important;
  color:#f0b3ae !important;
  border-radius:var(--raio-sm);
}

/* ================================ RODAPÉ ================================== */
/* só o .text-muted leva a assinatura — evita o texto duplicado */
html body .container-tight .text-muted { color:var(--tinta-fraca) !important; font-size:11.5px; }
html body .container-tight .text-center.text-muted::after {
  content:"Plataforma oficial · Via3 Tecnologia";
  display:block;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--linha);
  text-align:center;
  font-size:11.5px;
  color:var(--tinta-fraca);
}

/* ============================== RESPONSIVO ================================ */
@media (max-width:420px) {
  html body .container-tight { padding:24px 20px 20px !important; }
  html body .container-tight > .text-center:first-child::before { font-size:36px; }
}

/* ------------------------------------------------- ajustes de espaçamento -- */
html body .container-tight .form-check {
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:0 0 18px !important;
}
html body .container-tight .form-check-label,
html body .container-tight .form-check span { margin:0 !important; }
html body .container-tight input[type="checkbox"] { flex:0 0 auto; }

/* ===================== LARGURA INTERNA (grid do template) ================== */
/* o formulário vive dentro de colunas (col-*); estreitar o container fazia elas
   virarem uma faixa fina. Aqui elas voltam a ocupar o cartão inteiro.         */
html body .container-tight .row {
  display:block !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
html body .container-tight [class*="col-"] {
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
html body .container-tight form { width:100%; }

/* "Esqueceu sua senha?" à direita, colado na linha do rótulo */
html body .container-tight a[href*="lostpassword" i],
html body .container-tight a[href*="forgot" i] {
  display:block;
  width:100%;
  text-align:right;
  font-size:12px;
  line-height:1.4;
  margin:-4px 0 16px !important;
}

/* ============================== CENTRALIZAÇÃO ============================= */
/* o cartão fica no meio da tela, igual às demais telas de acesso Via3 */
html body.welcome-anonymous,
html body:has(.page-anonymous) { min-height:100vh; margin:0; }

html body .page-anonymous {
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  min-height:100vh !important;
  padding:24px 0 !important;
}
html body .page-anonymous > * { width:100%; }
html body .page-anonymous .flex-fill {
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 1 auto !important;
}