/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-d1vp8b1yxu],
.components-reconnect-repeated-attempt-visible[b-d1vp8b1yxu],
.components-reconnect-failed-visible[b-d1vp8b1yxu],
.components-pause-visible[b-d1vp8b1yxu],
.components-resume-failed-visible[b-d1vp8b1yxu],
.components-rejoining-animation[b-d1vp8b1yxu] {
    display: none;
}

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


#components-reconnect-modal[b-d1vp8b1yxu] {
    /* MudBlazor.min.css trae `#components-reconnect-modal { background-color: var(--mud-palette-background) !important }`
       para tematizar el modal de reconexión por defecto del framework. Ese modal vive fuera del subtree de
       MudThemeProvider, así que la variable no resuelve y el fondo queda transparente. `!important` en la regla
       scoped (más específica) recupera el fondo sólido del componente. */
    background-color: white !important;
    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-d1vp8b1yxu 0.5s both;
    &[open]

{
    /* La reconexión es un momento de estrés: la entrada debe sentirse responsiva,
       no una diapositiva de 1,8 s. ~280 ms con curva ease-out fuerte. */
    animation: components-reconnect-modal-slideUp-b-d1vp8b1yxu 0.28s cubic-bezier(0.23, 1, 0.32, 1), components-reconnect-modal-fadeInOpacity-b-d1vp8b1yxu 0.28s ease-out;
    animation-fill-mode: both;
}

}

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

