/* ============================================================
   STYLE.LOGIN.CSS - Sistema Barber
   Tela de autenticacao
   UI/UX premium mantendo a identidade azul do sistema.
   ============================================================ */

:root {
  --login-blue-start: #2f5fde;
  --login-blue-mid: #4c86f5;
  --login-blue-end: #6fa9ff;

  --login-accent: #3d63e0;
  --login-accent-hover: #3253c9;
  --login-accent-soft: rgba(61, 99, 224, 0.1);
  --login-accent-light: rgba(61, 99, 224, 0.16);
  --login-accent-glow: rgba(61, 99, 224, 0.28);

  --login-bg: #eef1fc;

  --login-white: #ffffff;
  --login-surface-soft: #f7f9fd;

  --login-border: #e4e7ec;
  --login-border-soft: #edf0f5;
  --login-border-hover: #cfd6e2;

  --login-heading: #101828;
  --login-body: #344054;
  --login-muted: #667085;
  --login-placeholder: #98a2b3;

  --login-success: #12b76a;
  --login-danger: #f04438;

  --login-card-radius: 28px;
  --login-input-radius: 13px;
  --login-button-radius: 13px;

  --login-shadow-card:
    0 40px 100px rgba(47, 95, 222, 0.16),
    0 16px 40px rgba(16, 24, 40, 0.07);

  --login-shadow-input:
    0 8px 22px rgba(16, 24, 40, 0.035);

  --login-shadow-button:
    0 14px 28px rgba(61, 99, 224, 0.24);

  --login-transition-fast:
    150ms cubic-bezier(0.22, 1, 0.36, 1);

  --login-transition-base:
    280ms cubic-bezier(0.22, 1, 0.36, 1);

  --login-transition-slow:
    650ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   PAGE
   ============================================================ */

body:has(.login-wrapper) {
  position: relative;

  min-height: 100vh;
  min-height: 100dvh;

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

  padding: 40px 20px;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(255, 255, 255, 0.98),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 92%,
      rgba(202, 216, 250, 0.78),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      #eef1fc 0%,
      #f3f6ff 45%,
      #e9eefb 100%
    );

  isolation: isolate;
}

/* ============================================================
   BACKGROUND BLOBS
   ============================================================ */

body:has(.login-wrapper)::before,
body:has(.login-wrapper)::after {
  content: "";

  position: fixed;

  border-radius: 50%;

  pointer-events: none;

  z-index: -3;

  filter: blur(12px);
}

body:has(.login-wrapper)::before {
  top: -190px;
  left: -190px;

  width: 540px;
  height: 540px;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(225, 233, 251, 0.72) 43%,
      rgba(214, 224, 250, 0.18) 68%,
      transparent 78%
    );

  animation:
    login-blob-a
    14s
    ease-in-out
    infinite
    alternate;
}

body:has(.login-wrapper)::after {
  right: -210px;
  bottom: -220px;

  width: 580px;
  height: 580px;

  background:
    radial-gradient(
      circle,
      rgba(194, 212, 249, 0.88) 0%,
      rgba(203, 217, 250, 0.42) 46%,
      rgba(203, 217, 250, 0.1) 68%,
      transparent 78%
    );

  animation:
    login-blob-b
    16s
    ease-in-out
    infinite
    alternate;
}

@keyframes login-blob-a {
  from {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(20px, 16px, 0)
      scale(1.055);
  }
}

@keyframes login-blob-b {
  from {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(-22px, -18px, 0)
      scale(1.06);
  }
}

/* ============================================================
   WRAPPER
   ============================================================ */

.login-wrapper {
  position: relative;

  z-index: 1;

  width: 100%;
  max-width: 980px;

  perspective: 1600px;
}

/* ============================================================
   DOT GRID
   ============================================================ */

.login-wrapper::before,
.login-wrapper::after {
  content: "";

  position: absolute;

  width: 140px;
  height: 140px;

  background-image:
    radial-gradient(
      rgba(61, 99, 224, 0.32) 1.5px,
      transparent 1.5px
    );

  background-size: 16px 16px;

  pointer-events: none;

  z-index: -1;
}

.login-wrapper::before {
  top: -74px;
  right: -42px;

  animation:
    login-grid-a
    8s
    ease-in-out
    infinite
    alternate;
}

.login-wrapper::after {
  left: -44px;
  bottom: -66px;

  opacity: 0.68;

  animation:
    login-grid-b
    10s
    ease-in-out
    infinite
    alternate;
}

@keyframes login-grid-a {
  from {
    transform:
      translateY(0)
      rotate(0deg);
  }

  to {
    transform:
      translateY(12px)
      rotate(1deg);
  }
}

@keyframes login-grid-b {
  from {
    transform:
      translateY(0)
      rotate(0deg);
  }

  to {
    transform:
      translateY(-10px)
      rotate(-1deg);
  }
}

/* ============================================================
   CARD
   ============================================================ */

.login-card {
  position: relative;

  display: grid;

  grid-template-columns: 42% 58%;

  min-height: 600px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfdff 100%
    );

  border:
    1px solid rgba(255, 255, 255, 0.9);

  border-radius:
    var(--login-card-radius);

  box-shadow:
    var(--login-shadow-card);

  transform:
    translateY(26px)
    scale(0.975);

  opacity: 0;

  animation:
    login-card-enter
    850ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.login-card::after {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.98),
      transparent
    );

  z-index: 20;

  pointer-events: none;
}

