*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  min-height:100%;
  font-family:Arial,Helvetica,sans-serif;
}

body{
  min-height:100vh;
  background:#07111d;
  color:#ffffff;
}

.pagina{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;

  background:
    radial-gradient(
      circle at top,
      #183d5c 0%,
      #0b1c2b 40%,
      #050b11 100%
    );
}

.login-card{
  width:100%;
  max-width:460px;

  background:
    rgba(7,20,32,.97);

  border:
    1px solid #294860;

  border-radius:20px;

  padding:34px;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.50);
}

.topo{
  display:flex;
  align-items:center;
  gap:17px;
}

.logo{
  width:62px;
  height:62px;

  flex:0 0 62px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:15px;

  background:#0b79c9;

  font-size:21px;
  font-weight:800;

  box-shadow:
    0 10px 30px
    rgba(0,120,210,.25);
}

h1{
  margin:0;
  font-size:27px;
}

.subtitulo{
  margin-top:5px;

  color:#8aa7bc;

  font-size:12px;
  letter-spacing:2px;
}

.linha{
  height:1px;

  background:#263f54;

  margin:27px 0;
}

.campo{
  margin-top:17px;
}

label{
  display:block;

  margin-bottom:7px;

  color:#bed1df;

  font-size:13px;
  font-weight:700;
}

input,
select{
  width:100%;
  height:49px;

  border:
    1px solid #315169;

  border-radius:9px;

  outline:none;

  background:#0b1b28;
  color:#ffffff;

  padding:0 14px;

  font-size:16px;
}

select{
  cursor:pointer;
}

input:focus,
select:focus{
  border-color:#2195e4;

  box-shadow:
    0 0 0 2px
    rgba(33,149,228,.12);
}

.ajuda{
  margin-top:7px;

  color:#718da1;

  font-size:12px;
}

.permanente-box{
  display:flex;

  align-items:flex-start;

  gap:12px;

  margin-top:23px;

  padding:15px;

  border:
    1px solid #29485e;

  border-radius:10px;

  background:#0a1722;

  cursor:pointer;
}

.permanente-box input{
  width:20px;
  height:20px;

  margin:1px 0 0;

  flex:0 0 20px;
}

.permanente-box strong{
  display:block;

  color:#ffffff;

  font-size:14px;
}

.permanente-box span{
  display:block;

  margin-top:4px;

  color:#87a2b5;

  font-size:12px;
  font-weight:normal;
}

button{
  width:100%;
  height:52px;

  margin-top:25px;

  border:0;
  border-radius:9px;

  background:#087acb;

  color:#ffffff;

  font-size:15px;
  font-weight:800;

  cursor:pointer;
}

button:hover{
  filter:brightness(1.08);
}

button:disabled{
  opacity:.60;
  cursor:wait;
}

.mensagem{
  min-height:22px;

  margin-top:15px;

  text-align:center;

  color:#ff7474;

  font-size:14px;
}

.mensagem.ok{
  color:#61d98c;
}

.rodape{
  margin-top:21px;

  text-align:center;

  color:#617d91;

  font-size:12px;
}

@media(max-width:520px){

  .pagina{
    padding:14px;
  }

  .login-card{
    padding:25px 20px;
  }

  h1{
    font-size:23px;
  }

}

/* =========================================================
   LOGIN_INFO_ESTILO_V1
   ========================================================= */

.login-info-sistema{
  width:min(920px, calc(100% - 30px));
  margin:22px auto 28px auto;
  padding:18px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(15,23,42,.96),
      rgba(8,15,30,.96)
    );
  box-shadow:
    0 18px 45px rgba(0,0,0,.28);
}

.login-info-titulo{
  font-size:12px;
  font-weight:800;
  letter-spacing:1.8px;
  color:#94a3b8;
  margin-bottom:13px;
}

.login-info-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:14px;
}

.login-info-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(255,255,255,.035);
  padding:15px;
}

.login-info-card-titulo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
  color:#e2e8f0;
  margin-bottom:12px;
}

.login-info-linha{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  padding:7px 0;
  border-bottom:
    1px solid rgba(255,255,255,.055);
  font-size:13px;
}

.login-info-linha:last-child{
  border-bottom:0;
}

