/* ===========================================================================
   auth.css — pantallas de acceso (login y verificación de código).

   Tarjeta centrada sobre fondo tonal. Sin sidebar ni topbar: aún no hay sesión.
   =========================================================================== */

.auth-body {
  margin: 0;
  background: var(--prme-surface);
  color: var(--prme-on-surface);
  font-family: var(--prme-font-sans);
  font-size: var(--prme-body-md-size);
  line-height: var(--prme-body-md-line);
}

.auth-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--prme-margin-mobile);
}

/* -------------------------------- idioma --------------------------------- */

/* Selector de idioma de las pantallas de acceso (ver _AuthLanguage.cshtml).

   Es un <details>: el desplegable lo abre y lo cierra el navegador, sin JavaScript.
   Lo que eso cuesta es que no se cierra al hacer clic fuera — se asume, porque la
   alternativa era un script en una pantalla que hoy no necesita ninguno.

   Absoluto respecto al wrapper, no fijo a la ventana: pegado al viewport se queda
   flotando encima de la tarjeta cuando el teclado del móvil reduce el alto. */
.auth-lang {
  position: absolute;
  top: var(--prme-margin-mobile);
  right: var(--prme-margin-mobile);
  z-index: 2;
}

.auth-lang__toggle {
  display: flex;
  align-items: center;
  gap: var(--prme-space-2);
  min-height: var(--prme-touch-target);
  padding: 0 var(--prme-space-3);
  border: 1px solid var(--prme-outline-variant);
  border-radius: var(--prme-radius-control);
  background: var(--prme-surface-lowest);
  color: var(--prme-on-surface-variant);
  cursor: pointer;
  /* El triángulo por defecto de <summary> sobra: ya hay un chevron propio. */
  list-style: none;
}

.auth-lang__toggle::-webkit-details-marker { display: none; }

.auth-lang__toggle:hover {
  border-color: var(--prme-primary);
  color: var(--prme-primary);
}

.auth-lang__toggle:focus-visible {
  outline: var(--prme-focus-ring);
  outline-offset: var(--prme-focus-offset);
}

/* Los iconos del sprite son de TRAZO (stroke="currentColor", fill="none"): pintarles
   un fill los convierte en manchas sólidas. */
.auth-lang__icon,
.auth-lang__caret {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
}

.auth-lang__caret {
  width: 1rem;
  height: 1rem;
  transition: transform .15s ease;
}

.auth-lang[open] .auth-lang__caret { transform: rotate(180deg); }

.auth-lang__code {
  font-size: var(--prme-label-md-size);
  font-weight: 700;
  letter-spacing: .04em;
}

.auth-lang__list {
  position: absolute;
  top: calc(100% + var(--prme-space-2));
  right: 0;
  z-index: 1;
  min-width: 11rem;
  margin: 0;
  padding: var(--prme-space-1);
  border: 1px solid var(--prme-outline-variant);
  border-radius: var(--prme-radius-card);
  background: var(--prme-surface-lowest);
  box-shadow: var(--prme-shadow-2);
  list-style: none;
  text-align: left;
}

.auth-lang__item {
  display: flex;
  align-items: center;
  gap: var(--prme-space-3);
  min-height: var(--prme-touch-target);
  padding: 0 var(--prme-space-3);
  border-radius: var(--prme-radius-control);
  color: var(--prme-on-surface);
  font-size: var(--prme-data-size);
  text-decoration: none;
}

.auth-lang__item:hover { background: var(--prme-surface-low); }

.auth-lang__item:focus-visible {
  outline: var(--prme-focus-ring);
  outline-offset: calc(var(--prme-focus-offset) * -1);
}

.auth-lang__item--active {
  background: var(--prme-primary);
  color: var(--prme-on-primary);
}

.auth-lang__item--active:hover {
  background: var(--prme-primary-container);
  color: var(--prme-on-primary);
}

.auth-lang__item-code {
  flex: 0 0 1.75rem;
  font-weight: 700;
  font-size: var(--prme-label-md-size);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: var(--prme-space-8) var(--prme-space-6);
  background: var(--prme-surface-lowest);
  border: 1px solid var(--prme-outline-variant);
  border-radius: var(--prme-radius-card);
  box-shadow: var(--prme-shadow-2);
  text-align: center;
}

.auth-card__logo { margin-bottom: var(--prme-space-6); }

.auth-card__logo-img { max-width: 160px; height: auto; }

.auth-card__title {
  margin: 0 0 var(--prme-space-1);
  font-size: var(--prme-headline-lg-size);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: var(--prme-headline-lg-line);
}

.auth-card__subtitle {
  margin: 0 0 var(--prme-space-6);
  color: var(--prme-on-surface-variant);
}

.auth-card__foot {
  margin: var(--prme-space-6) 0 0;
  color: var(--prme-on-surface-variant);
  font-size: var(--prme-label-md-size);
}

/* --------------------------------- formulario ---------------------------- */

.auth-form { text-align: left; }

.auth-field { margin-bottom: var(--prme-space-4); }

.auth-field__error {
  display: block;
  margin-top: var(--prme-space-1);
  color: var(--prme-error);
  font-size: var(--prme-label-md-size);
}

/* Campo del código: monoespaciado y espaciado, para leer 6 dígitos de un vistazo. */
.auth-input--otp {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: var(--prme-headline-lg-size);
  letter-spacing: .4em;
  text-align: center;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--prme-space-2);
  width: 100%;
  min-height: var(--prme-touch-target);
}

.auth-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--prme-space-1);
  min-height: var(--prme-touch-target);
  margin-top: var(--prme-space-3);
  color: var(--prme-on-surface-variant);
  font-size: var(--prme-data-size);
  text-decoration: none;
}

.auth-back:hover { color: var(--prme-primary); }

.auth-back:focus-visible {
  outline: var(--prme-focus-ring);
  outline-offset: var(--prme-focus-offset);
}

/* ---------------------------------- alerta ------------------------------- */

/* La validación del servidor renderiza un <ul> dentro; se le quitan las viñetas. */
.auth-alert:not(:empty) {
  padding: var(--prme-space-3) var(--prme-space-4);
  margin-bottom: var(--prme-space-4);
  border-left: 3px solid var(--prme-error);
  border-radius: var(--prme-radius-control);
  background: var(--prme-error-container);
  color: var(--prme-on-error-container);
  font-size: var(--prme-data-size);
  text-align: left;
}

.auth-alert ul { margin: 0; padding: 0; list-style: none; }

/* Páginas de error. Reutilizan la tarjeta del login: son las dos pantallas que se
   ven sin la aplicación alrededor, y compartir diseño las hace reconocibles. */

/* El código, grande y tenue. Es decoración con dato: quien reporta la incidencia
   lo cita, pero no es lo primero que hay que leer — por eso va aria-hidden y el
   título lleva el texto de verdad. */
.auth-card__code {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 var(--prme-space-2);
  color: var(--prme-outline-variant);
  font-variant-numeric: tabular-nums;
}

/* La referencia de la traza: partible, porque no cabe en móvil. */
.auth-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--prme-space-2);
  margin: var(--prme-space-4) 0 0;
  font-size: .8rem;
  color: var(--prme-on-surface-variant);
}

.auth-card__meta > code {
  font-size: .75rem;
  overflow-wrap: anywhere;
}