/* ========================================
   STR34M.vip
   LOGIN / REGISTRO
======================================== */

.auth-view {
  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px 16px;

  background:
    radial-gradient(
      circle at top,
      rgba(141, 77, 255, 0.22),
      transparent 38%
    ),
    #070814;
}


.auth-container {
  width: 100%;

  max-width: 420px;
}


/* ========================================
   MARCA
======================================== */

.auth-brand {
  text-align: center;

  margin-bottom: 26px;
}


.logo-placeholder {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 56px;

  padding: 0 22px;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #8d4dff,
      #5c2db8
    );

  color: #ffffff;

  font-size: 24px;

  font-weight: 900;

  letter-spacing: 0.5px;

  box-shadow:
    0 12px 35px
    rgba(141, 77, 255, 0.28);
}


.auth-brand p {
  margin: 12px 0 0;

  color: #b9b9c9;

  font-size: 14px;

  line-height: 1.5;
}


/* ========================================
   TARJETA
======================================== */

.auth-card {
  padding: 24px;

  border-radius: 22px;

  background:
    rgba(21, 22, 40, 0.96);

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

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.35);
}


.auth-card h1 {
  margin: 0 0 6px;

  color: #ffffff;

  font-size: 27px;

  text-align: center;
}


.auth-subtitle {
  margin: 0 0 24px;

  color: #b9b9c9;

  text-align: center;

  font-size: 14px;

  line-height: 1.5;
}


/* ========================================
   FORMULARIO
======================================== */

.auth-card form {
  display: flex;

  flex-direction: column;
}


.auth-card label {
  margin-bottom: 7px;

  color: #e6e6ef;

  font-size: 13px;

  font-weight: 700;
}


.auth-card input {
  width: 100%;

  height: 50px;

  margin-bottom: 17px;

  padding: 0 15px;

  border-radius: 13px;

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

  outline: none;

  background: #0f1020;

  color: #ffffff;

  font-size: 15px;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}


.auth-card input::placeholder {
  color: #707186;
}


.auth-card input:focus {
  border-color: #8d4dff;

  box-shadow:
    0 0 0 3px
    rgba(141, 77, 255, 0.12);
}


/* ========================================
   AYUDA
======================================== */

.form-help {
  margin:
    -5px
    0
    18px;

  padding: 11px 12px;

  border-radius: 11px;

  background:
    rgba(141, 77, 255, 0.08);

  color: #bfa6eb;

  font-size: 12px;

  line-height: 1.5;
}


/* ========================================
   BOTÓN PRINCIPAL
======================================== */

.auth-card .primary-btn {
  margin-top: 3px;

  min-height: 50px;

  border: none;

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      #8d4dff,
      #7537e8
    );

  color: #ffffff;

  font-size: 15px;

  font-weight: 800;

  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}


.auth-card .primary-btn:active {
  transform: scale(0.98);
}


.auth-card .primary-btn:disabled {
  opacity: 0.55;

  cursor: not-allowed;
}


/* ========================================
   CAMBIO LOGIN / REGISTRO
======================================== */

.auth-switch {
  margin:
    20px
    0
    0;

  text-align: center;

  color: #b9b9c9;

  font-size: 13px;
}


.link-btn {
  padding: 4px 6px;

  border: none;

  background: transparent;

  color: #a875ff;

  font-weight: 800;

  cursor: pointer;
}


/* ========================================
   MENSAJES
======================================== */

.auth-message {
  margin-bottom: 16px;

  padding: 11px 13px;

  border-radius: 11px;

  font-size: 13px;

  line-height: 1.4;
}


.auth-message.error {
  color: #ff9baa;

  background:
    rgba(255, 77, 103, 0.10);

  border:
    1px solid
    rgba(255, 77, 103, 0.18);
}


.auth-message.success {
  color: #82edc8;

  background:
    rgba(32, 201, 151, 0.10);

  border:
    1px solid
    rgba(32, 201, 151, 0.18);
}


/* ========================================
   PANTALLAS MUY PEQUEÑAS
======================================== */

@media (max-width: 360px) {

  .auth-view {
    padding: 18px 12px;
  }


  .auth-card {
    padding: 20px 17px;
  }


  .auth-card h1 {
    font-size: 24px;
  }


  .logo-placeholder {
    font-size: 21px;
  }

}


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

@media (min-width: 700px) {

  .auth-card {
    padding: 30px;
  }


  .auth-brand {
    margin-bottom: 30px;
  }

}