/* Resiliencia de circuito Blazor Server — asset COMPARTIDO del RCL InsCore.Ui.Gadgets.
   Pareja CSS de insResilience.js. Self-contained: usa var(--token, fallback) → en el broker toma sus
   tokens de diseño (glass) y en cliente/Backoffice cae al fallback neutro. Reemplaza la triplicación
   de §15 (reconexión) + §16 (antídoto overlay) por host. */

/* ── Reconexión del circuito (Blazor Server) ───────────────
   Overlay visible cuando se cae la conexión SignalR. Sin esto la app quedaba congelada en silencio.
   Blazor alterna las clases components-reconnect-show/-failed/-rejected sobre el modal. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000; /* por encima de diálogos/popovers MudBlazor */
    align-items: center;
    justify-content: center;
    background: rgba(3, 8, 20, 0.72);
    backdrop-filter: var(--glass-blur, blur(6px));
    -webkit-backdrop-filter: var(--glass-blur, blur(6px));
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.ins-reconnect__box {
    background: var(--glass-bg-heavy, rgba(20, 27, 45, 0.96));
    border: 1px solid var(--glass-border-hover, rgba(148, 163, 184, 0.25));
    border-radius: var(--app-radius-card, 12px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    padding: 28px 36px;
    text-align: center;
    color: #e2e8f0;
    font-family: 'Inter', system-ui, sans-serif;
    max-width: 90vw;
}

.ins-reconnect__spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 16px;
    border: 3px solid rgba(148, 163, 184, 0.25);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: ins-reconnect-spin 0.8s linear infinite;
}

@keyframes ins-reconnect-spin { to { transform: rotate(360deg); } }

.ins-reconnect__msg { margin: 0; font-size: 0.95rem; }

/* El bloque de fallo solo aparece cuando se agotan los reintentos o el circuito es rechazado. */
.ins-reconnect__failed { display: none; }
.components-reconnect-failed .ins-reconnect__failed,
.components-reconnect-rejected .ins-reconnect__failed { display: block; margin-top: 12px; }
/* En fallo/rechazo ocultamos SOLO el mensaje "reconectando…" (lo sustituye el bloque de
   recuperación), pero el spinner SIGUE girando: estamos auto-recargando, no muertos. */
.components-reconnect-failed .ins-reconnect__msg,
.components-reconnect-rejected .ins-reconnect__msg { display: none; }

.ins-reconnect__failed button {
    margin-top: 10px;
    padding: 8px 20px;
    border: none;
    border-radius: var(--app-radius-button, 8px);
    background: #3b82f6;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.ins-reconnect__failed button:hover { background: #2563eb; }

body.ins-light #components-reconnect-modal { background: rgba(15, 23, 42, 0.45); }
body.ins-light .ins-reconnect__box { background: rgba(255, 255, 255, 0.98); color: #0f172a; }

/* ── Antídoto overlay de popover (MudBlazor 8.4) ───────────
   El popover de un MudSelect/MudDatePicker abierto monta un overlay a pantalla completa que tapa los
   botones del diálogo. El primer clic en Cancelar/Aceptar lo "come" ese overlay → "el botón no hace
   nada / el modal no se cierra". Lo hacemos transparente a punteros: el clic llega al botón al PRIMER
   intento. El cierre-al-clic-fuera lo restituye insResilience.js sin consumir el clic real.
   EXCLUSIÓN: el overlay de InsDialog (clase `ins-dialog-overlay`) también vive aquí (se teletransporta
   a la sección de popover), pero SÍ necesita clics (backdrop, botones) → se excluye del antídoto. */
.mud-popover-provider > .mud-overlay:not(.ins-dialog-overlay) {
    pointer-events: none !important;
}

/* ── InsDialog teletransportado ────────────────────────────
   La superficie de InsDialog se emite en el SectionOutlet de la raíz; su `.mud-dialog-container`
   (position:fixed, cubre el viewport) debe quedar POR ENCIMA del scrim de su MudOverlay para recibir
   el clic de backdrop y mostrar el diálogo. Ambos elementos (scrim y contenedor) se teletransportan a
   la raíz y compiten en el MISMO contexto de apilado, así que su orden lo decide el z-index.

   TRES bugs de z-index que fijamos aquí:
   1) Al abrir un popover (calendario/desplegable) DENTRO de un InsDialog, el gestor de overlays de MudBlazor
      SUBE dinámicamente el z-index del scrim del diálogo (visto en vivo: de 1400 a 1601), dejándolo POR
      ENCIMA del diálogo → el velo oscuro se pinta sobre el propio diálogo. Lo PINNEAMOS con !important para
      que el churn de MudBlazor no lo mueva (el !important de hoja gana al z-index inline que inyecta MudOverlay).
   2) `.mud-dialog-container` de MudBlazor (misma especificidad y carga posterior) pisaba nuestro
      `.ins-dialog-container` → el contenedor quedaba empatado/por debajo de su scrim. Subimos especificidad
      (dos clases) + !important para garantizar que el CONTENEDOR quede SIEMPRE por encima de su propio scrim.
   3) 228·2 — «Restaurar por defecto no funciona» (y cualquier confirmación anidada): un MudMessageBox/MudDialog
      ESTÁNDAR abierto DESDE DENTRO de un InsDialog (p. ej. el confirm de «Restaurar plantilla» o el de
      «Redactar con IA» que sobrescribe) nace en el layer de diálogo por defecto de MudBlazor (z-index 1400).
      Si el InsDialog se pinta ENCIMA (1401), su superficie tapa los botones del confirm y se COME el clic →
      «el botón no hace nada». Solución TRANSVERSAL: el InsDialog vive en una banda JUSTO POR DEBAJO del layer
      de diálogo estándar (scrim 1398 < contenedor 1399 < 1400), de modo que CUALQUIER diálogo estándar anidado
      encima gana el apilado y recibe sus clics. El popover de un picker sigue por encima (z ~1600), sin regresión. */
.mud-overlay.ins-dialog-overlay {
    z-index: 1398 !important;
}
.mud-dialog-container.ins-dialog-container {
    z-index: 1399 !important;
}