/* tela entrada: so o que e desta tela; valores em token */
html.vn body{padding:0; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
.heroi{padding:3.5rem 4rem; display:flex; flex-direction:column; gap:1.75rem; background:var(--side); border-right:1px solid var(--line);}
.heroi .marca svg{width:6rem; height:auto;}
.logo-msb .cls-1{fill:none;}
.logo-msb .cls-2{fill:var(--branco);}
.logo-msb .cls-3{fill:var(--logo-a);}
.logo-msb .cls-4{fill:var(--logo-b);}
html.vn.claro .logo-msb .cls-2{fill:var(--logo-c);}
.heroi h1{font-size:2.125rem; font-weight:650; letter-spacing:-.02em; line-height:1.15; max-width:16ch; margin:auto 0 0;}
.heroi .lead{color:var(--tx2); font-size:var(--fc, .9375rem); max-width:44ch; margin:0;}
.traz{display:grid; gap:var(--e4); margin:.375rem 0 auto; padding:0; list-style:none;}
.traz li{display:flex; gap:.875rem; align-items:flex-start; max-width:48ch;}
.traz .ic{width:2.125rem; height:2.125rem; border-radius:var(--r2); background:var(--s2); display:grid; place-items:center; flex:none; color:var(--tx2);}
.traz .ic svg{width:1.0625rem; height:1.0625rem; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.traz b{display:block; font-size:var(--f3); font-weight:600;}
.traz span{color:var(--tx2); font-size:var(--f2);}
.heroi .pe{color:var(--tx3); font-size:var(--fn, .75rem);}
.lado-form{display:grid; place-items:center; padding:3rem var(--e6);}
form{width:100%; max-width:27.5rem; display:flex; flex-direction:column; gap:var(--e4);}
form h2{font-size:1.5rem; font-weight:650; letter-spacing:-.015em; margin:0;}
form .sub{color:var(--tx2); font-size:var(--fm, .84375rem); margin:calc(-1 * var(--e2)) 0 0;}
.abas-f{display:grid; grid-template-columns:1fr 1fr; gap:.625rem;}
.abas-f button{all:unset; box-sizing:border-box; cursor:pointer; padding:.875rem var(--e4); border-radius:var(--r3); background:var(--s1); box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:.1875rem;}
.abas-f button b{display:flex; align-items:center; gap:var(--e2); font-size:var(--f3); font-weight:600;}
.abas-f button span{font-size:var(--fn, .75rem); color:var(--tx3);}
.abas-f button[aria-selected=true][data-aba=glpi]{box-shadow:inset 0 0 0 1.5px var(--glpi); background:var(--glpi-bg);}
.abas-f button[aria-selected=true][data-aba=redmine]{box-shadow:inset 0 0 0 1.5px var(--rm); background:var(--rm-bg);}
.abas-f button:focus-visible{outline:2px solid var(--glpi); outline-offset:2px;}
.aba{display:flex; flex-direction:column; gap:.875rem;}
.aba[hidden]{display:none;}
.rotc{font-size:var(--fr, .78125rem); font-weight:600; color:var(--tx2); margin-bottom:-.375rem;}
.campo{position:relative; display:block;}
.campo input{box-sizing:border-box; width:100%; height:2.125rem; border-radius:var(--rp); background:var(--bg); border:0; color:var(--tx1); box-shadow:inset 0 0 0 1px var(--line2); padding:0 5.375rem 0 .875rem; font:var(--f3) ui-monospace, "DejaVu Sans Mono", monospace;}
.campo input:focus{outline:0; box-shadow:inset 0 0 0 1px var(--glpi), 0 0 0 4px var(--glpi-bg);}
#aba-redmine .campo input:focus{box-shadow:inset 0 0 0 1px var(--rm), 0 0 0 4px var(--rm-bg);}
.campo.erro input{box-shadow:inset 0 0 0 1px var(--crit), 0 0 0 4px var(--crit-bg);}
.campo .ver{all:unset; cursor:pointer; position:absolute; right:.625rem; top:50%; transform:translateY(-50%); font-size:var(--fn, .75rem); font-weight:600; color:var(--tx3); padding:.375rem var(--e2); border-radius:var(--rp);}
.erro-msg{display:flex; gap:.5625rem; align-items:flex-start; color:var(--crit-t); font-size:var(--f2); margin:0;}
.erro-msg svg{width:1rem; height:1rem; flex:none; margin-top:.0625rem; stroke:currentColor; fill:none; stroke-width:2;}
.entra{all:unset; box-sizing:border-box; cursor:pointer; text-align:center; height:2.125rem; border-radius:var(--rp); font-weight:600; font-size:var(--f3); background:var(--glpi-fill); color:var(--sobre-fill); display:grid; place-items:center;}
#aba-redmine .entra{background:var(--rm); color:var(--sobre-rm);}
.entra:focus-visible{outline:2px solid var(--tx1); outline-offset:2px;}
.passos-cx{margin:var(--e1) 0 0; padding:var(--e4) 1.125rem; border-radius:var(--r3); background:var(--s1); box-shadow:inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:var(--e3);}
.passos{margin:0; padding:0; counter-reset:p; display:flex; flex-direction:column; gap:.6875rem; list-style:none;}
.passos .k{font-size:max(var(--piso, 0rem), var(--f0, .6875rem)); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3);}
.passos li{display:flex; gap:var(--e3); font-size:var(--f2); color:var(--tx2); align-items:flex-start;}
.passos li::before{counter-increment:p; content:counter(p); width:1.375rem; height:1.375rem; border-radius:50%; flex:none; background:var(--s3); color:var(--tx1); font-size:var(--f1); font-weight:600; display:grid; place-items:center;}
.passos b{color:var(--tx1); font-weight:600;}
.passos a{color:var(--glpi-t);}
.nota{font-size:var(--fn, .75rem); color:var(--tx3); margin:0; line-height:1.5;}
@media (max-width:980px){
  html.vn body{grid-template-columns:1fr;}
  .heroi{padding:1.75rem 1.25rem; gap:var(--e4); border-right:0; border-bottom:1px solid var(--line);}
  .heroi h1{font-size:1.625rem; margin:0;}
  .traz{display:none;}
  .lado-form{padding:1.75rem var(--e4);}
}
/* ==== entrada.css (extra) ==== */
/* mockup 01: heroi com os dois brilhos (GLPI embaixo, Redmine em cima), cartoes de opcao com radio */
html.vn .lado-form{position:relative;}
html.vn .lado-form > .tam-letra{position:absolute; top:var(--e4); right:var(--e4);}
html.vn .heroi .marca{display:block; border-radius:0;}
html.vn .heroi{padding:4.5rem 6rem; gap:0; background:radial-gradient(56rem 37.5rem at 0% 100%, color-mix(in srgb, var(--glpi) 16%, transparent), transparent 60%), radial-gradient(44rem 31rem at 100% 0%, color-mix(in srgb, var(--rm) 12%, transparent), transparent 60%), var(--side);}
html.vn .heroi .marca svg{width:7.5rem;}
html.vn .heroi h1{font-size:var(--fx); font-weight:680; letter-spacing:-.025em; line-height:1.08; max-width:38.75rem;}
html.vn .heroi .lead{font-size:var(--f5); margin-top:var(--e4); max-width:35rem;}
html.vn .traz{margin:2.5rem 0 0; gap:var(--e4); max-width:35rem;}
html.vn .traz li{max-width:none; gap:var(--e4);}
html.vn .traz b{font-size:var(--f4); color:var(--tx1); margin-bottom:var(--e0);}
html.vn .traz span{font-size:var(--f4);}
html.vn .traz .ic{color:var(--tx1);}
html.vn .heroi .pe{margin-top:auto;}
html.vn .lado-form form{max-width:35rem; gap:0;}
html.vn .lado-form form > * + *{margin-top:var(--e4);}
html.vn .lado-form form .sub{margin-top:var(--e2); font-size:var(--f3);}
html.vn .abas-f{margin:var(--e6) 0 var(--e2);}
html.vn .abas-f button{position:relative; padding:var(--e4); gap:var(--e2);}
html.vn .abas-f button b{font-size:var(--f4); gap:var(--e2);}
html.vn .abas-f button::after{content:""; position:absolute; right:var(--e4); top:var(--e4); width:1.125rem; height:1.125rem; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line2); transition:box-shadow var(--t1) ease;}
html.vn .abas-f button[aria-selected=true][data-aba=glpi]{background:color-mix(in srgb, var(--glpi) 7%, transparent);}
html.vn .abas-f button[aria-selected=true][data-aba=redmine]{background:color-mix(in srgb, var(--rm) 7%, transparent);}
html.vn .abas-f button[aria-selected=true][data-aba=glpi]::after{box-shadow:inset 0 0 0 5px var(--glpi);}
html.vn .abas-f button[aria-selected=true][data-aba=redmine]::after{box-shadow:inset 0 0 0 5px var(--rm);}
html.vn .abas-f button[data-aba=redmine]:focus-visible{outline-color:var(--rm);}
html.vn .aba{gap:var(--e3);}
html.vn .entra{margin-top:var(--e2);}
html.vn #aba-redmine .entra:focus-visible{outline-color:var(--rm);}
html.vn #aba-redmine .passos a{color:var(--rm-t);}
html.vn .passos-cx{margin-top:var(--e5); padding:var(--e5); gap:var(--e4);}
html.vn .passos-cx .k{display:flex; align-items:center; gap:var(--e2); font-size:var(--f2); font-weight:600; color:var(--tx1); text-transform:none; letter-spacing:0;}
html.vn .nota{display:flex; gap:var(--e3); margin-top:var(--e4); align-items:flex-start;}
html.vn .nota::before{content:""; flex:none; width:.9375rem; height:.9375rem; margin-top:var(--e0); background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (max-width:980px){
  html.vn .heroi{padding:var(--e6) var(--e4);}
  html.vn .heroi h1{font-size:var(--f6);}
  html.vn .heroi .lead{font-size:var(--f3);}
  html.vn .lado-form{padding:4rem var(--e4) var(--e6);}
  html.vn .heroi .pe{display:none;}
}
@media (prefers-reduced-motion:reduce){ html.vn .abas-f button::after{transition:none;} }
/* conta do painel (PAINEL_USUARIOS=1): formulario de usuario e senha acima da entrada por token, e o cadastro */
html.vn .lado-form .f-conta + form{padding-top:var(--e5); border-top:1px solid var(--line);}
html.vn .lado-form .f-conta{margin-bottom:var(--e5);}
html.vn .lado-form .f-conta .ou-token::before{display:none;}
html.vn .lado-form .marca-cx{display:flex; gap:var(--e2); align-items:center; font-size:var(--f3); color:var(--tx2);}
html.vn .lado-form .f-enviado .entra{display:grid; place-items:center; text-decoration:none; color:var(--sobre-fill);}
/* 02/10 noite: abaixo de 900 px o titulo encostava na marca; respiro de --e5 */
@media (max-width:980px){
  html.vn .heroi h1{margin-top:var(--e5);}
}

/* ==== celular no padrao iOS (27/10/2026) ====
   Botao Entrar e a acao unica do formulario: largura cheia de verdade, 50px e letra de 17px (botao grande do
   iOS). Campos com 44px de alvo; o heroi encolhe para o formulario chegar mais cedo na primeira dobra. */
@media (max-width:620px){
  html.vn .entra{height:auto; min-height:3.125rem; font-size:var(--f4);}
  html.vn .campo input{height:auto; min-height:2.75rem;}
  html.vn .campo .ver{min-height:2.75rem; display:grid; place-items:center; padding-block:0; font-size:var(--f1);}
  html.vn .heroi .marca svg{width:6rem;}
  html.vn .heroi .lead{margin-top:var(--e3);}
  html.vn .lado-form{padding:calc(var(--e6) + var(--e4)) var(--e4) var(--e6);}
  html.vn .nota{font-size:var(--f1);}
}
/* ==== APP CELULAR 09/11/2026: entrada com cara de app (html.app-cel, ate 768px com toque) ====
   Uma coluna so, na altura da tela: a marca e o titulo numa faixa compacta na cor do topo (a mesma do
   theme-color, entao a barra de status e a faixa viram uma peca so) e o formulario logo abaixo. Somem o
   texto de apresentacao e o A-/A+ (a letra do aparelho segue valendo, tudo em rem). O computador nao muda */
html.vn.app-cel{background:var(--side); overscroll-behavior-y:none;}
html.vn.app-cel body{grid-template-columns:1fr; grid-template-rows:auto 1fr; overscroll-behavior-y:none;}
html.vn.app-cel .heroi{padding:calc(var(--e5) + env(safe-area-inset-top, 0rem)) max(var(--e4), env(safe-area-inset-right, 0rem)) var(--e4) max(var(--e4), env(safe-area-inset-left, 0rem));
  gap:var(--e2); background:var(--side); border:0; border-bottom:.5px solid var(--line);}
html.vn.app-cel .heroi .marca svg{width:5rem;}
html.vn.app-cel .heroi h1{font-size:var(--f4); font-weight:600; letter-spacing:0; line-height:1.35; max-width:none; margin:0; color:var(--tx2);}
html.vn.app-cel .heroi :is(.lead, .traz, .pe){display:none;}
html.vn.app-cel .lado-form{place-items:start stretch; background:var(--bg);
  padding:var(--e5) max(var(--e4), env(safe-area-inset-right, 0rem)) calc(var(--e6) + env(safe-area-inset-bottom, 0rem)) max(var(--e4), env(safe-area-inset-left, 0rem));}
html.vn.app-cel .lado-form > .tam-letra{display:none;}
html.vn.app-cel .lado-form form{max-width:none;}
html.vn.app-cel .lado-form :is(input, select, textarea){font-size:max(var(--piso, 0rem), 1rem);}
/* ==== fim APP CELULAR 09/11/2026 ==== */