@keyframes login-card-enter {
  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

/* ============================================================
   PAINEL AZUL
   ============================================================ */

.login-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  bottom: 0;

  width: 42%;

  z-index: 0;

  background:
    radial-gradient(
      ellipse 370px 450px at 10% 88%,
      rgba(255, 255, 255, 0.16),
      transparent 60%
    ),
    radial-gradient(
      ellipse 330px 320px at 90% 10%,
      rgba(255, 255, 255, 0.12),
      transparent 58%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.055),
      transparent 60%
    ),
    linear-gradient(
      160deg,
      var(--login-blue-start) 0%,
      var(--login-blue-mid) 54%,
      var(--login-blue-end) 100%
    );

  pointer-events: none;
}

/* ============================================================
   AREA DA LOGO
   ============================================================ */

#imagem,
#mensagem2,
#mensagem3 {
  grid-column: 1;

  position: relative;

  z-index: 3;
}

#imagem {
  grid-row: 1;

  height: 205px;

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

  isolation: isolate;
}

/* ============================================================
   HALO
   ============================================================ */

#imagem::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 164px;
  height: 164px;

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    scale(0.94);

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.1) 42%,
      rgba(255, 255, 255, 0.025) 68%,
      transparent 78%
    );

  box-shadow:
    0 0 50px rgba(255, 255, 255, 0.08);

  animation:
    login-logo-halo
    5.5s
    ease-in-out
    infinite;
}

@keyframes login-logo-halo {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(0.94);
  }

  50% {
    transform:
      translate(-50%, -50%)
      scale(1.055);
  }
}

/* ============================================================
   ANEL EXTERNO
   ============================================================ */

#imagem::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 124px;
  height: 124px;

  border-radius: 50%;

  transform:
    translate(-50%, -50%);

  border:
    1px solid rgba(255, 255, 255, 0.2);

  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.04),
    0 0 28px rgba(255, 255, 255, 0.05);

  pointer-events: none;
}

/* ============================================================
   LOGO
   ============================================================ */

#imagem img {
  position: relative;

  z-index: 5;

  display: block;

  width: 94px;
  height: 94px;

  min-width: 94px;
  min-height: 94px;

  max-width: 94px;
  max-height: 94px;

  object-fit: cover;

  object-position: center;

  border-radius: 50%;

  border:
    none !important;

  outline:
    none !important;

  background:
    transparent;

  padding:
    0;

  box-shadow:
    none !important;

  transform:
    translateY(14px)
    scale(0.88);

  opacity: 0;

  animation:
    login-logo-enter
    720ms
    280ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;

  transition:
    transform var(--login-transition-base),
    filter var(--login-transition-base);
}

#imagem:hover img {
  transform:
    translateY(-4px)
    scale(1.045);

  filter:
    brightness(1.025);
}

@keyframes login-logo-enter {
  0% {
    opacity: 0;

    transform:
      translateY(18px)
      scale(0.84);
  }

  65% {
    opacity: 1;

    transform:
      translateY(-3px)
      scale(1.035);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

/* ============================================================
   TEXTO DO PAINEL
   ============================================================ */

#mensagem2 {
  grid-row: 2;

  padding:
    0
    34px
    7px;

  text-align: center;
}

#mensagem2 label {
  display: block;

  font-family:
    var(--font-body);

  font-size: 1.74rem;

  line-height: 1.2;

  font-weight: 800;

  letter-spacing: -0.025em;

  color:
    #ffffff;

  text-shadow:
    0 4px 18px rgba(16, 24, 40, 0.12);

  opacity: 0;

  transform:
    translateY(14px);

  animation:
    login-panel-text
    680ms
    420ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

#mensagem3 {
  grid-row: 3;

  padding:
    0
    42px
    44px;

  text-align: center;
}

#mensagem3 label {
  display: block;

  font-size: 0.94rem;

  line-height: 1.72;

  color:
    rgba(255, 255, 255, 0.85);

  opacity: 0;

  transform:
    translateY(14px);

  animation:
    login-panel-text
    680ms
    540ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

@keyframes login-panel-text {
  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

/* ============================================================
   CONTEUDO DIREITO
   ============================================================ */

#title,
#subtitle,
.login-form,
#ou {
  grid-column: 2;

  padding-left: 56px;
  padding-right: 56px;
}

/* ============================================================
   TITULO
   ============================================================ */

#title {
  grid-row: 1;

  padding-top: 58px;

  opacity: 0;

  transform:
    translateY(16px);

  animation:
    login-content-enter
    620ms
    200ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

#title h1 {
  margin: 0;

  font-family:
    var(--font-body);

  font-size: 2rem;

  line-height: 1.2;

  font-weight: 800;

  letter-spacing: -0.025em;

  color:
    var(--login-heading);
}

#title h1::after {
  content: "";

  display: block;

  width: 46px;
  height: 3px;

  margin-top: 13px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--login-blue-start),
      var(--login-blue-end)
    );

  transform:
    scaleX(0);

  transform-origin:
    left;

  animation:
    login-title-line
    720ms
    500ms
    cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

@keyframes login-title-line {
  from {
    opacity: 0;

    transform:
      scaleX(0);
  }

  to {
    opacity: 1;

    transform:
      scaleX(1);
  }
}

