/*
  ==========================================================================
  UKRAS — ACCESO
  ==========================================================================
  Login, registro, recuperar contraseña y landing de referidos.
  Solo en base_dashboard_auth.html, después de ukras-base.css.

  Dónde va una regla nueva: si la clase se usa en más de un área, en ukras-base.css;
  si solo en una, en el archivo de esa área. Los colores salen SIEMPRE de los tokens.

  Índice:
    1. AUTENTICACIÓN (login / registro)
    2. LOGO DE UKRAS EN IMAGEN + LANDING DE REFERIDOS
    3. RECUPERAR CONTRASEÑA
  ==========================================================================
*/

/* ==========================================================================
   1. AUTENTICACIÓN (login / registro)
   Desktop (≥992px): panel de marca fijo a la izquierda + formulario a la derecha.
   Móvil: solo el formulario, con la marca arriba.
   ========================================================================== */
.ukras-auth-body {
  background-color: var(--ukras-superficie);
}

.ukras-auth {
  display: grid;
  min-height: 100vh;
}

@media (min-width: 992px) {
  .ukras-auth {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

/* --- Panel de marca: luz solar filtrada por lamas de persiana --- */
.ukras-auth__panel {
  display: none;
}

@media (min-width: 992px) {
  .ukras-auth__panel {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2.75rem 3rem;
      color: var(--ukras-texto-inverso);
      background:
        radial-gradient(circle at 88% 8%, rgba(242, 184, 75, 0.28) 0%, rgba(242, 184, 75, 0) 42%),
        linear-gradient(160deg, var(--ukras-primario) 0%, #1A2152 55%, var(--ukras-secundario) 100%);
    }
  .ukras-auth__panel::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 3px, transparent 3px 22px);
      -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
      mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
      pointer-events: none;
    }
  .ukras-auth__panel > * {
      position: relative;
      z-index: 1;
    }
}

@media (min-width: 1400px) {
  .ukras-auth__panel {
      padding: 3.5rem 4rem;
    }
}

.ukras-auth__panel-marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ukras-auth__panel-marca::before,
.ukras-auth__marca-movil::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--ukras-acento);
}

.ukras-auth__panel-cuerpo {
  max-width: 460px;
}

.ukras-auth__panel-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ukras-acento);
}

.ukras-auth__panel-titulo {
  margin: 0 0 2.25rem;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

@media (min-width: 1400px) {
  .ukras-auth__panel-titulo {
      font-size: 2.125rem;
    }
}

.ukras-auth__beneficios {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ukras-auth__beneficios li {
  display: flex;
  gap: 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}

.ukras-auth__beneficios strong {
  display: block;
  margin-bottom: 0.125rem;
  font-weight: 600;
  color: var(--ukras-texto-inverso);
}

.ukras-auth__beneficio-icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ukras-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--ukras-acento);
  font-size: 1.125rem;
}

.ukras-auth__panel-pie {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Columna del formulario --- */
.ukras-auth__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.25rem 2.5rem;
}

@media (min-width: 576px) {
  .ukras-auth__main {
      padding: 3rem 2rem;
    }
}

.ukras-auth__form-wrap {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.ukras-auth__form-wrap--ancho {
  max-width: 480px;
}

.ukras-auth__marca-movil {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ukras-primario);
}

@media (min-width: 992px) {
  .ukras-auth__marca-movil {
      display: none;
    }
}

.ukras-auth__titulo {
  margin: 0 0 0.375rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ukras-primario);
}

.ukras-auth__subtitulo {
  margin: 0 0 1.75rem;
  color: var(--ukras-texto-secundario);
}

/* Campos más altos y cómodos (48px) en las pantallas de acceso */
.ukras-auth .form-control,
.ukras-auth .form-select {
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
}

/* El campo con botón mostrar/ocultar (.ukras-password, en ukras-base.css) necesita su
   espacio a la derecha; el padding de arriba lo pisaría porque este archivo carga después. */
.ukras-auth .ukras-password .form-control {
  padding-right: 3rem;
}

.ukras-auth .btn-lg {
  min-height: 50px;
  font-size: 1rem;
}

.ukras-auth__google {
  display: flex;
  justify-content: center;
  min-height: 44px; /* reserva el espacio del botón de Google para evitar saltos */
}

.ukras-auth__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0;
  font-size: 0.8125rem;
  color: var(--ukras-texto-muted);
}

.ukras-auth__divider::before,
.ukras-auth__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--ukras-borde);
}

.ukras-auth__alterno {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ukras-borde);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--ukras-texto-secundario);
}

.ukras-auth__alterno a {
  font-weight: 600;
  text-decoration: none;
}

