/* ════════════════════════════════════════════════════════════════════════════════════════════
   reconexion.css — CARTEL PROPIO DE RECONEXIÓN DE BLAZOR (15-sep-2026)

   Blazor Server busca un elemento con id="components-reconnect-modal". Si existe, le va poniendo
   clases según el estado del circuito y NO dibuja su cartel en inglés:
     .components-reconnect-show     → se perdió la conexión, está reintentando
     .components-reconnect-hide     → reconectado (ocultar)
     .components-reconnect-failed   → se agotaron los reintentos (un clic llama Blazor.reconnect())
     .components-reconnect-rejected → el servidor ya no tiene el circuito (un clic recarga)
   Además rellena .components-reconnect-current-attempt y .components-reconnect-max-retries.

   Colores FIJOS (gris oscuro / blanco) a propósito: el cartel es una capa por encima de la app y
   tiene que leerse igual en los 4 temas (vibrante / esmeralda / linear / monday).
   ════════════════════════════════════════════════════════════════════════════════════════════ */

#components-reconnect-modal {
    display: none;
}

/* Overlay a pantalla completa en cualquiera de los 3 estados visibles. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* por encima de modales de Bootstrap y del banner de avisos */
    align-items: center;
    justify-content: center;
    /* !important: blazor.server.js INYECTA su propia hoja de estilos para este id (overlay claro);
       sin esto gana la del framework y el cartel queda lavado. */
    background: rgba(17, 24, 39, 0.72) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 1 !important;
    animation: none !important;
}

/* Reconectado: fuera. */
#components-reconnect-modal.components-reconnect-hide {
    display: none !important;
}

/* Cada bloque de estado oculto por defecto; se muestra SOLO el del estado actual. */
#components-reconnect-modal .reconexion-bloque {
    display: none;
    max-width: 520px;
    margin: 16px;
    padding: 24px 28px;
    border-radius: 14px;
    background: #ffffff !important;
    color: #1f2937 !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.5;
}

#components-reconnect-modal.components-reconnect-show   .reconexion-reintentando,
#components-reconnect-modal.components-reconnect-failed .reconexion-fallo,
#components-reconnect-modal.components-reconnect-rejected .reconexion-vencida {
    display: block;
}

#components-reconnect-modal .reconexion-titulo {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 8px;
    display: block;
}

#components-reconnect-modal .reconexion-detalle {
    color: #4b5563;
    font-size: .95rem;
}

/* Los dos estados terminales son clicables (Blazor engancha el clic del modal). */
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    cursor: pointer;
}

#components-reconnect-modal .reconexion-fallo,
#components-reconnect-modal .reconexion-vencida {
    border-top: 4px solid #d97706;
}

#components-reconnect-modal .reconexion-vencida {
    border-top-color: #dc2626;
}

/* Puntitos animados para que se vea que sigue intentando. */
#components-reconnect-modal .reconexion-puntos::after {
    content: '';
    animation: reconexion-puntos 1.2s steps(4, end) infinite;
}

@keyframes reconexion-puntos {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}