:root {

    --primary:
      #183b5b;

    --primary-dark:
      #102d47;

    --primary-soft:
      #eaf0f5;

    --accent:
      #c59a45;

    --background:
      #f4f6f8;

    --surface:
      #ffffff;

    --text:
      #1d2935;

    --text-soft:
      #687685;

    --border:
      #dce3e8;

    --danger:
      #b42318;

    --danger-bg:
      #fef3f2;

    --success:
      #177245;

    --success-bg:
      #edf8f2;

    --shadow:
      0 24px 60px
      rgba(16, 45, 71, 0.12);

  }


  * {
    box-sizing:
      border-box;

    margin:
      0;

    padding:
      0;
  }


  html,
  body {

    min-height:
      100%;

  }


  body {

    min-height:
      100vh;

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

    color:
      var(--text);

    background:
      var(--background);

    -webkit-font-smoothing:
      antialiased;

  }


  button,
  input {

    font:
      inherit;

  }


  button {

    border:
      0;

  }


  .login-page {

    min-height:
      100vh;

    display:
      grid;

    grid-template-columns:
      minmax(380px, 0.85fr)
      minmax(500px, 1.15fr);

  }


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


  .login-brand {

    position:
      relative;

    min-height:
      100vh;

    display:
      flex;

    flex-direction:
      column;

    justify-content:
      space-between;

    padding:
      clamp(42px, 6vw, 84px);

    overflow:
      hidden;

    color:
      white;

    background:
      linear-gradient(
        145deg,
        var(--primary-dark) 0%,
        var(--primary) 60%,
        #234f72 100%
      );

  }


  .login-brand::before {

    content:
      "";

    position:
      absolute;

    width:
      520px;

    height:
      520px;

    top:
      -230px;

    right:
      -230px;

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

    border-radius:
      50%;

  }


  .login-brand::after {

    content:
      "";

    position:
      absolute;

    width:
      340px;

    height:
      340px;

    bottom:
      -180px;

    left:
      -130px;

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

    border-radius:
      50%;

  }


  .brand-content {

    position:
      relative;

    z-index:
      1;

    max-width:
      470px;

    margin-top:
      8vh;

  }


  .brand-badge {

    width:
      72px;

    height:
      72px;

    display:
      grid;

    place-items:
      center;

    margin-bottom:
      34px;

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

    border-radius:
      20px;

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

    box-shadow:
      inset 0 1px 0
      rgba(255,255,255,.16);

    font-size:
      22px;

    font-weight:
      750;

    letter-spacing:
      .08em;

  }


  .brand-title {

    display:
      flex;

    flex-direction:
      column;

    margin-bottom:
      28px;

    line-height:
      .95;

  }


  .brand-title span {

    font-size:
      clamp(
        28px,
        4vw,
        46px
      );

    font-weight:
      300;

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

  }


  .brand-title strong {

    margin-top:
      9px;

    font-size:
      clamp(
        42px,
        6vw,
        68px
      );

    font-weight:
      700;

    letter-spacing:
      -.035em;

  }


  .brand-description {

    max-width:
      430px;

    font-size:
      17px;

    line-height:
      1.7;

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

  }


  .brand-divider {

    width:
      56px;

    height:
      3px;

    margin:
      34px 0 20px;

    border-radius:
      20px;

    background:
      var(--accent);

  }


  .brand-professor {

    font-size:
      15px;

    font-weight:
      600;

    letter-spacing:
      .015em;

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

  }


  .brand-footer {

    position:
      relative;

    z-index:
      1;

    display:
      flex;

    align-items:
      center;

    gap:
      10px;

    font-size:
      12px;

    letter-spacing:
      .08em;

    text-transform:
      uppercase;

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

  }


  .brand-dot {

    width:
      4px;

    height:
      4px;

    border-radius:
      50%;

    background:
      var(--accent);

  }


  /* ======================================================
     ÁREA DE LOGIN
     ====================================================== */


  .login-area {

    min-height:
      100vh;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    padding:
      42px;

    background:
      var(--surface);

  }


  .login-wrapper {

    width:
      min(100%, 440px);

  }


  .mobile-brand {

    display:
      none;

  }


  .login-heading {

    margin-bottom:
      38px;

  }


  .login-eyebrow {

    display:
      block;

    margin-bottom:
      12px;

    font-size:
      11px;

    font-weight:
      750;

    letter-spacing:
      .16em;

    color:
      var(--accent);

  }


  .login-heading h1 {

    margin-bottom:
      12px;

    font-size:
      clamp(
        34px,
        5vw,
        44px
      );

    line-height:
      1.05;

    letter-spacing:
      -.035em;

    color:
      var(--primary-dark);

  }


  .login-heading p {

    max-width:
      370px;

    font-size:
      15px;

    line-height:
      1.6;

    color:
      var(--text-soft);

  }


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


  .login-form {

    display:
      flex;

    flex-direction:
      column;

    gap:
      23px;

  }


  .form-group {

    display:
      flex;

    flex-direction:
      column;

    gap:
      9px;

  }


  .label-row {

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

  }


  .form-group label {

    font-size:
      13px;

    font-weight:
      650;

    color:
      #354454;

  }


  .input-wrapper {

    position:
      relative;

    display:
      flex;

    align-items:
      center;

  }


  .input-icon {

    position:
      absolute;

    left:
      16px;

    width:
      20px;

    height:
      20px;

    color:
      #85919d;

    pointer-events:
      none;

  }


  .input-icon svg {

    width:
      100%;

    height:
      100%;

  }


  .input-wrapper input {

    width:
      100%;

    height:
      54px;

    padding:
      0 50px;

    outline:
      none;

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

    border-radius:
      11px;

    background:
      #fbfcfd;

    color:
      var(--text);

    font-size:
      15px;

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

  }


  .input-wrapper input:hover {

    border-color:
      #c7d1d9;

  }


  .input-wrapper input:focus {

    border-color:
      var(--primary);

    background:
      white;

    box-shadow:
      0 0 0 4px
      rgba(
        24,
        59,
        91,
        .08
      );

  }


  .input-wrapper input::placeholder {

    color:
      #a5afb8;

  }


  .input-wrapper input:disabled {

    opacity:
      .65;

    cursor:
      wait;

  }


  .password-toggle {

    position:
      absolute;

    right:
      13px;

    width:
      36px;

    height:
      36px;

    display:
      grid;

    place-items:
      center;

    border-radius:
      8px;

    cursor:
      pointer;

    color:
      #7c8994;

    background:
      transparent;

  }


  .password-toggle:hover {

    background:
      #eef2f5;

    color:
      var(--primary);

  }


  .password-toggle svg {

    width:
      20px;

    height:
      20px;

  }


  /* ======================================================
     BOTÃO
     ====================================================== */


  .btn-primary {

    width:
      100%;

    height:
      54px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    gap:
      11px;

    margin-top:
      3px;

    border-radius:
      11px;

    cursor:
      pointer;

    background:
      var(--primary);

    color:
      white;

    font-weight:
      700;

    font-size:
      15px;

    box-shadow:
      0 8px 22px
      rgba(
        24,
        59,
        91,
        .18
      );

    transition:
      transform .16s ease,
      background .16s ease,
      box-shadow .16s ease;

  }


  .btn-primary:hover {

    background:
      var(--primary-dark);

    transform:
      translateY(-1px);

    box-shadow:
      0 11px 26px
      rgba(
        24,
        59,
        91,
        .23
      );

  }


  .btn-primary:active {

    transform:
      translateY(0);

  }


  .btn-primary:disabled {

    cursor:
      wait;

    opacity:
      .8;

    transform:
      none;

  }


  /* ======================================================
     MENSAGENS
     ====================================================== */


  .login-message {

    display:
      none;

    padding:
      12px 14px;

    border-radius:
      9px;

    font-size:
      13px;

    line-height:
      1.45;

  }


  .login-message.erro {

    display:
      block;

    border:
      1px solid
      #f5c9c5;

    background:
      var(--danger-bg);

    color:
      var(--danger);

  }


  .login-message.sucesso {

    display:
      block;

    border:
      1px solid
      #c4e6d3;

    background:
      var(--success-bg);

    color:
      var(--success);

  }


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


  .login-footer {

    margin-top:
      36px;

    padding-top:
      26px;

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

    text-align:
      center;

  }


  .login-footer p {

    margin-bottom:
      5px;

    font-size:
      13px;

    font-weight:
      700;

    color:
      #41505e;

  }


  .login-footer span {

    font-size:
      12px;

    line-height:
      1.5;

    color:
      var(--text-soft);

  }


  /* ======================================================
     SPINNER
     ====================================================== */


  .spinner {

    width:
      18px;

    height:
      18px;

    border:
      2px solid
      rgba(255,255,255,.38);

    border-top-color:
      white;

    border-radius:
      50%;

    animation:
      girar .7s linear infinite;

  }


  .hidden {

    display:
      none !important;

  }


  @keyframes girar {

    to {
      transform:
        rotate(360deg);
    }

  }


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


  @media (
    max-width: 820px
  ) {

    .login-page {

      display:
        block;

    }


    .login-brand {

      display:
        none;

    }


    .login-area {

      min-height:
        100vh;

      align-items:
        flex-start;

      padding:
        34px 24px;

    }


    .login-wrapper {

      width:
        100%;

      max-width:
        440px;

      margin:
        0 auto;

    }


    .mobile-brand {

      display:
        flex;

      align-items:
        center;

      gap:
        12px;

      margin-bottom:
        64px;

      color:
        var(--primary);

    }


    .mobile-brand-icon {

      width:
        46px;

      height:
        46px;

      display:
        grid;

      place-items:
        center;

      border-radius:
        12px;

      background:
        var(--primary);

      color:
        white;

      font-size:
        14px;

      font-weight:
        750;

      letter-spacing:
        .06em;

    }


    .mobile-brand div:last-child {

      display:
        flex;

      flex-direction:
        column;

      font-size:
        15px;

      line-height:
        1.05;

    }


    .mobile-brand span {

      color:
        var(--text-soft);

    }


    .mobile-brand strong {

      margin-top:
        3px;

      font-size:
        18px;

      color:
        var(--primary-dark);

    }

  }


  @media (
    max-width: 480px
  ) {

    .login-area {

      padding:
        26px 19px 32px;

    }


    .mobile-brand {

      margin-bottom:
        52px;

    }


    .login-heading {

      margin-bottom:
        32px;

    }


    .login-heading h1 {

      font-size:
        36px;

    }


    .input-wrapper input,
    .btn-primary {

      height:
        52px;

    }

  }