.ukras-auth__alterno a:hover {
  text-decoration: underline;
}

/* Encabezado de paso en el registro */
.ukras-auth__paso {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ukras-texto-secundario);
}

.ukras-auth__paso span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--ukras-primario);
  color: var(--ukras-texto-inverso);
  font-size: 0.75rem;
}

form .ukras-auth__paso:not(:first-child) {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ukras-borde);
}

.ukras-opciones--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ukras-opcion__card--plan {
  align-items: center;
  justify-content: space-between;
}

.ukras-opcion__precio {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  color: var(--ukras-primario);
  font-variant-numeric: tabular-nums;
}

.ukras-opcion__precio small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ukras-texto-secundario);
}

@media (max-width: 400px) {
  .ukras-opciones--2 {
      grid-template-columns: 1fr;
    }
}

/* Casilla obligatoria (aviso de privacidad): toda la caja es el área táctil, de al menos 44 px */
.ukras-casilla__caja {
  position: relative;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.625rem 0.5rem 2.5rem;
  border: 1px solid var(--ukras-borde-fuerte);
  border-radius: var(--ukras-radius-sm);
  background-color: var(--ukras-superficie);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ukras-casilla__caja:focus-within {
  border-color: var(--ukras-secundario);
  box-shadow: var(--ukras-focus-ring);
}

.ukras-casilla__caja .form-check-input {
  position: absolute;
  top: 0.8125rem;
  left: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  float: none;
}

/* La etiqueta ocupa toda la caja: tocar cualquier punto marca la casilla */
.ukras-casilla__caja .form-check-label {
  display: block;
  margin: -0.5rem -0.625rem -0.5rem -2.5rem;
  padding: 0.5rem 0.625rem 0.5rem 2.5rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ukras-texto);
  cursor: pointer;
}

.ukras-casilla__caja--error {
  border-color: var(--ukras-error);
  background-color: var(--ukras-error-suave);
}

.ukras-casilla__error {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--ukras-error-texto);
}

/* ==========================================================================
   2. LOGO DE UKRAS EN IMAGEN + LANDING DE REFERIDOS
   ========================================================================== */
.ukras-auth__panel-marca--img img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.ukras-auth__marca-movil--img img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* --- Landing pública de referido --- */
.ukras-invito {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--ukras-borde);
  border-radius: var(--ukras-radius-md);
  background-color: var(--ukras-fondo);
}

.ukras-invito .ukras-avatar {
  width: 3rem;
  height: 3rem;
  font-size: 1.125rem;
  background-color: var(--ukras-primario);
}

.ukras-invito__texto {
  min-width: 0;
}

.ukras-invito__texto small {
  display: block;
  font-size: 0.8125rem;
  color: var(--ukras-texto-secundario);
}

.ukras-invito__texto strong {
  display: block;
  font-size: 1.0625rem;
  color: var(--ukras-primario);
  overflow-wrap: anywhere;
}

.ukras-beneficios-lista {
  display: grid;
  gap: 0.625rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.ukras-beneficios-lista li {
  display: flex;
  gap: 0.625rem;
  color: var(--ukras-texto-secundario);
}

.ukras-beneficios-lista .bi {
  color: var(--ukras-exito-fuerte);
  font-size: 1.125rem;
  line-height: 1.35;
}

/* ==========================================================================
   3. RECUPERAR CONTRASEÑA
   ========================================================================== */
/* "¿Olvidaste tu contraseña?" debajo del campo: no interrumpe el orden de tabulación */
.ukras-auth__olvide {
  margin-top: 0.5rem;
  text-align: right;
  font-size: 0.875rem;
}

.ukras-auth__olvide a {
  display: inline-block;
  padding: 0.25rem 0;           /* área táctil más cómoda */
  font-weight: 500;
  text-decoration: none;
}

.ukras-auth__olvide a:hover { text-decoration: underline; }

/* Ícono grande de estado (correo enviado, enlace vencido) */
.ukras-auth__estado-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  font-size: 1.625rem;
}

.ukras-auth__estado-icono--exito {
  background-color: var(--ukras-exito-suave);
  color: var(--ukras-exito-fuerte);
}

.ukras-auth__estado-icono--advertencia {
  background-color: var(--ukras-advertencia-suave);
  color: var(--ukras-advertencia-texto);
}

.ukras-auth__tips {
  display: grid;
  gap: 0.625rem;
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  list-style: none;
  border-radius: var(--ukras-radius-md);
  background-color: var(--ukras-neutro-suave);
  font-size: 0.875rem;
  color: var(--ukras-texto-secundario);
}

.ukras-auth__tips li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.ukras-auth__tips .bi {
  margin-top: 0.125rem;
  color: var(--ukras-secundario);
}