.login-info-linha span{
  color:#94a3b8;
}

.login-info-linha strong{
  color:#f8fafc;
  text-align:right;
  max-width:65%;
  overflow-wrap:anywhere;
}

.login-info-status-ok{
  color:#22c55e !important;
}

.login-info-status-erro{
  color:#ef4444 !important;
}

.login-info-badge{
  min-width:25px;
  height:25px;
  padding:0 8px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#2563eb;
  color:white;
  font-size:12px;
}

.login-usuarios-lista{
  max-height:180px;
  overflow:auto;
}

.login-usuario{
  padding:9px 0;
  border-bottom:
    1px solid rgba(255,255,255,.055);
}

.login-usuario:last-child{
  border-bottom:0;
}

.login-usuario-nome{
  font-size:14px;
  font-weight:800;
  color:#f8fafc;
}

.login-usuario-dispositivo{
  margin-top:3px;
  font-size:12px;
  color:#94a3b8;
}

.login-sem-usuario{
  padding:15px 0;
  text-align:center;
  color:#64748b;
  font-size:13px;
}

.login-assinatura{
  margin-top:18px;
  padding-top:17px;
  border-top:
    1px solid rgba(255,255,255,.08);
  text-align:center;
}

.login-desenvolvido{
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  color:#64748b;
}

.login-nome-dev{
  margin-top:5px;
  font-size:13px;
  font-weight:700;
  color:#cbd5e1;
}

.login-rubrica{
  margin-top:7px;
  font-family:
    "Segoe Script",
    "Brush Script MT",
    cursive;
  font-size:25px;
  font-style:italic;
  color:#e2e8f0;
  transform:rotate(-2deg);
  display:inline-block;
  opacity:.95;
}

@media(max-width:700px){

  .login-info-grid{
    grid-template-columns:1fr;
  }

  .login-info-sistema{
    margin-top:15px;
  }
}

/* FIM_LOGIN_INFO_ESTILO_V1 */

/* =========================================================
   LOGIN_LAYOUT_HORIZONTAL_V1
   ========================================================= */

body{
  overflow:hidden !important;
}

.pagina{
  min-height:100vh !important;
  height:100vh !important;
  display:grid !important;
  grid-template-columns:
    minmax(300px,380px)
    minmax(430px,650px) !important;
  align-items:center !important;
  justify-content:center !important;
  gap:26px !important;
  padding:20px !important;
  box-sizing:border-box !important;
}

.login-card{
  margin:0 !important;
  width:100% !important;
  max-width:380px !important;
  box-sizing:border-box !important;
}

.login-info-sistema{
  margin:0 !important;
  width:100% !important;
  max-width:650px !important;
  box-sizing:border-box !important;
}

.login-info-grid{
  grid-template-columns:1fr 1fr !important;
}

.login-usuarios-lista{
  max-height:205px !important;
}

.login-assinatura{
  margin-top:14px !important;
  padding-top:13px !important;
}

.login-rubrica{
  font-size:23px !important;
}

@media(max-width:980px){

  body{
    overflow:auto !important;
  }

  .pagina{
    height:auto !important;
    min-height:100vh !important;
    grid-template-columns:1fr !important;
    padding:18px !important;
  }

  .login-card,
  .login-info-sistema{
    max-width:620px !important;
    margin:0 auto !important;
  }
}

@media(max-height:760px) and (min-width:981px){

  .pagina{
    transform:scale(.90);
    transform-origin:center center;
  }
}

/* FIM_LOGIN_LAYOUT_HORIZONTAL_V1 */

/* =========================================================
   LOGIN_LAYOUT_HORIZONTAL_FIX_V2
   ========================================================= */

body{
  overflow:hidden !important;
}

.pagina{
  min-height:100vh !important;
  height:100vh !important;

  display:grid !important;

  grid-template-columns:
    360px
    620px !important;

  align-items:center !important;
  justify-content:center !important;

  gap:28px !important;

  padding:18px !important;

  box-sizing:border-box !important;
}

.login-card{
  width:100% !important;
  max-width:360px !important;

  margin:0 !important;

  box-sizing:border-box !important;
}

