: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;

    }

  }