/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-trqbxjdzh7] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-trqbxjdzh7] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-trqbxjdzh7] {
    background: linear-gradient(180deg, #08111f 0%, #060b16 100%);
    border-right: 1px solid var(--color-border);
}

.top-row[b-trqbxjdzh7] {
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: #060b16b3;
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
}

.top-row[b-trqbxjdzh7]  a, .top-row[b-trqbxjdzh7]  .btn-link {
    white-space: nowrap;
    text-decoration: none;
    font-size: .85rem;
    color: var(--color-text-muted);
}

.top-row[b-trqbxjdzh7]  a:hover, .top-row[b-trqbxjdzh7]  .btn-link:hover {
    color: var(--color-info);
}

.top-row[b-trqbxjdzh7]  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--color-text-subtle);
}

.top-row[b-trqbxjdzh7]  .status-pill i {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--color-info);
    box-shadow: 0 0 0 3px #22d3ee26;
}

@media (max-width: 640.98px) {
    .top-row[b-trqbxjdzh7] {
        justify-content: space-between;
    }
}

@media (min-width: 641px) {
    .page[b-trqbxjdzh7] {
        flex-direction: row;
    }

    .sidebar[b-trqbxjdzh7] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex: none;
    }

    .top-row[b-trqbxjdzh7] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-trqbxjdzh7], article[b-trqbxjdzh7] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-trqbxjdzh7] {
    background: #7f1d1d;
    color: #fee2e2;
    bottom: 0;
    box-shadow: 0 -12px 32px -18px #000;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .reload[b-trqbxjdzh7] {
    color: #fecaca;
}

#blazor-error-ui .dismiss[b-trqbxjdzh7] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-sc675vxkza] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a5b4c6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--color-surface);
}

.navbar-toggler:checked[b-sc675vxkza] {
    background-color: var(--color-surface-hover);
}

.top-row[b-sc675vxkza] {
    min-height: 3.5rem;
    background: transparent;
    border-bottom: 1px solid var(--color-border);
}

/* Marca: "ION" en blanco y ".ASR" con el gradiente, igual que AGM.COCORA. */
.brand[b-sc675vxkza] {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    padding: 0;
}

.brand__mark[b-sc675vxkza] {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: .6rem;
    background: var(--gradient-brand);
    display: grid;
    place-items: center;
    box-shadow: 0 0 18px -4px #22d3ee80;
}

.brand__mark svg[b-sc675vxkza] {
    width: 1.15rem;
    height: 1.15rem;
}

.brand__text[b-sc675vxkza] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand__name[b-sc675vxkza] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    color: var(--color-text);
}

.brand__name em[b-sc675vxkza] {
    font-style: normal;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand__tag[b-sc675vxkza] {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.nav-label[b-sc675vxkza] {
    margin: 1.25rem 0 .35rem;
    padding: 0 1.5rem;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.bi[b-sc675vxkza] {
    display: inline-block;
    position: relative;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.65rem;
    top: -1px;
    background-size: cover;
    opacity: .8;
}

.bi-house-door-fill-nav-menu[b-sc675vxkza] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a5b4c6' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-book-nav-menu[b-sc675vxkza] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a5b4c6' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687z'/%3E%3C/svg%3E");
}

.nav-item[b-sc675vxkza] {
    font-size: 0.88rem;
    padding: 0 .75rem .25rem;
}

.nav-item[b-sc675vxkza]  .nav-link {
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    height: 2.6rem;
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    width: 100%;
    transition: background-color .15s ease, color .15s ease;
}

.nav-item[b-sc675vxkza]  a.active {
    background: linear-gradient(90deg, #22d3ee1f, #22d3ee08);
    color: var(--color-text);
    box-shadow: inset 2px 0 0 var(--color-info);
}

.nav-item[b-sc675vxkza]  .nav-link:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text);
}

.nav-scrollable[b-sc675vxkza] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-sc675vxkza] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-sc675vxkza] {
        display: none;
    }

    .nav-scrollable[b-sc675vxkza] {
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dyecsd36i8],
.components-reconnect-repeated-attempt-visible[b-dyecsd36i8],
.components-reconnect-failed-visible[b-dyecsd36i8],
.components-pause-visible[b-dyecsd36i8],
.components-resume-failed-visible[b-dyecsd36i8],
.components-rejoining-animation[b-dyecsd36i8] {
    display: none;
}

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