@keyframes components-reconnect-modal-slideUp-b-d1vp8b1yxu {
    0% {
        transform: translateY(16px) scale(0.97);
    }

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

    /* El ripple crece con transform: scale() (GPU) en vez de animar
       top/left/width/height (layout + paint cada frame). */
    .components-rejoining-animation div[b-d1vp8b1yxu] {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        transform: scale(0);
        animation: components-rejoining-animation-b-d1vp8b1yxu 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-d1vp8b1yxu {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    4.9% {
        transform: scale(0);
        opacity: 0;
    }

    5% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Reconexión: respeta prefers-reduced-motion — sin slide ni ripple expansivo,
   solo opacidad (mantiene la comprensión del estado «reconectando»). */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[open][b-d1vp8b1yxu] {
        animation: components-reconnect-modal-fadeInOpacity-b-d1vp8b1yxu 0.28s ease-out both;
    }

    .components-rejoining-animation div[b-d1vp8b1yxu] {
        transform: scale(0.9);
        animation: components-reconnect-modal-fadeInOpacity-b-d1vp8b1yxu 1.2s ease-in-out infinite alternate;
    }
}
/* /Components/Pages/Admin/AxisChannelPolicy.razor.rz.scp.css */
/* AxisChannelPolicy.razor — matriz capacidad × canal del alcance de Axis.
   CSS isolation solo marca los elementos HTML LITERALES de este fichero ("Scoped CSS only applies to HTML
   elements and not to Razor components"): los MudButton renderizan su propio <button> en su árbol, así que
   se alcanzan con ::deep desde un ancestro literal real (.hlx-acp-panel-head, .hlx-acp-retry,
   .hlx-acp-dialog-actions). Los interruptores son <input> nativos de HlxToggle y ya traen su foco, su
   estado deshabilitado y su respeto por prefers-reduced-motion desde app.css. */

.hlx-acp-panel[b-qa2iwk49vj] {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg);
    background: var(--helix-panel);
}

.hlx-acp-panel-head[b-qa2iwk49vj] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.hlx-acp-legend[b-qa2iwk49vj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
    max-width: 78ch;
    font-size: .8125rem;
    color: var(--helix-muted);
}

.hlx-acp-retry[b-qa2iwk49vj] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* La matriz gana columnas al sumarse un canal: se desplaza dentro de su caja, nunca la página. */
.hlx-acp-scroll[b-qa2iwk49vj] {
    overflow-x: auto;
}

.hlx-acp-matrix[b-qa2iwk49vj] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.hlx-acp-caption[b-qa2iwk49vj] {
    /* Descripción para lector de pantalla: el título visible ya lo dice arriba. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hlx-acp-matrix thead th[b-qa2iwk49vj] {
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--helix-border);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--helix-muted);
    white-space: nowrap;
}

.hlx-acp-col-channel[b-qa2iwk49vj] {
    width: 220px;
}

.hlx-acp-matrix tbody tr[b-qa2iwk49vj] {
    transition: background-color 140ms ease;
}

.hlx-acp-matrix tbody tr:hover[b-qa2iwk49vj],
.hlx-acp-matrix tbody tr:focus-within[b-qa2iwk49vj] {
    background: var(--helix-panel-2);
}

.hlx-acp-matrix tbody th[b-qa2iwk49vj],
.hlx-acp-matrix tbody td[b-qa2iwk49vj] {
    padding: 14px 12px;
    border-bottom: 1px solid var(--helix-line, var(--helix-border));
    vertical-align: top;
}

.hlx-acp-cap[b-qa2iwk49vj] {
    font-weight: 400;
    max-width: 46ch;
}

.hlx-acp-cap-name[b-qa2iwk49vj] {
    display: block;
    font-size: var(--fs-body, .9375rem);
    font-weight: 600;
    color: var(--helix-text);
}

.hlx-acp-cap-desc[b-qa2iwk49vj] {
    display: block;
    margin-top: 4px;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--helix-muted);
}

.hlx-acp-cell[b-qa2iwk49vj] {
    white-space: nowrap;
}

.hlx-acp-tag[b-qa2iwk49vj] {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border: 1px solid var(--helix-border);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--helix-text);
    background: var(--helix-panel-2);
}

/* Lo que sale hacia el cliente: aviso real, no adorno. */
.hlx-acp-tag--egress[b-qa2iwk49vj] {
    margin-top: 0;
    border-color: var(--helix-warning, #B45309);
    background: color-mix(in srgb, var(--helix-warning, #B45309) 14%, var(--helix-panel));
}

.hlx-acp-cap .hlx-acp-tag--egress[b-qa2iwk49vj] {
    margin: 6px 0 0 8px;
}

.hlx-acp-tag--overridden[b-qa2iwk49vj] {
    border-style: dashed;
    color: var(--helix-muted);
}

.hlx-acp-cell .hlx-acp-tag--overridden[b-qa2iwk49vj] {
    margin-left: 10px;
}

.hlx-acp-dialog-actions[b-qa2iwk49vj] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

/* ── Foco y estado de los controles de MudBlazor (::deep desde ancestros literales) ─────────────── */

.hlx-acp-panel-head[b-qa2iwk49vj]  .hlx-acp-btn:focus-visible,
.hlx-acp-retry[b-qa2iwk49vj]  .hlx-acp-btn:focus-visible,
.hlx-acp-dialog-actions[b-qa2iwk49vj]  .hlx-acp-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.hlx-acp-dialog-actions[b-qa2iwk49vj]  .hlx-acp-btn {
    /* Altura mínima táctil: confirmar y cancelar también se pulsan con el dedo. */
    min-height: 44px;
}

.hlx-acp-panel-head[b-qa2iwk49vj]  .hlx-acp-btn:disabled,
.hlx-acp-dialog-actions[b-qa2iwk49vj]  .hlx-acp-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.hlx-acp-dialog[b-qa2iwk49vj]  .mud-input-slot:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .hlx-acp-matrix tbody tr[b-qa2iwk49vj] {
        transition: none;
    }
}
/* /Components/Pages/Admin/AxisEmail.razor.rz.scp.css */
/* AxisEmail.razor — cola de aprobación del canal email de Axis: cada fila es una tarjeta
   plana en reposo (hairline, sin sombra), eleva solo en hover/focus como el resto de /admin. */

.hlx-axis-email-row[b-rto1lsp620] {
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.hlx-axis-email-row:hover[b-rto1lsp620],
.hlx-axis-email-row:focus-within[b-rto1lsp620] {
    box-shadow: var(--helix-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
}

.hlx-axis-email-row .mud-button-root[b-rto1lsp620] {
    min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
    .hlx-axis-email-row[b-rto1lsp620] {
        transition: none;
    }
}

/* Procedencia Axis (Earned-Violet, --st-new): SOLO para marcar que la propuesta viene de la IA. */
.hlx-axis-email-provenance[b-rto1lsp620] {
    color: var(--st-new);
    flex-shrink: 0;
}

.hlx-axis-email-grid[b-rto1lsp620] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.hlx-axis-email-body[b-rto1lsp620] {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 10px 12px;
    border: 1px solid var(--helix-line);
    border-radius: 8px;
    background: var(--helix-panel);
    max-height: 220px;
    overflow-y: auto;
}

.hlx-axis-email-chip-neutral.mud-chip[b-rto1lsp620] {
    background: var(--helix-panel-2);
    color: var(--helix-muted);
}

/* Historial: origen «Asistente» (auto-enviado, sin ticket) — Earned-Violet, --st-new: es
   procedencia de Axis, nunca un estado de error/alerta. */
.hlx-axis-email-chip-assistant.mud-chip[b-rto1lsp620] {
    background: var(--st-new-bg);
    color: var(--st-new);
}

/* Historial: paginación y filtros viven fuera de .hlx-axis-email-row, así que el área táctil
   mínima (44px) se declara aparte para botones e inputs. */
.hlx-axis-email-pager.mud-button-root[b-rto1lsp620] {
    min-height: 44px;
}

.hlx-axis-email-filter-select[b-rto1lsp620],
.hlx-axis-email-filter-date[b-rto1lsp620] {
    min-width: 200px;
}

.hlx-axis-email-filter-select .mud-input.mud-input-outlined .mud-input-slot[b-rto1lsp620],
.hlx-axis-email-filter-date .mud-input.mud-input-outlined .mud-input-slot[b-rto1lsp620] {
    min-height: 44px;
}

.hlx-axis-email-client-search[b-rto1lsp620] {
    min-width: 260px;
}

.hlx-axis-email-autocomplete-empty[b-rto1lsp620] {
    font-size: var(--fs-compact);
}

/* Historial: disparador del detalle de artículos consultados (Earned-Violet, --st-new: es
   procedencia/razonamiento de Axis, igual que las fuentes de KB en TicketDetalle). Área táctil
   mínima 44px, igual que el resto de botones de esta pantalla. */
.hlx-axis-email-sources-trigger[b-rto1lsp620] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: var(--st-new-bg);
    color: var(--st-new);
    font: inherit;
    font-size: var(--fs-compact);
    cursor: pointer;
    transition: box-shadow .12s var(--ease-out), transform .12s var(--ease-out);
}

.hlx-axis-email-sources-trigger:hover[b-rto1lsp620] {
    box-shadow: inset 0 0 0 1px var(--st-new);
}

.hlx-axis-email-sources-trigger:active[b-rto1lsp620] {
    transform: translateY(1px);
}

.hlx-axis-email-sources-trigger:focus-visible[b-rto1lsp620] {
    outline: 2px solid var(--st-new);
    outline-offset: 2px;
}

.hlx-axis-email-sources-dialog-title[b-rto1lsp620]  .mud-icon-root {
    color: var(--st-new);
}

.hlx-axis-email-sources-list[b-rto1lsp620] {
    display: grid;
    max-height: min(65vh, 640px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.hlx-axis-email-sources-list:focus-visible[b-rto1lsp620] {
    outline: 2px solid var(--st-new);
    outline-offset: 2px;
    border-radius: var(--helix-radius-sm);
}

.hlx-axis-email-sources-item[b-rto1lsp620] {
    display: flex;
    align-items: flex-start;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-sm);
    background: var(--helix-panel-2);
}

.hlx-axis-email-sources-item[b-rto1lsp620]  .mud-icon-root {
    color: var(--st-new);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Artículo por debajo de la relevancia mínima: mismo ámbar que el resto de avisos de Axis
   (--helix-msg-badge-internal, --hlx-axis-result-escalated) — nunca el rojo de error. */
.hlx-axis-email-sources-item--low[b-rto1lsp620]  .mud-icon-root {
    color: #92400E;
}

.hlx-axis-email-sources-item-content[b-rto1lsp620] {
    display: grid;
    flex: 1;
    min-width: 0;
}

.hlx-axis-email-sources-item-title[b-rto1lsp620] {
    line-height: 1.4;
    word-break: break-word;
}

.hlx-axis-email-sources-item-meta[b-rto1lsp620] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hlx-axis-email-sources-item-score[b-rto1lsp620] {
    font-variant-numeric: tabular-nums;
    color: var(--helix-muted);
    white-space: nowrap;
}

.hlx-axis-email-sources-item-badge[b-rto1lsp620] {
    font-size: var(--fs-compact);
    font-weight: 600;
    color: #92400E;
    background: rgba(245, 158, 11, 0.14);
    border-radius: var(--helix-radius);
    flex-shrink: 0;
}

.hlx-axis-email-sources-actions[b-rto1lsp620]  .hlx-axis-email-sources-close.mud-button-root {
    min-height: 44px;
}

[data-helix-dark] .hlx-axis-email-sources-item--low[b-rto1lsp620]  .mud-icon-root {
    color: #FCD34D;
}

[data-helix-dark] .hlx-axis-email-sources-item-badge[b-rto1lsp620] {
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .hlx-axis-email-sources-trigger[b-rto1lsp620] {
        transition: none;
    }

    .hlx-axis-email-sources-trigger:active[b-rto1lsp620] {
        transform: none;
    }
}
/* /Components/Pages/Admin/ClienteDetalle.razor.rz.scp.css */
/* ClienteDetalle.razor — zona de peligro y diálogo de la eliminación definitiva. CSS isolation solo
   marca los elementos HTML literales de este fichero: MudButton/MudTextField renderizan su
   <button>/<input> en SU árbol, así que llegar a ellos exige ::deep bajo un literal de aquí. */

/* Mando de recuperación de acceso: mismo objetivo táctil de 44 px que el disparador de la zona de
   peligro. Anclado al shell porque la tarjeta de acciones no tiene ningún elemento HTML literal
   propio al que colgar el ::deep. */
.helix-admin-shell[b-jiwcno6xiw]  .hlx-cliente-recovery-trigger {
    min-height: 44px;
}

.helix-admin-shell[b-jiwcno6xiw]  .hlx-cliente-recovery-trigger:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.hlx-cliente-danger-zone[b-jiwcno6xiw] {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--helix-red);
    border-radius: var(--helix-radius-lg);
    background: color-mix(in srgb, var(--helix-red) 4%, var(--helix-panel));
}

.hlx-cliente-danger-zone[b-jiwcno6xiw]  .hlx-cliente-danger-trigger {
    min-height: 44px;
}

/* Un botón deshabilitado no propaga eventos de puntero: sin esto, el MudTooltip que explica por qué
   lo está no aparecería nunca al pasar el ratón por encima. */
.hlx-cliente-danger-zone[b-jiwcno6xiw]  .hlx-cliente-danger-trigger:disabled {
    pointer-events: none;
}

.hlx-cliente-danger-zone[b-jiwcno6xiw]  .hlx-cliente-danger-trigger:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.hlx-cliente-erase-title[b-jiwcno6xiw]  .hlx-cliente-erase-target-name {
    font-weight: 800;
}

.hlx-cliente-erase-title[b-jiwcno6xiw]  .hlx-cliente-erase-target-email {
    font-weight: 600;
    word-break: break-all;
}

.hlx-cliente-erase-counts[b-jiwcno6xiw] {
    list-style: none;
}

.hlx-cliente-erase-dialog-body[b-jiwcno6xiw]  .hlx-cliente-erase-confirm-field input:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.hlx-cliente-erase-dialog-actions[b-jiwcno6xiw]  .hlx-cliente-erase-confirm-btn,
.hlx-cliente-erase-dialog-actions[b-jiwcno6xiw]  .hlx-cliente-erase-cancel-btn,
.hlx-cliente-erase-dialog-actions[b-jiwcno6xiw]  .hlx-cliente-erase-close-btn {
    min-height: 44px;
}

.hlx-cliente-erase-dialog-actions[b-jiwcno6xiw]  .hlx-cliente-erase-cancel-btn:focus-visible,
.hlx-cliente-erase-dialog-actions[b-jiwcno6xiw]  .hlx-cliente-erase-confirm-btn:focus-visible,
.hlx-cliente-erase-dialog-actions[b-jiwcno6xiw]  .hlx-cliente-erase-close-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}
/* /Components/Pages/Admin/Clientes.razor.rz.scp.css */
/* Clientes.razor — mando de recuperación de acceso de la fila. CSS isolation solo marca los elementos
   HTML literales de este fichero: MudIconButton renderiza su <button> en SU árbol, así que llegar a él
   exige ::deep bajo un literal de aquí (la propia fila de acciones). */

/* Objetivo táctil de 44 px, igual que el disparador de la zona de peligro de la ficha. Solo este
   mando: es la acción de la fila que destruye credenciales. */
.hlx-clientes-row-actions[b-12onquuc5y]  .hlx-clientes-recovery-trigger {
    min-width: 44px;
    min-height: 44px;
}

.hlx-clientes-row-actions[b-12onquuc5y]  .hlx-clientes-recovery-trigger:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}
/* /Components/Pages/Admin/CustomerDataReset.razor.rz.scp.css */
/* CustomerDataReset.razor — misma zona de peligro y mismo patrón de foco que
   OperationalDataPurge.razor.css. CSS isolation solo aplica el identificador de scope a
   elementos HTML literales de este fichero: MudButton/MudTextField/MudLink renderizan su
   propio <button>/<input>/<a> en SU árbol, así que llegar a ellos exige ::deep + un elemento
   HTML literal como ancestro real. */

.hlx-cust-danger-zone[b-9ng8saw8x0] {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--helix-red);
    border-radius: var(--helix-radius-lg);
    background: color-mix(in srgb, var(--helix-red) 4%, var(--helix-panel));
}

.hlx-cust-scope-grid[b-9ng8saw8x0] {
    padding: 16px;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-sm);
    background: var(--helix-panel);
}

[b-9ng8saw8x0] .hlx-cust-trigger-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

[b-9ng8saw8x0] .hlx-cust-reset-link:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.hlx-cust-dialog-body[b-9ng8saw8x0]  .hlx-cust-confirm-field input:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.hlx-cust-dialog-actions[b-9ng8saw8x0]  .hlx-cust-cancel-btn:focus-visible,
.hlx-cust-dialog-actions[b-9ng8saw8x0]  .hlx-cust-confirm-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}
/* /Components/Pages/Admin/DataReset.razor.rz.scp.css */
/* DataReset.razor — zona de peligro real: hairline en reposo, rojo ganado (--helix-red)
   solo para la alerta y la acción destructiva, nunca como wash decorativo de la página. */

.hlx-reset-danger-zone[b-roc6zlnan8] {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--helix-red);
    border-radius: 12px;
    background: color-mix(in srgb, var(--helix-red) 4%, var(--helix-panel));
}

