/* Vista de carga global: cubre esperas de SQL Server / round-trip al servidor.
   Variables --loader-* las inyecta _DbLoader.cshtml desde la marca del tenant. */

.app-db-loader {
    --loader-primary: #0b1f33;
    --loader-primary-rgb: 11 31 51;
    --loader-secondary-rgb: 196 163 90;
    --loader-accent: #c4a35a;
    --loader-ink: #142033;
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    color: var(--loader-ink);
    font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

.app-db-loader[hidden] {
    display: none !important;
}

.app-db-loader__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(42rem 28rem at 12% -8%, rgb(var(--loader-primary-rgb) / 0.28), transparent 62%),
        radial-gradient(36rem 24rem at 92% 0%, rgb(var(--loader-secondary-rgb) / 0.55), transparent 58%),
        rgb(248 250 252 / 0.62);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
}

.app-db-loader__bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    overflow: hidden;
    background: rgb(var(--loader-primary-rgb) / 0.12);
}

.app-db-loader__bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--loader-primary), var(--loader-accent), transparent);
    animation: app-db-loader-bar 1.15s ease-in-out infinite;
}

.app-db-loader__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: min(22.5rem, 100%);
    padding: 1.75rem 1.5rem 1.6rem;
    text-align: center;
    border-radius: 1.35rem;
    background: rgb(255 255 255 / 0.78);
    border: 1px solid rgb(255 255 255 / 0.62);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.7) inset,
        0 1px 2px rgb(var(--loader-primary-rgb) / 0.04),
        0 24px 50px -22px rgb(var(--loader-primary-rgb) / 0.45);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    animation: app-db-loader-in 0.28s ease-out;
}

.app-db-loader__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.95), transparent);
    pointer-events: none;
}

.app-db-loader__logo {
    height: 2.25rem;
    width: auto;
    max-width: 9rem;
    object-fit: contain;
}

.app-db-loader__orb {
    position: relative;
    width: 4.75rem;
    height: 4.75rem;
    display: grid;
    place-items: center;
}

.app-db-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid transparent;
}

.app-db-loader__ring--outer {
    border-top-color: var(--loader-primary);
    border-right-color: rgb(var(--loader-primary-rgb) / 0.25);
    animation: app-db-loader-spin 0.9s linear infinite;
}

.app-db-loader__ring--inner {
    inset: 0.55rem;
    border-bottom-color: var(--loader-accent);
    border-left-color: rgb(var(--loader-secondary-rgb) / 0.35);
    animation: app-db-loader-spin 1.25s linear infinite reverse;
}

.app-db-loader__glyph {
    width: 1.55rem;
    height: 1.55rem;
    color: var(--loader-primary);
    opacity: 0.9;
}

.app-db-loader__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--loader-ink);
}

.app-db-loader__sub {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: rgb(var(--loader-primary-rgb) / 0.62);
}

body.app-db-loader-open {
    overflow: hidden;
}

@keyframes app-db-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes app-db-loader-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(280%); }
}

@keyframes app-db-loader-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-db-loader__ring,
    .app-db-loader__bar::after,
    .app-db-loader__card {
        animation: none;
    }

    .app-db-loader__ring--outer {
        border-color: rgb(var(--loader-primary-rgb) / 0.25);
        border-top-color: var(--loader-primary);
    }
}

@media print {
    .app-db-loader {
        display: none !important;
    }
}