.login-info-sistema{
  width:100% !important;
  max-width:620px !important;

  margin:0 !important;

  box-sizing:border-box !important;
}

.login-info-grid{
  grid-template-columns:
    1fr 1fr !important;
}

.login-usuarios-lista{
  max-height:170px !important;
}

.login-assinatura{
  margin-top:12px !important;
  padding-top:11px !important;
}

.login-rubrica{
  font-size:22px !important;
}

@media(max-height:800px) and (min-width:981px){

  .pagina{
    transform:scale(.88);
    transform-origin:center center;
  }
}

@media(max-width:1050px){

  body{
    overflow:auto !important;
  }

  .pagina{
    height:auto !important;
    min-height:100vh !important;

    grid-template-columns:1fr !important;

    padding:18px !important;
  }

  .login-card,
  .login-info-sistema{
    margin:0 auto !important;
  }
}

/* FIM_LOGIN_LAYOUT_HORIZONTAL_FIX_V2 */


/* =========================================================
   LOGIN_CARTAO_POSTAL_V3
   ========================================================= */

body{
  overflow:hidden !important;
}

.pagina{
  min-height:100vh !important;
  height:100vh !important;

  width:min(100%, 860px) !important;
  margin:0 auto !important;

  display:grid !important;
  grid-template-columns:360px 360px !important;
  grid-template-areas:
    "topo topo"
    "login painel" !important;

  justify-content:center !important;
  align-items:start !important;
  gap:24px !important;

  padding:26px 18px !important;
  box-sizing:border-box !important;
}

.login-topo-postal{
  grid-area:topo !important;
  width:100% !important;
  max-width:744px !important;

  margin:0 auto -8px auto !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.login-topo-svg{
  width:100% !important;
  height:120px !important;
  overflow:visible !important;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.35)) !important;
}

.login-topo-svg text{
  fill:#f3f8ff !important;
  font-size:42px !important;
  font-weight:900 !important;
  letter-spacing:7px !important;
  text-transform:uppercase !important;
}

.login-subpostal{
  margin-top:-12px !important;

  padding:10px 18px !important;

  border:1px solid rgba(71,151,255,.35) !important;
  border-radius:999px !important;

  background:rgba(4,18,40,.55) !important;
  backdrop-filter:blur(8px) !important;

  color:#8fc6ff !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:1.4px !important;
  text-transform:uppercase !important;
  text-align:center !important;
}

.login-card{
  grid-area:login !important;
  width:360px !important;
  max-width:360px !important;
  min-height:550px !important;

  margin:0 !important;
  box-sizing:border-box !important;
}

.login-info-sistema{
  grid-area:painel !important;
  width:360px !important;
  max-width:360px !important;
  min-height:550px !important;

  margin:0 !important;
  padding:16px !important;
  box-sizing:border-box !important;
}

.login-info-grid{
  grid-template-columns:1fr !important;
  gap:14px !important;
}

.login-info-card{
  width:100% !important;
  min-height:130px !important;
  box-sizing:border-box !important;
}

.login-usuarios-lista{
  max-height:120px !important;
}

.topo h1{
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:1.6px !important;
  text-transform:uppercase !important;
}

.topo .subtitulo{
  letter-spacing:2.4px !important;
  text-transform:uppercase !important;
}

.login-info-titulo{
  text-align:center !important;
  letter-spacing:3px !important;
  text-transform:uppercase !important;
}

.login-assinatura{
  margin-top:18px !important;
  padding-top:16px !important;
  text-align:center !important;
}

.login-assinatura .rubrica,
.login-rubrica{
  font-size:30px !important;
  line-height:1 !important;
}

@media(max-height:820px) and (min-width:981px){
  .pagina{
    transform:scale(.92) !important;
    transform-origin:center top !important;
  }
}

@media(max-width:980px){

  body{
    overflow:auto !important;
  }

  .pagina{
    width:100% !important;
    min-height:100vh !important;
    height:auto !important;

    grid-template-columns:1fr !important;
    grid-template-areas:
      "topo"
      "login"
      "painel" !important;

    justify-items:center !important;
    padding:20px 12px 28px 12px !important;
  }

  .login-card,
  .login-info-sistema{
    width:min(100%, 360px) !important;
    max-width:min(100%, 360px) !important;
  }

  .login-topo-svg{
    height:90px !important;
  }

  .login-topo-svg text{
    font-size:28px !important;
    letter-spacing:4px !important;
  }
}