/* ============================================================
   SUBTITULO
   ============================================================ */

#subtitle {
  grid-row: 2;

  padding-bottom: 30px;

  opacity: 0;

  transform:
    translateY(14px);

  animation:
    login-content-enter
    620ms
    300ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

#subtitle h2 {
  margin: 0;

  font-family:
    var(--font-body);

  font-size: 0.95rem;

  line-height: 1.55;

  font-weight: 400;

  color:
    var(--login-muted);
}

@keyframes login-content-enter {
  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

/* ============================================================
   FORM
   ============================================================ */

.login-form {
  grid-row: 3;

  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr;

  column-gap: 12px;

  align-content: start;

  opacity: 0;

  transform:
    translateY(16px);

  animation:
    login-form-enter
    700ms
    370ms
    cubic-bezier(0.16, 1, 0.3, 1)
    forwards;

  --cursor-x: 50%;
  --cursor-y: 50%;
}

.login-form::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  border-radius:
    18px;

  background:
    radial-gradient(
      circle 150px at var(--cursor-x) var(--cursor-y),
      rgba(61, 99, 224, 0.045),
      transparent 70%
    );

  opacity: 0;

  pointer-events: none;

  z-index: 0;

  transition:
    opacity 350ms ease;
}

.login-form.cursor-active::before {
  opacity: 1;
}

.login-form > * {
  position: relative;

  z-index: 1;
}

@keyframes login-form-enter {
  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

#usuario,
#senha {
  grid-column:
    1 / -1;
}

#usuario {
  grid-row:
    1;
}

#senha {
  grid-row:
    3;
}

/* ============================================================
   LABEL
   ============================================================ */

#usuario label,
#senha label {
  display: block;

  margin-bottom: 7px;

  font-size: 0.87rem;

  line-height: 1.3;

  font-weight: 700;

  color:
    #1d2433;

  transition:
    color var(--login-transition-fast),
    transform var(--login-transition-fast);
}

#usuario:focus-within label,
#senha:focus-within label {
  color:
    var(--login-accent);

  transform:
    translateX(2px);
}

/* ============================================================
   USUARIO
   ============================================================ */

#texto {
  grid-column:
    1 / -1;

  grid-row:
    2;

  margin-bottom:
    18px;

  position:
    relative;

  isolation:
    isolate;

  --field-progress:
    0;
}

/* ============================================================
   SENHA
   ============================================================ */

#digitesen {
  grid-column:
    1 / -1;

  grid-row:
    4;

  margin-bottom:
    6px;

  position:
    relative;

  isolation:
    isolate;

  --field-progress:
    0;
}

/* ============================================================
   CAMADA INTERNA DOS CAMPOS
   ============================================================ */

#texto::before,
#digitesen::before {
  content: "";

  position: absolute;

  left: 5px;
  right: 5px;

  top: 5px;
  bottom: 5px;

  border:
    1px solid rgba(61, 99, 224, 0.13);

  border-radius:
    9px;

  opacity:
    0;

  pointer-events:
    none;

  z-index:
    4;

  transition:
    opacity var(--login-transition-base),
    border-color var(--login-transition-base),
    inset var(--login-transition-base);
}

#texto:focus-within::before,
#digitesen:focus-within::before {
  opacity:
    1;

  border-color:
    rgba(61, 99, 224, 0.26);

  animation:
    login-field-inner-pulse
    2.4s
    ease-in-out
    infinite;
}

@keyframes login-field-inner-pulse {
  0%,
  100% {
    opacity:
      0.72;
  }

  50% {
    opacity:
      1;
  }
}

/* ============================================================
   LINHA DE ATIVIDADE
   ============================================================ */

#texto::after,
#digitesen::after {
  content: "";

  position: absolute;

  left: 12px;

  bottom: -5px;

  width:
    calc(
      (100% - 24px)
      * var(--field-progress)
    );

  height:
    2px;

  max-width:
    calc(100% - 24px);

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--login-blue-start),
      var(--login-accent),
      var(--login-blue-end)
    );

  box-shadow:
    0 0 7px rgba(61, 99, 224, 0.24),
    0 0 14px rgba(61, 99, 224, 0.08);

  opacity:
    calc(
      0.35
      + (var(--field-progress) * 0.65)
    );

  pointer-events:
    none;

  z-index:
    6;

  transition:
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;

  transform-origin:
    left center;
}

#texto:focus-within::after,
#digitesen:focus-within::after {
  animation:
    login-field-line-glow
    1.8s
    ease-in-out
    infinite;
}

@keyframes login-field-line-glow {
  0%,
  100% {
    filter:
      brightness(1);
  }

  50% {
    filter:
      brightness(1.25);
  }
}

/* ============================================================
   INPUTS
   ============================================================ */

#texto input,
#digitesen input {
  position:
    relative;

  z-index:
    3;

  width:
    100%;

  min-height:
    49px;

  padding-top:
    13px;

  padding-bottom:
    13px;

  font-family:
    var(--font-body);

  font-size:
    0.94rem;

  font-weight:
    500;

  color:
    var(--login-heading);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fcfdff 100%
    );

  border:
    1.5px solid var(--login-border);

  border-radius:
    var(--login-input-radius);

  transition:
    border-color var(--login-transition-fast),
    box-shadow var(--login-transition-fast),
    background var(--login-transition-fast),
    transform var(--login-transition-fast),
    padding var(--login-transition-fast);
}

