@import '_content/Noventa.UI.Components/Noventa.UI.Components.w8gn9i832j.bundle.scp.css';

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/*
    EL MODAL NO APARECE MIENTRAS EL PRIMER INTENTO SIGUE EN MARCHA.

    En el movil, cambiar de aplicacion unos segundos basta para que el sistema CIERRE el WebSocket,
    y al volver salia el cartel de «Reconectando» aunque la reconexion durara un parpadeo. El
    mensaje asustaba mas que el problema: parecia que la aplicacion se hubiera caido cuando ya
    estaba lista.

    CUATRO SEGUNDOS, Y EL NUMERO ESTA MEDIDO. Por el tunel, `/_blazor/negotiate` cuesta entre 0,55
    y 0,78 s desde una conexion buena; sumar el apreton de manos del WebSocket y reenganchar el
    circuito se va a un par de segundos, y desde un movil con datos bastante mas. El primer margen
    fue de 1,5 s y se quedo corto: con 6 o 7 segundos fuera, el cartel volvia a salir.

    NO ES SOLO ESPERAR MAS. Lo que hace segura esta espera es la regla de abajo: en cuanto un
    intento FALLA de verdad, el modal se ve al instante. Asi que el silencio solo dura mientras hay
    motivos para creer que la cosa va a salir bien.

    Con `animation` y no `transition` a proposito: hace falta un retardo que corra solo al abrirse,
    y una transicion necesitaria un cambio de clase que aqui no controlamos.
*/
#components-reconnect-modal[open][b-nujta6u7r8] {
    opacity: 0;
    animation: nv-reconexion-aparece-b-nujta6u7r8 220ms ease-out 4000ms forwards;
}

@keyframes nv-reconexion-aparece-b-nujta6u7r8 {
    to { opacity: 1; }
}

/*
    SE VE AL INSTANTE SOLO CUANDO YA NO SE VA A ARREGLAR SOLO.

    `retrying` NO entra aqui, y esa fue una correccion: significa «fallo un intento y voy a por el
    siguiente», o sea que todavia se esta recuperando. Enseñarlo de inmediato hacia que un unico
    intento fallido —cosa normal al volver de segundo plano, cuando el sistema acaba de cerrar el
    socket— sacara el cartel aunque el intento siguiente funcionara. Era el motivo de que el aviso
    siguiera saliendo a partir de cinco segundos fuera.

    `failed` es otra cosa: Blazor se rindio y hay que pulsar algo. Y `paused` / `resume-failed` los
    decide el servidor. En esos tres el usuario tiene que enterarse ya.
*/
#components-reconnect-modal.components-reconnect-failed[open][b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-paused[open][b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-rejected[open][b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-resume-failed[open][b-nujta6u7r8] {
    opacity: 1;
    animation: none;
}