.hlx-reset-danger-head[b-roc6zlnan8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.hlx-reset-danger-icon[b-roc6zlnan8] {
    color: var(--helix-red);
    flex-shrink: 0;
}

.hlx-reset-intro[b-roc6zlnan8] {
    color: var(--helix-ink);
    margin-bottom: 16px;
    max-width: 62ch;
}

.hlx-reset-scope-grid[b-roc6zlnan8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--helix-line);
    border-radius: 8px;
    background: var(--helix-panel);
}

.hlx-reset-scope-label[b-roc6zlnan8] {
    display: block;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--helix-muted);
    margin-bottom: 8px;
}

.hlx-reset-scope-list[b-roc6zlnan8] {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--helix-ink);
}

.hlx-reset-scope-list--deleted li[b-roc6zlnan8]::marker { color: var(--helix-red); }
.hlx-reset-scope-list--kept li[b-roc6zlnan8]::marker { color: var(--helix-green); }

.hlx-reset-consequence[b-roc6zlnan8] { margin-bottom: 10px; }

/* ::deep obligatorio: MudText es un componente hijo y el compilador no le emite el atributo de
   scope (verificado en el .g.cs), asi que `.hlx-reset-irreversible` a secas no casa con nada y
   el aviso se quedaba sin el rojo ni la negrita que pide la zona de peligro. */
.hlx-reset-danger-zone[b-roc6zlnan8]  .hlx-reset-irreversible {
    display: block;
    color: var(--helix-danger-text);
    font-weight: 600;
    margin-bottom: 18px;
}

.hlx-reset-danger-zone[b-roc6zlnan8]  .hlx-reset-trigger-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.hlx-reset-danger-zone[b-roc6zlnan8]  .hlx-reset-trigger-btn:disabled {
    opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
    .hlx-reset-danger-zone[b-roc6zlnan8]  .hlx-reset-trigger-btn {
        transition: none;
    }
}
/* /Components/Pages/Admin/OperationalDataPurge.razor.rz.scp.css */
/* OperationalDataPurge.razor — zona de peligro real y foco visible al nivel de DataReset.
   CSS isolation solo aplica el identificador de scope a elementos HTML literales de este
   fichero (docs: "Scoped CSS only applies to HTML elements and not to Razor components").
   MudButton/MudTextField/MudLink renderizan su propio <button>/<input>/<a> en SU árbol, así
   que llegar a ellos exige ::deep + un elemento HTML literal como ancestro real (los <div>/
   <section> de esta página, o los que se añaden aquí a propósito dentro de DialogContent/
   DialogActions, que no tenían ninguno). */

.hlx-purge-danger-zone[b-3fnhz1ekpo] {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--helix-red);
    border-radius: var(--helix-radius-lg);
    background: color-mix(in srgb, var(--helix-red) 4%, var(--helix-panel));
}

.hlx-purge-scope-grid[b-3fnhz1ekpo] {
    padding: 16px;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-sm);
    background: var(--helix-panel);
}

[b-3fnhz1ekpo] .hlx-purge-trigger-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

[b-3fnhz1ekpo] .hlx-purge-reset-link:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.hlx-purge-dialog-body[b-3fnhz1ekpo]  .hlx-purge-confirm-field input:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.hlx-purge-dialog-actions[b-3fnhz1ekpo]  .hlx-purge-cancel-btn:focus-visible,
.hlx-purge-dialog-actions[b-3fnhz1ekpo]  .hlx-purge-confirm-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}
/* /Components/Pages/Admin/ZendeskAgentMapCard.razor.rz.scp.css */
/* Nunca la secuencia que cierra un comentario dentro de un comentario: lo trunca ahí, y el parser se
   come la prosa restante junto con la regla que venga detrás, que deja de aplicarse. */

/* Los controles de MudBlazor pintan su <input>/<button> en SU árbol y no reciben el atributo de scope,
   así que alcanzarlos exige ::deep anclado a la <section>/<ul>/<li> literal de esta tarjeta. */

.hlx-zd-agentmap[b-76ewwwo2a6] {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg);
    background: var(--helix-panel);
}

.hlx-zd-agentmap-actions[b-76ewwwo2a6] {
    display: flex;
    justify-content: flex-end;
}