#texto input:hover,
#digitesen input:hover {
  border-color:
    var(--login-border-hover);

  box-shadow:
    var(--login-shadow-input);
}

#texto input:focus,
#digitesen input:focus {
  border-color:
    var(--login-accent);

  background:
    #ffffff;

  box-shadow:
    inset 0 0 0 1px rgba(61, 99, 224, 0.05),
    0 0 0 3px rgba(61, 99, 224, 0.11),
    0 12px 26px rgba(61, 99, 224, 0.055);

  outline:
    none;

  transform:
    translateY(-1px);
}

#texto input::placeholder,
#digitesen input::placeholder {
  color:
    var(--login-placeholder);

  transition:
    opacity var(--login-transition-fast),
    transform var(--login-transition-fast);
}

#texto input:focus::placeholder,
#digitesen input:focus::placeholder {
  opacity:
    0.54;

  transform:
    translateX(3px);
}

/* ============================================================
   ICONE USUARIO
   ============================================================ */

#texto input {
  padding-left:
    46px;

  background-repeat:
    no-repeat;

  background-position:
    15px center;

  background-size:
    18px 18px;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d63e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");

  transition:
    background-position var(--login-transition-fast);
}

#texto input:focus {
  background-position:
    17px center;
}

/* ============================================================
   ICONE SENHA
   ============================================================ */

#digitesen input {
  padding-left:
    46px;

  padding-right:
    52px;

  background-repeat:
    no-repeat;

  background-position:
    15px center;

  background-size:
    18px 18px;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d63e0' 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 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");

  transition:
    background-position var(--login-transition-fast);
}

#digitesen input:focus {
  background-position:
    17px center;
}

/* ============================================================
   BOTAO OLHO
   ============================================================ */

.password-toggle {
  position:
    absolute;

  right:
    10px;

  top:
    50%;

  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    none;

  border-radius:
    9px;

  background:
    transparent;

  color:
    var(--login-placeholder);

  cursor:
    pointer;

  transform:
    translateY(-50%);

  z-index:
    10;

  pointer-events:
    auto;

  transition:
    color var(--login-transition-fast),
    background var(--login-transition-fast),
    transform var(--login-transition-fast),
    box-shadow var(--login-transition-fast);
}

.password-toggle:hover {
  color:
    var(--login-accent);

  background:
    var(--login-accent-soft);

  box-shadow:
    0 0 0 4px rgba(61, 99, 224, 0.05);
}

.password-toggle:active {
  transform:
    translateY(-50%)
    scale(0.93);
}

.password-toggle:focus-visible {
  outline:
    2px solid var(--login-accent);

  outline-offset:
    2px;
}

.password-toggle svg {
  width:
    19px;

  height:
    19px;

  pointer-events:
    none;

  transition:
    transform var(--login-transition-fast),
    opacity var(--login-transition-fast);
}

.password-toggle.is-visible {
  color:
    var(--login-accent);
}

.password-toggle.is-visible svg {
  transform:
    scale(1.06);
}

/* ============================================================
   CHECKBOX / SWITCH
   ============================================================ */

#checkbox {
  grid-column:
    1;

  grid-row:
    5;

  align-self:
    center;

  display:
    flex;

  align-items:
    center;

  margin:
    0;
}

#checkbox input[type="checkbox"] {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}

#checkbox label {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  margin:
    0;

  color:
    var(--login-muted);

  font-size:
    0.84rem;

  line-height:
    1.3;

  font-weight:
    500;

  cursor:
    pointer;
}

.remember-switch {
  position:
    relative;

  width:
    33px;

  height:
    18px;

  flex:
    0 0 33px;

  border-radius:
    999px;

  background:
    #d7ddea;

  box-shadow:
    inset 0 0 0 1px rgba(16, 24, 40, 0.06);

  transition:
    background var(--login-transition-base),
    box-shadow var(--login-transition-base);
}

.remember-switch-thumb {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    12px;

  height:
    12px;

  border-radius:
    50%;

  background:
    #ffffff;

  box-shadow:
    0 2px 5px rgba(16, 24, 40, 0.14);

  transition:
    transform var(--login-transition-base);
}

#checkbox input[type="checkbox"]:checked
  + label
  .remember-switch {
  background:
    var(--login-accent);

  box-shadow:
    0 0 0 3px rgba(61, 99, 224, 0.08);
}

#checkbox input[type="checkbox"]:checked
  + label
  .remember-switch-thumb {
  transform:
    translateX(15px);
}

#checkbox input[type="checkbox"]:focus-visible
  + label
  .remember-switch {
  outline:
    2px solid rgba(61, 99, 224, 0.32);

  outline-offset:
    3px;
}

.remember-text {
  white-space:
    nowrap;
}

/* ============================================================
   ESQUECI SENHA
   ============================================================ */

#esqueci {
  grid-column:
    2;

  grid-row:
    5;

  align-self:
    center;

  text-align:
    right;
}

#esqueci a {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  font-size:
    0.84rem;

  font-weight:
    700;

  color:
    var(--login-accent);

  text-decoration:
    none;

  transition:
    color var(--login-transition-fast),
    transform var(--login-transition-fast);
}

