
/* =========================================================
   GLP ABSENTEISMO
   LOGIN PREMIUM V2
   ========================================================= */

:root{

  --abs-navy:#082c47;
  --abs-navy-2:#0d3e5f;

  --abs-blue:#2365df;
  --abs-cyan:#13b6c5;
  --abs-green:#169b76;

  --abs-bg:#f2f7fa;

  --abs-border:#d9e6ed;

  --abs-text:#153b57;
  --abs-muted:#71889a;

  --abs-white:#ffffff;

}


/* =========================================================
   RESET VISUAL
   ========================================================= */

html,
body{

  width:100%;
  min-height:100%;

}


body{

  margin:0 !important;

  min-height:100vh !important;

  overflow-x:hidden;

  background:
    #edf4f8 !important;

  color:
    var(--abs-text);

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif !important;

}


/*
 * Esconde o layout antigo depois que
 * o novo shell for criado.
 */

body.abs-v2-ready
> :not(.abs-v2-shell):not(script):not(style){

  display:none !important;

}


/* =========================================================
   SHELL
   ========================================================= */

.abs-v2-shell{

  display:grid;

  grid-template-columns:
    minmax(430px, 1.08fr)
    minmax(460px, .92fr);

  width:100%;

  min-height:100vh;

  background:#fff;

}


/* =========================================================
   LADO INSTITUCIONAL
   ========================================================= */

.abs-v2-brand-panel{

  position:relative;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  min-height:100vh;

  padding:
    46px 54px 42px;

  overflow:hidden;

  color:#fff;

  background:

    radial-gradient(
      circle at 18% 18%,
      rgba(28,196,199,.20),
      transparent 27%
    ),

    radial-gradient(
      circle at 92% 85%,
      rgba(32,97,219,.22),
      transparent 31%
    ),

    linear-gradient(
      140deg,
      #072a44 0%,
      #0a3654 46%,
      #07445b 100%
    );

}


/*
 * grade discreta
 */

.abs-v2-brand-panel::before{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.23;

  background:

    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),

    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size:
    50px 50px;

}


.abs-v2-brand-panel::after{

  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-210px;
  top:20%;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:50%;

  box-shadow:

    0 0 0 55px
    rgba(255,255,255,.025),

    0 0 0 110px
    rgba(255,255,255,.018);

}


/* =========================================================
   MARCAS
   ========================================================= */

.abs-v2-top{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:24px;

}


.abs-v2-glp{

  display:flex;

  align-items:center;

  gap:13px;

}


.abs-v2-glp-mark{

  display:flex;

  align-items:center;

  justify-content:center;

  width:46px;
  height:46px;

  border:
    1px solid
    rgba(255,255,255,.17);

  border-radius:14px;

  background:
    rgba(255,255,255,.08);

  color:#3be0df;

  font-size:24px;

  font-weight:900;

  backdrop-filter:
    blur(8px);

}


.abs-v2-glp-text small{

  display:block;

  color:
    rgba(255,255,255,.63);

  font-size:9px;

  font-weight:900;

  letter-spacing:.10em;

  text-transform:uppercase;

}


.abs-v2-glp-text strong{

  display:block;

  margin-top:3px;

  color:#fff;

  font-size:15px;

  font-weight:850;

}


.abs-v2-nadir{

  color:#fff;

  font-size:29px;

  font-weight:900;

  letter-spacing:-.05em;

}


.abs-v2-nadir-dot{

  color:#f69349;

}


/* =========================================================
   TEXTO PRINCIPAL
   ========================================================= */

.abs-v2-brand-content{

  position:relative;

  z-index:2;

  max-width:580px;

  margin:
    auto 0;

  padding:
    70px 0;

}


.abs-v2-eyebrow{

  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-bottom:20px;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(65,222,216,.20);

  border-radius:
    999px;

  background:
    rgba(16,187,191,.09);

  color:#61e3df;

  font-size:9px;

  font-weight:900;

  letter-spacing:.12em;

  text-transform:uppercase;

}