/* ============================================================
   LOGIN V2 — ENGENHARIA / SISTEMA ACADÊMICO
   Somente apresentação visual. IDs e fluxo de autenticação
   permanecem inalterados.
   ============================================================ */

.login-page-v2 {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(430px, 46%) 1fr;
  overflow: hidden;
  background: #f7f9fc;
}


.login-brand-v2 {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(46px, 7vh, 76px) clamp(42px, 6vw, 92px) 34px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(47, 117, 225, .30), transparent 29%),
    linear-gradient(145deg, #061f4a 0%, #073170 56%, #073d8e 100%);
}


.login-brand-v2::before {
  content: "";
  position: absolute;
  width: 470px;
  height: 470px;
  right: -250px;
  top: -210px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}


.login-brand-v2::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  right: -145px;
  top: -115px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
}


.login-brand-v2-glow {
  position: absolute;
  right: -80px;
  bottom: 150px;
  width: 360px;
  height: 360px;
  transform: rotate(45deg);
  border-radius: 68px;
  background: linear-gradient(
    135deg,
    rgba(55, 130, 244, .34),
    rgba(20, 76, 173, .05)
  );
}


.brand-content-v2 {
  position: relative;
  z-index: 3;
  width: min(100%, 520px);
}


.brand-badge-v2 {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 38px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 19px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: .04em;
}


