/* ════════════════════════════════════════════════════════════════════
   AVISO DE RECONEXIÓN — Erp
   Lo que ve el cliente final cuando se corta la conexión con el sistema.

   POR QUÉ EXISTE
   Blazor Server mantiene la pantalla viva por un socket. Si el socket se
   cae, el navegador reintenta solo. De fábrica ese reintento se anuncia
   con un cartel EN INGLÉS, sin marca y sin explicación: una línea pegada
   arriba que dice «Attempting to reconnect to the server: 1 of 8» sobre
   toda la pantalla blanqueada. Medido en esta misma app antes del cambio.
   Este archivo lo reemplaza por un aviso propio, en español de Chile, que
   además EXPLICA qué pasa con lo que el usuario estaba escribiendo.

   LA ESCALERA DE DIVULGACIÓN (los umbrales los aplica js/reconnect.js)
     0 → 1,2 s   nada. Un parpadeo de WiFi se resuelve en el primer o
                 segundo reintento y asustar por eso es ruido.
     1,2 → 6 s   PASTILLA abajo a la derecha. Avisa, no bloquea.
     desde 6 s   HOJA centrada. Explica y SÍ bloquea la entrada, porque a
                 partir de ahí lo que el usuario teclee no llega al
                 servidor y el campo se ve lleno sin estarlo.

   DE DÓNDE SALEN LOS COLORES
   De la paleta del ERP por las variables de MudBlazor, nunca de un
   hexadecimal crudo, para que el tema claro y el oscuro sigan solos. Los
   semánticos se MEZCLAN con --mud-palette-text-primary con la misma
   receta de dialog-system.css: el ámbar crudo de la paleta sobre su
   propio fondo daba 1,75:1 de contraste —texto invisible—.

   ⚠ POR QUÉ EL id SE LLAMA components-reconnect-modal
   Es el id que Blazor busca de fábrica (`dialogId` por omisión). Nuestro
   manejador propio no lo necesita —él mismo pinta las clases .erp-rx--*—,
   pero si js/reconnect.js no llegara a cargar, el manejador de fábrica
   toma el relevo y busca EXACTAMENTE ese id. Al conservarlo, el camino
   degradado sigue mostrando esta hoja en español en vez del cartel en
   inglés. Por eso más abajo hay un bloque que traduce las clases de
   fábrica (components-reconnect-show/failed/rejected/hide) a las nuestras.

   ⚠ POR QUÉ HAY !important Y SELECTORES CON EL id
   MudBlazor.min.css trae reglas propias sobre ese mismo id:
       #components-reconnect-modal { z-index:9999!important;
                                     background-color:var(--mud-palette-background)!important }
       #components-reconnect-modal button { margin:40px auto!important;
                                            text-transform:uppercase; ... }
   Esta hoja carga DESPUÉS que MudBlazor (ver _Host.cshtml), así que a
   igual peso gana la última; para los botones hace falta además calificar
   con el id, porque «#id button» (1,0,1) le gana a «.clase .clase» (0,2,0).
   ════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · RAÍZ Y PALETA ═══ */