#components-reconnect-modal[b-dyecsd36i8] {
    background-color: white;
    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-dyecsd36i8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-dyecsd36i8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dyecsd36i8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-dyecsd36i8 {
    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/Dictado.razor.rz.scp.css */
.asr[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    width: 100%;
}

/* ── Encabezado ───────────────────────────────────────────────────────── */

.asr-header[b-2vwm5t3yx7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.eyebrow[b-2vwm5t3yx7] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-info);
}

.asr-header h1[b-2vwm5t3yx7] {
    margin: .1rem 0 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--color-text);
}

.health[b-2vwm5t3yx7] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    min-width: 18rem;
}

.health__dot[b-2vwm5t3yx7] {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    flex: none;
    background: var(--color-text-subtle);
}

.health--ok .health__dot[b-2vwm5t3yx7] {
    background: var(--color-success);
    box-shadow: 0 0 0 4px #22c55e33;
}

.health--warn .health__dot[b-2vwm5t3yx7] {
    background: var(--color-warning);
    box-shadow: 0 0 0 4px #f59e0b2e;
}

.health--bad .health__dot[b-2vwm5t3yx7] {
    background: var(--color-danger);
    box-shadow: 0 0 0 4px #fb71852e;
}

.health__body[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

.health__body strong[b-2vwm5t3yx7] {
    font-size: .9rem;
    color: var(--color-text);
}

.health__body small[b-2vwm5t3yx7] {
    font-size: .76rem;
    color: var(--color-text-muted);
}

.muted[b-2vwm5t3yx7] {
    color: var(--color-text-subtle) !important;
}

/* ── Rejilla de paneles ───────────────────────────────────────────────── */

/*
 * Rejilla de consola. Por debajo de 1200 px cada panel ocupa el ancho disponible;
 * a partir de ahí se reparte en 12 columnas con tramos explícitos, de modo que no
 * quedan huecos como los que deja auto-fit cuando los paneles tienen alturas distintas.
 */
.asr-grid[b-2vwm5t3yx7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: .85rem;
    align-items: start;
}

.panel[b-2vwm5t3yx7] {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
    box-shadow: var(--shadow-md);
}

.panel--wide[b-2vwm5t3yx7],
.panel--kpi[b-2vwm5t3yx7],
.panel--log[b-2vwm5t3yx7] {
    grid-column: 1 / -1;
}

/* El panel de captura lleva el resplandor de marca: es la acción principal. */
.panel--capture[b-2vwm5t3yx7] {
    background:
        radial-gradient(120% 90% at 50% 0%, #22d3ee14, transparent 62%),
        var(--color-surface-raised);
    border-color: var(--color-border-strong);
}

/*
 * Áreas explícitas en vez de tramos: el flujo automático dejaba una fila casi vacía
 * porque un panel de 8 columnas no cabía en las 3 que quedaban libres. Con áreas, la
 * colocación no depende del orden del DOM y no quedan huecos.
 *
 * Columna izquierda: control. Centro: contenido. Derecha: endpoints y resultados.
 */
@media (min-width: 1200px) {
    .asr-grid[b-2vwm5t3yx7] {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-areas:
            "kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi"
            "cap cap cap tra tra tra tra tra tra seg seg seg"
            "ses ses ses tel tel tel tel tel tel con con con"
            "log log log log log log log log log log log log";
    }

    .panel--kpi[b-2vwm5t3yx7] { grid-area: kpi; }
    .panel--capture[b-2vwm5t3yx7] { grid-area: cap; }
    .panel--transcript[b-2vwm5t3yx7] { grid-area: tra; }
    .panel--segments[b-2vwm5t3yx7] { grid-area: seg; }
    .panel--session[b-2vwm5t3yx7] { grid-area: ses; }
    .panel--telemetry[b-2vwm5t3yx7] { grid-area: tel; }
    .panel--connectors[b-2vwm5t3yx7] { grid-area: con; }
    .panel--log[b-2vwm5t3yx7] { grid-area: log; }
}

/* ── Laboratorio: fila de indicadores ─────────────────────────────────── */

.kpi-window[b-2vwm5t3yx7] {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--color-text-subtle);
}

.kpi-row[b-2vwm5t3yx7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .7rem;
}

.kpi[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .6rem .75rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
    min-width: 0;
}

.kpi__label[b-2vwm5t3yx7] {
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

/*
 * Cifras proporcionales a propósito: tabular-nums da a cada dígito el ancho de un
 * cero y a este tamaño un número corto se ve suelto.
 */
.kpi__value[b-2vwm5t3yx7] {
    display: flex;
    align-items: baseline;
    gap: .2rem;
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text);
}

.kpi__value em[b-2vwm5t3yx7] {
    font-style: normal;
    font-size: .8rem;
    font-weight: 500;
    color: var(--color-text-subtle);
}

.kpi__foot[b-2vwm5t3yx7] {
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--color-text-subtle);
}