.brand-title-v2 span {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  line-height: 1;
}


.brand-title-v2 strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: clamp(43px, 5vw, 66px);
  line-height: .98;
  letter-spacing: -.045em;
}


.brand-accent-v2 {
  width: 56px;
  height: 4px;
  margin: 31px 0 25px;
  border-radius: 99px;
  background: #d5a333;
}


.brand-description-v2 {
  width: min(100%, 430px);
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 15px;
  line-height: 1.75;
}


.brand-professor-wrap-v2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}


.brand-professor-icon-v2 {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 91, 205, .75);
  border: 1px solid rgba(255,255,255,.18);
}


.brand-professor-icon-v2 svg {
  width: 34px;
  height: 34px;
}


.brand-professor-wrap-v2 .brand-professor {
  margin: 0 0 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 760;
}


.brand-course-v2 {
  color: #55b5ff;
  font-size: 13px;
  font-weight: 600;
}


.engineering-art-v2 {
  position: absolute;
  z-index: 1;
  left: 0;
  right: -4%;
  bottom: 30px;
  height: 43%;
  pointer-events: none;
  color: #9cc7ff;
  opacity: .62;
}


.engineering-svg-v2 {
  width: 100%;
  height: 100%;
}


.brand-footer-v2 {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 60px;
  color: rgba(255,255,255,.66);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .14em;
}


.login-area-v2 {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(34px, 5vw, 76px);
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 14%, rgba(31, 89, 175, .05), transparent 27%),
    #fbfcfe;
}


.login-watermark-v2 {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  color: #0a4fa7;
  opacity: .025;
  font-size: clamp(190px, 23vw, 390px);
  font-weight: 900;
  letter-spacing: -.12em;
  user-select: none;
  pointer-events: none;
}