.abs-v2-eyebrow::before{

  content:"";

  width:7px;
  height:7px;

  border-radius:50%;

  background:#34d4d1;

  box-shadow:
    0 0 0 5px
    rgba(52,212,209,.08);

}


.abs-v2-brand-content h1{

  max-width:560px;

  margin:
    0;

  color:#fff;

  font-size:
    clamp(38px,4.2vw,62px);

  font-weight:850;

  line-height:1.02;

  letter-spacing:-.045em;

}


.abs-v2-brand-content p{

  max-width:530px;

  margin:
    22px 0 0;

  color:
    rgba(232,243,249,.72);

  font-size:15px;

  line-height:1.65;

}


/* =========================================================
   BENEFÍCIOS
   ========================================================= */

.abs-v2-features{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:10px;

  margin-top:35px;

}


.abs-v2-feature{

  min-width:0;

  padding:
    14px 13px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:12px;

  background:
    rgba(255,255,255,.055);

  backdrop-filter:
    blur(8px);

}


.abs-v2-feature span{

  display:flex;

  align-items:center;

  justify-content:center;

  width:27px;
  height:27px;

  margin-bottom:8px;

  border-radius:7px;

  background:
    rgba(47,213,208,.11);

  color:#57dfda;

  font-size:13px;

  font-weight:900;

}


.abs-v2-feature strong{

  display:block;

  color:#fff;

  font-size:10px;

  line-height:1.3;

}


.abs-v2-feature small{

  display:block;

  margin-top:4px;

  color:
    rgba(229,241,247,.55);

  font-size:8px;

  line-height:1.4;

}


/* =========================================================
   RODAPÉ ESQUERDO
   ========================================================= */

.abs-v2-brand-footer{

  position:relative;

  z-index:2;

  display:flex;

  justify-content:space-between;

  gap:20px;

  padding-top:20px;

  border-top:
    1px solid
    rgba(255,255,255,.08);

  color:
    rgba(235,245,249,.52);

  font-size:8px;

}


/* =========================================================
   LADO DO LOGIN
   ========================================================= */

.abs-v2-access-panel{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:100vh;

  padding:
    48px 60px;

  background:

    radial-gradient(
      circle at 100% 0%,
      rgba(22,181,195,.07),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      #fff,
      #f7fafc
    );

}


.abs-v2-access-panel::before{

  content:"";

  position:absolute;

  left:0;

  top:0;

  bottom:0;

  width:1px;

  background:
    #dce7ee;

}


/* =========================================================
   CARD DO LOGIN
   ========================================================= */

.abs-v2-access-card{

  width:100%;

  max-width:460px;

  box-sizing:border-box;

  padding:
    36px;

  border:
    1px solid
    var(--abs-border);

  border-radius:
    22px;

  background:#fff;

  box-shadow:
    0 24px 60px
    rgba(17,61,88,.09);

}


.abs-v2-access-tag{

  display:inline-flex;

  align-items:center;

  gap:7px;

  padding:
    6px 9px;

  border-radius:999px;

  background:#e8f7f4;

  color:#16836d;

  font-size:8px;

  font-weight:900;

  letter-spacing:.10em;

  text-transform:uppercase;

}


.abs-v2-access-tag::before{

  content:"";

  width:6px;
  height:6px;

  border-radius:50%;

  background:#1eaa8a;

}


.abs-v2-access-card > h2{

  margin:
    17px 0 7px;

  color:
    var(--abs-text);

  font-size:27px;

  font-weight:850;

  letter-spacing:-.035em;

}


.abs-v2-access-intro{

  margin:
    0 0 25px;

  color:
    var(--abs-muted);

  font-size:12px;

  line-height:1.55;

}


/* =========================================================
   FORMULÁRIO EXISTENTE
   ========================================================= */

.abs-v2-access-card form{

  display:block !important;

  width:100% !important;

  margin:0 !important;

  padding:0 !important;

  border:0 !important;

  background:transparent !important;

  box-shadow:none !important;

}


/*
 * Remove textos duplicados vindos do layout anterior
 */