#esqueci a span {
  transition:
    transform var(--login-transition-fast);
}

#esqueci a::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -3px;

  width:
    100%;

  height:
    1px;

  background:
    currentColor;

  transform:
    scaleX(0);

  transform-origin:
    right;

  transition:
    transform var(--login-transition-fast);
}

#esqueci a:hover {
  color:
    var(--login-accent-hover);

  text-decoration:
    none;

  transform:
    translateX(1px);
}

#esqueci a:hover span {
  transform:
    translateX(3px);
}

#esqueci a:hover::after {
  transform:
    scaleX(1);

  transform-origin:
    left;
}

#esqueci a:focus-visible {
  outline:
    2px solid var(--login-accent);

  outline-offset:
    4px;

  border-radius:
    3px;
}

/* ============================================================
   MENSAGEM INLINE
   ============================================================ */

.login-message {
  grid-column:
    1 / -1;

  grid-row:
    6;

  min-height:
    0;

  margin-top:
    6px;

  margin-bottom:
    0;

  padding:
    0 2px;

  font-size:
    0.78rem;

  line-height:
    1.45;

  font-weight:
    600;

  color:
    transparent;

  opacity:
    0;

  transform:
    translateY(-3px);

  transition:
    opacity var(--login-transition-base),
    transform var(--login-transition-base),
    color var(--login-transition-base);
}

.login-message.error,
.login-message.success {
  opacity:
    1;

  transform:
    translateY(0);

  min-height:
    20px;
}

.login-message.error {
  color:
    var(--login-danger);
}

.login-message.success {
  color:
    var(--login-success);
}

/* ============================================================
   BOTAO ENTRAR
   ============================================================ */

#btnEntrar {
  grid-column:
    1 / -1;

  grid-row:
    7;

  margin-top:
    19px;
}

#btnEntrar button {
  position:
    relative;

  width:
    100%;

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    14px 18px;

  overflow:
    hidden;

  font-family:
    var(--font-body);

  font-size:
    0.96rem;

  font-weight:
    800;

  letter-spacing:
    0.005em;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--login-accent) 0%,
      var(--login-blue-start) 52%,
      #4c7cf1 100%
    );

  border:
    none;

  border-radius:
    var(--login-button-radius);

  cursor:
    pointer;

  box-shadow:
    var(--login-shadow-button);

  transition:
    transform var(--login-transition-fast),
    box-shadow var(--login-transition-fast),
    filter var(--login-transition-fast),
    background var(--login-transition-base);
}

#btnEntrar button::before {
  content:
    "";

  width:
    18px;

  height:
    18px;

  flex-shrink:
    0;

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    contain;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}

#btnEntrar button::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    -65%;

  width:
    34%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.28),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left 700ms cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events:
    none;
}

#btnEntrar button:hover {
  filter:
    brightness(1.035);

  transform:
    translateY(-2px);

  box-shadow:
    0 17px 36px rgba(61, 99, 224, 0.29);
}

#btnEntrar button:hover::after {
  left:
    125%;
}

#btnEntrar button:active {
  transform:
    translateY(0)
    scale(0.995);
}

#btnEntrar button:focus-visible {
  outline:
    2px solid var(--login-accent);

  outline-offset:
    3px;
}

#btnEntrar button:disabled {
  opacity:
    0.78;

  cursor:
    wait;

  transform:
    none;
}

/* ============================================================
   BOTAO - LOADING
   ============================================================ */

#btnEntrar button.is-loading {
  pointer-events:
    none;

  color:
    transparent;
}

#btnEntrar button.is-loading::before {
  width:
    18px;

  height:
    18px;

  background:
    transparent;

  border:
    2px solid rgba(255, 255, 255, 0.3);

  border-top-color:
    #ffffff;

  border-radius:
    50%;

  animation:
    login-button-spinner
    700ms
    linear
    infinite;
}

#btnEntrar button.is-loading::after {
  display:
    none;
}

@keyframes login-button-spinner {
  to {
    transform:
      rotate(360deg);
  }
}

/* ============================================================
   BOTAO - SUCESSO
   ============================================================ */

#btnEntrar button.is-success {
  background:
    linear-gradient(
      135deg,
      #12b76a 0%,
      #0e9f5c 100%
    );

  box-shadow:
    0 14px 28px rgba(18, 183, 106, 0.22);

  pointer-events:
    none;
}

#btnEntrar button.is-success::before {
  width:
    18px;

  height:
    18px;

  background:
    transparent;

  border:
    2px solid #ffffff;

  border-radius:
    50%;

  position:
    relative;
}

#btnEntrar button.is-success::after {
  display:
    none;
}

/* ============================================================
   INDICADOR DE SEGURANCA
   ============================================================ */

.login-security {
  grid-column:
    1 / -1;

  grid-row:
    8;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    16px;

  color:
    var(--login-placeholder);

  font-size:
    0.72rem;

  font-weight:
    600;

  letter-spacing:
    0.01em;
}

.security-dot {
  width:
    6px;

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    var(--login-success);

  box-shadow:
    0 0 0 3px rgba(18, 183, 106, 0.08);
}

/* ============================================================
   SEPARADOR
   ============================================================ */

#ou {
  grid-row:
    4;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding-top:
    28px;

  padding-bottom:
    40px;

  color:
    var(--login-placeholder);

  font-size:
    0.76rem;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;
}