.hlx-zd-agentmap-list[b-76ewwwo2a6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hlx-zd-agentmap-row[b-76ewwwo2a6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid var(--helix-border);
}

.hlx-zd-agentmap-row:last-child[b-76ewwwo2a6] {
    border-bottom: none;
}

.hlx-zd-agentmap-info[b-76ewwwo2a6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.hlx-zd-agentmap-name[b-76ewwwo2a6] {
    font-weight: 600;
    color: var(--helix-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fondo tintado, nunca texto de color: el significado va en el icono + la palabra, no en el tono. */
.hlx-zd-agentmap-pill[b-76ewwwo2a6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--helix-warning);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--helix-text);
    white-space: nowrap;
}

.hlx-zd-agentmap-pill--warn[b-76ewwwo2a6] {
    background: color-mix(in srgb, var(--helix-warning) 14%, var(--helix-panel));
}

/* La clase va en el Class de un <MudText>: su <p> no lleva el atributo de scope, hace falta ::deep. */
.hlx-zd-agentmap[b-76ewwwo2a6]  .hlx-zd-agentmap-count {
    color: var(--helix-muted);
}

.hlx-zd-agentmap-saving[b-76ewwwo2a6] {
    display: flex;
    align-items: center;
    color: var(--helix-muted);
    font-size: .875rem;
}

/* ── Foco, deshabilitado y objetivo táctil sobre los controles de MudBlazor (::deep desde un ancestro
   HTML literal) ──────────────────────────────────────────────────────────────────────────────────── */

/* El autocompletar NO lleva anillo propio: MudBlazor ya tiñe su borde al enfocarlo y un outline
   añadido pintaba un segundo contorno rojo. Ver ZendeskConnector.razor.css. */

.hlx-zd-agentmap-row[b-76ewwwo2a6]  .hlx-zd-agentmap-picker .mud-input.mud-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* La "×" de Clearable mide ~24px y no llega al objetivo táctil: este botón propio sí, 44×44. */
.hlx-zd-agentmap-row[b-76ewwwo2a6]  .hlx-zd-agentmap-unmap-btn {
    width: 44px;
    height: 44px;
}

.hlx-zd-agentmap-row[b-76ewwwo2a6]  .hlx-zd-agentmap-unmap-btn:focus-visible {
    /* Token de foco y no --helix-red: el rojo de marca es también el color Error de la paleta, y sin
       override de tema se queda en 2,86:1 sobre el panel oscuro. */
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.hlx-zd-agentmap-row[b-76ewwwo2a6]  .hlx-zd-agentmap-unmap-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.hlx-zd-agentmap-actions[b-76ewwwo2a6]  .hlx-zd-agentmap-refresh-btn {
    /* Altura mínima táctil: actualizar el catálogo también se pulsa con el dedo. */
    min-height: 44px;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.hlx-zd-agentmap-actions[b-76ewwwo2a6]  .hlx-zd-agentmap-refresh-btn:focus-visible {
    /* Token de foco y no --helix-red: el rojo de marca es también el color Error de la paleta, y sin
       override de tema se queda en 2,86:1 sobre el panel oscuro. */
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.hlx-zd-agentmap-actions[b-76ewwwo2a6]  .hlx-zd-agentmap-refresh-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.hlx-zd-agentmap-actions[b-76ewwwo2a6]  .hlx-zd-agentmap-refresh-btn:active:not(:disabled) {
    transform: translateY(var(--helix-press-y));
}

/* La animación de onda del skeleton (.mud-skeleton-wave) ya se detiene bajo prefers-reduced-motion de
   forma global (wwwroot/app.css), site-wide: ningún <MudSkeleton> nuevo necesita su propia regla. */
@media (prefers-reduced-motion: reduce) {
    .hlx-zd-agentmap-actions[b-76ewwwo2a6]  .hlx-zd-agentmap-refresh-btn {
        transition: box-shadow 140ms ease;
    }

    .hlx-zd-agentmap-actions[b-76ewwwo2a6]  .hlx-zd-agentmap-refresh-btn:active:not(:disabled) {
        transform: none;
    }
}
/* /Components/Pages/Admin/ZendeskConnector.razor.rz.scp.css */
/* ZendeskConnector.razor — estado del conector y formulario de credenciales.
   CSS isolation solo aplica el identificador de scope a elementos HTML literales de este fichero
   ("Scoped CSS only applies to HTML elements and not to Razor components"). MudTextField/MudSelect/
   MudButton renderizan su propio <input>/<button> en SU árbol, así que alcanzarlos exige ::deep con
   un ancestro HTML literal real: las <section>/<div> de esta página. */

.hlx-zd-status[b-aywjs9qyyk],
.hlx-zd-form[b-aywjs9qyyk] {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg);
    background: var(--helix-panel);
}

.hlx-zd-status-grid[b-aywjs9qyyk] {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.hlx-zd-status-item[b-aywjs9qyyk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.hlx-zd-status-label[b-aywjs9qyyk] {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--helix-muted);
}

/* El texto de la pastilla siempre es el token de texto del tema: el color de estado va al borde y a un
   fondo mezclado, así que el contraste se mantiene en claro y en oscuro sin duplicar paletas. */
.hlx-zd-pill[b-aywjs9qyyk] {
    align-self: flex-start;
    padding: 4px 12px;
    border: 1px solid var(--helix-border);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--helix-text);
    background: var(--helix-panel-2);
}

.hlx-zd-pill--live[b-aywjs9qyyk] {
    border-color: var(--helix-red);
    background: color-mix(in srgb, var(--helix-red) 10%, var(--helix-panel));
}

.hlx-zd-pill--shadow[b-aywjs9qyyk] {
    border-color: var(--helix-warning);
    background: color-mix(in srgb, var(--helix-warning) 14%, var(--helix-panel));
}

.hlx-zd-pill--ok[b-aywjs9qyyk] {
    border-color: var(--helix-success);
    background: color-mix(in srgb, var(--helix-success) 12%, var(--helix-panel));
}

.hlx-zd-pill--off[b-aywjs9qyyk] {
    border-color: var(--helix-border);
    background: var(--helix-panel-2);
    color: var(--helix-muted);
}

.hlx-zd-polarity[b-aywjs9qyyk] {
    max-width: 78ch;
}

.hlx-zd-actions[b-aywjs9qyyk] {
    display: flex;
    justify-content: flex-end;
}

/* ── Foco de marca sobre los controles de MudBlazor (::deep desde un ancestro literal) ─────────── */

/* Los campos NO llevan anillo propio: MudBlazor ya tiñe de rojo el borde del control al enfocarlo
   (medido: de var(--helix-border) a #CE0000), así que un outline añadido pintaba un SEGUNDO contorno
   rojo — más estrecho todavía, porque el <input> con AdornmentText es 123px menos ancho que el borde
   que envuelve input+adorno. El indicador de foco de estos controles es el de MudBlazor. */

.hlx-zd-actions[b-aywjs9qyyk]  .hlx-zd-save-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

/* Un control deshabilitado no debe parecer pulsable mientras se guarda. */
.hlx-zd-form[b-aywjs9qyyk]  .hlx-zd-field .mud-input.mud-disabled,
.hlx-zd-actions[b-aywjs9qyyk]  .hlx-zd-save-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.hlx-zd-actions[b-aywjs9qyyk]  .hlx-zd-save-btn {
    /* Altura mínima táctil: la acción primaria de esta pantalla también se pulsa con el dedo. */
    min-height: 44px;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.hlx-zd-actions[b-aywjs9qyyk]  .hlx-zd-save-btn:active:not(:disabled) {
    transform: translateY(var(--helix-press-y));
}

@media (prefers-reduced-motion: reduce) {
    .hlx-zd-actions[b-aywjs9qyyk]  .hlx-zd-save-btn {
        transition: box-shadow 140ms ease;
    }

    .hlx-zd-actions[b-aywjs9qyyk]  .hlx-zd-save-btn:active:not(:disabled) {
        transform: none;
    }
}
/* /Components/Pages/Admin/ZendeskManualImportCard.razor.rz.scp.css */
/* ZendeskManualImportCard.razor — importación manual de tickets de Zendesk por id.
   CSS isolation solo aplica el identificador de scope a elementos HTML literales de este fichero
   ("Scoped CSS only applies to HTML elements and not to Razor components"). MudTextField/MudButton/MudLink
   renderizan su propio <input>/<button>/<a> en SU árbol, así que alcanzarlos exige ::deep desde un ancestro
   HTML literal real: la <section>/<div>/<ul>/<li> de esta tarjeta. Clases propias
   (hlx-zd-manualimport-*), mismo patrón que hlx-zd-agentmap-*. */

.hlx-zd-manualimport[b-rlnuj4jecy] {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg);
    background: var(--helix-panel);
}

.hlx-zd-manualimport-actions[b-rlnuj4jecy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* Las clases de esta sección van en el Class de un <MudText>: su <p> no lleva el atributo de scope,
   hace falta ::deep. */
.hlx-zd-manualimport[b-rlnuj4jecy]  .hlx-zd-manualimport-hint {
    color: var(--helix-muted);
    max-width: 46ch;
}

.hlx-zd-manualimport[b-rlnuj4jecy]  .hlx-zd-manualimport-summary {
    color: var(--helix-muted);
}

/* Pista de duración junto a la barra: es secundaria, no compite con el estado de la acción. */
.hlx-zd-manualimport[b-rlnuj4jecy]  .hlx-zd-manualimport-wait {
    display: block;
    color: var(--helix-muted);
}

/* Vacío hasta que hay resumen: sin filas la región viva no ocupa hueco en la pantalla. */
.hlx-zd-manualimport[b-rlnuj4jecy]  .hlx-zd-manualimport-summary:empty {
    margin: 0;
}

.hlx-zd-manualimport-list[b-rlnuj4jecy] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hlx-zd-manualimport-row[b-rlnuj4jecy] {
    display: grid;
    grid-template-columns: minmax(0, 10ch) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid var(--helix-border);
}

.hlx-zd-manualimport-row:last-child[b-rlnuj4jecy] {
    border-bottom: none;
}

/* Mono para el id externo: es metadata numérica, igual que las referencias de ticket del resto de la app. */
.hlx-zd-manualimport-extid[b-rlnuj4jecy] {
    font-family: var(--helix-font-mono);
    font-size: .875rem;
    color: var(--helix-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fondo tintado, nunca texto de color: el significado va en el icono + la palabra, no en el tono. */
.hlx-zd-manualimport-pill[b-rlnuj4jecy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--helix-border);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--helix-text);
    justify-self: start;
    max-width: 100%;
}

.hlx-zd-manualimport-pill--ok[b-rlnuj4jecy] {
    border-color: var(--helix-success);
    background: color-mix(in srgb, var(--helix-success) 14%, var(--helix-panel));
}

/* «Ya importado» en neutro a propósito: no es un error, es el resultado esperado de reintentar un lote. */
.hlx-zd-manualimport-pill--neutral[b-rlnuj4jecy] {
    border-color: var(--helix-border);
    background: color-mix(in srgb, var(--helix-muted) 10%, var(--helix-panel));
}

.hlx-zd-manualimport-pill--warn[b-rlnuj4jecy] {
    border-color: var(--helix-warning);
    background: color-mix(in srgb, var(--helix-warning) 14%, var(--helix-panel));
}

.hlx-zd-manualimport-pill--error[b-rlnuj4jecy] {
    border-color: var(--helix-red);
    background: color-mix(in srgb, var(--helix-red) 12%, var(--helix-panel));
}

.hlx-zd-manualimport-link[b-rlnuj4jecy] {
    justify-self: end;
    min-width: 0;
}

/* ── Foco, deshabilitado y objetivo táctil sobre los controles de MudBlazor (::deep desde un ancestro
   HTML literal) ──────────────────────────────────────────────────────────────────────────────────── */

/* El campo de texto NO lleva anillo propio: MudBlazor ya tiñe su borde al enfocarlo, y como el token de
   foco es el rojo de marca —el mismo que su estado Error— un outline añadido pintaba un segundo contorno
   rojo indistinguible de la invalidez. Ver ZendeskAgentMapCard.razor.css y app.css:135. */
.hlx-zd-manualimport[b-rlnuj4jecy]  .hlx-zd-manualimport-input .mud-input.mud-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.hlx-zd-manualimport-actions[b-rlnuj4jecy]  .hlx-zd-manualimport-btn {
    /* Altura mínima táctil: la acción de esta tarjeta también se pulsa con el dedo. */
    min-height: 44px;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.hlx-zd-manualimport-actions[b-rlnuj4jecy]  .hlx-zd-manualimport-btn:focus-visible {
    /* Token de foco y no --helix-red: el rojo de marca se queda en 2,86:1 sobre el panel oscuro, y el
       token sí tiene override en [data-helix-dark] (app.css:3257). */
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.hlx-zd-manualimport-actions[b-rlnuj4jecy]  .hlx-zd-manualimport-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.hlx-zd-manualimport-actions[b-rlnuj4jecy]  .hlx-zd-manualimport-btn:active:not(:disabled) {
    transform: translateY(var(--helix-press-y));
}

/* Enlace al ticket creado: 44px de alto para que el objetivo táctil de la fila se cumpla también aquí. */
.hlx-zd-manualimport-row[b-rlnuj4jecy]  .hlx-zd-manualimport-ticket-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    font-family: var(--helix-font-mono);
}

.hlx-zd-manualimport-row[b-rlnuj4jecy]  .hlx-zd-manualimport-ticket-link:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
    border-radius: var(--helix-radius);
}

/* Conserva opacidad y sombra, quita solo el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .hlx-zd-manualimport-actions[b-rlnuj4jecy]  .hlx-zd-manualimport-btn {
        transition: box-shadow 140ms ease;
    }

    .hlx-zd-manualimport-actions[b-rlnuj4jecy]  .hlx-zd-manualimport-btn:active:not(:disabled) {
        transform: none;
    }
}
/* /Components/Pages/Admin/ZendeskStatusMapCard.razor.rz.scp.css */
/* ZendeskStatusMapCard.razor — paridad de estados Helix → Zendesk.
   CSS isolation solo aplica el identificador de scope a elementos HTML literales de este fichero
   ("Scoped CSS only applies to HTML elements and not to Razor components"). MudSelect/MudButton
   renderizan su propio <input>/<button> en SU árbol, así que alcanzarlos exige ::deep con un
   ancestro HTML literal real: las <section>/<div> de esta tarjeta. */

.hlx-zd-statusmap[b-420fzw0hd2] {
    margin-top: 20px;
    padding: 24px;
    border: 1px solid var(--helix-border);
    border-radius: var(--helix-radius-lg);
    background: var(--helix-panel);
}

.hlx-zd-map-grid[b-420fzw0hd2] {
    display: flex;
    flex-direction: column;
}

/* Columna de selector a ancho fijo: acota el MudSelect sin tocar su CSS interno. */
.hlx-zd-map-row[b-420fzw0hd2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 200px;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid var(--helix-border);
}

.hlx-zd-map-row:last-child[b-420fzw0hd2] {
    border-bottom: none;
}

.hlx-zd-map-from[b-420fzw0hd2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hlx-zd-map-name[b-420fzw0hd2] {
    font-weight: 600;
    color: var(--helix-text);
}

.hlx-zd-map-cat[b-420fzw0hd2] {
    font-size: .75rem;
    color: var(--helix-muted);
}

.hlx-zd-map-actions[b-420fzw0hd2] {
    display: flex;
    justify-content: flex-end;
}

/* ── Foco, deshabilitado y movimiento sobre los controles de MudBlazor (::deep desde un ancestro literal) ── */

/* Los desplegables NO llevan anillo propio: MudBlazor ya tiñe su borde al enfocarlos y un outline
   añadido pintaba un segundo contorno rojo. Ver ZendeskConnector.razor.css. */

.hlx-zd-map-actions[b-420fzw0hd2]  .hlx-zd-map-save-btn {
    /* Altura mínima táctil: guardar la paridad también se pulsa con el dedo. */
    min-height: 44px;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.hlx-zd-map-actions[b-420fzw0hd2]  .hlx-zd-map-save-btn:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

.hlx-zd-map-actions[b-420fzw0hd2]  .hlx-zd-map-save-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.hlx-zd-map-actions[b-420fzw0hd2]  .hlx-zd-map-save-btn:active:not(:disabled) {
    transform: translateY(var(--helix-press-y));
}

@media (prefers-reduced-motion: reduce) {
    .hlx-zd-map-actions[b-420fzw0hd2]  .hlx-zd-map-save-btn {
        transition: box-shadow 140ms ease;
    }

    .hlx-zd-map-actions[b-420fzw0hd2]  .hlx-zd-map-save-btn:active:not(:disabled) {
        transform: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.hlx-login-root[b-r8wnu73q5g] {
    /* El login es SIEMPRE claro (tarjeta blanca sobre fondo oscuro fijo). Fijamos los
       neutros cálidos aquí para que data-helix-dark (persistido en localStorage y
       aplicado al elemento raiz antes del primer pintado) NO invierta el texto de la
       tarjeta a gris claro sobre blanco (regresion BUG-20260629-005). */
    --helix-text: #1C1A16;
    --helix-ink: #1C1A16;
    --helix-muted: #7A7366;
    --helix-subtle: #A8A092;
    --helix-border: #E7E0D3;
    --helix-surface: #FFFFFF;
    /* Duraciones de motion propias del login (Fase 0): entrada de la tarjeta al primer
       pintado y swap entre paneles del chooser (enhanced-nav). Reutilizan --ease-out /
       --ease-in-out ya definidos en app.css. */
    --hlx-dur-entrance: .5s;
    --hlx-dur-swap: .28s;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    position: relative;
    overflow: hidden;
    /* Fondo corporativo oscuro a pantalla completa (estilo login de bookingengine):
       degradado navy/carbón con un halo rojo Juniper sutil. */
    background:
        radial-gradient(900px 500px at 78% -12%, rgba(37, 60, 96, .55) 0%, transparent 60%),
        radial-gradient(820px 620px at 12% 110%, rgba(206, 0, 0, .34) 0%, rgba(206, 0, 0, .12) 42%, transparent 66%),
        linear-gradient(135deg, #0B1220 0%, #05070A 100%);
    font-family: var(--helix-font);
}

/* Antiguas formas navy decorativas: ya no aplican sobre el fondo oscuro. */
.hlx-login-blob[b-r8wnu73q5g] { display: none; }

.hlx-login-card[b-r8wnu73q5g] {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    padding: 28px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
    animation: hlx-login-card-in-b-r8wnu73q5g var(--hlx-dur-entrance) var(--ease-out) both;
}

/* Entrada al primer pintado (Fase 1): la tarjeta y su contenido se asientan con un
   stagger leve. Se anima el CONTENEDOR estable (.hlx-login-card/-brand/-body/-footer),
   nunca un nodo que dependa del estado interactivo del componente — si no, un
   re-render (p. ej. al teclear en el form) recrearia ese nodo y la animacion se
   re-dispararia. */
@keyframes hlx-login-card-in-b-r8wnu73q5g {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hlx-login-brand[b-r8wnu73q5g] { animation: hlx-login-card-in-b-r8wnu73q5g var(--hlx-dur-entrance) var(--ease-out) .06s both; }
.hlx-login-body[b-r8wnu73q5g]  { animation: hlx-login-card-in-b-r8wnu73q5g var(--hlx-dur-entrance) var(--ease-out) .12s both; }
.hlx-login-footer[b-r8wnu73q5g] { animation: hlx-login-card-in-b-r8wnu73q5g var(--hlx-dur-entrance) var(--ease-out) .18s both; }

@media (prefers-reduced-motion: reduce) {
    .hlx-login-card[b-r8wnu73q5g],
    .hlx-login-brand[b-r8wnu73q5g],
    .hlx-login-body[b-r8wnu73q5g],
    .hlx-login-footer[b-r8wnu73q5g] {
        animation: none;
    }
}

/* Transición entre paneles (Fase 2): swap chooser ↔ agente ↔ cliente ↔ Volver. El
   enhanced-nav de Blazor morfea el DOM en vez de reemplazarlo, así que el keyframe
   no se re-dispararía por sí solo; el @key en .hlx-login-panel (ver markup, una key
   distinta por estado) fuerza a Blazor a recrear el subárbol en cada cambio para que
   la animación arranque de nuevo. El foco se devuelve a ese mismo contenedor (ver
   OnAfterRenderAsync); "from" arranca en opacity .4, no 0, para que el anillo de foco
   del contenedor no sea invisible durante el fade. */
@keyframes hlx-login-panel-in-b-r8wnu73q5g {
    from { opacity: .4; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hlx-login-panel[b-r8wnu73q5g] {
    animation: hlx-login-panel-in-b-r8wnu73q5g var(--hlx-dur-swap) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
    .hlx-login-panel[b-r8wnu73q5g] { animation: none; }
}

.hlx-login-logo-wrap[b-r8wnu73q5g] {
    margin-bottom: 18px;
}

.hlx-login-logo[b-r8wnu73q5g] {
    display: block;
    width: auto;
    height: 38px;
    max-width: 220px;
}

/* Lockup horizontal de Resolve a ancho del box. El max-width lo fija la legibilidad del byline
   (ver el porqué en app.css, misma regla duplicada: cambiar las dos). */
.hlx-login-brand[b-r8wnu73q5g] {
    margin-bottom: 22px;
}
.hlx-login-brand-logo[b-r8wnu73q5g] {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;   /* centrado en la tarjeta */
}

.hlx-login-title[b-r8wnu73q5g] {
    margin: 0 0 16px;
    font-size: var(--fs-title);
    line-height: 1.2;
    color: var(--helix-text);
}

.hlx-login-desc[b-r8wnu73q5g] {
    margin: 0 0 16px;
    color: var(--helix-muted);
}

.hlx-login-dev-banner[b-r8wnu73q5g],
.hlx-login-error-banner[b-r8wnu73q5g],
.hlx-login-info-banner[b-r8wnu73q5g] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: var(--fs-compact);
}

.hlx-login-dev-banner[b-r8wnu73q5g] {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #92400e;
}

.hlx-login-error-banner[b-r8wnu73q5g] {
    background: #fef2f2;
    color: #991b1b;
}

.hlx-login-info-banner[b-r8wnu73q5g] {
    background: #eff6ff;
    color: #1e40af;
}

.hlx-login-dev-grid[b-r8wnu73q5g] {
    display: grid;
    gap: 8px;
}

.hlx-login-dev-user[b-r8wnu73q5g] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--helix-text);
    text-decoration: none;
    background: #fff;
}

.hlx-login-dev-user:hover[b-r8wnu73q5g] {
    border-color: #CE0000;
}

.hlx-login-dev-avatar[b-r8wnu73q5g] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--helix-text);
    color: #fff;
    font-size: var(--fs-meta);
    font-weight: var(--fw-bold);
}

.hlx-login-dev-avatar--client[b-r8wnu73q5g] {
    background: #CE0000;
}

.hlx-login-dev-name[b-r8wnu73q5g] {
    font-weight: var(--fw-bold);
}

.hlx-login-dev-role[b-r8wnu73q5g],
.hlx-login-footer[b-r8wnu73q5g],
.hlx-login-forgot[b-r8wnu73q5g] {
    font-size: var(--fs-meta);
    color: var(--helix-muted);
}

.hlx-login-divider[b-r8wnu73q5g] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: var(--helix-muted);
    font-size: var(--fs-meta);
}

.hlx-login-divider[b-r8wnu73q5g]::before,
.hlx-login-divider[b-r8wnu73q5g]::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--helix-border);
}

.hlx-login-portal-form[b-r8wnu73q5g] {
    display: grid;
    gap: 10px;
}

.hlx-login-field[b-r8wnu73q5g] {
    width: 100%;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    padding: 11px 12px;
    /* 16px fijo: evita el zoom de viewport (y el salto de letra) al enfocar en iOS. */
    font-family: inherit;
    font-size: var(--fs-lead);
}

.hlx-login-submit[b-r8wnu73q5g],
.hlx-login-ms-btn[b-r8wnu73q5g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 11px 14px;
    background: #CE0000;
    color: #fff;
    text-decoration: none;
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.hlx-login-ms-btn[b-r8wnu73q5g] {
    width: 100%;
}

/* Hover de los botones de acción (rojo Juniper): oscurecer manteniendo texto blanco.
   Imprescindible porque app.css define hovers para una base navy/blanca que aquí
   dejarían el botón Microsoft en blanco (texto invisible) y el de cliente en azul. */
.hlx-login-submit:hover[b-r8wnu73q5g],
.hlx-login-ms-btn:hover[b-r8wnu73q5g] {
    background: #A80000;
    box-shadow: 0 6px 18px rgba(206, 0, 0, .18);
}

.hlx-login-forgot[b-r8wnu73q5g] {
    display: inline-block;
    margin-top: 12px;
}

.hlx-login-footer[b-r8wnu73q5g] {
    margin: 20px 0 0;
    text-align: center;
}

/* ── Chooser: dos opciones de acceso (SSO agente / cliente final) ───────── */
.hlx-login-choice[b-r8wnu73q5g] {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.hlx-login-choice-btn[b-r8wnu73q5g] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 1px solid var(--helix-border);
    border-radius: 10px;
    padding: 16px 18px;
    background: #fff;
    color: var(--helix-text);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .05s var(--ease-out);
}

.hlx-login-choice-btn:hover[b-r8wnu73q5g] {
    border-color: #CE0000;
    box-shadow: 0 6px 18px rgba(206, 0, 0, .10);
}

.hlx-login-choice-btn:active[b-r8wnu73q5g] {
    transform: translateY(1px);
}

.hlx-login-choice-icon[b-r8wnu73q5g] {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    color: #fff;
}

.hlx-login-choice-icon--agent[b-r8wnu73q5g] { background: #0B1929; }
.hlx-login-choice-icon--client[b-r8wnu73q5g] { background: #CE0000; }
/* Icono SSO con el logo Juniper: fondo claro y la imagen contenida con padding. */
.hlx-login-choice-icon--brand[b-r8wnu73q5g] { background: #fff; border: 1px solid var(--helix-border); padding: 7px; }
.hlx-login-choice-icon--brand img[b-r8wnu73q5g] { width: 100%; height: 100%; object-fit: contain; display: block; }

.hlx-login-choice-text[b-r8wnu73q5g] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hlx-login-choice-title[b-r8wnu73q5g] {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lead);
    color: var(--helix-text);
}

.hlx-login-choice-sub[b-r8wnu73q5g] {
    font-size: var(--fs-meta);
    color: var(--helix-muted);
}

.hlx-login-choice-arrow[b-r8wnu73q5g] {
    margin-left: auto;
    color: var(--helix-subtle);
    flex: none;
}

.hlx-login-back[b-r8wnu73q5g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: var(--fs-compact);
    font-weight: 600;
    color: var(--helix-muted);
    text-decoration: none;
}

.hlx-login-back:hover[b-r8wnu73q5g] { color: #CE0000; }

/* Barra de vista previa (solo Development) para conmutar entre variantes del panel de agente */
.hlx-login-preview-bar[b-r8wnu73q5g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    font-size: var(--fs-meta);
    color: var(--helix-muted);
}

.hlx-login-preview-bar a[b-r8wnu73q5g] {
    border: 1px solid var(--helix-border);
    border-radius: 999px;
    padding: 3px 10px;
    color: var(--helix-muted);
    text-decoration: none;
    font-weight: 600;
}

.hlx-login-preview-bar a:hover[b-r8wnu73q5g] { border-color: #CE0000; color: #CE0000; }

.hlx-login-preview-bar a.hlx-pv-active[b-r8wnu73q5g] {
    background: #0B1929;
    border-color: #0B1929;
    color: #fff;
}

/* ── Passkey (login por credencial del dispositivo) ───────────────────────────
   El bloque y su divisor nacen OCULTOS y solo se muestran cuando helixPasskeys.js marca la raíz
   del documento como "supported". Así el botón se OMITE en un navegador sin soporte en vez de
   salir deshabilitado —un botón apagado sin explicación se lee como avería—, sobrevive a los
   repintados de Blazor (el panel se recrea con @key) y, si el módulo no llega a cargar, el login
   por contraseña queda intacto. El precio es que en un navegador compatible el botón aparece un
   instante después del primer pintado, que es el lado seguro del intercambio. */
.hlx-login-passkey[b-r8wnu73q5g],
.hlx-login-divider--passkey[b-r8wnu73q5g] {
    display: none;
}

html[data-helix-passkey-login="supported"] .hlx-login-passkey[b-r8wnu73q5g] {
    display: grid;
    gap: 6px;
    margin-bottom: 4px;
}

html[data-helix-passkey-login="supported"] .hlx-login-divider--passkey[b-r8wnu73q5g] {
    display: flex;
}

/* Secundario/outlined a propósito: el primario rojo es la contraseña, que sigue siendo la vía de
   todos los clientes. min-height explícito porque el padding de .hlx-login-submit deja ~40 px y el
   objetivo táctil mínimo es 44. */
.hlx-login-passkey-btn[b-r8wnu73q5g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--helix-border);
    border-radius: 8px;
    padding: 11px 14px;
    background: transparent;
    color: var(--helix-text);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.hlx-login-passkey-btn:hover[b-r8wnu73q5g] {
    background: var(--helix-subtle);
}

/* Anillo propio: el de app.css cubre los controles de MudBlazor, y este botón es HTML plano. */
.hlx-login-passkey-btn:focus-visible[b-r8wnu73q5g] {
    outline: 3px solid var(--helix-focus-ring);
    outline-offset: 2px;
}

/* Estado de carga mientras el autenticador tiene el diálogo abierto: el JS deshabilita el botón
   para que no se abran dos ceremonias, de las que solo la última tiene estado válido en la cookie. */
.hlx-login-passkey-btn:disabled[b-r8wnu73q5g] {
    opacity: .6;
    cursor: progress;
}

.hlx-login-passkey-hint[b-r8wnu73q5g],
.hlx-login-passkey-note[b-r8wnu73q5g] {
    margin: 0;
    color: var(--helix-muted);
    font-size: var(--fs-meta);
}

/* Host no canónico: es una limitación conocida de WebAuthn, no un error, así que no lleva el
   tratamiento rojo del banner de fallo. */
.hlx-login-passkey-note[b-r8wnu73q5g] {
    margin: 0 0 12px;
}
/* /Components/Pages/Setup.razor.rz.scp.css */
/* Asistente de primer arranque — única pantalla "wow" justificada de Helix (primer admin, una vez).
   --setup-accent se fija inline desde Setup.razor.cs (color de marca elegido en el paso 2, con
   fallback al rojo de marca) y gobierna la barra de progreso y los botones primarios. */

.hlx-setup-root[b-tzwnjg41d1] {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    overflow: hidden;
    background: var(--helix-bg);
    font-family: var(--helix-font);
    color: var(--helix-ink);
}

/* Malla cálida animada: solo transform/opacity en pseudo-elementos → sin reflow, 60fps. */
.hlx-setup-mesh[b-tzwnjg41d1] {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 32% at 18% 14%, rgba(206, 0, 0, .10) 0%, transparent 70%),
        radial-gradient(46% 40% at 84% 20%, rgba(241, 236, 226, .9) 0%, transparent 65%),
        radial-gradient(40% 46% at 76% 86%, rgba(206, 0, 0, .07) 0%, transparent 70%),
        radial-gradient(50% 42% at 12% 88%, rgba(250, 247, 241, .95) 0%, transparent 68%);
    animation: hlx-setup-mesh-drift-b-tzwnjg41d1 22s ease-in-out infinite;
}

@keyframes hlx-setup-mesh-drift-b-tzwnjg41d1 {
    0%   { transform: translate3d(0, 0, 0) scale(1);       opacity: .9; }
    50%  { transform: translate3d(-1.5%, 1.5%, 0) scale(1.05); opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1);       opacity: .9; }
}

.hlx-setup-card[b-tzwnjg41d1] {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    background: var(--helix-panel);
    border: 1px solid var(--helix-line);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(28, 26, 22, .12);
    padding: 32px clamp(20px, 5vw, 40px) 28px;
}

/* ── Progreso ─────────────────────────────────────────────────────────────── */
.hlx-setup-progress[b-tzwnjg41d1] {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.hlx-setup-progress-track[b-tzwnjg41d1] {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 13px;
    height: 2px;
    background: var(--helix-line);
    z-index: 0;
    border-radius: 2px;
}

.hlx-setup-progress-fill[b-tzwnjg41d1] {
    height: 100%;
    border-radius: 2px;
    background: var(--setup-accent, var(--helix-red));
    transition: width .35s var(--ease-out, ease);
}

.hlx-setup-progress-item[b-tzwnjg41d1] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.hlx-setup-progress-dot[b-tzwnjg41d1] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--helix-panel);
    border: 2px solid var(--helix-line);
    color: var(--helix-muted);
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.hlx-setup-progress-item--active .hlx-setup-progress-dot[b-tzwnjg41d1] {
    border-color: var(--setup-accent, var(--helix-red));
    color: var(--setup-accent, var(--helix-red));
    transform: scale(1.12);
}

.hlx-setup-progress-item--done .hlx-setup-progress-dot[b-tzwnjg41d1] {
    border-color: var(--helix-green);
    background: var(--helix-green);
    color: #fff;
}

.hlx-setup-progress-label[b-tzwnjg41d1] {
    font-size: 11px;
    font-weight: 600;
    color: var(--helix-muted);
    text-align: center;
    max-width: 76px;
}

.hlx-setup-progress-item--active .hlx-setup-progress-label[b-tzwnjg41d1] { color: var(--helix-ink); }

.hlx-setup-step-of[b-tzwnjg41d1] {
    margin: 4px 0 20px;
    font-size: 12px;
    color: var(--helix-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Transición de paso: @key en Setup.razor fuerza un nodo nuevo → se repite la animación. ── */
.hlx-setup-step[b-tzwnjg41d1] {
    animation: hlx-setup-step-in-b-tzwnjg41d1 .28s var(--ease-out, cubic-bezier(.2, .8, .2, 1)) both;
}

@keyframes hlx-setup-step-in-b-tzwnjg41d1 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hlx-setup-fields > *[b-tzwnjg41d1] {
    animation: hlx-setup-field-in-b-tzwnjg41d1 .3s var(--ease-out, ease) both;
}

.hlx-setup-fields > *:nth-child(1)[b-tzwnjg41d1] { animation-delay: .02s; }
.hlx-setup-fields > *:nth-child(2)[b-tzwnjg41d1] { animation-delay: .06s; }
.hlx-setup-fields > *:nth-child(3)[b-tzwnjg41d1] { animation-delay: .10s; }
.hlx-setup-fields > *:nth-child(4)[b-tzwnjg41d1] { animation-delay: .14s; }
.hlx-setup-fields > *:nth-child(5)[b-tzwnjg41d1] { animation-delay: .18s; }
.hlx-setup-fields > *:nth-child(6)[b-tzwnjg41d1] { animation-delay: .22s; }
.hlx-setup-fields > *:nth-child(n+7)[b-tzwnjg41d1] { animation-delay: .26s; }

@keyframes hlx-setup-field-in-b-tzwnjg41d1 {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hlx-setup-welcome[b-tzwnjg41d1] { text-align: center; padding: 12px 0 4px; }
.hlx-setup-brand[b-tzwnjg41d1] { color: var(--setup-accent, var(--helix-red)); margin-bottom: 12px; }

.hlx-setup-success[b-tzwnjg41d1] { text-align: center; padding: 24px 0; }

.hlx-setup-success-icon[b-tzwnjg41d1] {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--helix-green);
    color: #fff;
    animation: hlx-setup-check-in-b-tzwnjg41d1 .3s var(--ease-out, ease) both;
}

.hlx-setup-title[b-tzwnjg41d1] {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.hlx-setup-subtitle[b-tzwnjg41d1] {
    margin: 0 0 20px;
    color: var(--helix-muted);
    font-size: 14px;
    line-height: 1.5;
}

.hlx-setup-helper[b-tzwnjg41d1] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--helix-muted);
}

.hlx-setup-field-error[b-tzwnjg41d1] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--helix-red);
}

.hlx-setup-error-banner[b-tzwnjg41d1] {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--helix-red) 6%, var(--helix-panel));
    color: var(--helix-red-dark);
    font-size: 13px;
}

/* Check verde animado (dibujo de trazo) junto a un campo ya válido. */
.hlx-setup-check[b-tzwnjg41d1] {
    display: inline-flex;
    margin-left: 8px;
    color: var(--helix-green);
    vertical-align: middle;
    animation: hlx-setup-check-in-b-tzwnjg41d1 .25s var(--ease-out, ease) both;
}

@keyframes hlx-setup-check-in-b-tzwnjg41d1 {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

.hlx-setup-logo-preview[b-tzwnjg41d1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.hlx-setup-logo-preview img[b-tzwnjg41d1] {
    height: 40px;
    max-width: 140px;
    object-fit: contain;
    border: 1px solid var(--helix-line);
    border-radius: 6px;
    background: var(--helix-panel);
    padding: 4px;
}

.hlx-setup-link-btn[b-tzwnjg41d1] {
    border: 0;
    background: none;
    padding: 0;
    color: var(--helix-muted);
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
}

.hlx-setup-link-btn:hover[b-tzwnjg41d1] { color: var(--helix-red); }

.hlx-setup-color[b-tzwnjg41d1] {
    width: 56px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--helix-line);
    border-radius: 8px;
    background: var(--helix-panel);
    cursor: pointer;
}

.hlx-setup-preview[b-tzwnjg41d1] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 14px;
    border: 1px solid var(--helix-line);
    border-radius: 8px;
    background: var(--helix-soft);
}

.hlx-setup-preview-label[b-tzwnjg41d1] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--helix-muted);
}

.hlx-setup-preview-value[b-tzwnjg41d1],
.hlx-setup-mono[b-tzwnjg41d1] {
    font-family: var(--helix-font-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--helix-ink);
}

.hlx-setup-summary[b-tzwnjg41d1] {
    display: grid;
    gap: 10px;
    margin: 4px 0 0;
}

.hlx-setup-summary-row[b-tzwnjg41d1] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--helix-line);
}

.hlx-setup-summary-row dt[b-tzwnjg41d1] {
    color: var(--helix-muted);
    font-size: 13px;
}

.hlx-setup-summary-row dd[b-tzwnjg41d1] {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

/* ── Navegación ───────────────────────────────────────────────────────────── */
.hlx-setup-actions[b-tzwnjg41d1] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}

.hlx-setup-btn[b-tzwnjg41d1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 11px 18px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .05s var(--ease-out, ease), box-shadow .15s var(--ease-out, ease), background .15s ease, opacity .15s ease;
    margin-left: auto;
}

.hlx-setup-btn--primary[b-tzwnjg41d1] {
    border: 0;
    background: var(--setup-accent, var(--helix-red));
    color: #fff;
}

.hlx-setup-btn--primary:hover:not(:disabled)[b-tzwnjg41d1] {
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

.hlx-setup-btn--primary:active:not(:disabled)[b-tzwnjg41d1] { transform: translateY(1px); }

.hlx-setup-btn--ghost[b-tzwnjg41d1] {
    border: 1px solid var(--helix-line);
    background: var(--helix-panel);
    color: var(--helix-muted);
    margin-left: 0;
    margin-right: auto;
}

.hlx-setup-btn--ghost:hover:not(:disabled)[b-tzwnjg41d1] { border-color: var(--helix-muted); color: var(--helix-ink); }

.hlx-setup-btn:disabled[b-tzwnjg41d1] { opacity: .5; cursor: not-allowed; }

.hlx-setup-btn:focus-visible[b-tzwnjg41d1] {
    outline: 2px solid var(--setup-accent, var(--helix-focus-ring));
    outline-offset: 2px;
}

.hlx-setup-btn-spinner[b-tzwnjg41d1] { color: #fff; }

/* ── Reduced motion: conserva opacidad, elimina transform/animación decorativa. ── */
@media (prefers-reduced-motion: reduce) {
    .hlx-setup-mesh[b-tzwnjg41d1] { animation: none; }
    .hlx-setup-step[b-tzwnjg41d1],
    .hlx-setup-fields > *[b-tzwnjg41d1],
    .hlx-setup-check[b-tzwnjg41d1] {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .hlx-setup-progress-dot[b-tzwnjg41d1],
    .hlx-setup-progress-fill[b-tzwnjg41d1],
    .hlx-setup-btn[b-tzwnjg41d1] {
        transition: none;
    }
}
/* /Components/Tickets/RequesterLabel.razor.rz.scp.css */
/* El id de Zendesk es un identificador de ticket: mono, como las referencias de Helix. Hereda el
   tamaño del sitio donde se pinta (meta de la cola, card, línea de Home), que varían entre 12 y 13px. */

.hlx-requester-zendesk[b-bc78i6lo8f] {
    font-family: var(--helix-font-mono);
    font-size: .95em;
    color: inherit;
}

a.hlx-requester-zendesk[b-bc78i6lo8f] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    transition: color 130ms var(--ease-out);
}

a.hlx-requester-zendesk:hover[b-bc78i6lo8f] {
    color: var(--helix-ink);
    text-decoration-style: solid;
}

a.hlx-requester-zendesk:focus-visible[b-bc78i6lo8f] {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
    border-radius: 3px;
}

/* El subrayado punteado marca «sale de Helix» sin depender del color, que aquí se hereda del
   contenedor y puede ser el gris de la meta. */
@media (prefers-reduced-motion: reduce) {
    a.hlx-requester-zendesk[b-bc78i6lo8f] { transition: none; }
}
/* /Components/Tickets/TicketFilterPanel.razor.rz.scp.css */
/* Panel lateral de filtros de la cola. Plano en reposo: hairline entre secciones, sin sombra
   decorativa (la elevación la pone el propio drawer al flotar sobre la lista). */

.hlx-filter-panel[b-bdtaonmgez] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--helix-surface);
}

.hlx-filter-panel-head[b-bdtaonmgez] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 14px 20px;
    border-bottom: 1px solid var(--helix-line);
}

