/* =========================================================
   UFY PHONE — ACCESO: MENSAJES, BOTÓN, RECUPERACIÓN Y TAMAÑOS
   Parte 3 de auth-app.css (se carga justo después de la
   parte anterior, en el mismo orden). Mensajes de error/éxito,
   botón principal, "¿Olvidaste tu contraseña?", formulario de
   recuperación, modo Entrar, ajustes para pantallas grandes y
   pequeñas, movimiento reducido y página de acceso sin sesión.
   ========================================================= */

.ufy-auth-message {
  min-height: 18px;

  margin:
    1px
    4px
    0;

  color:
    rgba(
      235,
      224,
      246,
      0.72
    );

  font-size:calc(12px * var(--ufy-font-scale,1));

  line-height: 1.4;

  text-align: center;
}

.ufy-auth-message:empty {
  min-height: 0;

  margin: 0;
}

.ufy-auth-message.is-error {
  color: #ff90aa;
}

.ufy-auth-message.is-success {
  color:
    var(
      --ufy-auth-lime
    );
}

.ufy-auth-submit {
  appearance: none;

  min-height: 62px;

  margin-top: 2px;

  padding:
    12px
    18px;

  border:
    1px solid
    rgba(237, 213, 255, 0.42);

  border-radius: 17px;

  background:
    linear-gradient(
      100deg,
      #7f36dc,
      #be7aff 55%,
      #9e54eb
    );

  color: #09060d;

  box-shadow:
    inset
    0
    1px
    0
    rgba(var(--ufy-rgb-255,255,255,255),0.34),

    0
    12px
    30px
    rgba(119, 45, 201, 0.30);

  font: inherit;

  font-size:calc(18px * var(--ufy-font-scale,1));
  font-weight: 760;

  cursor: pointer;
}

.ufy-auth-submit:disabled {
  opacity: 0.58;

  cursor: wait;
}

.ufy-auth-form[hidden],
.ufy-auth-tabs[hidden],
.ufy-auth-field[hidden],
.ufy-auth-recovery-back[hidden],
.ufy-auth-forgot-password[hidden] {
  display: none !important;
}


.ufy-auth-forgot-password {
  appearance: none;

  justify-self: end;

  margin:
    -4px
    4px
    1px;

  padding:
    2px
    0;

  border: 0;

  background: transparent;

  color:
    rgba(
      213,
      164,
      255,
      0.92
    );

  font: inherit;

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 650;

  cursor: pointer;

  transition:
    color
    180ms
    ease,

    text-shadow
    180ms
    ease;
}


.ufy-auth-forgot-password:hover,
.ufy-auth-forgot-password:focus-visible {
  color: #e4bdff;

  text-shadow:
    0
    0
    12px
    rgba(
      190,
      111,
      255,
      0.52
    );
}


.ufy-auth-recovery-form {
  padding-top: 4px;
}


.ufy-auth-recovery-heading {
  display: grid;

  gap: 7px;

  margin:
    1px
    5px
    9px;

  text-align: center;
}


.ufy-auth-recovery-title {
  margin: 0;

  color: #f4eaff;

  font-size:
    clamp(
      21px,
      5.5vw,
      27px
    );

  line-height: 1.12;

  font-weight: 760;

  letter-spacing: -0.4px;
}


.ufy-auth-recovery-description {
  margin: 0;

  color:
    rgba(
      232,
      218,
      245,
      0.70
    );

  font-size:calc(13px * var(--ufy-font-scale,1));

  line-height: 1.48;
}


.ufy-auth-recovery-back {
  appearance: none;

  justify-self: center;

  padding:
    5px
    8px;

  border: 0;

  background: transparent;

  color:
    rgba(
      213,
      164,
      255,
      0.88
    );

  font: inherit;

  font-size:calc(12px * var(--ufy-font-scale,1));
  font-weight: 650;

  cursor: pointer;
}


.ufy-auth-recovery-back:hover,
.ufy-auth-recovery-back:focus-visible {
  color: #e4bdff;

  text-decoration: underline;
}





.ufy-auth[
  data-mode="login"
] [data-auth-register-only] {
  display: none;
}

.ufy-auth[
  data-mode="login"
] .ufy-auth-form {
  padding-top: 8px;
}

.ufy-auth[
  data-mode="login"
] .ufy-auth-submit {
  margin-top: 7px;
}

@media (min-width: 760px) {
  .ufy-auth-shell {
    padding-left:
      clamp(
        24px,
        4vw,
        54px
      );

    padding-right:
      clamp(
        24px,
        4vw,
        54px
      );
  }

  .ufy-auth-layout {
    grid-template-columns:
      minmax(380px, 1.12fr)
      minmax(330px, 0.88fr);

    align-items: center;

    gap:
      clamp(
        28px,
        5vw,
        72px
      );
  }

  .ufy-auth-carousel {
    height:
      clamp(
        380px,
        50vw,
        520px
      );
  }

  .ufy-auth-card {
    padding: 22px;
  }

  .ufy-auth-slide {
    width:
      min(
        68%,
        390px
      );
  }
}

@media (max-width: 390px) {
  .ufy-auth-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .ufy-auth-card {
    padding-left: 11px;
    padding-right: 11px;
  }

  .ufy-auth-slide {
    width:
      min(
        74%,
        300px
      );
  }

  .ufy-auth-input-row {
    min-height: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ufy-auth-slide,
  .ufy-auth-indicator,
  .ufy-auth-input-row {
    transition: none;
  }
}



/* =====================================================
   UFY PHONE — ACCESO SIN SESIÓN
   Aísla Login/Registro de la estructura visual heredada
   ===================================================== */

body.ufy-auth-guest {
  width: 100%;
  min-height: 100dvh;

  margin: 0 !important;
  padding: 0 !important;

  overflow-x: hidden;

  background:
    #0b0713;
}


body.ufy-auth-guest #perfil {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 100dvh !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}


body.ufy-auth-guest #perfil > .ufy-auth {
  width: 100%;
  min-height: 100dvh;
  height: auto;
}