/* REM4-01 — armazon EXCLUSIVO de Auth/Pages/IdentitySelector.razor via Auth/AnonymousCardLayout.razor.
   Fondo neutro + tarjeta centrada con sombra suave, MISMOS tokens Fluent que el resto del portal
   (tokens.css) — la referencia visual es la tarjeta centrada del login del inquilino externo
   (decision del owner, _reference/selector-de-identidad-referencia.md), NUNCA el armazon F&O
   (TopBar/NavRail): esta pantalla no existe en Dynamics F&O, asi que ninguna imagen del catalogo
   d365-fno-design-language la gobierna. */

.d365-anon-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m365-surface-page);
  padding: var(--m365-space-5);
  font-family: var(--m365-font-family);
}

.d365-anon-card {
  width: 100%;
  max-width: 420px;
  background: var(--m365-surface-card);
  border-radius: var(--m365-radius-md);
  box-shadow: var(--m365-shadow-card);
  border: 1px solid var(--m365-stroke-divider);
  padding: var(--m365-space-6) var(--m365-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--m365-space-4);
}

.d365-anon-brand {
  font-size: var(--m365-fs-body-lg);
  font-weight: var(--m365-fw-semibold);
  color: var(--m365-text-primary);
  text-align: center;
}

.d365-anon-title {
  font-size: var(--m365-fs-title);
  font-weight: var(--m365-fw-semibold);
  color: var(--m365-text-primary);
  text-align: center;
  margin: 0;
}

.d365-anon-subtitle {
  font-size: var(--m365-fs-body);
  color: var(--m365-text-secondary);
  text-align: center;
  margin: 0;
}

/* Dos opciones DENTRO de la tarjeta (decision del owner) — nunca fuera de ella ni en una
   pantalla aparte. */
.d365-anon-options {
  display: flex;
  flex-direction: column;
  gap: var(--m365-space-3);
}

.d365-anon-option {
  display: flex;
  align-items: center;
  gap: var(--m365-space-3);
  width: 100%;
  padding: var(--m365-space-4);
  border: 1px solid var(--m365-stroke-control);
  border-radius: var(--m365-radius-sm);
  background: var(--m365-surface-card);
  color: var(--m365-text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.d365-anon-option:hover {
  border-color: var(--m365-accent-80);
  background: var(--m365-surface-hover);
}

.d365-anon-option:focus-visible {
  outline: 2px solid var(--m365-stroke-focus);
  outline-offset: 2px;
}

.d365-anon-option-icon {
  color: var(--m365-accent-80);
  flex-shrink: 0;
}

.d365-anon-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.d365-anon-option-title {
  font-size: var(--m365-fs-body-lg);
  font-weight: var(--m365-fw-semibold);
}

.d365-anon-option-desc {
  font-size: var(--m365-fs-caption);
  color: var(--m365-text-secondary);
}

/* ~360px de ancho (responsive.md): la tarjeta y su relleno se reducen antes que desbordar. */
@media (max-width: 400px) {
  .d365-anon-page {
    padding: var(--m365-space-3);
  }

  .d365-anon-card {
    padding: var(--m365-space-5) var(--m365-space-4);
  }
}