/* Eco de la consulta: el panel enseña la cadena que está escribiendo, así el agente aprende la
   sintaxis usando el panel y puede repetirla a mano. */
.hlx-filter-echo[b-bdtaonmgez] {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 20px;
    background: var(--helix-panel-2);
    border-bottom: 1px solid var(--helix-line);
}

.hlx-filter-echo-label[b-bdtaonmgez] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--helix-muted);
    flex-shrink: 0;
}

.hlx-filter-echo-value[b-bdtaonmgez] {
    font-family: var(--helix-font-mono);
    font-size: 12px;
    color: var(--helix-ink);
    word-break: break-word;
    min-width: 0;
}

.hlx-filter-help[b-bdtaonmgez] {
    margin-top: 4px;
    border-top: 1px solid var(--helix-line);
    padding-top: 12px;
}

.hlx-filter-help summary[b-bdtaonmgez] {
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}

.hlx-filter-help summary:focus-visible[b-bdtaonmgez] { outline: 2px solid var(--helix-focus-ring); outline-offset: 2px; }

.hlx-filter-help-intro[b-bdtaonmgez],
.hlx-filter-help-note[b-bdtaonmgez] {
    margin: 8px 0;
    font-size: 12px;
    color: var(--helix-muted);
    line-height: 1.5;
}

