/* ============================================
   PerúClown — Aviso de reconexión de Blazor

   Banner blanco flotante (margen 5px), texto negro, borde punteado y
   progress gris fino arriba. Recargar es solo un icono.
   ============================================ */

.pc-reconnect-host {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
}

.pc-reconnect-host[hidden] {
    display: none;
}

.pc-reconnect-scrim {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    background: rgba(24, 24, 27, 0.38);
    backdrop-filter: grayscale(0.45) brightness(0.82);
    -webkit-backdrop-filter: grayscale(0.45) brightness(0.82);
}

html.pc-circuit-down body > *:not(.pc-reconnect-host):not(.crm-call) {
    filter: grayscale(0.35) brightness(0.84);
    pointer-events: none !important;
    user-select: none !important;
}

.pc-reconnect {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    z-index: 1;
    pointer-events: auto;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));

    background: #ffffff;
    border: 1.5px dotted var(--border, #d4d4d8);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(9, 9, 11, 0.12);

    font-family: var(--font-sans, system-ui);
    font-size: 13px;
    font-weight: 550;
    color: var(--gray-0, #18181b);

    overflow: hidden;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease;
}

.pc-reconnect.is-on {
    opacity: 1;
    transform: translateY(0);
}

/* Progress fino arriba, gris sutil — no llena el alto del banner. */
.pc-reconnect__progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    height: 2px;
    width: 0;
    background: #d4d4d8;
    transform-origin: left center;
    pointer-events: none;
    z-index: 0;
}

.pc-reconnect__progress.is-run {
    animation: pc-reconnect-fill var(--pc-reconnect-ms, 3200ms) linear forwards;
}

@keyframes pc-reconnect-fill {
    from { width: 0; }
    to { width: 100%; }
}

.pc-reconnect__spin,
.pc-reconnect__text,
.pc-reconnect__action {
    position: relative;
    z-index: 1;
}

.pc-reconnect__spin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--gray-40, #71717a);
}

.pc-reconnect__spin .pc-dotm,
.pc-reconnect__spin .dmx-root,
.pc-reconnect__spin .pc-prism-bloom {
    color: inherit;
    filter: none;
}

.pc-reconnect__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-0, #18181b);
    text-shadow: none;
}

.pc-reconnect__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1.5px dotted var(--border, #d4d4d8);
    border-radius: 0;
    background: transparent;
    color: var(--gray-0, #18181b);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pc-reconnect__action svg {
    display: block;
    width: 16px;
    height: 16px;
}

.pc-reconnect__action:hover {
    background: var(--gray-95, #fafafa);
    border-color: var(--gray-40, #71717a);
}

.pc-reconnect__action:focus-visible {
    outline: 2px solid var(--gray-40, #71717a);
    outline-offset: 2px;
}

html.dark .pc-reconnect,
html.dark-layout .pc-reconnect,
[data-theme="dark"] .pc-reconnect {
    background: #18181b;
    border-color: #3f3f46;
    color: #fafafa;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

html.dark .pc-reconnect__text,
html.dark-layout .pc-reconnect__text,
[data-theme="dark"] .pc-reconnect__text {
    color: #fafafa;
}

html.dark .pc-reconnect__progress,
html.dark-layout .pc-reconnect__progress,
[data-theme="dark"] .pc-reconnect__progress {
    background: #52525b;
}

html.dark .pc-reconnect__action,
html.dark-layout .pc-reconnect__action,
[data-theme="dark"] .pc-reconnect__action {
    border-color: #3f3f46;
    color: #fafafa;
}

html.dark .pc-reconnect__action:hover,
html.dark-layout .pc-reconnect__action:hover,
[data-theme="dark"] .pc-reconnect__action:hover {
    background: #27272a;
    border-color: #71717a;
}

@media (max-width: 575.98px) {
    .pc-reconnect {
        font-size: 12.5px;
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-reconnect {
        transition: none;
        transform: none;
    }

    .pc-reconnect__progress.is-run {
        animation: none;
        width: 55%;
        opacity: 0.85;
    }
}