/* ============================================================================
   DESTINO CASTILLA — AUTH (login / crear cuenta / registro)      LTSM-5664
   ----------------------------------------------------------------------------
   Re-skin de las pantallas heredadas de Vista Verde hacia la marca Castilla.
   Diseno: Figma cb3izHyJ3uWqfAzbtHjEGP, pagina "MI PERFIL / 1. Iniciar Sesion
   & Registro" (frames Login - desktop - 1 y Registro1 - pp - desktop).

   REGLAS DE USO (mismas que chrome.css / home.css)
   - Autocontenido: define sus propios tokens --ca-auth-*; no depende de
     castilla.css ni de tokens-castilla.css, y no redefine el :root del skin.
   - Todo cuelga de .ca-auth, la clase que se agrego a la <section> raiz de
     content-login.php, content-crear-cuenta.php y content-registro.php. Fuera
     de esas pantallas este archivo no pinta nada.
   - Se encola solo en las plantillas de auth via castilla_enqueue_auth_assets().
   ============================================================================ */

.ca-auth {
  /* Valores tomados de tokens-castilla.css (primary/secondary de Figma).
     Se copian como tokens locales para no acoplar este archivo a ese import. */
  --ca-auth-gold: #b08524;          /* secondary/base   — CTA, links, labels  */
  --ca-auth-gold-dark: #85601f;     /* secondary/600    — hover del CTA       */
  --ca-auth-olive: #302e12;         /* primary/B950     — titulos             */
  --ca-auth-text: #55542c;          /* primary/800      — texto sobre blanco  */
  --ca-auth-body: #4e4b66;          /* Alias/Body                             */
  --ca-auth-label: #6e7191;         /* Alias/Label                            */
  --ca-auth-line: #d9dbe9;          /* Alias/Line       — borde de inputs     */
  --ca-auth-ok: #2f9e44;            /* requisito cumplido                     */
  --ca-auth-error: #d64545;         /* requisito pendiente / error            */
  --ca-auth-white: #ffffff;
  --ca-auth-font: "Montserrat", -apple-system, "Segoe UI", sans-serif;

  font-family: var(--ca-auth-font);
  color: var(--ca-auth-body);
}

/* ------------------------------ tipografia -------------------------------- */

.ca-auth .register-titles h3 {
  color: var(--ca-auth-gold);
  font-family: var(--ca-auth-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ca-auth .register-titles h1 {
  color: var(--ca-auth-olive);
  font-family: var(--ca-auth-font);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ca-auth .register-section__data,
.ca-auth .register-section__have-account {
  color: var(--ca-auth-body);
  font-size: 16px;
  line-height: 1.5;
}

.ca-auth .register-section__data span {
  color: var(--ca-auth-text);
  font-weight: 600;
}

.ca-auth .register-section__have-account a {
  color: var(--ca-auth-gold);
  font-weight: 600;
  text-decoration: none;
}

.ca-auth .register-section__have-account a:hover {
  color: var(--ca-auth-gold-dark);
  text-decoration: underline;
}

/* -------------------------------- inputs ---------------------------------- */

.ca-auth .form-input {
  border: 0;
  border-bottom: 1px solid var(--ca-auth-line);
  border-radius: 0;
  background: transparent;
  color: var(--ca-auth-olive);
  font-family: var(--ca-auth-font);
  font-size: 16px;
  padding: 12px 0;
  box-shadow: none;
}

.ca-auth .form-input:focus {
  border-bottom-color: var(--ca-auth-gold);
  box-shadow: none;
  outline: none;
}

.ca-auth .label-input {
  color: var(--ca-auth-label);
  font-family: var(--ca-auth-font);
  font-size: 16px;
}

.ca-auth .form-input:focus ~ .label-input,
.ca-auth .form-input:not(:placeholder-shown) ~ .label-input {
  color: var(--ca-auth-gold);
  font-size: 12px;
}

.ca-auth .invalid-feedback {
  color: var(--ca-auth-error);
  font-size: 13px;
}

/* Icono de ojo: el SCSS heredado ya alterna .show-icon/.hide-icon segun la
   clase del wrapper; aqui solo se le da color de marca y area clicable. */
.ca-auth .password-wrap .wrap-icon {
  color: var(--ca-auth-label);
  cursor: pointer;
}

.ca-auth .password-wrap .wrap-icon:hover,
.ca-auth .password-wrap .wrap-icon:focus-visible {
  color: var(--ca-auth-gold);
  outline: none;
}

/* --------------------- validacion de requisitos --------------------------- */
/* Contenedor que puebla js/auth-castilla.js desde PASSWORD_RULES.            */

/* El margen inferior cierra el ritmo vertical (LTSM-5668).
   `.form-row` del tema separa 16px, que es exactamente el `Espacio` con que el
   auto-layout del Figma apila los campos (frame "Login - desktop - 5"). Arriba
   de la lista ese 16px ya salía solo —el margen de 8px de aquí colapsa con el
   de 16px de la fila anterior—, pero abajo la lista no aportaba ninguno y el
   campo de confirmar quedaba a 5px, pegado. Medido después del cambio: 16px
   arriba y 16px abajo. */
.ca-auth .ca-auth-rules {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  display: grid;
  gap: 4px;
}

.ca-auth .ca-auth-rules:empty {
  display: none;
}

.ca-auth .ca-auth-rules__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ca-auth-label);
}

.ca-auth .ca-auth-rules__mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
}