.hlx-filter-help-table[b-bdtaonmgez] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.hlx-filter-help-table th[b-bdtaonmgez] {
    text-align: left;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--helix-muted);
    border-bottom: 1px solid var(--helix-line);
}

.hlx-filter-help-table td[b-bdtaonmgez] { padding: 4px 6px; vertical-align: top; }

.hlx-filter-help-table code[b-bdtaonmgez] {
    font-family: var(--helix-font-mono);
    font-size: 11px;
    background: var(--helix-soft);
    border-radius: 4px;
    padding: 1px 5px;
}

.hlx-filter-help-values td[b-bdtaonmgez] {
    padding-top: 0;
    padding-bottom: 8px;
    color: var(--helix-muted);
    line-height: 1.45;
}

.hlx-filter-panel-body[b-bdtaonmgez] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hlx-filter-row[b-bdtaonmgez] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* El control ocupa el ancho y la ✕ queda fuera, alineada con la caja (no con la etiqueta). */
.hlx-filter-row-body[b-bdtaonmgez] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hlx-filter-row-control[b-bdtaonmgez] {
    flex: 1 1 auto;
    min-width: 0;
}

.hlx-filter-date[b-bdtaonmgez] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hlx-filter-date-range[b-bdtaonmgez] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Botón HTML plano, no MudButton: dentro de ActivatorContent un MudButton captura el clic y el menú
   no abre. Se le da el aspecto de acción de texto a mano. */