/* FIM_LOGIN_CARTAO_POSTAL_V3 */



/* =========================================================
   LOGIN_PREMIUM_V4
   ========================================================= */

html,
body{
  width:100% !important;
  min-height:100% !important;
}

body{
  overflow:hidden !important;
}


/* ---------------------------------------------------------
   ESTRUTURA PRINCIPAL
   --------------------------------------------------------- */

.pagina{
  width:100% !important;
  min-height:100vh !important;
  height:100vh !important;

  display:grid !important;

  grid-template-columns:
    390px
    390px !important;

  grid-template-areas:
    "hero hero"
    "login painel" !important;

  grid-template-rows:
    auto
    auto !important;

  justify-content:center !important;
  align-content:center !important;
  align-items:start !important;

  column-gap:30px !important;
  row-gap:24px !important;

  padding:
    18px
    24px
    28px
    24px !important;

  box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   HERO SUPERIOR
   --------------------------------------------------------- */

.hero-login-premium{
  grid-area:hero !important;

  width:100% !important;
  max-width:810px !important;

  margin:0 auto !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  text-align:center !important;

  position:relative !important;
}


/* ---------------------------------------------------------
   LINHA + SIMBOLO
   --------------------------------------------------------- */

.hero-linha-decorativa{
  width:100% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:14px !important;

  margin-bottom:12px !important;
}

.hero-linha-decorativa span{
  height:1px !important;
  flex:1 !important;

  max-width:210px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(37,150,255,.85)
    ) !important;
}

.hero-linha-decorativa span:last-child{
  background:
    linear-gradient(
      90deg,
      rgba(37,150,255,.85),
      transparent
    ) !important;
}

.hero-simbolo{
  width:42px !important;
  height:42px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:12px !important;

  background:
    linear-gradient(
      145deg,
      #1998f5,
      #0967b5
    ) !important;

  color:#ffffff !important;

  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:.5px !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 8px 28px rgba(0,126,255,.25) !important;
}


/* ---------------------------------------------------------
   TITULOS
   --------------------------------------------------------- */

.hero-titulo-menor{
  font-size:17px !important;
  line-height:1.1 !important;

  font-weight:700 !important;

  letter-spacing:8px !important;

  color:#7ebeff !important;

  text-transform:uppercase !important;

  margin-left:8px !important;
}

.hero-titulo-principal{
  margin-top:5px !important;

  font-size:37px !important;
  line-height:1.06 !important;

  font-weight:900 !important;

  letter-spacing:3px !important;

  color:#f7fbff !important;

  text-transform:uppercase !important;

  text-shadow:
    0 3px 18px rgba(0,0,0,.38),
    0 0 28px rgba(45,140,255,.10) !important;
}


/* ---------------------------------------------------------
   UNIDADE / EMPRESA
   --------------------------------------------------------- */

.hero-unidade{
  margin-top:12px !important;

  min-width:220px !important;

  padding:
    8px
    22px !important;

  border-radius:8px !important;

  border:
    1px solid rgba(47,152,255,.48) !important;

  background:
    linear-gradient(
      90deg,
      rgba(13,70,123,.30),
      rgba(18,115,190,.18),
      rgba(13,70,123,.30)
    ) !important;

  color:#55b8ff !important;

  font-size:16px !important;

  font-weight:900 !important;

  letter-spacing:3.5px !important;

  text-transform:uppercase !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 22px rgba(0,0,0,.16) !important;
}


/* ---------------------------------------------------------
   BARRA DE STATUS DO TOPO
   --------------------------------------------------------- */

.hero-status-bar{
  margin-top:13px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:13px !important;

  padding:
    7px
    18px !important;

  border-top:
    1px solid rgba(255,255,255,.07) !important;

  color:#8399ad !important;

  font-size:9px !important;
  font-weight:800 !important;

  letter-spacing:1.4px !important;

  text-transform:uppercase !important;
}