#components-reconnect-modal.erp-rx {
    /* Anula el fondo opaco que MudBlazor le pone al id: el velo es nuestro. */
    background: transparent !important;
    /* Por encima de todo lo de MudBlazor (diálogos 1400, snackbar 2000) y del
       propio 9999 que MudBlazor fuerza acá. */
    z-index: 12000 !important;

    position: fixed;
    inset: 0;
    display: none;
    /* La raíz nunca se come un clic; sólo lo hacen el velo y la hoja. Así la
       pastilla puede aparecer sin bloquear la pantalla. */
    pointer-events: none;

    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;

    --rx-surf: var(--mud-palette-surface);
    --rx-surf2: var(--mud-palette-background-gray);
    --rx-txt: var(--mud-palette-text-primary);
    --rx-dim: var(--mud-palette-text-secondary);
    --rx-lines: var(--mud-palette-lines-default);
    --rx-primary: var(--mud-palette-primary);
    --rx-primary-txt: var(--mud-palette-primary-text);

    --rx-verde: color-mix(in srgb, var(--mud-palette-success) 55%, var(--mud-palette-text-primary));
    --rx-verde-bg: color-mix(in srgb, var(--mud-palette-success) 13%, var(--mud-palette-surface));
    --rx-verde-bd: color-mix(in srgb, var(--mud-palette-success) 40%, var(--mud-palette-surface));
    --rx-ambar: color-mix(in srgb, var(--mud-palette-warning) 45%, var(--mud-palette-text-primary));
    --rx-ambar-bg: color-mix(in srgb, var(--mud-palette-warning) 17%, var(--mud-palette-surface));
    --rx-ambar-bd: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-surface));
    --rx-rojo: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
    --rx-rojo-bg: color-mix(in srgb, var(--mud-palette-error) 11%, var(--mud-palette-surface));
    --rx-rojo-bd: color-mix(in srgb, var(--mud-palette-error) 45%, var(--mud-palette-surface));
}

/* Las dos vistas que enciende nuestro manejador, y las de fábrica que las
   emulan si nuestro JS no llegó a cargar. */
#components-reconnect-modal.erp-rx.erp-rx--v-pastilla,
#components-reconnect-modal.erp-rx.erp-rx--v-hoja,
#components-reconnect-modal.erp-rx.components-reconnect-show,
#components-reconnect-modal.erp-rx.components-reconnect-failed,
#components-reconnect-modal.erp-rx.components-reconnect-rejected {
    display: block;
}

/* ═══ 2 · VELO — el que bloquea de verdad ═══
   Sólo existe en la hoja. Se come el clic y difumina lo de atrás para que se
   lea sin ambigüedad que la pantalla está en pausa. */
.erp-rx-velo {
    display: none;
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--mud-palette-background) 72%, transparent);
    -webkit-backdrop-filter: blur(3px) saturate(.85);
    backdrop-filter: blur(3px) saturate(.85);
}

.erp-rx--v-hoja .erp-rx-velo,
.components-reconnect-show .erp-rx-velo,
.components-reconnect-failed .erp-rx-velo,
.components-reconnect-rejected .erp-rx-velo {
    display: block;
    pointer-events: auto;
}

/* ═══ 3 · PASTILLA — el aviso liviano (1,2 s → 6 s) ═══
   Abajo a la derecha, fuera del camino. No bloquea nada: a esa altura el
   corte todavía puede ser un parpadeo y el usuario no tiene por qué frenar. */
.erp-rx-pastilla {
    display: none;
    position: absolute;
    right: 20px;
    bottom: 20px;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--rx-ambar-bg);
    border: 1px solid var(--rx-ambar-bd);
    color: var(--rx-ambar);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .01em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
    animation: erp-rx-entra .18s ease-out;
}

.erp-rx--v-pastilla .erp-rx-pastilla {
    display: inline-flex;
    pointer-events: auto;
}

/* Confirmación: la misma pastilla, en verde. */
.erp-rx--c-ok .erp-rx-pastilla,
.erp-rx--c-ok-revisar .erp-rx-pastilla {
    background: var(--rx-verde-bg);
    border-color: var(--rx-verde-bd);
    color: var(--rx-verde);
}

.erp-rx-rueda {
    width: 13px;
    height: 13px;
    flex: none;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--rx-ambar) 30%, transparent);
    border-top-color: var(--rx-ambar);
    animation: erp-rx-gira .7s linear infinite;
}

.erp-rx-visto {
    display: none;
    font-size: 14px;
    line-height: 1;
}

.erp-rx--c-ok .erp-rx-rueda,
.erp-rx--c-ok-revisar .erp-rx-rueda {
    display: none;
}

.erp-rx--c-ok .erp-rx-visto,
.erp-rx--c-ok-revisar .erp-rx-visto {
    display: inline;
}

/* La pastilla tiene los cuatro textos en el HTML y muestra el que toca. Lo mismo
   que en la hoja: la redacción no la arma el JS. */