.login-wrapper-v2 {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  margin: 0;
}


.login-header-v2 {
  margin-bottom: 38px;
}


.login-heading-v2 .login-eyebrow {
  color: #c58a22;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .16em;
}


.login-heading-v2 h1 {
  margin: 12px 0 10px;
  color: #0d2b56;
  font-size: clamp(42px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -.045em;
}


.login-heading-v2 p {
  width: min(100%, 430px);
  margin: 0;
  color: #6d7d92;
  font-size: 15px;
  line-height: 1.65;
}


.login-form-v2 {
  display: grid;
  gap: 21px;
}


.login-form-v2 .form-group {
  margin: 0;
}


.login-form-v2 label {
  color: #102c52;
  font-size: 12px;
  font-weight: 760;
}


.input-wrapper-v2 {
  min-height: 60px;
  margin-top: 8px;
  border: 1px solid #d5dfea;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 rgba(14,45,86,.02);
}


.input-wrapper-v2:focus-within {
  border-color: #2364c8;
  box-shadow: 0 0 0 4px rgba(35,100,200,.08);
}


.input-wrapper-v2 input {
  min-height: 58px;
  color: #203b62;
  font-size: 14px;
}


.input-wrapper-v2 .input-icon,
.input-wrapper-v2 .password-toggle {
  color: #7b8fa6;
}


.btn-primary-v2 {
  position: relative;
  min-height: 62px;
  margin-top: 3px;
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      #0b55c7,
      #0750b8 58%,
      #073e94
    );
  box-shadow: 0 11px 25px rgba(8,71,166,.20);
  font-size: 14px;
  letter-spacing: .01em;
}


.btn-primary-v2:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(8,71,166,.26);
}


.login-arrow-v2 {
  position: absolute;
  right: 22px;
  font-size: 22px;
  font-weight: 400;
}


.btn-primary-v2 .spinner:not(.hidden) + .login-arrow-v2 {
  display: none;
}


.login-separator-v2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 13px;
  margin: 29px 0 21px;
}


.login-separator-v2 span {
  height: 1px;
  background: #e2e8ef;
}


.login-separator-v2 small {
  color: #8d99a7;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .11em;
}


.login-footer-v2 {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 18px 19px;
  border: 1px solid #dfe6ee;
  border-radius: 13px;
  background: rgba(255,255,255,.72);
  text-align: left;
}


.login-footer-icon-v2 {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0b55c7;
  background: #eef4fc;
}


.login-footer-icon-v2 svg {
  width: 23px;
  height: 23px;
}


.login-footer-v2 p {
  margin: 0 0 3px;
  color: #17345c;
  font-size: 12px;
  font-weight: 780;
}


.login-footer-v2 span {
  color: #708095;
  font-size: 11px;
  line-height: 1.5;
}


@media (max-width: 980px) {

  .login-page-v2 {
    grid-template-columns: minmax(330px, 40%) 1fr;
  }

  .login-brand-v2 {
    padding-left: 34px;
    padding-right: 34px;
  }

  .brand-title-v2 strong {
    font-size: 48px;
  }

}


@media (max-width: 760px) {

  .login-page-v2 {
    display: block;
    min-height: 100vh;
    background: #fbfcfe;
  }

  .login-brand-v2 {
    display: none;
  }

  .login-area-v2 {
    min-height: 100vh;
    padding: 28px 20px 36px;
  }

  .login-wrapper-v2 {
    width: min(100%, 500px);
  }

  .login-header-v2 {
    margin-bottom: 30px;
  }

  .login-header-v2 .mobile-brand {
    display: flex;
    margin-bottom: 38px;
  }

  .login-heading-v2 h1 {
    font-size: 42px;
  }

  .login-watermark-v2 {
    right: -90px;
    opacity: .018;
  }

}


@media (max-width: 420px) {

  .login-area-v2 {
    padding: 22px 16px 30px;
  }

  .login-heading-v2 h1 {
    font-size: 37px;
  }

  .input-wrapper-v2 {
    min-height: 56px;
  }

  .input-wrapper-v2 input {
    min-height: 54px;
  }

  .btn-primary-v2 {
    min-height: 58px;
  }

}

/* ============================================================
   FEEDBACK VISUAL — AÇÕES COM BACKEND
   ============================================================ */

button.acao-backend-processando {
  cursor:
    wait !important;

  opacity:
    .72;

  pointer-events:
    none;

  user-select:
    none;
}

button.acao-backend-processando:disabled {
  cursor:
    wait !important;
}