.abs-v2-access-card form
h1,

.abs-v2-access-card form
h2{

  display:none !important;

}


.abs-v2-access-card form label{

  display:block;

  margin:
    0 0 6px;

  color:#5f788b;

  font-size:9px;

  font-weight:850;

  letter-spacing:.02em;

}


.abs-v2-access-card form
input[type="text"],

.abs-v2-access-card form
input[type="email"],

.abs-v2-access-card form
input[type="password"],

.abs-v2-access-card form
input:not([type]){

  width:100% !important;

  min-height:48px !important;

  box-sizing:border-box !important;

  margin:
    0 0 16px !important;

  padding:
    0 14px !important;

  border:
    1px solid
    #d2e0e9 !important;

  border-radius:
    11px !important;

  outline:none !important;

  background:
    #f8fbfd !important;

  color:
    #173d58 !important;

  font-family:inherit !important;

  font-size:
    13px !important;

  font-weight:
    650 !important;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;

}


.abs-v2-access-card form
input:focus{

  border-color:
    #43a8c1 !important;

  background:
    #fff !important;

  box-shadow:
    0 0 0 4px
    rgba(38,159,188,.08) !important;

}


.abs-v2-access-card form
button[type="submit"],

.abs-v2-access-card form
input[type="submit"],

.abs-v2-access-card form
.login-button,

.abs-v2-access-card form
.btn-login{

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  width:100% !important;

  min-height:49px !important;

  box-sizing:border-box !important;

  margin:
    7px 0 0 !important;

  padding:
    0 20px !important;

  border:
    0 !important;

  border-radius:
    11px !important;

  background:

    linear-gradient(
      90deg,
      #2767df,
      #13b5c3
    ) !important;

  color:
    #fff !important;

  font-family:inherit !important;

  font-size:
    12px !important;

  font-weight:
    850 !important;

  cursor:pointer !important;

  box-shadow:
    0 10px 24px
    rgba(34,112,196,.18) !important;

  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;

}


.abs-v2-access-card form
button[type="submit"]:hover,

.abs-v2-access-card form
input[type="submit"]:hover{

  transform:
    translateY(-1px);

  filter:
    brightness(1.03);

  box-shadow:
    0 14px 28px
    rgba(34,112,196,.22) !important;

}


/*
 * Mensagens de erro/sucesso existentes
 */

.abs-v2-access-card form
.error,

.abs-v2-access-card form
.alert,

.abs-v2-access-card form
.message{

  border-radius:
    9px !important;

  font-size:
    10px !important;

}


/* =========================================================
   RODAPÉ DO CARD
   ========================================================= */

.abs-v2-access-footer{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  margin-top:24px;

  padding-top:18px;

  border-top:
    1px solid
    #e6edf2;

}


.abs-v2-access-footer span{

  color:#8798a4;

  font-size:8px;

  line-height:1.4;

}


.abs-v2-access-footer a{

  color:#3472cc;

  font-size:9px;

  font-weight:800;

  text-decoration:none;

}


.abs-v2-access-footer a:hover{

  text-decoration:underline;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:1000px){

  .abs-v2-shell{

    grid-template-columns:
      1fr;

  }


  .abs-v2-brand-panel{

    min-height:auto;

    padding:
      32px;

  }


  .abs-v2-brand-content{

    padding:
      55px 0 40px;

  }


  .abs-v2-access-panel{

    min-height:auto;

    padding:
      45px 25px 60px;

  }


  .abs-v2-access-panel::before{

    display:none;

  }

}


@media(max-width:620px){

  .abs-v2-top{

    align-items:flex-start;

  }


  .abs-v2-nadir{

    font-size:24px;

  }


  .abs-v2-brand-content h1{

    font-size:39px;

  }


  .abs-v2-features{

    grid-template-columns:
      1fr;

  }


  .abs-v2-brand-footer{

    flex-direction:column;

  }


  .abs-v2-access-card{

    padding:
      27px 22px;

    border-radius:
      17px;

  }

}