.erp-rx-txt {
    display: none;
}

.erp-rx--c-reconectando .erp-rx-txt[data-para="reconectando"],
.erp-rx--c-sin-red .erp-rx-txt[data-para="sin-red"],
.erp-rx--c-ok .erp-rx-txt[data-para="ok"],
.erp-rx--c-ok-revisar .erp-rx-txt[data-para="ok-revisar"] {
    display: inline;
}

/* Sin red la ruedita miente: no estamos intentando nada, estamos esperando que
   vuelva la conexión. Se apaga y queda el punto quieto. */
.erp-rx--c-sin-red .erp-rx-rueda {
    animation: none;
    border-top-color: color-mix(in srgb, var(--rx-ambar) 30%, transparent);
}

/* ═══ 4 · HOJA — el aviso que explica y bloquea (desde los 6 s) ═══ */
.erp-rx-hoja {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    flex-direction: column;
    background: var(--rx-surf);
    color: var(--rx-txt);
    border: 1px solid var(--rx-lines);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    outline: none;
    animation: erp-rx-sube .22s cubic-bezier(.2, .7, .3, 1);
}

.erp-rx--v-hoja .erp-rx-hoja,
.components-reconnect-show .erp-rx-hoja,
.components-reconnect-failed .erp-rx-hoja,
.components-reconnect-rejected .erp-rx-hoja {
    display: flex;
    pointer-events: auto;
}

/* ─── Cabecera: la marca del producto ───
   Que se vea de quién es el aviso. Un cartel sin marca parece del navegador
   y el cliente no sabe a quién reclamarle. */
.erp-rx-marca {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--rx-lines);
    background: var(--rx-surf2);
    border-radius: 14px 14px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rx-dim);
}

.erp-rx-marca .erp-rx-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rx-ambar);
    box-shadow: 0 0 0 3px var(--rx-ambar-bg);
    animation: erp-rx-late 1.4s ease-in-out infinite;
}

.erp-rx--c-agotado .erp-rx-marca .erp-rx-punto,
.erp-rx--c-rechazado .erp-rx-marca .erp-rx-punto,
.erp-rx--c-vencida .erp-rx-marca .erp-rx-punto,
.components-reconnect-failed .erp-rx-marca .erp-rx-punto,
.components-reconnect-rejected .erp-rx-marca .erp-rx-punto {
    background: var(--rx-rojo);
    box-shadow: 0 0 0 3px var(--rx-rojo-bg);
    animation: none;
}

.erp-rx-marca .erp-rx-nombre {
    color: var(--mud-palette-text-primary);
}

/* ─── Cuerpo ─── */
.erp-rx-cuerpo {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Sólo se muestra el caso vigente. Toda la redacción vive en el HTML, no la
   arma el JS: si el JS se cae, el texto igual está y sigue siendo el correcto. */
.erp-rx-caso {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.erp-rx--c-reconectando .erp-rx-caso[data-caso="reconectando"],
.erp-rx--c-sin-red .erp-rx-caso[data-caso="sin-red"],
.erp-rx--c-agotado .erp-rx-caso[data-caso="agotado"],
.erp-rx--c-rechazado .erp-rx-caso[data-caso="rechazado"],
.erp-rx--c-vencida .erp-rx-caso[data-caso="vencida"],
.components-reconnect-show .erp-rx-caso[data-caso="reconectando"],
.components-reconnect-failed .erp-rx-caso[data-caso="agotado"],
.components-reconnect-rejected .erp-rx-caso[data-caso="rechazado"] {
    display: flex;
}

.erp-rx-titulo {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--rx-txt);
}

.erp-rx-texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--rx-dim);
}

/* El recuadro de consecuencias. Es el corazón del aviso: dice qué se salva y
   qué no. Ámbar mientras hay esperanza, rojo cuando ya no la hay. */
.erp-rx-aviso {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--rx-ambar-bg);
    border: 1px solid var(--rx-ambar-bd);
    font-size: 13px;
    line-height: 1.5;
    color: var(--rx-txt);
}