.components-reconnect-first-attempt-visible[b-nujta6u7r8],
.components-reconnect-repeated-attempt-visible[b-nujta6u7r8],
.components-reconnect-failed-visible[b-nujta6u7r8],
.components-reconnect-rejected-visible[b-nujta6u7r8],
.components-pause-visible[b-nujta6u7r8],
.components-resume-failed-visible[b-nujta6u7r8],
.components-rejoining-animation[b-nujta6u7r8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-retrying[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-failed[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-rejected[b-nujta6u7r8],
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected-visible[b-nujta6u7r8] {
    display: block;
}

/*
    LOS DOS MENSAJES A LA VEZ.

    `update()` de Blazor NO limpia las clases: cuando toca esperar entre intentos AÑADE
    `retrying` encima de `show`. Con las reglas de arriba se cumplian las dos, y el cuadro decia
    «Reconectando...» y «No se pudo reconectar» uno debajo del otro. Manda el segundo, que es el
    que trae la cuenta atras.
*/
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-nujta6u7r8] {
    display: none;
}

/*
    Y EL BOTON DE REINTENTAR SE ADELANTA A LOS SEIS MINUTOS.

    El calendario de Blazor son 30 intentos: diez seguidos, diez cada 5 s y diez cada 30 s. O sea
    que `failed` —el unico estado que traia boton— tarda unos SEIS MINUTOS en llegar. Hasta
    entonces el usuario solo podia mirar el circulo, aunque su internet ya hubiera vuelto.

    Es el mismo boton y la misma funcion `retry()`, que se puede llamar en cualquier estado.
*/
#components-reconnect-modal.components-reconnect-retrying #components-reconnect-button[b-nujta6u7r8] {
    display: block;
}


/*
    EL COLOR DEL TEXTO SE DECLARA AQUI, Y ESE ERA EL FALLO GORDO.

    El cuadro fijaba `background-color: white` pero no decia nada del texto, asi que lo heredaba
    del <body>. En tema OSCURO eso es #f5f5f5: texto casi blanco sobre caja blanca. Medido en el
    navegador -caja rgb(255,255,255), texto rgb(255,255,255)- o sea INVISIBLE.

    Lo que quedaba en pantalla era una caja blanca vacia con el circulo azul latiendo, porque el
    #0087ff del circulo si esta fijado. Y ahi se quedaba hasta seis minutos, sin que el usuario
    pudiera leer que estaba pasando ni que habia un boton esperandole al final.

    Va con los tokens del tema —viven en [data-nv-theme] sobre <html>, asi que alcanzan al
    <dialog>— y con respaldo fijo: esto es lo unico que le habla al usuario cuando algo va mal, y
    tiene que leerse incluso si la hoja de estilos no llego.
*/
#components-reconnect-modal[b-nujta6u7r8] {
    background-color: var(--nv-surface, #ffffff);
    color: var(--nv-text, #0a0a0a);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-nujta6u7r8 0.5s both;
    &[open] {
        animation: components-reconnect-modal-slideUp-b-nujta6u7r8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-nujta6u7r8 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }
}

#components-reconnect-modal[b-nujta6u7r8]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-nujta6u7r8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-nujta6u7r8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-nujta6u7r8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-nujta6u7r8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-nujta6u7r8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-nujta6u7r8] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-nujta6u7r8] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-nujta6u7r8] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-nujta6u7r8] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-nujta6u7r8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-nujta6u7r8] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-nujta6u7r8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-nujta6u7r8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-nujta6u7r8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Diagnostico/Latencia.razor.rz.scp.css */
/* CSS aislado y no clases de Tailwind, y no es capricho.
   app.css se compila A MANO con `npm run css:build:web` y se sube compilado: una utilidad que no
   estuviera ya en ese archivo simplemente no pintaria nada, y el sintoma seria una pantalla
   desmaquetada sin ningun error. Aqui se usan las variables --nv-*, que si viven en el CSS que ya
   se sirve. */

.lat[b-e51wbozq7b] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 68rem;
}

.lat-cabecera h1[b-e51wbozq7b] {
    font-size: 1.5rem;
    color: var(--nv-text);
    margin: 0 0 0.35rem;
}

.lat-cabecera p[b-e51wbozq7b] {
    color: var(--nv-muted);
    font-size: 0.875rem;
    margin: 0;
    max-width: 52rem;
}

.lat-controles[b-e51wbozq7b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.lat-campo[b-e51wbozq7b] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lat-campo > span[b-e51wbozq7b] {
    font-size: 0.75rem;
    color: var(--nv-muted);
    font-weight: var(--nv-weight-label);
}

.lat-progreso[b-e51wbozq7b] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--nv-muted);
    min-height: 1.25rem;
}

.lat-aviso[b-e51wbozq7b] {
    border: 1px solid var(--nv-warning);
    background: var(--nv-warning-bg);
    color: var(--nv-text);
    border-radius: var(--nv-radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    margin: 0;
}

.lat-tabla[b-e51wbozq7b] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--nv-surface);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-md);
    overflow: hidden;
}

.lat-tabla th[b-e51wbozq7b],
.lat-tabla td[b-e51wbozq7b] {
    padding: 0.6rem 0.75rem;
    text-align: right;
    border-bottom: 1px solid var(--nv-border-subtle);
    color: var(--nv-text);
    /* Tabulares: sin esto las columnas de milisegundos bailan al cambiar de cifra y comparar dos
       filas de un vistazo deja de ser posible. */
    font-variant-numeric: tabular-nums;
}

.lat-tabla th[b-e51wbozq7b] {
    background: var(--nv-surface-muted);
    color: var(--nv-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lat-tabla th:first-child[b-e51wbozq7b],
.lat-tabla td:first-child[b-e51wbozq7b] {
    text-align: left;
}

.lat-tabla tbody tr:last-child td[b-e51wbozq7b] {
    border-bottom: none;
}

.lat-detalle[b-e51wbozq7b] {
    display: block;
    color: var(--nv-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.lat-destacado[b-e51wbozq7b] {
    font-weight: 600;
}

.lat-fallos[b-e51wbozq7b] {
    color: var(--nv-danger);
    font-weight: 600;
}

.lat-nota[b-e51wbozq7b] {
    font-size: 0.8125rem;
    color: var(--nv-muted);
    margin: 0;
}

.lat-informe[b-e51wbozq7b] {
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-md);
    background: var(--nv-surface);
}

.lat-informe-barra[b-e51wbozq7b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--nv-border-subtle);
}

.lat-informe-barra h2[b-e51wbozq7b] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--nv-text);
}

.lat-informe pre[b-e51wbozq7b] {
    margin: 0;
    padding: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--nv-text);
    /* El informe lleva lineas largas a proposito (el agente del navegador). Que ruede en su propia
       caja y no empuje el ancho de la pagina. */
    overflow-x: auto;
    white-space: pre;
}

.lat-banco[b-e51wbozq7b] {
    border: 1px dashed var(--nv-border-strong);
    border-radius: var(--nv-radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lat-banco h2[b-e51wbozq7b] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--nv-muted);
    font-weight: var(--nv-weight-label);
}

.lat-banco-fila[b-e51wbozq7b] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.lat-faro[b-e51wbozq7b] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--nv-muted);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-sm);
    padding: 0.4rem 0.6rem;
    background: var(--nv-surface-muted);
    white-space: nowrap;
}