.ca-auth .ca-auth-rules__item.is-ok {
  color: var(--ca-auth-ok);
}

/* Palomita dibujada con bordes: evita depender del set de iconos icomoon. */
.ca-auth .ca-auth-rules__item.is-ok .ca-auth-rules__mark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Mientras el campo esta vacio los requisitos son informativos, no errores. */
.ca-auth .ca-auth-rules.is-active .ca-auth-rules__item.is-pending {
  color: var(--ca-auth-error);
}

.ca-auth .ca-auth-match {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.ca-auth .ca-auth-match.is-ok {
  color: var(--ca-auth-ok);
}

.ca-auth .ca-auth-match.is-error {
  color: var(--ca-auth-error);
}

/* ------------------------------ checkboxes -------------------------------- */

.ca-auth .box-terms p {
  color: var(--ca-auth-body);
  font-size: 14px;
  line-height: 1.4;
}

.ca-auth .box-terms a {
  color: var(--ca-auth-gold);
  font-weight: 600;
}

.ca-auth .check-big input:checked + .box {
  background-color: var(--ca-auth-gold);
  border-color: var(--ca-auth-gold);
}

/* --------------------------------- CTAs ----------------------------------- */

.ca-auth .cta {
  font-family: var(--ca-auth-font);
  font-weight: 600;
  border-radius: 999px;
}

.ca-auth .cta--solid {
  background-color: var(--ca-auth-gold);
  border-color: var(--ca-auth-gold);
  color: var(--ca-auth-white);
}

.ca-auth .cta--solid:hover {
  background-color: var(--ca-auth-gold-dark);
  border-color: var(--ca-auth-gold-dark);
  color: var(--ca-auth-white);
}

.ca-auth .cta--white-linear,
.ca-auth .cta--base-linear {
  background-color: transparent;
  border: 1px solid var(--ca-auth-gold);
  color: var(--ca-auth-gold);
}

.ca-auth .cta--white-linear:hover,
.ca-auth .cta--base-linear:hover {
  background-color: var(--ca-auth-gold);
  color: var(--ca-auth-white);
}

.ca-auth .cta--disable {
  opacity: 0.6;
  pointer-events: none;
}

/* --------------------------- estado Loading (LTSM-5668) -------------------
   Criterios 2 y 3: el botón cambia a "Loading" mientras la petición viaja. El
   contenido se oculta y el spinner ocupa su lugar, pero el botón conserva su
   caja: no se le toca el ancho ni el padding, así que la fila no salta.
   Medido: 155px en reposo y 155px cargando.
   -------------------------------------------------------------------------- */

.ca-auth .cta.is-loading {
  position: relative;
  /* El texto del botón es un nodo suelto, sin elemento que lo envuelva: no hay
     selector que lo alcance. Se apaga por color, que sí hereda. */
  color: transparent;
  pointer-events: none;
  cursor: default;
}

/* El icono es una fuente y se apaga con el color de arriba; una imagen o un SVG
   no, y quedarían flotando bajo el spinner. */
.ca-auth .cta.is-loading > * {
  visibility: hidden;
}

.ca-auth .cta.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  /* Color explícito y no currentColor: el texto acaba de volverse transparente,
     así que heredarlo dejaría el spinner invisible. */
  border: 2px solid #344148;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ca-auth-spin 0.6s linear infinite;
}