#ou::before,
#ou::after {
  content:
    "";

  flex:
    1;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--login-border)
    );
}

#ou::after {
  background:
    linear-gradient(
      90deg,
      var(--login-border),
      transparent
    );
}

/* ============================================================
   ESTADOS DE ERRO
   ============================================================ */

.login-wrapper input[aria-invalid="true"] {
  border-color:
    rgba(240, 68, 56, 0.68);

  box-shadow:
    0 0 0 3px rgba(240, 68, 56, 0.08);
}

.login-wrapper input[aria-invalid="true"]:focus {
  border-color:
    var(--login-danger);

  box-shadow:
    0 0 0 3px rgba(240, 68, 56, 0.1);
}

.login-form.is-error {
  /* Mantem o formulario visivel quando a animacao de entrada e substituida pelo shake. */
  opacity:
    1;

  transform:
    translateY(0);

  animation:
    login-form-error
    420ms
    ease;
}

.login-form.is-error #texto input,
.login-form.is-error #digitesen input {
  border-color:
    rgba(240, 68, 56, 0.68);

  box-shadow:
    0 0 0 3px rgba(240, 68, 56, 0.07);
}

@keyframes login-form-error {
  0%,
  100% {
    transform:
      translateX(0);
  }

  20% {
    transform:
      translateX(-6px);
  }

  40% {
    transform:
      translateX(5px);
  }

  60% {
    transform:
      translateX(-3px);
  }

  80% {
    transform:
      translateX(2px);
  }
}

/* ============================================================
   RECUPERACAO DE SENHA
   ============================================================ */

body:has(#formEsqueciSenha) {
  padding:
    28px 16px;
}

body:has(#formEsqueciSenha) .login-wrapper {
  max-width:
    480px;
}

body:has(#formEsqueciSenha) .login-card {
  display:
    block;

  min-height:
    auto;

  max-width:
    480px;
}

body:has(#formEsqueciSenha) .login-card::before {
  display:
    none;
}

body:has(#formEsqueciSenha) #imagem,
body:has(#formEsqueciSenha) #mensagem2,
body:has(#formEsqueciSenha) #mensagem3 {
  display:
    none;
}

body:has(#formEsqueciSenha) #title,
body:has(#formEsqueciSenha) #subtitle,
body:has(#formEsqueciSenha) .login-form,
body:has(#formEsqueciSenha) #ou {
  width:
    100%;

  padding-left:
    40px;

  padding-right:
    40px;
}

body:has(#formEsqueciSenha) #title {
  padding-top:
    40px;
}

body:has(#formEsqueciSenha) #subtitle {
  padding-bottom:
    24px;
}

body:has(#formEsqueciSenha) .login-form {
  padding-bottom:
    10px;
}

body:has(#formEsqueciSenha) #texto {
  margin-bottom:
    18px;
}

body:has(#formEsqueciSenha) #texto input {
  padding-left:
    15px;

  background-image:
    none;
}

body:has(#formEsqueciSenha) #btnEntrar {
  margin-top:
    8px;
}

body:has(#formEsqueciSenha) #ou {
  padding-top:
    20px;

  padding-bottom:
    28px;
}

body:has(#formEsqueciSenha) .login-security {
  display:
    none;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 860px) {
  body:has(.login-wrapper) {
    align-items:
      flex-start;

    padding:
      24px 16px;
  }

  .login-wrapper {
    max-width:
      680px;
  }

  .login-card {
    grid-template-columns:
      1fr;

    min-height:
      auto;
  }

  .login-card::before {
    width:
      100%;

    height:
      350px;
  }

  #imagem,
  #mensagem2,
  #mensagem3,
  #title,
  #subtitle,
  .login-form,
  #ou {
    grid-column:
      1;
  }

  #imagem {
    grid-row:
      1;

    height:
      145px;
  }

  #imagem img {
    width:
      80px;

    height:
      80px;

    min-width:
      80px;

    min-height:
      80px;

    max-width:
      80px;

    max-height:
      80px;
  }

  #imagem::before {
    width:
      138px;

    height:
      138px;
  }

  #imagem::after {
    width:
      108px;

    height:
      108px;
  }

  #mensagem2 {
    grid-row:
      2;

    padding:
      0 28px 8px;
  }

  #mensagem2 label {
    font-size:
      1.42rem;
  }

  #mensagem3 {
    grid-row:
      3;

    padding:
      0 30px 30px;
  }

  #mensagem3 label {
    font-size:
      0.9rem;
  }

  #title {
    grid-row:
      4;

    padding:
      34px 32px 4px;
  }

  #subtitle {
    grid-row:
      5;

    padding:
      0 32px 22px;
  }

  .login-form {
    grid-row:
      6;

    padding:
      0 32px;
  }

  #ou {
    grid-row:
      7;

    padding:
      22px 32px 34px;
  }

  .login-security {
    margin-bottom:
      4px;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {
  body:has(.login-wrapper) {
    align-items:
      flex-start;

    padding:
      16px 10px;
  }

  .login-wrapper::before {
    top:
      -34px;

    right:
      -22px;

    width:
      90px;

    height:
      90px;

    background-size:
      13px 13px;
  }

  .login-wrapper::after {
    left:
      -18px;

    bottom:
      -32px;

    width:
      90px;

    height:
      90px;

    background-size:
      13px 13px;
  }

  .login-card {
    width:
      100%;

    border-radius:
      22px;

    box-shadow:
      0 28px 68px rgba(47, 95, 222, 0.14),
      0 8px 24px rgba(16, 24, 40, 0.06);
  }

  .login-card::before {
    height:
      292px;
  }

  #imagem {
    height:
      126px;
  }

  #imagem img {
    width:
      74px;

    height:
      74px;

    min-width:
      74px;

    min-height:
      74px;

    max-width:
      74px;

    max-height:
      74px;

    padding:
      0;
  }

  #imagem::before {
    width:
      126px;

    height:
      126px;
  }

  #imagem::after {
    width:
      100px;

    height:
      100px;
  }

  #mensagem2 {
    padding:
      0 20px 6px;
  }

  #mensagem2 label {
    font-size:
      1.25rem;
  }

  #mensagem3 {
    padding:
      0 22px 24px;
  }

  #mensagem3 label {
    font-size:
      0.86rem;

    line-height:
      1.6;
  }

  #title {
    padding:
      28px 20px 2px;
  }

  #title h1 {
    font-size:
      1.58rem;
  }

  #subtitle {
    padding:
      0 20px 20px;
  }

  #subtitle h2 {
    font-size:
      0.88rem;
  }

  .login-form {
    padding:
      0 20px;
  }

  #usuario label,
  #senha label {
    font-size:
      0.84rem;
  }

  #texto input,
  #digitesen input {
    min-height:
      48px;

    font-size:
      0.91rem;
  }

  #checkbox label,
  #esqueci a {
    font-size:
      0.8rem;
  }

  #btnEntrar {
    margin-top:
      18px;
  }

  #btnEntrar button {
    min-height:
      49px;

    font-size:
      0.93rem;
  }

  .login-security {
    margin-top:
      13px;

    font-size:
      0.69rem;
  }

  #ou {
    padding:
      18px 20px 26px;

    font-size:
      0.7rem;
  }
}