.kpi-meters[b-2vwm5t3yx7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .7rem 1.5rem;
    padding-top: .7rem;
    border-top: 1px solid var(--color-border);
}

.panel__title[b-2vwm5t3yx7] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.panel__note[b-2vwm5t3yx7] {
    margin: 0;
    font-size: .82rem;
    color: var(--color-text-muted);
}

.panel__head[b-2vwm5t3yx7] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}

.panel__actions[b-2vwm5t3yx7] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Botón de grabación ───────────────────────────────────────────────── */

.record[b-2vwm5t3yx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gradient-brand);
    color: var(--color-on-accent);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.01em;
    cursor: pointer;
    box-shadow: 0 14px 34px -18px #22d3eecc;
    transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}

.record:hover:not(:disabled)[b-2vwm5t3yx7] {
    filter: brightness(1.09);
    box-shadow: 0 16px 40px -16px #22d3eee6;
}

.record:active:not(:disabled)[b-2vwm5t3yx7] {
    transform: scale(.99);
}

.record:disabled[b-2vwm5t3yx7] {
    background: var(--color-surface-hover);
    color: var(--color-text-subtle);
    box-shadow: none;
    cursor: not-allowed;
}

.record--on[b-2vwm5t3yx7] {
    background: linear-gradient(120deg, #e11d48, #fb7185);
    color: #fff5f6;
    box-shadow: 0 14px 34px -18px #fb7185cc;
}

.record__icon[b-2vwm5t3yx7] {
    width: .95rem;
    height: .95rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.record--on .record__icon[b-2vwm5t3yx7] {
    border-radius: .18rem;
    animation: pulse-b-2vwm5t3yx7 1.4s ease-in-out infinite;
}

@keyframes pulse-b-2vwm5t3yx7 {
    50% {
        opacity: .35;
    }
}

/* ── Estado y medidor ─────────────────────────────────────────────────── */

.state[b-2vwm5t3yx7] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
}

.state div[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.state strong[b-2vwm5t3yx7] {
    font-size: .88rem;
    color: var(--color-text);
}

.state small[b-2vwm5t3yx7] {
    font-size: .76rem;
    color: var(--color-text-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.state__clock[b-2vwm5t3yx7] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-muted);
}

.state__dot[b-2vwm5t3yx7] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex: none;
    background: var(--color-text-subtle);
}

.state__dot--live[b-2vwm5t3yx7] {
    background: var(--color-success);
    box-shadow: 0 0 0 4px #22c55e33;
}

.state__dot--busy[b-2vwm5t3yx7] {
    background: var(--color-warning);
    animation: pulse-b-2vwm5t3yx7 1s ease-in-out infinite;
}

.state__dot--bad[b-2vwm5t3yx7] {
    background: var(--color-danger);
}

.state__dot--done[b-2vwm5t3yx7] {
    background: var(--color-info);
}

.retry[b-2vwm5t3yx7] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .8rem;
    border: 1px solid #f59e0b59;
    border-radius: var(--radius-sm);
    background: #f59e0b14;
}