.hero-status-item{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

.hero-status-dot{
  width:6px !important;
  height:6px !important;

  border-radius:50% !important;

  background:#2ecc71 !important;

  box-shadow:
    0 0 9px rgba(46,204,113,.7) !important;
}

.hero-status-divisor{
  width:3px !important;
  height:3px !important;

  border-radius:50% !important;

  background:
    rgba(255,255,255,.22) !important;
}


/* ---------------------------------------------------------
   CARD ESQUERDO
   --------------------------------------------------------- */

.login-card{
  grid-area:login !important;

  width:390px !important;
  max-width:390px !important;

  min-height:540px !important;

  margin:0 !important;

  box-sizing:border-box !important;

  border-radius:17px !important;

  box-shadow:
    0 24px 55px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* ---------------------------------------------------------
   CARD DIREITO
   --------------------------------------------------------- */

.login-info-sistema{
  grid-area:painel !important;

  width:390px !important;
  max-width:390px !important;

  min-height:540px !important;

  margin:0 !important;

  padding:20px !important;

  box-sizing:border-box !important;

  border-radius:17px !important;

  display:flex !important;
  flex-direction:column !important;

  box-shadow:
    0 24px 55px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* ---------------------------------------------------------
   TITULO CARD DIREITO
   --------------------------------------------------------- */

.login-info-titulo{
  margin-bottom:16px !important;

  text-align:left !important;

  color:#8ab7df !important;

  font-size:11px !important;

  font-weight:900 !important;

  letter-spacing:2.3px !important;

  text-transform:uppercase !important;
}


/* ---------------------------------------------------------
   CARDS INTERNOS
   --------------------------------------------------------- */

.login-info-grid{
  display:grid !important;

  grid-template-columns:1fr !important;

  gap:13px !important;
}

.login-info-card{
  width:100% !important;

  min-height:148px !important;

  padding:16px !important;

  box-sizing:border-box !important;

  border-radius:12px !important;
}

.login-info-card-titulo{
  font-size:11px !important;
  letter-spacing:1px !important;
}

.login-info-linha{
  padding:6px 0 !important;
}


/* ---------------------------------------------------------
   USUARIOS
   --------------------------------------------------------- */

.login-usuarios-lista{
  min-height:82px !important;
  max-height:125px !important;
}


/* ---------------------------------------------------------
   ASSINATURA
   --------------------------------------------------------- */

.login-assinatura{
  margin-top:auto !important;

  padding-top:16px !important;

  border-top:
    1px solid rgba(255,255,255,.07) !important;

  text-align:center !important;
}

.login-desenvolvido{
  color:#6f859a !important;

  font-size:9px !important;

  letter-spacing:2.3px !important;
}

.login-nome-dev{
  margin-top:5px !important;

  color:#dfeeff !important;

  font-size:12px !important;
}

.login-rubrica{
  margin-top:7px !important;

  font-family:
    "Segoe Script",
    "Brush Script MT",
    cursive !important;

  font-size:27px !important;

  color:#f4f8ff !important;

  opacity:.92 !important;

  transform:
    rotate(-3deg) !important;

  text-shadow:
    0 4px 12px rgba(0,0,0,.25) !important;
}


/* ---------------------------------------------------------
   LOGIN
   --------------------------------------------------------- */

.topo h1{
  font-size:24px !important;

  font-weight:900 !important;

  letter-spacing:2px !important;
}

.topo .subtitulo{
  color:#6488a8 !important;

  font-size:9px !important;

  letter-spacing:2.2px !important;
}


/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */

@media(max-height:850px) and (min-width:981px){

  .pagina{
    transform:
      scale(.88) !important;

    transform-origin:
      center center !important;
  }
}


@media(max-width:980px){

  body{
    overflow:auto !important;
  }

  .pagina{
    width:100% !important;

    min-height:100vh !important;
    height:auto !important;

    display:grid !important;

    grid-template-columns:
      1fr !important;

    grid-template-areas:
      "hero"
      "login"
      "painel" !important;

    justify-items:center !important;

    row-gap:18px !important;

    padding:
      20px
      14px
      30px
      14px !important;
  }

  .hero-login-premium{
    max-width:620px !important;
  }

  .hero-titulo-menor{
    font-size:13px !important;

    letter-spacing:5px !important;
  }

  .hero-titulo-principal{
    font-size:27px !important;

    letter-spacing:2px !important;
  }

  .hero-status-bar{
    flex-wrap:wrap !important;
  }

  .login-card,
  .login-info-sistema{
    width:min(100%,390px) !important;
    max-width:min(100%,390px) !important;
  }
}


/* FIM_LOGIN_PREMIUM_V4 */



/* =========================================================
   LOGIN_CARDS_MESMO_TAMANHO_V1
   ========================================================= */

.pagina{
  align-items:stretch !important;
}

.login-card,
.login-info-sistema{
  height:575px !important;
  min-height:575px !important;
  max-height:575px !important;
}

.login-info-sistema{
  display:flex !important;
  flex-direction:column !important;
}

.login-info-grid{
  flex:1 !important;

  display:grid !important;

  grid-template-rows:
    auto
    1fr !important;

  gap:14px !important;
}

.login-info-card{
  width:100% !important;
  box-sizing:border-box !important;
}

.login-info-card:nth-child(2){
  min-height:245px !important;
  height:245px !important;

  display:flex !important;
  flex-direction:column !important;
}

.login-usuarios-lista{
  flex:1 !important;

  min-height:185px !important;
  max-height:185px !important;

  overflow-y:auto !important;

  display:block !important;
}

.login-sem-usuario{
  min-height:150px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.login-assinatura{
  margin-top:14px !important;
  flex-shrink:0 !important;
}

/* FIM_LOGIN_CARDS_MESMO_TAMANHO_V1 */



/* =========================================================
   LOGIN_CARDS_IGUAIS_V2
   ========================================================= */

/* MESMA LARGURA E MESMA ALTURA */
.login-card,
.login-info-sistema{
  width:390px !important;
  max-width:390px !important;

  height:585px !important;
  min-height:585px !important;
  max-height:585px !important;

  box-sizing:border-box !important;
}


/* CARD DIREITO */
.login-info-sistema{
  display:flex !important;
  flex-direction:column !important;

  padding:20px !important;
}


/* AREA ENTRE TITULO E ASSINATURA */
.login-info-grid{
  flex:1 !important;

  display:grid !important;

  grid-template-rows:
    155px
    1fr !important;

  gap:14px !important;
}


/* LICENCA */
.login-info-card:first-child{
  height:155px !important;
  min-height:155px !important;
}


/* USUARIOS LOGADOS - AUMENTADO */
.login-info-card:nth-child(2){
  height:auto !important;
  min-height:250px !important;

  display:flex !important;
  flex-direction:column !important;
}


/* LISTA DE USUARIOS */
.login-usuarios-lista{
  flex:1 !important;

  min-height:190px !important;
  max-height:190px !important;

  overflow-y:auto !important;
}


/* QUANDO NAO TEM NINGUEM LOGADO */
.login-sem-usuario{
  width:100% !important;
  height:170px !important;

  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  text-align:center !important;
}


/* ASSINATURA FICA SEMPRE NO RODAPE */
.login-assinatura{
  margin-top:14px !important;
  padding-top:14px !important;

  flex-shrink:0 !important;
}


/* GARANTE ALINHAMENTO DOS DOIS CARDS */
.pagina{
  align-items:start !important;
}


/* RESPONSIVO */
@media(max-width:980px){

  .login-card,
  .login-info-sistema{
    width:min(100%,390px) !important;
    max-width:min(100%,390px) !important;

    height:auto !important;
    max-height:none !important;
    min-height:585px !important;
  }
}

/* FIM_LOGIN_CARDS_IGUAIS_V2 */



/* =========================================================
   LOGIN_CARDS_ESTRUTURA_FINAL_V3
   Altura natural do login + painel direito acompanha.
   ========================================================= */


/* ---------------------------------------------------------
   GRID PRINCIPAL

   A linha dos cards assume a altura do maior card.
   Os dois elementos esticam igualmente.
   --------------------------------------------------------- */

.pagina{
  align-items:stretch !important;
}


/* ---------------------------------------------------------
   REMOVE TODAS AS ALTURAS FORCADAS ANTERIORES
   --------------------------------------------------------- */

.login-card,
.login-info-sistema{

  width:390px !important;
  max-width:390px !important;

  height:auto !important;

  min-height:0 !important;

  max-height:none !important;

  align-self:stretch !important;

  box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   LOGIN ESQUERDO

   A altura passa a ser determinada pelo proprio conteudo.
   Nada fica para fora da borda.
   --------------------------------------------------------- */

.login-card{

  grid-area:login !important;

  margin:0 !important;
}


/* ---------------------------------------------------------
   PAINEL DIREITO

   Estica exatamente na altura criada pelo card de LOGIN.
   --------------------------------------------------------- */

.login-info-sistema{

  grid-area:painel !important;

  margin:0 !important;

  padding:20px !important;

  display:flex !important;

  flex-direction:column !important;
}


/* ---------------------------------------------------------
   AREA INTERNA DO PAINEL DIREITO
   --------------------------------------------------------- */

.login-info-grid{

  flex:1 1 auto !important;

  display:grid !important;

  grid-template-columns:1fr !important;

  grid-template-rows:
    auto
    minmax(230px,1fr) !important;

  gap:14px !important;

  min-height:0 !important;
}


/* ---------------------------------------------------------
   CARD DE LICENCA

   Deixa crescer naturalmente conforme as linhas.
   --------------------------------------------------------- */

.login-info-card:first-child{

  width:100% !important;

  height:auto !important;

  min-height:0 !important;

  max-height:none !important;

  padding:16px !important;

  box-sizing:border-box !important;
}


/* Um pouco mais de respiracao entre as linhas */

.login-info-card:first-child
.login-info-linha{

  padding:
    7px
    0 !important;
}


/* ---------------------------------------------------------
   CARD USUARIOS LOGADOS

   Usa todo o espaco restante do painel direito.
   --------------------------------------------------------- */

.login-info-card:nth-child(2){

  width:100% !important;

  height:auto !important;

  min-height:230px !important;

  max-height:none !important;

  padding:16px !important;

  box-sizing:border-box !important;

  display:flex !important;

  flex-direction:column !important;
}


/* ---------------------------------------------------------
   LISTA DE USUARIOS

   Agora cresce junto com o card.
   --------------------------------------------------------- */

.login-usuarios-lista{

  flex:1 1 auto !important;

  width:100% !important;

  min-height:175px !important;

  max-height:none !important;

  overflow-y:auto !important;

  box-sizing:border-box !important;
}


/* Quando nenhum usuario estiver conectado,
   centraliza a mensagem no espaco disponivel. */

.login-sem-usuario{

  flex:1 1 auto !important;

  width:100% !important;

  min-height:160px !important;

  padding:0 !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  text-align:center !important;
}


/* ---------------------------------------------------------
   ASSINATURA

   Sempre permanece no rodape do card direito.
   --------------------------------------------------------- */

.login-assinatura{

  flex:0 0 auto !important;

  margin-top:16px !important;

  padding-top:15px !important;
}


/* ---------------------------------------------------------
   EVITA QUE LICENCA E USUARIOS SE ENCOSTEM
   --------------------------------------------------------- */

.login-info-linha strong{

  line-height:1.25 !important;
}

.login-info-card-titulo{

  flex-shrink:0 !important;

  margin-bottom:10px !important;
}


/* ---------------------------------------------------------
   ESCALA

   A escala anterior em 0.88 estava deixando a tela pequena.
   So reduzimos se a tela for realmente baixa.
   --------------------------------------------------------- */

@media(min-width:981px){

  .pagina{

    transform:none !important;

    transform-origin:center center !important;
  }
}


@media(max-height:730px) and (min-width:981px){

  .pagina{

    transform:scale(.88) !important;

    transform-origin:center center !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:980px){

  body{
    overflow:auto !important;
  }

  .login-card,
  .login-info-sistema{

    width:min(100%,390px) !important;

    max-width:min(100%,390px) !important;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;
  }

  .login-info-grid{

    grid-template-rows:
      auto
      auto !important;
  }

  .login-info-card:nth-child(2){

    min-height:230px !important;
  }
}


/* FIM_LOGIN_CARDS_ESTRUTURA_FINAL_V3 */