/* PANTALLA DE CARGA — encargo del owner (2026-08-15), en sus palabras: al pulsar "Soy proveedor"
   o "Soy personal interno" el portal "trata de pintar la pagina, parpadea 1 o 2 veces y luego entra
   a la pagina del login de Entra ID"; lo que quiere en su lugar es "una pantalla de tipo carga como
   viene en Dynamics, donde sale centrado el nombre de la aplicacion, el logo y un circulo de carga".

   REFERENCIA VISUAL — DECLARADO, no disimulado: el catalogo de la skill
   (.claude/skills/d365-fno-design-language/references/visual-reference-images.md, §1 y §2b) cita
   "_reference/image_D365Carga.png" como LA referencia de la pantalla de carga de este proyecto, pero
   ESE ARCHIVO NO EXISTE en el repositorio y nunca existio (ni en el arbol ni en el historial de git).
   Lo unico que el catalogo conserva de el es su descripcion textual: "the loading splash is the
   Dynamics 365 glyph centered". Asi que esta superficie se construye desde DOS fuentes reales, nunca
   desde una invencion:
     1. La descripcion literal del propio owner (nombre + logo + circulo de carga, centrados).
     2. El lenguaje visual ya medido del inquilino real (tokens.css): Segoe UI, rampa de acento
        Fluent, superficie de pagina #f3f3f3, tipo oracion.
   ⚠⚠ EL FONDO DE ESTA PANTALLA ES OSCURO A PROPOSITO. NO LO "ARMONICES" CON EL RESTO DEL PORTAL. ⚠⚠

   Es el UNICO fondo sobre el que el logo del portal EXISTE. El activo que entrego el owner
   (wwwroot/img/logo-portal.svg) tiene exactamente dos colores — blanco #fff y turquesa #71e4d1 —,
   o sea que esta disenado para fondo oscuro. Contraste WCAG medido (luminancia relativa + ratio,
   2026-08-15):

     | color del logo | sobre #f3f3f3 (claro) | sobre #001433 (este navy) |
     | blanco  #fff   |        1.11 : 1       |        18.29 : 1          |
     | turq. #71e4d1  |        1.38 : 1       |        11.95 : 1          |

   Para calibrar: 1.00:1 es "identico al fondo", y el texto normal del portal da 13.99:1. Sobre
   fondo claro NO se pierde "media marca": se pierden LAS DOS TINTAS — 3 elementos blancos y 11
   turquesa, es decir el dibujo entero. Sobre --m365-surface-card (#ffffff) el blanco da 1.00:1,
   literalmente invisible.

   Y LO QUE HACE ESTO TRAICIONERO: WCAG EXIME EXPLICITAMENTE A LOS LOGOTIPOS de sus minimos de
   contraste (1.4.3 y 1.4.11). Poner este logo sobre claro NO incumple nada y NINGUN auditor
   automatico lo marcara jamas — solo lo caza un ojo humano mirando la pantalla. Por eso la
   advertencia vive aqui, en el CSS, y no en un informe: quien venga a unificar paletas dentro de
   dos meses tiene que leer esto ANTES de tocar la linea de 'background'.

   DECISION DEL OWNER (2026-08-15), no criterio nuestro: se le presento el diagnostico con opciones
   (variante clara del logo / fondo oscuro / placa de marca / recolorear) y eligio FONDO OSCURO SOLO
   EN LA PANTALLA DE CARGA, con el mismo navy de la barra superior. Recolorear el SVG quedo
   descartado por ambas partes: es identidad de marca, no una decision de implementacion. NO existe
   variante del logo para fondo claro — se pregunto, y este SVG es el unico que hay.

   TODOS los colores de aqui salen de tokens QUE YA EXISTEN (--m365-topbar-bg/-fg,
   --m365-topbar-pill-border, --m365-accent-100): ni uno inventado para esta pantalla.

   REFERENCIA VISUAL — SIGUE FALTANDO, y conviene no olvidarlo: no hay ninguna captura de la
   pantalla de carga real de F&O ni en la skill (14 capturas de UAT, ninguna es el splash) ni en
   _reference/. Asi que el fondo oscuro NO se justifica con "asi lo hace Dynamics" — eso no se ha
   podido comprobar —, sino con la decision del owner y con las cifras de arriba.

   TRES ALOJAMIENTOS, UN SOLO ASPECTO — por eso 'min-height: 100vh' y no un porcentaje:
     a) Pre-arranque, dentro de '#app' en index.html (HTML estatico: Blazor todavia no existe).
     b) MainLayout, rama "_authenticationStateResolved == false" (hijo directo de '.d365-shell').
     c) MainLayout, rutas de transito de identidad ("/entrar/{plano}", "/authentication/*"), donde
        la pagina (EnterAs / PortalAuthentication) pinta el splash dentro de '.d365-shell-content'.
   En (b) y (c) el contenedor es un flex con altura definida, y en (a) es un div suelto sin altura
   ninguna; '100vh' es la UNICA medida correcta en los tres a la vez, y en (b)/(c) coincide exacto
   porque en ambos casos la barra superior NO se pinta. Deliberadamente NO se toca '#app' con reglas
   de layout: en cuanto Blazor arranca, ese mismo nodo pasa a alojar '.d365-shell' (height:100vh,
   flex column) y convertirlo en contenedor flex encogeria el armazon entero. */