.erp-rx-aviso .erp-rx-ico {
    flex: none;
    font-size: 14px;
    line-height: 1.5;
}

.erp-rx-aviso strong {
    font-weight: 700;
}

.erp-rx-aviso.malo {
    background: var(--rx-rojo-bg);
    border-color: var(--rx-rojo-bd);
}

/* ─── Contador de intentos: la prueba visible de que el sistema trabaja ─── */
.erp-rx-progreso {
    display: none;
    flex-direction: column;
    gap: 7px;
}

.erp-rx--c-reconectando .erp-rx-progreso,
.erp-rx--c-sin-red .erp-rx-progreso,
.components-reconnect-show .erp-rx-progreso {
    display: flex;
}

.erp-rx-barra {
    height: 4px;
    border-radius: 999px;
    background: var(--rx-lines);
    overflow: hidden;
}

.erp-rx-barra > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--rx-primary);
    transition: width .3s ease;
}

.erp-rx-contador {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--rx-dim);
    letter-spacing: .01em;
}

/* ─── Pie de botones ─── */
.erp-rx-pie {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-top: 1px solid var(--rx-lines);
    background: var(--rx-surf2);
    border-radius: 0 0 14px 14px;
}

.erp-rx-pie .der {
    margin-left: auto;
    display: flex;
    gap: 9px;
}

/* ⚠ Calificado con el id a propósito: MudBlazor trae
   «#components-reconnect-modal button { margin:40px auto!important; ... }», que
   con (1,0,1) le gana a cualquier selector de puras clases. Con (1,1,0) ganamos. */
#components-reconnect-modal .erp-rx-btn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    padding: 9px 18px;
    margin: 0 !important;
    min-width: 0;
    border-radius: 8px;
    border: 1px solid var(--rx-lines);
    background: var(--rx-surf);
    color: var(--rx-txt);
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    /* Cada botón declara en data-para los casos donde tiene sentido. */
    display: none;
}

#components-reconnect-modal .erp-rx-btn:hover {
    border-color: var(--rx-primary);
    color: var(--rx-primary);
    background: var(--rx-surf);
}

#components-reconnect-modal .erp-rx-btn.pri {
    background: var(--rx-primary);
    border-color: var(--rx-primary);
    color: var(--rx-primary-txt);
}

#components-reconnect-modal .erp-rx-btn.pri:hover {
    filter: brightness(1.08);
    color: var(--rx-primary-txt);
}

#components-reconnect-modal .erp-rx-btn.tenue {
    border-color: transparent;
    background: transparent;
    color: var(--rx-dim);
    font-weight: 600;
    padding: 9px 12px;
}

#components-reconnect-modal .erp-rx-btn.tenue:hover {
    background: var(--rx-lines);
    color: var(--rx-txt);
}

/* Qué botón aparece en cada caso.

   ⚠ EL ID VA TAMBIÉN ACÁ, Y NO ES DECORATIVO.
   La regla base de arriba está calificada con #components-reconnect-modal para ganarle al
   estilo de MudBlazor, y eso la deja en (1,1,0). Estas reglas, con puras clases, quedaban
   en (0,3,0): un id le gana a CUALQUIER cantidad de clases, así que el `display:none` de
   la base ganaba siempre y NINGÚN botón aparecía en NINGÚN estado. Se vio en pantalla: el
   modal de «Tu sesión de trabajo ya no está disponible» salía con el pie vacío, sin su
   botón «Recargar la página», dejando al usuario sin salida visible.
   Las clases de estado las pone el modal sobre SÍ MISMO, así que van pegadas al id
   (selector compuesto, sin espacio) y suben a (1,3,0). */