/* ============================================================
   CELULARES PEQUENOS
   ============================================================ */

@media (max-width: 400px) {
  body:has(.login-wrapper) {
    padding:
      10px 8px;
  }

  .login-card {
    border-radius:
      18px;
  }

  .login-card::before {
    height:
      278px;
  }

  #imagem {
    height:
      116px;
  }

  #imagem img {
    width:
      68px;

    height:
      68px;

    min-width:
      68px;

    min-height:
      68px;

    max-width:
      68px;

    max-height:
      68px;
  }

  #imagem::before {
    width:
      116px;

    height:
      116px;
  }

  #imagem::after {
    width:
      94px;

    height:
      94px;
  }

  #mensagem2 label {
    font-size:
      1.16rem;
  }

  #mensagem3 {
    padding-bottom:
      20px;
  }

  #title {
    padding-top:
      24px;
  }

  #title h1 {
    font-size:
      1.46rem;
  }

  #subtitle h2 {
    font-size:
      0.84rem;
  }

  #checkbox label,
  #esqueci a {
    font-size:
      0.76rem;
  }

  #btnEntrar button {
    min-height:
      47px;
  }

  .remember-switch {
    width:
      30px;

    flex-basis:
      30px;
  }

  .remember-switch-thumb {
    width:
      12px;

    height:
      12px;
  }

  #checkbox input[type="checkbox"]:checked
    + label
    .remember-switch-thumb {
    transform:
      translateX(12px);
  }
}

/* ============================================================
   DISPOSITIVOS SEM MOUSE
   ============================================================ */

@media (pointer: coarse) {
  .login-form::before {
    display:
      none;
  }

  #btnEntrar button:hover {
    filter:
      none;

    transform:
      none;

    box-shadow:
      var(--login-shadow-button);
  }

  #btnEntrar button:hover::after {
    left:
      -65%;
  }
}

/* ============================================================
   REDUCAO DE MOVIMENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  body:has(.login-wrapper)::before,
  body:has(.login-wrapper)::after,
  .login-wrapper::before,
  .login-wrapper::after,
  .login-card,
  #imagem::before,
  #imagem img,
  #mensagem2 label,
  #mensagem3 label,
  #title,
  #subtitle,
  .login-form,
  #title h1::after,
  #btnEntrar button::after,
  #texto::before,
  #digitesen::before,
  #texto::after,
  #digitesen::after,
  .login-form.is-error {
    animation:
      none !important;

    transition:
      none !important;
  }

  .login-card {
    opacity:
      1;

    transform:
      none;
  }

  #imagem img,
  #mensagem2 label,
  #mensagem3 label,
  #title,
  #subtitle,
  .login-form {
    opacity:
      1;

    transform:
      none;
  }
}/* ============================================================
   STATUS VISUAL DOS CAMPOS
   ============================================================ */

.field-status {
  position:
    absolute;

  right:
    13px;

  top:
    50%;

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #d0d5dd;

  opacity:
    0;

  transform:
    translateY(-50%)
    scale(0.5);

  pointer-events:
    none;

  z-index:
    8;

  transition:
    opacity var(--login-transition-base),
    transform var(--login-transition-base),
    background var(--login-transition-base),
    box-shadow var(--login-transition-base);
}