.d365-splash {
  flex: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--m365-space-6) var(--m365-space-5);
  /* OSCURO A PROPOSITO — ver la advertencia de la cabecera antes de tocar esta linea: es el unico
     fondo sobre el que el logo del portal es visible (1.11:1 sobre claro contra 18.29:1 aqui), y
     ningun auditor automatico lo detectara si se cambia, porque WCAG exime a los logotipos. */
  background: var(--m365-topbar-bg);
  font-family: var(--m365-font-family);
}

/* Rutas de transito de identidad (MainLayout.IsIdentityTransitRoute): sin barra ni rail, el area
   de contenido ES la ventana — se vuelve contenedor flex para que el splash de la pagina alojada
   la ocupe entera en vez de quedar pegado arriba. */
.d365-shell-content-transit {
  display: flex;
}

.d365-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--m365-space-4);
  text-align: center;
}

/* LA MARCA — el logo real del portal (wwwroot/img/logo-portal.svg), entregado por el owner el
   2026-08-15. Sustituyo al glifo provisional de nueve puntos, que era un apano declarado mientras
   no habia activo. Ese glifo YA NO existe en ningun sitio: D-117 (2026-08-17) lo retiro tambien de
   la barra superior (su ultimo consumidor real, 'Shared/Shell/TopBar.razor'), que ahora pinta este
   MISMO logo — 'Shared/Icons/WaffleGlyph.razor' se elimino del arbol. */
.d365-splash-mark {
  display: flex;
}

/* ACOTADO POR ANCHO, nunca por alto: el activo es un lockup horizontal (viewBox 500 x 179.34,
   proporcion ~2.79:1). Fijarle una altura lo deforma o lo deja diminuto; 'height: auto' deja que la
   proporcion la ponga el propio SVG. 'max-width: 100%' es lo que lo mantiene dentro en pantallas
   estrechas sin necesidad de otra media query. */
.d365-splash-logo {
  width: 240px;
  max-width: 100%;
  height: auto;
}

/* Sobre navy, el texto se invierte al blanco del propio armazon (18.29:1). */
.d365-splash-brand {
  font-size: var(--m365-fs-title);
  font-weight: var(--m365-fw-semibold);
  color: var(--m365-topbar-fg);
}

/* El "circulo de carga" del encargo: anillo con un solo cuarto acentuado, girando — el indicador
   circular indeterminado de Fluent. Consume la rampa de acento de tokens.css, nunca un color fijo. */
/* Invertido para el navy con DOS tokens que ya existian: el anillo tenue reutiliza el mismo trazo
   sutil que la barra superior ya usa sobre este fondo (--m365-topbar-pill-border), y el arco toma
   el escalon claro de la rampa de acento (--m365-accent-100, 6.51:1 sobre el navy — por encima del
   3:1 que 1.4.11 pide a un grafico). Los valores de antes (accent-150 / accent-80) estaban
   calculados para fondo claro y aqui se apagaban. */
.d365-splash-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--m365-topbar-pill-border);
  border-top-color: var(--m365-accent-100);
  animation: d365-splash-spin 1.1s linear infinite;
}

@keyframes d365-splash-spin {
  to {
    transform: rotate(360deg);
  }
}

/* WCAG 2.3.3 / invariantes de interaccion: con "reducir movimiento" activo el giro NO se suprime
   (seria un indicador de progreso muerto, un control que miente sobre si algo esta pasando) — se
   ralentiza hasta dejar de ser movimiento rapido. */
@media (prefers-reduced-motion: reduce) {
  .d365-splash-spinner {
    animation-duration: 3s;
  }
}

/* Tambien invertido al blanco del armazon, y NO a un blanco atenuado: el portal no tiene ningun
   token de "texto secundario sobre oscuro", y fabricar un rgba nuevo para una sola superficie es
   peor que perder un punto de jerarquia — que aqui la sigue dando el TAMANO (13px frente a los 21px
   de la marca), no el color. */
.d365-splash-message {
  font-size: var(--m365-fs-body);
  color: var(--m365-topbar-fg);
}

/* ~360px (responsive.md): el splash nunca desborda; solo se aprieta. */
@media (max-width: 400px) {
  .d365-splash {
    padding: var(--m365-space-5) var(--m365-space-4);
  }
}