/* Pantalla de carga de la PWA (primera visita: descarga del runtime) con la firma de Ekklesia y barra de
   progreso. Blazor expone el avance en --blazor-load-percentage. Aquí todavía no existen las variables
   --ek-* (las escribe Blazor al arrancar): los valores son copia de Tokens.cs (Fondo, Texto, Primario,
   Marca*) y deben cambiar junto con él. */
.ek-carga-inicial {
    --ci-fondo: #F4F5F8; --ci-texto: #5B616E; --ci-pista: #E0E3E9; --ci-barra: #4F46E5;
    --ci-marca-1: #0146B3; --ci-marca-2: #066C91; --ci-acento: #D06E00;
    position: fixed; inset: 0; overflow-x: hidden; display: grid; place-content: center; justify-items: center; gap: 14px;
    background: var(--ci-fondo); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ek-carga-inicial__logo {
    /* Misma escala fluida que MarcaEkklesia.razor (ekklesia-reportes.css): sin saltos al cambiar de tamaño. */
    width: clamp(96px, 72px + 6.1vw, 160px); height: clamp(96px, 72px + 6.1vw, 160px); object-fit: contain;
    filter: drop-shadow(0 14px 30px color-mix(in srgb, var(--ci-marca-1) 38%, transparent));
}
.ek-carga-inicial__nombre {
    position: relative; padding-bottom: 0.16em; margin-bottom: 18px;
    font-size: clamp(1.75rem, 1.1rem + 2.667vw, 3.5rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; color: var(--ci-marca-1);
    background: linear-gradient(105deg, var(--ci-marca-1) 12%, var(--ci-marca-2) 88%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ek-carga-inicial__nombre::after {
    content: ""; position: absolute; left: 0.06em; bottom: 0; width: 64%; height: 0.09em; border-radius: 999px;
    background: linear-gradient(90deg, var(--ci-acento) 0%, color-mix(in srgb, var(--ci-acento) 55%, transparent) 70%, transparent 100%);
}
.ek-carga-inicial__barra { width: 160px; height: 4px; border-radius: 4px; background: var(--ci-pista); overflow: hidden; }
.ek-carga-inicial__barra::after {
    content: ""; display: block; height: 100%; background: var(--ci-barra);
    width: var(--blazor-load-percentage, 0%); transition: width 150ms ease-out;
}
.ek-carga-inicial__texto { font-size: 0.75rem; color: var(--ci-texto); font-variant-numeric: tabular-nums; }
.ek-carga-inicial__texto::after { content: var(--blazor-load-percentage-text, "Cargando…"); }

@media (prefers-color-scheme: dark) {
    .ek-carga-inicial {
        --ci-fondo: #1A1B1F; --ci-texto: #A8ADB5; --ci-pista: #31343A; --ci-barra: #8B93F8;
        --ci-marca-1: #5AA9FF; --ci-marca-2: #3FD0E8; --ci-acento: #FCB001;
    }
}