#texto:focus-within .field-status,
#digitesen:focus-within .field-status,
#texto.is-typing .field-status,
#digitesen.is-typing .field-status,
#texto.is-filled .field-status,
#digitesen.is-filled .field-status,
#texto.is-valid .field-status,
#digitesen.is-valid .field-status,
#texto.is-invalid .field-status,
#digitesen.is-invalid .field-status {
  opacity:
    1;

  transform:
    translateY(-50%)
    scale(1);
}

/* ============================================================
   STATUS - DIGITANDO
   ============================================================ */

#texto.is-typing .field-status,
#digitesen.is-typing .field-status {
  background:
    var(--login-accent);

  box-shadow:
    0 0 0 3px rgba(61, 99, 224, 0.08),
    0 0 9px rgba(61, 99, 224, 0.22);

  animation:
    login-field-status-pulse
    1.6s
    ease-in-out
    infinite;
}

/* ============================================================
   STATUS - PREENCHIDO
   ============================================================ */

#texto.is-filled .field-status,
#digitesen.is-filled .field-status {
  background:
    var(--login-accent);
}

/* ============================================================
   STATUS - VALIDO
   ============================================================ */

#texto.is-valid .field-status,
#digitesen.is-valid .field-status {
  background:
    var(--login-success);

  box-shadow:
    0 0 0 3px rgba(18, 183, 106, 0.08),
    0 0 8px rgba(18, 183, 106, 0.2);

  animation:
    login-field-status-success
    350ms
    cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes login-field-status-success {
  0% {
    transform:
      translateY(-50%)
      scale(0.55);
  }

  65% {
    transform:
      translateY(-50%)
      scale(1.18);
  }

  100% {
    transform:
      translateY(-50%)
      scale(1);
  }
}

/* ============================================================
   STATUS - INVALIDO
   ============================================================ */

#texto.is-invalid .field-status,
#digitesen.is-invalid .field-status {
  background:
    var(--login-danger);

  box-shadow:
    0 0 0 3px rgba(240, 68, 56, 0.07),
    0 0 8px rgba(240, 68, 56, 0.16);
}

/* ============================================================
   CAMPO VALIDO
   ============================================================ */

#texto.is-valid input,
#digitesen.is-valid input {
  border-color:
    rgba(18, 183, 106, 0.42);
}

#texto.is-valid input:focus,
#digitesen.is-valid input:focus {
  border-color:
    rgba(18, 183, 106, 0.62);

  box-shadow:
    inset 0 0 0 1px rgba(18, 183, 106, 0.04),
    0 0 0 3px rgba(18, 183, 106, 0.08),
    0 12px 26px rgba(18, 183, 106, 0.045);
}

/* ============================================================
   CAMPO INVALIDO
   ============================================================ */

#texto.is-invalid input,
#digitesen.is-invalid input {
  border-color:
    rgba(240, 68, 56, 0.58);

  box-shadow:
    0 0 0 3px rgba(240, 68, 56, 0.06);
}

#texto.is-invalid input:focus,
#digitesen.is-invalid input:focus {
  border-color:
    var(--login-danger);

  box-shadow:
    inset 0 0 0 1px rgba(240, 68, 56, 0.04),
    0 0 0 3px rgba(240, 68, 56, 0.08),
    0 12px 26px rgba(240, 68, 56, 0.045);
}

/* ============================================================
   STATUS PULSANDO
   ============================================================ */

@keyframes login-field-status-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(61, 99, 224, 0.06),
      0 0 7px rgba(61, 99, 224, 0.14);
  }

  50% {
    box-shadow:
      0 0 0 4px rgba(61, 99, 224, 0.09),
      0 0 11px rgba(61, 99, 224, 0.24);
  }
}

/* ============================================================
   ESTADO GLOBAL DE LOADING
   ============================================================ */

.login-form.is-loading {
  pointer-events:
    none;
}

.login-form.is-loading #texto input,
.login-form.is-loading #digitesen input {
  opacity:
    0.74;
}

.login-form.is-loading .password-toggle {
  opacity:
    0.5;
}

/* ============================================================
   BOTAO DE SUCESSO
   ============================================================ */

#btnEntrar button.is-success {
  background:
    linear-gradient(
      135deg,
      #12b76a 0%,
      #0e9f5c 100%
    );

  box-shadow:
    0 14px 30px rgba(18, 183, 106, 0.22);

  color:
    #ffffff;

  pointer-events:
    none;

  animation:
    login-success-pop
    350ms
    cubic-bezier(0.16, 1, 0.3, 1);
}

#btnEntrar button.is-success::before {
  width:
    18px;

  height:
    18px;

  background:
    transparent;

  border:
    2px solid #ffffff;

  border-radius:
    50%;

  background-image:
    none;
}

#btnEntrar button.is-success::after {
  display:
    none;
}

@keyframes login-success-pop {
  0% {
    transform:
      scale(0.98);
  }

  65% {
    transform:
      scale(1.015);
  }

  100% {
    transform:
      scale(1);
  }
}

/* ============================================================
   REDUCAO DE MOVIMENTO - STATUS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  #texto.is-typing .field-status,
  #digitesen.is-typing .field-status,
  #texto.is-valid .field-status,
  #digitesen.is-valid .field-status,
  #btnEntrar button.is-success {
    animation:
      none !important;
  }
}