/* Sobre el CTA sólido el fondo es de marca y el texto blanco. */
.ca-auth .cta--solid.is-loading::after {
  border-color: #fff;
  border-right-color: transparent;
}

@keyframes ca-auth-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Quien pidió no ver movimiento no debería ver un spinner girando: el botón
   deshabilitado y el texto atenuado ya comunican el estado. */
@media (prefers-reduced-motion: reduce) {
  .ca-auth .cta.is-loading::after {
    animation: none;
  }
}

/* --------------------------- enlace vencido (LTSM-5668) -------------------- */

.ca-auth-expired {
  display: flex;
}

.ca-auth-expired .cta {
  width: 100%;
}

/* ------------------------------ side banner ------------------------------- */

.ca-auth .detail-apartment__info {
  background-position: center;
  background-size: cover;
}

/* --------------------------------------------------------------------------
   MOBILE (LTSM-5664, Escenario 5)
   El Side Banner se oculta y el Form Container ocupa el 100% del ancho para
   dejar sitio al teclado. El breakpoint es 768px, el mismo que usa el skin
   heredado para .show-for-medium.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ca-auth .detail-apartment__info {
    display: none;
  }

  .ca-auth .detail-apartment__slider {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  .ca-auth .register-section {
    width: 100%;
    max-width: 100%;
  }

  .ca-auth .register-titles h1 {
    font-size: 28px;
  }

  /* En el Figma mobile los dos CTA del login se apilan a ancho completo. */
  .ca-auth .flex--row {
    flex-direction: column;
    align-items: stretch;
  }

  .ca-auth .flex--row .cta {
    width: 100%;
    margin-left: 0;
  }
}

/* --------------------------- OTP (LTSM-5666) ------------------------------
   Pantalla "Registro2 - pp- desktop": un solo campo de código, el enlace de
   reenvío y el CTA. El campo hereda el subrayado de .form-input; aquí sólo se
   ajusta lo propio del código —espaciado de dígitos— y los dos estados que el
   flujo nuevo agrega y el Figma no dibuja: la línea de estado (vigencia,
   error, bloqueo) y el enlace de reenvío en espera.
   -------------------------------------------------------------------------- */

/* La etiqueta existe para lectores de pantalla; el texto visible es el
   placeholder, como en el Figma. */
.ca-auth .ca-otp__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ca-auth .ca-otp__input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
}

/* El placeholder no hereda el color del input y el del navegador es más pálido
   que el gris de etiqueta del Figma. El letter-spacing del código no aplica al
   texto de ayuda: "Ingresa tu código" se lee como frase, no como dígitos. */
.ca-auth .ca-otp__input::placeholder {
  color: var(--ca-auth-label);
  letter-spacing: normal;
  opacity: 1;
}

.ca-auth .ca-otp__input:disabled {
  opacity: 0.5;
}

/* Reserva la altura de una línea para que el contador, al aparecer o cambiar
   de mensaje, no empuje el CTA hacia abajo. */
.ca-auth .ca-otp__estado {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ca-auth-label);
}

.ca-auth .ca-otp__estado.is-error {
  color: var(--ca-auth-error);
}

.ca-auth .ca-otp__estado.is-ok {
  color: var(--ca-auth-ok);
}

/* Durante la espera el enlace sigue en el DOM y con su texto —"Volver a enviar
   en 0:45"—, pero deja de ser accionable. Se apaga con pointer-events y no
   ocultándolo: si desapareciera, la fila colapsaría y el bloque saltaría. */
