/* Flujo de acceso: login, verificacion en dos pasos, codigo de recuperacion,
   las pantallas publicas de aceptar una invitacion y definir una contrasena
   nueva (views/public-access.js) y la del invitado (views/guest.js), que usan
   la misma marca y la misma tarjeta que el login. Solo lo que es propio de
   estas pantallas: los componentes salen de components.css y las medidas, de
   tokens.css.
   "No encontrado" no necesita nada de aca: usa pageHeader + card + empty-state
   del kit tal cual, dentro del marco (shell.css). */

/* Pantalla completa del login y de la verificacion en dos pasos: la marca
   arriba, la tarjeta abajo, las dos centradas, con 24 px entre bloques
   (space.6). */
.login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 100vh;
  min-height: 100dvh;
  /* Aire alrededor cuando la tarjeta no entra en la ventana (la de aceptar
     una invitacion es mas alta que el login, y en un telefono llega a los
     bordes): sin esto la marca queda pegada arriba y el boton, abajo. Con la
     tarjeta entera a la vista no se nota, porque el centrado es el mismo. */
  padding: var(--space-6) var(--space-4);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.login-brand__mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* El nombre de la marca va en negrita a 24 px (size.xl), mas chico que el
   display.md del kit: es el wordmark de la consola. */
.login-brand__name {
  font: var(--typography-fontweight-bold) var(--typography-fontsize-xl) / var(--typography-lineheight-tight) var(--typography-fontfamily-display);
}

/* icon() deja el color en currentColor: el logo del login es icon.brand, no el
   color.text.primary que se hereda del resto. */
.login-brand__icon {
  color: var(--color-icon-brand);
}

.login-brand__tagline {
  margin: 0;
  color: var(--color-text-secondary);
}

.login-brand__version {
  color: var(--color-text-tertiary);
  font: var(--nb-font-body-sm);
}

.login-screen--tenant {
  position: relative;
  gap: var(--space-6);
  padding-top: calc(var(--space-6) + var(--space-10));
  padding-bottom: calc(var(--space-6) + var(--space-10));
}

.login-brand--tenant {
  position: absolute;
  top: var(--space-5);
  left: var(--space-6);
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-2);
}

.login-brand--tenant .login-brand__name {
  font-size: var(--typography-fontsize-lg);
}

.login-tenant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  text-align: center;
}

.login-tenant__avatar {
  display: grid;
  place-content: center;
  flex: none;
  width: 96px;
  height: 96px;
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-raised);
  color: var(--color-text-secondary);
  font: var(--typography-fontweight-bold) var(--typography-fontsize-3xl) / 1 var(--typography-fontfamily-display);
}

.login-tenant__name {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font: var(--typography-display-md-font-weight) var(--typography-display-md-font-size) / 1.1 var(--typography-fontfamily-display);
  letter-spacing: var(--typography-display-md-letter-spacing);
}

.login-screen--mfa {
  position: relative;
  padding-bottom: calc(var(--space-6) + var(--space-8));
}

.login-brand--mfa {
  gap: var(--space-1);
}

.login-screen__footer {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
}

.login-verifying {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font: var(--nb-font-body-md);
}

.login-verifying[hidden] {
  display: none;
}

.login-card[data-verifying] .nb-link {
  pointer-events: none;
  color: var(--color-text-tertiary);
}

@media (max-width: 480px) {
  .login-brand--tenant {
    top: var(--space-4);
    left: var(--space-4);
  }

  .login-screen__footer {
    right: var(--space-4);
    bottom: var(--space-4);
  }
}

/* La tarjeta no es el .card del kit: mide 400 px fijos (layout.overlay-narrow)
   con 32 px de relleno (space.8) en vez de los 24 de .card, y el formulario
   mismo es la superficie — no hay un <form> aparte adentro de un contenedor
   visual. */
.login-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* En una ventana mas angosta que la tarjeta mas su margen (un telefono de
     390 px) se achica, como los overlays del kit (components.css), en lugar de
     desbordar la pantalla. */
  width: min(var(--layout-overlay-narrow), calc(100vw - 2 * var(--space-4)));
  padding: var(--space-8);
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.login-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.login-card__tenant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  color: var(--color-text-tertiary);
}

.login-card__explanation {
  margin: 0;
  color: var(--color-text-secondary);
}

/* Ranura del banner de error/info (credenciales rechazadas 1.2, sesion
   terminada 1.5): vacia no ocupa lugar, para no dejar un hueco entre el
   encabezado y los campos cuando no hay nada que avisar. El "gap" de
   .login-card no cuenta a un hijo con display:none. */
.login-card__message:empty {
  display: none;
}

/* Confirmar + Volver, apilados, con 12 px (space.3) entre los dos botones. */
.login-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* .login-card es una columna sin align-items propio: por defecto ("stretch")
   los campos, el banner, los botones y el bloque de acciones ya ocupan todo
   el ancho. El link de alternar codigo/recuperacion es
   la unica excepcion: hugea su propio texto, con el fondo del hover como una
   pildora, no una fila entera. */
.login-card > .link {
  align-self: flex-start;
}

/* Resultado de las pantallas publicas (cuenta activada, contrasena
   actualizada): el icono arriba y el texto debajo, centrados. */
.public-access__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.public-access__success-icon {
  color: var(--color-icon-success);
}

/* El titulo recibe el foco al cambiar de estado (tabindex -1) solo para que
   el lector de pantalla lo anuncie: no es un control, y un anillo de foco
   ahi haria pensar que se puede activar. */
.login-card h1[tabindex="-1"]:focus {
  outline: none;
}

/* Botones de los proveedores externos del segundo paso del login: uno debajo
   del otro y a todo el ancho, con el mismo aire que las acciones apiladas del
   paso de MFA. */
.login-card__providers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Separador "o" entre los proveedores externos y la contraseña local: el texto
   centrado con una linea a cada lado, del mismo color que el divider del kit. */
.login-card__separator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-tertiary);
}

.login-card__separator::before,
.login-card__separator::after {
  content: "";
  flex: 1;
  height: var(--border-width-default);
  background: var(--color-border-subtle);
}