.hlx-filter-add[b-bdtaonmgez] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--helix-ink);
    font: inherit;
    font-weight: 600;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 130ms var(--ease-out);
}

.hlx-filter-add:hover[b-bdtaonmgez] { background: var(--helix-soft); }
.hlx-filter-add:focus-visible[b-bdtaonmgez] { outline: 2px solid var(--helix-focus-ring); outline-offset: 2px; }
.hlx-filter-add[b-bdtaonmgez] { min-height: 44px; }

.hlx-filter-empty[b-bdtaonmgez] {
    margin: 4px 0;
    font-size: 13px;
    color: var(--helix-muted);
}

.hlx-filter-panel-foot[b-bdtaonmgez] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 14px 20px;
    border-top: 1px solid var(--helix-line);
    background: var(--helix-panel-2);
}

.hlx-filter-count[b-bdtaonmgez] {
    flex: 1 1 auto;
    font-size: 12px;
    color: var(--helix-muted);
}

/* Los controles son componentes MudBlazor: el CSS aislado no los alcanza sin ::deep anclado a un
   ancestro HTML literal (aquí, el propio .hlx-filter-panel). */
.hlx-filter-panel[b-bdtaonmgez]  .mud-input-control {
    margin-top: 0;
}

.hlx-filter-panel[b-bdtaonmgez]  .mud-input-slot {
    font-size: 13px;
}

/* Objetivo táctil ≥44px en los icon-buttons (cerrar / quitar fila) y en los botones del pie:
   el panel no tiene la altura fija de 30px de la tira de filtros, así que aquí se puede crecer. */
.hlx-filter-panel[b-bdtaonmgez]  .hlx-filter-icon-btn.mud-icon-button {
    min-width: 44px;
    min-height: 44px;
}

.hlx-filter-panel[b-bdtaonmgez]  .hlx-filter-footer-btn.mud-button-root {
    min-height: 44px;
}

.hlx-filter-panel[b-bdtaonmgez]  .hlx-filter-icon-btn.mud-icon-button:focus-visible,
.hlx-filter-panel[b-bdtaonmgez]  .hlx-filter-footer-btn.mud-button-root:focus-visible {
    outline: 2px solid var(--helix-focus-ring);
    outline-offset: 2px;
}