/* ============================================================================
   Pantalla de carga de DSA Compliance
   ----------------------------------------------------------------------------
   Se usa en tres momentos distintos, con el mismo lenguaje visual:
     1. Arranque de la aplicación (splash de App.razor, antes de que conecte el
        circuito: la app va con prerender:false, así que sin esto la primera
        pantalla es un blanco).
     2. Carga de datos de una página (login: "Conectando con tu workspace").
     3. Reconexión de SignalR (overlay propio de Blazor, reestilizado).

   Colores y sombras salen del kit gráfico v2 (assets/kit/tokens/dsa-kit.css).
   Se declaran como respaldo por si el token no está cargado en esa ruta.
   ============================================================================ */

:root {
    --boot-tinta: #171B45;
    --boot-cian: #4BCDE7;
    --boot-acero: #5977B5;
    --boot-violeta: #6D2B8D;
    --boot-texto: #2C2C2A;
    --boot-texto-suave: #5F5E5A;
    --boot-fondo: #F7F8FB;
    --boot-linea: #E3E8F0;
}

.dsa-boot {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background:
        radial-gradient(1100px 620px at 50% -10%, #FFFFFF 0%, var(--boot-fondo) 55%, #EEF1F7 100%);
    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    text-align: center;
    padding: 24px;
}

/* Variante embebida (dentro de una página ya montada, no a pantalla completa) */
.dsa-boot--inline {
    position: static;
    inset: auto;
    min-height: 60vh;
    z-index: auto;
    background: transparent;
}

/* ── Marca + anillo ───────────────────────────────────────────────────────── */
.dsa-boot__mark {
    position: relative;
    width: 148px;
    height: 148px;
    display: grid;
    place-items: center;
}

/* Anillo de progreso indeterminado con el degradado del kit (cian → acero → violeta).
   Se hace con conic-gradient recortado por una máscara, así no necesita SVG ni JS. */
.dsa-boot__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            rgba(75, 205, 231, 0) 0deg,
            var(--boot-cian) 90deg,
            var(--boot-acero) 190deg,
            var(--boot-violeta) 280deg,
            rgba(109, 43, 141, 0) 340deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
    animation: dsa-boot-spin 1.15s linear infinite;
}

/* Pista del anillo, para que se lea también cuando el degradado queda transparente */
.dsa-boot__track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 7px solid var(--boot-linea);
}

.dsa-boot__logo {
    width: 96px;
    height: 96px;
    display: block;
    object-fit: contain;
    /* Latido muy sutil: la marca respira mientras el anillo gira */
    animation: dsa-boot-breathe 2.4s ease-in-out infinite;
}

/* ── Textos ───────────────────────────────────────────────────────────────── */
.dsa-boot__text {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 420px;
}

.dsa-boot__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--boot-tinta);
}

.dsa-boot__sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--boot-texto-suave);
}

/* Barra de avance indeterminada bajo el texto */
.dsa-boot__bar {
    width: 210px;
    height: 4px;
    border-radius: 99px;
    background: var(--boot-linea);
    overflow: hidden;
}

.dsa-boot__bar > i {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--boot-cian), var(--boot-acero), var(--boot-violeta));
    animation: dsa-boot-slide 1.4s ease-in-out infinite;
}

/* ── Reconexión de Blazor: mismo lenguaje que el splash ───────────────────── */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(23, 27, 69, .55);
    backdrop-filter: blur(3px);
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal > .dsa-reconnect {
    background: #fff;
    border-radius: 18px;
    padding: 26px 30px;
    box-shadow: 0 18px 48px rgba(23, 27, 69, .28);
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 440px;
}

.dsa-reconnect__ring {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(75, 205, 231, 0) 0deg, var(--boot-cian) 120deg, var(--boot-violeta) 300deg, rgba(109, 43, 141, 0) 350deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    animation: dsa-boot-spin 1.1s linear infinite;
}

.dsa-reconnect__t { font-size: 14.5px; font-weight: 700; color: var(--boot-tinta); margin: 0 }
.dsa-reconnect__s { font-size: 12.5px; color: var(--boot-texto-suave); margin: 3px 0 0 }

/* Solo se muestra el mensaje que corresponde al estado del intento */
.dsa-reconnect__failed, .dsa-reconnect__rejected { display: none }
#components-reconnect-modal.components-reconnect-failed .dsa-reconnect__show,
#components-reconnect-modal.components-reconnect-rejected .dsa-reconnect__show { display: none }
#components-reconnect-modal.components-reconnect-failed .dsa-reconnect__failed { display: block }
#components-reconnect-modal.components-reconnect-rejected .dsa-reconnect__rejected { display: block }
#components-reconnect-modal.components-reconnect-failed .dsa-reconnect__ring,
#components-reconnect-modal.components-reconnect-rejected .dsa-reconnect__ring { animation: none; opacity: .5 }

/* ── Animaciones ──────────────────────────────────────────────────────────── */
@keyframes dsa-boot-spin { to { transform: rotate(360deg) } }

@keyframes dsa-boot-breathe {
    0%, 100% { transform: scale(1); opacity: .96 }
    50% { transform: scale(1.035); opacity: 1 }
}

@keyframes dsa-boot-slide {
    0% { transform: translateX(-100%) }
    50% { transform: translateX(150%) }
    100% { transform: translateX(-100%) }
}

/* Accesibilidad: sin movimiento, el estado final tiene que seguir leyéndose (regla del kit) */
@media (prefers-reduced-motion: reduce) {
    .dsa-boot__ring, .dsa-boot__logo, .dsa-boot__bar > i, .dsa-reconnect__ring { animation: none }
    .dsa-boot__ring { opacity: .85 }
    .dsa-boot__bar > i { width: 100%; opacity: .6 }
}

@media (max-width: 600px) {
    .dsa-boot__mark { width: 116px; height: 116px }
    .dsa-boot__logo { width: 74px; height: 74px }
    .dsa-boot__title { font-size: 15px }
}