.retry div[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.retry strong[b-2vwm5t3yx7] {
    font-size: .88rem;
    color: #fcd34d;
}

.retry small[b-2vwm5t3yx7] {
    font-size: .76rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.retry__spinner[b-2vwm5t3yx7] {
    width: .9rem;
    height: .9rem;
    flex: none;
    border-radius: 50%;
    border: 2px solid #f59e0b47;
    border-top-color: var(--color-warning);
    animation: spin-b-2vwm5t3yx7 .8s linear infinite;
}

@keyframes spin-b-2vwm5t3yx7 {
    to {
        transform: rotate(360deg);
    }
}

.meter[b-2vwm5t3yx7] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}

.meter__caption[b-2vwm5t3yx7] {
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    width: 3rem;
}

.meter__track[b-2vwm5t3yx7] {
    flex: 1;
    height: .5rem;
    border-radius: var(--radius-pill);
    background: #0a1220;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.meter__fill[b-2vwm5t3yx7] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    box-shadow: 0 0 12px -2px #22d3ee99;
    transition: width .09s linear;
}

.meter__fill--clip[b-2vwm5t3yx7] {
    background: linear-gradient(90deg, #f59e0b, #fb7185);
    box-shadow: 0 0 12px -2px #fb7185aa;
}

.meter__value[b-2vwm5t3yx7] {
    width: 2.75rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.hint[b-2vwm5t3yx7] {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--color-text-subtle);
}

.hint code[b-2vwm5t3yx7] {
    color: var(--color-sky);
}

.hint--warn[b-2vwm5t3yx7] {
    color: var(--color-warning);
}

/* ── Formularios ──────────────────────────────────────────────────────── */

.fields[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    gap: .95rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.field[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.field > span[b-2vwm5t3yx7] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.field__readout[b-2vwm5t3yx7] {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--color-text-subtle);
}

.field--switch[b-2vwm5t3yx7] {
    flex-direction: row;
    align-items: flex-start;
    gap: .6rem;
}

.field--switch span[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.field--switch small[b-2vwm5t3yx7] {
    font-weight: 400;
    color: var(--color-text-subtle);
}

.field--switch code[b-2vwm5t3yx7],
.field--switch small code[b-2vwm5t3yx7] {
    color: var(--color-sky);
}

.endpoint[b-2vwm5t3yx7] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem .9rem;
    margin: 0;
    padding-top: .85rem;
    border-top: 1px solid var(--color-border);
    font-size: .78rem;
}

.endpoint dt[b-2vwm5t3yx7] {
    color: var(--color-text-subtle);
    font-weight: 500;
}

.endpoint dd[b-2vwm5t3yx7] {
    margin: 0;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* ── Conectores ───────────────────────────────────────────────────────── */

.connectors[b-2vwm5t3yx7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.connector[b-2vwm5t3yx7] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
    overflow: hidden;
    transition: border-color .15s ease;
}

.connector--active[b-2vwm5t3yx7] {
    border-color: var(--color-border-strong);
    background:
        linear-gradient(90deg, #22d3ee14, transparent 55%),
        var(--color-surface-interactive);
}

.connector__pick[b-2vwm5t3yx7] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .7rem .8rem .55rem;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.connector__pick:disabled[b-2vwm5t3yx7] {
    cursor: default;
}

.connector__pick:not(:disabled):hover[b-2vwm5t3yx7] {
    background: var(--color-surface-hover);
}

.connector__dot[b-2vwm5t3yx7] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex: none;
    margin-top: .35rem;
    background: #2a3d57;
}

.connector__dot--ok[b-2vwm5t3yx7] {
    background: var(--color-success);
    box-shadow: 0 0 0 3px #22c55e2e;
}

.connector__dot--warn[b-2vwm5t3yx7] {
    background: var(--color-warning);
}

.connector__dot--bad[b-2vwm5t3yx7] {
    background: var(--color-danger);
}

.connector__body[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    flex: 1;
    min-width: 0;
}

.connector__body strong[b-2vwm5t3yx7] {
    font-size: .88rem;
    color: var(--color-text);
}

.connector__body small[b-2vwm5t3yx7] {
    font-size: .74rem;
    color: var(--color-text-subtle);
}

.connector__body code[b-2vwm5t3yx7] {
    font-size: .7rem;
    color: var(--color-sky);
    overflow-wrap: anywhere;
}

.connector__foot[b-2vwm5t3yx7] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 0 .8rem .65rem;
    font-size: .72rem;
    color: var(--color-text-subtle);
}

.connector__foot > small:first-child[b-2vwm5t3yx7] {
    flex: 1;
    min-width: 8rem;
}

.connector__warn[b-2vwm5t3yx7] {
    color: var(--color-warning);
}

.connector-add[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding-top: .6rem;
    border-top: 1px solid var(--color-border);
}

/* ── Transcripción ────────────────────────────────────────────────────── */

.transcript[b-2vwm5t3yx7] {
    min-height: 9rem;
    max-height: 17rem;
    overflow-y: auto;
    padding: .9rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        radial-gradient(80% 60% at 50% -8%, #22d3ee0f, transparent 55%),
        var(--color-bg-elevated);
    font-size: 1.05rem;
    line-height: 1.7;
}

.transcript p[b-2vwm5t3yx7] {
    margin: 0 0 .5rem;
}

.transcript__empty[b-2vwm5t3yx7] {
    color: var(--color-text-subtle);
    font-size: .9rem;
}

.transcript__final[b-2vwm5t3yx7] {
    color: var(--color-text);
}

.transcript__confirmed[b-2vwm5t3yx7] {
    color: var(--color-text-muted);
}

.transcript__partial[b-2vwm5t3yx7] {
    color: var(--color-text-subtle);
    font-style: italic;
}

.legend[b-2vwm5t3yx7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    font-size: .74rem;
    color: var(--color-text-subtle);
}

.legend span[b-2vwm5t3yx7] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.swatch[b-2vwm5t3yx7] {
    width: .65rem;
    height: .65rem;
    border-radius: .2rem;
    display: inline-block;
}

.swatch--final[b-2vwm5t3yx7] {
    background: var(--color-text);
}

.swatch--confirmed[b-2vwm5t3yx7] {
    background: var(--color-text-muted);
}

.swatch--partial[b-2vwm5t3yx7] {
    background: var(--color-text-subtle);
}

.counter[b-2vwm5t3yx7] {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--color-text-subtle);
}

/* ── Telemetría ───────────────────────────────────────────────────────── */

.stats[b-2vwm5t3yx7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: .6rem;
}

.stat[b-2vwm5t3yx7] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
}

.stat small[b-2vwm5t3yx7] {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-subtle);
}

/* Aquí sí es una columna de números que deben alinearse: tabular-nums corresponde. */
.stat strong[b-2vwm5t3yx7] {
    font-family: var(--font-mono);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.stat--warn[b-2vwm5t3yx7] {
    border-color: #f59e0b59;
    background: #f59e0b14;
}

.stat--warn strong[b-2vwm5t3yx7] {
    color: #fcd34d;
}

.raw pre[b-2vwm5t3yx7] {
    margin: .5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #060b16;
    color: var(--color-sky);
    font-size: .74rem;
    max-height: 14rem;
    overflow: auto;
}

.raw summary[b-2vwm5t3yx7] {
    cursor: pointer;
    font-size: .8rem;
    color: var(--color-text-subtle);
}

.raw summary:hover[b-2vwm5t3yx7] {
    color: var(--color-info);
}

/* ── Segmentos ────────────────────────────────────────────────────────── */

.segments[b-2vwm5t3yx7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 17rem;
    overflow-y: auto;
}

.segments li[b-2vwm5t3yx7] {
    padding: .65rem .8rem;
    border: 1px solid var(--color-border);
    border-left: 2px solid var(--color-success-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
}

.segments__head[b-2vwm5t3yx7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--color-text-subtle);
    margin-bottom: .35rem;
}

.segments p[b-2vwm5t3yx7] {
    margin: 0;
    font-size: .92rem;
    color: var(--color-text);
}

.segments details[b-2vwm5t3yx7] {
    margin-top: .4rem;
    font-size: .78rem;
    color: var(--color-text-subtle);
}

.segments details summary[b-2vwm5t3yx7] {
    cursor: pointer;
}

.segments details summary:hover[b-2vwm5t3yx7] {
    color: var(--color-info);
}

.segments details ul[b-2vwm5t3yx7] {
    margin: .3rem 0 0;
    padding-left: 1.1rem;
}

/* ── Registro ─────────────────────────────────────────────────────────── */

.log[b-2vwm5t3yx7] {
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #060b16;
    font-family: var(--font-mono);
    font-size: .76rem;
}

.log__row[b-2vwm5t3yx7] {
    display: grid;
    grid-template-columns: 6.5rem 5rem 1fr;
    gap: .6rem;
    padding: .32rem .8rem;
    border-bottom: 1px solid #0f1a2b;
    color: var(--color-text-muted);
}

.log__row:last-child[b-2vwm5t3yx7] {
    border-bottom: 0;
}

.log__row time[b-2vwm5t3yx7] {
    color: #4d6180;
}

.log__source[b-2vwm5t3yx7] {
    color: var(--color-info-strong);
}

.log__message[b-2vwm5t3yx7] {
    overflow-wrap: anywhere;
}

.log__row--warn .log__message[b-2vwm5t3yx7] {
    color: #fcd34d;
}

.log__row--error .log__message[b-2vwm5t3yx7] {
    color: var(--color-danger);
}

@media (max-width: 640px) {
    .log__row[b-2vwm5t3yx7] {
        grid-template-columns: 5.5rem 1fr;
    }

    .log__source[b-2vwm5t3yx7] {
        display: none;
    }
}
/* /Components/Shared/LimitMeter.razor.rz.scp.css */
.limit[b-3eqqxl0jqa] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.limit__head[b-3eqqxl0jqa] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}

.limit__label[b-3eqqxl0jqa] {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.limit__reading[b-3eqqxl0jqa] {
    display: flex;
    align-items: baseline;
    gap: .3rem;
}

/* Cifras proporcionales: tabular-nums afloja un número corto a este tamaño. */
.limit__reading strong[b-3eqqxl0jqa] {
    font-size: 1rem;
    color: var(--color-text);
}

.limit__reading small[b-3eqqxl0jqa] {
    font-size: .72rem;
    color: var(--color-text-subtle);
}

.limit__track[b-3eqqxl0jqa] {
    height: .45rem;
    border-radius: var(--radius-pill);
    overflow: hidden;
    /* Pista: paso más claro de la misma rampa que el relleno. */
    background: #123243;
}

.limit__fill[b-3eqqxl0jqa] {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-info);
    transition: width .25s ease, background-color .25s ease;
}

.limit__state[b-3eqqxl0jqa] {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    color: var(--color-text-subtle);
}

[data-severity="warning"] .limit__track[b-3eqqxl0jqa] {
    background: #43320f;
}

[data-severity="warning"] .limit__fill[b-3eqqxl0jqa] {
    background: var(--color-warning);
}

[data-severity="warning"] .limit__state[b-3eqqxl0jqa] {
    color: var(--color-warning);
}

[data-severity="critical"] .limit__track[b-3eqqxl0jqa] {
    background: #451f28;
}

[data-severity="critical"] .limit__fill[b-3eqqxl0jqa] {
    background: var(--color-danger);
}

[data-severity="critical"] .limit__state[b-3eqqxl0jqa] {
    color: var(--color-danger);
}
/* /Components/Shared/Sparkline.razor.rz.scp.css */
.spark[b-1kbu5r10av] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.spark__base[b-1kbu5r10av] {
    stroke: #16233a;
    stroke-width: 1;
}

.spark__line[b-1kbu5r10av] {
    fill: none;
    stroke: #3f8ea3;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.spark__dot[b-1kbu5r10av] {
    fill: #22d3ee;
    /* Anillo del color de la superficie: mantiene el punto legible donde cruza el trazo. */
    stroke: #0b1422;
    stroke-width: 2;
}

.spark__idle[b-1kbu5r10av] {
    fill: #4d6180;
    font-size: 10px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}