#components-reconnect-modal.erp-rx--c-reconectando .erp-rx-btn[data-para~="reconectando"],
#components-reconnect-modal.erp-rx--c-sin-red .erp-rx-btn[data-para~="sin-red"],
#components-reconnect-modal.erp-rx--c-agotado .erp-rx-btn[data-para~="agotado"],
#components-reconnect-modal.erp-rx--c-rechazado .erp-rx-btn[data-para~="rechazado"],
#components-reconnect-modal.erp-rx--c-vencida .erp-rx-btn[data-para~="vencida"],
#components-reconnect-modal.components-reconnect-show .erp-rx-btn[data-para~="reconectando"],
#components-reconnect-modal.components-reconnect-failed .erp-rx-btn[data-para~="agotado"],
#components-reconnect-modal.components-reconnect-rejected .erp-rx-btn[data-para~="rechazado"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ═══ 5 · CAMINO DEGRADADO ═══
   Si js/reconnect.js no cargó, manda el manejador de fábrica. Ése sólo sabe de
   cuatro clases y escribe el número de intento en dos <span> por id. La hoja de
   arriba ya las contempla; acá sólo queda apagar lo que el de fábrica no maneja
   y asegurar que «hide» y el estado inicial (sin clase) estén ocultos. */
#components-reconnect-modal.erp-rx.components-reconnect-hide {
    display: none;
}

/* El de fábrica no distingue pastilla de hoja: siempre va la hoja. Y no tiene
   cuenta regresiva, así que ese trozo se esconde. */
.components-reconnect-show .erp-rx-espera,
.components-reconnect-failed .erp-rx-espera,
.components-reconnect-rejected .erp-rx-espera {
    display: none;
}

/* ═══ 6 · LA APP SE ROMPIÓ, NO LA CONEXIÓN ═══
   Cuando el error es de render, Blazor NI SIQUIERA intenta reconectar
   (verificado en el bundle: onclose sale antes si _renderingFailed). El usuario
   sólo ve #blazor-error-ui, que de fábrica es una franja roja plana con un
   enlace subrayado. Es la pantalla hermana de la de arriba y tiene que estar a
   la misma altura, con la misma voz. */
#blazor-error-ui {
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-top: 3px solid color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-surface)) !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .22) !important;
    padding: 14px 52px 14px 20px !important;
    z-index: 12000 !important;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    display: none;
}

#blazor-error-ui .erp-err-caja {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}

#blazor-error-ui .erp-err-ico {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: color-mix(in srgb, var(--mud-palette-error) 11%, var(--mud-palette-surface));
    color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 45%, var(--mud-palette-surface));
}

#blazor-error-ui .erp-err-txt {
    flex: 1;
    min-width: 0;
}

#blazor-error-ui .erp-err-txt b {
    display: block;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

#blazor-error-ui .erp-err-txt span {
    color: var(--mud-palette-text-secondary);
}

#blazor-error-ui .reload {
    flex: none;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text) !important;
}

#blazor-error-ui .reload:hover {
    filter: brightness(1.08);
}

#blazor-error-ui .dismiss {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 15px;
    line-height: 1;
}

/* ═══ 7 · MOVIMIENTO ═══ */
@keyframes erp-rx-gira {
    to { transform: rotate(360deg); }
}

@keyframes erp-rx-late {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@keyframes erp-rx-entra {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes erp-rx-sube {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Quien pidió menos movimiento no necesita una ruedita girando encima de un
   problema. El aviso igual aparece; sólo se queda quieto. */
@media (prefers-reduced-motion: reduce) {
    .erp-rx-rueda,
    .erp-rx-marca .erp-rx-punto,
    .erp-rx-pastilla,
    .erp-rx-hoja {
        animation: none !important;
    }

    .erp-rx-barra > i {
        transition: none;
    }
}

/* ═══ 8 · PANTALLA CHICA ═══ */
@media (max-width: 520px) {
    .erp-rx-hoja {
        width: calc(100vw - 20px);
        border-radius: 12px;
    }

    .erp-rx-pastilla {
        right: 12px;
        bottom: 12px;
        left: 12px;
        justify-content: center;
    }

    .erp-rx-pie {
        flex-wrap: wrap;
    }

    .erp-rx-pie .der {
        width: 100%;
        justify-content: flex-end;
    }
}