.ca-auth [data-otp-reenviar].is-disabled {
  color: var(--ca-auth-label);
  pointer-events: none;
  cursor: default;
}

.ca-auth [data-otp-reenviar].is-disabled:hover {
  color: var(--ca-auth-label);
  text-decoration: none;
}

/* La fila de reenvío va en una línea, como en el Figma: la clase heredada
   `register-section__have-account--column` la apilaba en dos columnas y con el
   contador ("Volver a enviar en 0:45") terminaba partida en cuatro renglones. */
.ca-auth .ca-otp__reenvio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 24px 0 32px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ca-auth-body);
}

.ca-auth .ca-otp__reenvio a {
  color: var(--ca-auth-gold);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ca-auth .ca-otp__reenvio a:hover {
  color: var(--ca-auth-gold-dark);
  text-decoration: underline;
}

/* El CTA del Figma está alineado a la izquierda con el resto de la columna y su
   ancho lo da el contenido; `cta--220 cta--mAuto` lo centraba y lo estiraba.
   El `!important` del padding no es capricho: `.cta` de NewStylev2.css declara
   `padding:0!important` junto con `width:100%;max-width:245px`, así que sin él
   la etiqueta queda pegada a los bordes de la píldora. */
.ca-auth .ca-otp__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: none;
  height: 48px;
  margin: 0;
  padding: 0 32px !important;
}

/* Los iconos del set icomoon vienen con `display:block;margin-right:12px`; aquí
   el espaciado lo pone el `gap` del flex. */
.ca-auth .ca-otp__cta [class^="icon-"],
.ca-auth .ca-otp__cta [class*=" icon-"] {
  margin-right: 0;
}

/* En mobile el CTA del OTP ocupa el ancho, como el resto de botones del
   recorrido. La regla de arriba le fija `width:auto` para respetar el ancho por
   contenido del Figma desktop, y eso también anulaba `cta--mobile-full`, que es
   quien lo estiraba aquí. */
@media (max-width: 767px) {
  .ca-auth .ca-otp__cta {
    width: 100%;
  }
}

/* ===========================================================================
 * Perfil — pantalla "Cambio de contraseña" (LTSM-5670)
 *
 * Frame "Mi cuenta 5 - pp- desktop". Va aquí y no en un archivo propio porque
 * reusa los tokens --ca-auth-* y todo el skin de campos, requisitos y CTA que
 * ya define este archivo para el recorrido de auth: el formulario del Figma es
 * literalmente el mismo componente que el de registro.
 *
 * Todo cuelga de `.ca-auth.ca-profile`, las dos clases del mismo <section> en
 * content-cambio-contrasena.php. `.ca-profile` acota:
 * `template-parts/user-info.php` es compartido con Mi cuenta y Editar perfil
 * —historias vecinas de esta misma épica, aún sin rediseñar—, así que el skin
 * del sidebar no toca esas dos pantallas. Cuando les toque su turno, basta con
 * subir estas reglas un nivel. Y `.ca-auth` delante mantiene la invariante que
 * vigila AuthWiringTest: ninguna regla de este archivo pinta fuera del skin.
 *
 * El esqueleto de dos columnas (100vh + scroll interno del contenido) es el
 * heredado y se respeta a propósito: cambiarlo aquí dejaría esta pantalla
 * desalineada con las otras tres del perfil.
 * ======================================================================== */

/* ------------------------------- sidebar --------------------------------- */

.ca-auth.ca-profile .user-info {
  font-family: var(--ca-auth-font);
}

.ca-auth.ca-profile .user-info__header {
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ca-auth-line);
  border-radius: 12px;
  background-color: var(--ca-auth-white);
}

/* El icono de salir dentro de la tarjeta: el Figma no lo tiene, y con el botón
   "Cerrar sesión" abajo sería el mismo destino dos veces en 200px. */
.ca-auth.ca-profile .user-info__header > a {
  display: none;
}

.ca-auth.ca-profile .user-info__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: 0;
  border-radius: 50%;
  background-color: var(--ca-auth-gold);
}

.ca-auth.ca-profile .user-info__avatar span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ca-auth-white);
  text-transform: uppercase;
}

.ca-auth.ca-profile .user-info__info h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ca-auth-olive);
}

.ca-auth.ca-profile .user-info__info p {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ca-auth-label);
}

.ca-auth.ca-profile .user-info__menu ul li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--ca-auth-olive);
}

.ca-auth.ca-profile .user-info__menu ul li a:hover {
  color: var(--ca-auth-gold);
}

/* El subrayado del ítem activo: en el Figma es dorado y ocupa el ancho de la
   columna. El tema lo pinta gris (#DAE5EC) y sólo tras un padding-left de 25px
   que corre el texto al pasar el ratón. */
.ca-auth.ca-profile .user-info__menu ul li a:hover,
.ca-auth.ca-profile .user-info__menu ul li.current-menu-item a {
  padding-left: 0;
}

.ca-auth.ca-profile .user-info__menu ul li a:hover:after,
.ca-auth.ca-profile .user-info__menu ul li.current-menu-item a:after {
  background-color: var(--ca-auth-gold);
}

/* El pie de la tarjeta está `display:none` en el skin heredado y sólo aparece
   en un breakpoint intermedio, colocado en absoluto sobre la cabecera. El Figma
   lo quiere siempre, en flujo y bajo el menú. */
.ca-auth.ca-profile .user-info__footer {
  display: block;
  position: static;
  top: auto;
  right: auto;
}

.ca-auth.ca-profile .user-info__footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  height: 44px;
  padding: 0 28px !important;
  border: 1px solid var(--ca-auth-gold);
  border-radius: 999px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ca-auth-gold);
}

.ca-auth.ca-profile .user-info__footer a:hover {
  border-color: var(--ca-auth-gold-dark);
  background-color: var(--ca-auth-gold);
  color: var(--ca-auth-white);
}

.ca-auth.ca-profile .user-info__footer a span {
  display: inline-block;
}

/* ----------------------------- columna central --------------------------- */

.ca-auth.ca-profile .ca-profile__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ca-auth-label);
  text-decoration: none;
}

.ca-auth.ca-profile .ca-profile__back:hover {
  color: var(--ca-auth-gold);
}

/* Los iconos del set icomoon traen `margin-right:12px` propio; aquí el
   espaciado lo pone el `gap`. */
.ca-auth.ca-profile .ca-profile__back [class^="icon-"],
.ca-auth.ca-profile .ca-profile__back [class*=" icon-"] {
  margin-right: 0;
  font-size: 12px;
}

.ca-auth.ca-profile .ca-profile__title {
  margin: 0 0 40px;
  font-family: var(--ca-auth-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.17;
  letter-spacing: 0;
  color: var(--ca-auth-olive);
  text-transform: uppercase;
}

/* Separación entre campos. `.form-row` la trae del skin heredado sólo dentro de
   `.register-section`, que aquí no existe. */
.ca-auth.ca-profile .ca-profile__form .form-row {
  margin-bottom: 28px;
}

/* La lista de requisitos se pega al campo que describe, no al siguiente. */
.ca-auth.ca-profile .ca-profile__form .ca-auth-rules {
  margin-top: -20px;
  margin-bottom: 28px;
}

.ca-auth.ca-profile .ca-profile__form .ca-auth-match {
  margin-top: -20px;
  margin-bottom: 28px;
}

.ca-auth.ca-profile .ca-profile__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: none;
  height: 48px;
  margin: 0;
  padding: 0 32px !important;
}

.ca-auth.ca-profile .ca-profile__cta [class^="icon-"],
.ca-auth.ca-profile .ca-profile__cta [class*=" icon-"] {
  margin-right: 0;
}

@media (max-width: 767px) {
  .ca-auth.ca-profile .ca-profile__title {
    margin-bottom: 32px;
    font-size: 28px;
  }

  .ca-auth.ca-profile .ca-profile__cta {
    width: 100%;
  }
}